DataTable
დაჯავშნების ცხრილი სორტირებით, ძებნით, გვერდებითა და სტრიქონების არჩევით. TanStack Table v9.
მაგალითი
| ნინო ბერიძე | 201 | 2026-10-29 | 2026-10-31 | მოლოდინში | 180,00 ₾ | |
| გიორგი მაისურაძე | 202 | 2026-10-29 | 2026-10-31 | დადასტურებული | 200,00 ₾ | |
| ანა კაპანაძე | 203 | 2026-10-29 | 2026-10-31 | დადასტურებული | 220,00 ₾ | |
| ლუკა დვალი | 204 | 2026-10-29 | 2026-10-31 | მოლოდინში | 240,00 ₾ | |
| მარიამ ლომიძე | 205 | 2026-10-29 | 2026-10-31 | დადასტურებული | 260,00 ₾ |
არჩეულია 0 / 12 ჩანაწერი
ჩანაწერები გვერდზეგვერდი 1 / 3
"use client";
import {
DataTable,
DataTableColumnHeader,
selectionColumn,
type DataTableColumnDef,
} from "@llc-conciergia/ui/data-table";
type Reservation = { id: string; guest: string; amount: number };
const columns: DataTableColumnDef<Reservation>[] = [
selectionColumn<Reservation>(),
{
accessorKey: "guest",
header: ({ column }) => <DataTableColumnHeader column={column} title="სტუმარი" />,
},
{
accessorKey: "amount",
header: "თანხა",
cell: ({ row }) =>
new Intl.NumberFormat("ka-GE", { style: "currency", currency: "GEL" }).format(
row.original.amount,
),
},
];
const data = [{ id: "1", guest: "ნინო ბერიძე", amount: 240 }];
export function Reservations() {
return (
<DataTable
columns={columns}
data={data}
getRowId={(row) => row.id}
caption="დაჯავშნები"
/>
);
}ინსტალაცია
pnpm add @llc-conciergia/uiimport {
DataTable,
DataTableColumnHeader,
selectionColumn,
type DataTableColumnDef,
} from "@llc-conciergia/ui/data-table";npx @llc-conciergia/cli add data-tablenpx shadcn@latest add https://ui.conciergia.co/r/data-table.jsonშენიშვნები
სვეტების ფუნქციები კლიენტის მოდულში განსაზღვრეთ. სტაბილური getRowId აუცილებელია მონაცემების განახლებისას არჩევის შესანარჩუნებლად. pagination=false მხოლოდ პანელს მალავს; ყველა ჩანაწერის საჩვენებლად გამოიყენეთ manualPagination. სერვერული რეჟიმისთვის მართეთ state და შესაბამისი on…Change callbacks.
Props
| Prop | ტიპი | ნაგულისხმევი | აღწერა |
|---|---|---|---|
| DataTable: columns / data | DataTableColumnDef<T>[] / T[] | — | TanStack v9 სვეტები და სტაბილური მონაცემები. |
| DataTable: caption / className / emptyState | string / string / ReactNode | — | სათაური, კონტეინერის კლასი და ცარიელი მდგომარეობა. |
| DataTable: toolbar | boolean | (table) => ReactNode | — | ნაგულისხმევად ძებნა და სვეტების მენიუ; ან საკუთარი პანელი. |
| DataTable: pagination | boolean | — | გვერდების მართვის პანელის ხილვადობა; ნაგულისხმევად true. |
| useDataTable(options) | DataTableInstance<T> | — | ცალკე გამოსაყენებელი hook; რეგისტრირებული v9 features და რეაქტიული state. |
| UseDataTableOptions / DataTable | TanStack TableOptions (features-ის გარეშე) | — | initialState, state, onSortingChange, onPaginationChange, onRowSelectionChange, onGlobalFilterChange, getRowId, enableRowSelection და დანარჩენი v9 პარამეტრები. |
| DataTableColumnHeader: column / title / className | Column / string / string | — | ზრდადი და კლებადი სორტირების ღილაკი. |
| DataTableToolbar: table / children / placeholder / className | DataTableInstance / ReactNode / string / string | — | გლობალური ძებნა და დამატებითი მოქმედებები. |
| DataTablePagination: table / pageSizes / className | DataTableInstance / number[] / string | — | გვერდის ზომები და პირველი/წინა/შემდეგი/ბოლო გვერდი. |
| DataTableViewOptions: table / labels | DataTableInstance / Record<string, string> | — | სვეტების ხილვადობა; labels აკავშირებს id-ს წარწერასთან. |
| selectionColumn<T>() | DataTableColumnDef<T> | — | გვერდის ყველა სტრიქონისა და ცალკეული სტრიქონის არჩევა; ნაწილობრივი მდგომარეობა. |
| DataTableFeatures / DataTableColumnDef / DataTableInstance | types | — | v9 features-ის შესაბამისი ტიპები აპლიკაციის სვეტებისა და helper-ებისთვის. |