Integration demo

Share sort and filter state

This project task table combines core sorting with optional URL hash helpers so a filtered and sorted view can be copied, shared, and restored.

All demos Custom order

Scenario

Review delivery tasks by owner and status

Filter rows from native controls, sort the visible rows, and keep the current state in the URL hash for handoff between teammates.

syncSortableTableHashState syncSortableTableFilterState statusElement filterPrefix

Try it

Filter, sort, and share

Choose a status or owner filter and inspect the result count.
Sort Due date or Priority and watch the hash update.
Combine filters until no rows match, then clear filters.
Reload the page with a hash to confirm state is restored.

Example

Project task table

Filter status will appear here.

No tasks match those filters. Clear filters or choose a broader status.

Delivery tasks

Write release notes	Open	Mia	High	10 Jul 2026
Confirm package access	Blocked	Noah	Urgent	9 Jul 2026
Audit examples copy	Review	Sofia	Medium	12 Jul 2026
Generate Pages folder	Done	Mia	Low	8 Jul 2026
Check keyboard walkthrough	Open	Noah	High	11 Jul 2026
Validate JSON-LD blocks	Review	Mia	Medium	13 Jul 2026

Developer notes

Options and helpers used

import { createSortableTable } from "../../dist/index.js";
import { syncSortableTableHashState } from "../../dist/hash-state.js";
import { syncSortableTableFilterState } from "../../dist/filter-state.js";

const instance = createSortableTable(table, { allowUnsort: true });

syncSortableTableHashState(instance, {
  table,
  namespace: "tasks",
  paramName: "sort",
  replace: true
});

syncSortableTableFilterState(instance, {
  table,
  statusElement: "#task-filter-status",
  filterPrefix: "filter-"
});

Accessibility notes

What to inspect

Native controls

Filters are labeled select controls, and sorting remains a native button interaction in table headers.

Status updates

Result counts are announced through the filter status region. The no-results message is visible when filters hide every row.

Limitation

The filter-state helper reads hash state and applies row visibility; applications still own the filter controls that update the hash.