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

Question

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

Answer 1

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

Resizing columns using JQuery UI that provide a working example.
有人为它创建了一个插件here（我认为它不太好用）。

但我更喜欢使用 resizable of jquery-ui like this post。工作示例：

$(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>

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

Column resize for users with DT::datatable

jquery

r

datatables

dt