Table

Data table with antd-shaped columns, local or server sorting, header filters, pagination, sticky header and fixed columns. Built on TanStack Table v9.

import { Table } from '@lobehub/ui/base-ui';

NPM Source Edit

Data Display

Basic

Sort by clicking a header, filter from the funnel icon, page through with the pager. scroll.y keeps the header in view; fixed: 'right' pins the action column.

Loading preview

Server-driven

sorter: true leaves row order alone and reports the sort through onChange; pagination.total switches the pager to server mode. Fetch the page yourself and pass it as dataSource.

Loading preview

APIs

Table properties

bordered: boolean
className: string
classNames: Partial<Record<TableSemanticName, string>>
columnsRequired: TableColumn<T>[]
dataSource: T[]
emptyText: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
loading: boolean
onChange: (pagination: TablePaginationConfig, filters: TableFilters, sorter: TableSorterResult<T>) => void
onRow: (record: T, index: number) => HTMLAttributes<HTMLTableRowElement>
pagination: false | TablePaginationConfig
ref: null | (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLDivElement | null>
rowClassName: string | (record: T, index: number) => string
rowKeyRequired: Extract<keyof T, string> | ((record: T) => Key)
scroll: { x?: number | string; y?: number | string; }
size: 'small' | 'middle'
style: CSSProperties
styles: Partial<Record<TableSemanticName, CSSProperties>>
tableLayout: 'auto' | 'fixed'

Migrating from antd Table

columns, dataSource, rowKey, pagination, onChange, onRow, rowClassName, scroll, size (small / middle), bordered, loading and tableLayout keep their antd shape.
locale={{ emptyText }} → emptyText.
Delete .ant-table-* style overrides; use classNames / styles (wrapper, header, body, row, cell).
Row selection, expandable rows, virtual scrolling, summary rows, tree data, column resizing, multi-column sort, controlled sortOrder, custom filterDropdown and array dataIndex paths are not supported.