Table

Tabulka se sloupci jako daty. Drží scope na záhlaví, jeden zdroj pravdy pro colSpan a řádkové akce neschovává za hover.

Kdy použít

Obrazovka vypisuje seznam záznamů se stejnou sadou sloupců — zdaleka nejčastější tvar admin obrazovky.
Sloupce vznikají za běhu — přidávají se podle oprávnění, plánu nebo nastavení tenanta. Jako data se filtrují jedním filter, jako JSX by to byla podmínka v hlavičce a v každém řádku.
Řádek má akce (upravit, smazat). Tabulka jim přidá poslední sloupec a nechá je viditelné, místo aby je schovala za hover.

Kdy nepoužít

Data nejsou mřížka. Dvojice „popisek — hodnota“ u jednoho záznamu je definiční seznam, ne tabulka; odečítač by ohlašoval souřadnice, které nikam nevedou.
Rozvržení je mřížka jen vizuálně (dlaždice, karty vedle sebe). Na to je CSS grid — <table> tomu dává význam, který nemá.
Potřebuješ něco z výčtu „co první verze neumí“ níž a nemůžeš na to počkat. Konverze, která by byla UX regrese, je důvod tabulku nepoužít — ne důvod si ji obejít.

Vlastnosti

columns: readonly IngotColumn<Row>[] — Sloupce jako data — přidání sloupce nerozejde colSpan. Vlastnosti sloupce viz tabulka níž.
rows: readonly Row[] — Právě vykreslovaná stránka dat.
rowKey: (row: Row) => string — Stabilní identita řádku.
empty: ReactNode — Co ukázat místo řádků — typicky IngotEmptyState.
loading: boolean — Tabulka dostane aria-busy a jeden role=status řádek.
loadingLabel: string — Přeložené „Načítám…“. Povinné, když loading může nastat.
actions: (row: Row) => ReactNode — Řádkové akce; přidá poslední sloupec.
actionsLabel: string — Záhlaví sloupce akcí — jen pro odečítač.
caption: string — Popis tabulky pro odečítač, vykreslený mimo obraz.
stickyHeader: boolean — Záhlaví zůstane viditelné ve scrollboxu s omezenou výškou.
density: "default" | "compact" — compact stáhne padding buňky na 8px — když se řádky na obrazovku počítají.
sort: IngotSort — Aktuální řazení {key, dir}. Tabulka data neřadí — pořadí určuje pole rows.
onSortChange: (sort: IngotSort) => void — Klik na řaditelnou hlavičku: neaktivní → asc, asc ↔ desc.
selectedKeys: ReadonlySet<string> — Klíče vybraných řádků (rowKey). Spolu s onSelectedKeysChange zapne checkbox sloupec.
onSelectedKeysChange: (keys: ReadonlySet<string>) => void — Nová množina po každé změně výběru — řádek i vybrat/zrušit vše.
selectAllLabel: string — Přeložený popisek checkboxu „vybrat vše“ v hlavičce.
selectRowLabel: (row: Row) => string — Přeložený popisek checkboxu řádku („Vybrat {název}“).
bulkbar: ReactNode — Pruh hromadných akcí nad tabulkou; ukáže se jen s neprázdným výběrem.
rowClassName: (row: Row) => string | undefined — Stav celého řádku (nevybratelný, zvýrazněný), ne styl po buňkách.
className: string — Průchozí třída tabulky, typicky min-w-[40rem].
rowTestId: (row: Row) => string — data-testid řádku — E2E na něm na některých stránkách visí.
testId: string — data-testid tabulky.