6

I need to merge cells across columns in a DT::datatable in shiny. The best way seems to make use of the Javascript DataTables extension RowGroup. But I don't know which steps to take from viewing the page in above link, to having merged cells in my shiny app (there's a reason I'm working in shiny ;).

There's a partial answer in the accepted answer to this stackoverflow question but 1) that was about merging rows (i.e. vertically in stead of horizontally), and 2) the mechanics behind the interaction of R and Javascript seem to be assumed as prior knowledge, leaving me with questions like "which files do I need to download from where" and "do I need to adapt the Javascript code in them?"

Here is a simplified example of my app:

library(shiny)
library(DT)

tbl <- data.frame("A"=c("foo", 1L, "question"),
                  "B"=c("bar", 2L, "answer"))

ui <- fluidPage(
  dataTableOutput("table")
)

server <- function(input, output) {

  output$table <- renderDT({
    datatable(tbl, rownames=F, class="",
              options = list(autoWidth=T,
                             columnDefs = list(list(className="dt-center", targets="_all"),
                                               list(width="40px", target="_all"))))
  })
}

shinyApp(ui = ui, server = server)

In which I'd like to go from this

current table

to this

table with headers mergedtwo

Nibood_the_slightly_advanced
  • 287
  • 4
  • 15

1 Answers1

7

This may work for you, using htmltools

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

tbl <- data.frame("A" = c( 1L, "question"),
                  "B" = c( 2L, "answer"))

container_dt= withTags(table(
  class = 'display',
  thead(
    tr(
      th(class = 'dt-center',colspan = 2, 'AB')),
      tr(
      lapply((c('foo', 'bar')), th)))))
     

ui <- fluidPage(
  dataTableOutput("table")
)

server <- function(input, output) {

    output$table <- renderDT({
        datatable(tbl, container = container_dt, rownames = F, class = "",
              options = list(autoWidth = T,
                             columnDefs = list(list(className = "dt-center", targets = "_all"),
                                               list(width = "40px", targets = "_all"))))
    })
}

shinyApp(ui = ui, server = server)

enter image description here

Matt
  • 2,947
  • 1
  • 9
  • 21
  • Much better than digging through Javascript tutorials! Accept and +1 – Nibood_the_slightly_advanced Sep 23 '19 at 08:44
  • Follow-up question: I should have included in my example a column preceding the columns I gave, which I'd like to leave intact. Is that possible? – Nibood_the_slightly_advanced Sep 23 '19 at 09:01
  • I tried your code but it gives me this error `Warning: Error in : options$columnDefs must be `NULL` or a list of sub-lists, where each sub-list must contain a `targets` element.`. I have R version 4.2.1 (2022-06-23), htmltools v0.5.3, shiny v1.7.2. and DT v0.23. So something has changed and now it doesn't work in 2022.. – emr2 Aug 10 '22 at 15:25
  • 1
    @emr2 you need to change the second sublist in `columnDefs` from `target` to `targets`. I will update. – Matt Aug 10 '22 at 15:52