18

I have a Shiny app that yields a data table, but I can't freeze the first column and the headers, so the table is hard to read as you go down or across. Is there anyway to freeze the panes? I've tried searching but have found nothing.

Matt Dowle
  • 58,872
  • 22
  • 166
  • 224
Kamal
  • 309
  • 1
  • 3
  • 6
  • Following recent Shiny update, you might try here and see what sorting options are available https://datatables.net/upgrade/1.10-convert – Pork Chop Oct 07 '14 at 07:24

2 Answers2

15

Interesting question and now thanks to the recent update of Shiny to data.tables 1.10.2 it is alot easier to use the various plug-ins and extensions. For your question the FixedHeader extension seems ideal. To add this extension we need to include the relevant JavaScript and CSS file (see http://cdn.datatables.net/):

tagList(
  singleton(tags$head(tags$script(src='//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js',type='text/javascript'))),
  singleton(tags$head(tags$link(href='//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css',rel='stylesheet',type='text/css')))
)

data.tables has an option initComplete which allows us to stipulate a callback once table is drawn etc. 

function(settings, json) {
     new $.fn.dataTable.FixedHeader(this, {
                                            left:   true,
                                            right:  true
                                          } );
                                        }

We will use a modified version of the iris data set adding an index and some random data at the end to show left to right scrolling:

library(shiny)
myData <- cbind(list(index = row.names(iris)), iris
                , rep(list(row.names(iris)), 10))
names(myData)[7:16] <- paste0("randomData", 1:10)
runApp(
  list(ui = fluidPage(
    tagList(
      singleton(tags$head(tags$script(src='//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js',type='text/javascript'))),
      singleton(tags$head(tags$link(href='//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css',rel='stylesheet',type='text/css')))
    ), 

    dataTableOutput("mytable")
  )
  , server = function(input, output, session){
    output$mytable <- renderDataTable(myData,
                                      options = list(
                                        pageLength = 50,
                                        initComplete = I("function(settings, json){
                                          new $.fn.dataTable.FixedHeader(this, {
                                            left:   true,
                                            right:  true
                                          } );
                                        }")
                                      )
    )
  })
)

so in the image we can see we are scrolled down to record 8 and across some ways but the header and the first column (our added index column) are still visible.

enter image description here

jdharrison
  • 30,085
  • 4
  • 77
  • 89
  • 1
    Happy to help if the answer solves your question consider marking it as accepted by ticking it. – jdharrison Oct 07 '14 at 15:52
  • 1
    Many thanks for your help! Is there a way to also freeze the header of the first column, so it's visible as I scroll to the right? – Kamal Oct 07 '14 at 15:56
  • 2
    Following `dataTables` documentation and your excellent detailed answer, I tried the `FixedColumns` plugin in one of my shiny apps. I included `fixedcolumns/3.0.2` css and js files as well as `dataTables 1.10.4` css and js files in my header and included the `initComplete` in my options with a minor change as follows: `function(settings, json) { new $.fn.dataTable.FixedColumns(this, { } ); }`. However when I ran the app, the table kept displaying the `processing...` message and did not load as expected. I'm currently using the latest shiny release, 0.11. Thoughts? – Bahae Omid Jan 31 '15 at 17:29
12

FixedHeader is now (2021) compatible with FixedColumns. See table

library(shiny)
library(DT)
runApp(
  list(ui = fluidPage(
    
    dataTableOutput("mytable")
  )
  , server = function(input, output, session){
    Rows <- c(1:30)
    for (y in 1:15){
      x<-y-1
      assign(letters[x+1],runif(5, 0, 1))
    }
    x <- data.frame(Rows, mget(letters[1:15]), row.names=NULL) 
    x<- x[2:15]
    output$mytable <- renderDataTable(
      DT::datatable(x, rownames=FALSE,extensions = c('FixedColumns',"FixedHeader"), 
                    options = list(dom = 't', 
                                   scrollX = TRUE, 
                                   paging=FALSE,
                                   fixedHeader=TRUE,
                                   fixedColumns = list(leftColumns = 1, rightColumns = 0))
      )
    )
  } 
  )
)

Implemented:

2021-09-10: FixedColumns 4.0.0

Ferroao
  • 3,042
  • 28
  • 53