Code & JSON

pnpm dlx caliper add table tree-view# adds the source under components/ui

import { SortableTable, FilterToolbar } from "@/components/ui";
type Account = { id: string; name: string; mrr: number };
const columns = [  { id: "name", header: "Account", cell: (r: Account) => r.name, sortValue: (r: Account) => r.name },  { id: "mrr", header: "MRR", align: "end" as const, cell: (r: Account) => `$${r.mrr}`, sortValue: (r: Account) => r.mrr },];
export function Accounts({ rows }: { rows: Account[] }) {  const [query, setQuery] = useState("");  const visible = rows.filter((r) => r.name.toLowerCase().includes(query.toLowerCase()));
  return (    <>      <FilterToolbar label="Accounts" query={query} onQueryChange={setQuery} filters={[]} value={{}} onValueChange={() => {}} />      {/* Sorting, selection and empty states are handled by the table. */}      <SortableTable caption="Accounts" columns={columns} rows={visible} getRowId={(r) => r.id} />    </>  );}