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