TableFilter

2022-11-11

A very easy to use library to add filtering to tables by each of the columns available. The default drop in will set you up with the ability to search each column individually. I would say that this library is better than datatables but I'll need to give it some time before declaring it the true winner of my heart.

I really like building tables in ejs on the server. This library is purely js and so it can be dropped in once the table is fully made and it will just make the table interactive. My only issue with it is that it is pretty heavy at 250kb. I'm still on the lookout for a smaller and tighter way of adding interactivity to these server rendered tables.

https://www.tablefilter.com/

You need to clone the repo and then move the TableFilter folder under dist/ to your project.

git clone https://github.com/koalyptus/TableFilter.git
mv TableFilter/dist/tablefilter/ /path/to/project/vendors

However getting started with TableFilter is very simple thereafter!

<script src="/vendors/tablefilter/tablefilter.js"></script>
<script>
var tf = new TableFilter('table-id, {
    base_path: 'path/to/my/scripts/tablefilter/'
});
tf.init();
</script>

Here is a working example to get started.

The code.

<table id="my-table">
    <caption>
        Population by Region
    </caption>
    <thead>
        <tr>
            <th>Region</th>
            <th>Population</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Asia</td>
            <td>4641</td>
        </tr>
        <tr>
            <td>Africa</td>
            <td>1340</td>
        </tr>
        <tr>
            <td>Europe</td>
            <td>747</td>
        </tr>
        <tr>
            <td>Latin America</td>
            <td>653</td>
        </tr>
        <tr>
            <td>North America</td>
            <td>368</td>
        </tr>
        <tr>
            <td>Oceania</td>
            <td>42</td>
        </tr>
        <tr>
            <td>Antarctica</td>
            <td>0.004</td>
        </tr>
    </tbody>
</table>

<script src="/vendors/tablefilter/tablefilter.js"></script>
<script>
var tf = new TableFilter('my-table', {
    base_path: '/vendors/tablefilter/',
    extensions: [{ name: "sort", }],
});
tf.init();
</script>