CODEWITHSUNDEEP
jqueryrdatatablesdt
userLL
userLL

Reputation: 501

Column resize for users with DT::datatable

I am creating a R flexdashboard document with some DT::datatables. I would like users of the dashboard to be able to resize columns of the tables dynamically. It seems like this is a feature that should be available in the very extensive datatable package but I can't find any reference to it in either the R DT documentation at https://rstudio.github.io/DT/ or the JQuery documentation at https://datatables.net. Can anyone offer a suggestion for how this can be done or where to look?

Upvotes: 6

Views: 9072

Answers (1)

Cuong Le Ngoc
Cuong Le Ngoc

Reputation: 11975

There are some posts about resizable columns datatable. For example:

But I prefer using resizable of jquery-ui like this post. Working example:

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

Upvotes: 7

Related Questions