如何在R的DataTables中指定列的屏幕适配隐藏顺序？

问题说明 #

使用DataTables（含R的DT库）制作交互式表格时，当屏幕宽度不足以容纳所有列，列会被隐藏到绿色展开按钮（+号）下方，默认规则是最右侧的列最先被隐藏。现在需要调整隐藏顺序：让右侧的description长文本列优先保持显示，让其左侧的列先被隐藏。

示例代码（R DT） #

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")

解决方案 #

DataTables的Responsive扩展支持通过列优先级控制隐藏顺序：优先级数值越高，列越晚被隐藏。以下是不同场景的实现方式：

1. R DT库实现

在datatable()的options参数中，通过columnDefs为目标列设置responsivePriority：

• 给需要优先保留的description列设置更高的优先级数值（比如1000）
• 给左侧需要先隐藏的列设置较低的优先级（默认值为0，数值越小越先被隐藏）

修改后的代码：

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(
              # 给description列设置高优先级，最晚被隐藏
              list(targets = 5, responsivePriority = 1000),
              # 给左侧列设置低优先级，优先被隐藏（可选，默认值为0，也可设为负数）
              list(targets = c(0,1,2,3,4), responsivePriority = 0)
            )
          ))

2. JavaScript原生实现

直接使用JavaScript版DataTables时，逻辑完全一致，通过columnDefs配置responsivePriority：

$('#example').DataTable({
  responsive: true,
  columnDefs: [
    { targets: 5, responsivePriority: 1000 }, // description列高优先级
    { targets: [0,1,2,3,4], responsivePriority: 0 } // 左侧列低优先级
  ]
});

补充说明 #

• targets的数值是列的索引（从0开始计数），对应表格中的列位置
• 优先级数值没有固定范围，只要保证需要保留的列数值大于其他列即可

内容的提问来源于stack exchange，提问作者whv20