Tabulator JavaScript: make a report table with a useful filter

A delivery table has the right rows, yet a reader has to scan every line to find the late items. Give them a labeled status filter and keep the total tied to the visible rows. Tabulator can turn the prepared rows into an interactive table inside an ordinary HTML report.

The sample contains four fictional deliveries. Two are Late, with 9 and 6 units; the other two are On time, with 12 and 8. The opening view has four deliveries and 35 units. Choosing Late should show two deliveries and 15 units, rather than leaving the original total above a smaller table.

Open the working example · Download the complete HTML

Load the table library and its stylesheet

Use a matching JavaScript and CSS release. The downloadable example keeps both inside the HTML so the reading copy does not depend on a second file. The Tabulator quickstart explains the direct browser distribution as well as package-based projects.

Give the table a real container before constructing it:

<label for="status">Delivery status</label>
<select id="status">
  <option value="">All deliveries</option>
  <option>Late</option>
  <option>On time</option>
</select>
<p id="summary" aria-live="polite"></p>
<div id="deliveries"></div>

Then use the data fields as the column definitions:

const rows = [
  {delivery: "D-101", status: "Late", units: 9},
  {delivery: "D-102", status: "On time", units: 12},
  {delivery: "D-103", status: "Late", units: 6},
  {delivery: "D-104", status: "On time", units: 8}
];
const table = new Tabulator("#deliveries", {
  data: rows, layout: "fitColumns",
  columns: [
    {title: "Delivery", field: "delivery"},
    {title: "Status", field: "status"},
    {title: "Units", field: "units", sorter: "number"}
  ]
});

For this small report, compute the filtered rows once in your own filter handler. Give that same array to table.replaceData() and calculate the summary from it. This keeps the selection and its headline visibly connected without relying on whichever rows happen to fit in the scroll viewport.

Make the empty result honest

Include an Unassigned choice in the example even though no delivery has that status. Selecting it should say “0 deliveries, 0 units” and leave the table empty. A filter with no matches must not bring back all deliveries as a fallback.

If your real data uses a missing quantity, keep that separate from zero. Decide whether the report will show an unavailable total or a known subtotal with an explicit missing-row count. Do not turn an empty source field into a successful zero-unit delivery.

Keep the mobile table focused

Three short columns fit this example. A wide export with twelve operational fields needs a different presentation: decide which values a reader must compare together and move secondary detail out of the first view. The plain HTML sorting guide is sufficient when you only need a small searchable table and prefer to avoid a library.

Open the actual download at a phone width, choose Late, and sort Units. The two values must be 6 and 9 in ascending order, with the summary still at 15. Sorting changes order, not the subtotal.

The finished table can sit beside the delivery explanation in a NOS reading page. Keep the operational delivery system as the source of record. The example's filter changes what this reader sees; it does not submit a delivery update or save an approval.