home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-16 16:26:45 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
e514bde0677133a8fa65eeb8060761a74fbceced
ant-design/components/table-cn/index.html
T
乐仪 e514bde067 Updates
2017-03-11 12:51:12 +08:00

2013 lines
638 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
<meta name="description" content="A set of high-quality React components">
<meta name="description" content="One of best React UI library for enterprise background">
<title>Ant Design - A UI Design Language</title>
<script>
(function() {
function isLocalStorageNameSupported() {
var testKey = 'test';
var storage = window.localStorage;
try {
storage.setItem(testKey, '1');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
var pathname = location.pathname;
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.startsWith('/') ? path : '/' + path;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
// 兼容旧的 URL， `?locale=...`
var queryString = location.search;
if (queryString) {
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig && !isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
// safari is 'zh-cn', while other browser is 'zh-CN';
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
}
}
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
})()
</script>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index.css"/>
<style id="nprogress-style">
#nprogress { display: none }
</style>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="1871514739"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/index-cn" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">搜索组件...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">EN</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.8.1" style="display:block;opacity:1;" data-reactid="28">2.8.1</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/index-cn" data-reactid="33"><span data-reactid="34">首页</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="35"><a href="/docs/spec/introduce-cn" data-reactid="36"><span data-reactid="37">规范</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="38"><a href="/docs/react/introduce-cn" data-reactid="39"><span data-reactid="40">组件</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation-cn" data-reactid="42"><span data-reactid="43">模式</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download-cn" data-reactid="45"><span data-reactid="46">资源</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/react/introduce-cn" data-reactid="52">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/react/getting-started-cn" data-reactid="54">快速上手</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/react/practical-projects-cn" data-reactid="56">项目实战</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="57"><a href="/docs/react/use-with-create-react-app-cn" data-reactid="58">在 create-react-app 中使用</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="59"><a href="/docs/react/customize-theme-cn" data-reactid="60">定制主题</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/changelog-cn" data-reactid="62">更新日志</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/react/recommendation-cn" data-reactid="64">社区精选组件</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="https://github.com/websemantics/awesome-ant-design" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="66"><!-- react-text: 67 -->Awesome Ant Design<!-- /react-text --><!-- react-text: 68 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="69"></i></a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="70"><a href="//github.com/ant-design/intl-example" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="71"><!-- react-text: 72 -->i18n 方案<!-- /react-text --><!-- react-text: 73 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="74"></i></a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="75"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="76"><h4 data-reactid="77">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="78"><li class=" ant-menu-item-group" data-reactid="79"><div class="ant-menu-item-group-title" data-reactid="80">General</div><ul class="ant-menu-item-group-list" data-reactid="81"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="82"><a href="/components/button-cn/" data-reactid="83"><span data-reactid="84">Button</span><span class="chinese" data-reactid="85">按钮</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="86"><a href="/components/icon-cn/" data-reactid="87"><span data-reactid="88">Icon</span><span class="chinese" data-reactid="89">图标</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="90"><div class="ant-menu-item-group-title" data-reactid="91">Layout</div><ul class="ant-menu-item-group-list" data-reactid="92"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/components/grid-cn/" data-reactid="94"><span data-reactid="95">Grid</span><span class="chinese" data-reactid="96">栅格</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="97"><a href="/components/layout-cn/" data-reactid="98"><span data-reactid="99">Layout</span><span class="chinese" data-reactid="100">布局</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="101"><div class="ant-menu-item-group-title" data-reactid="102">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="103"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="104"><a href="/components/affix-cn/" data-reactid="105"><span data-reactid="106">Affix</span><span class="chinese" data-reactid="107">固钉</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="108"><a href="/components/breadcrumb-cn/" data-reactid="109"><span data-reactid="110">Breadcrumb</span><span class="chinese" data-reactid="111">面包屑</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="112"><a href="/components/back-top-cn/" data-reactid="113"><span data-reactid="114">BackTop</span><span class="chinese" data-reactid="115">回到顶部</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="116"><a href="/components/dropdown-cn/" data-reactid="117"><span data-reactid="118">Dropdown</span><span class="chinese" data-reactid="119">下拉菜单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="120"><a href="/components/menu-cn/" data-reactid="121"><span data-reactid="122">Menu</span><span class="chinese" data-reactid="123">导航菜单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="124"><a href="/components/pagination-cn/" data-reactid="125"><span data-reactid="126">Pagination</span><span class="chinese" data-reactid="127">分页</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="128"><a href="/components/steps-cn/" data-reactid="129"><span data-reactid="130">Steps</span><span class="chinese" data-reactid="131">步骤条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="132"><a href="/components/tabs-cn/" data-reactid="133"><span data-reactid="134">Tabs</span><span class="chinese" data-reactid="135">标签页</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="136"><div class="ant-menu-item-group-title" data-reactid="137">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="138"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="139"><a href="/components/auto-complete-cn/" data-reactid="140"><span data-reactid="141">AutoComplete</span><span class="chinese" data-reactid="142">自动完成</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="143"><a href="/components/cascader-cn/" data-reactid="144"><span data-reactid="145">Cascader</span><span class="chinese" data-reactid="146">级联选择</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="147"><a href="/components/checkbox-cn/" data-reactid="148"><span data-reactid="149">Checkbox</span><span class="chinese" data-reactid="150">多选框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="151"><a href="/components/date-picker-cn/" data-reactid="152"><span data-reactid="153">DatePicker</span><span class="chinese" data-reactid="154">日期选择框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="155"><a href="/components/form-cn/" data-reactid="156"><span data-reactid="157">Form</span><span class="chinese" data-reactid="158">表单</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="159"><a href="/components/input-cn/" data-reactid="160"><span data-reactid="161">Input</span><span class="chinese" data-reactid="162">输入框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="163"><a href="/components/input-number-cn/" data-reactid="164"><span data-reactid="165">InputNumber</span><span class="chinese" data-reactid="166">数字输入框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="167"><a href="/components/mention-cn/" data-reactid="168"><span data-reactid="169">Mention</span><span class="chinese" data-reactid="170">提及</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="171"><a href="/components/rate-cn/" data-reactid="172"><span data-reactid="173">Rate</span><span class="chinese" data-reactid="174">评分</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="175"><a href="/components/radio-cn/" data-reactid="176"><span data-reactid="177">Radio</span><span class="chinese" data-reactid="178">单选框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="179"><a href="/components/select-cn/" data-reactid="180"><span data-reactid="181">Select</span><span class="chinese" data-reactid="182">选择器</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="183"><a href="/components/slider-cn/" data-reactid="184"><span data-reactid="185">Slider</span><span class="chinese" data-reactid="186">滑动输入条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="187"><a href="/components/switch-cn/" data-reactid="188"><span data-reactid="189">Switch</span><span class="chinese" data-reactid="190">开关</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="191"><a href="/components/tree-select-cn/" data-reactid="192"><span data-reactid="193">TreeSelect</span><span class="chinese" data-reactid="194">树选择</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="195"><a href="/components/time-picker-cn/" data-reactid="196"><span data-reactid="197">TimePicker</span><span class="chinese" data-reactid="198">时间选择框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="199"><a href="/components/transfer-cn/" data-reactid="200"><span data-reactid="201">Transfer</span><span class="chinese" data-reactid="202">穿梭框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="203"><a href="/components/upload-cn/" data-reactid="204"><span data-reactid="205">Upload</span><span class="chinese" data-reactid="206">上传</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="207"><div class="ant-menu-item-group-title" data-reactid="208">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="209"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="210"><a href="/components/badge-cn/" data-reactid="211"><span data-reactid="212">Badge</span><span class="chinese" data-reactid="213">徽标数</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="214"><a href="/components/calendar-cn/" data-reactid="215"><span data-reactid="216">Calendar</span><span class="chinese" data-reactid="217">日历</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="218"><a href="/components/card-cn/" data-reactid="219"><span data-reactid="220">Card</span><span class="chinese" data-reactid="221">卡片</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="222"><a href="/components/carousel-cn/" data-reactid="223"><span data-reactid="224">Carousel</span><span class="chinese" data-reactid="225">走马灯</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="226"><a href="/components/collapse-cn/" data-reactid="227"><span data-reactid="228">Collapse</span><span class="chinese" data-reactid="229">折叠面板</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="230"><a href="/components/popover-cn/" data-reactid="231"><span data-reactid="232">Popover</span><span class="chinese" data-reactid="233">气泡卡片</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="234"><a href="/components/tooltip-cn/" data-reactid="235"><span data-reactid="236">Tooltip</span><span class="chinese" data-reactid="237">文字提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="238"><a href="/components/table-cn/" data-reactid="239"><span data-reactid="240">Table</span><span class="chinese" data-reactid="241">表格</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="242"><a href="/components/tag-cn/" data-reactid="243"><span data-reactid="244">Tag</span><span class="chinese" data-reactid="245">标签</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="246"><a href="/components/timeline-cn/" data-reactid="247"><span data-reactid="248">Timeline</span><span class="chinese" data-reactid="249">时间轴</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="250"><a href="/components/tree-cn/" data-reactid="251"><span data-reactid="252">Tree</span><span class="chinese" data-reactid="253">树形控件</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="254"><div class="ant-menu-item-group-title" data-reactid="255">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="256"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="257"><a href="/components/alert-cn/" data-reactid="258"><span data-reactid="259">Alert</span><span class="chinese" data-reactid="260">警告提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="261"><a href="/components/modal-cn/" data-reactid="262"><span data-reactid="263">Modal</span><span class="chinese" data-reactid="264">对话框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="265"><a href="/components/message-cn/" data-reactid="266"><span data-reactid="267">Message</span><span class="chinese" data-reactid="268">全局提示</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="269"><a href="/components/notification-cn/" data-reactid="270"><span data-reactid="271">Notification</span><span class="chinese" data-reactid="272">通知提醒框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="273"><a href="/components/progress-cn/" data-reactid="274"><span data-reactid="275">Progress</span><span class="chinese" data-reactid="276">进度条</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="277"><a href="/components/popconfirm-cn/" data-reactid="278"><span data-reactid="279">Popconfirm</span><span class="chinese" data-reactid="280">气泡确认框</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="281"><a href="/components/spin-cn/" data-reactid="282"><span data-reactid="283">Spin</span><span class="chinese" data-reactid="284">加载中</span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="285"><div class="ant-menu-item-group-title" data-reactid="286">Other</div><ul class="ant-menu-item-group-list" data-reactid="287"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="288"><a href="/components/anchor-cn/" data-reactid="289"><span data-reactid="290">Anchor</span><span class="chinese" data-reactid="291">锚点</span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="292"><a href="/components/locale-provider-cn/" data-reactid="293"><span data-reactid="294">LocaleProvider</span><span class="chinese" data-reactid="295">国际化</span></a></li></ul></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="296"><article data-reactid="297"><div class="toc-affix" data-reactid="298"><div class="" data-reactid="299"><ul class="toc demos-anchor" data-reactid="300"><li title="基本用法" data-reactid="301"><a href="#components-table-demo-basic" data-reactid="302">基本用法</a></li><li title="JSX 风格的 API" data-reactid="303"><a href="#components-table-demo-jsx" data-reactid="304">JSX 风格的 API</a></li><li title="可选择" data-reactid="305"><a href="#components-table-demo-row-selection" data-reactid="306">可选择</a></li><li title="选择和操作" data-reactid="307"><a href="#components-table-demo-row-selection-and-operation" data-reactid="308">选择和操作</a></li><li title="自定义选择项" data-reactid="309"><a href="#components-table-demo-row-selection-custom" data-reactid="310">自定义选择项</a></li><li title="可控的筛选和排序" data-reactid="311"><a href="#components-table-demo-reset-filter" data-reactid="312">可控的筛选和排序</a></li><li title="筛选和排序" data-reactid="313"><a href="#components-table-demo-head" data-reactid="314">筛选和排序</a></li><li title="自定义筛选菜单" data-reactid="315"><a href="#components-table-demo-custom-filter-panel" data-reactid="316">自定义筛选菜单</a></li><li title="远程加载数据" data-reactid="317"><a href="#components-table-demo-ajax" data-reactid="318">远程加载数据</a></li><li title="紧凑型" data-reactid="319"><a href="#components-table-demo-size" data-reactid="320">紧凑型</a></li><li title="带边框" data-reactid="321"><a href="#components-table-demo-bordered" data-reactid="322">带边框</a></li><li title="可展开" data-reactid="323"><a href="#components-table-demo-expand" data-reactid="324">可展开</a></li><li title="表格行/列合并" data-reactid="325"><a href="#components-table-demo-colspan-rowspan" data-reactid="326">表格行/列合并</a></li><li title="树形数据展示" data-reactid="327"><a href="#components-table-demo-expand-children" data-reactid="328">树形数据展示</a></li><li title="固定表头" data-reactid="329"><a href="#components-table-demo-fixed-header" data-reactid="330">固定表头</a></li><li title="固定列" data-reactid="331"><a href="#components-table-demo-fixed-columns" data-reactid="332">固定列</a></li><li title="固定头和列" data-reactid="333"><a href="#components-table-demo-fixed-columns-header" data-reactid="334">固定头和列</a></li><li title="表头分组" data-reactid="335"><a href="#components-table-demo-grouping-columns" data-reactid="336">表头分组</a></li><li title="可编辑单元格" data-reactid="337"><a href="#components-table-demo-edit-cell" data-reactid="338">可编辑单元格</a></li><li title="可编辑行" data-reactid="339"><a href="#components-table-demo-edit-row" data-reactid="340">可编辑行</a></li><li title="嵌套子表格" data-reactid="341"><a href="#components-table-demo-nested-table" data-reactid="342">嵌套子表格</a></li><li title="动态控制表格属性" data-reactid="343"><a href="#components-table-demo-dynamic-settings" data-reactid="344">动态控制表格属性</a></li></ul></div></div><section class="markdown" data-reactid="345"><h1 data-reactid="346"><!-- react-text: 347 -->Table<!-- /react-text --><span class="subtitle" data-reactid="348">表格</span><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/index.zh-CN.md" data-reactid="349"><i class="anticon anticon-edit" data-reactid="350"></i></a></h1><section class="markdown" data-reactid="351"><p data-reactid="352"><!-- react-text: 353 -->展示行列数据。<!-- /react-text --></p><h2 id="何时使用" data-reactid="354"><span data-reactid="355"><!-- react-text: 356 -->何时使用<!-- /react-text --></span><a href="#何时使用" class="anchor" data-reactid="357">#</a></h2><ul data-reactid="358"><li data-reactid="359"><p data-reactid="360"><!-- react-text: 361 -->当有大量结构化的数据需要展现时；<!-- /react-text --></p></li><li data-reactid="362"><p data-reactid="363"><!-- react-text: 364 -->当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。<!-- /react-text --></p></li></ul><h2 id="如何使用" data-reactid="365"><span data-reactid="366"><!-- react-text: 367 -->如何使用<!-- /react-text --></span><a href="#如何使用" class="anchor" data-reactid="368">#</a></h2><p data-reactid="369"><!-- react-text: 370 -->指定表格的数据源 <!-- /react-text --><code data-reactid="371"><!-- react-text: 372 -->dataSource<!-- /react-text --></code><!-- react-text: 373 --> 为一个数组。<!-- /react-text --></p><pre class="language-jsx" data-reactid="374"><code data-reactid="375"><span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'胡彦斌'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'西湖区湖底公园1号'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'胡彦祖'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'西湖区湖底公园1号'</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'姓名'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'年龄'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'住址'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dataSource<span class="token punctuation">}</span></span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span></code></pre></section><h2 data-reactid="376"><span data-reactid="377">代码演示</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="378"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="379"><div style="padding-left:8px;padding-right:8px;" class="ant-col-24 code-boxes-col-1-1" data-reactid="380"><section class="code-box" id="components-table-demo-basic" data-reactid="381"><section class="code-box-demo" data-reactid="382"><div class="ant-table-wrapper" data-reactid="383"><div class="ant-spin-nested-loading" data-reactid="384"><div class="ant-spin-container" data-reactid="385"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="386"><div class="ant-table-content" data-reactid="387"><div class="ant-table-body" data-reactid="388"><table class="" data-reactid="389"><colgroup data-reactid="390"><col data-reactid="391"/><col data-reactid="392"/><col data-reactid="393"/><col data-reactid="394"/></colgroup><thead class="ant-table-thead" data-reactid="395"><tr data-reactid="396"><th class="" data-reactid="397"><span data-reactid="398"><!-- react-text: 399 -->Name<!-- /react-text --></span></th><th class="" data-reactid="400"><span data-reactid="401"><!-- react-text: 402 -->Age<!-- /react-text --></span></th><th class="" data-reactid="403"><span data-reactid="404"><!-- react-text: 405 -->Address<!-- /react-text --></span></th><th class="" data-reactid="406"><span data-reactid="407"><!-- react-text: 408 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="409"><tr class="ant-table-row ant-table-row-level-0" data-reactid="410"><td class="" data-reactid="411"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="412"></span><!-- react-empty: 413 --><a href="#" data-reactid="414">John Brown</a></td><td class="" data-reactid="415"><!-- react-text: 416 -->32<!-- /react-text --></td><td class="" data-reactid="417"><!-- react-text: 418 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="419"><span data-reactid="420"><a href="#" data-reactid="421"><!-- react-text: 422 -->Action 一 <!-- /react-text --><!-- react-text: 423 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="424"></span><a href="#" data-reactid="425">Delete</a><span class="ant-divider" data-reactid="426"></span><a href="#" class="ant-dropdown-link" data-reactid="427"><!-- react-text: 428 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="429"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="430"><td class="" data-reactid="431"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="432"></span><!-- react-empty: 433 --><a href="#" data-reactid="434">Jim Green</a></td><td class="" data-reactid="435"><!-- react-text: 436 -->42<!-- /react-text --></td><td class="" data-reactid="437"><!-- react-text: 438 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="439"><span data-reactid="440"><a href="#" data-reactid="441"><!-- react-text: 442 -->Action 一 <!-- /react-text --><!-- react-text: 443 -->Jim Green<!-- /react-text --></a><span class="ant-divider" data-reactid="444"></span><a href="#" data-reactid="445">Delete</a><span class="ant-divider" data-reactid="446"></span><a href="#" class="ant-dropdown-link" data-reactid="447"><!-- react-text: 448 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="449"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="450"><td class="" data-reactid="451"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="452"></span><!-- react-empty: 453 --><a href="#" data-reactid="454">Joe Black</a></td><td class="" data-reactid="455"><!-- react-text: 456 -->32<!-- /react-text --></td><td class="" data-reactid="457"><!-- react-text: 458 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="459"><span data-reactid="460"><a href="#" data-reactid="461"><!-- react-text: 462 -->Action 一 <!-- /react-text --><!-- react-text: 463 -->Joe Black<!-- /react-text --></a><span class="ant-divider" data-reactid="464"></span><a href="#" data-reactid="465">Delete</a><span class="ant-divider" data-reactid="466"></span><a href="#" class="ant-dropdown-link" data-reactid="467"><!-- react-text: 468 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="469"></i></a></span></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="470"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="471"><a data-reactid="472"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="473"><a data-reactid="474">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="475"><a data-reactid="476"></a></li><!-- react-empty: 477 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="478"><div class="code-box-title" data-reactid="479"><a href="#components-table-demo-basic" data-reactid="480">基本用法</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/basic.md" data-reactid="481"><i class="anticon anticon-edit" data-reactid="482"></i></a></div><div data-reactid="483"><p data-reactid="484"><!-- react-text: 485 -->简单的表格，最后一列是各种操作。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="486"></i></section><section class="highlight-wrapper" data-reactid="487"><div class="highlight" data-reactid="488"><i class="anticon anticon-copy code-box-code-copy" data-reactid="489"></i><pre class="language-jsx" data-reactid="490"><code data-reactid="491"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> text <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'action'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Action 一 <span class="token punctuation">{</span>record<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-divider<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-divider<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-dropdown-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
More actions <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>down<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-jsx" data-reactid="492"><section class="code-box-demo" data-reactid="493"><div class="ant-table-wrapper" data-reactid="494"><div class="ant-spin-nested-loading" data-reactid="495"><div class="ant-spin-container" data-reactid="496"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="497"><div class="ant-table-content" data-reactid="498"><div class="ant-table-body" data-reactid="499"><table class="" data-reactid="500"><colgroup data-reactid="501"><col data-reactid="502"/><col data-reactid="503"/><col data-reactid="504"/><col data-reactid="505"/><col data-reactid="506"/></colgroup><thead class="ant-table-thead" data-reactid="507"><tr data-reactid="508"><th class="" colspan="2" data-reactid="509"><span data-reactid="510"><!-- react-text: 511 -->Name<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="512"><span data-reactid="513"><!-- react-text: 514 -->Age<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="515"><span data-reactid="516"><!-- react-text: 517 -->Address<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="518"><span data-reactid="519"><!-- react-text: 520 -->Action<!-- /react-text --></span></th></tr><tr data-reactid="521"><th class="" data-reactid="522"><span data-reactid="523"><!-- react-text: 524 -->First Name<!-- /react-text --></span></th><th class="" data-reactid="525"><span data-reactid="526"><!-- react-text: 527 -->Last Name<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="528"><tr class="ant-table-row ant-table-row-level-0" data-reactid="529"><td class="" data-reactid="530"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="531"></span><!-- react-empty: 532 --><!-- react-text: 533 -->John<!-- /react-text --></td><td class="" data-reactid="534"><!-- react-text: 535 -->Brown<!-- /react-text --></td><td class="" data-reactid="536"><!-- react-text: 537 -->32<!-- /react-text --></td><td class="" data-reactid="538"><!-- react-text: 539 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="540"><span data-reactid="541"><a href="#" data-reactid="542"><!-- react-text: 543 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="544"></span><a href="#" data-reactid="545">Delete</a><span class="ant-divider" data-reactid="546"></span><a href="#" class="ant-dropdown-link" data-reactid="547"><!-- react-text: 548 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="549"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="550"><td class="" data-reactid="551"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="552"></span><!-- react-empty: 553 --><!-- react-text: 554 -->Jim<!-- /react-text --></td><td class="" data-reactid="555"><!-- react-text: 556 -->Green<!-- /react-text --></td><td class="" data-reactid="557"><!-- react-text: 558 -->42<!-- /react-text --></td><td class="" data-reactid="559"><!-- react-text: 560 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="561"><span data-reactid="562"><a href="#" data-reactid="563"><!-- react-text: 564 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="565"></span><a href="#" data-reactid="566">Delete</a><span class="ant-divider" data-reactid="567"></span><a href="#" class="ant-dropdown-link" data-reactid="568"><!-- react-text: 569 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="570"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="571"><td class="" data-reactid="572"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="573"></span><!-- react-empty: 574 --><!-- react-text: 575 -->Joe<!-- /react-text --></td><td class="" data-reactid="576"><!-- react-text: 577 -->Black<!-- /react-text --></td><td class="" data-reactid="578"><!-- react-text: 579 -->32<!-- /react-text --></td><td class="" data-reactid="580"><!-- react-text: 581 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="582"><span data-reactid="583"><a href="#" data-reactid="584"><!-- react-text: 585 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="586"></span><a href="#" data-reactid="587">Delete</a><span class="ant-divider" data-reactid="588"></span><a href="#" class="ant-dropdown-link" data-reactid="589"><!-- react-text: 590 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="591"></i></a></span></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="592"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="593"><a data-reactid="594"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="595"><a data-reactid="596">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="597"><a data-reactid="598"></a></li><!-- react-empty: 599 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="600"><div class="code-box-title" data-reactid="601"><a href="#components-table-demo-jsx" data-reactid="602">JSX 风格的 API</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/jsx.md" data-reactid="603"><i class="anticon anticon-edit" data-reactid="604"></i></a></div><div data-reactid="605"><p data-reactid="606"><!-- react-text: 607 -->使用 JSX 风格的 API（2.5.0 以后引入）<!-- /react-text --></p><blockquote data-reactid="608"><p data-reactid="609"><!-- react-text: 610 -->这个只是一个描述 <!-- /react-text --><code data-reactid="611"><!-- react-text: 612 -->columns<!-- /react-text --></code><!-- react-text: 613 --> 的语法糖，所以你不能用其他组件去包裹 <!-- /react-text --><code data-reactid="614"><!-- react-text: 615 -->Column<!-- /react-text --></code><!-- react-text: 616 --> 和 <!-- /react-text --><code data-reactid="617"><!-- react-text: 618 -->ColumnGroup<!-- /react-text --></code><!-- react-text: 619 -->。<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="620"></i></section><section class="highlight-wrapper" data-reactid="621"><div class="highlight" data-reactid="622"><i class="anticon anticon-copy code-box-code-copy" data-reactid="623"></i><pre class="language-jsx" data-reactid="624"><code data-reactid="625"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> Column<span class="token punctuation">,</span> ColumnGroup <span class="token punctuation">}</span> <span class="token operator">=</span> Table<span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
firstName<span class="token punctuation">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span>
lastName<span class="token punctuation">:</span> <span class="token string">'Brown'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
firstName<span class="token punctuation">:</span> <span class="token string">'Jim'</span><span class="token punctuation">,</span>
lastName<span class="token punctuation">:</span> <span class="token string">'Green'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
firstName<span class="token punctuation">:</span> <span class="token string">'Joe'</span><span class="token punctuation">,</span>
lastName<span class="token punctuation">:</span> <span class="token string">'Black'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ColumnGroup</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>First</span> <span class="token attr-name">Name"</span>
<span class="token attr-name">dataIndex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>firstName<span class="token punctuation">"</span></span>
<span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>firstName<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Last</span> <span class="token attr-name">Name"</span>
<span class="token attr-name">dataIndex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lastName<span class="token punctuation">"</span></span>
<span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lastName<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ColumnGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Age<span class="token punctuation">"</span></span>
<span class="token attr-name">dataIndex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>age<span class="token punctuation">"</span></span>
<span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>age<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Address<span class="token punctuation">"</span></span>
<span class="token attr-name">dataIndex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>address<span class="token punctuation">"</span></span>
<span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>address<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Column</span>
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Action<span class="token punctuation">"</span></span>
<span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>action<span class="token punctuation">"</span></span>
<span class="token attr-name">render</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Action 一 <span class="token punctuation">{</span>record<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-divider<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-divider<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-dropdown-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
More actions <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>down<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Table</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-row-selection" data-reactid="626"><section class="code-box-demo" data-reactid="627"><div class="ant-table-wrapper" data-reactid="628"><div class="ant-spin-nested-loading" data-reactid="629"><div class="ant-spin-container" data-reactid="630"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="631"><div class="ant-table-content" data-reactid="632"><div class="ant-table-body" data-reactid="633"><table class="" data-reactid="634"><colgroup data-reactid="635"><col data-reactid="636"/><col data-reactid="637"/><col data-reactid="638"/><col data-reactid="639"/></colgroup><thead class="ant-table-thead" data-reactid="640"><tr data-reactid="641"><th class="ant-table-selection-column" data-reactid="642"><span data-reactid="643"><div class="ant-table-selection" data-reactid="644"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="645"><span class="ant-checkbox" data-reactid="646"><input type="checkbox" class="ant-checkbox-input" data-reactid="647"/><span class="ant-checkbox-inner" data-reactid="648"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="649"><i class="anticon anticon-down" data-reactid="650"></i></div></div></span></th><th class="" data-reactid="651"><span data-reactid="652"><!-- react-text: 653 -->Name<!-- /react-text --></span></th><th class="" data-reactid="654"><span data-reactid="655"><!-- react-text: 656 -->Age<!-- /react-text --></span></th><th class="" data-reactid="657"><span data-reactid="658"><!-- react-text: 659 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="660"><tr class="ant-table-row ant-table-row-level-0" data-reactid="661"><td class="ant-table-selection-column" data-reactid="662"><span data-reactid="663"><label class="ant-checkbox-wrapper" data-reactid="664"><span class="ant-checkbox" data-reactid="665"><input type="checkbox" class="ant-checkbox-input" data-reactid="666"/><span class="ant-checkbox-inner" data-reactid="667"></span></span></label></span></td><td class="" data-reactid="668"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="669"></span><!-- react-empty: 670 --><a href="#" data-reactid="671">John Brown</a></td><td class="" data-reactid="672"><!-- react-text: 673 -->32<!-- /react-text --></td><td class="" data-reactid="674"><!-- react-text: 675 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="676"><td class="ant-table-selection-column" data-reactid="677"><span data-reactid="678"><label class="ant-checkbox-wrapper" data-reactid="679"><span class="ant-checkbox" data-reactid="680"><input type="checkbox" class="ant-checkbox-input" data-reactid="681"/><span class="ant-checkbox-inner" data-reactid="682"></span></span></label></span></td><td class="" data-reactid="683"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="684"></span><!-- react-empty: 685 --><a href="#" data-reactid="686">Jim Green</a></td><td class="" data-reactid="687"><!-- react-text: 688 -->42<!-- /react-text --></td><td class="" data-reactid="689"><!-- react-text: 690 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="691"><td class="ant-table-selection-column" data-reactid="692"><span data-reactid="693"><label class="ant-checkbox-wrapper" data-reactid="694"><span class="ant-checkbox" data-reactid="695"><input type="checkbox" class="ant-checkbox-input" data-reactid="696"/><span class="ant-checkbox-inner" data-reactid="697"></span></span></label></span></td><td class="" data-reactid="698"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="699"></span><!-- react-empty: 700 --><a href="#" data-reactid="701">Joe Black</a></td><td class="" data-reactid="702"><!-- react-text: 703 -->32<!-- /react-text --></td><td class="" data-reactid="704"><!-- react-text: 705 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="706"><td class="ant-table-selection-column" data-reactid="707"><span data-reactid="708"><label class="ant-checkbox-wrapper" data-reactid="709"><span class="ant-checkbox ant-checkbox-disabled" data-reactid="710"><input type="checkbox" disabled="" class="ant-checkbox-input" data-reactid="711"/><span class="ant-checkbox-inner" data-reactid="712"></span></span></label></span></td><td class="" data-reactid="713"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="714"></span><!-- react-empty: 715 --><a href="#" data-reactid="716">Disabled User</a></td><td class="" data-reactid="717"><!-- react-text: 718 -->99<!-- /react-text --></td><td class="" data-reactid="719"><!-- react-text: 720 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="721"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="722"><a data-reactid="723"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="724"><a data-reactid="725">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="726"><a data-reactid="727"></a></li><!-- react-empty: 728 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="729"><div class="code-box-title" data-reactid="730"><a href="#components-table-demo-row-selection" data-reactid="731">可选择</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/row-selection.md" data-reactid="732"><i class="anticon anticon-edit" data-reactid="733"></i></a></div><div data-reactid="734"><p data-reactid="735"><!-- react-text: 736 -->第一列是联动的选择框。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="737"></i></section><section class="highlight-wrapper" data-reactid="738"><div class="highlight" data-reactid="739"><i class="anticon anticon-copy code-box-code-copy" data-reactid="740"></i><pre class="language-jsx" data-reactid="741"><code data-reactid="742"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> text <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'4'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Disabled User'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">99</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">// rowSelection object indicates the need for row selection</span>
<span class="token keyword">const</span> rowSelection <span class="token operator">=</span> <span class="token punctuation">{</span>
onChange<span class="token punctuation">:</span> <span class="token punctuation">(</span>selectedRowKeys<span class="token punctuation">,</span> selectedRows<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`selectedRowKeys: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selectedRowKeys<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span> <span class="token string">'selectedRows: '</span><span class="token punctuation">,</span> selectedRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
onSelect<span class="token punctuation">:</span> <span class="token punctuation">(</span>record<span class="token punctuation">,</span> selected<span class="token punctuation">,</span> selectedRows<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>record<span class="token punctuation">,</span> selected<span class="token punctuation">,</span> selectedRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
onSelectAll<span class="token punctuation">:</span> <span class="token punctuation">(</span>selected<span class="token punctuation">,</span> selectedRows<span class="token punctuation">,</span> changeRows<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>selected<span class="token punctuation">,</span> selectedRows<span class="token punctuation">,</span> changeRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
getCheckboxProps<span class="token punctuation">:</span> record <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
disabled<span class="token punctuation">:</span> record<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">'Disabled User'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// Column configuration not to be checked</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">rowSelection</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rowSelection<span class="token punctuation">}</span></span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-row-selection-and-operation" data-reactid="743"><section class="code-box-demo" data-reactid="744"><div data-reactid="745"><div style="margin-bottom:16px;" data-reactid="746"><button disabled="" type="button" class="ant-btn ant-btn-primary" data-reactid="747"><span data-reactid="748">Reload</span></button><span style="margin-left:8px;" data-reactid="749"></span></div><div class="ant-table-wrapper" data-reactid="750"><div class="ant-spin-nested-loading" data-reactid="751"><div class="ant-spin-container" data-reactid="752"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="753"><div class="ant-table-content" data-reactid="754"><div class="ant-table-body" data-reactid="755"><table class="" data-reactid="756"><colgroup data-reactid="757"><col data-reactid="758"/><col data-reactid="759"/><col data-reactid="760"/><col data-reactid="761"/></colgroup><thead class="ant-table-thead" data-reactid="762"><tr data-reactid="763"><th class="ant-table-selection-column" data-reactid="764"><span data-reactid="765"><div class="ant-table-selection" data-reactid="766"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="767"><span class="ant-checkbox" data-reactid="768"><input type="checkbox" class="ant-checkbox-input" data-reactid="769"/><span class="ant-checkbox-inner" data-reactid="770"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="771"><i class="anticon anticon-down" data-reactid="772"></i></div></div></span></th><th class="" data-reactid="773"><span data-reactid="774"><!-- react-text: 775 -->Name<!-- /react-text --></span></th><th class="" data-reactid="776"><span data-reactid="777"><!-- react-text: 778 -->Age<!-- /react-text --></span></th><th class="" data-reactid="779"><span data-reactid="780"><!-- react-text: 781 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="782"><tr class="ant-table-row ant-table-row-level-0" data-reactid="783"><td class="ant-table-selection-column" data-reactid="784"><span data-reactid="785"><label class="ant-checkbox-wrapper" data-reactid="786"><span class="ant-checkbox" data-reactid="787"><input type="checkbox" class="ant-checkbox-input" data-reactid="788"/><span class="ant-checkbox-inner" data-reactid="789"></span></span></label></span></td><td class="" data-reactid="790"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="791"></span><!-- react-empty: 792 --><!-- react-text: 793 -->Edward King 0<!-- /react-text --></td><td class="" data-reactid="794"><!-- react-text: 795 -->32<!-- /react-text --></td><td class="" data-reactid="796"><!-- react-text: 797 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="798"><td class="ant-table-selection-column" data-reactid="799"><span data-reactid="800"><label class="ant-checkbox-wrapper" data-reactid="801"><span class="ant-checkbox" data-reactid="802"><input type="checkbox" class="ant-checkbox-input" data-reactid="803"/><span class="ant-checkbox-inner" data-reactid="804"></span></span></label></span></td><td class="" data-reactid="805"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="806"></span><!-- react-empty: 807 --><!-- react-text: 808 -->Edward King 1<!-- /react-text --></td><td class="" data-reactid="809"><!-- react-text: 810 -->32<!-- /react-text --></td><td class="" data-reactid="811"><!-- react-text: 812 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="813"><td class="ant-table-selection-column" data-reactid="814"><span data-reactid="815"><label class="ant-checkbox-wrapper" data-reactid="816"><span class="ant-checkbox" data-reactid="817"><input type="checkbox" class="ant-checkbox-input" data-reactid="818"/><span class="ant-checkbox-inner" data-reactid="819"></span></span></label></span></td><td class="" data-reactid="820"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="821"></span><!-- react-empty: 822 --><!-- react-text: 823 -->Edward King 2<!-- /react-text --></td><td class="" data-reactid="824"><!-- react-text: 825 -->32<!-- /react-text --></td><td class="" data-reactid="826"><!-- react-text: 827 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="828"><td class="ant-table-selection-column" data-reactid="829"><span data-reactid="830"><label class="ant-checkbox-wrapper" data-reactid="831"><span class="ant-checkbox" data-reactid="832"><input type="checkbox" class="ant-checkbox-input" data-reactid="833"/><span class="ant-checkbox-inner" data-reactid="834"></span></span></label></span></td><td class="" data-reactid="835"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="836"></span><!-- react-empty: 837 --><!-- react-text: 838 -->Edward King 3<!-- /react-text --></td><td class="" data-reactid="839"><!-- react-text: 840 -->32<!-- /react-text --></td><td class="" data-reactid="841"><!-- react-text: 842 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="843"><td class="ant-table-selection-column" data-reactid="844"><span data-reactid="845"><label class="ant-checkbox-wrapper" data-reactid="846"><span class="ant-checkbox" data-reactid="847"><input type="checkbox" class="ant-checkbox-input" data-reactid="848"/><span class="ant-checkbox-inner" data-reactid="849"></span></span></label></span></td><td class="" data-reactid="850"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="851"></span><!-- react-empty: 852 --><!-- react-text: 853 -->Edward King 4<!-- /react-text --></td><td class="" data-reactid="854"><!-- react-text: 855 -->32<!-- /react-text --></td><td class="" data-reactid="856"><!-- react-text: 857 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="858"><td class="ant-table-selection-column" data-reactid="859"><span data-reactid="860"><label class="ant-checkbox-wrapper" data-reactid="861"><span class="ant-checkbox" data-reactid="862"><input type="checkbox" class="ant-checkbox-input" data-reactid="863"/><span class="ant-checkbox-inner" data-reactid="864"></span></span></label></span></td><td class="" data-reactid="865"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="866"></span><!-- react-empty: 867 --><!-- react-text: 868 -->Edward King 5<!-- /react-text --></td><td class="" data-reactid="869"><!-- react-text: 870 -->32<!-- /react-text --></td><td class="" data-reactid="871"><!-- react-text: 872 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="873"><td class="ant-table-selection-column" data-reactid="874"><span data-reactid="875"><label class="ant-checkbox-wrapper" data-reactid="876"><span class="ant-checkbox" data-reactid="877"><input type="checkbox" class="ant-checkbox-input" data-reactid="878"/><span class="ant-checkbox-inner" data-reactid="879"></span></span></label></span></td><td class="" data-reactid="880"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="881"></span><!-- react-empty: 882 --><!-- react-text: 883 -->Edward King 6<!-- /react-text --></td><td class="" data-reactid="884"><!-- react-text: 885 -->32<!-- /react-text --></td><td class="" data-reactid="886"><!-- react-text: 887 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="888"><td class="ant-table-selection-column" data-reactid="889"><span data-reactid="890"><label class="ant-checkbox-wrapper" data-reactid="891"><span class="ant-checkbox" data-reactid="892"><input type="checkbox" class="ant-checkbox-input" data-reactid="893"/><span class="ant-checkbox-inner" data-reactid="894"></span></span></label></span></td><td class="" data-reactid="895"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="896"></span><!-- react-empty: 897 --><!-- react-text: 898 -->Edward King 7<!-- /react-text --></td><td class="" data-reactid="899"><!-- react-text: 900 -->32<!-- /react-text --></td><td class="" data-reactid="901"><!-- react-text: 902 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="903"><td class="ant-table-selection-column" data-reactid="904"><span data-reactid="905"><label class="ant-checkbox-wrapper" data-reactid="906"><span class="ant-checkbox" data-reactid="907"><input type="checkbox" class="ant-checkbox-input" data-reactid="908"/><span class="ant-checkbox-inner" data-reactid="909"></span></span></label></span></td><td class="" data-reactid="910"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="911"></span><!-- react-empty: 912 --><!-- react-text: 913 -->Edward King 8<!-- /react-text --></td><td class="" data-reactid="914"><!-- react-text: 915 -->32<!-- /react-text --></td><td class="" data-reactid="916"><!-- react-text: 917 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="918"><td class="ant-table-selection-column" data-reactid="919"><span data-reactid="920"><label class="ant-checkbox-wrapper" data-reactid="921"><span class="ant-checkbox" data-reactid="922"><input type="checkbox" class="ant-checkbox-input" data-reactid="923"/><span class="ant-checkbox-inner" data-reactid="924"></span></span></label></span></td><td class="" data-reactid="925"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="926"></span><!-- react-empty: 927 --><!-- react-text: 928 -->Edward King 9<!-- /react-text --></td><td class="" data-reactid="929"><!-- react-text: 930 -->32<!-- /react-text --></td><td class="" data-reactid="931"><!-- react-text: 932 -->London, Park Lane no. 9<!-- /react-text --></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="933"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="934"><a data-reactid="935"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="936"><a data-reactid="937">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="938"><a data-reactid="939">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="940"><a data-reactid="941">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="942"><a data-reactid="943">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" data-reactid="944"><a data-reactid="945">5</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="946"><a data-reactid="947"></a></li><!-- react-empty: 948 --></ul></div></div></div></div></section><section class="code-box-meta markdown" data-reactid="949"><div class="code-box-title" data-reactid="950"><a href="#components-table-demo-row-selection-and-operation" data-reactid="951">选择和操作</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/row-selection-and-operation.md" data-reactid="952"><i class="anticon anticon-edit" data-reactid="953"></i></a></div><div data-reactid="954"><p data-reactid="955"><!-- react-text: 956 -->选择后进行操作，完成后清空选择，通过 <!-- /react-text --><code data-reactid="957"><!-- react-text: 958 -->rowSelection.selectedRowKeys<!-- /react-text --></code><!-- react-text: 959 --> 来控制选中项。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="960"></i></section><section class="highlight-wrapper" data-reactid="961"><div class="highlight" data-reactid="962"><i class="anticon anticon-copy code-box-code-copy" data-reactid="963"></i><pre class="language-jsx" data-reactid="964"><code data-reactid="965"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">46</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Edward King </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`London, Park Lane no. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
selectedRowKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// Check here to configure the default column</span>
loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
start <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> loading<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">// ajax request after empty completing</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
selectedRowKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
onSelectChange <span class="token operator">=</span> <span class="token punctuation">(</span>selectedRowKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'selectedRowKeys changed: '</span><span class="token punctuation">,</span> selectedRowKeys<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selectedRowKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> loading<span class="token punctuation">,</span> selectedRowKeys <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
<span class="token keyword">const</span> rowSelection <span class="token operator">=</span> <span class="token punctuation">{</span>
selectedRowKeys<span class="token punctuation">,</span>
onChange<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>onSelectChange<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> hasSelected <span class="token operator">=</span> selectedRowKeys<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginBottom<span class="token punctuation">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>start<span class="token punctuation">}</span></span>
<span class="token attr-name">disabled</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span>hasSelected<span class="token punctuation">}</span></span> <span class="token attr-name">loading</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>loading<span class="token punctuation">}</span></span>
<span class="token punctuation">></span></span>Reload<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginLeft<span class="token punctuation">:</span> <span class="token number">8</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>hasSelected <span class="token operator">?</span> <span class="token template-string"><span class="token string">`Selected </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selectedRowKeys<span class="token punctuation">.</span>length<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> items`</span></span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">rowSelection</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rowSelection<span class="token punctuation">}</span></span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-row-selection-custom" data-reactid="966"><section class="code-box-demo" data-reactid="967"><div class="ant-table-wrapper" data-reactid="968"><div class="ant-spin-nested-loading" data-reactid="969"><div class="ant-spin-container" data-reactid="970"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="971"><div class="ant-table-content" data-reactid="972"><div class="ant-table-body" data-reactid="973"><table class="" data-reactid="974"><colgroup data-reactid="975"><col data-reactid="976"/><col data-reactid="977"/><col data-reactid="978"/><col data-reactid="979"/></colgroup><thead class="ant-table-thead" data-reactid="980"><tr data-reactid="981"><th class="ant-table-selection-column" data-reactid="982"><span data-reactid="983"><div class="ant-table-selection" data-reactid="984"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="985"><span class="ant-checkbox" data-reactid="986"><input type="checkbox" class="ant-checkbox-input" data-reactid="987"/><span class="ant-checkbox-inner" data-reactid="988"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="989"><i class="anticon anticon-down" data-reactid="990"></i></div></div></span></th><th class="" data-reactid="991"><span data-reactid="992"><!-- react-text: 993 -->Name<!-- /react-text --></span></th><th class="" data-reactid="994"><span data-reactid="995"><!-- react-text: 996 -->Age<!-- /react-text --></span></th><th class="" data-reactid="997"><span data-reactid="998"><!-- react-text: 999 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1000"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1001"><td class="ant-table-selection-column" data-reactid="1002"><span data-reactid="1003"><label class="ant-checkbox-wrapper" data-reactid="1004"><span class="ant-checkbox" data-reactid="1005"><input type="checkbox" class="ant-checkbox-input" data-reactid="1006"/><span class="ant-checkbox-inner" data-reactid="1007"></span></span></label></span></td><td class="" data-reactid="1008"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1009"></span><!-- react-empty: 1010 --><!-- react-text: 1011 -->Edward King 0<!-- /react-text --></td><td class="" data-reactid="1012"><!-- react-text: 1013 -->32<!-- /react-text --></td><td class="" data-reactid="1014"><!-- react-text: 1015 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1016"><td class="ant-table-selection-column" data-reactid="1017"><span data-reactid="1018"><label class="ant-checkbox-wrapper" data-reactid="1019"><span class="ant-checkbox" data-reactid="1020"><input type="checkbox" class="ant-checkbox-input" data-reactid="1021"/><span class="ant-checkbox-inner" data-reactid="1022"></span></span></label></span></td><td class="" data-reactid="1023"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1024"></span><!-- react-empty: 1025 --><!-- react-text: 1026 -->Edward King 1<!-- /react-text --></td><td class="" data-reactid="1027"><!-- react-text: 1028 -->32<!-- /react-text --></td><td class="" data-reactid="1029"><!-- react-text: 1030 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1031"><td class="ant-table-selection-column" data-reactid="1032"><span data-reactid="1033"><label class="ant-checkbox-wrapper" data-reactid="1034"><span class="ant-checkbox" data-reactid="1035"><input type="checkbox" class="ant-checkbox-input" data-reactid="1036"/><span class="ant-checkbox-inner" data-reactid="1037"></span></span></label></span></td><td class="" data-reactid="1038"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1039"></span><!-- react-empty: 1040 --><!-- react-text: 1041 -->Edward King 2<!-- /react-text --></td><td class="" data-reactid="1042"><!-- react-text: 1043 -->32<!-- /react-text --></td><td class="" data-reactid="1044"><!-- react-text: 1045 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1046"><td class="ant-table-selection-column" data-reactid="1047"><span data-reactid="1048"><label class="ant-checkbox-wrapper" data-reactid="1049"><span class="ant-checkbox" data-reactid="1050"><input type="checkbox" class="ant-checkbox-input" data-reactid="1051"/><span class="ant-checkbox-inner" data-reactid="1052"></span></span></label></span></td><td class="" data-reactid="1053"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1054"></span><!-- react-empty: 1055 --><!-- react-text: 1056 -->Edward King 3<!-- /react-text --></td><td class="" data-reactid="1057"><!-- react-text: 1058 -->32<!-- /react-text --></td><td class="" data-reactid="1059"><!-- react-text: 1060 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1061"><td class="ant-table-selection-column" data-reactid="1062"><span data-reactid="1063"><label class="ant-checkbox-wrapper" data-reactid="1064"><span class="ant-checkbox" data-reactid="1065"><input type="checkbox" class="ant-checkbox-input" data-reactid="1066"/><span class="ant-checkbox-inner" data-reactid="1067"></span></span></label></span></td><td class="" data-reactid="1068"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1069"></span><!-- react-empty: 1070 --><!-- react-text: 1071 -->Edward King 4<!-- /react-text --></td><td class="" data-reactid="1072"><!-- react-text: 1073 -->32<!-- /react-text --></td><td class="" data-reactid="1074"><!-- react-text: 1075 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1076"><td class="ant-table-selection-column" data-reactid="1077"><span data-reactid="1078"><label class="ant-checkbox-wrapper" data-reactid="1079"><span class="ant-checkbox" data-reactid="1080"><input type="checkbox" class="ant-checkbox-input" data-reactid="1081"/><span class="ant-checkbox-inner" data-reactid="1082"></span></span></label></span></td><td class="" data-reactid="1083"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1084"></span><!-- react-empty: 1085 --><!-- react-text: 1086 -->Edward King 5<!-- /react-text --></td><td class="" data-reactid="1087"><!-- react-text: 1088 -->32<!-- /react-text --></td><td class="" data-reactid="1089"><!-- react-text: 1090 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1091"><td class="ant-table-selection-column" data-reactid="1092"><span data-reactid="1093"><label class="ant-checkbox-wrapper" data-reactid="1094"><span class="ant-checkbox" data-reactid="1095"><input type="checkbox" class="ant-checkbox-input" data-reactid="1096"/><span class="ant-checkbox-inner" data-reactid="1097"></span></span></label></span></td><td class="" data-reactid="1098"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1099"></span><!-- react-empty: 1100 --><!-- react-text: 1101 -->Edward King 6<!-- /react-text --></td><td class="" data-reactid="1102"><!-- react-text: 1103 -->32<!-- /react-text --></td><td class="" data-reactid="1104"><!-- react-text: 1105 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1106"><td class="ant-table-selection-column" data-reactid="1107"><span data-reactid="1108"><label class="ant-checkbox-wrapper" data-reactid="1109"><span class="ant-checkbox" data-reactid="1110"><input type="checkbox" class="ant-checkbox-input" data-reactid="1111"/><span class="ant-checkbox-inner" data-reactid="1112"></span></span></label></span></td><td class="" data-reactid="1113"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1114"></span><!-- react-empty: 1115 --><!-- react-text: 1116 -->Edward King 7<!-- /react-text --></td><td class="" data-reactid="1117"><!-- react-text: 1118 -->32<!-- /react-text --></td><td class="" data-reactid="1119"><!-- react-text: 1120 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1121"><td class="ant-table-selection-column" data-reactid="1122"><span data-reactid="1123"><label class="ant-checkbox-wrapper" data-reactid="1124"><span class="ant-checkbox" data-reactid="1125"><input type="checkbox" class="ant-checkbox-input" data-reactid="1126"/><span class="ant-checkbox-inner" data-reactid="1127"></span></span></label></span></td><td class="" data-reactid="1128"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1129"></span><!-- react-empty: 1130 --><!-- react-text: 1131 -->Edward King 8<!-- /react-text --></td><td class="" data-reactid="1132"><!-- react-text: 1133 -->32<!-- /react-text --></td><td class="" data-reactid="1134"><!-- react-text: 1135 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1136"><td class="ant-table-selection-column" data-reactid="1137"><span data-reactid="1138"><label class="ant-checkbox-wrapper" data-reactid="1139"><span class="ant-checkbox" data-reactid="1140"><input type="checkbox" class="ant-checkbox-input" data-reactid="1141"/><span class="ant-checkbox-inner" data-reactid="1142"></span></span></label></span></td><td class="" data-reactid="1143"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1144"></span><!-- react-empty: 1145 --><!-- react-text: 1146 -->Edward King 9<!-- /react-text --></td><td class="" data-reactid="1147"><!-- react-text: 1148 -->32<!-- /react-text --></td><td class="" data-reactid="1149"><!-- react-text: 1150 -->London, Park Lane no. 9<!-- /react-text --></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1151"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1152"><a data-reactid="1153"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1154"><a data-reactid="1155">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="1156"><a data-reactid="1157">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="1158"><a data-reactid="1159">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="1160"><a data-reactid="1161">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" data-reactid="1162"><a data-reactid="1163">5</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="1164"><a data-reactid="1165"></a></li><!-- react-empty: 1166 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1167"><div class="code-box-title" data-reactid="1168"><a href="#components-table-demo-row-selection-custom" data-reactid="1169">自定义选择项</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/row-selection-custom.md" data-reactid="1170"><i class="anticon anticon-edit" data-reactid="1171"></i></a></div><div data-reactid="1172"><p data-reactid="1173"><!-- react-text: 1174 -->默认有全选和反选，通过 <!-- /react-text --><code data-reactid="1175"><!-- react-text: 1176 -->rowSelection.selections<!-- /react-text --></code><!-- react-text: 1177 --> 自定义选择项。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1178"></i></section><section class="highlight-wrapper" data-reactid="1179"><div class="highlight" data-reactid="1180"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1181"></i><pre class="language-jsx" data-reactid="1182"><code data-reactid="1183"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">46</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Edward King </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`London, Park Lane no. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
selectedRowKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// Check here to configure the default column</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
onSelectChange <span class="token operator">=</span> <span class="token punctuation">(</span>selectedRowKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'selectedRowKeys changed: '</span><span class="token punctuation">,</span> selectedRowKeys<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selectedRowKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> selectedRowKeys <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
<span class="token keyword">const</span> rowSelection <span class="token operator">=</span> <span class="token punctuation">{</span>
selectedRowKeys<span class="token punctuation">,</span>
onChange<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>onSelectChange<span class="token punctuation">,</span>
selections<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'odd'</span><span class="token punctuation">,</span>
text<span class="token punctuation">:</span> <span class="token string">'Select Odd Row'</span><span class="token punctuation">,</span>
onSelect<span class="token punctuation">:</span> <span class="token punctuation">(</span>changableRowKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> newSelectedRowKeys <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
newSelectedRowKeys <span class="token operator">=</span> changableRowKeys<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selectedRowKeys<span class="token punctuation">:</span> newSelectedRowKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'even'</span><span class="token punctuation">,</span>
text<span class="token punctuation">:</span> <span class="token string">'Select Even Row'</span><span class="token punctuation">,</span>
onSelect<span class="token punctuation">:</span> <span class="token punctuation">(</span>changableRowKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> newSelectedRowKeys <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
newSelectedRowKeys <span class="token operator">=</span> changableRowKeys<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selectedRowKeys<span class="token punctuation">:</span> newSelectedRowKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
onSelection<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>onSelection<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">rowSelection</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rowSelection<span class="token punctuation">}</span></span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-reset-filter" data-reactid="1184"><section class="code-box-demo" data-reactid="1185"><div data-reactid="1186"><div class="table-operations" data-reactid="1187"><button type="button" class="ant-btn" data-reactid="1188"><span data-reactid="1189">Sort age</span></button><button type="button" class="ant-btn" data-reactid="1190"><span data-reactid="1191">Clear filters</span></button><button type="button" class="ant-btn" data-reactid="1192"><span data-reactid="1193">Clear filters and sorters</span></button></div><div class="ant-table-wrapper" data-reactid="1194"><div class="ant-spin-nested-loading" data-reactid="1195"><div class="ant-spin-container" data-reactid="1196"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1197"><div class="ant-table-content" data-reactid="1198"><div class="ant-table-body" data-reactid="1199"><table class="" data-reactid="1200"><colgroup data-reactid="1201"><col data-reactid="1202"/><col data-reactid="1203"/><col data-reactid="1204"/></colgroup><thead class="ant-table-thead" data-reactid="1205"><tr data-reactid="1206"><th class="" data-reactid="1207"><span data-reactid="1208"><!-- react-text: 1209 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1210"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1211"><i class="anticon anticon-caret-up" data-reactid="1212"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1213"><i class="anticon anticon-caret-down" data-reactid="1214"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1215"></i></span></th><th class="" data-reactid="1216"><span data-reactid="1217"><!-- react-text: 1218 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1219"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1220"><i class="anticon anticon-caret-up" data-reactid="1221"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1222"><i class="anticon anticon-caret-down" data-reactid="1223"></i></span></div></span></th><th class="" data-reactid="1224"><span data-reactid="1225"><!-- react-text: 1226 -->Address<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1227"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1228"><i class="anticon anticon-caret-up" data-reactid="1229"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1230"><i class="anticon anticon-caret-down" data-reactid="1231"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1232"></i></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1233"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1234"><td class="" data-reactid="1235"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1236"></span><!-- react-empty: 1237 --><!-- react-text: 1238 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1239"><!-- react-text: 1240 -->32<!-- /react-text --></td><td class="" data-reactid="1241"><!-- react-text: 1242 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1243"><td class="" data-reactid="1244"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1245"></span><!-- react-empty: 1246 --><!-- react-text: 1247 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1248"><!-- react-text: 1249 -->42<!-- /react-text --></td><td class="" data-reactid="1250"><!-- react-text: 1251 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1252"><td class="" data-reactid="1253"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1254"></span><!-- react-empty: 1255 --><!-- react-text: 1256 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1257"><!-- react-text: 1258 -->32<!-- /react-text --></td><td class="" data-reactid="1259"><!-- react-text: 1260 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1261"><td class="" data-reactid="1262"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1263"></span><!-- react-empty: 1264 --><!-- react-text: 1265 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1266"><!-- react-text: 1267 -->32<!-- /react-text --></td><td class="" data-reactid="1268"><!-- react-text: 1269 -->London No. 2 Lake Park<!-- /react-text --></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1270"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1271"><a data-reactid="1272"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1273"><a data-reactid="1274">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1275"><a data-reactid="1276"></a></li><!-- react-empty: 1277 --></ul></div></div></div></div><style data-reactid="1278">.table-operations {
margin-bottom: 16px;
}
.table-operations > button {
margin-right: 8px;
}</style></section><section class="code-box-meta markdown" data-reactid="1279"><div class="code-box-title" data-reactid="1280"><a href="#components-table-demo-reset-filter" data-reactid="1281">可控的筛选和排序</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/reset-filter.md" data-reactid="1282"><i class="anticon anticon-edit" data-reactid="1283"></i></a></div><div data-reactid="1284"><p data-reactid="1285"><!-- react-text: 1286 -->使用受控属性对筛选和排序状态进行控制。<!-- /react-text --></p><blockquote data-reactid="1287"><ol data-reactid="1288"><li data-reactid="1289"><p data-reactid="1290"><!-- react-text: 1291 -->columns 中定义了 filteredValue 和 sortOrder 属性即视为受控模式。<!-- /react-text --></p></li><li data-reactid="1292"><p data-reactid="1293"><!-- react-text: 1294 -->只支持同时对一列进行排序，请保证只有一列的 sortOrder 属性是生效的。<!-- /react-text --></p></li><li data-reactid="1295"><p data-reactid="1296"><!-- react-text: 1297 -->务必指定 <!-- /react-text --><code data-reactid="1298"><!-- react-text: 1299 -->column.key<!-- /react-text --></code><!-- react-text: 1300 -->。<!-- /react-text --></p></li></ol></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1301"></i></section><section class="highlight-wrapper" data-reactid="1302"><div class="highlight" data-reactid="1303"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1304"></i><pre class="language-jsx" data-reactid="1305"><code data-reactid="1306"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'4'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Red'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 2 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
filteredInfo<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
sortedInfo<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
handleChange <span class="token operator">=</span> <span class="token punctuation">(</span>pagination<span class="token punctuation">,</span> filters<span class="token punctuation">,</span> sorter<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Various parameters'</span><span class="token punctuation">,</span> pagination<span class="token punctuation">,</span> filters<span class="token punctuation">,</span> sorter<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
filteredInfo<span class="token punctuation">:</span> filters<span class="token punctuation">,</span>
sortedInfo<span class="token punctuation">:</span> sorter<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
clearFilters <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> filteredInfo<span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
clearAll <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
filteredInfo<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
sortedInfo<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
setAgeSort <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
sortedInfo<span class="token punctuation">:</span> <span class="token punctuation">{</span>
order<span class="token punctuation">:</span> <span class="token string">'descend'</span><span class="token punctuation">,</span>
columnKey<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> <span class="token punctuation">{</span> sortedInfo<span class="token punctuation">,</span> filteredInfo <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
sortedInfo <span class="token operator">=</span> sortedInfo <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
filteredInfo <span class="token operator">=</span> filteredInfo <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
filters<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'Joe'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'Joe'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'Jim'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'Jim'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
filteredValue<span class="token punctuation">:</span> filteredInfo<span class="token punctuation">.</span>name <span class="token operator">||</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
onFilter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">,</span>
sorter<span class="token punctuation">:</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> a<span class="token punctuation">.</span>name<span class="token punctuation">.</span>length <span class="token operator">-</span> b<span class="token punctuation">.</span>name<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
sortOrder<span class="token punctuation">:</span> sortedInfo<span class="token punctuation">.</span>columnKey <span class="token operator">===</span> <span class="token string">'name'</span> <span class="token operator">&amp;&amp;</span> sortedInfo<span class="token punctuation">.</span>order<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
sorter<span class="token punctuation">:</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> a<span class="token punctuation">.</span>age <span class="token operator">-</span> b<span class="token punctuation">.</span>age<span class="token punctuation">,</span>
sortOrder<span class="token punctuation">:</span> sortedInfo<span class="token punctuation">.</span>columnKey <span class="token operator">===</span> <span class="token string">'age'</span> <span class="token operator">&amp;&amp;</span> sortedInfo<span class="token punctuation">.</span>order<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
filters<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'London'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'London'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'New York'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'New York'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
filteredValue<span class="token punctuation">:</span> filteredInfo<span class="token punctuation">.</span>address <span class="token operator">||</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
onFilter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>address<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">,</span>
sorter<span class="token punctuation">:</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> a<span class="token punctuation">.</span>address<span class="token punctuation">.</span>length <span class="token operator">-</span> b<span class="token punctuation">.</span>address<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
sortOrder<span class="token punctuation">:</span> sortedInfo<span class="token punctuation">.</span>columnKey <span class="token operator">===</span> <span class="token string">'address'</span> <span class="token operator">&amp;&amp;</span> sortedInfo<span class="token punctuation">.</span>order<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>table-operations<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>setAgeSort<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Sort age<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>clearFilters<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Clear filters<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>clearAll<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Clear filters and sorters<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="1307"><pre data-reactid="1308"><code class="css" data-reactid="1309"><span class="token selector"><span class="token class">.table-operations</span> </span><span class="token punctuation">{</span>
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">16</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.table-operations</span> > button </span><span class="token punctuation">{</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token number">8</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-head" data-reactid="1310"><section class="code-box-demo" data-reactid="1311"><div class="ant-table-wrapper" data-reactid="1312"><div class="ant-spin-nested-loading" data-reactid="1313"><div class="ant-spin-container" data-reactid="1314"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1315"><div class="ant-table-content" data-reactid="1316"><div class="ant-table-body" data-reactid="1317"><table class="" data-reactid="1318"><colgroup data-reactid="1319"><col data-reactid="1320"/><col data-reactid="1321"/><col data-reactid="1322"/></colgroup><thead class="ant-table-thead" data-reactid="1323"><tr data-reactid="1324"><th class="" data-reactid="1325"><span data-reactid="1326"><!-- react-text: 1327 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1328"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1329"><i class="anticon anticon-caret-up" data-reactid="1330"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1331"><i class="anticon anticon-caret-down" data-reactid="1332"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1333"></i></span></th><th class="" data-reactid="1334"><span data-reactid="1335"><!-- react-text: 1336 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1337"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1338"><i class="anticon anticon-caret-up" data-reactid="1339"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1340"><i class="anticon anticon-caret-down" data-reactid="1341"></i></span></div></span></th><th class="" data-reactid="1342"><span data-reactid="1343"><!-- react-text: 1344 -->Address<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1345"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1346"><i class="anticon anticon-caret-up" data-reactid="1347"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1348"><i class="anticon anticon-caret-down" data-reactid="1349"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1350"></i></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1351"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1352"><td class="" data-reactid="1353"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1354"></span><!-- react-empty: 1355 --><!-- react-text: 1356 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1357"><!-- react-text: 1358 -->32<!-- /react-text --></td><td class="" data-reactid="1359"><!-- react-text: 1360 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1361"><td class="" data-reactid="1362"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1363"></span><!-- react-empty: 1364 --><!-- react-text: 1365 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1366"><!-- react-text: 1367 -->42<!-- /react-text --></td><td class="" data-reactid="1368"><!-- react-text: 1369 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1370"><td class="" data-reactid="1371"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1372"></span><!-- react-empty: 1373 --><!-- react-text: 1374 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1375"><!-- react-text: 1376 -->32<!-- /react-text --></td><td class="" data-reactid="1377"><!-- react-text: 1378 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1379"><td class="" data-reactid="1380"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1381"></span><!-- react-empty: 1382 --><!-- react-text: 1383 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1384"><!-- react-text: 1385 -->32<!-- /react-text --></td><td class="" data-reactid="1386"><!-- react-text: 1387 -->London No. 2 Lake Park<!-- /react-text --></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1388"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1389"><a data-reactid="1390"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1391"><a data-reactid="1392">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1393"><a data-reactid="1394"></a></li><!-- react-empty: 1395 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1396"><div class="code-box-title" data-reactid="1397"><a href="#components-table-demo-head" data-reactid="1398">筛选和排序</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/head.md" data-reactid="1399"><i class="anticon anticon-edit" data-reactid="1400"></i></a></div><div data-reactid="1401"><p data-reactid="1402"><!-- react-text: 1403 -->对某一列数据进行筛选，使用列的 <!-- /react-text --><code data-reactid="1404"><!-- react-text: 1405 -->filters<!-- /react-text --></code><!-- react-text: 1406 --> 属性来指定需要筛选菜单的列，<!-- /react-text --><code data-reactid="1407"><!-- react-text: 1408 -->onFilter<!-- /react-text --></code><!-- react-text: 1409 --> 用于筛选当前数据，<!-- /react-text --><code data-reactid="1410"><!-- react-text: 1411 -->filterMultiple<!-- /react-text --></code><!-- react-text: 1412 --> 用于指定多选和单选。<!-- /react-text --></p><p data-reactid="1413"><!-- react-text: 1414 -->对某一列数据进行排序，通过指定列的 <!-- /react-text --><code data-reactid="1415"><!-- react-text: 1416 -->sorter<!-- /react-text --></code><!-- react-text: 1417 --> 函数即可启动排序按钮。<!-- /react-text --><code data-reactid="1418"><!-- react-text: 1419 -->sorter: function(a, b) { ... }<!-- /react-text --></code><!-- react-text: 1420 -->， a、b 为比较的两个列数据。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1421"></i></section><section class="highlight-wrapper" data-reactid="1422"><div class="highlight" data-reactid="1423"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1424"></i><pre class="language-jsx" data-reactid="1425"><code data-reactid="1426"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
filters<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">'Joe'</span><span class="token punctuation">,</span>
value<span class="token punctuation">:</span> <span class="token string">'Joe'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">'Jim'</span><span class="token punctuation">,</span>
value<span class="token punctuation">:</span> <span class="token string">'Jim'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">'Submenu'</span><span class="token punctuation">,</span>
value<span class="token punctuation">:</span> <span class="token string">'Submenu'</span><span class="token punctuation">,</span>
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">'Green'</span><span class="token punctuation">,</span>
value<span class="token punctuation">:</span> <span class="token string">'Green'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">'Black'</span><span class="token punctuation">,</span>
value<span class="token punctuation">:</span> <span class="token string">'Black'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token comment" spellcheck="true">// specify the condition of filtering result</span>
<span class="token comment" spellcheck="true">// here is that finding the name started with `value`</span>
onFilter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">,</span>
sorter<span class="token punctuation">:</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> a<span class="token punctuation">.</span>name<span class="token punctuation">.</span>length <span class="token operator">-</span> b<span class="token punctuation">.</span>name<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
sorter<span class="token punctuation">:</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> a<span class="token punctuation">.</span>age <span class="token operator">-</span> b<span class="token punctuation">.</span>age<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
filters<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">'London'</span><span class="token punctuation">,</span>
value<span class="token punctuation">:</span> <span class="token string">'London'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">'New York'</span><span class="token punctuation">,</span>
value<span class="token punctuation">:</span> <span class="token string">'New York'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
filterMultiple<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
onFilter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>address<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">,</span>
sorter<span class="token punctuation">:</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> a<span class="token punctuation">.</span>address<span class="token punctuation">.</span>length <span class="token operator">-</span> b<span class="token punctuation">.</span>address<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'4'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Red'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 2 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">onChange</span><span class="token punctuation">(</span>pagination<span class="token punctuation">,</span> filters<span class="token punctuation">,</span> sorter<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'params'</span><span class="token punctuation">,</span> pagination<span class="token punctuation">,</span> filters<span class="token punctuation">,</span> sorter<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-custom-filter-panel" data-reactid="1427"><section class="code-box-demo" data-reactid="1428"><div class="ant-table-wrapper" data-reactid="1429"><div class="ant-spin-nested-loading" data-reactid="1430"><div class="ant-spin-container" data-reactid="1431"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1432"><div class="ant-table-content" data-reactid="1433"><div class="ant-table-body" data-reactid="1434"><table class="" data-reactid="1435"><colgroup data-reactid="1436"><col data-reactid="1437"/><col data-reactid="1438"/><col data-reactid="1439"/></colgroup><thead class="ant-table-thead" data-reactid="1440"><tr data-reactid="1441"><th class="" data-reactid="1442"><span data-reactid="1443"><!-- react-text: 1444 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1445"></i></span></th><th class="" data-reactid="1446"><span data-reactid="1447"><!-- react-text: 1448 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1449"><span data-reactid="1450"><!-- react-text: 1451 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1452"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1453"><td class="" data-reactid="1454"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1455"></span><!-- react-empty: 1456 --><!-- react-text: 1457 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1458"><!-- react-text: 1459 -->32<!-- /react-text --></td><td class="" data-reactid="1460"><!-- react-text: 1461 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1462"><td class="" data-reactid="1463"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1464"></span><!-- react-empty: 1465 --><!-- react-text: 1466 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1467"><!-- react-text: 1468 -->42<!-- /react-text --></td><td class="" data-reactid="1469"><!-- react-text: 1470 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1471"><td class="" data-reactid="1472"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1473"></span><!-- react-empty: 1474 --><!-- react-text: 1475 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1476"><!-- react-text: 1477 -->32<!-- /react-text --></td><td class="" data-reactid="1478"><!-- react-text: 1479 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1480"><td class="" data-reactid="1481"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1482"></span><!-- react-empty: 1483 --><!-- react-text: 1484 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1485"><!-- react-text: 1486 -->32<!-- /react-text --></td><td class="" data-reactid="1487"><!-- react-text: 1488 -->London No. 2 Lake Park<!-- /react-text --></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1489"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1490"><a data-reactid="1491"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1492"><a data-reactid="1493">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1494"><a data-reactid="1495"></a></li><!-- react-empty: 1496 --></ul></div></div></div><style data-reactid="1497">.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;
}</style></section><section class="code-box-meta markdown" data-reactid="1498"><div class="code-box-title" data-reactid="1499"><a href="#components-table-demo-custom-filter-panel" data-reactid="1500">自定义筛选菜单</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/custom-filter-panel.md" data-reactid="1501"><i class="anticon anticon-edit" data-reactid="1502"></i></a></div><div data-reactid="1503"><p data-reactid="1504"><!-- react-text: 1505 -->通过 <!-- /react-text --><code data-reactid="1506"><!-- react-text: 1507 -->filterDropdown<!-- /react-text --></code><!-- react-text: 1508 -->、<!-- /react-text --><code data-reactid="1509"><!-- react-text: 1510 -->filterDropdownVisible<!-- /react-text --></code><!-- react-text: 1511 --> 和 <!-- /react-text --><code data-reactid="1512"><!-- react-text: 1513 -->filterDropdownVisibleChange<!-- /react-text --></code><!-- react-text: 1514 --> 定义自定义的列筛选功能，并实现一个搜索列的示例。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1515"></i></section><section class="highlight-wrapper" data-reactid="1516"><div class="highlight" data-reactid="1517"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1518"></i><pre class="language-jsx" data-reactid="1519"><code data-reactid="1520"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'4'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Red'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 2 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
filterDropdownVisible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
data<span class="token punctuation">,</span>
searchText<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
onInputChange <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> searchText<span class="token punctuation">:</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
onSearch <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> searchText <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
<span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span>searchText<span class="token punctuation">,</span> <span class="token string">'gi'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
filterDropdownVisible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
data<span class="token punctuation">:</span> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> match <span class="token operator">=</span> record<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>match<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token operator">...</span>record<span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span>record<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>text<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
i <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>highlight<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>match<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">,</span> text<span class="token punctuation">]</span> <span class="token punctuation">:</span> text
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>record <span class="token operator">=</span><span class="token operator">></span> <span class="token operator">!</span><span class="token operator">!</span>record<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
filterDropdown<span class="token punctuation">:</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>custom-filter-dropdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Input</span>
<span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Search</span> <span class="token attr-name">name"</span>
<span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>searchText<span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onInputChange<span class="token punctuation">}</span></span>
<span class="token attr-name">onPressEnter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSearch<span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSearch<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
filterDropdownVisible<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>filterDropdownVisible<span class="token punctuation">,</span>
onFilterDropdownVisibleChange<span class="token punctuation">:</span> visible <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> filterDropdownVisible<span class="token punctuation">:</span> visible <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="1521"><pre data-reactid="1522"><code class="css" data-reactid="1523"><span class="token selector"><span class="token class">.custom-filter-dropdown</span> </span><span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">8</span>px<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">6</span>px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">1</span>px <span class="token number">6</span>px <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span>, <span class="token number">0</span>, <span class="token number">0</span>, <span class="token number">.2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.custom-filter-dropdown</span> input </span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">130</span>px<span class="token punctuation">;</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token number">8</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.highlight</span> </span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#f50</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-ajax" data-reactid="1524"><section class="code-box-demo" data-reactid="1525"><div class="ant-table-wrapper" data-reactid="1526"><div class="ant-spin-nested-loading" data-reactid="1527"><div class="ant-spin-container" data-reactid="1528"><div class="ant-table ant-table-large ant-table-empty ant-table-scroll-position-left" data-reactid="1529"><div class="ant-table-content" data-reactid="1530"><div class="ant-table-body" data-reactid="1531"><table class="" data-reactid="1532"><colgroup data-reactid="1533"><col style="width:20%;min-width:20%;" data-reactid="1534"/><col style="width:20%;min-width:20%;" data-reactid="1535"/><col data-reactid="1536"/></colgroup><thead class="ant-table-thead" data-reactid="1537"><tr data-reactid="1538"><th class="" data-reactid="1539"><span data-reactid="1540"><!-- react-text: 1541 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1542"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1543"><i class="anticon anticon-caret-up" data-reactid="1544"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1545"><i class="anticon anticon-caret-down" data-reactid="1546"></i></span></div></span></th><th class="" data-reactid="1547"><span data-reactid="1548"><!-- react-text: 1549 -->Gender<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1550"></i></span></th><th class="" data-reactid="1551"><span data-reactid="1552"><!-- react-text: 1553 -->Email<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1554"></tbody></table></div><div class="ant-table-placeholder" data-reactid="1555">No Data</div></div></div></div></div></div></section><section class="code-box-meta markdown" data-reactid="1556"><div class="code-box-title" data-reactid="1557"><a href="#components-table-demo-ajax" data-reactid="1558">远程加载数据</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/ajax.md" data-reactid="1559"><i class="anticon anticon-edit" data-reactid="1560"></i></a></div><div data-reactid="1561"><p data-reactid="1562"><!-- react-text: 1563 -->这个例子通过简单的 ajax 读取方式，演示了如何从服务端读取并展现数据，具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。<!-- /react-text --></p><p data-reactid="1564"><!-- react-text: 1565 -->另外，本例也展示了筛选排序功能如何交给服务端实现，列不需要指定具体的 <!-- /react-text --><code data-reactid="1566"><!-- react-text: 1567 -->onFilter<!-- /react-text --></code><!-- react-text: 1568 --> 和 <!-- /react-text --><code data-reactid="1569"><!-- react-text: 1570 -->sorter<!-- /react-text --></code><!-- react-text: 1571 --> 函数，而是在把筛选和排序的参数发到服务端来处理。<!-- /react-text --></p><p data-reactid="1572"><strong data-reactid="1573"><!-- react-text: 1574 -->注意，此示例使用 <!-- /react-text --><a href="https://randomuser.me" data-reactid="1575"><!-- react-text: 1576 -->模拟接口<!-- /react-text --></a><!-- react-text: 1577 -->，展示数据可能不准确，请打开网络面板查看请求。<!-- /react-text --></strong></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1578"></i></section><section class="highlight-wrapper" data-reactid="1579"><div class="highlight" data-reactid="1580"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1581"></i><pre class="language-jsx" data-reactid="1582"><code data-reactid="1583"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> reqwest <span class="token keyword">from</span> <span class="token string">'reqwest'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
sorter<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> name <span class="token operator">=</span><span class="token operator">></span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token punctuation">.</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token punctuation">.</span>last<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token string">'20%'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Gender'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'gender'</span><span class="token punctuation">,</span>
filters<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'Male'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'male'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'Female'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token string">'female'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token string">'20%'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Email'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'email'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
pagination<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
handleTableChange <span class="token operator">=</span> <span class="token punctuation">(</span>pagination<span class="token punctuation">,</span> filters<span class="token punctuation">,</span> sorter<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> pager <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pagination<span class="token punctuation">;</span>
pager<span class="token punctuation">.</span>current <span class="token operator">=</span> pagination<span class="token punctuation">.</span>current<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
pagination<span class="token punctuation">:</span> pager<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
results<span class="token punctuation">:</span> pagination<span class="token punctuation">.</span>pageSize<span class="token punctuation">,</span>
page<span class="token punctuation">:</span> pagination<span class="token punctuation">.</span>current<span class="token punctuation">,</span>
sortField<span class="token punctuation">:</span> sorter<span class="token punctuation">.</span>field<span class="token punctuation">,</span>
sortOrder<span class="token punctuation">:</span> sorter<span class="token punctuation">.</span>order<span class="token punctuation">,</span>
<span class="token operator">...</span>filters<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
fetch <span class="token operator">=</span> <span class="token punctuation">(</span>params <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'params:'</span><span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> loading<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">reqwest</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
url<span class="token punctuation">:</span> <span class="token string">'https://randomuser.me/api'</span><span class="token punctuation">,</span>
method<span class="token punctuation">:</span> <span class="token string">'get'</span><span class="token punctuation">,</span>
data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
results<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
<span class="token operator">...</span>params<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
type<span class="token punctuation">:</span> <span class="token string">'json'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> pagination <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pagination<span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">// Read total count from server</span>
<span class="token comment" spellcheck="true">// pagination.total = data.totalCount;</span>
pagination<span class="token punctuation">.</span>total <span class="token operator">=</span> <span class="token number">200</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
data<span class="token punctuation">:</span> data<span class="token punctuation">.</span>results<span class="token punctuation">,</span>
pagination<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
<span class="token attr-name">rowKey</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>record <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>registered<span class="token punctuation">}</span></span>
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">}</span></span>
<span class="token attr-name">pagination</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pagination<span class="token punctuation">}</span></span>
<span class="token attr-name">loading</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loading<span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleTableChange<span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-size" data-reactid="1584"><section class="code-box-demo" data-reactid="1585"><div data-reactid="1586"><h4 data-reactid="1587">Middle size table</h4><div class="ant-table-wrapper" data-reactid="1588"><div class="ant-spin-nested-loading" data-reactid="1589"><div class="ant-spin-container" data-reactid="1590"><div class="ant-table ant-table-middle ant-table-scroll-position-left" data-reactid="1591"><div class="ant-table-content" data-reactid="1592"><div class="ant-table-body" data-reactid="1593"><table class="" data-reactid="1594"><colgroup data-reactid="1595"><col data-reactid="1596"/><col data-reactid="1597"/><col data-reactid="1598"/></colgroup><thead class="ant-table-thead" data-reactid="1599"><tr data-reactid="1600"><th class="" data-reactid="1601"><span data-reactid="1602"><!-- react-text: 1603 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1604"><span data-reactid="1605"><!-- react-text: 1606 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1607"><span data-reactid="1608"><!-- react-text: 1609 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1610"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1611"><td class="" data-reactid="1612"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1613"></span><!-- react-empty: 1614 --><!-- react-text: 1615 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1616"><!-- react-text: 1617 -->32<!-- /react-text --></td><td class="" data-reactid="1618"><!-- react-text: 1619 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1620"><td class="" data-reactid="1621"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1622"></span><!-- react-empty: 1623 --><!-- react-text: 1624 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1625"><!-- react-text: 1626 -->42<!-- /react-text --></td><td class="" data-reactid="1627"><!-- react-text: 1628 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1629"><td class="" data-reactid="1630"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1631"></span><!-- react-empty: 1632 --><!-- react-text: 1633 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1634"><!-- react-text: 1635 -->32<!-- /react-text --></td><td class="" data-reactid="1636"><!-- react-text: 1637 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination mini" unselectable="unselectable" data-reactid="1638"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1639"><a data-reactid="1640"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1641"><a data-reactid="1642">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1643"><a data-reactid="1644"></a></li><!-- react-empty: 1645 --></ul></div></div></div><h4 data-reactid="1646">Small size table</h4><div class="ant-table-wrapper" data-reactid="1647"><div class="ant-spin-nested-loading" data-reactid="1648"><div class="ant-spin-container" data-reactid="1649"><div class="ant-table ant-table-small ant-table-scroll-position-left" data-reactid="1650"><div class="ant-table-content" data-reactid="1651"><div class="ant-table-body" data-reactid="1652"><table class="" data-reactid="1653"><colgroup data-reactid="1654"><col data-reactid="1655"/><col data-reactid="1656"/><col data-reactid="1657"/></colgroup><thead class="ant-table-thead" data-reactid="1658"><tr data-reactid="1659"><th class="" data-reactid="1660"><span data-reactid="1661"><!-- react-text: 1662 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1663"><span data-reactid="1664"><!-- react-text: 1665 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1666"><span data-reactid="1667"><!-- react-text: 1668 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1669"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1670"><td class="" data-reactid="1671"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1672"></span><!-- react-empty: 1673 --><!-- react-text: 1674 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1675"><!-- react-text: 1676 -->32<!-- /react-text --></td><td class="" data-reactid="1677"><!-- react-text: 1678 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1679"><td class="" data-reactid="1680"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1681"></span><!-- react-empty: 1682 --><!-- react-text: 1683 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1684"><!-- react-text: 1685 -->42<!-- /react-text --></td><td class="" data-reactid="1686"><!-- react-text: 1687 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1688"><td class="" data-reactid="1689"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1690"></span><!-- react-empty: 1691 --><!-- react-text: 1692 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1693"><!-- react-text: 1694 -->32<!-- /react-text --></td><td class="" data-reactid="1695"><!-- react-text: 1696 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination mini" unselectable="unselectable" data-reactid="1697"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1698"><a data-reactid="1699"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1700"><a data-reactid="1701">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1702"><a data-reactid="1703"></a></li><!-- react-empty: 1704 --></ul></div></div></div></div><style data-reactid="1705">#components-table-demo-size h4 { margin-bottom: 16px; }</style></section><section class="code-box-meta markdown" data-reactid="1706"><div class="code-box-title" data-reactid="1707"><a href="#components-table-demo-size" data-reactid="1708">紧凑型</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/size.md" data-reactid="1709"><i class="anticon anticon-edit" data-reactid="1710"></i></a></div><div data-reactid="1711"><p data-reactid="1712"><!-- react-text: 1713 -->两种紧凑型的列表，小型列表只用于对话框内。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1714"></i></section><section class="highlight-wrapper" data-reactid="1715"><div class="highlight" data-reactid="1716"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1717"></i><pre class="language-jsx" data-reactid="1718"><code data-reactid="1719"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">></span></span>Middle size table<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">></span></span>Small size table<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-bordered" data-reactid="1720"><section class="code-box-demo" data-reactid="1721"><div class="ant-table-wrapper" data-reactid="1722"><div class="ant-spin-nested-loading" data-reactid="1723"><div class="ant-spin-container" data-reactid="1724"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="1725"><div class="ant-table-title" data-reactid="1726">Header</div><div class="ant-table-content" data-reactid="1727"><div class="ant-table-body" data-reactid="1728"><table class="" data-reactid="1729"><colgroup data-reactid="1730"><col data-reactid="1731"/><col data-reactid="1732"/><col data-reactid="1733"/></colgroup><thead class="ant-table-thead" data-reactid="1734"><tr data-reactid="1735"><th class="" data-reactid="1736"><span data-reactid="1737"><!-- react-text: 1738 -->Name<!-- /react-text --></span></th><th class="column-money" data-reactid="1739"><span data-reactid="1740"><!-- react-text: 1741 -->Cash Assets<!-- /react-text --></span></th><th class="" data-reactid="1742"><span data-reactid="1743"><!-- react-text: 1744 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1745"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1746"><td class="" data-reactid="1747"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1748"></span><!-- react-empty: 1749 --><a href="#" data-reactid="1750">John Brown</a></td><td class="column-money" data-reactid="1751"><!-- react-text: 1752 -->￥300,000.00<!-- /react-text --></td><td class="" data-reactid="1753"><!-- react-text: 1754 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1755"><td class="" data-reactid="1756"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1757"></span><!-- react-empty: 1758 --><a href="#" data-reactid="1759">Jim Green</a></td><td class="column-money" data-reactid="1760"><!-- react-text: 1761 -->￥1,256,000.00<!-- /react-text --></td><td class="" data-reactid="1762"><!-- react-text: 1763 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1764"><td class="" data-reactid="1765"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1766"></span><!-- react-empty: 1767 --><a href="#" data-reactid="1768">Joe Black</a></td><td class="column-money" data-reactid="1769"><!-- react-text: 1770 -->￥120,000.00<!-- /react-text --></td><td class="" data-reactid="1771"><!-- react-text: 1772 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div><div class="ant-table-footer" data-reactid="1773">Footer</div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1774"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1775"><a data-reactid="1776"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1777"><a data-reactid="1778">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1779"><a data-reactid="1780"></a></li><!-- react-empty: 1781 --></ul></div></div></div><style data-reactid="1782">.column-money {
text-align: right;
}</style></section><section class="code-box-meta markdown" data-reactid="1783"><div class="code-box-title" data-reactid="1784"><a href="#components-table-demo-bordered" data-reactid="1785">带边框</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/bordered.md" data-reactid="1786"><i class="anticon anticon-edit" data-reactid="1787"></i></a></div><div data-reactid="1788"><p data-reactid="1789"><!-- react-text: 1790 -->添加表格边框线，页头和页脚。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1791"></i></section><section class="highlight-wrapper" data-reactid="1792"><div class="highlight" data-reactid="1793"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1794"></i><pre class="language-jsx" data-reactid="1795"><code data-reactid="1796"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> text <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Cash Assets'</span><span class="token punctuation">,</span>
className<span class="token punctuation">:</span> <span class="token string">'column-money'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'money'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
money<span class="token punctuation">:</span> <span class="token string">'￥300,000.00'</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
money<span class="token punctuation">:</span> <span class="token string">'￥1,256,000.00'</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
money<span class="token punctuation">:</span> <span class="token string">'￥120,000.00'</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
<span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>
<span class="token attr-name">bordered</span>
<span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'Header'</span><span class="token punctuation">}</span></span>
<span class="token attr-name">footer</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'Footer'</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="1797"><pre data-reactid="1798"><code class="css" data-reactid="1799"><span class="token selector"><span class="token class">.column-money</span> </span><span class="token punctuation">{</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-expand" data-reactid="1800"><section class="code-box-demo" data-reactid="1801"><div class="ant-table-wrapper" data-reactid="1802"><div class="ant-spin-nested-loading" data-reactid="1803"><div class="ant-spin-container" data-reactid="1804"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1805"><div class="ant-table-content" data-reactid="1806"><div class="ant-table-body" data-reactid="1807"><table class="" data-reactid="1808"><colgroup data-reactid="1809"><col class="ant-table-expand-icon-col" data-reactid="1810"/><col data-reactid="1811"/><col data-reactid="1812"/><col data-reactid="1813"/><col data-reactid="1814"/></colgroup><thead class="ant-table-thead" data-reactid="1815"><tr data-reactid="1816"><th class="ant-table-expand-icon-th" title="" rowspan="1" data-reactid="1817"></th><th class="" data-reactid="1818"><span data-reactid="1819"><!-- react-text: 1820 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1821"><span data-reactid="1822"><!-- react-text: 1823 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1824"><span data-reactid="1825"><!-- react-text: 1826 -->Address<!-- /react-text --></span></th><th class="" data-reactid="1827"><span data-reactid="1828"><!-- react-text: 1829 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1830"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1831"><td class="ant-table-row-expand-icon-cell" data-reactid="1832"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1833"></span></td><td class="" data-reactid="1834"><!-- react-text: 1835 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1836"><!-- react-text: 1837 -->32<!-- /react-text --></td><td class="" data-reactid="1838"><!-- react-text: 1839 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1840"><a href="#" data-reactid="1841">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1842"><td class="ant-table-row-expand-icon-cell" data-reactid="1843"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1844"></span></td><td class="" data-reactid="1845"><!-- react-text: 1846 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1847"><!-- react-text: 1848 -->42<!-- /react-text --></td><td class="" data-reactid="1849"><!-- react-text: 1850 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1851"><a href="#" data-reactid="1852">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1853"><td class="ant-table-row-expand-icon-cell" data-reactid="1854"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1855"></span></td><td class="" data-reactid="1856"><!-- react-text: 1857 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1858"><!-- react-text: 1859 -->32<!-- /react-text --></td><td class="" data-reactid="1860"><!-- react-text: 1861 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1862"><a href="#" data-reactid="1863">Delete</a></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1864"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1865"><a data-reactid="1866"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1867"><a data-reactid="1868">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1869"><a data-reactid="1870"></a></li><!-- react-empty: 1871 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1872"><div class="code-box-title" data-reactid="1873"><a href="#components-table-demo-expand" data-reactid="1874">可展开</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/expand.md" data-reactid="1875"><i class="anticon anticon-edit" data-reactid="1876"></i></a></div><div data-reactid="1877"><p data-reactid="1878"><!-- react-text: 1879 -->当表格内容较多不能一次性完全展示时。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1880"></i></section><section class="highlight-wrapper" data-reactid="1881"><div class="highlight" data-reactid="1882"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1883"></i><pre class="language-jsx" data-reactid="1884"><code data-reactid="1885"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'age'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'address'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'x'</span><span class="token punctuation">,</span> render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span> address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span> description<span class="token punctuation">:</span> <span class="token string">'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span> address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span> description<span class="token punctuation">:</span> <span class="token string">'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span> address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span> description<span class="token punctuation">:</span> <span class="token string">'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
<span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
<span class="token attr-name">expandedRowRender</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>record <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>record<span class="token punctuation">.</span>description<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span>
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-colspan-rowspan" data-reactid="1886"><section class="code-box-demo" data-reactid="1887"><div class="ant-table-wrapper" data-reactid="1888"><div class="ant-spin-nested-loading" data-reactid="1889"><div class="ant-spin-container" data-reactid="1890"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="1891"><div class="ant-table-content" data-reactid="1892"><div class="ant-table-body" data-reactid="1893"><table class="" data-reactid="1894"><colgroup data-reactid="1895"><col data-reactid="1896"/><col data-reactid="1897"/><col data-reactid="1898"/><col data-reactid="1899"/><col data-reactid="1900"/></colgroup><thead class="ant-table-thead" data-reactid="1901"><tr data-reactid="1902"><th class="" data-reactid="1903"><span data-reactid="1904"><!-- react-text: 1905 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1906"><span data-reactid="1907"><!-- react-text: 1908 -->Age<!-- /react-text --></span></th><th class="" colspan="2" data-reactid="1909"><span data-reactid="1910"><!-- react-text: 1911 -->Home phone<!-- /react-text --></span></th><th class="" data-reactid="1912"><span data-reactid="1913"><!-- react-text: 1914 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1915"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1916"><td class="" data-reactid="1917"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1918"></span><!-- react-empty: 1919 --><a href="#" data-reactid="1920">John Brown</a></td><td class="" data-reactid="1921"><!-- react-text: 1922 -->32<!-- /react-text --></td><td class="" data-reactid="1923"><!-- react-text: 1924 -->0571-22098909<!-- /react-text --></td><td class="" data-reactid="1925"><!-- react-text: 1926 -->18889898989<!-- /react-text --></td><td class="" data-reactid="1927"><!-- react-text: 1928 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1929"><td class="" data-reactid="1930"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1931"></span><!-- react-empty: 1932 --><a href="#" data-reactid="1933">Jim Green</a></td><td class="" data-reactid="1934"><!-- react-text: 1935 -->42<!-- /react-text --></td><td class="" data-reactid="1936"><!-- react-text: 1937 -->0571-22098333<!-- /react-text --></td><td class="" data-reactid="1938"><!-- react-text: 1939 -->18889898888<!-- /react-text --></td><td class="" data-reactid="1940"><!-- react-text: 1941 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1942"><td class="" data-reactid="1943"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1944"></span><!-- react-empty: 1945 --><a href="#" data-reactid="1946">Joe Black</a></td><td class="" data-reactid="1947"><!-- react-text: 1948 -->32<!-- /react-text --></td><td class="" rowspan="2" data-reactid="1949"><!-- react-text: 1950 -->0575-22098909<!-- /react-text --></td><td class="" data-reactid="1951"><!-- react-text: 1952 -->18900010002<!-- /react-text --></td><td class="" data-reactid="1953"><!-- react-text: 1954 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1955"><td class="" data-reactid="1956"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1957"></span><!-- react-empty: 1958 --><a href="#" data-reactid="1959">Jim Red</a></td><td class="" data-reactid="1960"><!-- react-text: 1961 -->18<!-- /react-text --></td><!-- react-empty: 1962 --><td class="" data-reactid="1963"><!-- react-text: 1964 -->18900010002<!-- /react-text --></td><td class="" data-reactid="1965"><!-- react-text: 1966 -->London No. 2 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1967"><td class="" colspan="5" data-reactid="1968"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1969"></span><!-- react-empty: 1970 --><a href="#" data-reactid="1971">Jake White</a></td><!-- react-empty: 1972 --><!-- react-empty: 1973 --><!-- react-empty: 1974 --><!-- react-empty: 1975 --></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1976"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1977"><a data-reactid="1978"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1979"><a data-reactid="1980">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1981"><a data-reactid="1982"></a></li><!-- react-empty: 1983 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1984"><div class="code-box-title" data-reactid="1985"><a href="#components-table-demo-colspan-rowspan" data-reactid="1986">表格行/列合并</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/colspan-rowspan.md" data-reactid="1987"><i class="anticon anticon-edit" data-reactid="1988"></i></a></div><div data-reactid="1989"><p data-reactid="1990"><!-- react-text: 1991 -->表头只支持列合并，使用 column 里的 colSpan 进行设置。<!-- /react-text --></p><p data-reactid="1992"><!-- react-text: 1993 -->表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1994"></i></section><section class="highlight-wrapper" data-reactid="1995"><div class="highlight" data-reactid="1996"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1997"></i><pre class="language-jsx" data-reactid="1998"><code data-reactid="1999"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">// In the fifth row, other columns are merged into first column</span>
<span class="token comment" spellcheck="true">// by setting it's colSpan to be 0</span>
<span class="token keyword">const</span> renderContent <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> row<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
children<span class="token punctuation">:</span> value<span class="token punctuation">,</span>
props<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
obj<span class="token punctuation">.</span>props<span class="token punctuation">.</span>colSpan <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> obj<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> row<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">&lt;</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
children<span class="token punctuation">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
props<span class="token punctuation">:</span> <span class="token punctuation">{</span>
colSpan<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> renderContent<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Home phone'</span><span class="token punctuation">,</span>
colSpan<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'tel'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> row<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
children<span class="token punctuation">:</span> value<span class="token punctuation">,</span>
props<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
obj<span class="token punctuation">.</span>props<span class="token punctuation">.</span>rowSpan <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">// These two are merged into above cell</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
obj<span class="token punctuation">.</span>props<span class="token punctuation">.</span>rowSpan <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
obj<span class="token punctuation">.</span>props<span class="token punctuation">.</span>colSpan <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> obj<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Phone'</span><span class="token punctuation">,</span>
colSpan<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'phone'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> renderContent<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> renderContent<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
tel<span class="token punctuation">:</span> <span class="token string">'0571-22098909'</span><span class="token punctuation">,</span>
phone<span class="token punctuation">:</span> <span class="token number">18889898989</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
tel<span class="token punctuation">:</span> <span class="token string">'0571-22098333'</span><span class="token punctuation">,</span>
phone<span class="token punctuation">:</span> <span class="token number">18889898888</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
tel<span class="token punctuation">:</span> <span class="token string">'0575-22098909'</span><span class="token punctuation">,</span>
phone<span class="token punctuation">:</span> <span class="token number">18900010002</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'4'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Red'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
tel<span class="token punctuation">:</span> <span class="token string">'0575-22098909'</span><span class="token punctuation">,</span>
phone<span class="token punctuation">:</span> <span class="token number">18900010002</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 2 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'5'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jake White'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
tel<span class="token punctuation">:</span> <span class="token string">'0575-22098909'</span><span class="token punctuation">,</span>
phone<span class="token punctuation">:</span> <span class="token number">18900010002</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'Dublin No. 2 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">bordered</span> <span class="token punctuation">/></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-expand-children" data-reactid="2000"><section class="code-box-demo" data-reactid="2001"><div class="ant-table-wrapper" data-reactid="2002"><div class="ant-spin-nested-loading" data-reactid="2003"><div class="ant-spin-container" data-reactid="2004"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="2005"><div class="ant-table-content" data-reactid="2006"><div class="ant-table-body" data-reactid="2007"><table class="" data-reactid="2008"><colgroup data-reactid="2009"><col data-reactid="2010"/><col style="width:40%;min-width:40%;" data-reactid="2011"/><col style="width:30%;min-width:30%;" data-reactid="2012"/><col data-reactid="2013"/></colgroup><thead class="ant-table-thead" data-reactid="2014"><tr data-reactid="2015"><th class="ant-table-selection-column" data-reactid="2016"><span data-reactid="2017"><div class="ant-table-selection" data-reactid="2018"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="2019"><span class="ant-checkbox" data-reactid="2020"><input type="checkbox" class="ant-checkbox-input" data-reactid="2021"/><span class="ant-checkbox-inner" data-reactid="2022"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="2023"><i class="anticon anticon-down" data-reactid="2024"></i></div></div></span></th><th class="" data-reactid="2025"><span data-reactid="2026"><!-- react-text: 2027 -->Name<!-- /react-text --></span></th><th class="" data-reactid="2028"><span data-reactid="2029"><!-- react-text: 2030 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2031"><span data-reactid="2032"><!-- react-text: 2033 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2034"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2035"><td class="ant-table-selection-column" data-reactid="2036"><span data-reactid="2037"><label class="ant-checkbox-wrapper" data-reactid="2038"><span class="ant-checkbox" data-reactid="2039"><input type="checkbox" class="ant-checkbox-input" data-reactid="2040"/><span class="ant-checkbox-inner" data-reactid="2041"></span></span></label></span></td><td class="" data-reactid="2042"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2043"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2044"></span><!-- react-text: 2045 -->John Brown sr.<!-- /react-text --></td><td class="" data-reactid="2046"><!-- react-text: 2047 -->60<!-- /react-text --></td><td class="" data-reactid="2048"><!-- react-text: 2049 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-1" style="display:none;" data-reactid="2050"><td class="ant-table-selection-column" data-reactid="2051"><span data-reactid="2052"><label class="ant-checkbox-wrapper" data-reactid="2053"><span class="ant-checkbox" data-reactid="2054"><input type="checkbox" class="ant-checkbox-input" data-reactid="2055"/><span class="ant-checkbox-inner" data-reactid="2056"></span></span></label></span></td><td class="" data-reactid="2057"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="2058"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2059"></span><!-- react-text: 2060 -->John Brown<!-- /react-text --></td><td class="" data-reactid="2061"><!-- react-text: 2062 -->42<!-- /react-text --></td><td class="" data-reactid="2063"><!-- react-text: 2064 -->New York No. 2 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-1" style="display:none;" data-reactid="2065"><td class="ant-table-selection-column" data-reactid="2066"><span data-reactid="2067"><label class="ant-checkbox-wrapper" data-reactid="2068"><span class="ant-checkbox" data-reactid="2069"><input type="checkbox" class="ant-checkbox-input" data-reactid="2070"/><span class="ant-checkbox-inner" data-reactid="2071"></span></span></label></span></td><td class="" data-reactid="2072"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="2073"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2074"></span><!-- react-text: 2075 -->John Brown jr.<!-- /react-text --></td><td class="" data-reactid="2076"><!-- react-text: 2077 -->30<!-- /react-text --></td><td class="" data-reactid="2078"><!-- react-text: 2079 -->New York No. 3 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-2" style="display:none;" data-reactid="2080"><td class="ant-table-selection-column" data-reactid="2081"><span data-reactid="2082"><label class="ant-checkbox-wrapper" data-reactid="2083"><span class="ant-checkbox" data-reactid="2084"><input type="checkbox" class="ant-checkbox-input" data-reactid="2085"/><span class="ant-checkbox-inner" data-reactid="2086"></span></span></label></span></td><td class="" data-reactid="2087"><span style="padding-left:40px;" class="ant-table-row-indent indent-level-2" data-reactid="2088"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2089"></span><!-- react-text: 2090 -->Jimmy Brown<!-- /react-text --></td><td class="" data-reactid="2091"><!-- react-text: 2092 -->16<!-- /react-text --></td><td class="" data-reactid="2093"><!-- react-text: 2094 -->New York No. 3 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-1" style="display:none;" data-reactid="2095"><td class="ant-table-selection-column" data-reactid="2096"><span data-reactid="2097"><label class="ant-checkbox-wrapper" data-reactid="2098"><span class="ant-checkbox" data-reactid="2099"><input type="checkbox" class="ant-checkbox-input" data-reactid="2100"/><span class="ant-checkbox-inner" data-reactid="2101"></span></span></label></span></td><td class="" data-reactid="2102"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="2103"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2104"></span><!-- react-text: 2105 -->Jim Green sr.<!-- /react-text --></td><td class="" data-reactid="2106"><!-- react-text: 2107 -->72<!-- /react-text --></td><td class="" data-reactid="2108"><!-- react-text: 2109 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-2" style="display:none;" data-reactid="2110"><td class="ant-table-selection-column" data-reactid="2111"><span data-reactid="2112"><label class="ant-checkbox-wrapper" data-reactid="2113"><span class="ant-checkbox" data-reactid="2114"><input type="checkbox" class="ant-checkbox-input" data-reactid="2115"/><span class="ant-checkbox-inner" data-reactid="2116"></span></span></label></span></td><td class="" data-reactid="2117"><span style="padding-left:40px;" class="ant-table-row-indent indent-level-2" data-reactid="2118"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2119"></span><!-- react-text: 2120 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2121"><!-- react-text: 2122 -->42<!-- /react-text --></td><td class="" data-reactid="2123"><!-- react-text: 2124 -->London No. 2 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-3" style="display:none;" data-reactid="2125"><td class="ant-table-selection-column" data-reactid="2126"><span data-reactid="2127"><label class="ant-checkbox-wrapper" data-reactid="2128"><span class="ant-checkbox" data-reactid="2129"><input type="checkbox" class="ant-checkbox-input" data-reactid="2130"/><span class="ant-checkbox-inner" data-reactid="2131"></span></span></label></span></td><td class="" data-reactid="2132"><span style="padding-left:60px;" class="ant-table-row-indent indent-level-3" data-reactid="2133"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2134"></span><!-- react-text: 2135 -->Jim Green jr.<!-- /react-text --></td><td class="" data-reactid="2136"><!-- react-text: 2137 -->25<!-- /react-text --></td><td class="" data-reactid="2138"><!-- react-text: 2139 -->London No. 3 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-3" style="display:none;" data-reactid="2140"><td class="ant-table-selection-column" data-reactid="2141"><span data-reactid="2142"><label class="ant-checkbox-wrapper" data-reactid="2143"><span class="ant-checkbox" data-reactid="2144"><input type="checkbox" class="ant-checkbox-input" data-reactid="2145"/><span class="ant-checkbox-inner" data-reactid="2146"></span></span></label></span></td><td class="" data-reactid="2147"><span style="padding-left:60px;" class="ant-table-row-indent indent-level-3" data-reactid="2148"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2149"></span><!-- react-text: 2150 -->Jimmy Green sr.<!-- /react-text --></td><td class="" data-reactid="2151"><!-- react-text: 2152 -->18<!-- /react-text --></td><td class="" data-reactid="2153"><!-- react-text: 2154 -->London No. 4 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2155"><td class="ant-table-selection-column" data-reactid="2156"><span data-reactid="2157"><label class="ant-checkbox-wrapper" data-reactid="2158"><span class="ant-checkbox" data-reactid="2159"><input type="checkbox" class="ant-checkbox-input" data-reactid="2160"/><span class="ant-checkbox-inner" data-reactid="2161"></span></span></label></span></td><td class="" data-reactid="2162"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2163"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2164"></span><!-- react-text: 2165 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="2166"><!-- react-text: 2167 -->32<!-- /react-text --></td><td class="" data-reactid="2168"><!-- react-text: 2169 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="2170"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2171"><a data-reactid="2172"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2173"><a data-reactid="2174">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="2175"><a data-reactid="2176"></a></li><!-- react-empty: 2177 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="2178"><div class="code-box-title" data-reactid="2179"><a href="#components-table-demo-expand-children" data-reactid="2180">树形数据展示</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/expand-children.md" data-reactid="2181"><i class="anticon anticon-edit" data-reactid="2182"></i></a></div><div data-reactid="2183"><p data-reactid="2184"><!-- react-text: 2185 -->表格支持树形数据的展示，可以通过设置 <!-- /react-text --><code data-reactid="2186"><!-- react-text: 2187 -->indentSize<!-- /react-text --></code><!-- react-text: 2188 --> 以控制每一层的缩进宽度。<!-- /react-text --></p><blockquote data-reactid="2189"><p data-reactid="2190"><!-- react-text: 2191 -->注：暂不支持父子数据递归关联选择。<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="2192"></i></section><section class="highlight-wrapper" data-reactid="2193"><div class="highlight" data-reactid="2194"><i class="anticon anticon-copy code-box-code-copy" data-reactid="2195"></i><pre class="language-jsx" data-reactid="2196"><code data-reactid="2197"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token string">'40%'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token string">'30%'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'John Brown sr.'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'New York No. 1 Lake Park'</span><span class="token punctuation">,</span>
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'New York No. 2 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'John Brown jr.'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'New York No. 3 Lake Park'</span><span class="token punctuation">,</span>
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token number">121</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jimmy Brown'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'New York No. 3 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token number">13</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Green sr.'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">72</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 1 Lake Park'</span><span class="token punctuation">,</span>
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token number">131</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 2 Lake Park'</span><span class="token punctuation">,</span>
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token number">1311</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Green jr.'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 3 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token number">1312</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jimmy Green sr.'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London No. 4 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Joe Black'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'Sidney No. 1 Lake Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">// rowSelection objects indicates the need for row selection</span>
<span class="token keyword">const</span> rowSelection <span class="token operator">=</span> <span class="token punctuation">{</span>
onChange<span class="token punctuation">:</span> <span class="token punctuation">(</span>selectedRowKeys<span class="token punctuation">,</span> selectedRows<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`selectedRowKeys: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selectedRowKeys<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span> <span class="token string">'selectedRows: '</span><span class="token punctuation">,</span> selectedRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
onSelect<span class="token punctuation">:</span> <span class="token punctuation">(</span>record<span class="token punctuation">,</span> selected<span class="token punctuation">,</span> selectedRows<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>record<span class="token punctuation">,</span> selected<span class="token punctuation">,</span> selectedRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
onSelectAll<span class="token punctuation">:</span> <span class="token punctuation">(</span>selected<span class="token punctuation">,</span> selectedRows<span class="token punctuation">,</span> changeRows<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>selected<span class="token punctuation">,</span> selectedRows<span class="token punctuation">,</span> changeRows<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">rowSelection</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rowSelection<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-fixed-header" data-reactid="2198"><section class="code-box-demo" data-reactid="2199"><div class="ant-table-wrapper" data-reactid="2200"><div class="ant-spin-nested-loading" data-reactid="2201"><div class="ant-spin-container" data-reactid="2202"><div class="ant-table ant-table-large ant-table-fixed-header ant-table-scroll-position-left" data-reactid="2203"><div class="ant-table-content" data-reactid="2204"><div class="ant-table-scroll" data-reactid="2205"><div class="ant-table-header" data-reactid="2206"><table class="" data-reactid="2207"><colgroup data-reactid="2208"><col style="width:150px;min-width:150px;" data-reactid="2209"/><col style="width:150px;min-width:150px;" data-reactid="2210"/><col data-reactid="2211"/></colgroup><thead class="ant-table-thead" data-reactid="2212"><tr data-reactid="2213"><th class="" data-reactid="2214"><span data-reactid="2215"><!-- react-text: 2216 -->Name<!-- /react-text --></span></th><th class="" data-reactid="2217"><span data-reactid="2218"><!-- react-text: 2219 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2220"><span data-reactid="2221"><!-- react-text: 2222 -->Address<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body" style="max-height:240px;overflow-y:scroll;" data-reactid="2223"><table class="" data-reactid="2224"><colgroup data-reactid="2225"><col style="width:150px;min-width:150px;" data-reactid="2226"/><col style="width:150px;min-width:150px;" data-reactid="2227"/><col data-reactid="2228"/></colgroup><tbody class="ant-table-tbody" data-reactid="2229"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2230"><td class="" data-reactid="2231"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2232"></span><!-- react-empty: 2233 --><!-- react-text: 2234 -->Edward King 0<!-- /react-text --></td><td class="" data-reactid="2235"><!-- react-text: 2236 -->32<!-- /react-text --></td><td class="" data-reactid="2237"><!-- react-text: 2238 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2239"><td class="" data-reactid="2240"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2241"></span><!-- react-empty: 2242 --><!-- react-text: 2243 -->Edward King 1<!-- /react-text --></td><td class="" data-reactid="2244"><!-- react-text: 2245 -->32<!-- /react-text --></td><td class="" data-reactid="2246"><!-- react-text: 2247 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2248"><td class="" data-reactid="2249"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2250"></span><!-- react-empty: 2251 --><!-- react-text: 2252 -->Edward King 2<!-- /react-text --></td><td class="" data-reactid="2253"><!-- react-text: 2254 -->32<!-- /react-text --></td><td class="" data-reactid="2255"><!-- react-text: 2256 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2257"><td class="" data-reactid="2258"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2259"></span><!-- react-empty: 2260 --><!-- react-text: 2261 -->Edward King 3<!-- /react-text --></td><td class="" data-reactid="2262"><!-- react-text: 2263 -->32<!-- /react-text --></td><td class="" data-reactid="2264"><!-- react-text: 2265 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2266"><td class="" data-reactid="2267"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2268"></span><!-- react-empty: 2269 --><!-- react-text: 2270 -->Edward King 4<!-- /react-text --></td><td class="" data-reactid="2271"><!-- react-text: 2272 -->32<!-- /react-text --></td><td class="" data-reactid="2273"><!-- react-text: 2274 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2275"><td class="" data-reactid="2276"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2277"></span><!-- react-empty: 2278 --><!-- react-text: 2279 -->Edward King 5<!-- /react-text --></td><td class="" data-reactid="2280"><!-- react-text: 2281 -->32<!-- /react-text --></td><td class="" data-reactid="2282"><!-- react-text: 2283 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2284"><td class="" data-reactid="2285"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2286"></span><!-- react-empty: 2287 --><!-- react-text: 2288 -->Edward King 6<!-- /react-text --></td><td class="" data-reactid="2289"><!-- react-text: 2290 -->32<!-- /react-text --></td><td class="" data-reactid="2291"><!-- react-text: 2292 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2293"><td class="" data-reactid="2294"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2295"></span><!-- react-empty: 2296 --><!-- react-text: 2297 -->Edward King 7<!-- /react-text --></td><td class="" data-reactid="2298"><!-- react-text: 2299 -->32<!-- /react-text --></td><td class="" data-reactid="2300"><!-- react-text: 2301 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2302"><td class="" data-reactid="2303"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2304"></span><!-- react-empty: 2305 --><!-- react-text: 2306 -->Edward King 8<!-- /react-text --></td><td class="" data-reactid="2307"><!-- react-text: 2308 -->32<!-- /react-text --></td><td class="" data-reactid="2309"><!-- react-text: 2310 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2311"><td class="" data-reactid="2312"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2313"></span><!-- react-empty: 2314 --><!-- react-text: 2315 -->Edward King 9<!-- /react-text --></td><td class="" data-reactid="2316"><!-- react-text: 2317 -->32<!-- /react-text --></td><td class="" data-reactid="2318"><!-- react-text: 2319 -->London, Park Lane no. 9<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2320"><td class="" data-reactid="2321"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2322"></span><!-- react-empty: 2323 --><!-- react-text: 2324 -->Edward King 10<!-- /react-text --></td><td class="" data-reactid="2325"><!-- react-text: 2326 -->32<!-- /react-text --></td><td class="" data-reactid="2327"><!-- react-text: 2328 -->London, Park Lane no. 10<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2329"><td class="" data-reactid="2330"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2331"></span><!-- react-empty: 2332 --><!-- react-text: 2333 -->Edward King 11<!-- /react-text --></td><td class="" data-reactid="2334"><!-- react-text: 2335 -->32<!-- /react-text --></td><td class="" data-reactid="2336"><!-- react-text: 2337 -->London, Park Lane no. 11<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2338"><td class="" data-reactid="2339"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2340"></span><!-- react-empty: 2341 --><!-- react-text: 2342 -->Edward King 12<!-- /react-text --></td><td class="" data-reactid="2343"><!-- react-text: 2344 -->32<!-- /react-text --></td><td class="" data-reactid="2345"><!-- react-text: 2346 -->London, Park Lane no. 12<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2347"><td class="" data-reactid="2348"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2349"></span><!-- react-empty: 2350 --><!-- react-text: 2351 -->Edward King 13<!-- /react-text --></td><td class="" data-reactid="2352"><!-- react-text: 2353 -->32<!-- /react-text --></td><td class="" data-reactid="2354"><!-- react-text: 2355 -->London, Park Lane no. 13<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2356"><td class="" data-reactid="2357"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2358"></span><!-- react-empty: 2359 --><!-- react-text: 2360 -->Edward King 14<!-- /react-text --></td><td class="" data-reactid="2361"><!-- react-text: 2362 -->32<!-- /react-text --></td><td class="" data-reactid="2363"><!-- react-text: 2364 -->London, Park Lane no. 14<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2365"><td class="" data-reactid="2366"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2367"></span><!-- react-empty: 2368 --><!-- react-text: 2369 -->Edward King 15<!-- /react-text --></td><td class="" data-reactid="2370"><!-- react-text: 2371 -->32<!-- /react-text --></td><td class="" data-reactid="2372"><!-- react-text: 2373 -->London, Park Lane no. 15<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2374"><td class="" data-reactid="2375"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2376"></span><!-- react-empty: 2377 --><!-- react-text: 2378 -->Edward King 16<!-- /react-text --></td><td class="" data-reactid="2379"><!-- react-text: 2380 -->32<!-- /react-text --></td><td class="" data-reactid="2381"><!-- react-text: 2382 -->London, Park Lane no. 16<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2383"><td class="" data-reactid="2384"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2385"></span><!-- react-empty: 2386 --><!-- react-text: 2387 -->Edward King 17<!-- /react-text --></td><td class="" data-reactid="2388"><!-- react-text: 2389 -->32<!-- /react-text --></td><td class="" data-reactid="2390"><!-- react-text: 2391 -->London, Park Lane no. 17<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2392"><td class="" data-reactid="2393"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2394"></span><!-- react-empty: 2395 --><!-- react-text: 2396 -->Edward King 18<!-- /react-text --></td><td class="" data-reactid="2397"><!-- react-text: 2398 -->32<!-- /react-text --></td><td class="" data-reactid="2399"><!-- react-text: 2400 -->London, Park Lane no. 18<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2401"><td class="" data-reactid="2402"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2403"></span><!-- react-empty: 2404 --><!-- react-text: 2405 -->Edward King 19<!-- /react-text --></td><td class="" data-reactid="2406"><!-- react-text: 2407 -->32<!-- /react-text --></td><td class="" data-reactid="2408"><!-- react-text: 2409 -->London, Park Lane no. 19<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2410"><td class="" data-reactid="2411"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2412"></span><!-- react-empty: 2413 --><!-- react-text: 2414 -->Edward King 20<!-- /react-text --></td><td class="" data-reactid="2415"><!-- react-text: 2416 -->32<!-- /react-text --></td><td class="" data-reactid="2417"><!-- react-text: 2418 -->London, Park Lane no. 20<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2419"><td class="" data-reactid="2420"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2421"></span><!-- react-empty: 2422 --><!-- react-text: 2423 -->Edward King 21<!-- /react-text --></td><td class="" data-reactid="2424"><!-- react-text: 2425 -->32<!-- /react-text --></td><td class="" data-reactid="2426"><!-- react-text: 2427 -->London, Park Lane no. 21<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2428"><td class="" data-reactid="2429"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2430"></span><!-- react-empty: 2431 --><!-- react-text: 2432 -->Edward King 22<!-- /react-text --></td><td class="" data-reactid="2433"><!-- react-text: 2434 -->32<!-- /react-text --></td><td class="" data-reactid="2435"><!-- react-text: 2436 -->London, Park Lane no. 22<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2437"><td class="" data-reactid="2438"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2439"></span><!-- react-empty: 2440 --><!-- react-text: 2441 -->Edward King 23<!-- /react-text --></td><td class="" data-reactid="2442"><!-- react-text: 2443 -->32<!-- /react-text --></td><td class="" data-reactid="2444"><!-- react-text: 2445 -->London, Park Lane no. 23<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2446"><td class="" data-reactid="2447"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2448"></span><!-- react-empty: 2449 --><!-- react-text: 2450 -->Edward King 24<!-- /react-text --></td><td class="" data-reactid="2451"><!-- react-text: 2452 -->32<!-- /react-text --></td><td class="" data-reactid="2453"><!-- react-text: 2454 -->London, Park Lane no. 24<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2455"><td class="" data-reactid="2456"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2457"></span><!-- react-empty: 2458 --><!-- react-text: 2459 -->Edward King 25<!-- /react-text --></td><td class="" data-reactid="2460"><!-- react-text: 2461 -->32<!-- /react-text --></td><td class="" data-reactid="2462"><!-- react-text: 2463 -->London, Park Lane no. 25<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2464"><td class="" data-reactid="2465"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2466"></span><!-- react-empty: 2467 --><!-- react-text: 2468 -->Edward King 26<!-- /react-text --></td><td class="" data-reactid="2469"><!-- react-text: 2470 -->32<!-- /react-text --></td><td class="" data-reactid="2471"><!-- react-text: 2472 -->London, Park Lane no. 26<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2473"><td class="" data-reactid="2474"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2475"></span><!-- react-empty: 2476 --><!-- react-text: 2477 -->Edward King 27<!-- /react-text --></td><td class="" data-reactid="2478"><!-- react-text: 2479 -->32<!-- /react-text --></td><td class="" data-reactid="2480"><!-- react-text: 2481 -->London, Park Lane no. 27<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2482"><td class="" data-reactid="2483"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2484"></span><!-- react-empty: 2485 --><!-- react-text: 2486 -->Edward King 28<!-- /react-text --></td><td class="" data-reactid="2487"><!-- react-text: 2488 -->32<!-- /react-text --></td><td class="" data-reactid="2489"><!-- react-text: 2490 -->London, Park Lane no. 28<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2491"><td class="" data-reactid="2492"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2493"></span><!-- react-empty: 2494 --><!-- react-text: 2495 -->Edward King 29<!-- /react-text --></td><td class="" data-reactid="2496"><!-- react-text: 2497 -->32<!-- /react-text --></td><td class="" data-reactid="2498"><!-- react-text: 2499 -->London, Park Lane no. 29<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2500"><td class="" data-reactid="2501"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2502"></span><!-- react-empty: 2503 --><!-- react-text: 2504 -->Edward King 30<!-- /react-text --></td><td class="" data-reactid="2505"><!-- react-text: 2506 -->32<!-- /react-text --></td><td class="" data-reactid="2507"><!-- react-text: 2508 -->London, Park Lane no. 30<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2509"><td class="" data-reactid="2510"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2511"></span><!-- react-empty: 2512 --><!-- react-text: 2513 -->Edward King 31<!-- /react-text --></td><td class="" data-reactid="2514"><!-- react-text: 2515 -->32<!-- /react-text --></td><td class="" data-reactid="2516"><!-- react-text: 2517 -->London, Park Lane no. 31<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2518"><td class="" data-reactid="2519"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2520"></span><!-- react-empty: 2521 --><!-- react-text: 2522 -->Edward King 32<!-- /react-text --></td><td class="" data-reactid="2523"><!-- react-text: 2524 -->32<!-- /react-text --></td><td class="" data-reactid="2525"><!-- react-text: 2526 -->London, Park Lane no. 32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2527"><td class="" data-reactid="2528"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2529"></span><!-- react-empty: 2530 --><!-- react-text: 2531 -->Edward King 33<!-- /react-text --></td><td class="" data-reactid="2532"><!-- react-text: 2533 -->32<!-- /react-text --></td><td class="" data-reactid="2534"><!-- react-text: 2535 -->London, Park Lane no. 33<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2536"><td class="" data-reactid="2537"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2538"></span><!-- react-empty: 2539 --><!-- react-text: 2540 -->Edward King 34<!-- /react-text --></td><td class="" data-reactid="2541"><!-- react-text: 2542 -->32<!-- /react-text --></td><td class="" data-reactid="2543"><!-- react-text: 2544 -->London, Park Lane no. 34<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2545"><td class="" data-reactid="2546"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2547"></span><!-- react-empty: 2548 --><!-- react-text: 2549 -->Edward King 35<!-- /react-text --></td><td class="" data-reactid="2550"><!-- react-text: 2551 -->32<!-- /react-text --></td><td class="" data-reactid="2552"><!-- react-text: 2553 -->London, Park Lane no. 35<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2554"><td class="" data-reactid="2555"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2556"></span><!-- react-empty: 2557 --><!-- react-text: 2558 -->Edward King 36<!-- /react-text --></td><td class="" data-reactid="2559"><!-- react-text: 2560 -->32<!-- /react-text --></td><td class="" data-reactid="2561"><!-- react-text: 2562 -->London, Park Lane no. 36<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2563"><td class="" data-reactid="2564"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2565"></span><!-- react-empty: 2566 --><!-- react-text: 2567 -->Edward King 37<!-- /react-text --></td><td class="" data-reactid="2568"><!-- react-text: 2569 -->32<!-- /react-text --></td><td class="" data-reactid="2570"><!-- react-text: 2571 -->London, Park Lane no. 37<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2572"><td class="" data-reactid="2573"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2574"></span><!-- react-empty: 2575 --><!-- react-text: 2576 -->Edward King 38<!-- /react-text --></td><td class="" data-reactid="2577"><!-- react-text: 2578 -->32<!-- /react-text --></td><td class="" data-reactid="2579"><!-- react-text: 2580 -->London, Park Lane no. 38<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2581"><td class="" data-reactid="2582"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2583"></span><!-- react-empty: 2584 --><!-- react-text: 2585 -->Edward King 39<!-- /react-text --></td><td class="" data-reactid="2586"><!-- react-text: 2587 -->32<!-- /react-text --></td><td class="" data-reactid="2588"><!-- react-text: 2589 -->London, Park Lane no. 39<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2590"><td class="" data-reactid="2591"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2592"></span><!-- react-empty: 2593 --><!-- react-text: 2594 -->Edward King 40<!-- /react-text --></td><td class="" data-reactid="2595"><!-- react-text: 2596 -->32<!-- /react-text --></td><td class="" data-reactid="2597"><!-- react-text: 2598 -->London, Park Lane no. 40<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2599"><td class="" data-reactid="2600"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2601"></span><!-- react-empty: 2602 --><!-- react-text: 2603 -->Edward King 41<!-- /react-text --></td><td class="" data-reactid="2604"><!-- react-text: 2605 -->32<!-- /react-text --></td><td class="" data-reactid="2606"><!-- react-text: 2607 -->London, Park Lane no. 41<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2608"><td class="" data-reactid="2609"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2610"></span><!-- react-empty: 2611 --><!-- react-text: 2612 -->Edward King 42<!-- /react-text --></td><td class="" data-reactid="2613"><!-- react-text: 2614 -->32<!-- /react-text --></td><td class="" data-reactid="2615"><!-- react-text: 2616 -->London, Park Lane no. 42<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2617"><td class="" data-reactid="2618"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2619"></span><!-- react-empty: 2620 --><!-- react-text: 2621 -->Edward King 43<!-- /react-text --></td><td class="" data-reactid="2622"><!-- react-text: 2623 -->32<!-- /react-text --></td><td class="" data-reactid="2624"><!-- react-text: 2625 -->London, Park Lane no. 43<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2626"><td class="" data-reactid="2627"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2628"></span><!-- react-empty: 2629 --><!-- react-text: 2630 -->Edward King 44<!-- /react-text --></td><td class="" data-reactid="2631"><!-- react-text: 2632 -->32<!-- /react-text --></td><td class="" data-reactid="2633"><!-- react-text: 2634 -->London, Park Lane no. 44<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2635"><td class="" data-reactid="2636"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2637"></span><!-- react-empty: 2638 --><!-- react-text: 2639 -->Edward King 45<!-- /react-text --></td><td class="" data-reactid="2640"><!-- react-text: 2641 -->32<!-- /react-text --></td><td class="" data-reactid="2642"><!-- react-text: 2643 -->London, Park Lane no. 45<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2644"><td class="" data-reactid="2645"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2646"></span><!-- react-empty: 2647 --><!-- react-text: 2648 -->Edward King 46<!-- /react-text --></td><td class="" data-reactid="2649"><!-- react-text: 2650 -->32<!-- /react-text --></td><td class="" data-reactid="2651"><!-- react-text: 2652 -->London, Park Lane no. 46<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2653"><td class="" data-reactid="2654"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2655"></span><!-- react-empty: 2656 --><!-- react-text: 2657 -->Edward King 47<!-- /react-text --></td><td class="" data-reactid="2658"><!-- react-text: 2659 -->32<!-- /react-text --></td><td class="" data-reactid="2660"><!-- react-text: 2661 -->London, Park Lane no. 47<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2662"><td class="" data-reactid="2663"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2664"></span><!-- react-empty: 2665 --><!-- react-text: 2666 -->Edward King 48<!-- /react-text --></td><td class="" data-reactid="2667"><!-- react-text: 2668 -->32<!-- /react-text --></td><td class="" data-reactid="2669"><!-- react-text: 2670 -->London, Park Lane no. 48<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2671"><td class="" data-reactid="2672"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2673"></span><!-- react-empty: 2674 --><!-- react-text: 2675 -->Edward King 49<!-- /react-text --></td><td class="" data-reactid="2676"><!-- react-text: 2677 -->32<!-- /react-text --></td><td class="" data-reactid="2678"><!-- react-text: 2679 -->London, Park Lane no. 49<!-- /react-text --></td></tr></tbody></table></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="2680"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2681"><a data-reactid="2682"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2683"><a data-reactid="2684">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="2685"><a data-reactid="2686">2</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="2687"><a data-reactid="2688"></a></li><!-- react-empty: 2689 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="2690"><div class="code-box-title" data-reactid="2691"><a href="#components-table-demo-fixed-header" data-reactid="2692">固定表头</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/fixed-header.md" data-reactid="2693"><i class="anticon anticon-edit" data-reactid="2694"></i></a></div><div data-reactid="2695"><p data-reactid="2696"><!-- react-text: 2697 -->方便一页内展示大量数据。<!-- /react-text --></p><p data-reactid="2698"><!-- react-text: 2699 -->需要指定 column 的 <!-- /react-text --><code data-reactid="2700"><!-- react-text: 2701 -->width<!-- /react-text --></code><!-- react-text: 2702 --> 属性，否则列头和内容可能不对齐。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="2703"></i></section><section class="highlight-wrapper" data-reactid="2704"><div class="highlight" data-reactid="2705"><i class="anticon anticon-copy code-box-code-copy" data-reactid="2706"></i><pre class="language-jsx" data-reactid="2707"><code data-reactid="2708"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Edward King </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`London, Park Lane no. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">pagination</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> pageSize<span class="token punctuation">:</span> <span class="token number">50</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">scroll</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> y<span class="token punctuation">:</span> <span class="token number">240</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-fixed-columns" data-reactid="2709"><section class="code-box-demo" data-reactid="2710"><div class="ant-table-wrapper" data-reactid="2711"><div class="ant-spin-nested-loading" data-reactid="2712"><div class="ant-spin-container" data-reactid="2713"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="2714"><div class="ant-table-content" data-reactid="2715"><div class="ant-table-scroll" data-reactid="2716"><div class="ant-table-body" style="overflow-x:auto;" data-reactid="2717"><table class="ant-table-fixed" style="width:1300px;" data-reactid="2718"><colgroup data-reactid="2719"><col style="width:100px;min-width:100px;" data-reactid="2720"/><col style="width:100px;min-width:100px;" data-reactid="2721"/><col data-reactid="2722"/><col data-reactid="2723"/><col data-reactid="2724"/><col data-reactid="2725"/><col data-reactid="2726"/><col data-reactid="2727"/><col data-reactid="2728"/><col data-reactid="2729"/><col style="width:100px;min-width:100px;" data-reactid="2730"/></colgroup><thead class="ant-table-thead" data-reactid="2731"><tr data-reactid="2732"><th class="" data-reactid="2733"><span data-reactid="2734"><!-- react-text: 2735 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2736"><span data-reactid="2737"><!-- react-text: 2738 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2739"><span data-reactid="2740"><!-- react-text: 2741 -->Column 1<!-- /react-text --></span></th><th class="" data-reactid="2742"><span data-reactid="2743"><!-- react-text: 2744 -->Column 2<!-- /react-text --></span></th><th class="" data-reactid="2745"><span data-reactid="2746"><!-- react-text: 2747 -->Column 3<!-- /react-text --></span></th><th class="" data-reactid="2748"><span data-reactid="2749"><!-- react-text: 2750 -->Column 4<!-- /react-text --></span></th><th class="" data-reactid="2751"><span data-reactid="2752"><!-- react-text: 2753 -->Column 5<!-- /react-text --></span></th><th class="" data-reactid="2754"><span data-reactid="2755"><!-- react-text: 2756 -->Column 6<!-- /react-text --></span></th><th class="" data-reactid="2757"><span data-reactid="2758"><!-- react-text: 2759 -->Column 7<!-- /react-text --></span></th><th class="" data-reactid="2760"><span data-reactid="2761"><!-- react-text: 2762 -->Column 8<!-- /react-text --></span></th><th class="" data-reactid="2763"><span data-reactid="2764"><!-- react-text: 2765 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2766"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2767"><td class="" data-reactid="2768"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2769"></span><!-- react-empty: 2770 --><!-- react-text: 2771 -->John Brown<!-- /react-text --></td><td class="" data-reactid="2772"><!-- react-text: 2773 -->32<!-- /react-text --></td><td class="" data-reactid="2774"><!-- react-text: 2775 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2776"><!-- react-text: 2777 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2778"><!-- react-text: 2779 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2780"><!-- react-text: 2781 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2782"><!-- react-text: 2783 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2784"><!-- react-text: 2785 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2786"><!-- react-text: 2787 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2788"><!-- react-text: 2789 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2790"><a href="#" data-reactid="2791">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2792"><td class="" data-reactid="2793"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2794"></span><!-- react-empty: 2795 --><!-- react-text: 2796 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2797"><!-- react-text: 2798 -->40<!-- /react-text --></td><td class="" data-reactid="2799"><!-- react-text: 2800 -->London Park<!-- /react-text --></td><td class="" data-reactid="2801"><!-- react-text: 2802 -->London Park<!-- /react-text --></td><td class="" data-reactid="2803"><!-- react-text: 2804 -->London Park<!-- /react-text --></td><td class="" data-reactid="2805"><!-- react-text: 2806 -->London Park<!-- /react-text --></td><td class="" data-reactid="2807"><!-- react-text: 2808 -->London Park<!-- /react-text --></td><td class="" data-reactid="2809"><!-- react-text: 2810 -->London Park<!-- /react-text --></td><td class="" data-reactid="2811"><!-- react-text: 2812 -->London Park<!-- /react-text --></td><td class="" data-reactid="2813"><!-- react-text: 2814 -->London Park<!-- /react-text --></td><td class="" data-reactid="2815"><a href="#" data-reactid="2816">action</a></td></tr></tbody></table></div></div><div class="ant-table-fixed-left" data-reactid="2817"><div class="ant-table-body-outer" data-reactid="2818"><div class="ant-table-body-inner" data-reactid="2819"><table class="ant-table-fixed" data-reactid="2820"><colgroup data-reactid="2821"><col style="width:100px;min-width:100px;" data-reactid="2822"/><col style="width:100px;min-width:100px;" data-reactid="2823"/></colgroup><thead class="ant-table-thead" data-reactid="2824"><tr data-reactid="2825"><th class="" data-reactid="2826"><span data-reactid="2827"><!-- react-text: 2828 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2829"><span data-reactid="2830"><!-- react-text: 2831 -->Age<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2832"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2833"><td class="" data-reactid="2834"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2835"></span><!-- react-empty: 2836 --><!-- react-text: 2837 -->John Brown<!-- /react-text --></td><td class="" data-reactid="2838"><!-- react-text: 2839 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2840"><td class="" data-reactid="2841"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2842"></span><!-- react-empty: 2843 --><!-- react-text: 2844 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2845"><!-- react-text: 2846 -->40<!-- /react-text --></td></tr></tbody></table></div></div></div><div class="ant-table-fixed-right" data-reactid="2847"><div class="ant-table-body-outer" data-reactid="2848"><div class="ant-table-body-inner" data-reactid="2849"><table class="ant-table-fixed" data-reactid="2850"><colgroup data-reactid="2851"><col style="width:100px;min-width:100px;" data-reactid="2852"/></colgroup><thead class="ant-table-thead" data-reactid="2853"><tr data-reactid="2854"><th class="" data-reactid="2855"><span data-reactid="2856"><!-- react-text: 2857 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2858"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2859"><td class="" data-reactid="2860"><a href="#" data-reactid="2861">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2862"><td class="" data-reactid="2863"><a href="#" data-reactid="2864">action</a></td></tr></tbody></table></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="2865"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2866"><a data-reactid="2867"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2868"><a data-reactid="2869">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="2870"><a data-reactid="2871"></a></li><!-- react-empty: 2872 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="2873"><div class="code-box-title" data-reactid="2874"><a href="#components-table-demo-fixed-columns" data-reactid="2875">固定列</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/fixed-columns.md" data-reactid="2876"><i class="anticon anticon-edit" data-reactid="2877"></i></a></div><div data-reactid="2878"><p data-reactid="2879"><!-- react-text: 2880 -->对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 <!-- /react-text --><code data-reactid="2881"><!-- react-text: 2882 -->scroll.x<!-- /react-text --></code><!-- react-text: 2883 --> 配合使用。<!-- /react-text --></p><blockquote data-reactid="2884"><p data-reactid="2885"><!-- react-text: 2886 -->若列头与内容不对齐，请指定列的宽度 <!-- /react-text --><code data-reactid="2887"><!-- react-text: 2888 -->width<!-- /react-text --></code><!-- react-text: 2889 -->。<!-- /react-text --></p><p data-reactid="2890"><!-- react-text: 2891 -->建议指定 <!-- /react-text --><code data-reactid="2892"><!-- react-text: 2893 -->scroll.x<!-- /react-text --></code><!-- react-text: 2894 --> 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 <!-- /react-text --><code data-reactid="2895"><!-- react-text: 2896 -->scroll.x<!-- /react-text --></code><!-- react-text: 2897 -->。<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="2898"></i></section><section class="highlight-wrapper" data-reactid="2899"><div class="highlight" data-reactid="2900"><i class="anticon anticon-copy code-box-code-copy" data-reactid="2901"></i><pre class="language-jsx" data-reactid="2902"><code data-reactid="2903"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Full Name'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> fixed<span class="token punctuation">:</span> <span class="token string">'left'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span> fixed<span class="token punctuation">:</span> <span class="token string">'left'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 1'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 2'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'2'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 3'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'3'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 4'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'4'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 5'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'5'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 6'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'6'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 7'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'7'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 8'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'8'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
fixed<span class="token punctuation">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'New York Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jim Green'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London Park'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">scroll</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">1300</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-fixed-columns-header" data-reactid="2904"><section class="code-box-demo" data-reactid="2905"><div class="ant-table-wrapper" data-reactid="2906"><div class="ant-spin-nested-loading" data-reactid="2907"><div class="ant-spin-container" data-reactid="2908"><div class="ant-table ant-table-large ant-table-fixed-header ant-table-scroll-position-left" data-reactid="2909"><div class="ant-table-content" data-reactid="2910"><div class="ant-table-scroll" data-reactid="2911"><div class="ant-table-header" data-reactid="2912"><table class="ant-table-fixed" style="width:1500px;" data-reactid="2913"><colgroup data-reactid="2914"><col style="width:100px;min-width:100px;" data-reactid="2915"/><col style="width:100px;min-width:100px;" data-reactid="2916"/><col style="width:150px;min-width:150px;" data-reactid="2917"/><col style="width:150px;min-width:150px;" data-reactid="2918"/><col style="width:150px;min-width:150px;" data-reactid="2919"/><col style="width:150px;min-width:150px;" data-reactid="2920"/><col style="width:150px;min-width:150px;" data-reactid="2921"/><col style="width:150px;min-width:150px;" data-reactid="2922"/><col style="width:150px;min-width:150px;" data-reactid="2923"/><col data-reactid="2924"/><col style="width:100px;min-width:100px;" data-reactid="2925"/></colgroup><thead class="ant-table-thead" data-reactid="2926"><tr data-reactid="2927"><th class="" data-reactid="2928"><span data-reactid="2929"><!-- react-text: 2930 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2931"><span data-reactid="2932"><!-- react-text: 2933 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2934"><span data-reactid="2935"><!-- react-text: 2936 -->Column 1<!-- /react-text --></span></th><th class="" data-reactid="2937"><span data-reactid="2938"><!-- react-text: 2939 -->Column 2<!-- /react-text --></span></th><th class="" data-reactid="2940"><span data-reactid="2941"><!-- react-text: 2942 -->Column 3<!-- /react-text --></span></th><th class="" data-reactid="2943"><span data-reactid="2944"><!-- react-text: 2945 -->Column 4<!-- /react-text --></span></th><th class="" data-reactid="2946"><span data-reactid="2947"><!-- react-text: 2948 -->Column 5<!-- /react-text --></span></th><th class="" data-reactid="2949"><span data-reactid="2950"><!-- react-text: 2951 -->Column 6<!-- /react-text --></span></th><th class="" data-reactid="2952"><span data-reactid="2953"><!-- react-text: 2954 -->Column 7<!-- /react-text --></span></th><th class="" data-reactid="2955"><span data-reactid="2956"><!-- react-text: 2957 -->Column 8<!-- /react-text --></span></th><th class="" data-reactid="2958"><span data-reactid="2959"><!-- react-text: 2960 -->Action<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body" style="overflow-x:auto;max-height:300px;overflow-y:scroll;" data-reactid="2961"><table class="ant-table-fixed" style="width:1500px;" data-reactid="2962"><colgroup data-reactid="2963"><col style="width:100px;min-width:100px;" data-reactid="2964"/><col style="width:100px;min-width:100px;" data-reactid="2965"/><col style="width:150px;min-width:150px;" data-reactid="2966"/><col style="width:150px;min-width:150px;" data-reactid="2967"/><col style="width:150px;min-width:150px;" data-reactid="2968"/><col style="width:150px;min-width:150px;" data-reactid="2969"/><col style="width:150px;min-width:150px;" data-reactid="2970"/><col style="width:150px;min-width:150px;" data-reactid="2971"/><col style="width:150px;min-width:150px;" data-reactid="2972"/><col data-reactid="2973"/><col style="width:100px;min-width:100px;" data-reactid="2974"/></colgroup><tbody class="ant-table-tbody" data-reactid="2975"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2976"><td class="" data-reactid="2977"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2978"></span><!-- react-empty: 2979 --><!-- react-text: 2980 -->Edrward 0<!-- /react-text --></td><td class="" data-reactid="2981"><!-- react-text: 2982 -->32<!-- /react-text --></td><td class="" data-reactid="2983"><!-- react-text: 2984 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2985"><!-- react-text: 2986 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2987"><!-- react-text: 2988 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2989"><!-- react-text: 2990 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2991"><!-- react-text: 2992 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2993"><!-- react-text: 2994 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2995"><!-- react-text: 2996 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2997"><!-- react-text: 2998 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2999"><a href="#" data-reactid="3000">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3001"><td class="" data-reactid="3002"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3003"></span><!-- react-empty: 3004 --><!-- react-text: 3005 -->Edrward 1<!-- /react-text --></td><td class="" data-reactid="3006"><!-- react-text: 3007 -->32<!-- /react-text --></td><td class="" data-reactid="3008"><!-- react-text: 3009 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3010"><!-- react-text: 3011 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3012"><!-- react-text: 3013 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3014"><!-- react-text: 3015 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3016"><!-- react-text: 3017 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3018"><!-- react-text: 3019 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3020"><!-- react-text: 3021 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3022"><!-- react-text: 3023 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3024"><a href="#" data-reactid="3025">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3026"><td class="" data-reactid="3027"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3028"></span><!-- react-empty: 3029 --><!-- react-text: 3030 -->Edrward 2<!-- /react-text --></td><td class="" data-reactid="3031"><!-- react-text: 3032 -->32<!-- /react-text --></td><td class="" data-reactid="3033"><!-- react-text: 3034 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3035"><!-- react-text: 3036 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3037"><!-- react-text: 3038 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3039"><!-- react-text: 3040 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3041"><!-- react-text: 3042 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3043"><!-- react-text: 3044 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3045"><!-- react-text: 3046 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3047"><!-- react-text: 3048 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3049"><a href="#" data-reactid="3050">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3051"><td class="" data-reactid="3052"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3053"></span><!-- react-empty: 3054 --><!-- react-text: 3055 -->Edrward 3<!-- /react-text --></td><td class="" data-reactid="3056"><!-- react-text: 3057 -->32<!-- /react-text --></td><td class="" data-reactid="3058"><!-- react-text: 3059 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3060"><!-- react-text: 3061 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3062"><!-- react-text: 3063 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3064"><!-- react-text: 3065 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3066"><!-- react-text: 3067 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3068"><!-- react-text: 3069 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3070"><!-- react-text: 3071 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3072"><!-- react-text: 3073 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3074"><a href="#" data-reactid="3075">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3076"><td class="" data-reactid="3077"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3078"></span><!-- react-empty: 3079 --><!-- react-text: 3080 -->Edrward 4<!-- /react-text --></td><td class="" data-reactid="3081"><!-- react-text: 3082 -->32<!-- /react-text --></td><td class="" data-reactid="3083"><!-- react-text: 3084 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3085"><!-- react-text: 3086 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3087"><!-- react-text: 3088 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3089"><!-- react-text: 3090 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3091"><!-- react-text: 3092 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3093"><!-- react-text: 3094 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3095"><!-- react-text: 3096 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3097"><!-- react-text: 3098 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3099"><a href="#" data-reactid="3100">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3101"><td class="" data-reactid="3102"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3103"></span><!-- react-empty: 3104 --><!-- react-text: 3105 -->Edrward 5<!-- /react-text --></td><td class="" data-reactid="3106"><!-- react-text: 3107 -->32<!-- /react-text --></td><td class="" data-reactid="3108"><!-- react-text: 3109 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3110"><!-- react-text: 3111 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3112"><!-- react-text: 3113 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3114"><!-- react-text: 3115 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3116"><!-- react-text: 3117 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3118"><!-- react-text: 3119 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3120"><!-- react-text: 3121 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3122"><!-- react-text: 3123 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3124"><a href="#" data-reactid="3125">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3126"><td class="" data-reactid="3127"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3128"></span><!-- react-empty: 3129 --><!-- react-text: 3130 -->Edrward 6<!-- /react-text --></td><td class="" data-reactid="3131"><!-- react-text: 3132 -->32<!-- /react-text --></td><td class="" data-reactid="3133"><!-- react-text: 3134 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3135"><!-- react-text: 3136 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3137"><!-- react-text: 3138 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3139"><!-- react-text: 3140 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3141"><!-- react-text: 3142 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3143"><!-- react-text: 3144 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3145"><!-- react-text: 3146 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3147"><!-- react-text: 3148 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3149"><a href="#" data-reactid="3150">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3151"><td class="" data-reactid="3152"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3153"></span><!-- react-empty: 3154 --><!-- react-text: 3155 -->Edrward 7<!-- /react-text --></td><td class="" data-reactid="3156"><!-- react-text: 3157 -->32<!-- /react-text --></td><td class="" data-reactid="3158"><!-- react-text: 3159 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3160"><!-- react-text: 3161 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3162"><!-- react-text: 3163 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3164"><!-- react-text: 3165 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3166"><!-- react-text: 3167 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3168"><!-- react-text: 3169 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3170"><!-- react-text: 3171 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3172"><!-- react-text: 3173 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3174"><a href="#" data-reactid="3175">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3176"><td class="" data-reactid="3177"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3178"></span><!-- react-empty: 3179 --><!-- react-text: 3180 -->Edrward 8<!-- /react-text --></td><td class="" data-reactid="3181"><!-- react-text: 3182 -->32<!-- /react-text --></td><td class="" data-reactid="3183"><!-- react-text: 3184 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3185"><!-- react-text: 3186 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3187"><!-- react-text: 3188 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3189"><!-- react-text: 3190 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3191"><!-- react-text: 3192 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3193"><!-- react-text: 3194 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3195"><!-- react-text: 3196 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3197"><!-- react-text: 3198 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3199"><a href="#" data-reactid="3200">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3201"><td class="" data-reactid="3202"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3203"></span><!-- react-empty: 3204 --><!-- react-text: 3205 -->Edrward 9<!-- /react-text --></td><td class="" data-reactid="3206"><!-- react-text: 3207 -->32<!-- /react-text --></td><td class="" data-reactid="3208"><!-- react-text: 3209 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3210"><!-- react-text: 3211 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3212"><!-- react-text: 3213 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3214"><!-- react-text: 3215 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3216"><!-- react-text: 3217 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3218"><!-- react-text: 3219 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3220"><!-- react-text: 3221 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3222"><!-- react-text: 3223 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3224"><a href="#" data-reactid="3225">action</a></td></tr></tbody></table></div></div><div class="ant-table-fixed-left" data-reactid="3226"><div class="ant-table-header" data-reactid="3227"><table class="ant-table-fixed" data-reactid="3228"><colgroup data-reactid="3229"><col style="width:100px;min-width:100px;" data-reactid="3230"/><col style="width:100px;min-width:100px;" data-reactid="3231"/></colgroup><thead class="ant-table-thead" data-reactid="3232"><tr data-reactid="3233"><th class="" data-reactid="3234"><span data-reactid="3235"><!-- react-text: 3236 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="3237"><span data-reactid="3238"><!-- react-text: 3239 -->Age<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" data-reactid="3240"><div class="ant-table-body-inner" style="max-height:300px;overflow-y:scroll;" data-reactid="3241"><table class="ant-table-fixed" data-reactid="3242"><colgroup data-reactid="3243"><col style="width:100px;min-width:100px;" data-reactid="3244"/><col style="width:100px;min-width:100px;" data-reactid="3245"/></colgroup><tbody class="ant-table-tbody" data-reactid="3246"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3247"><td class="" data-reactid="3248"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3249"></span><!-- react-empty: 3250 --><!-- react-text: 3251 -->Edrward 0<!-- /react-text --></td><td class="" data-reactid="3252"><!-- react-text: 3253 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3254"><td class="" data-reactid="3255"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3256"></span><!-- react-empty: 3257 --><!-- react-text: 3258 -->Edrward 1<!-- /react-text --></td><td class="" data-reactid="3259"><!-- react-text: 3260 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3261"><td class="" data-reactid="3262"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3263"></span><!-- react-empty: 3264 --><!-- react-text: 3265 -->Edrward 2<!-- /react-text --></td><td class="" data-reactid="3266"><!-- react-text: 3267 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3268"><td class="" data-reactid="3269"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3270"></span><!-- react-empty: 3271 --><!-- react-text: 3272 -->Edrward 3<!-- /react-text --></td><td class="" data-reactid="3273"><!-- react-text: 3274 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3275"><td class="" data-reactid="3276"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3277"></span><!-- react-empty: 3278 --><!-- react-text: 3279 -->Edrward 4<!-- /react-text --></td><td class="" data-reactid="3280"><!-- react-text: 3281 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3282"><td class="" data-reactid="3283"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3284"></span><!-- react-empty: 3285 --><!-- react-text: 3286 -->Edrward 5<!-- /react-text --></td><td class="" data-reactid="3287"><!-- react-text: 3288 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3289"><td class="" data-reactid="3290"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3291"></span><!-- react-empty: 3292 --><!-- react-text: 3293 -->Edrward 6<!-- /react-text --></td><td class="" data-reactid="3294"><!-- react-text: 3295 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3296"><td class="" data-reactid="3297"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3298"></span><!-- react-empty: 3299 --><!-- react-text: 3300 -->Edrward 7<!-- /react-text --></td><td class="" data-reactid="3301"><!-- react-text: 3302 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3303"><td class="" data-reactid="3304"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3305"></span><!-- react-empty: 3306 --><!-- react-text: 3307 -->Edrward 8<!-- /react-text --></td><td class="" data-reactid="3308"><!-- react-text: 3309 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3310"><td class="" data-reactid="3311"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3312"></span><!-- react-empty: 3313 --><!-- react-text: 3314 -->Edrward 9<!-- /react-text --></td><td class="" data-reactid="3315"><!-- react-text: 3316 -->32<!-- /react-text --></td></tr></tbody></table></div></div></div><div class="ant-table-fixed-right" data-reactid="3317"><div class="ant-table-header" data-reactid="3318"><table class="ant-table-fixed" data-reactid="3319"><colgroup data-reactid="3320"><col style="width:100px;min-width:100px;" data-reactid="3321"/></colgroup><thead class="ant-table-thead" data-reactid="3322"><tr data-reactid="3323"><th class="" data-reactid="3324"><span data-reactid="3325"><!-- react-text: 3326 -->Action<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" data-reactid="3327"><div class="ant-table-body-inner" style="max-height:300px;overflow-y:scroll;" data-reactid="3328"><table class="ant-table-fixed" data-reactid="3329"><colgroup data-reactid="3330"><col style="width:100px;min-width:100px;" data-reactid="3331"/></colgroup><tbody class="ant-table-tbody" data-reactid="3332"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3333"><td class="" data-reactid="3334"><a href="#" data-reactid="3335">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3336"><td class="" data-reactid="3337"><a href="#" data-reactid="3338">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3339"><td class="" data-reactid="3340"><a href="#" data-reactid="3341">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3342"><td class="" data-reactid="3343"><a href="#" data-reactid="3344">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3345"><td class="" data-reactid="3346"><a href="#" data-reactid="3347">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3348"><td class="" data-reactid="3349"><a href="#" data-reactid="3350">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3351"><td class="" data-reactid="3352"><a href="#" data-reactid="3353">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3354"><td class="" data-reactid="3355"><a href="#" data-reactid="3356">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3357"><td class="" data-reactid="3358"><a href="#" data-reactid="3359">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3360"><td class="" data-reactid="3361"><a href="#" data-reactid="3362">action</a></td></tr></tbody></table></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="3363"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3364"><a data-reactid="3365"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3366"><a data-reactid="3367">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="3368"><a data-reactid="3369">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="3370"><a data-reactid="3371">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="3372"><a data-reactid="3373">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next" data-reactid="3374"><a data-reactid="3375">5</a></li><li title="Next 5 Pages" class="ant-pagination-jump-next" data-reactid="3376"><a data-reactid="3377"></a></li><li title="10" class="ant-pagination-item ant-pagination-item-10" data-reactid="3378"><a data-reactid="3379">10</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="3380"><a data-reactid="3381"></a></li><!-- react-empty: 3382 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="3383"><div class="code-box-title" data-reactid="3384"><a href="#components-table-demo-fixed-columns-header" data-reactid="3385">固定头和列</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/fixed-columns-header.md" data-reactid="3386"><i class="anticon anticon-edit" data-reactid="3387"></i></a></div><div data-reactid="3388"><p data-reactid="3389"><!-- react-text: 3390 -->适合同时展示有大量数据和数据列。<!-- /react-text --></p><blockquote data-reactid="3391"><p data-reactid="3392"><!-- react-text: 3393 -->若列头与内容不对齐，请指定列的宽度 <!-- /react-text --><code data-reactid="3394"><!-- react-text: 3395 -->width<!-- /react-text --></code><!-- react-text: 3396 -->。<!-- /react-text --></p><p data-reactid="3397"><!-- react-text: 3398 -->建议指定 <!-- /react-text --><code data-reactid="3399"><!-- react-text: 3400 -->scroll.x<!-- /react-text --></code><!-- react-text: 3401 --> 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 <!-- /react-text --><code data-reactid="3402"><!-- react-text: 3403 -->scroll.x<!-- /react-text --></code><!-- react-text: 3404 -->。<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3405"></i></section><section class="highlight-wrapper" data-reactid="3406"><div class="highlight" data-reactid="3407"><i class="anticon anticon-copy code-box-code-copy" data-reactid="3408"></i><pre class="language-jsx" data-reactid="3409"><code data-reactid="3410"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Full Name'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> fixed<span class="token punctuation">:</span> <span class="token string">'left'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span> fixed<span class="token punctuation">:</span> <span class="token string">'left'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 1'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 2'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 3'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 4'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'4'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 5'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'5'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 6'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'6'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 7'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'7'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">150</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Column 8'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'8'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
fixed<span class="token punctuation">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Edrward </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`London Park no. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">scroll</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">1500</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">300</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-grouping-columns" data-reactid="3411"><section class="code-box-demo" data-reactid="3412"><div class="ant-table-wrapper" data-reactid="3413"><div class="ant-spin-nested-loading" data-reactid="3414"><div class="ant-spin-container" data-reactid="3415"><div class="ant-table ant-table-middle ant-table-bordered ant-table-fixed-header ant-table-scroll-position-left" data-reactid="3416"><div class="ant-table-content" data-reactid="3417"><div class="ant-table-scroll" data-reactid="3418"><div class="ant-table-header" data-reactid="3419"><table class="ant-table-fixed" style="width:1010px;" data-reactid="3420"><colgroup data-reactid="3421"><col style="width:100px;min-width:100px;" data-reactid="3422"/><col style="width:100px;min-width:100px;" data-reactid="3423"/><col style="width:200px;min-width:200px;" data-reactid="3424"/><col style="width:50px;min-width:50px;" data-reactid="3425"/><col style="width:100px;min-width:100px;" data-reactid="3426"/><col style="width:200px;min-width:200px;" data-reactid="3427"/><col style="width:200px;min-width:200px;" data-reactid="3428"/><col style="width:60px;min-width:60px;" data-reactid="3429"/></colgroup><thead class="ant-table-thead" data-reactid="3430"><tr data-reactid="3431"><th class="" rowspan="4" data-reactid="3432"><span data-reactid="3433"><!-- react-text: 3434 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="3435"></i></span></th><th class="" colspan="4" data-reactid="3436"><span data-reactid="3437"><!-- react-text: 3438 -->Other<!-- /react-text --></span></th><th class="" colspan="2" data-reactid="3439"><span data-reactid="3440"><!-- react-text: 3441 -->Company<!-- /react-text --></span></th><th class="" rowspan="4" data-reactid="3442"><span data-reactid="3443"><!-- react-text: 3444 -->Gender<!-- /react-text --></span></th></tr><tr data-reactid="3445"><th class="" rowspan="3" data-reactid="3446"><span data-reactid="3447"><!-- react-text: 3448 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="3449"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="3450"><i class="anticon anticon-caret-up" data-reactid="3451"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="3452"><i class="anticon anticon-caret-down" data-reactid="3453"></i></span></div></span></th><th class="" colspan="3" data-reactid="3454"><span data-reactid="3455"><!-- react-text: 3456 -->Address<!-- /react-text --></span></th><th class="" rowspan="3" data-reactid="3457"><span data-reactid="3458"><!-- react-text: 3459 -->Company Address<!-- /react-text --></span></th><th class="" rowspan="3" data-reactid="3460"><span data-reactid="3461"><!-- react-text: 3462 -->Company Name<!-- /react-text --></span></th></tr><tr data-reactid="3463"><th class="" rowspan="2" data-reactid="3464"><span data-reactid="3465"><!-- react-text: 3466 -->Street<!-- /react-text --></span></th><th class="" colspan="2" data-reactid="3467"><span data-reactid="3468"><!-- react-text: 3469 -->Block<!-- /react-text --></span></th></tr><tr data-reactid="3470"><th class="" data-reactid="3471"><span data-reactid="3472"><!-- react-text: 3473 -->Building<!-- /react-text --></span></th><th class="" data-reactid="3474"><span data-reactid="3475"><!-- react-text: 3476 -->Door No.<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body" style="overflow-x:auto;max-height:240px;overflow-y:scroll;" data-reactid="3477"><table class="ant-table-fixed" style="width:1010px;" data-reactid="3478"><colgroup data-reactid="3479"><col style="width:100px;min-width:100px;" data-reactid="3480"/><col style="width:100px;min-width:100px;" data-reactid="3481"/><col style="width:200px;min-width:200px;" data-reactid="3482"/><col style="width:50px;min-width:50px;" data-reactid="3483"/><col style="width:100px;min-width:100px;" data-reactid="3484"/><col style="width:200px;min-width:200px;" data-reactid="3485"/><col style="width:200px;min-width:200px;" data-reactid="3486"/><col style="width:60px;min-width:60px;" data-reactid="3487"/></colgroup><tbody class="ant-table-tbody" data-reactid="3488"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3489"><td class="" data-reactid="3490"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3491"></span><!-- react-empty: 3492 --><!-- react-text: 3493 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3494"><!-- react-text: 3495 -->1<!-- /react-text --></td><td class="" data-reactid="3496"><!-- react-text: 3497 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3498"><!-- react-text: 3499 -->C<!-- /react-text --></td><td class="" data-reactid="3500"><!-- react-text: 3501 -->2035<!-- /react-text --></td><td class="" data-reactid="3502"><!-- react-text: 3503 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3504"><!-- react-text: 3505 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3506"><!-- react-text: 3507 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3508"><td class="" data-reactid="3509"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3510"></span><!-- react-empty: 3511 --><!-- react-text: 3512 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3513"><!-- react-text: 3514 -->2<!-- /react-text --></td><td class="" data-reactid="3515"><!-- react-text: 3516 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3517"><!-- react-text: 3518 -->C<!-- /react-text --></td><td class="" data-reactid="3519"><!-- react-text: 3520 -->2035<!-- /react-text --></td><td class="" data-reactid="3521"><!-- react-text: 3522 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3523"><!-- react-text: 3524 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3525"><!-- react-text: 3526 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3527"><td class="" data-reactid="3528"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3529"></span><!-- react-empty: 3530 --><!-- react-text: 3531 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3532"><!-- react-text: 3533 -->3<!-- /react-text --></td><td class="" data-reactid="3534"><!-- react-text: 3535 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3536"><!-- react-text: 3537 -->C<!-- /react-text --></td><td class="" data-reactid="3538"><!-- react-text: 3539 -->2035<!-- /react-text --></td><td class="" data-reactid="3540"><!-- react-text: 3541 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3542"><!-- react-text: 3543 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3544"><!-- react-text: 3545 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3546"><td class="" data-reactid="3547"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3548"></span><!-- react-empty: 3549 --><!-- react-text: 3550 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3551"><!-- react-text: 3552 -->4<!-- /react-text --></td><td class="" data-reactid="3553"><!-- react-text: 3554 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3555"><!-- react-text: 3556 -->C<!-- /react-text --></td><td class="" data-reactid="3557"><!-- react-text: 3558 -->2035<!-- /react-text --></td><td class="" data-reactid="3559"><!-- react-text: 3560 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3561"><!-- react-text: 3562 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3563"><!-- react-text: 3564 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3565"><td class="" data-reactid="3566"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3567"></span><!-- react-empty: 3568 --><!-- react-text: 3569 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3570"><!-- react-text: 3571 -->5<!-- /react-text --></td><td class="" data-reactid="3572"><!-- react-text: 3573 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3574"><!-- react-text: 3575 -->C<!-- /react-text --></td><td class="" data-reactid="3576"><!-- react-text: 3577 -->2035<!-- /react-text --></td><td class="" data-reactid="3578"><!-- react-text: 3579 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3580"><!-- react-text: 3581 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3582"><!-- react-text: 3583 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3584"><td class="" data-reactid="3585"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3586"></span><!-- react-empty: 3587 --><!-- react-text: 3588 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3589"><!-- react-text: 3590 -->6<!-- /react-text --></td><td class="" data-reactid="3591"><!-- react-text: 3592 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3593"><!-- react-text: 3594 -->C<!-- /react-text --></td><td class="" data-reactid="3595"><!-- react-text: 3596 -->2035<!-- /react-text --></td><td class="" data-reactid="3597"><!-- react-text: 3598 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3599"><!-- react-text: 3600 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3601"><!-- react-text: 3602 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3603"><td class="" data-reactid="3604"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3605"></span><!-- react-empty: 3606 --><!-- react-text: 3607 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3608"><!-- react-text: 3609 -->7<!-- /react-text --></td><td class="" data-reactid="3610"><!-- react-text: 3611 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3612"><!-- react-text: 3613 -->C<!-- /react-text --></td><td class="" data-reactid="3614"><!-- react-text: 3615 -->2035<!-- /react-text --></td><td class="" data-reactid="3616"><!-- react-text: 3617 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3618"><!-- react-text: 3619 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3620"><!-- react-text: 3621 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3622"><td class="" data-reactid="3623"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3624"></span><!-- react-empty: 3625 --><!-- react-text: 3626 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3627"><!-- react-text: 3628 -->8<!-- /react-text --></td><td class="" data-reactid="3629"><!-- react-text: 3630 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3631"><!-- react-text: 3632 -->C<!-- /react-text --></td><td class="" data-reactid="3633"><!-- react-text: 3634 -->2035<!-- /react-text --></td><td class="" data-reactid="3635"><!-- react-text: 3636 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3637"><!-- react-text: 3638 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3639"><!-- react-text: 3640 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3641"><td class="" data-reactid="3642"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3643"></span><!-- react-empty: 3644 --><!-- react-text: 3645 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3646"><!-- react-text: 3647 -->9<!-- /react-text --></td><td class="" data-reactid="3648"><!-- react-text: 3649 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3650"><!-- react-text: 3651 -->C<!-- /react-text --></td><td class="" data-reactid="3652"><!-- react-text: 3653 -->2035<!-- /react-text --></td><td class="" data-reactid="3654"><!-- react-text: 3655 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3656"><!-- react-text: 3657 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3658"><!-- react-text: 3659 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3660"><td class="" data-reactid="3661"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3662"></span><!-- react-empty: 3663 --><!-- react-text: 3664 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3665"><!-- react-text: 3666 -->10<!-- /react-text --></td><td class="" data-reactid="3667"><!-- react-text: 3668 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3669"><!-- react-text: 3670 -->C<!-- /react-text --></td><td class="" data-reactid="3671"><!-- react-text: 3672 -->2035<!-- /react-text --></td><td class="" data-reactid="3673"><!-- react-text: 3674 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3675"><!-- react-text: 3676 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3677"><!-- react-text: 3678 -->M<!-- /react-text --></td></tr></tbody></table></div></div><div class="ant-table-fixed-left" data-reactid="3679"><div class="ant-table-header" data-reactid="3680"><table class="ant-table-fixed" data-reactid="3681"><colgroup data-reactid="3682"><col style="width:100px;min-width:100px;" data-reactid="3683"/></colgroup><thead class="ant-table-thead" data-reactid="3684"><tr data-reactid="3685"><th class="" rowspan="4" data-reactid="3686"><span data-reactid="3687"><!-- react-text: 3688 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="3689"></i></span></th></tr></thead></table></div><div class="ant-table-body-outer" data-reactid="3690"><div class="ant-table-body-inner" style="max-height:240px;overflow-y:scroll;" data-reactid="3691"><table class="ant-table-fixed" data-reactid="3692"><colgroup data-reactid="3693"><col style="width:100px;min-width:100px;" data-reactid="3694"/></colgroup><tbody class="ant-table-tbody" data-reactid="3695"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3696"><td class="" data-reactid="3697"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3698"></span><!-- react-empty: 3699 --><!-- react-text: 3700 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3701"><td class="" data-reactid="3702"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3703"></span><!-- react-empty: 3704 --><!-- react-text: 3705 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3706"><td class="" data-reactid="3707"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3708"></span><!-- react-empty: 3709 --><!-- react-text: 3710 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3711"><td class="" data-reactid="3712"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3713"></span><!-- react-empty: 3714 --><!-- react-text: 3715 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3716"><td class="" data-reactid="3717"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3718"></span><!-- react-empty: 3719 --><!-- react-text: 3720 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3721"><td class="" data-reactid="3722"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3723"></span><!-- react-empty: 3724 --><!-- react-text: 3725 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3726"><td class="" data-reactid="3727"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3728"></span><!-- react-empty: 3729 --><!-- react-text: 3730 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3731"><td class="" data-reactid="3732"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3733"></span><!-- react-empty: 3734 --><!-- react-text: 3735 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3736"><td class="" data-reactid="3737"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3738"></span><!-- react-empty: 3739 --><!-- react-text: 3740 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3741"><td class="" data-reactid="3742"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3743"></span><!-- react-empty: 3744 --><!-- react-text: 3745 -->John Brown<!-- /react-text --></td></tr></tbody></table></div></div></div><div class="ant-table-fixed-right" data-reactid="3746"><div class="ant-table-header" data-reactid="3747"><table class="ant-table-fixed" data-reactid="3748"><colgroup data-reactid="3749"><col style="width:60px;min-width:60px;" data-reactid="3750"/></colgroup><thead class="ant-table-thead" data-reactid="3751"><tr data-reactid="3752"><th class="" rowspan="4" data-reactid="3753"><span data-reactid="3754"><!-- react-text: 3755 -->Gender<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" data-reactid="3756"><div class="ant-table-body-inner" style="max-height:240px;overflow-y:scroll;" data-reactid="3757"><table class="ant-table-fixed" data-reactid="3758"><colgroup data-reactid="3759"><col style="width:60px;min-width:60px;" data-reactid="3760"/></colgroup><tbody class="ant-table-tbody" data-reactid="3761"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3762"><td class="" data-reactid="3763"><!-- react-text: 3764 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3765"><td class="" data-reactid="3766"><!-- react-text: 3767 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3768"><td class="" data-reactid="3769"><!-- react-text: 3770 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3771"><td class="" data-reactid="3772"><!-- react-text: 3773 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3774"><td class="" data-reactid="3775"><!-- react-text: 3776 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3777"><td class="" data-reactid="3778"><!-- react-text: 3779 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3780"><td class="" data-reactid="3781"><!-- react-text: 3782 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3783"><td class="" data-reactid="3784"><!-- react-text: 3785 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3786"><td class="" data-reactid="3787"><!-- react-text: 3788 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3789"><td class="" data-reactid="3790"><!-- react-text: 3791 -->M<!-- /react-text --></td></tr></tbody></table></div></div></div></div></div><ul class="ant-pagination ant-table-pagination mini" unselectable="unselectable" data-reactid="3792"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3793"><a data-reactid="3794"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3795"><a data-reactid="3796">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="3797"><a data-reactid="3798">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="3799"><a data-reactid="3800">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="3801"><a data-reactid="3802">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next" data-reactid="3803"><a data-reactid="3804">5</a></li><li title="Next 5 Pages" class="ant-pagination-jump-next" data-reactid="3805"><a data-reactid="3806"></a></li><li title="10" class="ant-pagination-item ant-pagination-item-10" data-reactid="3807"><a data-reactid="3808">10</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="3809"><a data-reactid="3810"></a></li><!-- react-empty: 3811 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="3812"><div class="code-box-title" data-reactid="3813"><a href="#components-table-demo-grouping-columns" data-reactid="3814">表头分组</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/grouping-columns.md" data-reactid="3815"><i class="anticon anticon-edit" data-reactid="3816"></i></a></div><div data-reactid="3817"><p data-reactid="3818"><code data-reactid="3819"><!-- react-text: 3820 -->columns[n]<!-- /react-text --></code><!-- react-text: 3821 --> 可以内嵌 <!-- /react-text --><code data-reactid="3822"><!-- react-text: 3823 -->children<!-- /react-text --></code><!-- react-text: 3824 -->，以渲染分组表头。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3825"></i></section><section class="highlight-wrapper" data-reactid="3826"><div class="highlight" data-reactid="3827"><i class="anticon anticon-copy code-box-code-copy" data-reactid="3828"></i><pre class="language-jsx" data-reactid="3829"><code data-reactid="3830"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
fixed<span class="token punctuation">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
filters<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">'Joe'</span><span class="token punctuation">,</span>
value<span class="token punctuation">:</span> <span class="token string">'Joe'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span>
value<span class="token punctuation">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
onFilter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Other'</span><span class="token punctuation">,</span>
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
sorter<span class="token punctuation">:</span> <span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> a<span class="token punctuation">.</span>age <span class="token operator">-</span> b<span class="token punctuation">.</span>age<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Street'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'street'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'street'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Block'</span><span class="token punctuation">,</span>
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Building'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'building'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'building'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Door No.'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'number'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Company'</span><span class="token punctuation">,</span>
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Company Address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'companyAddress'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'companyAddress'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Company Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'companyName'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'companyName'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Gender'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'gender'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'gender'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
fixed<span class="token punctuation">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
street<span class="token punctuation">:</span> <span class="token string">'Lake Park'</span><span class="token punctuation">,</span>
building<span class="token punctuation">:</span> <span class="token string">'C'</span><span class="token punctuation">,</span>
number<span class="token punctuation">:</span> <span class="token number">2035</span><span class="token punctuation">,</span>
companyAddress<span class="token punctuation">:</span> <span class="token string">'Lake Street 42'</span><span class="token punctuation">,</span>
companyName<span class="token punctuation">:</span> <span class="token string">'SoftLake Co'</span><span class="token punctuation">,</span>
gender<span class="token punctuation">:</span> <span class="token string">'M'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
<span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>
<span class="token attr-name">bordered</span>
<span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span>
<span class="token attr-name">scroll</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">1010</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">240</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-edit-cell" data-reactid="3831"><section class="code-box-demo" data-reactid="3832"><div data-reactid="3833"><button type="button" class="ant-btn editable-add-btn" data-reactid="3834"><span data-reactid="3835">Add</span></button><div class="ant-table-wrapper" data-reactid="3836"><div class="ant-spin-nested-loading" data-reactid="3837"><div class="ant-spin-container" data-reactid="3838"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="3839"><div class="ant-table-content" data-reactid="3840"><div class="ant-table-body" data-reactid="3841"><table class="" data-reactid="3842"><colgroup data-reactid="3843"><col style="width:30%;min-width:30%;" data-reactid="3844"/><col data-reactid="3845"/><col data-reactid="3846"/><col data-reactid="3847"/></colgroup><thead class="ant-table-thead" data-reactid="3848"><tr data-reactid="3849"><th class="" data-reactid="3850"><span data-reactid="3851"><!-- react-text: 3852 -->name<!-- /react-text --></span></th><th class="" data-reactid="3853"><span data-reactid="3854"><!-- react-text: 3855 -->age<!-- /react-text --></span></th><th class="" data-reactid="3856"><span data-reactid="3857"><!-- react-text: 3858 -->address<!-- /react-text --></span></th><th class="" data-reactid="3859"><span data-reactid="3860"><!-- react-text: 3861 -->operation<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="3862"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3863"><td class="" data-reactid="3864"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3865"></span><!-- react-empty: 3866 --><div class="editable-cell" data-reactid="3867"><div class="editable-cell-text-wrapper" data-reactid="3868"><!-- react-text: 3869 -->Edward King 0<!-- /react-text --><i class="anticon anticon-edit editable-cell-icon" data-reactid="3870"></i></div></div></td><td class="" data-reactid="3871"><!-- react-text: 3872 -->32<!-- /react-text --></td><td class="" data-reactid="3873"><!-- react-text: 3874 -->London, Park Lane no. 0<!-- /react-text --></td><td class="" data-reactid="3875"><a href="#" data-reactid="3876">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3877"><td class="" data-reactid="3878"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3879"></span><!-- react-empty: 3880 --><div class="editable-cell" data-reactid="3881"><div class="editable-cell-text-wrapper" data-reactid="3882"><!-- react-text: 3883 -->Edward King 1<!-- /react-text --><i class="anticon anticon-edit editable-cell-icon" data-reactid="3884"></i></div></div></td><td class="" data-reactid="3885"><!-- react-text: 3886 -->32<!-- /react-text --></td><td class="" data-reactid="3887"><!-- react-text: 3888 -->London, Park Lane no. 1<!-- /react-text --></td><td class="" data-reactid="3889"><a href="#" data-reactid="3890">Delete</a></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="3891"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3892"><a data-reactid="3893"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3894"><a data-reactid="3895">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="3896"><a data-reactid="3897"></a></li><!-- react-empty: 3898 --></ul></div></div></div></div><style data-reactid="3899">.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;
}</style></section><section class="code-box-meta markdown" data-reactid="3900"><div class="code-box-title" data-reactid="3901"><a href="#components-table-demo-edit-cell" data-reactid="3902">可编辑单元格</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/edit-cell.md" data-reactid="3903"><i class="anticon anticon-edit" data-reactid="3904"></i></a></div><div data-reactid="3905"><p data-reactid="3906"><!-- react-text: 3907 -->带单元格编辑功能的表格。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3908"></i></section><section class="highlight-wrapper" data-reactid="3909"><div class="highlight" data-reactid="3910"><i class="anticon anticon-copy code-box-code-copy" data-reactid="3911"></i><pre class="language-jsx" data-reactid="3912"><code data-reactid="3913"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Icon<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> Popconfirm <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">EditableCell</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
value<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>value<span class="token punctuation">,</span>
editable<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
handleChange <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> value <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> value <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
check <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> editable<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onChange<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
edit <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> editable<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> value<span class="token punctuation">,</span> editable <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>editable-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span>
editable <span class="token operator">?</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>editable-cell-input-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Input</span>
<span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>value<span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>
<span class="token attr-name">onPressEnter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>check<span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span>
<span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>check<span class="token punctuation">"</span></span>
<span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>editable-cell-icon-check<span class="token punctuation">"</span></span>
<span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>check<span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">:</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>editable-cell-text-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span>value <span class="token operator">||</span> <span class="token string">' '</span><span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span>
<span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>edit<span class="token punctuation">"</span></span>
<span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>editable-cell-icon<span class="token punctuation">"</span></span>
<span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>edit<span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">EditableTable</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token string">'30%'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>EditableCell</span>
<span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>text<span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onCellChange</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">1</span> <span class="token operator">?</span>
<span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Popconfirm</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Sure</span> <span class="token attr-name">to</span> <span class="token attr-name">delete?"</span> <span class="token attr-name">onConfirm</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onDelete</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Popconfirm</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">null</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
dataSource<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Edward King 0'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token string">'32'</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London, Park Lane no. 0'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Edward King 1'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token string">'32'</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token string">'London, Park Lane no. 1'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
count<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
onCellChange <span class="token operator">=</span> <span class="token punctuation">(</span>index<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">]</span><span class="token punctuation">;</span>
dataSource<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> dataSource <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
onDelete <span class="token operator">=</span> <span class="token punctuation">(</span>index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">]</span><span class="token punctuation">;</span>
dataSource<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> dataSource <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
handleAdd <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> dataSource <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
<span class="token keyword">const</span> newData <span class="token operator">=</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> count<span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Edward King </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`London, Park Lane no. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
dataSource<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span>dataSource<span class="token punctuation">,</span> newData<span class="token punctuation">]</span><span class="token punctuation">,</span>
count<span class="token punctuation">:</span> count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> dataSource <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>columns<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>editable-add-btn<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleAdd<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Add<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">bordered</span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dataSource<span class="token punctuation">}</span></span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>EditableTable</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="3914"><pre data-reactid="3915"><code class="css" data-reactid="3916"><span class="token selector"><span class="token class">.editable-cell</span> </span><span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.editable-cell-input-wrapper</span>,
<span class="token class">.editable-cell-text-wrapper</span> </span><span class="token punctuation">{</span>
<span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.editable-cell-text-wrapper</span> </span><span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">5</span>px <span class="token number">24</span>px <span class="token number">5</span>px <span class="token number">5</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.editable-cell-icon</span>,
<span class="token class">.editable-cell-icon-check</span> </span><span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
<span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.editable-cell-icon</span> </span><span class="token punctuation">{</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">18</span>px<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.editable-cell-icon-check</span> </span><span class="token punctuation">{</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">28</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.editable-cell</span><span class="token pseudo-class">:hover</span> <span class="token class">.editable-cell-icon</span> </span><span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.editable-cell-icon</span><span class="token pseudo-class">:hover</span>,
<span class="token class">.editable-cell-icon-check</span><span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#108ee9</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.editable-add-btn</span> </span><span class="token punctuation">{</span>
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">8</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-edit-row" data-reactid="3917"><section class="code-box-demo" data-reactid="3918"><div class="ant-table-wrapper" data-reactid="3919"><div class="ant-spin-nested-loading" data-reactid="3920"><div class="ant-spin-container" data-reactid="3921"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="3922"><div class="ant-table-content" data-reactid="3923"><div class="ant-table-body" data-reactid="3924"><table class="" data-reactid="3925"><colgroup data-reactid="3926"><col style="width:25%;min-width:25%;" data-reactid="3927"/><col style="width:15%;min-width:15%;" data-reactid="3928"/><col style="width:40%;min-width:40%;" data-reactid="3929"/><col data-reactid="3930"/></colgroup><thead class="ant-table-thead" data-reactid="3931"><tr data-reactid="3932"><th class="" data-reactid="3933"><span data-reactid="3934"><!-- react-text: 3935 -->name<!-- /react-text --></span></th><th class="" data-reactid="3936"><span data-reactid="3937"><!-- react-text: 3938 -->age<!-- /react-text --></span></th><th class="" data-reactid="3939"><span data-reactid="3940"><!-- react-text: 3941 -->address<!-- /react-text --></span></th><th class="" data-reactid="3942"><span data-reactid="3943"><!-- react-text: 3944 -->operation<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="3945"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3946"><td class="" data-reactid="3947"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3948"></span><!-- react-empty: 3949 --><div data-reactid="3950"><div class="editable-row-text" data-reactid="3951">Edward King 0</div></div></td><td class="" data-reactid="3952"><div data-reactid="3953"><div class="editable-row-text" data-reactid="3954">32</div></div></td><td class="" data-reactid="3955"><!-- react-text: 3956 -->London, Park Lane no. 0<!-- /react-text --></td><td class="" data-reactid="3957"><div class="editable-row-operations" data-reactid="3958"><span data-reactid="3959"><a data-reactid="3960">Edit</a></span></div></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="3961"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3962"><a data-reactid="3963"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3964"><a data-reactid="3965">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="3966"><a data-reactid="3967"></a></li><!-- react-empty: 3968 --></ul></div></div></div><style data-reactid="3969">.editable-row-text {
padding: 5px;
}
.editable-row-operations a {
margin-right: 8px;
}</style></section><section class="code-box-meta markdown" data-reactid="3970"><div class="code-box-title" data-reactid="3971"><a href="#components-table-demo-edit-row" data-reactid="3972">可编辑行</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/edit-row.md" data-reactid="3973"><i class="anticon anticon-edit" data-reactid="3974"></i></a></div><div data-reactid="3975"><p data-reactid="3976"><!-- react-text: 3977 -->带行编辑功能的表格。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3978"></i></section><section class="highlight-wrapper" data-reactid="3979"><div class="highlight" data-reactid="3980"><i class="anticon anticon-copy code-box-code-copy" data-reactid="3981"></i><pre class="language-jsx" data-reactid="3982"><code data-reactid="3983"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Popconfirm <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">EditableCell</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
value<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>value<span class="token punctuation">,</span>
editable<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>editable <span class="token operator">||</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token function">componentWillReceiveProps</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>nextProps<span class="token punctuation">.</span>editable <span class="token operator">!==</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>editable<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> editable<span class="token punctuation">:</span> nextProps<span class="token punctuation">.</span>editable <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>nextProps<span class="token punctuation">.</span>editable<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>cacheValue <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>nextProps<span class="token punctuation">.</span>status <span class="token operator">&amp;&amp;</span> nextProps<span class="token punctuation">.</span>status <span class="token operator">!==</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>nextProps<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token string">'save'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>nextProps<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token string">'cancel'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cacheValue <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>cacheValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">shouldComponentUpdate</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">,</span> nextState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> nextProps<span class="token punctuation">.</span>editable <span class="token operator">!==</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>editable <span class="token operator">||</span>
nextState<span class="token punctuation">.</span>value <span class="token operator">!==</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">handleChange</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> value <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> value <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> value<span class="token punctuation">,</span> editable <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span>
editable <span class="token operator">?</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Input</span>
<span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>value<span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>e <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleChange</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">:</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>editable-row-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span>value<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">' '</span><span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">EditableTable</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token string">'25%'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderColumns</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">,</span> index<span class="token punctuation">,</span> <span class="token string">'name'</span><span class="token punctuation">,</span> text<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token string">'15%'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderColumns</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">,</span> index<span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">,</span> text<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token string">'40%'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderColumns</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">,</span> index<span class="token punctuation">,</span> <span class="token string">'address'</span><span class="token punctuation">,</span> text<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> editable <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>name<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>editable-row-operations<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span>
editable <span class="token operator">?</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">editDone</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token string">'save'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Save<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Popconfirm</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Sure</span> <span class="token attr-name">to</span> <span class="token attr-name">cancel?"</span> <span class="token attr-name">onConfirm</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">editDone</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token string">'cancel'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span><span class="token punctuation">></span></span>Cancel<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Popconfirm</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token punctuation">:</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">edit</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Edit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token punctuation">{</span>
editable<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
value<span class="token punctuation">:</span> <span class="token string">'Edward King 0'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token punctuation">{</span>
editable<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
value<span class="token punctuation">:</span> <span class="token string">'32'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token punctuation">{</span>
value<span class="token punctuation">:</span> <span class="token string">'London, Park Lane no. 0'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">renderColumns</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> index<span class="token punctuation">,</span> key<span class="token punctuation">,</span> text<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> editable<span class="token punctuation">,</span> status <span class="token punctuation">}</span> <span class="token operator">=</span> data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> editable <span class="token operator">===</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> text<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>EditableCell</span>
<span class="token attr-name">editable</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>editable<span class="token punctuation">}</span></span>
<span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>text<span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>value <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleChange</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> index<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
<span class="token attr-name">status</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>status<span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">handleChange</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> index<span class="token punctuation">,</span> value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span>value <span class="token operator">=</span> value<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">edit</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">typeof</span> data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>editable <span class="token operator">!==</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>editable <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">editDone</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">typeof</span> data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>editable <span class="token operator">!==</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>editable <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>status <span class="token operator">=</span> type<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> data <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">typeof</span> data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>editable <span class="token operator">!==</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">delete</span> data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">.</span>status<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
<span class="token keyword">const</span> dataSource <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> key <span class="token operator">===</span> <span class="token string">'key'</span> <span class="token operator">?</span> item<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token punctuation">:</span> item<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> obj<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>columns<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">bordered</span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dataSource<span class="token punctuation">}</span></span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>EditableTable</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="3984"><pre data-reactid="3985"><code class="css" data-reactid="3986"><span class="token selector"><span class="token class">.editable-row-text</span> </span><span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">5</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.editable-row-operations</span> a </span><span class="token punctuation">{</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token number">8</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-nested-table" data-reactid="3987"><section class="code-box-demo" data-reactid="3988"><div class="ant-table-wrapper components-table-demo-nested" data-reactid="3989"><div class="ant-spin-nested-loading" data-reactid="3990"><div class="ant-spin-container" data-reactid="3991"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="3992"><div class="ant-table-content" data-reactid="3993"><div class="ant-table-body" data-reactid="3994"><table class="" data-reactid="3995"><colgroup data-reactid="3996"><col class="ant-table-expand-icon-col" data-reactid="3997"/><col data-reactid="3998"/><col data-reactid="3999"/><col data-reactid="4000"/><col data-reactid="4001"/><col data-reactid="4002"/><col data-reactid="4003"/><col data-reactid="4004"/></colgroup><thead class="ant-table-thead" data-reactid="4005"><tr data-reactid="4006"><th class="ant-table-expand-icon-th" title="" rowspan="1" data-reactid="4007"></th><th class="" data-reactid="4008"><span data-reactid="4009"><!-- react-text: 4010 -->Name<!-- /react-text --></span></th><th class="" data-reactid="4011"><span data-reactid="4012"><!-- react-text: 4013 -->Platform<!-- /react-text --></span></th><th class="" data-reactid="4014"><span data-reactid="4015"><!-- react-text: 4016 -->Version<!-- /react-text --></span></th><th class="" data-reactid="4017"><span data-reactid="4018"><!-- react-text: 4019 -->Upgraded<!-- /react-text --></span></th><th class="" data-reactid="4020"><span data-reactid="4021"><!-- react-text: 4022 -->Creator<!-- /react-text --></span></th><th class="" data-reactid="4023"><span data-reactid="4024"><!-- react-text: 4025 -->Date<!-- /react-text --></span></th><th class="" data-reactid="4026"><span data-reactid="4027"><!-- react-text: 4028 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="4029"><tr class="ant-table-row ant-table-row-level-0" data-reactid="4030"><td class="ant-table-row-expand-icon-cell" data-reactid="4031"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4032"></span></td><td class="" data-reactid="4033"><!-- react-text: 4034 -->Screem<!-- /react-text --></td><td class="" data-reactid="4035"><!-- react-text: 4036 -->iOS<!-- /react-text --></td><td class="" data-reactid="4037"><!-- react-text: 4038 -->10.3.4.5654<!-- /react-text --></td><td class="" data-reactid="4039"><!-- react-text: 4040 -->500<!-- /react-text --></td><td class="" data-reactid="4041"><!-- react-text: 4042 -->Jack<!-- /react-text --></td><td class="" data-reactid="4043"><!-- react-text: 4044 -->2014-12-24 23:12:00<!-- /react-text --></td><td class="" data-reactid="4045"><a href="#" data-reactid="4046">Publish</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4047"><td class="ant-table-row-expand-icon-cell" data-reactid="4048"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4049"></span></td><td class="" data-reactid="4050"><!-- react-text: 4051 -->Screem<!-- /react-text --></td><td class="" data-reactid="4052"><!-- react-text: 4053 -->iOS<!-- /react-text --></td><td class="" data-reactid="4054"><!-- react-text: 4055 -->10.3.4.5654<!-- /react-text --></td><td class="" data-reactid="4056"><!-- react-text: 4057 -->500<!-- /react-text --></td><td class="" data-reactid="4058"><!-- react-text: 4059 -->Jack<!-- /react-text --></td><td class="" data-reactid="4060"><!-- react-text: 4061 -->2014-12-24 23:12:00<!-- /react-text --></td><td class="" data-reactid="4062"><a href="#" data-reactid="4063">Publish</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4064"><td class="ant-table-row-expand-icon-cell" data-reactid="4065"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4066"></span></td><td class="" data-reactid="4067"><!-- react-text: 4068 -->Screem<!-- /react-text --></td><td class="" data-reactid="4069"><!-- react-text: 4070 -->iOS<!-- /react-text --></td><td class="" data-reactid="4071"><!-- react-text: 4072 -->10.3.4.5654<!-- /react-text --></td><td class="" data-reactid="4073"><!-- react-text: 4074 -->500<!-- /react-text --></td><td class="" data-reactid="4075"><!-- react-text: 4076 -->Jack<!-- /react-text --></td><td class="" data-reactid="4077"><!-- react-text: 4078 -->2014-12-24 23:12:00<!-- /react-text --></td><td class="" data-reactid="4079"><a href="#" data-reactid="4080">Publish</a></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="4081"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="4082"><a data-reactid="4083"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="4084"><a data-reactid="4085">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="4086"><a data-reactid="4087"></a></li><!-- react-empty: 4088 --></ul></div></div></div><style data-reactid="4089">.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;
}</style></section><section class="code-box-meta markdown" data-reactid="4090"><div class="code-box-title" data-reactid="4091"><a href="#components-table-demo-nested-table" data-reactid="4092">嵌套子表格</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/nested-table.md" data-reactid="4093"><i class="anticon anticon-edit" data-reactid="4094"></i></a></div><div data-reactid="4095"><p data-reactid="4096"><!-- react-text: 4097 -->展示每行数据更详细的信息。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="4098"></i></section><section class="highlight-wrapper" data-reactid="4099"><div class="highlight" data-reactid="4100"><i class="anticon anticon-copy code-box-code-copy" data-reactid="4101"></i><pre class="language-jsx" data-reactid="4102"><code data-reactid="4103"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Badge<span class="token punctuation">,</span> Menu<span class="token punctuation">,</span> Dropdown<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> menu <span class="token operator">=</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Menu</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Menu.Item</span><span class="token punctuation">></span></span>
Action <span class="token number">1</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Menu.Item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Menu.Item</span><span class="token punctuation">></span></span>
Action <span class="token number">2</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Menu.Item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Menu</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">NestedTable</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> expandedRowRender <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Date'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'date'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'date'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Status'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'state'</span><span class="token punctuation">,</span> render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Badge</span> <span class="token attr-name">status</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Finished<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Upgrade Status'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'upgradeNum'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'upgradeNum'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token string">'table-operation'</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Pause<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Stop<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Dropdown</span> <span class="token attr-name">overlay</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>menu<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
More <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>down<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Dropdown</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">;</span> <span class="token operator">++</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
date<span class="token punctuation">:</span> <span class="token string">'2014-12-24 23:12:00'</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'This is production name'</span><span class="token punctuation">,</span>
upgradeNum<span class="token punctuation">:</span> <span class="token string">'Upgraded: 56'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
<span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>
<span class="token attr-name">pagination</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Platform'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'platform'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'platform'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Version'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'version'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'version'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Upgraded'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'upgradeNum'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'upgradeNum'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Creator'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'creator'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'creator'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Date'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'createdAt'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'createdAt'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'operation'</span><span class="token punctuation">,</span> render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Publish<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">;</span> <span class="token operator">++</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Screem'</span><span class="token punctuation">,</span>
platform<span class="token punctuation">:</span> <span class="token string">'iOS'</span><span class="token punctuation">,</span>
version<span class="token punctuation">:</span> <span class="token string">'10.3.4.5654'</span><span class="token punctuation">,</span>
upgradeNum<span class="token punctuation">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
creator<span class="token punctuation">:</span> <span class="token string">'Jack'</span><span class="token punctuation">,</span>
createdAt<span class="token punctuation">:</span> <span class="token string">'2014-12-24 23:12:00'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span>
<span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>components-table-demo-nested<span class="token punctuation">"</span></span>
<span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span>
<span class="token attr-name">expandedRowRender</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>expandedRowRender<span class="token punctuation">}</span></span>
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NestedTable</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="4104"><pre data-reactid="4105"><code class="css" data-reactid="4106"><span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.ant-table-expanded-row</span> > td<span class="token pseudo-class">:last-child</span> </span><span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">48</span>px <span class="token number">0</span> <span class="token number">8</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.ant-table-expanded-row</span> > td<span class="token pseudo-class">:last-child</span> <span class="token class">.ant-table-thead</span> th </span><span class="token punctuation">{</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.ant-table-expanded-row</span> > td<span class="token pseudo-class">:last-child</span> <span class="token class">.ant-table-thead</span> th<span class="token pseudo-class">:first-child</span> </span><span class="token punctuation">{</span>
<span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.ant-table-expanded-row</span> > td<span class="token pseudo-class">:last-child</span> <span class="token class">.ant-table-row</span> td<span class="token pseudo-class">:first-child</span> </span><span class="token punctuation">{</span>
<span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.ant-table-expanded-row</span> <span class="token class">.ant-table-row</span><span class="token pseudo-class">:last-child</span> td </span><span class="token punctuation">{</span>
<span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.ant-table-expanded-row</span> <span class="token class">.ant-table-thead</span> > tr > th </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.components-table-demo-nested</span> <span class="token class">.table-operation</span> a<span class="token pseudo-class">:not(:last-child)</span> </span><span class="token punctuation">{</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-dynamic-settings" data-reactid="4107"><section class="code-box-demo" data-reactid="4108"><div data-reactid="4109"><div class="components-table-demo-control-bar" data-reactid="4110"><form class="ant-form ant-form-inline" data-reactid="4111"><div class="ant-row ant-form-item" data-reactid="4112"><div class="ant-form-item-label" data-reactid="4113"><label class="" title="Bordered" data-reactid="4114">Bordered</label></div><div class="ant-form-item-control-wrapper" data-reactid="4115"><div class="ant-form-item-control " data-reactid="4116"><span class="ant-switch" tabindex="0" data-reactid="4117"><span class="ant-switch-inner" data-reactid="4118"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4119"><div class="ant-form-item-label" data-reactid="4120"><label class="" title="loading" data-reactid="4121">loading</label></div><div class="ant-form-item-control-wrapper" data-reactid="4122"><div class="ant-form-item-control " data-reactid="4123"><span class="ant-switch" tabindex="0" data-reactid="4124"><span class="ant-switch-inner" data-reactid="4125"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4126"><div class="ant-form-item-label" data-reactid="4127"><label class="" title="Pagination" data-reactid="4128">Pagination</label></div><div class="ant-form-item-control-wrapper" data-reactid="4129"><div class="ant-form-item-control " data-reactid="4130"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4131"><span class="ant-switch-inner" data-reactid="4132"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4133"><div class="ant-form-item-label" data-reactid="4134"><label class="" title="Title" data-reactid="4135">Title</label></div><div class="ant-form-item-control-wrapper" data-reactid="4136"><div class="ant-form-item-control " data-reactid="4137"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4138"><span class="ant-switch-inner" data-reactid="4139"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4140"><div class="ant-form-item-label" data-reactid="4141"><label class="" title="Column Header" data-reactid="4142">Column Header</label></div><div class="ant-form-item-control-wrapper" data-reactid="4143"><div class="ant-form-item-control " data-reactid="4144"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4145"><span class="ant-switch-inner" data-reactid="4146"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4147"><div class="ant-form-item-label" data-reactid="4148"><label class="" title="Footer" data-reactid="4149">Footer</label></div><div class="ant-form-item-control-wrapper" data-reactid="4150"><div class="ant-form-item-control " data-reactid="4151"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4152"><span class="ant-switch-inner" data-reactid="4153"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4154"><div class="ant-form-item-label" data-reactid="4155"><label class="" title="Expandable" data-reactid="4156">Expandable</label></div><div class="ant-form-item-control-wrapper" data-reactid="4157"><div class="ant-form-item-control " data-reactid="4158"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4159"><span class="ant-switch-inner" data-reactid="4160"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4161"><div class="ant-form-item-label" data-reactid="4162"><label class="" title="Checkbox" data-reactid="4163">Checkbox</label></div><div class="ant-form-item-control-wrapper" data-reactid="4164"><div class="ant-form-item-control " data-reactid="4165"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4166"><span class="ant-switch-inner" data-reactid="4167"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4168"><div class="ant-form-item-label" data-reactid="4169"><label class="" title="Fixed Header" data-reactid="4170">Fixed Header</label></div><div class="ant-form-item-control-wrapper" data-reactid="4171"><div class="ant-form-item-control " data-reactid="4172"><span class="ant-switch" tabindex="0" data-reactid="4173"><span class="ant-switch-inner" data-reactid="4174"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4175"><div class="ant-form-item-label" data-reactid="4176"><label class="" title="Size" data-reactid="4177">Size</label></div><div class="ant-form-item-control-wrapper" data-reactid="4178"><div class="ant-form-item-control " data-reactid="4179"><div class="ant-radio-group ant-radio-group-default" data-reactid="4180"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" data-reactid="4181"><span class="ant-radio-button ant-radio-button-checked" data-reactid="4182"><input type="radio" class="ant-radio-button-input" checked="" data-reactid="4183"/><span class="ant-radio-button-inner" data-reactid="4184"></span></span><span data-reactid="4185">Default</span></label><label class="ant-radio-button-wrapper" data-reactid="4186"><span class="ant-radio-button" data-reactid="4187"><input type="radio" class="ant-radio-button-input" data-reactid="4188"/><span class="ant-radio-button-inner" data-reactid="4189"></span></span><span data-reactid="4190">Middle</span></label><label class="ant-radio-button-wrapper" data-reactid="4191"><span class="ant-radio-button" data-reactid="4192"><input type="radio" class="ant-radio-button-input" data-reactid="4193"/><span class="ant-radio-button-inner" data-reactid="4194"></span></span><span data-reactid="4195">Small</span></label></div></div></div></div></form></div><div class="ant-table-wrapper" data-reactid="4196"><div class="ant-spin-nested-loading" data-reactid="4197"><div class="ant-spin-container" data-reactid="4198"><div class="ant-table ant-table-default ant-table-scroll-position-left" data-reactid="4199"><div class="ant-table-title" data-reactid="4200">Here is title</div><div class="ant-table-content" data-reactid="4201"><div class="ant-table-body" data-reactid="4202"><table class="" data-reactid="4203"><colgroup data-reactid="4204"><col class="ant-table-expand-icon-col" data-reactid="4205"/><col data-reactid="4206"/><col style="width:150px;min-width:150px;" data-reactid="4207"/><col style="width:70px;min-width:70px;" data-reactid="4208"/><col data-reactid="4209"/><col style="width:360px;min-width:360px;" data-reactid="4210"/></colgroup><thead class="ant-table-thead" data-reactid="4211"><tr data-reactid="4212"><th class="ant-table-expand-icon-th" title="" rowspan="1" data-reactid="4213"></th><th class="ant-table-selection-column" data-reactid="4214"><span data-reactid="4215"><div class="ant-table-selection" data-reactid="4216"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="4217"><span class="ant-checkbox" data-reactid="4218"><input type="checkbox" class="ant-checkbox-input" data-reactid="4219"/><span class="ant-checkbox-inner" data-reactid="4220"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="4221"><i class="anticon anticon-down" data-reactid="4222"></i></div></div></span></th><th class="" data-reactid="4223"><span data-reactid="4224"><!-- react-text: 4225 -->Name<!-- /react-text --></span></th><th class="" data-reactid="4226"><span data-reactid="4227"><!-- react-text: 4228 -->Age<!-- /react-text --></span></th><th class="" data-reactid="4229"><span data-reactid="4230"><!-- react-text: 4231 -->Address<!-- /react-text --></span></th><th class="" data-reactid="4232"><span data-reactid="4233"><!-- react-text: 4234 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="4235"><tr class="ant-table-row ant-table-row-level-0" data-reactid="4236"><td class="ant-table-row-expand-icon-cell" data-reactid="4237"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4238"></span></td><td class="ant-table-selection-column" data-reactid="4239"><span data-reactid="4240"><label class="ant-checkbox-wrapper" data-reactid="4241"><span class="ant-checkbox" data-reactid="4242"><input type="checkbox" class="ant-checkbox-input" data-reactid="4243"/><span class="ant-checkbox-inner" data-reactid="4244"></span></span></label></span></td><td class="" data-reactid="4245"><a href="#" data-reactid="4246">John Brown</a></td><td class="" data-reactid="4247"><!-- react-text: 4248 -->12<!-- /react-text --></td><td class="" data-reactid="4249"><!-- react-text: 4250 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="4251"><span data-reactid="4252"><a href="#" data-reactid="4253"><!-- react-text: 4254 -->Action 一 <!-- /react-text --><!-- react-text: 4255 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4256"></span><a href="#" data-reactid="4257">Delete</a><span class="ant-divider" data-reactid="4258"></span><a href="#" class="ant-dropdown-link" data-reactid="4259"><!-- react-text: 4260 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4261"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4262"><td class="ant-table-row-expand-icon-cell" data-reactid="4263"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4264"></span></td><td class="ant-table-selection-column" data-reactid="4265"><span data-reactid="4266"><label class="ant-checkbox-wrapper" data-reactid="4267"><span class="ant-checkbox" data-reactid="4268"><input type="checkbox" class="ant-checkbox-input" data-reactid="4269"/><span class="ant-checkbox-inner" data-reactid="4270"></span></span></label></span></td><td class="" data-reactid="4271"><a href="#" data-reactid="4272">John Brown</a></td><td class="" data-reactid="4273"><!-- react-text: 4274 -->22<!-- /react-text --></td><td class="" data-reactid="4275"><!-- react-text: 4276 -->New York No. 2 Lake Park<!-- /react-text --></td><td class="" data-reactid="4277"><span data-reactid="4278"><a href="#" data-reactid="4279"><!-- react-text: 4280 -->Action 一 <!-- /react-text --><!-- react-text: 4281 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4282"></span><a href="#" data-reactid="4283">Delete</a><span class="ant-divider" data-reactid="4284"></span><a href="#" class="ant-dropdown-link" data-reactid="4285"><!-- react-text: 4286 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4287"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4288"><td class="ant-table-row-expand-icon-cell" data-reactid="4289"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4290"></span></td><td class="ant-table-selection-column" data-reactid="4291"><span data-reactid="4292"><label class="ant-checkbox-wrapper" data-reactid="4293"><span class="ant-checkbox" data-reactid="4294"><input type="checkbox" class="ant-checkbox-input" data-reactid="4295"/><span class="ant-checkbox-inner" data-reactid="4296"></span></span></label></span></td><td class="" data-reactid="4297"><a href="#" data-reactid="4298">John Brown</a></td><td class="" data-reactid="4299"><!-- react-text: 4300 -->32<!-- /react-text --></td><td class="" data-reactid="4301"><!-- react-text: 4302 -->New York No. 3 Lake Park<!-- /react-text --></td><td class="" data-reactid="4303"><span data-reactid="4304"><a href="#" data-reactid="4305"><!-- react-text: 4306 -->Action 一 <!-- /react-text --><!-- react-text: 4307 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4308"></span><a href="#" data-reactid="4309">Delete</a><span class="ant-divider" data-reactid="4310"></span><a href="#" class="ant-dropdown-link" data-reactid="4311"><!-- react-text: 4312 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4313"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4314"><td class="ant-table-row-expand-icon-cell" data-reactid="4315"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4316"></span></td><td class="ant-table-selection-column" data-reactid="4317"><span data-reactid="4318"><label class="ant-checkbox-wrapper" data-reactid="4319"><span class="ant-checkbox" data-reactid="4320"><input type="checkbox" class="ant-checkbox-input" data-reactid="4321"/><span class="ant-checkbox-inner" data-reactid="4322"></span></span></label></span></td><td class="" data-reactid="4323"><a href="#" data-reactid="4324">John Brown</a></td><td class="" data-reactid="4325"><!-- react-text: 4326 -->42<!-- /react-text --></td><td class="" data-reactid="4327"><!-- react-text: 4328 -->New York No. 4 Lake Park<!-- /react-text --></td><td class="" data-reactid="4329"><span data-reactid="4330"><a href="#" data-reactid="4331"><!-- react-text: 4332 -->Action 一 <!-- /react-text --><!-- react-text: 4333 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4334"></span><a href="#" data-reactid="4335">Delete</a><span class="ant-divider" data-reactid="4336"></span><a href="#" class="ant-dropdown-link" data-reactid="4337"><!-- react-text: 4338 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4339"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4340"><td class="ant-table-row-expand-icon-cell" data-reactid="4341"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4342"></span></td><td class="ant-table-selection-column" data-reactid="4343"><span data-reactid="4344"><label class="ant-checkbox-wrapper" data-reactid="4345"><span class="ant-checkbox" data-reactid="4346"><input type="checkbox" class="ant-checkbox-input" data-reactid="4347"/><span class="ant-checkbox-inner" data-reactid="4348"></span></span></label></span></td><td class="" data-reactid="4349"><a href="#" data-reactid="4350">John Brown</a></td><td class="" data-reactid="4351"><!-- react-text: 4352 -->52<!-- /react-text --></td><td class="" data-reactid="4353"><!-- react-text: 4354 -->New York No. 5 Lake Park<!-- /react-text --></td><td class="" data-reactid="4355"><span data-reactid="4356"><a href="#" data-reactid="4357"><!-- react-text: 4358 -->Action 一 <!-- /react-text --><!-- react-text: 4359 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4360"></span><a href="#" data-reactid="4361">Delete</a><span class="ant-divider" data-reactid="4362"></span><a href="#" class="ant-dropdown-link" data-reactid="4363"><!-- react-text: 4364 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4365"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4366"><td class="ant-table-row-expand-icon-cell" data-reactid="4367"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4368"></span></td><td class="ant-table-selection-column" data-reactid="4369"><span data-reactid="4370"><label class="ant-checkbox-wrapper" data-reactid="4371"><span class="ant-checkbox" data-reactid="4372"><input type="checkbox" class="ant-checkbox-input" data-reactid="4373"/><span class="ant-checkbox-inner" data-reactid="4374"></span></span></label></span></td><td class="" data-reactid="4375"><a href="#" data-reactid="4376">John Brown</a></td><td class="" data-reactid="4377"><!-- react-text: 4378 -->62<!-- /react-text --></td><td class="" data-reactid="4379"><!-- react-text: 4380 -->New York No. 6 Lake Park<!-- /react-text --></td><td class="" data-reactid="4381"><span data-reactid="4382"><a href="#" data-reactid="4383"><!-- react-text: 4384 -->Action 一 <!-- /react-text --><!-- react-text: 4385 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4386"></span><a href="#" data-reactid="4387">Delete</a><span class="ant-divider" data-reactid="4388"></span><a href="#" class="ant-dropdown-link" data-reactid="4389"><!-- react-text: 4390 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4391"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4392"><td class="ant-table-row-expand-icon-cell" data-reactid="4393"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4394"></span></td><td class="ant-table-selection-column" data-reactid="4395"><span data-reactid="4396"><label class="ant-checkbox-wrapper" data-reactid="4397"><span class="ant-checkbox" data-reactid="4398"><input type="checkbox" class="ant-checkbox-input" data-reactid="4399"/><span class="ant-checkbox-inner" data-reactid="4400"></span></span></label></span></td><td class="" data-reactid="4401"><a href="#" data-reactid="4402">John Brown</a></td><td class="" data-reactid="4403"><!-- react-text: 4404 -->72<!-- /react-text --></td><td class="" data-reactid="4405"><!-- react-text: 4406 -->New York No. 7 Lake Park<!-- /react-text --></td><td class="" data-reactid="4407"><span data-reactid="4408"><a href="#" data-reactid="4409"><!-- react-text: 4410 -->Action 一 <!-- /react-text --><!-- react-text: 4411 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4412"></span><a href="#" data-reactid="4413">Delete</a><span class="ant-divider" data-reactid="4414"></span><a href="#" class="ant-dropdown-link" data-reactid="4415"><!-- react-text: 4416 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4417"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4418"><td class="ant-table-row-expand-icon-cell" data-reactid="4419"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4420"></span></td><td class="ant-table-selection-column" data-reactid="4421"><span data-reactid="4422"><label class="ant-checkbox-wrapper" data-reactid="4423"><span class="ant-checkbox" data-reactid="4424"><input type="checkbox" class="ant-checkbox-input" data-reactid="4425"/><span class="ant-checkbox-inner" data-reactid="4426"></span></span></label></span></td><td class="" data-reactid="4427"><a href="#" data-reactid="4428">John Brown</a></td><td class="" data-reactid="4429"><!-- react-text: 4430 -->82<!-- /react-text --></td><td class="" data-reactid="4431"><!-- react-text: 4432 -->New York No. 8 Lake Park<!-- /react-text --></td><td class="" data-reactid="4433"><span data-reactid="4434"><a href="#" data-reactid="4435"><!-- react-text: 4436 -->Action 一 <!-- /react-text --><!-- react-text: 4437 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4438"></span><a href="#" data-reactid="4439">Delete</a><span class="ant-divider" data-reactid="4440"></span><a href="#" class="ant-dropdown-link" data-reactid="4441"><!-- react-text: 4442 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4443"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4444"><td class="ant-table-row-expand-icon-cell" data-reactid="4445"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4446"></span></td><td class="ant-table-selection-column" data-reactid="4447"><span data-reactid="4448"><label class="ant-checkbox-wrapper" data-reactid="4449"><span class="ant-checkbox" data-reactid="4450"><input type="checkbox" class="ant-checkbox-input" data-reactid="4451"/><span class="ant-checkbox-inner" data-reactid="4452"></span></span></label></span></td><td class="" data-reactid="4453"><a href="#" data-reactid="4454">John Brown</a></td><td class="" data-reactid="4455"><!-- react-text: 4456 -->92<!-- /react-text --></td><td class="" data-reactid="4457"><!-- react-text: 4458 -->New York No. 9 Lake Park<!-- /react-text --></td><td class="" data-reactid="4459"><span data-reactid="4460"><a href="#" data-reactid="4461"><!-- react-text: 4462 -->Action 一 <!-- /react-text --><!-- react-text: 4463 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4464"></span><a href="#" data-reactid="4465">Delete</a><span class="ant-divider" data-reactid="4466"></span><a href="#" class="ant-dropdown-link" data-reactid="4467"><!-- react-text: 4468 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4469"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4470"><td class="ant-table-row-expand-icon-cell" data-reactid="4471"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4472"></span></td><td class="ant-table-selection-column" data-reactid="4473"><span data-reactid="4474"><label class="ant-checkbox-wrapper" data-reactid="4475"><span class="ant-checkbox" data-reactid="4476"><input type="checkbox" class="ant-checkbox-input" data-reactid="4477"/><span class="ant-checkbox-inner" data-reactid="4478"></span></span></label></span></td><td class="" data-reactid="4479"><a href="#" data-reactid="4480">John Brown</a></td><td class="" data-reactid="4481"><!-- react-text: 4482 -->102<!-- /react-text --></td><td class="" data-reactid="4483"><!-- react-text: 4484 -->New York No. 10 Lake Park<!-- /react-text --></td><td class="" data-reactid="4485"><span data-reactid="4486"><a href="#" data-reactid="4487"><!-- react-text: 4488 -->Action 一 <!-- /react-text --><!-- react-text: 4489 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4490"></span><a href="#" data-reactid="4491">Delete</a><span class="ant-divider" data-reactid="4492"></span><a href="#" class="ant-dropdown-link" data-reactid="4493"><!-- react-text: 4494 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4495"></i></a></span></td></tr></tbody></table></div><div class="ant-table-footer" data-reactid="4496">Here is footer</div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="4497"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="4498"><a data-reactid="4499"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="4500"><a data-reactid="4501">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="4502"><a data-reactid="4503"></a></li><!-- react-empty: 4504 --></ul></div></div></div></div><style data-reactid="4505">
.components-table-demo-control-bar {
margin-bottom: 10px;
}
.components-table-demo-control-bar .ant-form-item {
margin-right: 16px;
margin-bottom: 8px;
}
</style></section><section class="code-box-meta markdown" data-reactid="4506"><div class="code-box-title" data-reactid="4507"><a href="#components-table-demo-dynamic-settings" data-reactid="4508">动态控制表格属性</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/dynamic-settings.md" data-reactid="4509"><i class="anticon anticon-edit" data-reactid="4510"></i></a></div><div data-reactid="4511"><p data-reactid="4512"><!-- react-text: 4513 -->选择不同配置组合查看效果。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="4514"></i></section><section class="highlight-wrapper" data-reactid="4515"><div class="highlight" data-reactid="4516"><i class="anticon anticon-copy code-box-code-copy" data-reactid="4517"></i><pre class="language-jsx" data-reactid="4518"><code data-reactid="4519"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Icon<span class="token punctuation">,</span> Switch<span class="token punctuation">,</span> Radio<span class="token punctuation">,</span> Form <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> text <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Age'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'age'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">70</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Address'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'address'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span>
key<span class="token punctuation">:</span> <span class="token string">'action'</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">360</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Action 一 <span class="token punctuation">{</span>record<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-divider<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-divider<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-dropdown-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
More actions <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>down<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'John Brown'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">2`</span></span><span class="token punctuation">,</span>
address<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`New York No. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> Lake Park`</span></span><span class="token punctuation">,</span>
description<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`My name is John Brown, I am </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">2 years old, living in New York No. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> Lake Park.`</span></span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> expandedRowRender <span class="token operator">=</span> record <span class="token operator">=</span><span class="token operator">></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>record<span class="token punctuation">.</span>description<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token keyword">const</span> title <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'Here is title'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> showHeader <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> footer <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'Here is footer'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> scroll <span class="token operator">=</span> <span class="token punctuation">{</span> y<span class="token punctuation">:</span> <span class="token number">240</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
bordered<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
pagination<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
size<span class="token punctuation">:</span> <span class="token string">'default'</span><span class="token punctuation">,</span>
expandedRowRender<span class="token punctuation">,</span>
title<span class="token punctuation">,</span>
showHeader<span class="token punctuation">,</span>
footer<span class="token punctuation">,</span>
rowSelection<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
scroll<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span>
<span class="token punctuation">}</span>
handleToggle <span class="token operator">=</span> <span class="token punctuation">(</span>prop<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">:</span> enable <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
handleSizeChange <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> size<span class="token punctuation">:</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
handleExpandChange <span class="token operator">=</span> <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> expandedRowRender<span class="token punctuation">:</span> enable <span class="token operator">?</span> expandedRowRender <span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
handleTitleChange <span class="token operator">=</span> <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> enable <span class="token operator">?</span> title <span class="token punctuation">:</span> undefined <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
handleHeaderChange <span class="token operator">=</span> <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> showHeader<span class="token punctuation">:</span> enable <span class="token operator">?</span> showHeader <span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
handleFooterChange <span class="token operator">=</span> <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> footer<span class="token punctuation">:</span> enable <span class="token operator">?</span> footer <span class="token punctuation">:</span> undefined <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
handleRowSelectionChange <span class="token operator">=</span> <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> rowSelection<span class="token punctuation">:</span> enable <span class="token operator">?</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">:</span> undefined <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
handleScollChange <span class="token operator">=</span> <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> scroll<span class="token punctuation">:</span> enable <span class="token operator">?</span> scroll <span class="token punctuation">:</span> undefined <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>components-table-demo-control-bar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Form</span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Bordered<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>state<span class="token punctuation">.</span>bordered<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleToggle</span><span class="token punctuation">(</span><span class="token string">'bordered'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>state<span class="token punctuation">.</span>loading<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleToggle</span><span class="token punctuation">(</span><span class="token string">'loading'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>state<span class="token punctuation">.</span>pagination<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleToggle</span><span class="token punctuation">(</span><span class="token string">'pagination'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span>state<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleTitleChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Column</span> <span class="token attr-name">Header"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span>state<span class="token punctuation">.</span>showHeader<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleHeaderChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span>state<span class="token punctuation">.</span>footer<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleFooterChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Expandable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span>state<span class="token punctuation">.</span>expandedRowRender<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleExpandChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span>state<span class="token punctuation">.</span>rowSelection<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleRowSelectionChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Fixed</span> <span class="token attr-name">Header"</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span>state<span class="token punctuation">.</span>scroll<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleScollChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Size<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Group</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>state<span class="token punctuation">.</span>size<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSizeChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Radio.Button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Radio.Group</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>FormItem</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Form</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token operator">&lt;</span>Table <span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">}</span> columns<span class="token operator">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span> dataSource<span class="token operator">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="4520"><h2 id="API" data-reactid="4521"><span data-reactid="4522"><!-- react-text: 4523 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="4524">#</a></h2><h3 id="Table" data-reactid="4525"><span data-reactid="4526"><!-- react-text: 4527 -->Table<!-- /react-text --></span><a href="#Table" class="anchor" data-reactid="4528">#</a></h3><table data-reactid="4529"><thead data-reactid="4530"><tr data-reactid="4531"><th data-reactid="4532"><!-- react-text: 4533 -->参数<!-- /react-text --></th><th data-reactid="4534"><!-- react-text: 4535 -->说明<!-- /react-text --></th><th data-reactid="4536"><!-- react-text: 4537 -->类型<!-- /react-text --></th><th data-reactid="4538"><!-- react-text: 4539 -->默认值<!-- /react-text --></th></tr></thead><tbody data-reactid="4540"><tr data-reactid="4541"><td data-reactid="4542"><!-- react-text: 4543 -->rowSelection<!-- /react-text --></td><td data-reactid="4544"><!-- react-text: 4545 -->列表项是否可选择，<!-- /react-text --><a href="#rowSelection" data-reactid="4546"><!-- react-text: 4547 -->配置项<!-- /react-text --></a></td><td data-reactid="4548"><!-- react-text: 4549 -->object<!-- /react-text --></td><td data-reactid="4550"><!-- react-text: 4551 -->null<!-- /react-text --></td></tr><tr data-reactid="4552"><td data-reactid="4553"><!-- react-text: 4554 -->pagination<!-- /react-text --></td><td data-reactid="4555"><!-- react-text: 4556 -->分页器，配置项参考 <!-- /react-text --><a href="/components/pagination-cn/" data-reactid="4557">pagination</a><!-- react-text: 4558 -->，设为 false 时不展示和进行分页<!-- /react-text --></td><td data-reactid="4559"><!-- react-text: 4560 -->object<!-- /react-text --></td><td data-reactid="4561"></td></tr><tr data-reactid="4562"><td data-reactid="4563"><!-- react-text: 4564 -->size<!-- /react-text --></td><td data-reactid="4565"><!-- react-text: 4566 -->正常或迷你类型，<!-- /react-text --><code data-reactid="4567"><!-- react-text: 4568 -->default<!-- /react-text --></code><!-- react-text: 4569 --> or <!-- /react-text --><code data-reactid="4570"><!-- react-text: 4571 -->small<!-- /react-text --></code></td><td data-reactid="4572"><!-- react-text: 4573 -->string<!-- /react-text --></td><td data-reactid="4574"><!-- react-text: 4575 -->default<!-- /react-text --></td></tr><tr data-reactid="4576"><td data-reactid="4577"><!-- react-text: 4578 -->dataSource<!-- /react-text --></td><td data-reactid="4579"><!-- react-text: 4580 -->数据数组<!-- /react-text --></td><td data-reactid="4581"><!-- react-text: 4582 -->any[]<!-- /react-text --></td><td data-reactid="4583"></td></tr><tr data-reactid="4584"><td data-reactid="4585"><!-- react-text: 4586 -->columns<!-- /react-text --></td><td data-reactid="4587"><!-- react-text: 4588 -->表格列的配置描述，具体项见下表<!-- /react-text --></td><td data-reactid="4589"><a href="https://git.io/vMMXC" data-reactid="4590"><!-- react-text: 4591 -->ColumnProps<!-- /react-text --></a><!-- react-text: 4592 -->[]<!-- /react-text --></td><td data-reactid="4593"><!-- react-text: 4594 -->-<!-- /react-text --></td></tr><tr data-reactid="4595"><td data-reactid="4596"><!-- react-text: 4597 -->rowKey<!-- /react-text --></td><td data-reactid="4598"><!-- react-text: 4599 -->表格行 key 的取值，可以是字符串或一个函数<!-- /react-text --></td><td data-reactid="4600"><!-- react-text: 4601 -->string<!-- /react-text --><!-- react-text: 4602 -->|<!-- /react-text --><!-- react-text: 4603 -->Function(record):string<!-- /react-text --></td><td data-reactid="4604"><!-- react-text: 4605 -->&#x27;key&#x27;<!-- /react-text --></td></tr><tr data-reactid="4606"><td data-reactid="4607"><!-- react-text: 4608 -->rowClassName<!-- /react-text --></td><td data-reactid="4609"><!-- react-text: 4610 -->表格行的类名<!-- /react-text --></td><td data-reactid="4611"><!-- react-text: 4612 -->Function(record, index):string<!-- /react-text --></td><td data-reactid="4613"><!-- react-text: 4614 -->-<!-- /react-text --></td></tr><tr data-reactid="4615"><td data-reactid="4616"><!-- react-text: 4617 -->expandedRowRender<!-- /react-text --></td><td data-reactid="4618"><!-- react-text: 4619 -->额外的展开行<!-- /react-text --></td><td data-reactid="4620"><!-- react-text: 4621 -->Function<!-- /react-text --></td><td data-reactid="4622"><!-- react-text: 4623 -->-<!-- /react-text --></td></tr><tr data-reactid="4624"><td data-reactid="4625"><!-- react-text: 4626 -->defaultExpandedRowKeys<!-- /react-text --></td><td data-reactid="4627"><!-- react-text: 4628 -->默认展开的行<!-- /react-text --></td><td data-reactid="4629"><!-- react-text: 4630 -->string[]<!-- /react-text --></td><td data-reactid="4631"><!-- react-text: 4632 -->-<!-- /react-text --></td></tr><tr data-reactid="4633"><td data-reactid="4634"><!-- react-text: 4635 -->expandedRowKeys<!-- /react-text --></td><td data-reactid="4636"><!-- react-text: 4637 -->展开的行，控制属性<!-- /react-text --></td><td data-reactid="4638"><!-- react-text: 4639 -->string[]<!-- /react-text --></td><td data-reactid="4640"><!-- react-text: 4641 -->-<!-- /react-text --></td></tr><tr data-reactid="4642"><td data-reactid="4643"><!-- react-text: 4644 -->defaultExpandAllRows<!-- /react-text --></td><td data-reactid="4645"><!-- react-text: 4646 -->初始时，是否展开所有行<!-- /react-text --></td><td data-reactid="4647"><!-- react-text: 4648 -->boolean<!-- /react-text --></td><td data-reactid="4649"><!-- react-text: 4650 -->false<!-- /react-text --></td></tr><tr data-reactid="4651"><td data-reactid="4652"><!-- react-text: 4653 -->onExpandedRowsChange<!-- /react-text --></td><td data-reactid="4654"><!-- react-text: 4655 -->展开的行变化时触发<!-- /react-text --></td><td data-reactid="4656"><!-- react-text: 4657 -->Function(expandedRows)<!-- /react-text --></td><td data-reactid="4658"></td></tr><tr data-reactid="4659"><td data-reactid="4660"><!-- react-text: 4661 -->onExpand<!-- /react-text --></td><td data-reactid="4662"><!-- react-text: 4663 -->点击展开图标时触发<!-- /react-text --></td><td data-reactid="4664"><!-- react-text: 4665 -->Function(expanded, record)<!-- /react-text --></td><td data-reactid="4666"></td></tr><tr data-reactid="4667"><td data-reactid="4668"><!-- react-text: 4669 -->onChange<!-- /react-text --></td><td data-reactid="4670"><!-- react-text: 4671 -->分页、排序、筛选变化时触发<!-- /react-text --></td><td data-reactid="4672"><!-- react-text: 4673 -->Function(pagination, filters, sorter)<!-- /react-text --></td><td data-reactid="4674"></td></tr><tr data-reactid="4675"><td data-reactid="4676"><!-- react-text: 4677 -->loading<!-- /react-text --></td><td data-reactid="4678"><!-- react-text: 4679 -->页面是否加载中<!-- /react-text --></td><td data-reactid="4680"><!-- react-text: 4681 -->boolean<!-- /react-text --></td><td data-reactid="4682"><!-- react-text: 4683 -->false<!-- /react-text --></td></tr><tr data-reactid="4684"><td data-reactid="4685"><!-- react-text: 4686 -->locale<!-- /react-text --></td><td data-reactid="4687"><!-- react-text: 4688 -->默认文案设置，目前包括排序、过滤、空数据文案<!-- /react-text --></td><td data-reactid="4689"><!-- react-text: 4690 -->object<!-- /react-text --></td><td data-reactid="4691"><!-- react-text: 4692 -->filterConfirm: &#x27;确定&#x27; <!-- /react-text --><br data-reactid="4693"/><!-- react-text: 4694 --> filterReset: &#x27;重置&#x27; <!-- /react-text --><br data-reactid="4695"/><!-- react-text: 4696 --> emptyText: &#x27;暂无数据&#x27; <!-- /react-text --><br data-reactid="4697"/><!-- react-text: 4698 --> <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511" data-reactid="4699"><!-- react-text: 4700 -->默认值<!-- /react-text --></a></td></tr><tr data-reactid="4701"><td data-reactid="4702"><!-- react-text: 4703 -->indentSize<!-- /react-text --></td><td data-reactid="4704"><!-- react-text: 4705 -->展示树形数据时，每层缩进的宽度，以 px 为单位<!-- /react-text --></td><td data-reactid="4706"><!-- react-text: 4707 -->number<!-- /react-text --></td><td data-reactid="4708"><!-- react-text: 4709 -->15<!-- /react-text --></td></tr><tr data-reactid="4710"><td data-reactid="4711"><!-- react-text: 4712 -->onRowClick<!-- /react-text --></td><td data-reactid="4713"><!-- react-text: 4714 -->处理行点击事件<!-- /react-text --></td><td data-reactid="4715"><!-- react-text: 4716 -->Function(record, index)<!-- /react-text --></td><td data-reactid="4717"><!-- react-text: 4718 -->-<!-- /react-text --></td></tr><tr data-reactid="4719"><td data-reactid="4720"><!-- react-text: 4721 -->bordered<!-- /react-text --></td><td data-reactid="4722"><!-- react-text: 4723 -->是否展示外边框和列边框<!-- /react-text --></td><td data-reactid="4724"><!-- react-text: 4725 -->boolean<!-- /react-text --></td><td data-reactid="4726"><!-- react-text: 4727 -->false<!-- /react-text --></td></tr><tr data-reactid="4728"><td data-reactid="4729"><!-- react-text: 4730 -->showHeader<!-- /react-text --></td><td data-reactid="4731"><!-- react-text: 4732 -->是否显示表头<!-- /react-text --></td><td data-reactid="4733"><!-- react-text: 4734 -->boolean<!-- /react-text --></td><td data-reactid="4735"><!-- react-text: 4736 -->true<!-- /react-text --></td></tr><tr data-reactid="4737"><td data-reactid="4738"><!-- react-text: 4739 -->footer<!-- /react-text --></td><td data-reactid="4740"><!-- react-text: 4741 -->表格尾部<!-- /react-text --></td><td data-reactid="4742"><!-- react-text: 4743 -->Function(currentPageData)<!-- /react-text --></td><td data-reactid="4744"></td></tr><tr data-reactid="4745"><td data-reactid="4746"><!-- react-text: 4747 -->title<!-- /react-text --></td><td data-reactid="4748"><!-- react-text: 4749 -->表格标题<!-- /react-text --></td><td data-reactid="4750"><!-- react-text: 4751 -->Function(currentPageData)<!-- /react-text --></td><td data-reactid="4752"></td></tr><tr data-reactid="4753"><td data-reactid="4754"><!-- react-text: 4755 -->scroll<!-- /react-text --></td><td data-reactid="4756"><!-- react-text: 4757 -->横向或纵向支持滚动，也可用于指定滚动区域的宽高度：<!-- /react-text --><code data-reactid="4758"><!-- react-text: 4759 -->{{ x: true, y: 300 }}<!-- /react-text --></code></td><td data-reactid="4760"><!-- react-text: 4761 -->object<!-- /react-text --></td><td data-reactid="4762"><!-- react-text: 4763 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="Column" data-reactid="4764"><span data-reactid="4765"><!-- react-text: 4766 -->Column<!-- /react-text --></span><a href="#Column" class="anchor" data-reactid="4767">#</a></h3><p data-reactid="4768"><!-- react-text: 4769 -->列描述数据对象，是 columns 中的一项，Column 使用相同的 API。<!-- /react-text --></p><table data-reactid="4770"><thead data-reactid="4771"><tr data-reactid="4772"><th data-reactid="4773"><!-- react-text: 4774 -->参数<!-- /react-text --></th><th data-reactid="4775"><!-- react-text: 4776 -->说明<!-- /react-text --></th><th data-reactid="4777"><!-- react-text: 4778 -->类型<!-- /react-text --></th><th data-reactid="4779"><!-- react-text: 4780 -->默认值<!-- /react-text --></th></tr></thead><tbody data-reactid="4781"><tr data-reactid="4782"><td data-reactid="4783"><!-- react-text: 4784 -->title<!-- /react-text --></td><td data-reactid="4785"><!-- react-text: 4786 -->列头显示文字<!-- /react-text --></td><td data-reactid="4787"><!-- react-text: 4788 -->string<!-- /react-text --><!-- react-text: 4789 -->|<!-- /react-text --><!-- react-text: 4790 -->ReactNode<!-- /react-text --></td><td data-reactid="4791"><!-- react-text: 4792 -->-<!-- /react-text --></td></tr><tr data-reactid="4793"><td data-reactid="4794"><!-- react-text: 4795 -->key<!-- /react-text --></td><td data-reactid="4796"><!-- react-text: 4797 -->React 需要的 key，建议设置<!-- /react-text --></td><td data-reactid="4798"><!-- react-text: 4799 -->string<!-- /react-text --></td><td data-reactid="4800"><!-- react-text: 4801 -->-<!-- /react-text --></td></tr><tr data-reactid="4802"><td data-reactid="4803"><!-- react-text: 4804 -->dataIndex<!-- /react-text --></td><td data-reactid="4805"><!-- react-text: 4806 -->列数据在数据项中对应的 key，支持 <!-- /react-text --><code data-reactid="4807"><!-- react-text: 4808 -->a.b.c<!-- /react-text --></code><!-- react-text: 4809 --> 的嵌套写法<!-- /react-text --></td><td data-reactid="4810"><!-- react-text: 4811 -->string<!-- /react-text --></td><td data-reactid="4812"><!-- react-text: 4813 -->-<!-- /react-text --></td></tr><tr data-reactid="4814"><td data-reactid="4815"><!-- react-text: 4816 -->render<!-- /react-text --></td><td data-reactid="4817"><!-- react-text: 4818 -->生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格<!-- /react-text --><a href="#demo-colspan-rowspan" data-reactid="4819"><!-- react-text: 4820 -->行/列合并<!-- /react-text --></a></td><td data-reactid="4821"><!-- react-text: 4822 -->Function(text, record, index) {}<!-- /react-text --></td><td data-reactid="4823"><!-- react-text: 4824 -->-<!-- /react-text --></td></tr><tr data-reactid="4825"><td data-reactid="4826"><!-- react-text: 4827 -->filters<!-- /react-text --></td><td data-reactid="4828"><!-- react-text: 4829 -->表头的筛选菜单项<!-- /react-text --></td><td data-reactid="4830"><!-- react-text: 4831 -->object[]<!-- /react-text --></td><td data-reactid="4832"><!-- react-text: 4833 -->-<!-- /react-text --></td></tr><tr data-reactid="4834"><td data-reactid="4835"><!-- react-text: 4836 -->onFilter<!-- /react-text --></td><td data-reactid="4837"><!-- react-text: 4838 -->本地模式下，确定筛选的运行函数<!-- /react-text --></td><td data-reactid="4839"><!-- react-text: 4840 -->Function<!-- /react-text --></td><td data-reactid="4841"><!-- react-text: 4842 -->-<!-- /react-text --></td></tr><tr data-reactid="4843"><td data-reactid="4844"><!-- react-text: 4845 -->filterMultiple<!-- /react-text --></td><td data-reactid="4846"><!-- react-text: 4847 -->是否多选<!-- /react-text --></td><td data-reactid="4848"><!-- react-text: 4849 -->boolean<!-- /react-text --></td><td data-reactid="4850"><!-- react-text: 4851 -->true<!-- /react-text --></td></tr><tr data-reactid="4852"><td data-reactid="4853"><!-- react-text: 4854 -->filterDropdown<!-- /react-text --></td><td data-reactid="4855"><!-- react-text: 4856 -->可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互<!-- /react-text --></td><td data-reactid="4857"><!-- react-text: 4858 -->ReactNode<!-- /react-text --></td><td data-reactid="4859"><!-- react-text: 4860 -->-<!-- /react-text --></td></tr><tr data-reactid="4861"><td data-reactid="4862"><!-- react-text: 4863 -->filterDropdownVisible<!-- /react-text --></td><td data-reactid="4864"><!-- react-text: 4865 -->用于控制自定义筛选菜单是否可见<!-- /react-text --></td><td data-reactid="4866"><!-- react-text: 4867 -->boolean<!-- /react-text --></td><td data-reactid="4868"><!-- react-text: 4869 -->-<!-- /react-text --></td></tr><tr data-reactid="4870"><td data-reactid="4871"><!-- react-text: 4872 -->onFilterDropdownVisibleChange<!-- /react-text --></td><td data-reactid="4873"><!-- react-text: 4874 -->自定义筛选菜单可见变化时调用<!-- /react-text --></td><td data-reactid="4875"><!-- react-text: 4876 -->function(visible) {}<!-- /react-text --></td><td data-reactid="4877"><!-- react-text: 4878 -->-<!-- /react-text --></td></tr><tr data-reactid="4879"><td data-reactid="4880"><!-- react-text: 4881 -->filteredValue<!-- /react-text --></td><td data-reactid="4882"><!-- react-text: 4883 -->筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组<!-- /react-text --></td><td data-reactid="4884"><!-- react-text: 4885 -->string[]<!-- /react-text --></td><td data-reactid="4886"><!-- react-text: 4887 -->-<!-- /react-text --></td></tr><tr data-reactid="4888"><td data-reactid="4889"><!-- react-text: 4890 -->sorter<!-- /react-text --></td><td data-reactid="4891"><!-- react-text: 4892 -->排序函数，本地排序使用一个函数，需要服务端排序可设为 true<!-- /react-text --></td><td data-reactid="4893"><!-- react-text: 4894 -->Function<!-- /react-text --><!-- react-text: 4895 -->|<!-- /react-text --><!-- react-text: 4896 -->boolean<!-- /react-text --></td><td data-reactid="4897"><!-- react-text: 4898 -->-<!-- /react-text --></td></tr><tr data-reactid="4899"><td data-reactid="4900"><!-- react-text: 4901 -->colSpan<!-- /react-text --></td><td data-reactid="4902"><!-- react-text: 4903 -->表头列合并,设置为 0 时，不渲染<!-- /react-text --></td><td data-reactid="4904"><!-- react-text: 4905 -->number<!-- /react-text --></td><td data-reactid="4906"></td></tr><tr data-reactid="4907"><td data-reactid="4908"><!-- react-text: 4909 -->width<!-- /react-text --></td><td data-reactid="4910"><!-- react-text: 4911 -->列宽度<!-- /react-text --></td><td data-reactid="4912"><!-- react-text: 4913 -->string<!-- /react-text --><!-- react-text: 4914 -->|<!-- /react-text --><!-- react-text: 4915 -->number<!-- /react-text --></td><td data-reactid="4916"><!-- react-text: 4917 -->-<!-- /react-text --></td></tr><tr data-reactid="4918"><td data-reactid="4919"><!-- react-text: 4920 -->className<!-- /react-text --></td><td data-reactid="4921"><!-- react-text: 4922 -->列的 className<!-- /react-text --></td><td data-reactid="4923"><!-- react-text: 4924 -->string<!-- /react-text --></td><td data-reactid="4925"><!-- react-text: 4926 -->-<!-- /react-text --></td></tr><tr data-reactid="4927"><td data-reactid="4928"><!-- react-text: 4929 -->fixed<!-- /react-text --></td><td data-reactid="4930"><!-- react-text: 4931 -->列是否固定，可选 <!-- /react-text --><code data-reactid="4932"><!-- react-text: 4933 -->true<!-- /react-text --></code><!-- react-text: 4934 -->(等效于 left) <!-- /react-text --><code data-reactid="4935"><!-- react-text: 4936 -->&#x27;left&#x27;<!-- /react-text --></code><!-- react-text: 4937 --> <!-- /react-text --><code data-reactid="4938"><!-- react-text: 4939 -->&#x27;right&#x27;<!-- /react-text --></code></td><td data-reactid="4940"><!-- react-text: 4941 -->boolean<!-- /react-text --><!-- react-text: 4942 -->|<!-- /react-text --><!-- react-text: 4943 -->string<!-- /react-text --></td><td data-reactid="4944"><!-- react-text: 4945 -->false<!-- /react-text --></td></tr><tr data-reactid="4946"><td data-reactid="4947"><!-- react-text: 4948 -->sortOrder<!-- /react-text --></td><td data-reactid="4949"><!-- react-text: 4950 -->排序的受控属性，外界可用此控制列的排序，可设置为 <!-- /react-text --><code data-reactid="4951"><!-- react-text: 4952 -->&#x27;ascend&#x27;<!-- /react-text --></code><!-- react-text: 4953 --> <!-- /react-text --><code data-reactid="4954"><!-- react-text: 4955 -->&#x27;descend&#x27;<!-- /react-text --></code><!-- react-text: 4956 --> <!-- /react-text --><code data-reactid="4957"><!-- react-text: 4958 -->false<!-- /react-text --></code></td><td data-reactid="4959"><!-- react-text: 4960 -->boolean<!-- /react-text --><!-- react-text: 4961 -->|<!-- /react-text --><!-- react-text: 4962 -->string<!-- /react-text --></td><td data-reactid="4963"><!-- react-text: 4964 -->-<!-- /react-text --></td></tr><tr data-reactid="4965"><td data-reactid="4966"><!-- react-text: 4967 -->onCellClick<!-- /react-text --></td><td data-reactid="4968"><!-- react-text: 4969 -->单元格点击回调<!-- /react-text --></td><td data-reactid="4970"><!-- react-text: 4971 -->Function(record, event)<!-- /react-text --></td><td data-reactid="4972"><!-- react-text: 4973 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="ColumnGroup" data-reactid="4974"><span data-reactid="4975"><!-- react-text: 4976 -->ColumnGroup<!-- /react-text --></span><a href="#ColumnGroup" class="anchor" data-reactid="4977">#</a></h3><table data-reactid="4978"><thead data-reactid="4979"><tr data-reactid="4980"><th data-reactid="4981"><!-- react-text: 4982 -->参数<!-- /react-text --></th><th data-reactid="4983"><!-- react-text: 4984 -->说明<!-- /react-text --></th><th data-reactid="4985"><!-- react-text: 4986 -->类型<!-- /react-text --></th><th data-reactid="4987"><!-- react-text: 4988 -->默认值<!-- /react-text --></th></tr></thead><tbody data-reactid="4989"><tr data-reactid="4990"><td data-reactid="4991"><!-- react-text: 4992 -->title<!-- /react-text --></td><td data-reactid="4993"><!-- react-text: 4994 -->列头显示文字<!-- /react-text --></td><td data-reactid="4995"><!-- react-text: 4996 -->string<!-- /react-text --><!-- react-text: 4997 -->|<!-- /react-text --><!-- react-text: 4998 -->ReactNode<!-- /react-text --></td><td data-reactid="4999"><!-- react-text: 5000 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="rowSelection" data-reactid="5001"><span data-reactid="5002"><!-- react-text: 5003 -->rowSelection<!-- /react-text --></span><a href="#rowSelection" class="anchor" data-reactid="5004">#</a></h3><p data-reactid="5005"><!-- react-text: 5006 -->选择功能的配置。<!-- /react-text --></p><table data-reactid="5007"><thead data-reactid="5008"><tr data-reactid="5009"><th data-reactid="5010"><!-- react-text: 5011 -->参数<!-- /react-text --></th><th data-reactid="5012"><!-- react-text: 5013 -->说明<!-- /react-text --></th><th data-reactid="5014"><!-- react-text: 5015 -->类型<!-- /react-text --></th><th data-reactid="5016"><!-- react-text: 5017 -->默认值<!-- /react-text --></th></tr></thead><tbody data-reactid="5018"><tr data-reactid="5019"><td data-reactid="5020"><!-- react-text: 5021 -->type<!-- /react-text --></td><td data-reactid="5022"><!-- react-text: 5023 -->多选/单选，<!-- /react-text --><code data-reactid="5024"><!-- react-text: 5025 -->checkbox<!-- /react-text --></code><!-- react-text: 5026 --> or <!-- /react-text --><code data-reactid="5027"><!-- react-text: 5028 -->radio<!-- /react-text --></code></td><td data-reactid="5029"><!-- react-text: 5030 -->string<!-- /react-text --></td><td data-reactid="5031"><code data-reactid="5032"><!-- react-text: 5033 -->checkbox<!-- /react-text --></code></td></tr><tr data-reactid="5034"><td data-reactid="5035"><!-- react-text: 5036 -->selectedRowKeys<!-- /react-text --></td><td data-reactid="5037"><!-- react-text: 5038 -->指定选中项的 key 数组，需要和 onChange 进行配合<!-- /react-text --></td><td data-reactid="5039"><!-- react-text: 5040 -->string[]<!-- /react-text --></td><td data-reactid="5041"><!-- react-text: 5042 -->[]<!-- /react-text --></td></tr><tr data-reactid="5043"><td data-reactid="5044"><!-- react-text: 5045 -->onChange<!-- /react-text --></td><td data-reactid="5046"><!-- react-text: 5047 -->选中项发生变化的时的回调<!-- /react-text --></td><td data-reactid="5048"><!-- react-text: 5049 -->Function(selectedRowKeys, selectedRows)<!-- /react-text --></td><td data-reactid="5050"><!-- react-text: 5051 -->-<!-- /react-text --></td></tr><tr data-reactid="5052"><td data-reactid="5053"><!-- react-text: 5054 -->getCheckboxProps<!-- /react-text --></td><td data-reactid="5055"><!-- react-text: 5056 -->选择框的默认属性配置<!-- /react-text --></td><td data-reactid="5057"><!-- react-text: 5058 -->Function(record)<!-- /react-text --></td><td data-reactid="5059"><!-- react-text: 5060 -->-<!-- /react-text --></td></tr><tr data-reactid="5061"><td data-reactid="5062"><!-- react-text: 5063 -->onSelect<!-- /react-text --></td><td data-reactid="5064"><!-- react-text: 5065 -->用户手动选择/取消选择某列的回调<!-- /react-text --></td><td data-reactid="5066"><!-- react-text: 5067 -->Function(record, selected, selectedRows)<!-- /react-text --></td><td data-reactid="5068"><!-- react-text: 5069 -->-<!-- /react-text --></td></tr><tr data-reactid="5070"><td data-reactid="5071"><!-- react-text: 5072 -->onSelectAll<!-- /react-text --></td><td data-reactid="5073"><!-- react-text: 5074 -->用户手动选择/取消选择所有列的回调<!-- /react-text --></td><td data-reactid="5075"><!-- react-text: 5076 -->Function(selected, selectedRows, changeRows)<!-- /react-text --></td><td data-reactid="5077"><!-- react-text: 5078 -->-<!-- /react-text --></td></tr><tr data-reactid="5079"><td data-reactid="5080"><!-- react-text: 5081 -->onSelectInvert<!-- /react-text --></td><td data-reactid="5082"><!-- react-text: 5083 -->用户手动选择反选的回调<!-- /react-text --></td><td data-reactid="5084"><!-- react-text: 5085 -->Function(selectedRows)<!-- /react-text --></td><td data-reactid="5086"><!-- react-text: 5087 -->-<!-- /react-text --></td></tr><tr data-reactid="5088"><td data-reactid="5089"><!-- react-text: 5090 -->selections<!-- /react-text --></td><td data-reactid="5091"><!-- react-text: 5092 -->自定义选择项, <!-- /react-text --><a href="#selection" data-reactid="5093"><!-- react-text: 5094 -->配置项<!-- /react-text --></a></td><td data-reactid="5095"><!-- react-text: 5096 -->object[]<!-- /react-text --></td><td data-reactid="5097"><!-- react-text: 5098 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="selection" data-reactid="5099"><span data-reactid="5100"><!-- react-text: 5101 -->selection<!-- /react-text --></span><a href="#selection" class="anchor" data-reactid="5102">#</a></h3><table data-reactid="5103"><thead data-reactid="5104"><tr data-reactid="5105"><th data-reactid="5106"><!-- react-text: 5107 -->参数<!-- /react-text --></th><th data-reactid="5108"><!-- react-text: 5109 -->说明<!-- /react-text --></th><th data-reactid="5110"><!-- react-text: 5111 -->类型<!-- /react-text --></th><th data-reactid="5112"><!-- react-text: 5113 -->默认值<!-- /react-text --></th></tr></thead><tbody data-reactid="5114"><tr data-reactid="5115"><td data-reactid="5116"><!-- react-text: 5117 -->key<!-- /react-text --></td><td data-reactid="5118"><!-- react-text: 5119 -->React 需要的 key，建议设置<!-- /react-text --></td><td data-reactid="5120"><!-- react-text: 5121 -->string<!-- /react-text --></td><td data-reactid="5122"><!-- react-text: 5123 -->-<!-- /react-text --></td></tr><tr data-reactid="5124"><td data-reactid="5125"><!-- react-text: 5126 -->text<!-- /react-text --></td><td data-reactid="5127"><!-- react-text: 5128 -->选择项显示的文字<!-- /react-text --></td><td data-reactid="5129"><!-- react-text: 5130 -->string<!-- /react-text --><!-- react-text: 5131 -->|<!-- /react-text --><!-- react-text: 5132 -->React.ReactNode<!-- /react-text --></td><td data-reactid="5133"><!-- react-text: 5134 -->-<!-- /react-text --></td></tr><tr data-reactid="5135"><td data-reactid="5136"><!-- react-text: 5137 -->onSelect<!-- /react-text --></td><td data-reactid="5138"><!-- react-text: 5139 -->选择项点击回调<!-- /react-text --></td><td data-reactid="5140"><!-- react-text: 5141 -->Function(changeableRowKeys)<!-- /react-text --></td><td data-reactid="5142"><!-- react-text: 5143 -->-<!-- /react-text --></td></tr></tbody></table><h2 id="在-TypeScript-中使用" data-reactid="5144"><span data-reactid="5145"><!-- react-text: 5146 -->在 TypeScript 中使用<!-- /react-text --></span><a href="#在-TypeScript-中使用" class="anchor" data-reactid="5147">#</a></h2><pre class="language-jsx" data-reactid="5148"><code data-reactid="5149"><span class="token keyword">import</span> <span class="token punctuation">{</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> TableColumnConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd/lib/table/Table'</span><span class="token punctuation">;</span>
<span class="token keyword">interface</span> <span class="token class-name">IUser</span> <span class="token punctuation">{</span>
key<span class="token punctuation">:</span> number<span class="token punctuation">,</span>
name<span class="token punctuation">:</span> string<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> columns<span class="token punctuation">:</span> TableColumnConfig<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>IUser</span><span class="token punctuation">></span></span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data<span class="token punctuation">:</span> IUser<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
key<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
name<span class="token punctuation">:</span> <span class="token string">'Jack'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">UserTable</span> <span class="token keyword">extends</span> <span class="token class-name">Table</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>IUser</span><span class="token punctuation">></span></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>UserTable</span> <span class="token attr-name">columns</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token comment" spellcheck="true">// 使用 JSX 风格的 API</span>
<span class="token keyword">class</span> <span class="token class-name">NameColumn</span> <span class="token keyword">extends</span> <span class="token class-name">Table<span class="token punctuation">.</span>Column</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>IUser</span><span class="token punctuation">></span></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>UserTable</span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NameColumn</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span> <span class="token attr-name">dataIndex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>UserTable</span><span class="token punctuation">></span></span></code></pre><h2 id="注意" data-reactid="5150"><span data-reactid="5151"><!-- react-text: 5152 -->注意<!-- /react-text --></span><a href="#注意" class="anchor" data-reactid="5153">#</a></h2><p data-reactid="5154"><!-- react-text: 5155 -->按照 <!-- /react-text --><a href="https://facebook.github.io/react/docs/lists-and-keys.html#keys" data-reactid="5156"><!-- react-text: 5157 -->React 的规范<!-- /react-text --></a><!-- react-text: 5158 -->，所有的组件数组必须绑定 key。在 Table 中，<!-- /react-text --><code data-reactid="5159"><!-- react-text: 5160 -->dataSource<!-- /react-text --></code><!-- react-text: 5161 --> 和 <!-- /react-text --><code data-reactid="5162"><!-- react-text: 5163 -->columns<!-- /react-text --></code><!-- react-text: 5164 --> 里的数据值都需要指定 <!-- /react-text --><code data-reactid="5165"><!-- react-text: 5166 -->key<!-- /react-text --></code><!-- react-text: 5167 --> 值。对于 <!-- /react-text --><code data-reactid="5168"><!-- react-text: 5169 -->dataSource<!-- /react-text --></code><!-- react-text: 5170 --> 默认将每列数据的 <!-- /react-text --><code data-reactid="5171"><!-- react-text: 5172 -->key<!-- /react-text --></code><!-- react-text: 5173 --> 属性作为唯一的标识。<!-- /react-text --></p><p data-reactid="5174"><!-- react-text: 5175 -->如果你的数据没有这个属性，务必使用 <!-- /react-text --><code data-reactid="5176"><!-- react-text: 5177 -->rowKey<!-- /react-text --></code><!-- react-text: 5178 --> 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。<!-- /react-text --></p><p data-reactid="5179"><img src="https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png" data-reactid="5180"/></p><pre class="language-jsx" data-reactid="5181"><code data-reactid="5182"><span class="token comment" spellcheck="true">// 比如你的数据主键是 uid</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">rowKey</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>uid<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">// 或</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">rowKey</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>record <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>uid<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span></code></pre></section></article></div></div><div class="ant-row" data-reactid="5183"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="5184"><section class="prev-next-nav" data-reactid="5185"><a class="prev-page" href="/components/tooltip-cn/" data-reactid="5186"><span data-reactid="5187">Tooltip</span><span class="chinese" data-reactid="5188">文字提示</span></a><a class="next-page" href="/components/tag-cn/" data-reactid="5189"><span data-reactid="5190">Tag</span><span class="chinese" data-reactid="5191">标签</span></a></section></div></div></div><footer id="footer" data-reactid="5192"><ul data-reactid="5193"><li data-reactid="5194"><h2 data-reactid="5195"><i class="anticon anticon-github" data-reactid="5196"></i><!-- react-text: 5197 --> GitHub<!-- /react-text --></h2><div data-reactid="5198"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="5199"><span data-reactid="5200">仓库</span></a></div><div data-reactid="5201"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="5202"><span data-reactid="5203">定制主题</span></a></div><div data-reactid="5204"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="5205"><span data-reactid="5206">Awesome Ant Design</span></a></div></li><li data-reactid="5207"><h2 data-reactid="5208"><i class="anticon anticon-link" data-reactid="5209"></i><!-- react-text: 5210 --> <!-- /react-text --><span data-reactid="5211">相关站点</span></h2><div data-reactid="5212"><a href="http://mobile.ant.design" data-reactid="5213">Ant Design Mobile</a><span data-reactid="5214"> - </span><span data-reactid="5215">移动版</span></div><div data-reactid="5216"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="5217">dva</a><!-- react-text: 5218 --> - <!-- /react-text --><span data-reactid="5219">应用框架</span></div><div data-reactid="5220"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="5221">dva-cli</a><!-- react-text: 5222 --> -<!-- /react-text --><span data-reactid="5223">开发工具</span></div><div data-reactid="5224"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="5225">Egg</a><span data-reactid="5226"> - </span><span data-reactid="5227">企业级 Node 开发框架</span></div><div data-reactid="5228"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="5229">AntV</a><span data-reactid="5230"> - </span><span data-reactid="5231">数据可视化</span></div><div data-reactid="5232"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="5233">Ant Motion</a><span data-reactid="5234"> - </span><span data-reactid="5235">设计动效</span></div><div data-reactid="5236"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="5237">AntD Library</a><span data-reactid="5238"> - </span><span data-reactid="5239">Axure 部件库</span></div><div data-reactid="5240"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="5241">Ant UX</a><span data-reactid="5242"> - </span><span data-reactid="5243">页面逻辑素材</span></div></li><li data-reactid="5244"><h2 data-reactid="5245"><i class="anticon anticon-customer-service" data-reactid="5246"></i><!-- react-text: 5247 --> <!-- /react-text --><span data-reactid="5248">社区</span></h2><div data-reactid="5249"><a href="/changelog" data-reactid="5250"><span data-reactid="5251">更新记录</span></a></div><div data-reactid="5252"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="5253"><span data-reactid="5254">常见问题</span></a></div><div data-reactid="5255"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="5256"><span data-reactid="5257">在线讨论</span></a></div><div data-reactid="5258"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="5259"><span data-reactid="5260">报告 Bug</span></a></div><div data-reactid="5261"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="5262"><span data-reactid="5263">StackOverflow</span></a></div><div data-reactid="5264"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="5265"><span data-reactid="5266">SegmentFault</span></a></div></li><li data-reactid="5267"><h2 data-reactid="5268"><!-- react-text: 5269 -->Copyright © <!-- /react-text --><!-- react-text: 5270 -->2017<!-- /react-text --></h2><div data-reactid="5271"><span data-reactid="5272">蚂蚁金服体验技术部出品</span></div><div data-reactid="5273"><!-- react-text: 5274 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="5275">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink