Facet Grid / developer preview
A data grid you
can grow into.
Facet Grid is an original Web Component for working application tables. Build a basic view first, then add only the behavior the product needs. All examples use the shipped component rather than a visual stand-in.
@linewisp/wisp-grid. It is not published to npm yet. The API below is the developer-preview contract and is checked against the live demos.Getting started
Define the element once, place <wisp-grid> in your page, then configure columns, rows, and a stable row id in JavaScript. Cell values are inserted as text, never as HTML.
import { defineWispGrid } from '@linewisp/wisp-grid';
defineWispGrid();
document.querySelector('wisp-grid').configure({
caption: 'Workspaces',
columns: [
{ id: 'name', label: 'Workspace', value: row => row.name },
{ id: 'members', label: 'Members', value: row => row.members },
],
rows,
rowId: row => row.id,
});Learn by building
Examples in order
Each stage adds a focused part of the public API. The fourth stage combines the pieces into a realistic team workspace.
- 01
- 02
- 03
Tailor the view
Column filters, selection, column chooser, events, and safe CSV export.
Open tailoring demo ↗ - 04
Workspace surface
Multi-column sorting and row activation in a complete, everyday work view.
Open workspace demo ↗
Configuration API
| Option | Type | Purpose |
|---|---|---|
columns | required array | Column IDs, labels, value readers, and optional width, sortable, searchable, filterable, and hideable behavior. |
rows | required array | Source records. Each record must be a distinct object reference. |
rowId | required function | Returns a non-empty, unique, durable string ID for each row. |
caption | string | Names the table for assistive technology. |
pageSize | number | Sets the initial page size. Use pageSizeOptions to offer choices. |
columnFilters | boolean | Shows inputs for filterable columns. |
columnChooser | boolean | Lets people control visible columns. A column with hideable: false stays visible. |
selectionMode | 'none' | 'multiple' | Controls row-selection affordances. |
exportable | boolean | Shows the explicit CSV export action. |
theme | theme name | linewisp, midnight, violet, or high-contrast. |
density | density name | compact, standard, or comfortable. |
Methods and events
Methods and state
currentQueryreturns a safe query snapshothiddenColumnIdsreturns visible-column exclusionssetLoading(boolean)setColumnFilters(filters)setSorts(sorts)setHiddenColumns(columnIds)clearSelection()
Events
wisp-grid-changefor query changeswisp-grid-selection-changefor selected IDswisp-grid-column-visibility-changefor hidden column IDswisp-grid-row-activatefor double-click or Enterwisp-grid-exportfor explicit CSV output
Framework views
Open the editor
for your stack.
Each link opens the same safe, local-only configuration Studio with the requested integration code already selected.
Accessibility and safety
Facet Grid provides table captions, visible focus treatment, keyboard row activation, announced query status, standard checkboxes, sortable-header state, and a preserved high-contrast theme. The browser demo accepts JSON configuration only. It does not evaluate typed JavaScript.
CSV export is explicit and protects spreadsheet formula-like values. Untrusted cell content is assigned with textContent, so it cannot become markup in the grid.