Table

When To Use

• To display a collection of structured data.
• To sort, search, paginate, filter data.

How To Use

Specify dataSource of Table as an array of data.

const dataSource = [
  {
    key: '1',
    name: 'Mike',
    age: 32,
    address: '10 Downing Street',
  },
  {
    key: '2',
    name: 'John',
    age: 42,
    address: '10 Downing Street',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

<Table dataSource={dataSource} columns={columns} />;

Promotion

• Kitchen Sketch Plugin 💎
• ProTable - Advanced Tables
• S2 - Analytical Tables

Examples

<code src="./demo/basic.tsx">Basic Usage</code> <code src="./demo/jsx.tsx">JSX style API</code> <code src="./demo/row-selection.tsx">selection</code> <code src="./demo/row-selection-and-operation.tsx">Selection and operation</code> <code src="./demo/row-selection-custom.tsx">Custom selection</code> <code src="./demo/row-selection-debug.tsx" debug>Selection Perf</code> <code src="./demo/head.tsx">Filter and sorter</code> <code src="./demo/filter-in-tree.tsx">Filter in Tree</code> <code src="./demo/filter-search.tsx">Filter search</code> <code src="./demo/multiple-sorter.tsx">Multiple sorter</code> <code src="./demo/reset-filter.tsx">Reset filters and sorters</code> <code src="./demo/custom-filter-panel.tsx">Customized filter panel</code> <code src="./demo/ajax.tsx">Ajax</code> <code src="./demo/size.tsx">size</code> <code src="./demo/narrow.tsx" debug>size</code> <code src="./demo/bordered.tsx">border, title and footer</code> <code src="./demo/expand.tsx">Expandable Row</code> <code src="./demo/expand-sticky.tsx" debug>Customizable expansion position</code> <code src="./demo/order-column.tsx">Order Specific Column</code> <code src="./demo/colspan-rowspan.tsx">colSpan and rowSpan</code> <code src="./demo/tree-data.tsx">Tree data</code> <code src="./demo/tree-table-ellipsis.tsx" debug>Tree data ellipsis debug demo</code> <code src="./demo/fixed-header.tsx">Fixed Header</code> <code src="./demo/fixed-columns.tsx">Fixed Columns</code> <code src="./demo/fixed-gapped-columns.tsx" version="5.14.0">Stack Fixed Columns</code> <code src="./demo/fixed-columns-header.tsx">Fixed Columns and Header</code> <code src="./demo/hidden-columns.tsx" version="5.13.0">Hidden Columns</code> <code src="./demo/grouping-columns.tsx">Grouping table head</code> <code src="./demo/edit-cell.tsx">Editable Cells</code> <code src="./demo/edit-row.tsx">Editable Rows</code> <code src="./demo/nested-table.tsx">Nested tables</code> <code src="./demo/drag-sorting.tsx">Drag sorting</code> <code src="./demo/drag-column-sorting.tsx">Drag Column sorting</code> <code src="./demo/drag-sorting-handler.tsx">Drag sorting with handler</code> <code src="./demo/ellipsis.tsx">ellipsis column</code> <code src="./demo/ellipsis-custom-tooltip.tsx">ellipsis column custom tooltip</code> <code src="./demo/custom-empty.tsx">Custom empty</code> <code src="./demo/summary.tsx">Summary</code> <code src="./demo/virtual-list.tsx" version="5.9.0">Virtual list</code> <code src="./demo/responsive.tsx">Responsive</code> <code src="./demo/nest-table-border-debug.tsx" debug>Nested Bordered Table Debug</code> <code src="./demo/pagination.tsx">Pagination Settings</code> <code src="./demo/row-selection-custom-debug.tsx" debug>Custom selection group</code> <code src="./demo/sticky.tsx">Fixed header and scroll bar with the page</code> <code src="./demo/dynamic-settings.tsx">Dynamic Settings</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code> <code src="./demo/selections-debug.tsx" debug>selections with icon</code> <code src="./demo/component-token.tsx" debug>Component Token</code> <code src="./demo/measure-row-render.tsx" debug>measureRowRender</code>

API

Common props ref：Common props

Table

Table ref

onRow usage

Same as onRow onHeaderRow onCell onHeaderCell

<Table
  onRow={(record, rowIndex) => {
    return {
      onClick: (event) => {}, // click row
      onDoubleClick: (event) => {}, // double click row
      onContextMenu: (event) => {}, // right button click row
      onMouseEnter: (event) => {}, // mouse enter row
      onMouseLeave: (event) => {}, // mouse leave row
    };
  }}
  onHeaderRow={(columns, index) => {
    return {
      onClick: () => {}, // click header row
    };
  }}
/>

Column

One of the Table columns prop for describing the table's columns, Column has the same API.

ColumnGroup

pagination

Properties for pagination.

More about pagination, please check Pagination.

expandable

Properties for expandable.

rowSelection

Properties for row selection.

scroll

selection

Using in TypeScript {#using-in-typescript}

import React from 'react';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';

interface User {
  key: number;
  name: string;
}

const columns: TableColumnsType<User> = [
  {
    key: 'name',
    title: 'Name',
    dataIndex: 'name',
  },
];

const data: User[] = [
  {
    key: 0,
    name: 'Jack',
  },
];

const Demo: React.FC = () => (
  <>
    <Table<User> columns={columns} dataSource={data} />
    <Table<User> dataSource={data}>
      <Table.Column<User> key="name" title="Name" dataIndex="name" />
    </Table>
  </>
);

export default Demo;

Here is the CodeSandbox for TypeScript.

Semantic DOM

<code src="./demo/_semantic.tsx" simplify="true"></code>

Design Token

<ComponentTokenTable component="Table"></ComponentTokenTable>

Note

According to the React documentation, every child in an array should be assigned a unique key. The values inside the Table's dataSource and columns should follow this rule. By default, dataSource[i].key will be treated as the key value for dataSource.

If dataSource[i].key is not provided, then you should specify the primary key of dataSource value via rowKey, as shown below. If not, warnings like the one above will show in browser console.

// primary key is uid
return <Table rowKey="uid" />;
// or
return <Table rowKey={(record) => record.uid} />;

FAQ

How to hide pagination when single page or no data? {#faq-hide-pagination}

You can set hideOnSinglePage with pagination prop.

Table will return to first page when filter data. {#faq-filter-to-first-page}

Table total page count usually reduce after filter data, we by default return to first page in case of current page is out of filtered results.

You may need to keep current page after filtering when fetch data from remote service, please check this demo as workaround.

Also you can use the action from extra param to determine when return to first page.

Why Table pagination show size changer? {#faq-size-changer}

In order to improve user experience, Pagination show size changer by default when total > 50 since 4.1.0. You can set showSizeChanger=false to disable this feature.

Why Table fully render when state change? {#faq-state-update-rerender}

Table can not tell what state used in columns.render, so it always need fully render to avoid sync issue. You can use column.shouldCellUpdate to control render.

How to handle fixed column display over the mask layout? {#faq-fixed-column-zindex}

Fixed column use z-index to make it over other columns. You will find sometimes fixed columns also over your mask layout. You can set z-index on your mask layout to resolve.

How to custom render Table Checkbox（For example, adding Tooltip）? {#faq-custom-checkbox-render}

Since 4.1.0, You can use rowSelection.renderCell to custom render Table Checkbox. If you want to add Tooltip, please refer to this demo.

Why does components.body.wrapper or components.body.row report an error when virtual is enabled? {#faq-virtual-wrapper-ref}

Because virtual table needs to get its ref to do some calculations, so you need to use React.forwardRef wrapper and pass the ref to the dom. Like this:

const EditableRow = React.forwardRef<HTMLTableRowElement, EditableRowProps>(
  ({ index, ...props }, ref) => {
    const [form] = Form.useForm();
    return (
      <Form form={form} component={false}>
        <EditableContext.Provider value={form}>
          <tr {...props} ref={ref} />
        </EditableContext.Provider>
      </Form>
    );
  },
);

For scenarios with fixed row heights and vertical scrolling, you can use the following method:

<Table
  //@ts-ignore // This property is not exported, but it can be passed through to the internal virtual scrolling
  listItemHeight={36} // This helps virtual scrolling calculate the height correctly, with each row fixed at 36px
/>