Create Sortable & Searchable & Checkable Table With Table Actions Library

Category: Javascript , Table | November 19, 2022
Author:PythonicCafe
Views Total:36 views
Official Page:Go to website
Last Update:November 19, 2022
License:MIT

Preview:

Create Sortable & Searchable & Checkable Table With Table Actions Library

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:

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

You Might Be Interested In:


Leave a Reply