Question

My Shiny App有一个分页系统，可以来回转发。以下是我整个应用程序的一个小部分。我想调整包含复选框的数据表的第一列，并使其至少为此时的一半大小，以便为第二列中的实际文本留出更多空间。你如何正确调整第一列？

我在renderdatatable命令中尝试使用： columnDefs = list(list(targets= 0, width= '30px')。不工作。

我还补充道在{= 3}}和here之内的{= 1}} {}} {}} {}} {}} {}}您可以在下面看到我如何在代码中包含这些内容。

autoWidth= TRUE

我还尝试使用建议here的新语法aoColumnDefs（）。我也无法工作。如何明确减小第一列的宽度？

ShinyApp

output$table_p2 <- DT::renderDataTable(
      checkboxtable2,
      server = FALSE, escape = FALSE, selection = 'none',
      rownames = FALSE,
      options = list(
        dom = 't', paging = FALSE, ordering = FALSE,autoWidth = TRUE,
        columnDefs = list(list(targets= 0, width= '30%')),
        preDrawCallback = JS('function() { 
        Shiny.unbindAll(this.api().table().node()); }'),
        drawCallback = JS('function() { 
        Shiny.bindAll(this.api().table().node()); } '))
    )

注释以防您想知道数据表的构造：我创建这些表的过程是首先从两个向量（其中一个包含复选框）创建数据帧，转换这些使用renderDataTable进入DataTables，然后通过覆盖列表中的CSS来返回没有标题的表。我必须遵循此过程，因为所有其他方法返回没有标题行的复选框表，导致没有复选框的数据表。因此，必须拆分代码，因为我无法在列表中创建带复选框的向量。

Answer 1

对于列宽，DataTables不是很好。它是here，宽度永远不会从给定的定义中逐字逐句地采用，但始终适应表格大小而不是。这就是为什么你的努力是徒劳的。

但你仍然可以根据自己的需要塑造东西。首先，使用checkboxInput在复选框周围创建一个容器，其默认宽度为300像素，这是该列如此大的主要原因。您可以在第一步中取消设置此宽度，以查看该列的“自然”大小。

如果你想进一步缩小尺寸，列宽度的css规则可以正常工作。对于那个和上面的部分，我们为第一列单元格配备了特定的类名。

编织

columnDefs = list(list(targets = 0, className = "small" ))

进入DataTable定义，然后添加

td.small .shiny-input-container{width:auto;}

到css中取消设置此列中的预定义宽度。

css规则可以实现进一步的缩小

td.small{width:30px;}

如何调整使用JavaScript创建的闪亮DataTables的一列宽度？

1 个答案: