Filter Table Data Using Form Controls – SV-Filtable

Category: Javascript , Table | February 26, 2024
Author:svivian/
Views Total:14 views
Official Page:Go to website
Last Update:February 26, 2024
License:MIT

Preview:

Filter Table Data Using Form Controls – SV-Filtable

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:

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.2.0 (02/26/2024)

  • Add locale option

v2.1.0 (01/31/2024)

  • Add an option for zebra striping

You Might Be Interested In:


Leave a Reply