Remove the border-bottom from the footer of the datatable using R DT

I am attempting to remove the footer border from a DT:datatable in R.

Upon examining this datatable, I came across this code to get rid of the border (highlighted in red) between the column names and the data:

  headerCallback <- c(
    "function(thead, data, start, end, display){",
    "  $('th', thead).css('border-bottom', 'none');",
    "}"
  ),
DT::datatable(
      data = myData(),
      class = "compact",
      rownames = FALSE,
      colnames = c("",""),
      caption = tags$caption(myTitle, style = "color:black"),
      options = list(
        dom = 't',
        ordering = FALSE,
        paging = FALSE,
        searching = FALSE,
        headerCallback = JS(headerCallback)
      )
    )

  })

My goal is to eliminate the bottom black line as shown in the image. I have found some links that may provide the solution I need, but I am unsure how to integrate them into my current setup:

r - How to remove the horizontal line between the header and the body in a DT::datatable

How To Remove Black Lines

Inspecting the element on the webpage and expanding <table>, I can un-check this box to remove the bottom black line. However, I am not sure how to implement this into my current or a new callback function.

Answer №1

Here is a simple example of what you can try:

datatable(
  data = iris[1:5,1:2],
  class = "compact",
  rownames = FALSE,
  colnames = c("",""),
  callback = JS("$('table.dataTable.no-footer').css('border-bottom', 'none');"),
  options = list(
    dom = 't',
    ordering = FALSE,
    paging = FALSE,
    searching = FALSE,
    headerCallback = JS(headerCallback)
  )
)

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

Using multiple versions of JQuery on a single page may result in dysfunctional features

Is there a need to load custom JavaScript on a page after it has fully loaded? This can be achieved using a third-party tool that allows execution on live pages of the website post-loading. However, encountering an issue where the page contains numerous J ...

Limit the user to entering a maximum of (40) characters in the textarea

To enforce a character limit of 40 characters in a text area, I have implemented the following JavaScript function to trigger on the textarea's onKeyUp event: However, a problem arises when pasting content exceeding 40 characters into the textarea - ...

When words are enclosed in a table cell, the fixed table layout ensures that all columns are the same size

There are times when long words in my HTML table cells need to be broken if they overflow their designated area. To learn how to break table cell words, check out this question: Word-wrap in an HTML table The recommended CSS style is: style="word-wrap: ...

Connecting req.body values to object key

Currently, when I need to add an object to the database, I follow these steps: return BSRequest.create({ salon_name: req.body.salon_name, salon_type: req.body.salon_type, employees: req.body.employees, postc ...

What is the method for obtaining the dimensions of a shape drawn on Google Maps?

Is there a way to retrieve the dimensions of a shape drawn using the Google Maps API? I would like to obtain the measurements and include labels on top of the shape. Take a look at this image for reference The event argument in the overlay event does no ...

Breaking columns in Firefox using CSS

I am currently exploring a cross-browser approach to create a columned layout for an unordered list. The content is generated by a CMS, so my options are limited to adding classes only. While I have been successful in creating columns, I also need to contr ...

Determine the appropriate value either through key retrieval or conditional statements

My goal is to enhance the efficiency of a slider that contains numerous conditional statements triggered during sliding/swiping actions. Which approach yields better performance? 1- Utilizing a predefined object with key conditions const controller = (c ...

Issue with VueJS component prop displaying only the last JSON entry when it is reused

My aim is to reuse a vue component with a prop that takes data from a json object. However, the issue I'm facing is that all instances of the component are displaying the same data instead of data based on the index of the json object. This is how my ...

problems with hovering over radio buttons in Internet Explorer 9

Encountering a curious issue in IE9: When hovering over my top level wrapper div, the first radio button seems to be triggered as though it's being hovered over. This means that even if the last radio input is selected, clicking anywhere within the wr ...

Confirm that the input into the text box consists of three-digit numbers separated by commas

Customers keep entering 5 digit zip codes instead of 3 digit area codes in the telephone area code textbox on my registration form. I need a jQuery or JavaScript function to validate that the entry is in ###,###,###,### format without any limit. Any sugge ...

Saving the reference of a Fabric.js Canvas in Vuex - [vuex] refrain from altering the vuex store state outside of mutation handlers

I'm developing a Vue Application that utilizes Fabric.js to manage the canvas element. My goal is to control the canvas state through Vuex. To achieve this, I have assigned the fabric canvas instance to a Vuex state variable. Mutation setCanvas(sta ...

The console logs indicate true, yet contradicts with a false assertion in the if statement

I am facing an issue with this code router.get("/timecard", ensureAuthenticated, async(req, res)=>{ users = await User.find(); console.log(req.user.cwlEmployee); if(req.user.cwlEmployee !== true){ req.flash('error_msg', &a ...

Utilizing React's multiple states for enhancing click event functionality

Here's the scenario: I am currently developing a Simon-Says game app using React Native. In this game, the user is shown a sequence of flashing buttons and must press them in the correct order. My main concern is figuring out how to utilize two diffe ...

How can I display a particular section of my JSON data in an AngularJS application?

Below is an example of a JSON structure: {"years":[ { "year_title":"94", "months":[...] } { "year_title":"95", "months":[...] } { "year_title":"96", "months":[...] } ]} I was able to display the data using the code sni ...

What are the steps to download files using vuejs?

I need assistance with enabling users to download a file from my website. The variable item.upload_attachment holds the link for the file, such as localhost:8000/media/uploads/poppy.docx. I want to make this link clickable so that users can easily download ...

Preventing runtime error in Next.js API routes by handling axios exceptions

I am currently working on creating an API route in Next.js that sends a request to my backend and saves the token in the cookies. However, I am facing an issue where 4xx responses are causing an Unhandled runtime error. Despite everything working correctly ...

How can I bind the ID property of a child component from a parent component in Angular 2 using @Input?

I have a unique requirement in my parent component where I need to generate a child component with a distinct ID, and then pass this ID into the child component. The purpose of passing the unique ID is for the child component to use it within its template. ...

Troubles with z-index implementation in HTML

Seeking guidance on an html page containing a dropdown menu with z-index positioning, set absolutely with specific left and top values. The issue arises when the window is resized, causing the dropdown menu to shift position awkwardly. This problem seems t ...

What is the best way to pause for the API response in Node JS before moving on to the next line of

When working on a node js project, I encountered a situation where I needed to call an API and wait for the response. The response is crucial as it is the output of my Alexa Skill. Check out the snippet of code for the API: const GetReportOnEmail = functi ...

Adjusting the height of one div to match the height of another div

I am facing a challenge in making a div (overlay) float over 3 other divs. It slightly overlaps the 1st (horsebanner) and 3rd (footer) divs while completely covering the 2nd (midbackground). My goal is to make the 2nd div automatically expand as the floati ...