Uninote
Uninote
用户根目录
每日点滴

category: Components cols: 1 type: Data Display title: 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, 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 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' <br> filterReset: 'Reset' <br> emptyText: 'No Data' <br> Default
indentSize index pixel size of tree data number 15
onRowClick callback that is called when click a row Function(record, index, event) -
onRowDoubleClick callback that is called when double click a row Function(record, index, event) -
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 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 a object for colSpan/rowSpan config Function(text, record, index) {} -
filters filter menu config object[] -
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 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 it 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 controlled sorted value: '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, show default selections via setting to true object[] -

selection

Property Description Type Default
key key of this selection string -
text display text is this selection string|React.ReactNode -
onSelect callback when click this selection 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 value 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 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} />;

order_ 3

zh-CN_ 可选择

点赞(0) 阅读(58) 举报
目录
标题