Table表格
展示行列数据。
何时使用#
当有大量结构化的数据需要展现时;
当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
如何使用#
指定表格的数据源 dataSource
为一个数组。
const dataSource = [{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号'
}, {
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号'
}];
const columns = [{
title: '姓名',
dataIndex: 'name',
key: 'name',
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
}];
<Table dataSource={dataSource} columns={columns} />
代码演示
Name | Age | Address | Action |
---|---|---|---|
John Brown | 32 | New York No. 1 Lake Park | Action 一 John BrownDeleteMore actions |
Jim Green | 42 | London No. 1 Lake Park | Action 一 Jim GreenDeleteMore actions |
Joe Black | 32 | Sidney No. 1 Lake Park | Action 一 Joe BlackDeleteMore actions |
import { Table, Icon } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a href="#">{text}</a>,
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
}, {
title: 'Action',
key: 'action',
render: (text, record) => (
<span>
<a href="#">Action 一 {record.name}</a>
<span className="ant-divider" />
<a href="#">Delete</a>
<span className="ant-divider" />
<a href="#" className="ant-dropdown-link">
More actions <Icon type="down" />
</a>
</span>
),
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}];
ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
Name | Age | Address | Action | |
---|---|---|---|---|
First Name | Last Name | |||
John | Brown | 32 | New York No. 1 Lake Park | Action 一 DeleteMore actions |
Jim | Green | 42 | London No. 1 Lake Park | Action 一 DeleteMore actions |
Joe | Black | 32 | Sidney No. 1 Lake Park | Action 一 DeleteMore actions |
import { Table, Icon } from 'antd';
const { Column, ColumnGroup } = Table;
const data = [{
key: '1',
firstName: 'John',
lastName: 'Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
firstName: 'Jim',
lastName: 'Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
firstName: 'Joe',
lastName: 'Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}];
ReactDOM.render(
<Table dataSource={data}>
<ColumnGroup title="Name">
<Column
title="First Name"
dataIndex="firstName"
key="firstName"
/>
<Column
title="Last Name"
dataIndex="lastName"
key="lastName"
/>
</ColumnGroup>
<Column
title="Age"
dataIndex="age"
key="age"
/>
<Column
title="Address"
dataIndex="address"
key="address"
/>
<Column
title="Action"
key="action"
render={(text, record) => (
<span>
<a href="#">Action 一 {record.name}</a>
<span className="ant-divider" />
<a href="#">Delete</a>
<span className="ant-divider" />
<a href="#" className="ant-dropdown-link">
More actions <Icon type="down" />
</a>
</span>
)}
/>
</Table>
, mountNode);
Name | Age | Address | |
---|---|---|---|
John Brown | 32 | New York No. 1 Lake Park | |
Jim Green | 42 | London No. 1 Lake Park | |
Joe Black | 32 | Sidney No. 1 Lake Park | |
Disabled User | 99 | Sidney No. 1 Lake Park |
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
render: text => <a href="#">{text}</a>,
}, {
title: 'Age',
dataIndex: 'age',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Disabled User',
age: 99,
address: 'Sidney No. 1 Lake Park',
}];
// rowSelection object indicates the need for row selection
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', // Column configuration not to be checked
}),
};
ReactDOM.render(
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
, mountNode);
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 |
import { Table, Button } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
}, {
title: 'Age',
dataIndex: 'age',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
class App extends React.Component {
state = {
selectedRowKeys: [], // Check here to configure the default column
loading: false,
};
start = () => {
this.setState({ loading: true });
// ajax request after empty completing
setTimeout(() => {
this.setState({
selectedRowKeys: [],
loading: false,
});
}, 1000);
}
onSelectChange = (selectedRowKeys) => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.setState({ selectedRowKeys });
}
render() {
const { loading, selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
};
const hasSelected = selectedRowKeys.length > 0;
return (
<div>
<div style={{ marginBottom: 16 }}>
<Button
type="primary"
onClick={this.start}
disabled={!hasSelected}
loading={loading}
>
Reload
</Button>
<span style={{ marginLeft: 8 }}>
{hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
</span>
</div>
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
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 |
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
}, {
title: 'Age',
dataIndex: 'age',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
class App extends React.Component {
state = {
selectedRowKeys: [], // Check here to configure the default column
};
onSelectChange = (selectedRowKeys) => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.setState({ selectedRowKeys });
}
render() {
const { selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
hideDefaultSelections: true,
selections: [{
key: 'all-data',
text: 'Select All Data',
onSelect: () => {
this.setState({
selectedRowKeys: [...Array(46).keys()], // 0...45
});
},
}, {
key: 'odd',
text: 'Select Odd Row',
onSelect: (changableRowKeys) => {
let newSelectedRowKeys = [];
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
if (index % 2 !== 0) {
return false;
}
return true;
});
this.setState({ selectedRowKeys: newSelectedRowKeys });
},
}, {
key: 'even',
text: 'Select Even Row',
onSelect: (changableRowKeys) => {
let newSelectedRowKeys = [];
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
if (index % 2 !== 0) {
return true;
}
return false;
});
this.setState({ selectedRowKeys: newSelectedRowKeys });
},
}],
onSelection: this.onSelection,
};
return (
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
);
}
}
ReactDOM.render(<App />, mountNode);
Name | Age | Address |
---|---|---|
John Brown | 32 | New York No. 1 Lake Park |
Jim Green | 42 | London No. 1 Lake Park |
Joe Black | 32 | Sidney No. 1 Lake Park |
Jim Red | 32 | London No. 2 Lake Park |
import { Table, Button } from 'antd';
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
}];
class App extends React.Component {
state = {
filteredInfo: null,
sortedInfo: null,
};
handleChange = (pagination, filters, sorter) => {
console.log('Various parameters', pagination, filters, sorter);
this.setState({
filteredInfo: filters,
sortedInfo: sorter,
});
}
clearFilters = () => {
this.setState({ filteredInfo: null });
}
clearAll = () => {
this.setState({
filteredInfo: null,
sortedInfo: null,
});
}
setAgeSort = () => {
this.setState({
sortedInfo: {
order: 'descend',
columnKey: 'age',
},
});
}
render() {
let { sortedInfo, filteredInfo } = this.state;
sortedInfo = sortedInfo || {};
filteredInfo = filteredInfo || {};
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
filters: [
{ text: 'Joe', value: 'Joe' },
{ text: 'Jim', value: 'Jim' },
],
filteredValue: filteredInfo.name || null,
onFilter: (value, record) => record.name.includes(value),
sorter: (a, b) => a.name.length - b.name.length,
sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: (a, b) => a.age - b.age,
sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [
{ text: 'London', value: 'London' },
{ text: 'New York', value: 'New York' },
],
filteredValue: filteredInfo.address || null,
onFilter: (value, record) => record.address.includes(value),
sorter: (a, b) => a.address.length - b.address.length,
sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
}];
return (
<div>
<div className="table-operations">
<Button onClick={this.setAgeSort}>Sort age</Button>
<Button onClick={this.clearFilters}>Clear filters</Button>
<Button onClick={this.clearAll}>Clear filters and sorters</Button>
</div>
<Table columns={columns} dataSource={data} onChange={this.handleChange} />
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
.table-operations {
margin-bottom: 16px;
}
.table-operations > button {
margin-right: 8px;
}
Name | Age | Address |
---|---|---|
John Brown | 32 | New York No. 1 Lake Park |
Jim Green | 42 | London No. 1 Lake Park |
Joe Black | 32 | Sidney No. 1 Lake Park |
Jim Red | 32 | London No. 2 Lake Park |
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
filters: [{
text: 'Joe',
value: 'Joe',
}, {
text: 'Jim',
value: 'Jim',
}, {
text: 'Submenu',
value: 'Submenu',
children: [{
text: 'Green',
value: 'Green',
}, {
text: 'Black',
value: 'Black',
}],
}],
// specify the condition of filtering result
// here is that finding the name started with `value`
onFilter: (value, record) => record.name.indexOf(value) === 0,
sorter: (a, b) => a.name.length - b.name.length,
}, {
title: 'Age',
dataIndex: 'age',
sorter: (a, b) => a.age - b.age,
}, {
title: 'Address',
dataIndex: 'address',
filters: [{
text: 'London',
value: 'London',
}, {
text: 'New York',
value: 'New York',
}],
filterMultiple: false,
onFilter: (value, record) => record.address.indexOf(value) === 0,
sorter: (a, b) => a.address.length - b.address.length,
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
}];
function onChange(pagination, filters, sorter) {
console.log('params', pagination, filters, sorter);
}
ReactDOM.render(<Table columns={columns} dataSource={data} onChange={onChange} />, mountNode);
Name | Age | Address |
---|---|---|
John Brown | 32 | New York No. 1 Lake Park |
Joe Black | 42 | London No. 1 Lake Park |
Jim Green | 32 | Sidney No. 1 Lake Park |
Jim Red | 32 | London No. 2 Lake Park |
import { Table, Input, Button, Icon } from 'antd';
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Joe Black',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Jim Green',
age: 32,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
}];
class App extends React.Component {
state = {
filterDropdownVisible: false,
data,
searchText: '',
filtered: false,
};
onInputChange = (e) => {
this.setState({ searchText: e.target.value });
}
onSearch = () => {
const { searchText } = this.state;
const reg = new RegExp(searchText, 'gi');
this.setState({
filterDropdownVisible: false,
filtered: !!searchText,
data: data.map((record) => {
const match = record.name.match(reg);
if (!match) {
return null;
}
return {
...record,
name: (
<span>
{record.name.split(reg).map((text, i) => (
i > 0 ? [<span className="highlight">{match[0]}</span>, text] : text
))}
</span>
),
};
}).filter(record => !!record),
});
}
render() {
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
filterDropdown: (
<div className="custom-filter-dropdown">
<Input
ref={ele => this.searchInput = ele}
placeholder="Search name"
value={this.state.searchText}
onChange={this.onInputChange}
onPressEnter={this.onSearch}
/>
<Button type="primary" onClick={this.onSearch}>Search</Button>
</div>
),
filterIcon: <Icon type="smile-o" style={{ color: this.state.filtered ? '#108ee9' : '#aaa' }} />,
filterDropdownVisible: this.state.filterDropdownVisible,
onFilterDropdownVisibleChange: (visible) => {
this.setState({
filterDropdownVisible: visible,
}, () => this.searchInput.focus());
},
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [{
text: 'London',
value: 'London',
}, {
text: 'New York',
value: 'New York',
}],
onFilter: (value, record) => record.address.indexOf(value) === 0,
}];
return <Table columns={columns} dataSource={this.state.data} />;
}
}
ReactDOM.render(<App />, mountNode);
.custom-filter-dropdown {
padding: 8px;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}
.custom-filter-dropdown input {
width: 130px;
margin-right: 8px;
}
.highlight {
color: #f50;
}
Name | Gender |
---|
No data
import { Table } from 'antd';
import reqwest from 'reqwest';
const columns = [{
title: 'Name',
dataIndex: 'name',
sorter: true,
render: name => `${name.first} ${name.last}`,
width: '20%',
}, {
title: 'Gender',
dataIndex: 'gender',
filters: [
{ text: 'Male', value: 'male' },
{ text: 'Female', value: 'female' },
],
width: '20%',
}, {
title: 'Email',
dataIndex: 'email',
}];
class App extends React.Component {
state = {
data: [],
pagination: {},
loading: false,
};
handleTableChange = (pagination, filters, sorter) => {
const pager = { ...this.state.pagination };
pager.current = pagination.current;
this.setState({
pagination: pager,
});
this.fetch({
results: pagination.pageSize,
page: pagination.current,
sortField: sorter.field,
sortOrder: sorter.order,
...filters,
});
}
fetch = (params = {}) => {
console.log('params:', params);
this.setState({ loading: true });
reqwest({
url: 'https://randomuser.me/api',
method: 'get',
data: {
results: 10,
...params,
},
type: 'json',
}).then((data) => {
const pagination = { ...this.state.pagination };
// Read total count from server
// pagination.total = data.totalCount;
pagination.total = 200;
this.setState({
loading: false,
data: data.results,
pagination,
});
});
}
componentDidMount() {
this.fetch();
}
render() {
return (
<Table columns={columns}
rowKey={record => record.registered}
dataSource={this.state.data}
pagination={this.state.pagination}
loading={this.state.loading}
onChange={this.handleTableChange}
/>
);
}
}
ReactDOM.render(<App />, mountNode);
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
}, {
title: 'Age',
dataIndex: 'age',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}];
ReactDOM.render(
<div>
<h4>Middle size table</h4>
<Table columns={columns} dataSource={data} size="middle" />
<h4>Small size table</h4>
<Table columns={columns} dataSource={data} size="small" />
</div>
, mountNode);
Header
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 | Sidney No. 1 Lake Park |
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
render: text => <a href="#">{text}</a>,
}, {
title: 'Cash Assets',
className: 'column-money',
dataIndex: 'money',
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [{
key: '1',
name: 'John Brown',
money: '¥300,000.00',
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
money: '¥1,256,000.00',
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
money: '¥120,000.00',
address: 'Sidney No. 1 Lake Park',
}];
ReactDOM.render(
<Table
columns={columns}
dataSource={data}
bordered
title={() => 'Header'}
footer={() => 'Footer'}
/>
, mountNode);
th.column-money,
td.column-money {
text-align: right !important;
}
import { Table } from 'antd';
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{ title: 'Action', dataIndex: '', key: 'x', render: () => <a href="#">Delete</a> },
];
const data = [
{ key: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' },
{ key: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' },
{ key: 3, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' },
];
ReactDOM.render(
<Table
columns={columns}
expandedRowRender={record => <p>{record.description}</p>}
dataSource={data}
/>
, mountNode);
Name | Age | Home phone | Address | |
---|---|---|---|---|
John Brown | 32 | 0571-22098909 | 18889898989 | New York No. 1 Lake Park |
Jim Green | 42 | 0571-22098333 | 18889898888 | London No. 1 Lake Park |
Joe Black | 32 | 0575-22098909 | 18900010002 | Sidney No. 1 Lake Park |
Jim Red | 18 | 18900010002 | London No. 2 Lake Park | |
Jake White |
import { Table } from 'antd';
// In the fifth row, other columns are merged into first column
// by setting it's colSpan to be 0
const renderContent = (value, row, index) => {
const obj = {
children: value,
props: {},
};
if (index === 4) {
obj.props.colSpan = 0;
}
return obj;
};
const columns = [{
title: 'Name',
dataIndex: 'name',
render: (text, row, index) => {
if (index < 4) {
return <a href="#">{text}</a>;
}
return {
children: <a href="#">{text}</a>,
props: {
colSpan: 5,
},
};
},
}, {
title: 'Age',
dataIndex: 'age',
render: renderContent,
}, {
title: 'Home phone',
colSpan: 2,
dataIndex: 'tel',
render: (value, row, index) => {
const obj = {
children: value,
props: {},
};
if (index === 2) {
obj.props.rowSpan = 2;
}
// These two are merged into above cell
if (index === 3) {
obj.props.rowSpan = 0;
}
if (index === 4) {
obj.props.colSpan = 0;
}
return obj;
},
}, {
title: 'Phone',
colSpan: 0,
dataIndex: 'phone',
render: renderContent,
}, {
title: 'Address',
dataIndex: 'address',
render: renderContent,
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
tel: '0571-22098909',
phone: 18889898989,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
tel: '0571-22098333',
phone: 18889898888,
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
tel: '0575-22098909',
phone: 18900010002,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Jim Red',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: 'London No. 2 Lake Park',
}, {
key: '5',
name: 'Jake White',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: 'Dublin No. 2 Lake Park',
}];
ReactDOM.render(<Table columns={columns} dataSource={data} bordered />
, mountNode);
Name | Age | Address | |
---|---|---|---|
John Brown sr. | 60 | New York No. 1 Lake Park | |
Joe Black | 32 | Sidney No. 1 Lake Park |
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: '40%',
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
width: '30%',
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
}];
const data = [{
key: 1,
name: 'John Brown sr.',
age: 60,
address: 'New York No. 1 Lake Park',
children: [{
key: 11,
name: 'John Brown',
age: 42,
address: 'New York No. 2 Lake Park',
}, {
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
children: [{
key: 121,
name: 'Jimmy Brown',
age: 16,
address: 'New York No. 3 Lake Park',
}],
}, {
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
children: [{
key: 131,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [{
key: 1311,
name: 'Jim Green jr.',
age: 25,
address: 'London No. 3 Lake Park',
}, {
key: 1312,
name: 'Jimmy Green sr.',
age: 18,
address: 'London No. 4 Lake Park',
}],
}],
}],
}, {
key: 2,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}];
// rowSelection objects indicates the need for row selection
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
};
ReactDOM.render(
<Table columns={columns} rowSelection={rowSelection} dataSource={data} />
, mountNode);
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 |
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
width: 150,
}, {
title: 'Age',
dataIndex: 'age',
width: 150,
}, {
title: 'Address',
dataIndex: 'address',
}];
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
ReactDOM.render(
<Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />
, mountNode);
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 |
Full Name | Age |
---|---|
John Brown | 32 |
Jim Green | 40 |
import { Table } from 'antd';
const columns = [
{ title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
{ title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ title: 'Column 1', dataIndex: 'address', key: '1' },
{ title: 'Column 2', dataIndex: 'address', key: '2' },
{ title: 'Column 3', dataIndex: 'address', key: '3' },
{ title: 'Column 4', dataIndex: 'address', key: '4' },
{ title: 'Column 5', dataIndex: 'address', key: '5' },
{ title: 'Column 6', dataIndex: 'address', key: '6' },
{ title: 'Column 7', dataIndex: 'address', key: '7' },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{
title: 'Action',
key: 'operation',
fixed: 'right',
width: 100,
render: () => <a href="#">action</a>,
},
];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York Park',
}, {
key: '2',
name: 'Jim Green',
age: 40,
address: 'London Park',
}];
ReactDOM.render(<Table columns={columns} dataSource={data} scroll={{ x: 1300 }} />, mountNode);
Full Name | Age | Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 | Column 7 | Column 8 | Action |
---|
Edrward 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 |
Edrward 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 |
Edrward 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 |
Edrward 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 |
Edrward 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 |
Edrward 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 |
Edrward 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 |
Edrward 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 |
Edrward 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 |
Edrward 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 |
Full Name | Age |
---|
Edrward 0 | 32 |
Edrward 1 | 32 |
Edrward 2 | 32 |
Edrward 3 | 32 |
Edrward 4 | 32 |
Edrward 5 | 32 |
Edrward 6 | 32 |
Edrward 7 | 32 |
Edrward 8 | 32 |
Edrward 9 | 32 |
import { Table } from 'antd';
const columns = [
{ title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
{ title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },
{ title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
{ title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
{ title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
{ title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },
{ title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },
{ title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{
title: 'Action',
key: 'operation',
fixed: 'right',
width: 100,
render: () => <a href="#">action</a>,
},
];
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
ReactDOM.render(<Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />, mountNode);
Name | Other | Company | Gender | ||||
---|---|---|---|---|---|---|---|
Age | Address | Company Address | Company Name | ||||
Street | Block | ||||||
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 |
Name |
---|
John Brown |
John Brown |
John Brown |
John Brown |
John Brown |
John Brown |
John Brown |
John Brown |
John Brown |
John Brown |
Gender |
---|
M |
M |
M |
M |
M |
M |
M |
M |
M |
M |
import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 100,
fixed: 'left',
filters: [{
text: 'Joe',
value: 'Joe',
}, {
text: 'John',
value: 'John',
}],
onFilter: (value, record) => record.name.indexOf(value) === 0,
}, {
title: 'Other',
children: [{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 200,
sorter: (a, b) => a.age - b.age,
}, {
title: 'Address',
children: [{
title: 'Street',
dataIndex: 'street',
key: 'street',
width: 200,
}, {
title: 'Block',
children: [{
title: 'Building',
dataIndex: 'building',
key: 'building',
width: 100,
}, {
title: 'Door No.',
dataIndex: 'number',
key: 'number',
width: 100,
}],
}],
}],
}, {
title: 'Company',
children: [{
title: 'Company Address',
dataIndex: 'companyAddress',
key: 'companyAddress',
}, {
title: 'Company Name',
dataIndex: 'companyName',
key: 'companyName',
}],
}, {
title: 'Gender',
dataIndex: 'gender',
key: 'gender',
width: 60,
fixed: 'right',
}];
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: 'John Brown',
age: i + 1,
street: 'Lake Park',
building: 'C',
number: 2035,
companyAddress: 'Lake Street 42',
companyName: 'SoftLake Co',
gender: 'M',
});
}
ReactDOM.render(
<Table
columns={columns}
dataSource={data}
bordered
size="middle"
scroll={{ x: '130%', y: 240 }}
/>
, mountNode);
import { Table, Input, Icon, Button, Popconfirm } from 'antd';
class EditableCell extends React.Component {
state = {
value: this.props.value,
editable: false,
}
handleChange = (e) => {
const value = e.target.value;
this.setState({ value });
}
check = () => {
this.setState({ editable: false });
if (this.props.onChange) {
this.props.onChange(this.state.value);
}
}
edit = () => {
this.setState({ editable: true });
}
render() {
const { value, editable } = this.state;
return (
<div className="editable-cell">
{
editable ?
<div className="editable-cell-input-wrapper">
<Input
value={value}
onChange={this.handleChange}
onPressEnter={this.check}
/>
<Icon
type="check"
className="editable-cell-icon-check"
onClick={this.check}
/>
</div>
:
<div className="editable-cell-text-wrapper">
{value || ' '}
<Icon
type="edit"
className="editable-cell-icon"
onClick={this.edit}
/>
</div>
}
</div>
);
}
}
class EditableTable extends React.Component {
constructor(props) {
super(props);
this.columns = [{
title: 'name',
dataIndex: 'name',
width: '30%',
render: (text, record) => (
<EditableCell
value={text}
onChange={this.onCellChange(record.key, 'name')}
/>
),
}, {
title: 'age',
dataIndex: 'age',
}, {
title: 'address',
dataIndex: 'address',
}, {
title: 'operation',
dataIndex: 'operation',
render: (text, record) => {
return (
this.state.dataSource.length > 1 ?
(
<Popconfirm title="Sure to delete?" onConfirm={() => this.onDelete(record.key)}>
<a href="#">Delete</a>
</Popconfirm>
) : null
);
},
}];
this.state = {
dataSource: [{
key: '0',
name: 'Edward King 0',
age: '32',
address: 'London, Park Lane no. 0',
}, {
key: '1',
name: 'Edward King 1',
age: '32',
address: 'London, Park Lane no. 1',
}],
count: 2,
};
}
onCellChange = (key, dataIndex) => {
return (value) => {
const dataSource = [...this.state.dataSource];
const target = dataSource.find(item => item.key === key);
if (target) {
target[dataIndex] = value;
this.setState({ dataSource });
}
};
}
onDelete = (key) => {
const dataSource = [...this.state.dataSource];
this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
}
handleAdd = () => {
const { count, dataSource } = this.state;
const newData = {
key: count,
name: `Edward King ${count}`,
age: 32,
address: `London, Park Lane no. ${count}`,
};
this.setState({
dataSource: [...dataSource, newData],
count: count + 1,
});
}
render() {
const { dataSource } = this.state;
const columns = this.columns;
return (
<div>
<Button className="editable-add-btn" onClick={this.handleAdd}>Add</Button>
<Table bordered dataSource={dataSource} columns={columns} />
</div>
);
}
}
ReactDOM.render(<EditableTable />, mountNode);
.editable-cell {
position: relative;
}
.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
padding-right: 24px;
}
.editable-cell-text-wrapper {
padding: 5px 24px 5px 5px;
}
.editable-cell-icon,
.editable-cell-icon-check {
position: absolute;
right: 0;
width: 20px;
cursor: pointer;
}
.editable-cell-icon {
line-height: 18px;
display: none;
}
.editable-cell-icon-check {
line-height: 28px;
}
.editable-cell:hover .editable-cell-icon {
display: inline-block;
}
.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
color: #108ee9;
}
.editable-add-btn {
margin-bottom: 8px;
}
name | age | address | operation |
---|---|---|---|
Edrward 0 | 32 | London Park no. 0 | |
Edrward 1 | 32 | London Park no. 1 | |
Edrward 2 | 32 | London Park no. 2 | |
Edrward 3 | 32 | London Park no. 3 | |
Edrward 4 | 32 | London Park no. 4 | |
Edrward 5 | 32 | London Park no. 5 | |
Edrward 6 | 32 | London Park no. 6 | |
Edrward 7 | 32 | London Park no. 7 | |
Edrward 8 | 32 | London Park no. 8 | |
Edrward 9 | 32 | London Park no. 9 |
import { Table, Input, Popconfirm } from 'antd';
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i.toString(),
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
const EditableCell = ({ editable, value, onChange }) => (
<div>
{editable
? <Input style={{ margin: '-5px 0' }} value={value} onChange={e => onChange(e.target.value)} />
: value
}
</div>
);
class EditableTable extends React.Component {
constructor(props) {
super(props);
this.columns = [{
title: 'name',
dataIndex: 'name',
width: '25%',
render: (text, record) => this.renderColumns(text, record, 'name'),
}, {
title: 'age',
dataIndex: 'age',
width: '15%',
render: (text, record) => this.renderColumns(text, record, 'age'),
}, {
title: 'address',
dataIndex: 'address',
width: '40%',
render: (text, record) => this.renderColumns(text, record, 'address'),
}, {
title: 'operation',
dataIndex: 'operation',
render: (text, record) => {
const { editable } = record;
return (
<div className="editable-row-operations">
{
editable ?
<span>
<a onClick={() => this.save(record.key)}>Save</a>
<Popconfirm title="Sure to cancel?" onConfirm={() => this.cancel(record.key)}>
<a>Cancel</a>
</Popconfirm>
</span>
: <a onClick={() => this.edit(record.key)}>Edit</a>
}
</div>
);
},
}];
this.state = { data };
this.cacheData = data.map(item => ({ ...item }));
}
renderColumns(text, record, column) {
return (
<EditableCell
editable={record.editable}
value={text}
onChange={value => this.handleChange(value, record.key, column)}
/>
);
}
handleChange(value, key, column) {
const newData = [...this.state.data];
const target = newData.filter(item => key === item.key)[0];
if (target) {
target[column] = value;
this.setState({ data: newData });
}
}
edit(key) {
const newData = [...this.state.data];
const target = newData.filter(item => key === item.key)[0];
if (target) {
target.editable = true;
this.setState({ data: newData });
}
}
save(key) {
const newData = [...this.state.data];
const target = newData.filter(item => key === item.key)[0];
if (target) {
delete target.editable;
this.setState({ data: newData });
this.cacheData = newData.map(item => ({ ...item }));
}
}
cancel(key) {
const newData = [...this.state.data];
const target = newData.filter(item => key === item.key)[0];
if (target) {
Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
delete target.editable;
this.setState({ data: newData });
}
}
render() {
return <Table bordered dataSource={this.state.data} columns={this.columns} />;
}
}
ReactDOM.render(<EditableTable />, mountNode);
.editable-row-operations a {
margin-right: 8px;
}
import { Table, Badge, Menu, Dropdown, Icon } from 'antd';
const menu = (
<Menu>
<Menu.Item>
Action 1
</Menu.Item>
<Menu.Item>
Action 2
</Menu.Item>
</Menu>
);
function NestedTable() {
const expandedRowRender = () => {
const columns = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Status', key: 'state', render: () => <span><Badge status="success" />Finished</span> },
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
render: () => (
<span className="table-operation">
<a href="#">Pause</a>
<a href="#">Stop</a>
<Dropdown overlay={menu}>
<a href="#">
More <Icon type="down" />
</a>
</Dropdown>
</span>
),
},
];
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
return (
<Table
columns={columns}
dataSource={data}
pagination={false}
/>
);
};
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', render: () => <a href="#">Publish</a> },
];
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
name: 'Screem',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
});
}
return (
<Table
className="components-table-demo-nested"
columns={columns}
expandedRowRender={expandedRowRender}
dataSource={data}
/>
);
}
ReactDOM.render(<NestedTable />, mountNode);
.components-table-demo-nested .ant-table-expanded-row > td:last-child {
padding: 0 48px 0 8px;
}
.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-thead th {
border-bottom: 1px solid #e9e9e9;
}
.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-thead th:first-child {
padding-left: 0;
}
.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-row td:first-child {
padding-left: 0;
}
.components-table-demo-nested .ant-table-expanded-row .ant-table-row:last-child td {
border: none;
}
.components-table-demo-nested .ant-table-expanded-row .ant-table-thead > tr > th {
background: none;
}
.components-table-demo-nested .table-operation a:not(:last-child) {
margin-right: 24px;
}
Here is title
Name | Age | Address | Action | ||
---|---|---|---|---|---|
John Brown | 12 | New York No. 1 Lake Park | Action 一 John BrownDeleteMore actions | ||
John Brown | 22 | New York No. 2 Lake Park | Action 一 John BrownDeleteMore actions | ||
John Brown | 32 | New York No. 3 Lake Park | Action 一 John BrownDeleteMore actions | ||
John Brown | 42 | New York No. 4 Lake Park | Action 一 John BrownDeleteMore actions | ||
John Brown | 52 | New York No. 5 Lake Park | Action 一 John BrownDeleteMore actions | ||
John Brown | 62 | New York No. 6 Lake Park | Action 一 John BrownDeleteMore actions | ||
John Brown | 72 | New York No. 7 Lake Park | Action 一 John BrownDeleteMore actions | ||
John Brown | 82 | New York No. 8 Lake Park | Action 一 John BrownDeleteMore actions | ||
John Brown | 92 | New York No. 9 Lake Park | Action 一 John BrownDeleteMore actions | ||
John Brown | 102 | New York No. 10 Lake Park | Action 一 John BrownDeleteMore actions |
import { Table, Icon, Switch, Radio, Form } from 'antd';
const FormItem = Form.Item;
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 150,
render: text => <a href="#">{text}</a>,
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 70,
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
}, {
title: 'Action',
key: 'action',
width: 360,
render: (text, record) => (
<span>
<a href="#">Action 一 {record.name}</a>
<span className="ant-divider" />
<a href="#">Delete</a>
<span className="ant-divider" />
<a href="#" className="ant-dropdown-link">
More actions <Icon type="down" />
</a>
</span>
),
}];
const data = [];
for (let i = 1; i <= 10; i++) {
data.push({
key: i,
name: 'John Brown',
age: `${i}2`,
address: `New York No. ${i} Lake Park`,
description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
});
}
const expandedRowRender = record => <p>{record.description}</p>;
const title = () => 'Here is title';
const showHeader = true;
const footer = () => 'Here is footer';
const scroll = { y: 240 };
class Demo extends React.Component {
state = {
bordered: false,
loading: false,
pagination: true,
size: 'default',
expandedRowRender,
title,
showHeader,
footer,
rowSelection: {},
scroll: undefined,
}
handleToggle = (prop) => {
return (enable) => {
this.setState({ [prop]: enable });
};
}
handleSizeChange = (e) => {
this.setState({ size: e.target.value });
}
handleExpandChange = (enable) => {
this.setState({ expandedRowRender: enable ? expandedRowRender : undefined });
}
handleTitleChange = (enable) => {
this.setState({ title: enable ? title : undefined });
}
handleHeaderChange = (enable) => {
this.setState({ showHeader: enable ? showHeader : false });
}
handleFooterChange = (enable) => {
this.setState({ footer: enable ? footer : undefined });
}
handleRowSelectionChange = (enable) => {
this.setState({ rowSelection: enable ? {} : undefined });
}
handleScollChange = (enable) => {
this.setState({ scroll: enable ? scroll : undefined });
}
render() {
const state = this.state;
return (
<div>
<div className="components-table-demo-control-bar">
<Form layout="inline">
<FormItem label="Bordered">
<Switch checked={state.bordered} onChange={this.handleToggle('bordered')} />
</FormItem>
<FormItem label="loading">
<Switch checked={state.loading} onChange={this.handleToggle('loading')} />
</FormItem>
<FormItem label="Pagination">
<Switch checked={state.pagination} onChange={this.handleToggle('pagination')} />
</FormItem>
<FormItem label="Title">
<Switch checked={!!state.title} onChange={this.handleTitleChange} />
</FormItem>
<FormItem label="Column Header">
<Switch checked={!!state.showHeader} onChange={this.handleHeaderChange} />
</FormItem>
<FormItem label="Footer">
<Switch checked={!!state.footer} onChange={this.handleFooterChange} />
</FormItem>
<FormItem label="Expandable">
<Switch checked={!!state.expandedRowRender} onChange={this.handleExpandChange} />
</FormItem>
<FormItem label="Checkbox">
<Switch checked={!!state.rowSelection} onChange={this.handleRowSelectionChange} />
</FormItem>
<FormItem label="Fixed Header">
<Switch checked={!!state.scroll} onChange={this.handleScollChange} />
</FormItem>
<FormItem label="Size">
<Radio.Group size="default" value={state.size} onChange={this.handleSizeChange}>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="middle">Middle</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
</FormItem>
</Form>
</div>
<Table {...this.state} columns={columns} dataSource={data} />
</div>
);
}
}
ReactDOM.render(<Demo />, mountNode);
API#
Table#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
bordered | 是否展示外边框和列边框 | boolean | false |
columns | 表格列的配置描述,具体项见下表 | ColumnProps[] | - |
dataSource | 数据数组 | any[] | |
defaultExpandAllRows | 初始时,是否展开所有行 | boolean | false |
defaultExpandedRowKeys | 默认展开的行 | string[] | - |
expandedRowKeys | 展开的行,控制属性 | string[] | - |
expandedRowRender | 额外的展开行 | Function(record):ReactNode | - |
footer | 表格尾部 | Function(currentPageData) | |
indentSize | 展示树形数据时,每层缩进的宽度,以 px 为单位 | number | 15 |
loading | 页面是否加载中 | boolean|object (更多) | false |
locale | 默认文案设置,目前包括排序、过滤、空数据文案 | object | filterConfirm: '确定' filterReset: '重置' emptyText: '暂无数据' 默认值 |
pagination | 分页器,配置项参考 pagination,设为 false 时不展示和进行分页 | object | |
rowClassName | 表格行的类名 | Function(record, index):string | - |
rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string|Function(record):string | 'key' |
rowSelection | 列表项是否可选择,配置项 | object | null |
scroll | 横向或纵向支持滚动,也可用于指定滚动区域的宽高度:{{ x: true, y: 300 }} | object | - |
showHeader | 是否显示表头 | boolean | true |
size | 正常或迷你类型,default or small | string | default |
title | 表格标题 | Function(currentPageData) | |
onChange | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) | |
onExpand | 点击展开图标时触发 | Function(expanded, record) | |
onExpandedRowsChange | 展开的行变化时触发 | Function(expandedRows) | |
onRowClick | 点击行时触发 | Function(record, index, event) | - |
onRowContextMenu | 右键行时触发 | Function(record, index, event) | - |
onRowDoubleClick | 双击行时触发 | Function(record, index, event) | - |
onRowMouseEnter | 鼠标移入行时触发 | Function(record, index, event) | - |
onRowMouseLeave | 鼠标移出行时触发 | Function(record, index, event) | - |
Column#
列描述数据对象,是 columns 中的一项,Column 使用相同的 API。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
className | 列的 className | string | - |
colSpan | 表头列合并,设置为 0 时,不渲染 | number | |
dataIndex | 列数据在数据项中对应的 key,支持 a.b.c 的嵌套写法 | string | - |
filterDropdown | 可以自定义筛选菜单,此函数只负责渲染图层,需要自行编写各种交互 | ReactNode | - |
filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |
filtered | 标识数据是否经过过滤,筛选图标会高亮 | boolean | false |
filteredValue | 筛选的受控属性,外界可用此控制列的筛选状态,值为已筛选的 value 数组 | string[] | - |
filterIcon | 自定义 fiter 图标。 | ReactNode | false |
filterMultiple | 是否多选 | boolean | true |
filters | 表头的筛选菜单项 | object[] | - |
fixed | 列是否固定,可选 true (等效于 left) 'left' 'right' | boolean|string | false |
key | React 需要的 key,如果已经设置了唯一的 dataIndex ,可以忽略这个属性 | string | - |
render | 生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引,@return里面可以设置表格行/列合并 | Function(text, record, index) {} | - |
sorter | 排序函数,本地排序使用一个函数(参考 Array.sort 的 compareFunction),需要服务端排序可设为 true | Function|boolean | - |
sortOrder | 排序的受控属性,外界可用此控制列的排序,可设置为 'ascend' 'descend' false | boolean|string | - |
title | 列头显示文字 | string|ReactNode | - |
width | 列宽度 | string|number | - |
onCellClick | 单元格点击回调 | Function(record, event) | - |
onFilter | 本地模式下,确定筛选的运行函数 | Function | - |
onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |
ColumnGroup#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 列头显示文字 | string|ReactNode | - |
rowSelection#
选择功能的配置。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
getCheckboxProps | 选择框的默认属性配置 | Function(record) | - |
hideDefaultSelections | 去掉『全选』『反选』两个默认选项 | boolean | false |
selectedRowKeys | 指定选中项的 key 数组,需要和 onChange 进行配合 | string[] | [] |
selections | 自定义选择项 配置项, 设为 true 时使用默认选择项 | object[]|boolean | true |
type | 多选/单选,checkbox or radio | string | checkbox |
onChange | 选中项发生变化的时的回调 | Function(selectedRowKeys, selectedRows) | - |
onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows) | - |
onSelectAll | 用户手动选择/取消选择所有列的回调 | Function(selected, selectedRows, changeRows) | - |
onSelectInvert | 用户手动选择反选的回调 | Function(selectedRows) | - |
selection#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
key | React 需要的 key,建议设置 | string | - |
text | 选择项显示的文字 | string|React.ReactNode | - |
onSelect | 选择项点击回调 | Function(changeableRowKeys) | - |
在 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} />
// 使用 JSX 风格的 API
class NameColumn extends Table.Column<IUser> {}
<UserTable dataSource={data}>
<NameColumn key="name" title="Name" dataIndex="name" />
</UserTable>
注意#
按照 React 的规范,所有的组件数组必须绑定 key。在 Table 中,dataSource
和 columns
里的数据值都需要指定 key
值。对于 dataSource
默认将每列数据的 key
属性作为唯一的标识。
如果你的数据没有这个属性,务必使用 rowKey
来指定数据列的主键。若没有指定,控制台会出现以下的提示,表格组件也会出现各类奇怪的错误。
// 比如你的数据主键是 uid
return <Table rowKey="uid" />;
// 或
return <Table rowKey={record => record.uid} />;