Table

Datová tabulka s default / striped / bordered / minimal variantami, barevným headerem a hover

Installation

pnpm dlx shadcn@latest add https://registry.ceskysoftware.cz/r/table.json

Usage

Preview

Varianty
default
JménoRoleStav
Jana N.AdminAktivní
Petr S.EditorAktivní
Marie D.ViewerNeaktivní
striped
JménoRoleStav
Jana N.AdminAktivní
Petr S.EditorAktivní
Marie D.ViewerNeaktivní
bordered
JménoRoleStav
Jana N.AdminAktivní
Petr S.EditorAktivní
Marie D.ViewerNeaktivní
minimal
JménoRoleStav
Jana N.AdminAktivní
Petr S.EditorAktivní
Marie D.ViewerNeaktivní
S akcemi a avatarem
UživatelRoleStav
Jana Nováková
jana@ceskysoftware.cz
AdminAktivní
Petr Suchý
petr@ceskysoftware.cz
EditorAktivní
Marie Dvořák
marie@ceskysoftware.cz
ViewerNeaktivní
Barvy headeru
primaryHodnotaStav
Řádek 11,234OK
Řádek 25,678--
secondaryHodnotaStav
Řádek 11,234OK
Řádek 25,678--
blueHodnotaStav
Řádek 11,234OK
Řádek 25,678--
greenHodnotaStav
Řádek 11,234OK
Řádek 25,678--
redHodnotaStav
Řádek 11,234OK
Řádek 25,678--

Import

import { Table } from "@/components/ui/table"

Example

<Table columns={[ { key: "name", header: "Jméno" }, { key: "role", header: "Role" }, { key: "status", header: "Stav", align: "center", render: (row) => ( <Tag color={row.status === "active" ? "green" : "grey"} size="xs"> {row.status} </Tag> ), }, ]} data={[ { id: 1, name: "Jana", role: "Admin", status: "active" }, { id: 2, name: "Petr", role: "Editor", status: "inactive" }, ]} variant="striped" color="primary" hoverable />

Dependencies

https://registry.ceskysoftware.cz/r/utils.json (registry)