1

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:

1
  • Thank you - this is exactly what I'm looking for! Can you help explain how I would edit the columns or columnDefs option in R? I tried adding in: columnDefs = c("{ responsivePriority: 1, targets: 0 }", "{responsivePriority: 2, targets: -1 }") to the datatable call, but unsurprisingly, it didn't work!
    – whv20
    Commented Jun 8, 2023 at 22:36

1 Answer 1

0

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:

enter image description here

3
  • Thank you - this is extremely helpful! I can now control the order in which columns are hidden, keeping the most important columns visible in the table at narrow screen widths, even if they're on the right hand side of the table. However, I still don't seem to be able to control the order that 'columns' appear listed under the green plus sign. The most recently hidden column always appears at the top of the list, so - in the example above - the description column would eventually get buried under many other columns. Do you know if there's a way to control this? This may be too much to ask!
    – whv20
    Commented Jun 12, 2023 at 22:11
  • Change the order in which the columns are declared in your table. The list matches that order. I think that is all you can do - but you can ask a new question, to maybe get a better answer. Commented Jun 12, 2023 at 22:41
  • Thank you. I’m very new to Stack Overflow, but thought it’d be clearest if I edit the above question to change its focus, before writing 2 new questions covering the other themes of my original question. I hope this is ok, but do correct me if this is an inappropriate use of the edit function. I’ve also added links to the other 2 questions at the bottom of this question :)
    – whv20
    Commented Jul 4, 2023 at 23:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.