How can I add a vertical line to a datatable?

Question

I want to add a line between the 3 column: Species Sepal and Petal. How can I do that?

sketch = htmltools::withTags(table(
  class = 'display',
  thead(
    tr(
      th(rowspan = 2, 'Species'),
      th(colspan = 2, 'Sepal'),
      th(colspan = 2, 'Petal')
    ),
    tr(
      lapply(rep(c('Length', 'Width'), 2), th)
    )
  )
))
print(sketch)
datatable(iris[1:20, c(5, 1:4)], container = sketch, rownames = FALSE)

Amethist

Answer 1

You can do

datatable(iris[1:20, c(5, 1:4)], container = sketch, rownames = FALSE) %>% 
  formatStyle(c(1,3), `border-right` = "solid 2px")

For the borders in the header, you can set the CSS in sketch:

sketch = htmltools::withTags(table(
  class = 'display',
  thead(
    tr(
      th(rowspan = 2, style = "border-right: solid 2px;", 'Species'),
      th(colspan = 2, style = "border-right: solid 2px;", 'Sepal'),
      th(colspan = 2, 'Petal')
    ),
    tr(
      th("Length"),
      th(style = "border-right: solid 2px;", "Width"),
      th("Length"),
      th("Width")
    )
  )
))

Dewees

Answer 2

You could add a css class that adds a border on the right of the cells and apply it to the relevant columns using the columnDefs options. For the header, you can set the class using the initComplete callback.

Here's an example:

library(shiny)
library(DT)
library(htmltools)

runApp(shinyApp(
  ui <- basicPage(
    tags$head(
      tags$style(HTML(".cell-border-right{border-right: 1px solid #000}"))),
    DT::dataTableOutput('table1')
  ),
  server = function(input, output) {
    output$table1 <- DT::renderDataTable({
      datatable(data.frame(a1 = 1, b1 = 2, a2 = 3, b2 = 4), rownames = FALSE,
                container = withTags(table(
                  class = 'display',
                  thead(
                    tr(
                      th(colspan = 2, 'g1'),
                      th(colspan = 2, 'g2')
                    ),
                    tr(
                      lapply(rep(c('a', 'b'), 2), th)
                    )
                  )
                )),options = list(initComplete = JS(
                  "function(settings, json) {",
                  "var headerBorder = [0,1];",
                  "var header = $(this.api().table().header()).find('tr:first > th').filter(function(index) {return $.inArray(index,headerBorder) > -1 ;}).addClass('cell-border-right');",
                  "}"),columnDefs=list(list(className="dt-right cell-border-right",targets=1))
      ))
    })
  }
))

The jquery selectors are used to select the first row of the header and the first th tag, so that the border is only added to the g1 cell.

Rothrock