Table

Rows and columns with sorting, filtering, selection, expansion, fixed headers and columns, and its own pagination.

Preview in Figma LLMs

Overview

Design

Code

Table installs into your project as a file you own. It takes the same props as Ant Design's Table and adds none. It changes the icons: the sort carets, the filter funnel and the pager chevrons come from your icon pack.

The sort and filter icons are set on each column, including nested ones in children. A sortIcon or filterIcon you set on a column wins.

A few icons stay Ant Design's: the rowSelection.selections arrow and the search icon in a filterSearch menu. Columns written as <Table.Column> children also keep Ant Design's sort and filter icons, so prefer the columns prop.

Install

npx antuikit@latest init

npx antuikit@latest add table

The first command sets up AntuikitProvider and the theme tokens, and the second adds Table.

Import

Import from @/components/ui/table, not from antd. Once installed, the file lives in your project.

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

The axes

Most of Table's settings are on its columns. These change the table as a whole.

size sets the density: large (the default), medium or small. middle still works as the old name for medium.
bordered is a boolean. Table has no variant.
tableLayout takes auto or fixed, and is usually best left unset. It becomes fixed with a pinned column (unless x is max-content), a fixed header, sticky or any ellipsis. Column width is a hint under auto and holds under fixed.
sortDirections sets the orders a header cycles through, for the table or per column. The default ["ascend", "descend"] clears on the third click, and one value offers one order.
direction is ltr or rtl and comes from the provider. It flips which side fixed: "start" pins to, and the pager chevrons flip with it.

Flags

Each of these turns one behavior on or off.

bordered draws the cell borders. Off by default.
showHeader is on by default. Turning it off also removes the sorters, the filters and the header cells that name each column for screen readers.
rowHoverable is on by default. Turn it off when nothing in the row responds to a click.
sticky keeps the header at the top of the viewport as the page scrolls, with no inner scrollbar and no height to set.
virtual renders only the rows in view. It needs scroll with both x and y, and rows out of view are not in the DOM.

Slots

The props that take a node, around and inside the rows.

title and footer render a bar above and below the rows, inside the border. Both are functions of the current page's data.
summary renders below the body, built from Table.Summary.Row and Table.Summary.Cell. It receives the visible rows, so a total updates on every sort, filter and page change.
caption renders a real <caption>, which names the table for screen readers.
locale.emptyText fills the row shown when there is nothing to list. Replace it, since “No data” and “nothing matches this filter” are different states.
children takes <Table.Column> elements, the older form. Those columns keep Ant Design's icons, so prefer columns.
components replaces the elements the table renders (table, header.cell, body.row, body.cell), for drag-to-reorder or editable rows. Check that the header and body columns still line up.

The column type

Sorting, filtering, pinning, truncation, spanning, row scope and the breakpoint a column hides at are all set per column.

Every column gets the kit's sortIcon and filterIcon. They only show on a column with a sorter, or with filters or a filterDropdown.

Column

Column's props. Rows marked antuikit in the Version column are added by the kit.

Styling

classNames and styles take eight keys: root, section, title, header, body, content, footer and pagination. Use them before a descendant selector. For a cell, use onCell and onHeaderCell on the column.