Shiny App中DT::datatable手动调整列宽的实现方法问询

自动列宽支持情况 #

DT原生支持自动调整列宽，不需要额外引入扩展，仅需在datatable的options配置项中开启autoWidth = TRUE即可，插件会自动根据每列的内容长度计算最优展示宽度。

手动调整列宽实现 #

纯R方案 #

无需编写JS代码，直接调用DT内置的列宽调整扩展即可实现和Rhandsontable类似的手动拖拽调整效果，示例代码如下：

library(shiny)
library(DT)

ui <- fluidPage(
  DTOutput("mytable")
)

server <- function(input, output) {
  output$mytable <- renderDT({
    datatable(
      iris,
      extensions = "ColResize",
      options = list(
        autoWidth = TRUE, # 开启自动列宽
        colResize = list(isResizable = TRUE) # 开启手动拖拽调整列宽
      )
    )
  })
}

shinyApp(ui, server)

JavaScript自定义方案 #

如果需要更灵活的列宽调整逻辑，可以通过注入JS代码实现，示例代码如下：

library(shiny)
library(DT)

ui <- fluidPage(
  tags$script(HTML("
    $(document).on('shiny:value', function(event) {
      // 匹配对应DT表格的输出ID
      if(event.name === 'mytable') {
        setTimeout(function() {
          // 初始化自动适配列宽
          $('#mytable table').DataTable().columns.adjust().draw();
          // 绑定表头拖拽调整逻辑
          const tableHeader = document.querySelector('#mytable table thead tr');
          const headerCols = tableHeader.querySelectorAll('th');
          headerCols.forEach((col, index) => {
            const resizer = document.createElement('div');
            resizer.style.cssText = 'width:5px;height:100%;position:absolute;right:0;top:0;cursor:col-resize;background:transparent;';
            col.style.position = 'relative';
            col.appendChild(resizer);
            let startX, startWidth;
            resizer.addEventListener('mousedown', (e) => {
              startX = e.pageX;
              startWidth = col.offsetWidth;
              document.addEventListener('mousemove', resizeCol);
              document.addEventListener('mouseup', () => {
                document.removeEventListener('mousemove', resizeCol);
              });
              e.preventDefault();
            });
            const resizeCol = (e) => {
              const width = startWidth + (e.pageX - startX);
              col.style.width = `${width}px`;
              $('#mytable table').DataTable().column(index).width(`${width}px`);
            };
          })
        }, 200);
      }
    })
  ")),
  DTOutput("mytable")
)

server <- function(input, output) {
  output$mytable <- renderDT({
    datatable(iris, options = list(autoWidth = TRUE))
  })
}

shinyApp(ui, server)

注意事项 #

• 若当前使用的DT版本不支持ColResize扩展，可替换为extensions = "ResizeColumns"，同时在options中添加resizeColumns = TRUE配置即可生效。
• 若表格存在水平滚动、固定列的需求，需在options中额外配置scrollX = TRUE，避免列宽调整后布局溢出。

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