# Result table

Query rows as a typed, sortable table. Numbers align right; a blank value shows as a dash so it isn't mistaken for zero. If the query matched more rows than came back, the footer says how many weren't shown.

- Registry name: `result-table` (`@candor/result-table`)
- Tier: Pro. Installing it needs a Pro, Premium or Team licence key: the person runs `npx candor-ui key <key>` themselves; never ask for the key in chat or write it to a file.
- Docs: https://candor.themethodic.com/docs/result-table

## Install

```bash
npx candor-ui add result-table
```

Run `npx candor-ui@latest init` once first (https://candor.themethodic.com/get-started.md). Without the CLI: `npx shadcn@latest add @candor/result-table`.
It brings in: locale, work, utils.
npm packages: lucide-react@^1.67.0.

## Example

```tsx
"use client"

import type { ResultTable as ResultTableData } from "@/lib/work"
import { ResultTable } from "@/components/result-table"

const table: ResultTableData = {
  columns: [
    { key: "region", label: "Region" },
    { key: "customers", label: "Customers", numeric: true },
    { key: "open", label: "Open invoices", numeric: true },
    { key: "owner", label: "Account manager" },
  ],
  rows: [
    { region: "us", customers: 9120, open: 1404, owner: "Dana" },
    { region: "eu", customers: 5310, open: 811, owner: "Jonas" },
    { region: "apac", customers: 3440, open: 502, owner: "Mei" },
    { region: "other", customers: 370, open: 12, owner: null },
  ],
  total: 4,
  query: "SELECT region, COUNT(*) FROM customers GROUP BY region",
}

export default function Example() {
  return <ResultTable className="max-w-2xl" table={table} title="Customers by region" />
}
```

## <ResultTable>

Props:

- `table: ResultTableData`: The query's columns, rows and total match count.
- `title?: string | undefined`: The heading. Defaults to "Results".
- `className?: string | undefined`

## Strings (`resultTable`)

The fixed words, English by default. Override any of them under `resultTable` in `<LocaleProvider strings={{ resultTable: { … } }}>`; the table is exported as `resultTableStrings`.

- `label`: Query results
- `title`: Results
- `rows`: { one: "{count} row", other: "{count} rows" }
- `blank`: blank
- `showing`: Showing {shown} of {total}

## Rules for using Candor UI

- Components take plain typed data. Never pass model output as HTML or render it as a link; messages are typed blocks.
- A control that can't be used says why: wrap it in `<Locked reason="…">`, don't just disable it.
- Don't show a value you don't have: leave it out (it renders as —) rather than guess. An estimate is labelled as one.
- Nothing is pre-selected in a decision a person makes, and the agent is named from your app's data, never from model output.
- Your app's words go in `LocaleProvider` (fixed strings) and `TermsProvider` (nouns); entity kinds and agent roles in `EntityKindsProvider` and `AgentRolesProvider`.