0.7.0-beta

Released 2026-05-19 · Combined Sprint 4.2 + 4.3 release

Two coherent themes shipped in one release:

1. DataGrid (Sprint 4.2) — virtualized data table for large data sets, sibling to <Table>. Same column model, same cell renderer library, same identity-consistent design — different render strategy (windowed). Built with homemade virtualization (useVirtualizer hook: scroll-event + requestAnimationFrame debounce + ResizeObserver) — zero new runtime deps.

2. Theme identity sweep (Sprint 4.3) — applies the identity rule codified in Sprint 4.1 to the whole catalog. 42 latent dark: Tailwind variant anti-patterns silently broke dark mode via the dashforgePreset CSS-var double-inversion. Fixed across 10 components + new package-level regression test that catches re-introductions at build time.

Strictly additive minor bump. Drop-in upgrade from 0.6.0-beta — zero breaking changes on public APIs (internal helpers moved from Table/_internal/ to _shared/data/; only externally-visible re-export was getNestedValue, name preserved).

Affected packages

Unchanged (independent versioning):

Added

<DataGrid> — virtualized data table

import { DataGrid } from '@dashforge/tw';

<DataGrid
  rows={users}                   // 10k, 100k, or millions
  cols={[
    { field: 'name',  header: 'Name',  sortable: true, searchable: true,
      sticky: 'left' },          // pinned during horizontal scroll
    { field: 'email', header: 'Email', searchable: true },
    { field: 'age',   header: 'Age',   sortable: true },
  ]}
  getRowId={(row) => row.id}
  rowHeight={48}                 // fixed row height (required for virt math)
  height="600px"                 // bounded container (required)
  enableSearch
  rowSelection="multiple"
  selectAllScope="allLoaded"     // or 'visible'
/>

When to use DataGrid vs Table

Both ship the same visual identity (Stripe-style clean lines, hover row actions, sticky header, smart defaults, canonical theme patterns). They differ at the runtime characteristics level:

Full decision matrix + "Use when..." + "Switch later" path in the DataGrid docs page.

Homemade virtualization

useVirtualizer hook in _shared/data/:

• Scroll-event listener on bounded container
• requestAnimationFrame debounce → bounded to 60 fps even on fast scrolling
• ResizeObserver → re-virtualize on window resize / sidebar toggle
• Spacer-row approach (<tr aria-hidden="true"> above + below visible window) preserves <table> semantics + a11y

Performance: 10 000-row data set with rowHeight=48 + height="600px" mounts ~18 <tr> (13 visible + 5 overscan) + 2 spacers. Scroll FPS bounded to 60.

Server-side mode — 4 independent flags

<DataGrid
  rows={pageOfRows}                 // server-returned slice
  serverSideSort        // emits onSortChange, no local sort
  serverSideFilter      // emits onFilterChange, no local filter
  serverSideSearch      // emits onSearchQueryChange (debounced)
  serverSidePagination  // uses totalCount for virt math
  totalCount={1_000_000}            // required when serverSidePagination
/>

Mix and match independently. Use serverSideSort alone if filter happens locally but sort hits the backend.

selectAllScope

The header "select all" checkbox has two reasonable semantics in large data grids:

• 'allLoaded' (default) — toggles all rows in the rows prop
• 'visible' — toggles only the viewport window

For "select all in server-side dataset", the consumer wires it themselves (fetch all ids + setSelectedRowIds(allIds)).

Sticky left column

Via cols[i].sticky: 'left'. CSS-only (position: sticky; left: 0) with a z-index ladder for the top-left corner intersection with the sticky header. Multiple sticky-left columns supported, stack left-to-right. Right-sticky deferred to v1-bis.

Internal pagination (optional)

<DataGrid
  pagination={{
    page,
    pageSize,
    onPageChange: setPage,
    onPageSizeChange: setPageSize,
  }}
/>

Renders the Sprint 4 <Pagination> component below the scroll container. Composes naturally with virtualization (each page is virtualized internally if large enough).

useVirtualizer hook

New helper in _shared/data/ — exported internally only. Other future virtualized components (TreeView, future GanttGrid, etc.) can reuse it.

sticky?: 'left' | 'right' on TableColumn<T>

Additive — Table (non-virtualized) ignores it; DataGrid honors 'left' in v1.

Changed

Theme identity sweep across the catalog

10 components had latent dark: Tailwind variants on the neutral palette. The dashforgePreset() CSS-variable swap auto-inverts the neutral palette already (bg-neutral-50 is light in light mode, dark in dark mode). Adding dark:bg-neutral-N (or text-, border-, ring-) creates a double inversion that breaks dark mode.

42 violations fixed across:

Categorization:

