rezi-data-table

name	rezi-data-table
description	Add a data table with sorting, selection, and keyboard navigation. Use when displaying tabular data.
user-invocable	true
allowed-tools	Read, Glob, Grep, Edit, Write
argument-hint	[data-source]
metadata	{"short-description":"Add data table"}

When to use

Use this skill when:

• Displaying tabular data with rows and columns
• Need sorting, selection, or keyboard navigation on data
• Building dashboards or data-heavy screens

Source of truth

• packages/core/src/widgets/useTable.ts — useTable() hook
• packages/core/src/widgets/types.ts — TableProps
• packages/core/src/widgets/ui.ts — ui.table()
• packages/core/src/ui/recipes.ts — recipe.table() for design-system-consistent table styling

Steps

1. Use the useTable() hook inside a defineWidget:

   import { defineWidget, ui, useTable } from "@rezi-ui/core";
   
   const DataTable = defineWidget<{ items: Item[] }>((props, ctx) => {
     const table = useTable(ctx, {
       rows: props.items,
       columns: [
         { key: "name", header: "Name", flex: 1 },
         { key: "size", header: "Size", width: 10, align: "right" },
       ],
       getRowKey: (row) => row.id,
       selectable: "multi",
      });
     return ui.table({
       ...table.props,
       dsSize: "md",
       dsTone: "default",
     });
   }, { name: "DataTable" });
   

2. Handle selection via table.selection (array of selected row keys)

3. Handle sorting via table.sortColumn and table.sortDirection

4. For large datasets, consider ui.virtualList() instead

Design system note

Tables are recipe-styled by default when a ThemeDefinition preset is active. Use dsSize / dsTone for explicit DS tuning when needed.

Verification

• Correct columns render with headers
• Selection updates on keyboard/mouse interaction
• Sorting works in both directions