# antuikit / Table

> Table with the sorter, filter, expand and pagination icons drawn from your icon pack, and `medium` as its default size. The statics (`Column`, `Summary`, the selection constants) are unchanged.

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

## Install

npx antuikit@latest init
npx antuikit@latest add table

## Import

import { Table } from "@/components/ui/table";

## Demos

- [Basic](https://ui.antuikit.com/embed/table/basic.md): Pass `columns` and `dataSource` with a `rowKey` for a paged table, and use a column's `render` to show a `Tag` or a `Badge` in its cells.
- [Size and border](https://ui.antuikit.com/embed/table/size-bordered.md): Set `size` to `small`, `medium` (the default) or `large` to change the row height, and add `bordered` for lines around every cell.
- [Column alignment](https://ui.antuikit.com/embed/table/align.md): Set a column's `align` to `"start"`, `"center"` or `"end"` to place its header and cells, like amounts on the end edge.
- [No row hover](https://ui.antuikit.com/embed/table/row-hover.md): Set `rowHoverable` to `false` to stop rows from highlighting under the pointer, which they do by default.
- [Sorting](https://ui.antuikit.com/embed/table/sorting.md): Give a column a `sorter` to sort it from its header, and a `multiple` priority on several columns to sort by all of them at once.
- [Filtering](https://ui.antuikit.com/embed/table/filtering.md): Give a column `filters` and an `onFilter` function to add a filter menu to its header, like picking environments or statuses.
- [Single-choice filter](https://ui.antuikit.com/embed/table/filter-single.md): Set `filterMultiple` to `false` so a column's filter menu picks one value at a time.
- [Filter search](https://ui.antuikit.com/embed/table/filter-search.md): Set `filterSearch` to add a search box to a long filter menu, like a list of owners.
- [Tree filter](https://ui.antuikit.com/embed/table/filter-tree.md): Set `filterMode` to `"tree"` and nest `children` in `filters` to group the choices, like regions under a continent.
- [Row selection](https://ui.antuikit.com/embed/table/selection.md): Pass `rowSelection` to add a checkbox to each row, and return `disabled` from `getCheckboxProps` for rows that cannot be picked.
- [Expandable rows](https://ui.antuikit.com/embed/table/expandable.md): Set `expandable.expandedRowRender` to open a row's details under it, and `expandRowByClick` to open them from anywhere on the row.
- [Grouped columns](https://ui.antuikit.com/embed/table/grouped-columns.md): Nest columns in a column's `children` to group them under one header, and sorters and filters still work on the nested columns.
- [Responsive columns](https://ui.antuikit.com/embed/table/responsive.md): Give a column `responsive` breakpoints, like `["md"]`, to show it only on screens that wide, so Owner and Last deploy hide on a narrow window.
- [Fixed header](https://ui.antuikit.com/embed/table/fixed-header.md): Set `scroll.y` to a height so the rows scroll under a header that stays in place.
- [Horizontal scroll](https://ui.antuikit.com/embed/table/scroll.md): Give each column a `width` and set `scroll.x` to `"max-content"`, so a wide table scrolls sideways inside its container.
- [Fixed columns](https://ui.antuikit.com/embed/table/fixed-columns.md): Mark a column `fixed: "left"` or `fixed: "right"` on a scrolling table to keep it in place, like the name and the row actions menu.
- [Summary row](https://ui.antuikit.com/embed/table/summary.md): Return a `Table.Summary.Row` from `summary` for a totals row, and wrap it in `Table.Summary fixed` with a `scroll.y` so the header and the totals stay in view.
- [Ellipsis](https://ui.antuikit.com/embed/table/ellipsis.md): Set a column's `ellipsis` to cut long text at the cell's width, and pass `showTitle: false` with a `Tooltip` to show the full value on hover.
- [Title and footer](https://ui.antuikit.com/embed/table/title-footer.md): Return a node from `title` and `footer` to add a bar above the header and below the rows, like a caption and a row count.
- [Empty](https://ui.antuikit.com/embed/table/empty.md): Pass an `Empty` with an action as `locale.emptyText` to replace the message a table shows when it has no rows.
- [Loading state](https://ui.antuikit.com/embed/table/loading.md): Set `loading` to show a spinner over the rows while the data refreshes, like after a click on Refresh.
- [Editable cells](https://ui.antuikit.com/embed/table/editable-lite.md): Return a controlled borderless `Input` or `Select`, a spinner `InputNumber` or a `Switch` from each column's `render` to make every cell editable, writing each change back to your data.
- [Row actions](https://ui.antuikit.com/embed/table/row-actions.md): Add a last column that renders a `Dropdown` behind a more button, for actions like viewing logs or deleting a row.
- [Team members](https://ui.antuikit.com/embed/table/users-table.md): A team members card with avatars, a role tag, a status badge and a menu of actions on each row, five members per page.

## 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/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-*)`.
- `Table` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.