tafs

v1.5.0

Published

a month ago

A lightweight, vanilla JavaScript library for adding filtering and sorting capabilities to HTML tables with zero dependencies.

0High
0Medium
0Low

jyri-matti

html table filter sort

TaFS - Table Filter & Sort

A lightweight, vanilla JavaScript library for adding filtering and sorting capabilities to HTML tables with zero dependencies.

Features

Filter columns - Inline text filtering for each column
Multi-level sorting - Click column headers to sort (ascending, descending, or none)
Lightweight - Pure JavaScript with no dependencies
Easy integration - Just add a class to your table
Customizable - Override filter and sort functions per table, and add your own CSS

Installation

Direct Include

<script src="src/tafs.min.js"></script>
<link rel="stylesheet" href="src/tafs.css" />

Usage

Simply add the tafs class to any HTML table:

<table class="tafs">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Active</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>30</td>
        <td>true</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>25</td>
        <td>false</td>
    </tr>
</table>

The library automatically initializes on DOMContentLoaded for all tables with the tafs class.

API

For dynamic tables, you can

manually initialize:

tafs.init(document.querySelector('#my-table'));

sort:

tafs.sort(document.querySelector('#my-table'));

and filter:

tafs.filter(document.querySelector('#my-table'));

Customization

Custom Filter Function

Override the default filter function for a specific table:

const table = document.querySelector('#my-table');
table._tafsFilterFunction = (filterString) => {
    return (cell) => {
        // Custom filter logic
        return cell.textContent.startsWith(filterString);
    };
};
tafs.init(table);

Custom Icons, Placeholders and default sort

Set defaults for each concrete table:

const table = document.querySelector('#my-table');
table._tafsFilterPlaceholder = '🔎';      // Filter input placeholder
table._tafsSortNone = '⇅';                // No sort icon
table._tafsSortAsc = '↑';                 // Ascending sort icon
table._tafsSortDesc = '↓';                // Descending sort icon
table._tafsSortColumns = [2,1];           // Sort by 2nd, then by 1st column
table._tafsMulticolumnReversed = true     // Sort first by the last clickec column
table._tafsSortFunction = 'numberPrefix'  // Sort by default comparing a numeric prefix
tafs.init(table);

Or set defaults globally:

tafs.filterPlaceholder = 'Search...';
tafs.sortNone = '⇅';
tafs.sortAsc = '↑';
tafs.sortDesc = '↓';
tafs.sortColumns = [2,1];
tafs.multicolumnReversed =  true;
tafs.sortFunction = 'numberPrefix';

Or set defaults globally using just HTML:

<script src="tafs.js" filter-placeholder="Search..." sort-none="⇅" sort-asc="↑" sort-desc="↓" sort-columns="2 1" multicolumn-reversed="true" sort-function="numberPrefix"></script>

Custom Sort Functions

Override the default sort function globally or per table:

tafs.sortFunction = tafs.sortFunctions.numberPrefix;

const table = document.querySelector('#my-table');
table._tafsSortFunction = (a, b) => {
    // Custom sort logic (e.g., numeric sort)
    return parseFloat(a.textContent) - parseFloat(b.textContent);
};
tafs.init(table);

Or use registered sort functions by referring to them in each TH cell:

<head>
    <script>
        tafs.sortFunctions["myCustomSort"] = (a, b) => { ... };
    </script>
</head>
<body>
    <table>
        <tr>
            <th tafs-sort-function="myCustomSort"></th>
        </tr>
    </table>
</body>

Builtin registered sort functions include:

| Function | Description | |----------|-------------| | number | Parses full numbers (with optional decimal) and compares numerically | | numberPrefix | Parses numeric prefix from text and compares numerically | | bool | Compares boolean values (true/1 vs false/0, case-insensitive) | | date | Parses dates and compares chronologically | | datePrefix | Parses date prefix and compares chronologically | | stringCI | Case-insensitive string comparison | | stringCS | Case-sensitive string comparison | | localeStringCI | Case-insensitive locale-aware string comparison | | localeStringCS | Case-sensitive locale-aware string comparison (default) |

How It Works

Filtering: Hover over a column header to reveal a filter input. Type to filter rows based on that column's content. The default filter is case-insensitive and matches partial text.
Sorting: Click the sort icon in a column header to cycle through ascending, descending, and no sort. Multiple columns can be sorted simultaneously with priority given to the first clicked column by default.
Hidden Rows: Filtered rows receive the tafs-hidden class and are hidden via CSS.

Example

See https://lahteenmaki.net/tafs/example.html for an example.

License

See LICENSE for details.