Create Sortable & Checkable Table With Table Actions Library

Category: Javascript , Table | July 31, 2022
Author:marcmatias
Views Total:0 views
Official Page:Go to website
Last Update:July 31, 2022
License:MIT

Preview:

Create Sortable & Checkable Table With Table Actions Library

Description:

Table Actions is a vanilla JavaScript library for creating a sortable table with checkable rows.

How to use it:

1. Add the data-sortable attribute to the table columns which should be sortable.

<table class="table">
  <thead>
    <tr>
      <th data-sortable title="UUID">ID</th>
      <th data-sortable>Company</th>
    </tr>
  </thead>
  ...
</table>

2. Add additional info to checkable rows as follows:

<table class="table">
  <thead>
    <tr>
      <th data-sortable title="UUID">ID</th>
      <th data-sortable>Company</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="uuid">1</td>
      <td data-label="">Alfreds Futterkiste</td>
    </tr>
    <tr>
      <td data-label="uuid">2</td>
      <td data-label="">Centro comercial Moctezuma</td>
    </tr>
    <tr>
      <td data-label="uuid">3</td>
      <td data-label="">Cian</td>
    </tr>
    ...
  </tbody>
</table>

3. Initialize the Table Actions Library on the HTML table.

const table = new TableActions("table", {
      checkableRows: true,
      checkableRowTdReference: "[data-label='uuid']",
      checkedElementsCallBack: function (checkedElements) {
        // get checked data
      },
});

You Might Be Interested In:


Leave a Reply