Context

When making an interactive table using the DataTables library, columns are hidden under a green + sign when the screen width becomes too narrow for the number and width of columns. As the screen width decreases, the right hand column is always the next to be hidden.

Question

Is it possible to specify the order in which columns are hidden as the screen width decreases? As an example, say I would like my ‘description’ column (which has a short paragraph of text for each row of the table) to display at the right of my table, and remain showing as the screen width decreases, with columns to its left being hidden before it.

library(DT)

df <- data.frame(column_1 = 1:10, 
             column_2 = rep(1,10), 
             column_3 = rep("some text"),
             column_4 = seq(2,29,3),
             column_5 = 5:14,
             description = rep("Here is some very long and wordy text. I would like this text to remain hidden under the green + sign that appears when the screen becomes narrow. In real life, I have many more columns than this, and want as many of them to display as possible, but this column to remain hidden even with a very wide screen.", 10))

datatable(df,
      extensions = "Responsive")

Note: I am using the R DT library in flexdashboard, but I expect this question is relevant for other uses of DataTables (e.g. in javascript).

See also these 2 related questions:

• Choose the order in which columns are displayed when hidden
• Specify columns to remain hidden at all times and all screen widths

Try this, which assigns priorities to your columns, for the Responsive extension to use:

library(DT)

df <- data.frame(column_1 = 1:10, 
                 column_2 = rep(1,10), 
                 column_3 = rep("some text"),
                 column_4 = seq(2,29,3),
                 column_5 = 5:14,
                 description = rep("Here is some very long and wordy text. I would like this text to remain hidden under the green + sign that appears when the screen becomes narrow. In real life, I have many more columns than this, and want as many of them to display as possible, but this column to remain hidden even with a very wide screen.", 10))

datatable(df,
          extensions = "Responsive",
          options = list(columnDefs = list(
            list(responsivePriority = 10002, targets = 6),
            list(responsivePriority = 10001, targets = 3)
          )))

This takes the syntax used by pure DataTables in JavaScript and transforms it to R's syntax.

So, for example:

list(responsivePriority = 10002, targets = 6)

This line ensures that column index 6 has the highest priority for the Responsive extension - meaning that this will be the first column to be hidden. Column index 6 is where you have your long text.

The second highest priority is column index 3.

The remaining columns are all equally unprioritized - so I believe they are hidden from right-to-left as needed.

Remember the following key points:

• Columns are zero-indexed.
• Because you are using the Responsive extension, there is one extra column added at the start of your table (to contain the show/hide icon) - and this is column index 0.

Example screenshot: