Tables

Overview

Render typed rows and columns with terminal-width fitting, virtualization, sorting, selection, and cell activation.

Installation

npx @mwillbanks/tuil add table data-table

The CLI writes source-owned components beneath the destination configured in tuil.config.ts; the default import below assumes src/components/tuil.

Loading executable example…

Components and subcomponents

Interaction

Arrow keys navigate cells or rows; Space toggles selection; Enter activates; configured keys sort columns.

API and events

onActivate, onSelectionChange, onToggleSelection, and onSortColumn expose table intent.

TanStack Table v9 setup

DataTable accepts a TanStack Table v9 instance configured with the exported dataTableFeatures feature set.

import { createColumnHelper, useTable } from "@tanstack/react-table";
import {
  DataTable,
  dataTableFeatures,
} from "@/components/tuil/data-display/complex-data";

interface Person {
  id: string;
  name: string;
}

const columnHelper = createColumnHelper<typeof dataTableFeatures, Person>();
const columns = columnHelper.columns([
  columnHelper.accessor("name", { header: "Name" }),
]);

export function PeopleTable({ people }: { people: Person[] }) {
  const table = useTable({
    features: dataTableFeatures,
    data: people,
    columns,
    getRowId: (person) => person.id,
  });

  return <DataTable table={table} />;
}

Every interactive component publishes semantic roles, labels, state, and focus identity through the renderer's SemanticRegistry. Callback failures flow to the owning application's error boundary.

Example

import type { ComponentProps } from "react";
import { Table } from "@/components/tuil/data-display/complex-data";

export function Example(props: ComponentProps<typeof Table>) {
  return <Table {...props} />;
}

Registry-installed components are source-owned: customize the generated file in your application, and use the package reference for the shared runtime contracts.