Result table

Pro

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.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/result-table

Brings in: locale, work, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"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>

Prop	Type	Default	Description
tablerequired	`ResultTableData`	—	The query's columns, rows and total match count.
title	`string \| undefined`	—	The heading. Defaults to "Results".
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

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

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