Summary-state addon

Summarize the current table view

A delivery operations table uses the optional summary helper to keep the current sort and visible row count understandable after every interaction.

Full demo and docs Compare filter-state

Scenario

Dispatchers need fast orientation

The user goal is simple: after sorting or filtering, know exactly what view is on screen without scanning the whole table.

summary-state sort events filter event recipe

Try it

Change the table view

Sort by ETA or Priority with Enter or Space.
Use the status filter and listen for the summary text to update.
Choose a filter with no matching rows and inspect the no-results state.
Clear the filter and confirm the summary returns to the full row count.

Example

Delivery queue

Delivery status

Table summary will appear after initialization.

No deliveries match the current filter.

Delivery queue

North dock	1 - Critical	10:30 today	At risk
West clinic	3 - Normal	12:15 today	Ready
Harbor lab	2 - High	11:05 today	Blocked
South depot	4 - Low	14:45 today	Ready

Accessibility notes

What the helper changes

The table stays a semantic table with native button headers.
The summary element is a polite, atomic live region.
Sorting preserves focus on the active header button.
The manual filter recipe hides rows with the hidden attribute.
There is no animation beyond the package CSS, which respects reduced motion.

Developer notes

Copy points

Import core behavior from ../../dist/index.js.
Import the addon from ../../dist/summary-state.js.
Pass the table and a visible status element to the helper.
Dispatch a11y-sortable-table:filter after custom filters change row visibility.

Import path

Current-view summary setup

import { createSortableTable } from "../../dist/index.js";
import { syncSortableTableSummaryState } from "../../dist/summary-state.js";

const instance = createSortableTable(table);

syncSortableTableSummaryState(instance, {
  table,
  statusElement: "#summary-status"
});