Project 81, Content and data

Data Table

The table every admin panel needs, without a big library. Sorting, searching, paging and exporting all happen instantly in the browser.

Main API: Intl.Collator
Export: Blob + download link
Dependencies: None
Your browser: Checking

Team directory

Click a column header to sort. Search, filter by department, change page size, tick rows and export to CSV.

SearchDepartmentRows

How it works

Filter, sort, sliceEvery change runs the same pipeline: filter by search and department, sort by the chosen column, then take one page.
Sort like a humanIntl.Collator with numeric set compares names in the right language order and sorts Item 2 before Item 10.
Export what you seeCSV is built from the filtered rows, or only the ticked ones, then downloaded through a Blob link. A BOM makes Excel read accents correctly.

const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
const view = data
  .filter((r) => Object.values(r).join(" ").toLowerCase().includes(query))
  .sort((a, b) => collator.compare(a[key], b[key]) * dir)
  .slice((page - 1) * size, page * size);

const csv = [headers, ...rows.map((r) => keys.map((k) => r[k]))].map((r) => r.join(",")).join("\n");
link.href = URL.createObjectURL(new Blob(["\ufeff" + csv], { type: "text/csv" }));