Conceal or style the filter panel in a DT datatable

Here is an example to consider:

library(DT)
L <- 10
datatable(
  data.frame(
    var1 = sapply(1:L, function(x) 
      paste("<X>",paste0(x,
                         letters, 
                         LETTERS, 
                         "\n", 
                         collapse=" "))),
    var2 = round(rnorm(L),2)
  ) 
)

Below is the output for reference:

https://i.stack.imgur.com/rjzvU.png

I am looking for a way to either hide or customize (change background color and font family) the top section of the output that includes "Show X entries" along with the "Search" tab. While I have managed to format rows and headers using custom CSS and JS code within the options of datatable, I am struggling with handling the filter pane.

If it matters, I plan to incorporate these outputs into a Shiny web-app.

Thank you in advance for any assistance.

jquerycssrdatatableshiny

Answer №1

Utilize the dom parameter to specify which parts of the datatable should be displayed and in what order.

For additional details, check out: https://datatables.net/reference/option/dom

Adjust the overall style of the entire datatable using the style parameter. Options include: "default", "bootstrap", "bootstrap4", "foundation", "jqueryui", "material", "semanticui", "uikit".

More information available here: https://datatables.net/manual/styling/

library(DT)
L <- 10

dataset <- data.frame(
    var1 = sapply(1:L, function(x) 
      paste("<X>",paste0(x,
                         letters, 
                         LETTERS, 
                         "\n", 
                         collapse=" "))),
    var2 = round(rnorm(L),2)
  )

  datatable(dataset, style = 'bootstrap', options = list(
    dom = 't')
)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The process of displaying only the month name as the title in Full Calendar

Is there a way to display the Full Calendar title with only the month name instead of "month name year name"? Here is my code attempt: $('#calendar').fullCalendar({ header: { left: 'prev', center: 'title' ...

javascriptjquery

Is it possible to adjust the color of this AnchorLink as I scroll down?

Currently struggling to update the color of a logo as I scroll. While the navigation bar successfully changes colors, the logo remains stagnant. Here is the excerpt from my existing code: navigation.js return ( <Nav {...this.props} scrolled={this ...

javascriptcssreactjsscrollonscroll

The simple method of adjusting text opacity using CSS hover doesn't function as expected

I attempted to create divs in which hovering over one side would cause the opposite text to disappear. The functionality works flawlessly when hovering over the left text, as the right text disappears as intended. However, it is not working in the reverse ...

htmlcsstexthoveropacity

The background image is not appearing on the div as expected

I've been attempting to create a div and set a background image for it using jQuery, but I seem to be facing issues. When I try setting the background color to white, it works fine. Here's the code snippet: function appendToDom(poster) { ...

javascriptjqueryhtmlcssnode.js

JQuery Validation appears to be failing to validate

Having some trouble with the JQuery validator plugin in my Rails app. It's not displaying any errors or validating anything. Can't seem to figure out what's wrong with my code. Any assistance would be greatly appreciated! $(document).ready( ...

jqueryjquery-pluginsjquery-validate

What could be causing the malfunction of my navbar and carousel functionality?

I am currently facing some challenges with the carousel in my HTML code. I am unable to get it to display images properly. Additionally, there is an issue with the background color of my navigation bar - it doesn't stay at 100% width. Also, when using ...

htmlcsstwitter-bootstrapcarousel

Show only percentages in jqplot graphical representation

Currently, I am in the process of incorporating the jqplot jQuery chart plugin into my Rails application. The example provided by jqplot includes this data: var data = [ ['Heavy Industry', 12],['Retail', 9], ['Light Industry&a ...

jqueryjqplot

Can anyone recommend any offline editors for HTML, CSS, and JavaScript similar to JSFiddle, jsbin, or codepen?

Is there an alternative to JSFiddle.net that allows users to experiment with Javascript, HTML, and CSS offline in a similar way? ...

javascripthtmlcss

Discrepancies in media screen queries displaying on inspection tools compared to actual device

I've done some research online but I'm still struggling with this issue. Despite creating media screen queries and setting the viewport for iPhone 7 plus, the website does not display correctly on my device. When I inspect it using Chrome, every ...

cssmedia-queries

Steps to show submenus upon hovering over the main menu items

I am trying to create a vertical menu with multiple levels using HTML and CSS. Here is the code I have written so far: <ul> <li>Level 1 menu <ul> <li>Level 2 item</li> <li>Level 2 item</li&g ...

javascripthtmlcss

Using Ajax to invoke a C# webmethod

I'm trying to call a webmethod defined in this specific class <%@ WebService Language="C#" Class="emt7anReyady.myService" %> using System; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Linq; usi ...

c#javascriptjqueryasp.netajax

Stylesheets may not display correctly in Firefox and IE

Just wanted to say that I recently put together this little website , but I am completely stumped on why the CSS file won't show up in Firefox or IE. I know it's a basic question, but I'm still learning all of this. Thank you so much for a ...

htmlcss

Is there a way to modify the text within a "span" element that directly follows an "i" element using jQuery?

I am attempting to modify the text displayed on a button within a plugin by using jQuery. Here is the outer HTML: <button value="[[3,1,1488182400]]" data-group="2017-02-27" class="ab-hour"> <span class="ladda-label"> <i class="ab-hour ...

javascriptjqueryhtmltextnextsibling

Issue with Rails: Content_For not functioning properly when combined with AJAX or when attempting to rehydrate JavaScript files

Currently, I am utilizing ajax to load all my views, and it's functioning perfectly except for one issue. My view pages that are being loaded are not referencing my JavaScript files. Below is an example of my coffee-script: jQuery(function() { Stri ...

javascriptjqueryruby-on-railsajax

Subscribe to a Mailchimp list by using Ajax

I'm attempting to sign up for my Mailchimp list using this form: <form method="post" action="https://us10.api.mailchimp.com/2.0/lists/subscribe.json" id="mailChimpForm"> <div class="col-lg-6 col-sm-6" data-scrollreveal="enter left after 0 ...

jqueryajaxmailchimp

What is the best way to include a text input as the last option in a Select input form field?

I would like to implement a select input feature where users can choose from predefined options, with the added functionality of including a text input field as the last option for users who prefer to enter their own category. How can I achieve this? Curr ...

javascripthtmlcssnode.jsexpress

Animation for navigation | Struggling to animate only the specific list item

It's late at night and I'm struggling to solve a small problem. Despite feeling tired, I'll ask anyway - even if it makes me look foolish. Here is the code snippet: The HTML: <style> nav.main ul { font-size:175%; font-weight:300; ...

jqueryjquery-selectorsjquery-animate

Set the text field to be editable or readonly based on certain conditions

Is there a way to conditionally enable or disable an editable field (edit/read only)? I have tried using session role from the database to set conditions on the text field, but I am unsure of how to proceed... <?php include('session.php'); ?& ...

javascriptphpjqueryjson

Using JavaScript within WordPress to achieve a seamless scrolling effect

I am seeking to implement a Smooth Scroll effect on my website located at . The site is built on WordPress and I am facing difficulty in connecting JavaScript/jQuery in WordPress. I have come across various WordPress plugins, but they either do not meet my ...

javascriptjquerywordpresssmooth-scrolling

Sass flex order has no effect on elements that are generated

I encountered an issue with the rendering of SVGs in my project. Currently, they are displayed correctly in desktop mode, but in mobile portrait mode, I need to change the order of one specific SVG element within the row. To achieve this, I decided to use ...

cssreactjssvgsassflexbox