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éno | Role | Stav |
|---|---|---|
| Jana N. | Admin | Aktivní |
| Petr S. | Editor | Aktivní |
| Marie D. | Viewer | Neaktivní |
striped
| Jméno | Role | Stav |
|---|---|---|
| Jana N. | Admin | Aktivní |
| Petr S. | Editor | Aktivní |
| Marie D. | Viewer | Neaktivní |
bordered
| Jméno | Role | Stav |
|---|---|---|
| Jana N. | Admin | Aktivní |
| Petr S. | Editor | Aktivní |
| Marie D. | Viewer | Neaktivní |
minimal
| Jméno | Role | Stav |
|---|---|---|
| Jana N. | Admin | Aktivní |
| Petr S. | Editor | Aktivní |
| Marie D. | Viewer | Neaktivní |
S akcemi a avatarem
| Uživatel | Role | Stav | |
|---|---|---|---|
Jana Nováková jana@ceskysoftware.cz | Admin | Aktivní | |
Petr Suchý petr@ceskysoftware.cz | Editor | Aktivní | |
Marie Dvořák marie@ceskysoftware.cz | Viewer | Neaktivní |
Barvy headeru
| primary | Hodnota | Stav |
|---|---|---|
| Řádek 1 | 1,234 | OK |
| Řádek 2 | 5,678 | -- |
| secondary | Hodnota | Stav |
|---|---|---|
| Řádek 1 | 1,234 | OK |
| Řádek 2 | 5,678 | -- |
| blue | Hodnota | Stav |
|---|---|---|
| Řádek 1 | 1,234 | OK |
| Řádek 2 | 5,678 | -- |
| green | Hodnota | Stav |
|---|---|---|
| Řádek 1 | 1,234 | OK |
| Řádek 2 | 5,678 | -- |
| red | Hodnota | Stav |
|---|---|---|
| Řádek 1 | 1,234 | OK |
| Řádek 2 | 5,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)