Skip to content
7 Seventh UI VanillaJS Runtime playground

Component runtime

Data Table

Data Table uses TanStack Table Core as a headless engine and renders Seventh UI CSS classes for sorting, search, pagination, selection, expansion, events, and cleanup.

Examples

These examples use independent Data Table instances initialized from the docs script. Each table renders through the VanillaJS runtime while the visual layer comes from @seventh-ui/css.

Default runtime table

Sortable columns, global search, status cells, generated semantic markup, and client pagination.

Runtime

Toolbar with filters

Visual parity with the CSS package filter surface. Advanced filter behavior remains application-owned.

CSS Surface

Filtered devices

18 items

Row sizes

Large, medium, and small density variants rendered by independent VanillaJS controllers.

Runtime

Row states

Static visual states from the CSS contract for enabled, hover, selected, and focus treatment.

CSS Surface
Enabled Default row state
Hover Neutral alpha background
Clicked / selected Blue selected row treatment
Focus 2px blue focus border

Row patterns

Checkbox selection, bulk selection, expandable rows, formatted status cells, and page size controls.

Runtime

When a row has more than three available actions, prefer one overflow menu trigger instead of rendering every action inline.

Action overflow

Static menu composition for rows that have more actions than an inline action cell should carry.

CSS Surface
More than three actions

Pagination sizes

Runtime page-size options equivalent to the CSS pagination surface: 10, 20, 50, and 100 rows.

Runtime

Dark theme

Runtime-generated table inside the CSS dark theme scope.

Runtime

Empty state

The runtime keeps table semantics and renders an empty row when the current row model has no records.

Runtime

Usage Patterns

The first implementation focuses on table behavior that application teams repeatedly need before adding project-specific data orchestration.

Pattern Runtime support CSS responsibility
Client-side records Data, columns, row IDs, search, sorting, pagination, and row model state are owned by the VanillaJS controller. Table shell, wrapper, toolbar, header, row, cell, footer, density, status, and theme styling.
Selection workflow Checkbox state, row aria-selected, bulk selection, and sui:data-table:select. Selected row background, action-cell sizing, focus outline, and control spacing.
Expandable detail Expansion state, toggle controls, detail row rendering, and sui:data-table:expand. Detail row background, wrapped cells, borders, and density alignment.
CSS-only fallback No mutation when a page uses only static .sui-data-table markup without a runtime root/options. Static table appearance remains available without JavaScript.

Runtime Decision

The CSS package owns the visual contract. The VanillaJS runtime owns the behavior and uses TanStack Table Core behind the Seventh UI API.

CSS owns

Appearance

Classes, tokens, size variants, dark theme variables, and static visual states remain in @seventh-ui/css.

Runtime owns

Behavior

Sorting, filtering, pagination, selection, expansion, keyboard behavior, ARIA state, events, and cleanup live in this package.

Engine

TanStack Core

The headless table engine computes row models while Seventh UI controls markup, classes, and public events.

Hooks

Generated markup uses the same hooks accepted by the controller. CSS-only tables without hooks remain untouched.

Hook Role
data-sui-data-table Data Table root initialized by the component registry.
data-sui-data-table-search Search input connected to TanStack global filtering.
data-sui-sortable Header sort control that updates aria-sort.
data-sui-data-table-row-select Row selection control synchronized with aria-selected.
data-sui-data-table-row-toggle Row detail expansion control.
data-sui-data-table-prev / data-sui-data-table-next Pagination controls synchronized with disabled state.

Events

Before events are cancellable. Event detail includes the controller, root element, TanStack table instance, state, and action metadata.

sui:data-table:before-sort
sui:data-table:sort
sui:data-table:before-filter
sui:data-table:filter
sui:data-table:before-page
sui:data-table:page
sui:data-table:before-select
sui:data-table:select
sui:data-table:before-expand
sui:data-table:expand
sui:data-table:render

Programmatic API

const table = SeventhUI.createDataTableController(root, {
  columns: [
    { id: "name", accessorKey: "name", header: "Camera" },
    { id: "status", accessorKey: "status", header: "Status" }
  ],
  data,
  enableRowSelection: true,
  getRowId: (row) => row.id,
  pageSize: 10,
  renderToolbarActions: () => [
    createIconButton("adjust-filter-outline", "Open filters"),
    createIconButton("arrows-swap", "Open ordering")
  ]
});

table.sort("name");
table.filter("online");
table.nextPage();
table.destroy();