Add a vertical line in DT format, which can be used in a brilliant application with a custom container

Question

I want to add a vertical line between groups of columns. Here is the desired result:

--------- g1 | g2 --------- ab | ab --------- 1 2 | 3 4 --------- 

and a brilliant app to get you started:

 library(shiny) library(DT) library(htmltools) runApp(shinyApp( ui <- basicPage( 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) ) ) )) ) }) } )) 

Current output from brilliant app above:

Answer 1

You can add a css class that adds a border to the right of the cells and applies it to the corresponding columns using the columnDefs options. For the title, you can set the class using the initComplete .

Here is 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)) )) }) } )) 

Jquery selectors are used to select the first header line and the first th tag, so the border is only added to cell g1 .