没有拉伸的闪亮应用的renderDataTable中的列宽 [英] Column widths in renderDataTable of a shiny app without stretching

问题描述

我想获得一个DataTable（具有所有排名，搜索和页面功能），不能在页面上完全展开，并在每列中产生大量的空白空间。

I would like to get a DataTable (with all its ranking, search and page features) that does not stretch fully across the page, and results in large amounts of white space in each column...

...理想情况下，列宽与 renderTable ...

... ideally with column widths similar to the "wrap" style from renderTable...

中的wrap样式相似>

我知道我可以修复相对列宽度，但是，我的表将根据所选输入的不同数量的列动态更新。我更喜欢额外的列扩展到右侧的空白空间，如果它比浏览器窗口宽度更宽，则触发水平滚动条。

I know I can fix relative column widths, however, my table will dynamically update with different numbers of columns dependent of inputs selected. I would prefer additional columns to expand into the empty space on the right hand side and then trigger a horizontal scrollbar if it becomes wider than the browser window width.

可重现的示例图表上方的表格...

Reproducible example of the tables in the images above...

library(shiny)
runApp(list(
  ui = navbarPage(
  title = 'Tables',
  tabPanel('dataTableOutput', dataTableOutput('ex1')),
  tabPanel('tableOutput', tableOutput('ex2'))
),
server = function(input, output) {
  output$ex1 <- renderDataTable(iris)
  output$ex2 <- renderTable(iris)
}
))

推荐答案

在dataTables中使用 drawCallback 。这里我只是改变了你的例子，把dataTable的width修改为600px。您可以在回调函数中使用可能的java脚本函数来做任何事情。

I think that you should use drawCallback in dataTables. Here I just changed your example a little to fix width of dataTable to 600px. you can play with possible java script function in callback function to do almost anything.

library(shiny)
runApp(list(
  ui = navbarPage(
    title = 'Tables',
    tabPanel('dataTableOutput', dataTableOutput('ex1')),
    tabPanel('tableOutput', tableOutput('ex2'))
  ),
  server = function(input, output) {
    output$ex1 <- renderDataTable( iris, 
                                   option = list( drawCallback = I("function( settings ) {document.getElementById('ex1').style.width = '600px';}")) )
    output$ex2 <- renderTable(iris)
  }
))

这篇关于没有拉伸的闪亮应用的renderDataTable中的列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！