Rezi 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" });