R 中带有 DT 数据表的圆形边框

Question

I would like round borders on my DT table. Unfortunately my JS skills are very limited (or even inexistent) thus I would be very happy if somebody could help me to figure out how to implement round borders on a DT table in R.

This is my code so far:

DT::datatable(
  data = iris,
  options = list(
    initComplete = DT::JS(
      "function(settings, json) {",
      paste0(
        "$(this.api().table().header()).css({
          'background-color': 'black',
          'color': 'white',
          'border-top-left-radius': '4px',
          'border-top-right-radius': '4px'
          });"
      ),
      "}"
    )
  )
)

The last part border-top-left-radius does not work but something like this would be the solution. I think this answer has the solution in pure JS but I need somebody to help me to implement this snippet in my R code.

Here is a screenshot from my code. Now I would like to have the top left and right border with a radius. As you can see the border is 90 degrees at the moment.

Answer 1

You have to use overflow: hidden .

DT::datatable(
  data = iris,
  options = list(
    initComplete = DT::JS(
      "function(settings, json) {",
      paste0(
        "$(this.api().table().header()).css({
          'background-color': 'black',
          'color': 'white',
          'border-top-left-radius': '4px',
          'border-top-right-radius': '4px', 
          'overflow': 'hidden'
          });"
      ),
      "}"
    )
  )
)

Answer 2

The following code does the trick! Got the solution from the following link from datatables forum.

DT::datatable(
  data = iris,
  options = list(
    initComplete = DT::JS(
      "function(settings, json) {",
      "$('th').css({'background-color': 'black'});",
      "$('th').css({'color': 'white'});",
      "$('th:first-child').css({'border-top-left-radius': '15px'});",
      "$('th:last-child').css({'border-top-right-radius': '15px'});",
      "}"
    )
  )
)