Data grid — plugin demos

1 — Formats + filter + pagination + export

Quick filter above, column filters under the header (Name text / City select), currency + date formatting, paged 10 at a time; Export CSV downloads the filtered set across all pages.

2 — Inline editing (controlled)

F2 or double-click to edit Name (text), Qty (number), or Status (select). Enter/blur commits, Escape cancels. The page applies commits to its own data.

last commit: —

3 — Tree data

Expander + indent on the first column; ArrowRight/ArrowLeft expand and collapse the active row (role=treegrid).

4 — Groups with aggregates

Grouped by Region with sum(Sales); group rows show counts, and a totals row renders below.

5 — Master-detail (nested grid)

Each order expands into a nested dj-data-grid of its line items — the measured variable-height virtualizer path.

6 — Row + cell state

Data-driven styling from OUTSIDE the shadow DOM. row() turns each state token into a ::part(row--token): unread rows are bold, read rows recede, flagged rows get a warning tint. cell() adds per-column emphasis — the Status column is color-coded, and only Subject/From are bolded when unread. Check it in light, dark, and forced-colors: the row states must stay distinguishable in all three (in forced colors the tint drops out, so weight and the status text carry the meaning).

7 — Master/detail: activation + selection column

The combination this exists for. A plain click opens a row into the pane below (dj-activate) and never disturbs the selection; the checkboxes choose the set the bulk toolbar acts on. Keyboard: arrows move, Enter opens, Space selects. Shift-click a checkbox for a range; Ctrl/Cmd-click a row selects it without opening. Safari note: enable "Press Tab to highlight each item on a webpage" or Tab will skip the checkboxes.

(click a row to open it)