Filter Table Data Using Form Controls – SV-Filtable

Preview:

Description:

SV-Filtable is the vanilla JS version of the jQuery Filtable plugin, which makes it easy to add fast filtering capabilities to HTML tables.

It allows users to quickly search and filter tabular data using text inputs, select boxes, and checkboxes. As the user interacts with these filter controls, SV-Filtable automatically filters the table accordingly. This enables fast exploration of large datasets right on the web page.

See Also:

• Add Custom Sorting to Tables with the SV-Sortable JS Library

How to use it:

1. Download and import the SV-Filtable library.

<script defer src="/src/sv-filtable.js"></script>

2. Create filter controls and specify which columns to filter using the data-filter-col attribute.

<div id="table-filters">
  <label for="filter-country">Name:</label>
  <input type="text" class="input-text" data-filter-col="0,1" id="filter-name">
  <label for="filter-country">Country:</label>
  <select id="filter-country" data-filter-col="3">
    <option value="">- All -</option>
    <option>Bolivia</option>
    <option>Germany</option>
    <option>Italy</option>
    <option>Kiribati</option>
    <option>Mexico</option>
    <option>Morocco</option>
    <option>New Zealand</option>
    <option>Slovakia</option>
    <option>Sweden</option>
    <option>United Kingdom</option>
  </select>
  <label for="filter-tick">
    <input type="checkbox" id="filter-tick" data-filter-col="4" value="Y"> Europe
  </label>
</div>

3. Enable the filter controls on your HTML table. That’s it.

<table id="data">
  ...
</table>

document.addEventListener('DOMContentLoaded', function() {
  const table = document.querySelector('#data');
  const controlPanel = document.querySelector('#table-filters');
  new SV.Filtable(table, controlPanel);
});

4. Use the applyFilters method to create custom filtering actions.

document.querySelector('#custom-filter').addEventListener('keyup', function () {
  let search = this.value;
  // custom filter here
  let filter = {columns: [3], value: search};
  filtable.applyFilters([filter]);
});

5. SV-Filtable enhances user experience by addressing common UI issues like zebra-striping in tables. By dynamically adding odd and even classes to table rows, it ensures that your table aesthetics remain consistent, regardless of the filters applied.

new SV.Filtable(table, controlPanel, {
  zebraStriping: true
});

table tr:nth-child(odd) > td {
  /* styles here */
}
table tr:nth-child(even) > td {
  /* styles here */
}
table tr.odd > td {
  /* styles here */
}
table tr.even > td {
  /* styles here */
}

6. Set the locale.

new SV.Filtable(table, controlPanel, {
    locale: 'en'
});

Changelog:

v2.3.0 (05/04/2024)

• Add row counts to custom event

v2.2.1 (05/02/2024)

• Skip filters if table has no rows

v2.2.0 (02/26/2024)

• Add locale option

v2.1.0 (01/31/2024)

• Add an option for zebra striping