Create Sortable & Searchable & Checkable Table With Table Actions Library

Preview:

Description:

Table Actions is a vanilla JavaScript library for creating responsive, sortable, searchable, paginable, and selectable tables on the page.

How to use it:

1. Download and import the Table Actions Library.

import { TableActions } from "/dist/table-actions.min.js";

2. Initialize the Table Actions on the target HTML table and done.

new TableActions("table", {
    sortable: true,
});

3. Disable the Sortable functionality on specified table columns using the data-unsortable attribute.

<thead>
  <tr>
    <th>ID</th>
    <th>Column 1</th>
    <th>Column 2</th>
    <th data-unsortable>Column 3 (unsortable)</th>
    <th>Date</th>
  </tr>
</thead>

4. Specify the sort format using the data-format attribute.

<thead>
  <tr>
    <th>ID</th>
    <th>Column 1</th>
    <th>Column 2</th>
    <th data-unsortable>Column 3 (unsortable)</th>
    <th data-format="DD/MM/YYYY">Date</th>
  </tr>
</thead>

5. Make table rows checkable.

<tbody>
  <tr>
    <td data-ref="1">1</td>
    <td><a href="#!">árlindo</a></td>
    <td>silent</td>
    <td>lunch</td>
    <td>03/01/1998</td>
  </tr>
  <tr>
    <td data-ref="2">2</td>
    <td>somewhere</td>
    <td>origin</td>
    <td>fog</td>
    <td>02/01/1999</td>
  </tr>
  <tr>
    <td data-ref="3">3</td>
    <td>live</td>
    <td>therefore</td>
    <td>strip</td>
    <td>01/04/2000</td>
  </tr>
  ...
</tbody>

new TableActions("table", {
    checkableRows: true,
    checkableRowTdReference: "[data-ref]",
    checkedElementsCallback: function (checkedElements) {
      document.querySelector("#result>span").innerHTML =
        checkedElements.join(", ");
    },
});

6. Enable a search field to filter table rows.

new TableActions("table", {
    searchable: true,
});

7. Paginate the HTML table.

new TableActions("table", {
    paginable: 'buttons', // or 'list'
});

Changelog:

12/15/2022

• v0.1.15

11/19/2022

• Fix module export main class as node package

11/01/2022

• Update back button class name

10/15/2022

• Updating styles and using scss

10/13/2022

• new css vars border-radius and transition time

10/07/2022

• Prettier and fixes in ta-responsive tables

09/26/2022

• Checkable row id in tr and responsive interface minor fixes
• Compatible ecmascript code in class constructor

09/25/2022

• Updated package
• Updated doc
• Updated demo

09/25/2022

• v1.0.2: Fixes and themes enhancements

09/04/2022

• v1.0.0

09/01/2022

• Feature new paginable buttons

08/22/2022

• New pagination with numbers, styles and code enhancements