ant-design/components/table/index.en-US.md

category	cols	type	title
Components	1	Data Display	Table

A table displays rows data.

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} />

API

Table

Property	Description	Type	Default
rowSelection	row selection config	object	null
pagination	pagination config, hide it by setting it to false	object
size	size of table: default, middle or small	string	default
dataSource	data record array to be rendered	any[]
columns	columns of table	ColumnProps[]	-
rowKey	get row's key, could be a string or function that returns a string	string|Function(record):string	'key'
rowClassName	get row's className	Function(record, index):string	-
expandedRowRender	expanded container render for each row	Function	-
defaultExpandedRowKeys	initial expanded row keys	string[]	-
expandedRowKeys	current expanded rows keys	string[]	-
defaultExpandAllRows	expand all rows initially	boolean	false
onExpandedRowsChange	function to call when the expanded rows change	Function(expandedRows)
onExpand	function to call when click expand icon	Function(expanded, record)
onChange	callback that is called when pagination, filters, sorter is changed	Function(pagination, filters, sorter)
loading	loading status of table	boolean|object (more)	false
locale	i18n text include filter, sort, empty text...etc	object	filterConfirm: 'Ok' filterReset: 'Reset' emptyText: 'No Data' Default
indentSize	indent size in pixels of tree data	number	15
onRowClick	callback that is called when a row is clicked	Function(record, index, event)	-
onRowDoubleClick	callback that is called when a row is double clicked	Function(record, index, event)	-
onRowMouseEnter	callback that is called when mouse enter a row	Function(record, index, event)	-
onRowMouseLeave	callback that is called when mouse leave a row	Function(record, index, event)	-
bordered	whether to show all table borders	boolean	false
showHeader	whether to show table header	boolean	true
footer	table footer renderer	Function(currentPageData)
title	table title renderer	Function(currentPageData)
scroll	whether table can be scroll in x/y direction, x or y can be a number that indicates the width and height of table body	object	-

Column

One of Property columns for describing column, Column has the same API.

Property	Description	Type	Default
title	title of this column	string|ReactNode	-
key	key of this column, you can ignore this prop if you've set a unique dataIndex	string	-
dataIndex	display field of the data record, could be set like a.b.c	string	-
render	renderer of table cell, has three params: text, record and index of this row. The render value should be a ReactNode, or an object for colSpan/rowSpan config	Function(text, record, index) {}	-
filters	filter menu config	object[]	-
onFilter	callback that is called when when confirm filter button is clicked	Function	-
filterMultiple	whether to select multiple filtered item	boolean	true
filterDropdown	customized filter overlay	ReactNode	-
filterDropdownVisible	whether filterDropdown is visible	boolean	-
onFilterDropdownVisibleChange	called when filterDropdownVisible is changed	function(visible) {}	-
filteredValue	controlled filtered value, filter icon will highlight.	string[]	-
filtered	whether the dataSource is filtered	boolean	false
filterIcon	customized filter icon	ReactNode	false
sorter	sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true	Function|boolean	-
colSpan	span of this column's title	number
width	width of this column	string|number	-
className	className of this column	string	-
fixed	set column to be fixed: true(same as left) 'left' 'right'	boolean|string	false
sortOrder	order of sorted values: 'ascend' 'descend' false	boolean|string	-
onCellClick	callback when click cell	Function(record, event)	-

ColumnGroup

Property	Description	Type	Default
title	title of the column group	string|ReactNode	-

rowSelection

Properties for selection.

Property	Description	Type	Default
type	checkbox or radio	string	checkbox
selectedRowKeys	controlled selected row keys	string[]	[]
onChange	callback that is called when selected rows change	Function(selectedRowKeys, selectedRows)	-
getCheckboxProps	get Checkbox or Radio props	Function(record)	-
onSelect	callback that is called when select/deselect one row	Function(record, selected, selectedRows)	-
onSelectAll	callback that is called when select/deselect all	Function(selected, selectedRows, changeRows)	-
onSelectInvert	callback that is called when select invert	Function(selectedRows)	-
selections	custom selection config, only displays default selections when set to true	object[]|boolean	-
hideDefaultSelections	remove the default Select All and Select invert selections	boolean	false

selection

Property	Description	Type	Default
key	key of this selection	string	-
text	display text of this selection	string|React.ReactNode	-
onSelect	callback when this selection is clicked	Function(changeableRowKeys)	-

Using in TypeScript

import { Table } from 'antd';
import { TableColumnConfig } from 'antd/lib/table/Table';

interface IUser {
  key: number,
  name: string;
}

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

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

class UserTable extends Table<IUser> {}

<UserTable columns={columns} dataSource={data} />

// Use JSX style API
class NameColumn extends Table.Column<IUser> {}

<UserTable dataSource={data}>
  <NameColumn key="name" title="Name" dataIndex="name" />
</UserTable>

Note

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

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

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