• Category A (drop dark: — auto-invert via CSS var swap): 31 sites
• Category B (keep dark: — bg-white / fill-white is hardcoded, dark target needed; fixed wrong targets like dark:bg-neutral-900 → dark:bg-neutral-100 for proper dark elevation): 5 sites
• Category D (component-specific intent change — Box solid neutral now auto-inverts as accent surface, consistent with the identity rule): 1 site

Catalogued in detail in libs/dashforge/tw/THEME-AUDIT.md.

Internal refactor — shared data helpers moved

Table/_internal/ → _shared/data/ (13 files). The helpers (getNestedValue, useTableSearch, useTableSort, useTableSelection, useTableFilter, useColumnAutoDetect, useDebouncedValue, useControllableState) are now shared between Table and DataGrid. Pure path move — function names unchanged, public API surface unchanged (only getNestedValue was ever re-exported; the re-export path updated transparently).

Box solid neutral now auto-inverts

Previously was bg-neutral-900 text-white dark:bg-neutral-100 dark:text-neutral-900 — text-white (no auto-invert) had forced the double-invert pattern to stay readable.

Now: bg-neutral-900 text-neutral-50 (both auto-invert) — the accent surface flips with the page in dark mode (light surface + dark text) for identity consistency. If you need a fixed always-dark accent, override with sx="bg-neutral-900 text-white" explicitly — but most use cases will prefer the inverting behavior.

Internal

Package-level theme identity regression guard

New _shared/themeIdentity.test.ts replaces the Table-only one from Sprint 4.1. Scans every .ts/.tsx source file under src/components/** (excluding tests). The test FAILS if any dark:*-neutral-N anti-pattern is introduced — except for the legitimate Category B pattern (bg-white dark:bg-neutral-N — bg-white doesn't auto-invert, so the dark: IS required).

40+ source files scanned per test run. ~16 ms overhead. Catches accidental re-introductions of the anti-pattern at PR time.

THEME-AUDIT.md

New file at the package root. Catalogues every site touched in Sprint 4.3 with categorization (A/B/C/D), the offending class, and the canonical replacement. Mirrors the format of A11Y.md / PARITY.md / PERFORMANCE.md.

Tests

+133 new unit tests for Sprint 4.2 + 4.3:

• useVirtualizer math (12) — window calc, overscan, padding invariant, edge cases (totalCount=0, very large dataset)
• <DataGrid> (24) — rendering, virtualized window, sort, search, selection, selectAllScope, sticky left column, server-side mode flags, RBAC, internal pagination, smart defaults, i18n
• _shared/themeIdentity.test.ts package-level scanner (40 file-scan tests; 0 violations reported)
• Test files retargeted to assert new canonical patterns (Box × 4, Typography × 1, Divider × 1 = 6 tests updated)

Full TW suite at 961/961 passing across 48 files.

Bundle delta

Just under the 10% reviewer-sign-off threshold from PERFORMANCE.md. The +8.1% is entirely DataGrid + virtualizer code; the theme identity sweep is net-neutral on bundle (removed redundant classes, replaced with smaller ones).

Migration

pnpm up @dashforge/tw@^0.7.0-beta

No code changes required. To adopt the new DataGrid:

import {
  DataGrid,
  RenderTwoLine,
  RenderChip,
  RowActionsMenu,
  Button,
} from '@dashforge/tw';

<DataGrid
  rows={users}
  cols={[
    {
      field: 'name',
      header: 'Name',
      sortable: true,
      searchable: true,
      sticky: 'left',
      cellRenderer: ({ row }) => (
        <RenderTwoLine primary={row.name} secondary={row.email} />
      ),
    },
    // …
  ]}
  getRowId={(r) => r.id}
  rowHeight={48}
  height="600px"
  enableSearch
  rowSelection="multiple"
  selectAllScope="allLoaded"
  bulkActions={(rows) => (
    <Button color="danger">Delete {rows.length}</Button>
  )}
/>

Switch existing Table → DataGrid (when row count grows)

3-line mechanical change:

- <Table
+ <DataGrid
    rows={users}
    cols={columns}
    getRowId={(row) => row.id}
+   rowHeight={48}
+   height="600px"
  />

Everything else keeps working (sort / search / selection / row actions / cell renderers / RBAC / i18n / sx / slotProps). One feature lost on swap: expandable rows (Table-specific until DataGrid v1-bis).

Dark mode users — visible improvements

If your app has dark mode users, the theme identity sweep fixes the following bugs they may have been experiencing:

• Tooltips invisible (same color as page) → now high-contrast inversion
• Body text low-contrast on dark surface (Typography neutral / muted)
• Dialog / Popover content surfaces overpowering white on dark page → now properly elevated dark surface
• Pagination buttons / Tabs active pill / Box elevated surfaces — same issue class, all fixed

No consumer code changes needed — the fix is purely internal to the library variant recipes.

Compatibility

Looking ahead