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

category, cols, type, title

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 whose value is 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 via setting to false	Object
size	size of table: default or small	String	default
dataSource	data record array to be rendered	Array
columns	columns of table	Array	-
rowKey	get row's key, could be a string or function	String or 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	Array	-
expandedRowKeys	current expanded rows keys	Array	-
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	false
locale	i18n text include filter, sort, empty text...etc	Object	filterConfirm: 'Ok' filterReset: 'Reset' emptyText: 'No Data' Default
indentSize	index pixel size of tree data	Number	15
onRowClick	callback that is called when click a row	Function(record, index)	-
bordered	whether to show table border completely	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 indicated the width and height of table body	Object	-

Column

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

Property	Description	Type	Default
title	title of this column	String or React.Element	-
key	key of this column	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 a object for colSpan/rowSpan config	Function(text, record, index) {}	-
filters	filter menu config	Array	-
onFilter	callback that is called when when click confirm filter button	Function	-
filterMultiple	whether to select multiple filtered item	Boolean	true
filterDropdown	customized filter overlay	React.Element	-
filterDropdownVisible	whether filterDropdown is visible	Boolean	-
onFilterDropdownVisibleChange	called when filterDropdownVisible is changed	function(visible) {}	-
filteredValue	controlled filtered value	Array	-
sorter	sort function for local sort. If you need sort buttons only, set it true	Function or Boolean	-
colSpan	span of this column's title	Number
width	width of this column	String or Number	-
className	className of this column	String	-
fixed	set column to be fixed: true(same as left) 'left' 'right'	Boolean or String	false
sortOrder	controlled sorted value: 'ascend' 'descend' false	Boolean or String	-
onCellClick	callback when click cell	Function(record, event)	-

ColumnGroup

Property	Description	Type	Default
title	title of the column group	String or React.Element	-

rowSelection

Properties for selection.

Property	Description	Type	Default
type	checkbox or radio	String	checkbox
selectedRowKeys	controlled selected row keys	Array	[]
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)	-

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 value inside dataSource and columns should follow this in Table, and dataSource[i].key would be treated as key value defaultly for dataSource.

If dataSource[i].key is not existed, 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} />;