使用 DT::datatable 为用户调整列大小

Question

我正在使用一些 DT::datatables 创建一个 R flexdashboard 文档。我希望仪表板的用户能够动态调整表列的大小。看起来这个功能应该在非常广泛的数据表包中提供，但我在https://rstudio.github.io/DT/的 R DT 文档或 JQuery 文档中找不到任何对它的引用在https://datatables.net。任何人都可以提供有关如何完成此操作或在哪里查找的建议吗？

Answer 1

有一些关于可调整大小的列数据表的帖子。例如：

• 使用 JQuery UI 调整列大小，提供了一个工作示例。
• 有人在这里为其创建了一个插件（我认为它效果不太好）。

但我更喜欢像这篇文章一样使用jquery-ui 的可调整大小。工作示例：

$(function() {
  $(".data").DataTable({
    'ordering': false,
    'dom': 'Blfrtip',
    'autoWidth': false,
  });
  $('table th').resizable({
    handles: 'e',
    stop: function(e, ui) {
      $(this).width(ui.size.width);
    }
  });

});

td, th {
  border: 1px solid #ccc;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table style="width: 100%" class="data">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>