Add Sortable and Filterable Functionalities to HTML Tables with the Action Table Web Component

Preview:

Description:

Action Table is a lightweight and fast Web Component that turns static HTML tables into interactive ones with filter and sort capabilities.

How to use it:

1. Download and load the Action Table web component.

# NPM
$ npm install @colinaut/action-table

<!-- Stylesheet -->
<link rel="stylesheet" href="/path/to/action-table.css">
<!-- Core JavaScript -->
<script type="module" src="/path/to/action-table.js"></script>
<!-- Enable filter menus and switches -->
<script type="module" src="/path/to/action-table-filters.js"></script>
<!-- Enable toggle switches -->
<script type="module" src="/path/to/action-table-switch.js"></script>
<!-- Enable pagination controls -->
<script type="module" src="/path/to/action-table-pagination.js"></script>

2. Wrap your HTML table into the <action-table> element.

• store: Save sort and filtering to local storage
• sort: Name of the default column to sort by
• pagination: Number of entries per page
• direction: “ascending” (default) or “descending”
• urlparams: Get sort and filter from URLSearchParams
• <action-table-switch class=”star”></action-table-switch>: Add a custom toggle button to the cell
• data-filter: Override filtering content search

<action-table store urlparams pagination="10">
  <table>
    <thead>
      <tr>
        <th>Animal</th>
        <th>Name</th>
        <th>Color</th>
        <th>Age</th>
        <th>Actions</th>
        <th>Favs</th>
        <th no-sort>Switch</th>
        <th>Day</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>rabbit</td>
        <td>Attila</td>
        <td>white</td>
        <td>N/A</td>
        <td><span>jump</span><span>eat</span></td>
        <td>
          <action-table-switch class="star"></action-table-switch>
        </td>
        <td class="switch"><input type="checkbox" aria-label="switch" /></td>
        <td data-filter="Mon">Mon, 10am</td>
      </tr>
      <tr>
        <td>small dog</td>
        <td>Sophia</td>
        <td>black</td>
        <td>4</td>
        <td><span>run</span><span>eat</span><span>snuggle</span></td>
        <td>
          <action-table-switch checked class="star"></action-table-switch>
        </td>
        <td class="switch"><input type="checkbox" aria-label="switch" /></td>
        <td data-filter="Tue">Tue, 11am</td>
      </tr>
      <tr>
        <td>rabbit</td>
        <td>Cindy</td>
        <td>brown</td>
        <td>N/A</td>
        <td><span>jump</span><span>run</span></td>
        <td>
          <action-table-switch checked class="star"></action-table-switch>
        </td>
        <td class="switch"><input type="checkbox" checked aria-label="switch" /></td>
        <td data-filter="Sat">Sat, 1pm</td>
      </tr>
      <tr>
        <td>raccoon</td>
        <td>Sewer</td>
        <td>gray</td>
        <td>2</td>
        <td><span>run</span><span>eat</span><span>hide</span></td>
        <td>
          <action-table-switch class="star"></action-table-switch>
        </td>
        <td class="switch"><input type="checkbox" aria-label="switch" /></td>
        <td data-filter="Sun">Sun, 2pm</td>
      </tr>
      <tr>
        <td>dog</td>
        <td>Ziggy</td>
        <td>gray</td>
        <td>8</td>
        <td><span>run</span><span>snuggle</span></td>
        <td>
          <action-table-switch class="star"></action-table-switch>
        </td>
        <td class="switch"><input type="checkbox" aria-label="switch" /></td>
        <td data-filter="Mon">Mon, 3pm</td>
      </tr>
      <tr>
        <td>raccoon</td>
        <td>Wrapper</td>
        <td>brown</td>
        <td>6</td>
        <td><span>eat</span></td>
        <td>
          <action-table-switch class="star"></action-table-switch>
        </td>
        <td class="switch"><input type="checkbox" checked aria-label="switch" /></td>
        <td data-filter="Mon">Sun, 10am</td>
      </tr>
      <tr>
        <td>cat</td>
        <td>Tommy</td>
        <td>brown</td>
        <td>2</td>
        <td><span>run</span><span>explore</span></td>
        <td>
          <action-table-switch checked class="star"></action-table-switch>
        </td>
        <td class="switch"><input type="checkbox" aria-label="switch" /></td>
        <td data-filter="Tue">Tue, 11am</td>
      </tr>
      <tr>
        <td>cat</td>
        <td>Steve</td>
        <td>black</td>
        <td>6</td>
        <td><span>run</span><span>snuggle</span></td>
        <td>
          <action-table-switch class="star" checked></action-table-switch>
        </td>
        <td class="switch"><input type="checkbox" checked aria-label="switch" /></td>
        <td data-filter="Wed">Wed, 12pm</td>
      </tr>
    </tbody>
  </table>
</action-table>

3. Create filter controls as follows:

<action-table-filters>
  <!-- Filter Menu -->
  <action-table-filter-menu name="Animal"></action-table-filter-menu>
  <action-table-filter-menu name="Day" label="Day"></action-table-filter-menu>
  <!-- Checkbox/Radio -->
  <action-table-filter-menu name="Color" type="checkbox" label="Color (default inclusive)"></action-table-filter-menu>
  <action-table-filter-menu name="Actions" type="checkbox" exclusive label="Actions (exclusive)"></action-table-filter-menu>
  <action-table-filter-menu name="Age" type="radio"></action-table-filter-menu>
  <!-- Switch -->
  <action-table-filter-switch class="star" name="Favs"></action-table-filter-switch>
  <action-table-filter-switch class="switch" name="Switch"></action-table-filter-switch>
  <!-- Search Field -->
  <label for="name-search">Search Name</label>
  <input id="name-search" name="name" type="search" placeholder="Search" /></div>
  <label for="action-table-search">Search Whole Table</label>
  <input id="action-table-search" name="action-table" type="search" placeholder="Search" />
