Table

A table displays rows of 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} />;

Promotion

Examples

API

Common props ref：Common props

Property	Description	Type	Default	Version
bordered	Whether to show all table borders	boolean	false
columns	Columns of table	ColumnsType[]	-
components	Override default table elements	TableComponents	-
dataSource	Data record array to be displayed	object[]	-
expandable	Config expandable content	expandable	-
footer	Table footer renderer	function(currentPageData)	-
getPopupContainer	The render container of dropdowns in table	(triggerNode) => HTMLElement	() => TableHtmlElement
loading	Loading status of table	boolean \| Spin Props	false
locale	The i18n text including filter, sort, empty text, etc	object	Default Value
pagination	Config of pagination. You can ref table pagination config or full `pagination` document, hide it by setting it to `false`	object \| `false`	-
rowClassName	Row's className	function(record, index): string	-
rowKey	Row's unique key, could be a string or function that returns a string	string \| function(record): string	`key`
rowSelection	Row selection config	object	-
scroll	Whether the table can be scrollable, config	object	-
showHeader	Whether to show table header	boolean	true
showSorterTooltip	The header show next sorter direction tooltip. It will be set as the property of Tooltip if its type is object	boolean \| Tooltip props	true
size	Size of table	`large` \| `middle` \| `small`	`large`
sortDirections	Supported sort way, could be `ascend`, `descend`	Array	[`ascend`, `descend`]
sticky	Set sticky header and scroll bar	boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}`	-	4.6.0 (getContainer: 4.7.0)
summary	Summary content	(currentData) => ReactNode	-
tableLayout	The table-layout attribute of table element	- \| `auto` \| `fixed`	- `fixed` when header/columns are fixed, or using `column.ellipsis`
title	Table title renderer	function(currentPageData)	-
onChange	Callback executed when pagination, filters or sorter is changed	function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \| `sort` \| `filter` })	-
onHeaderRow	Set props on per header row	function(columns, index)	-
onRow	Set props on per row	function(record, index)	-
virtual	Support virtual list	boolean	-	5.9.0

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.

Property	Description	Type	Default	Version
align	The specify which way that column is aligned	`left` \| `right` \| `center`	`left`
className	The className of this column	string	-
colSpan	Span of this column's title	number	-
dataIndex	Display field of the data record, support nest path by string array	string \| string[]	-
defaultFilteredValue	Default filtered values	string[]	-
filterResetToDefaultFilteredValue	click the reset button, whether to restore the default filter	boolean	false
defaultSortOrder	Default order of sorted values	`ascend` \| `descend`	-
ellipsis	The ellipsis cell content, not working with sorter and filters for now. tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }`	boolean \| {showTitle?: boolean }	false	showTitle: 4.3.0
filterDropdown	Customized filter overlay	ReactNode \| (props: FilterDropdownProps) => ReactNode	-
filterDropdownOpen	Whether `filterDropdown` is visible	boolean	-
filtered	Whether the `dataSource` is filtered	boolean	false
filteredValue	Controlled filtered value, filter icon will highlight	string[]	-
filterIcon	Customized filter icon	ReactNode \| (filtered: boolean) => ReactNode	-
filterMultiple	Whether multiple filters can be selected	boolean	true
filterMode	To specify the filter interface	'menu' \| 'tree'	'menu'	4.17.0
filterSearch	Whether to be searchable for filter menu	boolean \| function(input, record):boolean	false	boolean:4.17.0 function:4.19.0
filters	Filter menu config	object[]	-
fixed	(IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'`	boolean \| string	false
key	Unique key of this column, you can ignore this prop if you've set a unique `dataIndex`	string	-
render	Renderer of the table cell. The return value should be a ReactNode	function(text, record, index) {}	-
responsive	The list of breakpoints at which to display this column. Always visible if not set	Breakpoint[]	-	4.2.0
rowScope	Set scope attribute for all cells in this column	`row` \| `rowgroup`	-	5.1.0
shouldCellUpdate	Control cell render logic	(record, prevRecord) => boolean	-	4.3.0
showSorterTooltip	If header show next sorter direction tooltip, override `showSorterTooltip` in table	boolean \| Tooltip props	true
sortDirections	Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend`	Array	[`ascend`, `descend`]
sorter	Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to `true`	function \| boolean \| { compare: function, multiple: number }	-
sortOrder	Order of sorted values: `ascend` `descend` `null`	`ascend` \| `descend` \| null	-
sortIcon	Customized sort icon	(props: { sortOrder }) => ReactNode	-	5.6.0
title	Title of this column	ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode	-
width	Width of this column (width not working?)	string \| number	-
onCell	Set props on per cell	function(record, rowIndex)	-
onFilter	Function that determines if the row is displayed when filtered	function(value, record) => boolean	-
onFilterDropdownOpenChange	Callback executed when `filterDropdownOpen` is changed	function(visible) {}	-
onHeaderCell	Set props on per header cell	function(column)	-

ColumnGroup

Property	Description	Type	Default
title	Title of the column group	ReactNode	-

pagination

Properties for pagination.

Property	Description	Type	Default
position	Specify the position of `Pagination`, could be`topLeft` \| `topCenter` \| `topRight` \|`bottomLeft` \| `bottomCenter` \| `bottomRight`	Array	[`bottomRight`]

More about pagination, please check Pagination.

expandable

Properties for expandable.

Property	Description	Type	Default	Version
childrenColumnName	The column contains children to display	string	children
columnTitle	Set the title of the expand column	ReactNode	-	4.23.0
columnWidth	Set the width of the expand column	string \| number	-
defaultExpandAllRows	Expand all rows initially	boolean	false
defaultExpandedRowKeys	Initial expanded row keys	string[]	-
expandedRowClassName	Expanded row's className	function(record, index, indent): string	-
expandedRowKeys	Current expanded row keys	string[]	-
expandedRowRender	Expanded container render for each row	function(record, index, indent, expanded): ReactNode	-
expandIcon	Customize row expand Icon. Ref example	function(props): ReactNode	-
expandRowByClick	Whether to expand row by clicking anywhere in the whole row	boolean	false
fixed	Whether the expansion icon is fixed. Optional true `left` `right`	boolean \| string	false	4.16.0
indentSize	Indent size in pixels of tree data	number	15
rowExpandable	Enable row can be expandable	(record) => boolean	-
showExpandColumn	Show expand column	boolean	true	4.18.0
onExpand	Callback executed when the row expand icon is clicked	function(record, event)	-
onExpandedRowsChange	Callback executed when the expanded rows change	function(expandedRows)	-

rowSelection

Properties for row selection.

Property	Description	Type	Default	Version
checkStrictly	Check table row precisely; parent row and children rows are not associated	boolean	true	4.4.0
columnTitle	Set the title of the selection column	ReactNode	-
columnWidth	Set the width of the selection column	string \| number	`32px`
fixed	Fixed selection column on the left	boolean	-
getCheckboxProps	Get Checkbox or Radio props	function(record)	-
hideSelectAll	Hide the selectAll checkbox and custom selection	boolean	false	4.3.0
preserveSelectedRowKeys	Keep selection `key` even when it removed from `dataSource`	boolean	-	4.4.0
renderCell	Renderer of the table cell. Same as `render` in column	function(checked, record, index, originNode) {}	-	4.1.0
selectedRowKeys	Controlled selected row keys	string[] \| number[]	[]
selections	Custom selection config, only displays default selections when set to `true`	object[] \| boolean	-
type	`checkbox` or `radio`	`checkbox` \| `radio`	`checkbox`
onCell	Set props on per cell. Same as `onCell` in column	function(record, rowIndex)	-	5.5.0
onChange	Callback executed when selected rows change	function(selectedRowKeys, selectedRows, info: { type })	-	`info.type`: 4.21.0
onSelect	Callback executed when select/deselect one row	function(record, selected, selectedRows, nativeEvent)	-
onSelectAll	Callback executed when select/deselect all rows	function(selected, selectedRows, changeRows)	-
onSelectInvert	Callback executed when row selection is inverted	function(selectedRowKeys)	-
onSelectNone	Callback executed when row selection is cleared	function()	-
onSelectMultiple	Callback executed when row selection is changed by pressing shift	function(selected, selectedRows, changeRows)	-

scroll

Property	Description	Type	Default
scrollToFirstRowOnChange	Whether to scroll to the top of the table when paging, sorting, filtering changes	boolean	-
x	Set horizontal scrolling, can also be used to specify the width of the scroll area, could be number, percent value, true and 'max-content'	string \| number \| true	-
y	Set vertical scrolling, can also be used to specify the height of the scroll area, could be string or number	string \| number	-

selection

Property	Description	Type	Default
key	Unique key of this selection	string	-
text	Display text of this selection	ReactNode	-
onSelect	Callback executed when this selection is clicked	function(changeableRowKeys)	-

Using in TypeScript

import React from 'react';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';

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

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

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

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

export default Demo;

Here is the CodeSandbox for TypeScript.

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
bodySortBg	Background color of table sorted column	string	#fafafa
borderColor	Border color of table	string	#f0f0f0
cellFontSize	Font size of table cell (large size by default)	number	14
cellFontSizeMD	Font size of table cell (middle size)	number	14
cellFontSizeSM	Font size of table cell (small size)	number	14
cellPaddingBlock	Vertical padding of table cell	number	16
cellPaddingBlockMD	Vertical padding of table cell (middle size)	number	12
cellPaddingBlockSM	Vertical padding of table cell (small size)	number	8
cellPaddingInline	Horizontal padding of table cell (large size by default)	number	16
cellPaddingInlineMD	Horizontal padding of table cell (middle size)	number	8
cellPaddingInlineSM	Horizontal padding of table cell (small size)	number	8
expandIconBg	Background of expand button	string	#ffffff
filterDropdownBg	Color of filter dropdown	string	#ffffff
filterDropdownMenuBg	Background of filter dropdown menu item	string	#ffffff
fixedHeaderSortActiveBg	Background color of fixed table header when sorted	string	#f0f0f0
footerBg	Background of footer	string	#fafafa
footerColor	Color of footer text	string	rgba(0, 0, 0, 0.88)
headerBg	Background of table header	string	#fafafa
headerBorderRadius	Border radius of table header	number	8
headerColor	Color of table header text	string	rgba(0, 0, 0, 0.88)
headerFilterHoverBg	Background color of table header filter button when hovered	string	rgba(0, 0, 0, 0.06)
headerSortActiveBg	Background color of table header when sorted	string	#f0f0f0
headerSortHoverBg	Background color of table header when sorted and hovered	string	#f0f0f0
headerSplitColor	Split border color of table header	string	#f0f0f0
rowExpandedBg	Background color of table expanded row	string	rgba(0, 0, 0, 0.02)
rowHoverBg	Background color of table hovered row	string	#fafafa
rowSelectedBg	Background color of table selected row	string	#e6f4ff
rowSelectedHoverBg	Background color of table selected row when hovered	string	#bae0ff
selectionColumnWidth	Width of selection column	number	32
stickyScrollBarBg	Background of sticky scrollbar	string	rgba(0, 0, 0, 0.25)
stickyScrollBarBorderRadius	Border radius of sticky scrollbar	number	100

Global TokenHow to use?

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.

console warning

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?

You can set hideOnSinglePage with pagination prop.

Table will return to first page when filter data.

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?

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?

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?

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

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.

Name	Age	Address	Tags	Action
John Brown	32	New York No. 1 Lake Park	NICEDEVELOPER	Invite John Brown Delete
Jim Green	42	London No. 1 Lake Park	LOSER	Invite Jim Green Delete
Joe Black	32	Sydney No. 1 Lake Park	COOLTEACHER	Invite Joe Black Delete

1

Name		Age	Address	Tags	Action
First Name	Last Name	Age	Address	Tags	Action
John	Brown	32	New York No. 1 Lake Park	nicedeveloper	Invite Brown Delete
Jim	Green	42	London No. 1 Lake Park	loser	Invite Green Delete
Joe	Black	32	Sydney No. 1 Lake Park	coolteacher	Invite Black Delete

1

Name	Age	Address
John Brown	32	New York No. 1 Lake Park
Jim Green	42	London No. 1 Lake Park
Joe Black	32	Sydney No. 1 Lake Park
Disabled User	99	Sydney No. 1 Lake Park

Name	Age	Address
Edward King 0	32	London, Park Lane no. 0
Edward King 1	32	London, Park Lane no. 1
Edward King 2	32	London, Park Lane no. 2
Edward King 3	32	London, Park Lane no. 3
Edward King 4	32	London, Park Lane no. 4
Edward King 5	32	London, Park Lane no. 5
Edward King 6	32	London, Park Lane no. 6
Edward King 7	32	London, Park Lane no. 7
Edward King 8	32	London, Park Lane no. 8
Edward King 9	32	London, Park Lane no. 9

1
2
3
4
5

Name	Age	Address
Edward King 0	32	London, Park Lane no. 0
Edward King 1	32	London, Park Lane no. 1
Edward King 2	32	London, Park Lane no. 2
Edward King 3	32	London, Park Lane no. 3
Edward King 4	32	London, Park Lane no. 4
Edward King 5	32	London, Park Lane no. 5
Edward King 6	32	London, Park Lane no. 6
Edward King 7	32	London, Park Lane no. 7
Edward King 8	32	London, Park Lane no. 8
Edward King 9	32	London, Park Lane no. 9

1
2
3
4
5

Name	Age	Address
Jim Green	42	London No. 1 Lake Park
John Brown	32	New York No. 1 Lake Park
Joe Black	32	Sydney No. 1 Lake Park
Jim Red	32	London No. 2 Lake Park

Name	Chinese Score	Math Score	English Score
John Brown	98	60	70
Jim Green	98	66	89
Joe Black	98	90	70
Jim Red	88	99	89

Name	Gender	Email
No data

Middle size table

Name	Age	Address
John Brown	32	New York No. 1 Lake Park
Jim Green	42	London No. 1 Lake Park
Joe Black	32	Sydney No. 1 Lake Park

1

Small size table

Name	Age	Address
John Brown	32	New York No. 1 Lake Park
Jim Green	42	London No. 1 Lake Park
Joe Black	32	Sydney No. 1 Lake Park

1

Name	Cash Assets	Address
John Brown	￥300,000.00	New York No. 1 Lake Park
Jim Green	￥1,256,000.00	London No. 1 Lake Park
Joe Black	￥120,000.00	Sydney No. 1 Lake Park

Name	Age	Address	Action
John Brown	32	New York No. 1 Lake Park	Delete
Jim Green	42	London No. 1 Lake Park	Delete
Not Expandable	29	Jiangsu No. 1 Lake Park	Delete
Joe Black	32	Sydney No. 1 Lake Park	Delete

Name	Age	Address
John Brown	32	New York No. 1 Lake Park
Jim Green	42	London No. 1 Lake Park
Not Expandable	29	Jiangsu No. 1 Lake Park
Joe Black	32	Sydney No. 1 Lake Park

RowHead	Name	Age	Home phone		Address
1	John Brown	32	0571-22098909	18889898989	New York No. 1 Lake Park
2	Jim Green
3	Joe Black	32	0575-22098909	18900010002	Sydney No. 1 Lake Park
4	Jim Red	18	0575-22098909	18900010002	London No. 2 Lake Park
5	Jake White	18	0575-22098909	18900010002	Dublin No. 2 Lake Park

1

	Name	Age	Address
	John Brown sr.	60	New York No. 1 Lake Park
	Joe Black	32	Sydney No. 1 Lake Park

Name	Age	Address


Edward King 0	32	London, Park Lane no. 0
Edward King 1	32	London, Park Lane no. 1
Edward King 2	32	London, Park Lane no. 2
Edward King 3	32	London, Park Lane no. 3
Edward King 4	32	London, Park Lane no. 4
Edward King 5	32	London, Park Lane no. 5
Edward King 6	32	London, Park Lane no. 6
Edward King 7	32	London, Park Lane no. 7
Edward King 8	32	London, Park Lane no. 8
Edward King 9	32	London, Park Lane no. 9
Edward King 10	32	London, Park Lane no. 10
Edward King 11	32	London, Park Lane no. 11
Edward King 12	32	London, Park Lane no. 12
Edward King 13	32	London, Park Lane no. 13
Edward King 14	32	London, Park Lane no. 14
Edward King 15	32	London, Park Lane no. 15
Edward King 16	32	London, Park Lane no. 16
Edward King 17	32	London, Park Lane no. 17
Edward King 18	32	London, Park Lane no. 18
Edward King 19	32	London, Park Lane no. 19
Edward King 20	32	London, Park Lane no. 20
Edward King 21	32	London, Park Lane no. 21
Edward King 22	32	London, Park Lane no. 22
Edward King 23	32	London, Park Lane no. 23
Edward King 24	32	London, Park Lane no. 24
Edward King 25	32	London, Park Lane no. 25
Edward King 26	32	London, Park Lane no. 26
Edward King 27	32	London, Park Lane no. 27
Edward King 28	32	London, Park Lane no. 28
Edward King 29	32	London, Park Lane no. 29
Edward King 30	32	London, Park Lane no. 30
Edward King 31	32	London, Park Lane no. 31
Edward King 32	32	London, Park Lane no. 32
Edward King 33	32	London, Park Lane no. 33
Edward King 34	32	London, Park Lane no. 34
Edward King 35	32	London, Park Lane no. 35
Edward King 36	32	London, Park Lane no. 36
Edward King 37	32	London, Park Lane no. 37
Edward King 38	32	London, Park Lane no. 38
Edward King 39	32	London, Park Lane no. 39
Edward King 40	32	London, Park Lane no. 40
Edward King 41	32	London, Park Lane no. 41
Edward King 42	32	London, Park Lane no. 42
Edward King 43	32	London, Park Lane no. 43
Edward King 44	32	London, Park Lane no. 44
Edward King 45	32	London, Park Lane no. 45
Edward King 46	32	London, Park Lane no. 46
Edward King 47	32	London, Park Lane no. 47
Edward King 48	32	London, Park Lane no. 48
Edward King 49	32	London, Park Lane no. 49

1
2
50 / page

Full Name	Age	Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7	Column 8	Action

John Brown	32	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	action
Jim Green	40	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	action

1

Full Name	Age	Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7	Column 8	Action


Edward 0	32	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	action
Edward 1	32	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	action
Edward 2	32	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	action
Edward 3	32	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	action
Edward 4	32	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	action
Edward 5	32	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	action
Edward 6	32	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	action
Edward 7	32	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	action
Edward 8	32	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	action
Edward 9	32	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	action

1
2
3
4
5
•••
10
10 / page

Other				Company
Age	Address			Company Address	Company Name
	Street	Block
	Street	Building	Door No.


John Brown	1	Lake Park	C	2035	Lake Street 42	SoftLake Co	M
John Brown	2	Lake Park	C	2035	Lake Street 42	SoftLake Co	M
John Brown	3	Lake Park	C	2035	Lake Street 42	SoftLake Co	M
John Brown	4	Lake Park	C	2035	Lake Street 42	SoftLake Co	M
John Brown	5	Lake Park	C	2035	Lake Street 42	SoftLake Co	M
John Brown	6	Lake Park	C	2035	Lake Street 42	SoftLake Co	M
John Brown	7	Lake Park	C	2035	Lake Street 42	SoftLake Co	M
John Brown	8	Lake Park	C	2035	Lake Street 42	SoftLake Co	M
John Brown	9	Lake Park	C	2035	Lake Street 42	SoftLake Co	M
John Brown	10	Lake Park	C	2035	Lake Street 42	SoftLake Co	M

1
2
3
4
5
•••
10
10 / page

name	age	address	operation
Edward King 0	32	London, Park Lane no. 0	Delete
Edward King 1	32	London, Park Lane no. 1	Delete

name	age	address	operation
Edward 0	32	London Park no. 0	Edit
Edward 1	32	London Park no. 1	Edit
Edward 2	32	London Park no. 2	Edit
Edward 3	32	London Park no. 3	Edit
Edward 4	32	London Park no. 4	Edit
Edward 5	32	London Park no. 5	Edit
Edward 6	32	London Park no. 6	Edit
Edward 7	32	London Park no. 7	Edit
Edward 8	32	London Park no. 8	Edit
Edward 9	32	London Park no. 9	Edit

1
2
3
4
5
•••
10
10 / page

Name

Platform

Version

Upgraded

Creator

Date

Action

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

Date	Name	Status	Upgrade Status	Action
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

1

Name

Platform

Version

Upgraded

Creator

Date

Action

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

Date	Name	Status	Upgrade Status	Action
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

1

Name

Platform

Version

Upgraded

Creator

Date

Action

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

Date	Name	Status	Upgrade Status	Action
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

1

Name	Age	Address
John Brown	32	Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text
Jim Green	42	London No. 1 Lake Park
Joe Black	32	Sidney No. 1 Lake Park

1

Name	Age	Address
John Brown	32	Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text
Jim Green	42	London No. 1 Lake Park
Joe Black	32	Sidney No. 1 Lake Park

1

Name	Age	Address	Long Column Long Column Long Column	Long Column Long Column	Long Column
John Brown	32	New York No. 1 Lake Park, New York No. 1 Lake Park	New York No. 1 Lake Park, New York No. 1 Lake Park	New York No. 1 Lake Park, New York No. 1 Lake Park	New York No. 1 Lake Park, New York No. 1 Lake Park
Jim Green	42	London No. 2 Lake Park, London No. 2 Lake Park	London No. 2 Lake Park, London No. 2 Lake Park	London No. 2 Lake Park, London No. 2 Lake Park	London No. 2 Lake Park, London No. 2 Lake Park
Joe Black	32	Sydney No. 1 Lake Park, Sydney No. 1 Lake Park	Sydney No. 1 Lake Park, Sydney No. 1 Lake Park	Sydney No. 1 Lake Park, Sydney No. 1 Lake Park	Sydney No. 1 Lake Park, Sydney No. 1 Lake Park

1

Name	Age	Address	Long Column Long Column Long Column	Long Column Long Column	Long Column
John Brown	32	New York No. 1 Lake Park, New York No. 1 Lake Park	New York No. 1 Lake Park, New York No. 1 Lake Park	New York No. 1 Lake Park, New York No. 1 Lake Park	New York No. 1 Lake Park, New York No. 1 Lake Park
Jim Green	42	London No. 2 Lake Park, London No. 2 Lake Park	London No. 2 Lake Park, London No. 2 Lake Park	London No. 2 Lake Park, London No. 2 Lake Park	London No. 2 Lake Park, London No. 2 Lake Park
Joe Black	32	Sydney No. 1 Lake Park, Sydney No. 1 Lake Park	Sydney No. 1 Lake Park, Sydney No. 1 Lake Park	Sydney No. 1 Lake Park, Sydney No. 1 Lake Park	Sydney No. 1 Lake Park, Sydney No. 1 Lake Park

1

Name	Borrow	Repayment
John Brown	10	33
Jim Green	100	0
Joe Black	10	10
Jim Red	75	45
Total	195	88
Balance	107

Name	Description


Light	Everything that has a beginning, has an end.
Bamboo	Everything that has a beginning, has an end.
Little	Everything that has a beginning, has an end.
Light	Everything that has a beginning, has an end.
Bamboo	Everything that has a beginning, has an end.
Little	Everything that has a beginning, has an end.
Light	Everything that has a beginning, has an end.
Bamboo	Everything that has a beginning, has an end.
Little	Everything that has a beginning, has an end.
Light	Everything that has a beginning, has an end.
Bamboo	Everything that has a beginning, has an end.
Little	Everything that has a beginning, has an end.
Light	Everything that has a beginning, has an end.
Bamboo	Everything that has a beginning, has an end.
Little	Everything that has a beginning, has an end.
Light	Everything that has a beginning, has an end.
Bamboo	Everything that has a beginning, has an end.
Little	Everything that has a beginning, has an end.
Light	Everything that has a beginning, has an end.
Bamboo	Everything that has a beginning, has an end.

Summary

This is a summary content

None

Less

Lot

	ID	FistName	LastName	Group	Age	Address 1	Address 2	Address 3	Action

topLefttopCentertopRightnone

bottomLeftbottomCenterbottomRightnone

1

Name	Age	Address	Tags	Action
John Brown	32	New York No. 1 Lake Park	NICEDEVELOPER	Invite John Brown Delete
Jim Green	42	London No. 1 Lake Park	LOSER	Invite Jim Green Delete
Joe Black	32	Sydney No. 1 Lake Park	COOLTEACHER	Invite Joe Black Delete

1

Full Name	Age	Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7	Column 8	Action


Edward 0	32	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	action
Edward 1	32	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	action
Edward 2	32	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	action
Edward 3	32	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	action
Edward 4	32	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	action
Edward 5	32	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	action
Edward 6	32	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	action
Edward 7	32	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	action
Edward 8	32	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	action
Edward 9	32	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	action

Scroll Context

Fix Right

1
2
3
4
5
•••
10
10 / page

Name	Age	Address	Action
John Brown	12	New York No. 1 Lake Park	Delete More actions
John Brown	22	New York No. 2 Lake Park	Delete More actions
John Brown	32	New York No. 3 Lake Park	Delete More actions
John Brown	42	New York No. 4 Lake Park	Delete More actions
John Brown	52	New York No. 5 Lake Park	Delete More actions
John Brown	62	New York No. 6 Lake Park	Delete More actions
John Brown	72	New York No. 7 Lake Park	Delete More actions
John Brown	82	New York No. 8 Lake Park	Delete More actions
John Brown	92	New York No. 9 Lake Park	Delete More actions
John Brown	102	New York No. 10 Lake Park	Delete More actions

1

TableChangelog

When To Use

How To Use

Promotion

Examples

API

Table

onRow usage

Column

ColumnGroup

pagination

expandable

rowSelection

scroll

selection

Using in TypeScript

Design Token

Component TokenHow to use?

Global TokenHow to use?

Note

FAQ

How to hide pagination when single page or no data?

Table will return to first page when filter data.

Why Table pagination show size changer?

Why Table fully render when state change?

How to handle fixed column display over the mask layout?

How to custom render Table Checkbox（For example, adding Tooltip）?

Table