Conciergia UI

DataTable

დაჯავშნების ცხრილი სორტირებით, ძებნით, გვერდებითა და სტრიქონების არჩევით. TanStack Table v9.

მაგალითი

სასტუმროს დაჯავშნები
ნინო ბერიძე2012026-10-292026-10-31მოლოდინში180,00 ₾
გიორგი მაისურაძე2022026-10-292026-10-31დადასტურებული200,00 ₾
ანა კაპანაძე2032026-10-292026-10-31დადასტურებული220,00 ₾
ლუკა დვალი2042026-10-292026-10-31მოლოდინში240,00 ₾
მარიამ ლომიძე2052026-10-292026-10-31დადასტურებული260,00 ₾
არჩეულია 0 / 12 ჩანაწერი
ჩანაწერები გვერდზეგვერდი 1 / 3

ინსტალაცია

terminal
pnpm add @llc-conciergia/ui
იმპორტი
import {
  DataTable,
  DataTableColumnHeader,
  selectionColumn,
  type DataTableColumnDef,
} from "@llc-conciergia/ui/data-table";

შენიშვნები

სვეტების ფუნქციები კლიენტის მოდულში განსაზღვრეთ. სტაბილური getRowId აუცილებელია მონაცემების განახლებისას არჩევის შესანარჩუნებლად. pagination=false მხოლოდ პანელს მალავს; ყველა ჩანაწერის საჩვენებლად გამოიყენეთ manualPagination. სერვერული რეჟიმისთვის მართეთ state და შესაბამისი on…Change callbacks.

Props

Propტიპინაგულისხმევიაღწერა
DataTable: columns / dataDataTableColumnDef<T>[] / T[]—TanStack v9 სვეტები და სტაბილური მონაცემები.
DataTable: caption / className / emptyStatestring / string / ReactNode—სათაური, კონტეინერის კლასი და ცარიელი მდგომარეობა.
DataTable: toolbarboolean | (table) => ReactNode—ნაგულისხმევად ძებნა და სვეტების მენიუ; ან საკუთარი პანელი.
DataTable: paginationboolean—გვერდების მართვის პანელის ხილვადობა; ნაგულისხმევად true.
useDataTable(options)DataTableInstance<T>—ცალკე გამოსაყენებელი hook; რეგისტრირებული v9 features და რეაქტიული state.
UseDataTableOptions / DataTableTanStack TableOptions (features-ის გარეშე)—initialState, state, onSortingChange, onPaginationChange, onRowSelectionChange, onGlobalFilterChange, getRowId, enableRowSelection და დანარჩენი v9 პარამეტრები.
DataTableColumnHeader: column / title / classNameColumn / string / string—ზრდადი და კლებადი სორტირების ღილაკი.
DataTableToolbar: table / children / placeholder / classNameDataTableInstance / ReactNode / string / string—გლობალური ძებნა და დამატებითი მოქმედებები.
DataTablePagination: table / pageSizes / classNameDataTableInstance / number[] / string—გვერდის ზომები და პირველი/წინა/შემდეგი/ბოლო გვერდი.
DataTableViewOptions: table / labelsDataTableInstance / Record<string, string>—სვეტების ხილვადობა; labels აკავშირებს id-ს წარწერასთან.
selectionColumn<T>()DataTableColumnDef<T>—გვერდის ყველა სტრიქონისა და ცალკეული სტრიქონის არჩევა; ნაწილობრივი მდგომარეობა.
DataTableFeatures / DataTableColumnDef / DataTableInstancetypes—v9 features-ის შესაბამისი ტიპები აპლიკაციის სვეტებისა და helper-ებისთვის.