excel表格中，当某一单元格大于一定数值后声报警如何设置呢？_百度知道
excel表格中，当某一单元格大于一定数值后声报警如何设置呢？
我有更好的答案
如下图所示，要求B3的数值不能大于A3的数值，如果大于A3的值将弹出错误对话框。1、选择B3单元格，数据选项卡-数据有效性（Excel2013开始称为数据验证);2、允许选择自定义，公式输入=B3&=A33、确定。
采纳率：67%
来自团队：
数据，设置数据有效性公式中输入&10，如果输入的数据大于10就报错了
本回答被提问者和网友采纳
还有带声音报警的？
用条件格式 大于10就变红色填充表格
数据--有效性--选择整数--设定小于多少的数值
其他1条回答
为您推荐：
其他类似问题
excel表格的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。LayoutData EntryData DisplayFeedbackOtherTable表格展示行列数据。何时使用当有大量结构化的数据需要展现时；当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。如何使用指定表格的数据源 dataSource 为一个数组。const dataSource = [{
name: '胡彦斌',
address: '西湖区湖底公园1号'
name: '胡彦祖',
address: '西湖区湖底公园1号'
const columns = [{
title: '姓名',
dataIndex: 'name',
key: 'name',
title: '年龄',
dataIndex: 'age',
key: 'age',
title: '住址',
dataIndex: 'address',
key: 'address',
Table dataSource={dataSource} columns={columns} />代码演示32New York No. 1 Lake Park42London No. 1 Lake Park32Sidney No. 1 Lake Park简单的表格，最后一列是各种操作。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) => (
a href="#">Action 一 {record.name}a>
span className="ant-divider" />
a href="#">Deletea>
span className="ant-divider" />
a href="#" className="ant-dropdown-link">
More actions Icon type="down" />
const data = [{
name: 'John Brown',
address: 'New York No. 1 Lake Park',
name: 'Jim Green',
address: 'London No. 1 Lake Park',
name: 'Joe Black',
address: 'Sidney No. 1 Lake Park',
ReactDOM.render(Table columns={columns} dataSource={data} />, mountNode);JohnBrown32New York No. 1 Lake ParkJimGreen42London No. 1 Lake ParkJoeBlack32Sidney No. 1 Lake Park使用 JSX 风格的 API（2.5.0 以后引入）这个只是一个描述 columns 的语法糖，所以你不能用其他组件去包裹 Column 和 ColumnGroup。import { Table, Icon } from 'antd';
const { Column, ColumnGroup } = Table;
const data = [{
firstName: 'John',
lastName: 'Brown',
address: 'New York No. 1 Lake Park',
firstName: 'Jim',
lastName: 'Green',
address: 'London No. 1 Lake Park',
firstName: 'Joe',
lastName: 'Black',
address: 'Sidney No. 1 Lake Park',
ReactDOM.render(
Table dataSource={data}>
ColumnGroup title="Name">
title="First Name"
dataIndex="firstName"
key="firstName"
title="Last Name"
dataIndex="lastName"
key="lastName"
ColumnGroup>
title="Age"
dataIndex="age"
title="Address"
dataIndex="address"
key="address"
title="Action"
key="action"
render={(text, record) => (
a href="#">Action 一 {record.name}a>
span className="ant-divider" />
a href="#">Deletea>
span className="ant-divider" />
a href="#" className="ant-dropdown-link">
More actions Icon type="down" />
, mountNode);32New York No. 1 Lake Park42London No. 1 Lake Park32Sidney No. 1 Lake Park99Sidney 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 = [{
name: 'John Brown',
address: 'New York No. 1 Lake Park',
name: 'Jim Green',
address: 'London No. 1 Lake Park',
name: 'Joe Black',
address: 'Sidney No. 1 Lake Park',
name: 'Disabled User',
address: 'Sidney No. 1 Lake Park',
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User',
ReactDOM.render(
Table rowSelection={rowSelection} columns={columns} dataSource={data} />
, mountNode);ReloadEdward King 032London, Park Lane no. 0Edward King 132London, Park Lane no. 1Edward King 232London, Park Lane no. 2Edward King 332London, Park Lane no. 3Edward King 432London, Park Lane no. 4Edward King 532London, Park Lane no. 5Edward King 632London, Park Lane no. 6Edward King 732London, Park Lane no. 7Edward King 832London, Park Lane no. 8Edward King 932London, Park Lane no. 9选择后进行操作，完成后清空选择，通过 rowSelection.selectedRowKeys 来控制选中项。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({
name: `Edward King ${i}`,
address: `London, Park Lane no. ${i}`,
class App extends React.Component {
selectedRowKeys: [],
loading: false,
start = () => {
this.setState({ loading: true });
setTimeout(() => {
this.setState({
selectedRowKeys: [],
loading: false,
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;
div style={{ marginBottom: 16 }}>
type="primary"
onClick={this.start}
disabled={!hasSelected}
loading={loading}
span style={{ marginLeft: 8 }}>
{hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
Table rowSelection={rowSelection} columns={columns} dataSource={data} />
ReactDOM.render(App />, mountNode);Edward King 032London, Park Lane no. 0Edward King 132London, Park Lane no. 1Edward King 232London, Park Lane no. 2Edward King 332London, Park Lane no. 3Edward King 432London, Park Lane no. 4Edward King 532London, Park Lane no. 5Edward King 632London, Park Lane no. 6Edward King 732London, Park Lane no. 7Edward King 832London, Park Lane no. 8Edward King 932London, Park Lane no. 9通过 rowSelection.selections 自定义选择项，默认不显示下拉选项，设为 true 时显示默认选择项。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({
name: `Edward King ${i}`,
address: `London, Park Lane no. ${i}`,
class App extends React.Component {
selectedRowKeys: [],
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()],
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,
Table rowSelection={rowSelection} columns={columns} dataSource={data} />
ReactDOM.render(App />, mountNode);Sort ageClear filtersClear filters and sortersJohn Brown32New York No. 1 Lake ParkJim Green42London No. 1 Lake ParkJoe Black32Sidney No. 1 Lake ParkJim Red32London No. 2 Lake Park使用受控属性对筛选和排序状态进行控制。columns 中定义了 filteredValue 和 sortOrder 属性即视为受控模式。只支持同时对一列进行排序，请保证只有一列的 sortOrder 属性是生效的。务必指定 column.key。import { Table, Button } from 'antd';
const data = [{
name: 'John Brown',
address: 'New York No. 1 Lake Park',
name: 'Jim Green',
address: 'London No. 1 Lake Park',
name: 'Joe Black',
address: 'Sidney No. 1 Lake Park',
name: 'Jim Red',
address: 'London No. 2 Lake Park',
class App extends React.Component {
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,
div className="table-operations">
Button onClick={this.setAgeSort}>Sort ageButton>
Button onClick={this.clearFilters}>Clear filtersButton>
Button onClick={this.clearAll}>Clear filters and sortersButton>
Table columns={columns} dataSource={data} onChange={this.handleChange} />
ReactDOM.render(App />, mountNode);.table-operations {
margin-bottom: 16px;
.table-operations > button {
margin-right: 8px;
}对某一列数据进行筛选，使用列的 filters 属性来指定需要筛选菜单的列，onFilter 用于筛选当前数据，filterMultiple 用于指定多选和单选。对某一列数据进行排序，通过指定列的 sorter 函数即可启动排序按钮。sorter: function(a, b) { ... }， a、b 为比较的两个列数据。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',
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 = [{
name: 'John Brown',
address: 'New York No. 1 Lake Park',
name: 'Jim Green',
address: 'London No. 1 Lake Park',
name: 'Joe Black',
address: 'Sidney No. 1 Lake Park',
name: 'Jim Red',
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);John Brown32New York No. 1 Lake ParkJoe Black42London No. 1 Lake ParkJim Green32Sidney No. 1 Lake ParkJim Red32London No. 2 Lake Park通过 filterDropdown、filterDropdownVisible 和 filterDropdownVisibleChange 定义自定义的列筛选功能，并实现一个搜索列的示例。import { Table, Input, Button, Icon } from 'antd';
const data = [{
name: 'John Brown',
address: 'New York No. 1 Lake Park',
name: 'Joe Black',
address: 'London No. 1 Lake Park',
name: 'Jim Green',
address: 'Sidney No. 1 Lake Park',
name: 'Jim Red',
address: 'London No. 2 Lake Park',
class App extends React.Component {
filterDropdownVisible: false,
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;
...record,
{record.name.split(reg).map((text, i) => (
i > 0 ? [span className="highlight">{match[0]}span>, text] : text
}).filter(record => !!record),
render() {
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
filterDropdown: (
div className="custom-filter-dropdown">
ref={ele => this.searchInput = ele}
placeholder="Search name"
value={this.state.searchText}
onChange={this.onInputChange}
onPressEnter={this.onSearch}
Button type="primary" onClick={this.onSearch}>SearchButton>
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;
}No data这个例子通过简单的 ajax 读取方式，演示了如何从服务端读取并展现数据，具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。另外，本例也展示了筛选排序功能如何交给服务端实现，列不需要指定具体的 onFilter 和 sorter 函数，而是在把筛选和排序的参数发到服务端来处理。注意，此示例使用 ，展示数据可能不准确，请打开网络面板查看请求。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 {
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 });
url: 'https://randomuser.me/api',
method: 'get',
results: 10,
...params,
type: 'json',
}).then((data) => {
const pagination = { ...this.state.pagination };
pagination.total = 200;
this.setState({
loading: false,
data: data.results,
pagination,
componentDidMount() {
this.fetch();
render() {
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);Middle size tableJohn Brown32New York No. 1 Lake ParkJim Green42London No. 1 Lake ParkJoe Black32Sidney No. 1 Lake ParkSmall size tableJohn Brown32New York No. 1 Lake ParkJim Green42London No. 1 Lake ParkJoe Black32Sidney No. 1 Lake Park两种紧凑型的列表，小型列表只用于对话框内。import { Table } from 'antd';
const columns = [{
title: 'Name',
dataIndex: 'name',
title: 'Age',
dataIndex: 'age',
title: 'Address',
dataIndex: 'address',
const data = [{
name: 'John Brown',
address: 'New York No. 1 Lake Park',
name: 'Jim Green',
address: 'London No. 1 Lake Park',
name: 'Joe Black',
address: 'Sidney No. 1 Lake Park',
ReactDOM.render(
h4>Middle size tableh4>
Table columns={columns} dataSource={data} size="middle" />
h4>Small size tableh4>
Table columns={columns} dataSource={data} size="small" />
, mountNode);Header￥300,000.00New York No. 1 Lake Park￥1,256,000.00London No. 1 Lake Park￥120,000.00Sidney 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 = [{
name: 'John Brown',
money: '￥300,000.00',
address: 'New York No. 1 Lake Park',
name: 'Jim Green',
money: '￥1,256,000.00',
address: 'London No. 1 Lake Park',
name: 'Joe Black',
money: '￥120,000.00',
address: 'Sidney No. 1 Lake Park',
ReactDOM.render(
columns={columns}
dataSource={data}
title={() => 'Header'}
footer={() => 'Footer'}
, mountNode);th.column-money,
td.column-money {
text-align: right !important;
}John Brown32New York No. 1 Lake ParkJim Green42London No. 1 Lake ParkJoe Black32Sidney No. 1 Lake Park当表格内容较多不能一次性完全展示时。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="#">Deletea> },
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(
columns={columns}
expandedRowRender={record => p>{record.description}p>}
dataSource={data}
, mountNode);329New York No. 1 Lake Park423London No. 1 Lake Park329Sidney No. 1 Lake Park18London No. 2 Lake Park表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。import { Table } from 'antd';
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>;
children: a href="#">{text}a>,
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;
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 = [{
name: 'John Brown',
address: 'New York No. 1 Lake Park',
name: 'Jim Green',
address: 'London No. 1 Lake Park',
name: 'Joe Black',
address: 'Sidney No. 1 Lake Park',
name: 'Jim Red',
address: 'London No. 2 Lake Park',
name: 'Jake White',
address: 'Dublin No. 2 Lake Park',
ReactDOM.render(Table columns={columns} dataSource={data} bordered />
, mountNode);John Brown sr.60New York No. 1 Lake ParkJoe Black32Sidney No. 1 Lake Park表格支持树形数据的展示，可以通过设置 indentSize 以控制每一层的缩进宽度。注：暂不支持父子数据递归关联选择。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 = [{
name: 'John Brown sr.',
address: 'New York No. 1 Lake Park',
children: [{
name: 'John Brown',
address: 'New York No. 2 Lake Park',
name: 'John Brown jr.',
address: 'New York No. 3 Lake Park',
children: [{
name: 'Jimmy Brown',
address: 'New York No. 3 Lake Park',
name: 'Jim Green sr.',
address: 'London No. 1 Lake Park',
children: [{
name: 'Jim Green',
address: 'London No. 2 Lake Park',
children: [{
key: 1311,
name: 'Jim Green jr.',
address: 'London No. 3 Lake Park',
key: 1312,
name: 'Jimmy Green sr.',
address: 'London No. 4 Lake Park',
name: 'Joe Black',
address: 'Sidney No. 1 Lake Park',
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);方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。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({
name: `Edward King ${i}`,
address: `London, Park Lane no. ${i}`,
ReactDOM.render(
Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />
, mountNode);John Brown32New York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkJim Green40London ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkJohn Brown32Jim Green40对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 scroll.x 配合使用。若列头与内容不对齐或出现列重复，请指定列的宽度 width。建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x。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="#">actiona>,
const data = [{
name: 'John Brown',
address: 'New York Park',
name: 'Jim Green',
address: 'London Park',
ReactDOM.render(Table columns={columns} dataSource={data} scroll={{ x: 1300 }} />, mountNode);适合同时展示有大量数据和数据列。若列头与内容不对齐或出现列重复，请指定列的宽度 width。建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x。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="#">actiona>,
const data = [];
for (let i = 0; i & 100; i++) {
data.push({
name: `Edrward ${i}`,
address: `London Park no. ${i}`,
ReactDOM.render(Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />, mountNode);AddressCompany AddressCompany NameStreetBlockBuildingDoor No.John Brown1Lake ParkC2035Lake Street 42SoftLake CoMJohn Brown2Lake ParkC2035Lake Street 42SoftLake CoMJohn Brown3Lake ParkC2035Lake Street 42SoftLake CoMJohn Brown4Lake ParkC2035Lake Street 42SoftLake CoMJohn Brown5Lake ParkC2035Lake Street 42SoftLake CoMJohn Brown6Lake ParkC2035Lake Street 42SoftLake CoMJohn Brown7Lake ParkC2035Lake Street 42SoftLake CoMJohn Brown8Lake ParkC2035Lake Street 42SoftLake CoMJohn Brown9Lake ParkC2035Lake Street 42SoftLake CoMJohn Brown10Lake ParkC2035Lake Street 42SoftLake CoMJohn BrownJohn BrownJohn BrownJohn BrownJohn BrownJohn BrownJohn BrownJohn BrownJohn BrownJohn BrownMMMMMMMMMMcolumns[n] 可以内嵌 children，以渲染分组表头。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({
name: 'John Brown',
age: i + 1,
street: 'Lake Park',
building: 'C',
number: 2035,
companyAddress: 'Lake Street 42',
companyName: 'SoftLake Co',
gender: 'M',
ReactDOM.render(
columns={columns}
dataSource={data}
size="middle"
scroll={{ x: '130%', y: 240 }}
, mountNode);AddEdward King 032London, Park Lane no. 0Edward King 132London, Park Lane no. 1带单元格编辑功能的表格。import { Table, Input, Icon, Button, Popconfirm } from 'antd';
class EditableCell extends React.Component {
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;
div className="editable-cell">
editable ?
div className="editable-cell-input-wrapper">
value={value}
onChange={this.handleChange}
onPressEnter={this.check}
type="check"
className="editable-cell-icon-check"
onClick={this.check}
div className="editable-cell-text-wrapper">
{value || ' '}
type="edit"
className="editable-cell-icon"
onClick={this.edit}
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) => {
this.state.dataSource.length > 1 ?
Popconfirm title="Sure to delete?" onConfirm={() => this.onDelete(record.key)}>
a href="#">Deletea>
Popconfirm>
this.state = {
dataSource: [{
name: 'Edward King 0',
age: '32',
address: 'London, Park Lane no. 0',
name: 'Edward King 1',
age: '32',
address: 'London, Park Lane no. 1',
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}`,
address: `London, Park Lane no. ${count}`,
this.setState({
dataSource: [...dataSource, newData],
count: count + 1,
render() {
const { dataSource } = this.state;
const columns = this.columns;
Button className="editable-add-btn" onClick={this.handleAdd}>AddButton>
Table bordered dataSource={dataSource} columns={columns} />
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;
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;
}Edrward 032London Park no. 0Edrward 132London Park no. 1Edrward 232London Park no. 2Edrward 332London Park no. 3Edrward 432London Park no. 4Edrward 532London Park no. 5Edrward 632London Park no. 6Edrward 732London Park no. 7Edrward 832London Park no. 8Edrward 932London 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}`,
address: `London Park no. ${i}`,
const EditableCell = ({ editable, value, onChange }) => (
? Input style={{ margin: '-5px 0' }} value={value} onChange={e => onChange(e.target.value)} />
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;
div className="editable-row-operations">
editable ?
a onClick={() => this.save(record.key)}>Savea>
Popconfirm title="Sure to cancel?" onConfirm={() => this.cancel(record.key)}>
a>Cancela>
Popconfirm>
: a onClick={() => this.edit(record.key)}>Edita>
this.state = { data };
this.cacheData = data.map(item => ({ ...item }));
renderColumns(text, record, column) {
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;
}ScreemiOS10.3.4.5654500Jack 23:12:00ScreemiOS10.3.4.5654500Jack 23:12:00ScreemiOS10.3.4.5654500Jack 23:12:00展示每行数据更详细的信息。import { Table, Badge, Menu, Dropdown, Icon } from 'antd';
const menu = (
Menu.Item>
Menu.Item>
Menu.Item>
Menu.Item>
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" />Finishedspan> },
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
title: 'Action',
dataIndex: 'operation',
key: 'operation',
render: () => (
span className="table-operation">
a href="#">Pausea>
a href="#">Stopa>
Dropdown overlay={menu}>
a href="#">
More Icon type="down" />
const data = [];
for (let i = 0; i & 3; ++i) {
data.push({
date: ' 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
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="#">Publisha> },
const data = [];
for (let i = 0; i & 3; ++i) {
data.push({
name: 'Screem',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: ' 23:12:00',
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;
}BorderedloadingPaginationTitleExpandableCheckboxSizeDefaultMiddleSmallHere is title12New York No. 1 Lake Park22New York No. 2 Lake Park32New York No. 3 Lake Park42New York No. 4 Lake Park52New York No. 5 Lake Park62New York No. 6 Lake Park72New York No. 7 Lake Park82New York No. 8 Lake Park92New York No. 9 Lake Park102New York No. 10 Lake Park选择不同配置组合查看效果。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) => (
a href="#">Action 一 {record.name}a>
span className="ant-divider" />
a href="#">Deletea>
span className="ant-divider" />
a href="#" className="ant-dropdown-link">
More actions Icon type="down" />
const data = [];
for (let i = 1; i &= 10; i++) {
data.push({
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 {
bordered: false,
loading: false,
pagination: true,
size: 'default',
expandedRowRender,
showHeader,
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;
div className="components-table-demo-control-bar">
Form layout="inline">
FormItem label="Bordered">
Switch checked={state.bordered} onChange={this.handleToggle('bordered')} />
FormItem label="loading">
Switch checked={state.loading} onChange={this.handleToggle('loading')} />
FormItem label="Pagination">
Switch checked={state.pagination} onChange={this.handleToggle('pagination')} />
FormItem label="Title">
Switch checked={!!state.title} onChange={this.handleTitleChange} />
FormItem label="Column Header">
Switch checked={!!state.showHeader} onChange={this.handleHeaderChange} />
FormItem label="Footer">
Switch checked={!!state.footer} onChange={this.handleFooterChange} />
FormItem label="Expandable">
Switch checked={!!state.expandedRowRender} onChange={this.handleExpandChange} />
FormItem label="Checkbox">
Switch checked={!!state.rowSelection} onChange={this.handleRowSelectionChange} />
FormItem label="Fixed Header">
Switch checked={!!state.scroll} onChange={this.handleScollChange} />
FormItem label="Size">
Radio.Group size="default" value={state.size} onChange={this.handleSizeChange}>
Radio.Button value="default">DefaultRadio.Button>
Radio.Button value="middle">MiddleRadio.Button>
Radio.Button value="small">SmallRadio.Button>
Radio.Group>
&Table {...this.state} columns={columns} dataSource={data} />
ReactDOM.render(Demo />, mountNode);APITable参数说明类型默认值bordered是否展示外边框和列边框booleanfalsecolumns表格列的配置描述，具体项见下表[]-dataSource数据数组any[]defaultExpandAllRows初始时，是否展开所有行booleanfalsedefaultExpandedRowKeys默认展开的行string[]-expandedRowKeys展开的行，控制属性string[]-expandedRowRender额外的展开行Function(record):ReactNode-footer表格尾部Function(currentPageData)indentSize展示树形数据时，每层缩进的宽度，以 px 为单位number15loading页面是否加载中boolean| ()falselocale默认文案设置，目前包括排序、过滤、空数据文案objectfilterConfirm: '确定'
filterReset: '重置'
emptyText: '暂无数据'
pagination分页器，配置项参考 ，设为 false 时不展示和进行分页objectrowClassName表格行的类名Function(record, index):string-rowKey表格行 key 的取值，可以是字符串或一个函数string|Function(record):string'key'rowSelection列表项是否可选择，objectnullscroll横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{{ x: true, y: 300 }}object-showHeader是否显示表头booleantruesize正常或迷你类型，default or smallstringdefaulttitle表格标题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列的 classNamestring-colSpan表头列合并,设置为 0 时，不渲染numberdataIndex列数据在数据项中对应的 key，支持 a.b.c 的嵌套写法string-filterDropdown可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互ReactNode-filterDropdownVisible用于控制自定义筛选菜单是否可见boolean-filtered标识数据是否经过过滤，筛选图标会高亮booleanfalsefilteredValue筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组string[]-filterIcon自定义 fiter 图标。ReactNodefalsefilterMultiple是否多选booleantruefilters表头的筛选菜单项object[]-fixed列是否固定，可选 true(等效于 left) 'left' 'right'boolean|stringfalsekeyReact 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性string-render生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格Function(text, record, index) {}-sorter排序函数，本地排序使用一个函数(参考
的 compareFunction)，需要服务端排序可设为 trueFunction|boolean-sortOrder排序的受控属性，外界可用此控制列的排序，可设置为 'ascend' 'descend' falseboolean|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去掉『全选』『反选』两个默认选项booleanfalseselectedRowKeys指定选中项的 key 数组，需要和 onChange 进行配合string[][]selections自定义选择项 , 设为 true 时使用默认选择项object[]|booleantruetype多选/单选，checkbox or radiostringcheckboxonChange选中项发生变化的时的回调Function(selectedRowKeys, selectedRows)-onSelect用户手动选择/取消选择某列的回调Function(record, selected, selectedRows)-onSelectAll用户手动选择/取消选择所有列的回调Function(selected, selectedRows, changeRows)-onSelectInvert用户手动选择反选的回调Function(selectedRows)-selection参数说明类型默认值keyReact 需要的 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: TableColumnConfigIUser>[] = [{
key: 'name',
title: 'Name',
dataIndex: 'name',
const data: IUser[] = [{
name: 'Jack',
class UserTable extends TableIUser> {}
UserTable columns={columns} dataSource={data} />
class NameColumn extends Table.ColumnIUser> {}
UserTable dataSource={data}>
NameColumn key="name" title="Name" dataIndex="name" />
UserTable>注意按照 ，所有的组件数组必须绑定 key。在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。
return Table rowKey="uid" />;
return Table rowKey={record => record.uid} />;}