A minimal way to filter HTML table rows.

About

A minimal tool to filter rows in an HTML table. This code takes a straightforward approach and directly manipulates the DOM to filter the rows of a <table> according to an input.

Installation

The package consists of a JavaScript module meant to be run directly in the browser as part of a webpage. It exports a single function, filterTable.

For example using jsDelivr:

import { filterTable } from "https://cdn.jsdelivr.net/npm/@febog/table-filter@2.1.0/filter.js";

Usage

The filterTable function is designed to be executed whenever the search input changes. The code assumes that the table has headers and thus excludes the first row from the filtering. For example:

<input type="search" id="table-search-input" placeholder="Filter the table...">

<script type="module">
  import { filterTable } from "https://cdn.jsdelivr.net/npm/@febog/table-filter@2.1.0/filter.js";
  const input = document.getElementById("table-search-input");
  input.addEventListener("input",
    e => filterTable("search-table", e.target.value, "visible-items-counter"));
</script>

Parameters

The filterTable(tableId, filterString, counterId) function requires the following parameters:

• tableId: Id of the <table> element whose rows will be filtered.
• filterString: Terms to filter for.
• counterId: (Optional) Id of an element to display the number of visible rows after filtering. For example a <span>.

Working example

You can see it in action at the demo website.

Background

I created this package as a personal learning exercise on how to publish npm packages following modern practices with an emphasis on how to improve the security posture against supply chain attacks in open source software.

As such, this repository and the process that publishes the package to npm uses features such as immutable releases, signed software packages through Sigstore (thanks to npm’s trusted publishing) and verified commits and tags.

As for the package itself, I found myself copying and pasting code to implement a simple table search for my small personal projects. Since my use case is small websites I chose to keep the scope of the project small.

Install

npm install
npx playwright install --with-deps

Run tests

npm test