Table

@sushindustries/ui

A table that is a table: declared columns, right-aligned numbers, sideways scroll in its own frame.

5 min read
View as MarkdownEdit on GitHub

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Viewport width
Phone22remthe floor, the narrowest this promises to work at
tanstacktanstack add https://adamjurek.com/r/tanstack/table.jsonshadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/table.json

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

import { Table } from "@sushindustries/ui";

interface Package {
	name: string;
	version: string;
	downloads: number;
}

export function PackageList({ packages }: { packages: Package[] }) {
	return (
		<section className="card p-4">
			<h2>Packages</h2>
			<Table
				caption="Every package in this workspace, with its published version"
				rowKey={(row) => row.name}
				columns={[
					{ key: "name", header: "Package", render: (row) => row.name },
					{ key: "version", header: "Version", render: (row) => row.version },
					{
						key: "downloads",
						header: "Downloads",
						align: "right",
						render: (row) => row.downloads.toLocaleString(),
					},
				]}
				rows={packages}
			/>
		</section>
	);
}
tsx

What this example is not

toLocaleString() here is the caller formatting a number for display - TableTableA table that is a table: declared columns, right-aligned numbers, sideways scroll in its own frame.@sushindustries/ui · content renders whatever render returns and has no formatting of its own, for numbers, dates or anything else.