</action-table-filters>

4. Add a custom pagination component to the table.

<action-table-pagination label="Showing {rows} of {total}:"></action-table-pagination>
<action-table-pagination-options options="5,10,25,50" label="Rows per:"></action-table-pagination-options>

Changelog:

v2.4.21 (01/13/2025)

• Fixes issue where direction is null. Defaults to “ascending”

v2.4.19 (09/04/2024)

• Fix for pagination

v2.4.18 (08/26/2024)

• Bugfixes

v2.4.17 (08/20/2024)

• Bugfixes

v2.4.16 (08/05/2024)

• Refactored the code to clean it up, make it smaller, and speed up initial render.

v2.4.15 (08/04/2024)

• combine sort and filter into single localStorage. Uses string on store attribute for name of localStorage, Defaults to action-store.
• bugfixes

v2.4.14 (03/01/2024)

• Add contenteditable to any td and action-table will recognize if a user changes it, updating the table on blur
• The localStorage name is either action-table or if you supply an id to the action-table action-table-${id-of-action-table}. Prior to this it was missing the dash before the id and read weird.

v2.4.13 (02/26/2024)

• action-table-filters element now automatically enables/disables the reset button based on the table filter status. Just add a <button type=”reset” disabled>Reset</button> within the <action-table-filters> element and it will handle it all for you.

v2.4.12 (02/26/2024)

• Changed the action-table-filter-menu to not display if it is a “select” or “radio” and there is only one option. Checkbox type can have only one option.
• Small changes to to the css file

v2.4.11 (02/18/2024)

• New Feature: Sort by date

v2.4.9 (02/08/2024)

• Bugfix

v2.4.6 (02/07/2024)

• New Filter Dual Range Slider

v2.4.4 (02/04/2024)

• Added new filter options

v2.4.2 (01/31/2024)

• action-table-filter-menu includes new descending attribute to reverse the order of the listed options.
• New data-order attribute for th in the table. This is an optional comma separated string attribute for setting the sort order manually for a given column.

v2.4.1 (01/19/2024)

• Added all attribute for <action-table-filter-menu> so that the All text can be modified.

v2.4.0 (01/19/2024)

• The automatic “No Results” area when a filtered table has no results is now a separate custom element <action-table-no-results> that you can place anywhere and write what you want inside.
• <action-table-filter-menu> now use includes() by default with use of regex test() as optional by adding regex attribute.
• <action-table-pagination> now indicates the current rows visible and the total number of rows.
• <action-table-pagination> element label text is now modifiable through the label attribute
• New <action-table-pagination-options> element for creating a user accessible select menu for changing the number of rows shown per page.

v2.3.9 (12/23/2023)

• Fix for issue where initial sort was ignored if sort and direction was set as attribute on element
• Fix for aria-sort which was no longer working after last

v2.3.8 (12/22/2023)

• Refactored a bunch of the init code to improve speed.
• Bugfixes

v2.3.1 (12/22/2023)

• Bugfix

v2.3.0 (12/22/2023)

• Added pagination

v2.2.2 (12/21/2023)

• Changed how sort is handled which offers a slight speed increase for sorting the table

v2.2.1 (12/20/2023)

• Massive Performance Improvements

v2.1.6 (12/19/2023)

• Refactored function in action table in how gets the content when sorting and filtering so it is a bit simpler. Makes sure that that data-sort and data-filter attributes on the TD take priority.

v2.1.5 (12/19/2023)

• Bugfix

v2.1.3 (12/18/2023)

• Fixed a bug where cells with subitems took priority over data-filter attribute on td when it was creating options. The data-filter should overrule all cell content

v2.1.2 (12/16/2023)

• Fixed a few bugs, mainly with the conflict with local storage and URL params
• Moved eventListeners for action-table to constructor as it seems like the best option as read in You’re (probably) using connectedCallback() wrong in your Web Component
• Did some additional tidy and DRY for the code.

v2.1.1 (12/14/2023)

• Bugfixes

v2.1.0 (12/13/2023)

• The <action-table-switch> component is now optional, since it’s less needed. It is not included as part of the default export in the index.js.
• action-table-switch now triggers filterTable when changed
• Improved styles for filter elements

v2.0.5 (12/13/2023)

• Bugfixes

v2.0.0 (12/12/2023)

• action-table-filter-menu and action-table-filter-switch now use name attribute in place of col
• add no-sort attribute to th if you want the column not to be sortable
• The action-table-filter-menu element allows for select, checkbox, or radio types using the type attribute (defaults to select)
• Filters are inclusive search by default but can be made exclusive using the exclusive attribute
• Search by text input by using <input type=”search” name=”column name”>
• Search entire table by using name=”action-table” rather than the typical column name.
• Save sort and filtering to local storage with store attribute on action-table element
• Get sort and filter from URLSearchParams with urlparams attribute on action-table element
• Override filtering content search by adding data-filter value on td