Table
სემანტიკური ცხრილი გადახვევით, სიმკვრივის რეჟიმებითა და მონიშნული სტრიქონებით.
მაგალითი
| სტუმარი | ნომერი |
|---|---|
| ნინო ბერიძე | 201 |
| ანა კაპანაძე | 305 |
| სულ 2 დაჯავშნა | |
import {
Table,
TableHeader,
TableBody,
TableFooter,
TableRow,
TableHead,
TableCell,
TableCaption,
} from "@llc-conciergia/ui/table";
<Table variant="striped">
<TableCaption>დღევანდელი დაჯავშნები</TableCaption>
<TableHeader>
<TableRow>
<TableHead>სტუმარი</TableHead>
<TableHead>ნომერი</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>ნინო ბერიძე</TableCell>
<TableCell>201</TableCell>
</TableRow>
<TableRow>
<TableCell>ანა კაპანაძე</TableCell>
<TableCell>305</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={2}>სულ 2 დაჯავშნა</TableCell>
</TableRow>
</TableFooter>
</Table>;ინსტალაცია
pnpm add @llc-conciergia/uiimport {
Table,
TableHeader,
TableBody,
TableFooter,
TableRow,
TableHead,
TableCell,
TableCaption,
} from "@llc-conciergia/ui/table";npx @llc-conciergia/cli add tablenpx shadcn@latest add https://ui.conciergia.co/r/table.jsonProps
| Prop | ტიპი | ნაგულისხმევი | აღწერა |
|---|---|---|---|
| Table: variant | "default" | "striped" | — | ცხრილის ფონი. |
| Table: wrapperClassName | string | — | ჰორიზონტალური გადახვევის კონტეინერის კლასი. |
| Table: className / children / ref | table props | — | სემანტიკური table ელემენტის თვისებები. |
| TableHeader / TableBody / TableFooter | thead / tbody / tfoot props | — | ცხრილის სექციები. |
| TableRow | tr props | — | hover და data-state="selected" მდგომარეობა. |
| TableHead: scope | "col" | "row" | "colgroup" | "rowgroup" | — | ნაგულისხმევად col; სტრიქონის სათაურზე გამოიყენეთ row. |
| TableCell | td props | — | უჯრა; colSpan და rowSpan მხარდაჭერილია. |
| TableCaption | caption props | — | ცხრილის ხელმისაწვდომი სათაური. |