# antuikit / DataTable

> A table drawn from a `useDataTable` table, in antd Table's sizes and surfaces, with sticky pinned columns, an ActionBar for selected rows, a right-click menu, and empty and loading states.

Docs: https://antuikit.com/docs/components/data-table

## Install

npx antuikit@latest init
npx antuikit@latest add data-table

## Import

import { DataTable, useDataTable } from "@/components/ui/data-table";

## Demos

- [Basic](https://ui.antuikit.com/embed/data-table/basic.md): Pass `columns` and `data` to `useDataTable`, then the table it returns to `DataTable`, which sorts and pages in the browser.
- [Filter chips](https://ui.antuikit.com/embed/data-table/faceted-chips.md): Set `filter.chip` in a column's `meta` for a toolbar chip: a list with counts for `select` and `multi-select`, a slider with its `unit` for `range`.
- [Date chips](https://ui.antuikit.com/embed/data-table/date-chip.md): A `date` column's chip opens a calendar for one day, and a `date-range` column's chip picks a start and an end and keeps the stays that overlap them.
- [Filter drawer](https://ui.antuikit.com/embed/data-table/filter-drawer.md): Give columns a `variant` and the Filters button opens a drawer with an operator and a value per column, here from the start with `placement`.
- [Chip and drawer together](https://ui.antuikit.com/embed/data-table/chips-and-drawer.md): A column with a chip is in the drawer too, and both edit the same filter, so the Pending status set in `initialState` shows in each.
- [Header menu](https://ui.antuikit.com/embed/data-table/header-menu.md): Each header opens a menu to sort, pin to the start or end, move the column or hide it, and `meta.tooltip` adds a hint beside the label.
- [Column panel](https://ui.antuikit.com/embed/data-table/view-panel.md): The View button lists the columns to show, hide and drag into a new order, and `meta.panelLocked` keeps Name visible and in place.
- [Row selection](https://ui.antuikit.com/embed/data-table/row-selection.md): Add `getSelectColumn()` and pass `actionBar` for the selected rows' actions, and set `actionBarProps.container` to `"window"` to fix the bar to the bottom of the window.
- [Single selection](https://ui.antuikit.com/embed/data-table/single-selection.md): Call `getSelectColumn({ mode: "single" })` and set `enableMultiRowSelection` to false for a radio per row, like picking one rate.
- [Row actions](https://ui.antuikit.com/embed/data-table/row-actions.md): Add `getActionsColumn()` with the menu items for each row, where Edit opens the guest in a drawer and Delete removes the row.
- [Pinning and resizing](https://ui.antuikit.com/embed/data-table/pinning-resizing.md): Set `columnPinning` in `initialState` to keep Booking at the start and Total at the end while the rest scrolls, and drag a header edge to resize.
- [Size](https://ui.antuikit.com/embed/data-table/sizes.md): Set `size` to `small`, `medium` or `large` for the row height, the same three as Table.
- [Server mode](https://ui.antuikit.com/embed/data-table/server-mode.md): Set `mode` to `server` with a `rowCount`, fetch each page from the controlled paging, sorting, filters and search, and show `loading` while it arrives.
- [Applied filters](https://ui.antuikit.com/embed/data-table/applied-filters.md): Pass `onFiltersChange` to the toolbar to get the applied filters with their labels, here shown as closable tags above the table.
- [CSV export](https://ui.antuikit.com/embed/data-table/export.md): Call `exportCsv` with a `scope` to download all matching rows, the current page or the selected rows as a CSV file.
- [Empty, loading and skeleton](https://ui.antuikit.com/embed/data-table/empty-loading-skeleton.md): A table with no rows shows an empty state, `loading` puts a spinner over the rows, and `DataTableSkeleton` stands in for the first load.
- [Room types](https://ui.antuikit.com/embed/data-table/room-types.md): A room types list with a name search, meal plan tags, capacity columns with their own icon, row actions and pagination.
- [Payment methods](https://ui.antuikit.com/embed/data-table/payment-methods.md): A payment methods list under a warning, with Visibility, Provider and Status chips, colored visibility tags and status dots.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/data-table`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `DataTable` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.