mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-13 14:56:27 +10:00
2014 lines
638 KiB
HTML
2014 lines
638 KiB
HTML
<!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="725028814"><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="/" 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">Search Components...</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">中文</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="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Specification</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" data-reactid="39"><span data-reactid="40">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation" data-reactid="42"><span data-reactid="43">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resource</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" 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" data-reactid="54">Getting Started</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" data-reactid="56">Real project with dva</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" data-reactid="58">Use in 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" data-reactid="60">Customize Theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/changelog" data-reactid="62">Change Log</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/react/recommendation" data-reactid="64">Third-Party Libraries</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 Solution<!-- /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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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/" 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="Basic Usage" data-reactid="301"><a href="#components-table-demo-basic" data-reactid="302">Basic Usage</a></li><li title="JSX style API" data-reactid="303"><a href="#components-table-demo-jsx" data-reactid="304">JSX style API</a></li><li title="selection" data-reactid="305"><a href="#components-table-demo-row-selection" data-reactid="306">selection</a></li><li title="Selection and operation" data-reactid="307"><a href="#components-table-demo-row-selection-and-operation" data-reactid="308">Selection and operation</a></li><li title="Custom selection" data-reactid="309"><a href="#components-table-demo-row-selection-custom" data-reactid="310">Custom selection</a></li><li title="Reset filters and sorters" data-reactid="311"><a href="#components-table-demo-reset-filter" data-reactid="312">Reset filters and sorters</a></li><li title="Filter and sorter" data-reactid="313"><a href="#components-table-demo-head" data-reactid="314">Filter and sorter</a></li><li title="Customized filter panel" data-reactid="315"><a href="#components-table-demo-custom-filter-panel" data-reactid="316">Customized filter panel</a></li><li title="Ajax" data-reactid="317"><a href="#components-table-demo-ajax" data-reactid="318">Ajax</a></li><li title="size" data-reactid="319"><a href="#components-table-demo-size" data-reactid="320">size</a></li><li title="border, title and footer" data-reactid="321"><a href="#components-table-demo-bordered" data-reactid="322">border, title and footer</a></li><li title="Expandable Row" data-reactid="323"><a href="#components-table-demo-expand" data-reactid="324">Expandable Row</a></li><li title="colSpan and rowSpan" data-reactid="325"><a href="#components-table-demo-colspan-rowspan" data-reactid="326">colSpan and rowSpan</a></li><li title="Tree data" data-reactid="327"><a href="#components-table-demo-expand-children" data-reactid="328">Tree data</a></li><li title="Fixed Header" data-reactid="329"><a href="#components-table-demo-fixed-header" data-reactid="330">Fixed Header</a></li><li title="Fixed Columns" data-reactid="331"><a href="#components-table-demo-fixed-columns" data-reactid="332">Fixed Columns</a></li><li title="Fixed Columns and Header" data-reactid="333"><a href="#components-table-demo-fixed-columns-header" data-reactid="334">Fixed Columns and Header</a></li><li title="Grouping table head" data-reactid="335"><a href="#components-table-demo-grouping-columns" data-reactid="336">Grouping table head</a></li><li title="Editable Cells" data-reactid="337"><a href="#components-table-demo-edit-cell" data-reactid="338">Editable Cells</a></li><li title="Editable Rows" data-reactid="339"><a href="#components-table-demo-edit-row" data-reactid="340">Editable Rows</a></li><li title="Nested tables" data-reactid="341"><a href="#components-table-demo-nested-table" data-reactid="342">Nested tables</a></li><li title="Dynamic Settings" data-reactid="343"><a href="#components-table-demo-dynamic-settings" data-reactid="344">Dynamic Settings</a></li></ul></div></div><section class="markdown" data-reactid="345"><h1 data-reactid="346"><!-- react-text: 347 -->Table<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/index.en-US.md" data-reactid="348"><i class="anticon anticon-edit" data-reactid="349"></i></a></h1><section class="markdown" data-reactid="350"><p data-reactid="351"><!-- react-text: 352 -->A table displays rows data.<!-- /react-text --></p><h2 id="When-To-Use" data-reactid="353"><span data-reactid="354"><!-- react-text: 355 -->When To Use<!-- /react-text --></span><a href="#When-To-Use" class="anchor" data-reactid="356">#</a></h2><ul data-reactid="357"><li data-reactid="358"><p data-reactid="359"><!-- react-text: 360 -->To display a collection of structured data.<!-- /react-text --></p></li><li data-reactid="361"><p data-reactid="362"><!-- react-text: 363 -->To sort, search, paginate, filter data.<!-- /react-text --></p></li></ul><h2 id="How-To-Use" data-reactid="364"><span data-reactid="365"><!-- react-text: 366 -->How To Use<!-- /react-text --></span><a href="#How-To-Use" class="anchor" data-reactid="367">#</a></h2><p data-reactid="368"><!-- react-text: 369 -->Specify <!-- /react-text --><code data-reactid="370"><!-- react-text: 371 -->dataSource<!-- /react-text --></code><!-- react-text: 372 --> of Table whose value is an array of data.<!-- /react-text --></p><pre class="language-jsx" data-reactid="373"><code data-reactid="374"><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">'Mike'</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">'10 Downing Street'</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">'John'</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">'10 Downing Street'</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> <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 tag"><span class="token tag"><span class="token punctuation"><</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="375"><span data-reactid="376">Examples</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="377"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="378"><div style="padding-left:8px;padding-right:8px;" class="ant-col-24 code-boxes-col-1-1" data-reactid="379"><section class="code-box" id="components-table-demo-basic" data-reactid="380"><section class="code-box-demo" data-reactid="381"><div class="ant-table-wrapper" data-reactid="382"><div class="ant-spin-nested-loading" data-reactid="383"><div class="ant-spin-container" data-reactid="384"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="385"><div class="ant-table-content" data-reactid="386"><div class="ant-table-body" data-reactid="387"><table class="" data-reactid="388"><colgroup data-reactid="389"><col data-reactid="390"/><col data-reactid="391"/><col data-reactid="392"/><col data-reactid="393"/></colgroup><thead class="ant-table-thead" data-reactid="394"><tr data-reactid="395"><th class="" data-reactid="396"><span data-reactid="397"><!-- react-text: 398 -->Name<!-- /react-text --></span></th><th class="" data-reactid="399"><span data-reactid="400"><!-- react-text: 401 -->Age<!-- /react-text --></span></th><th class="" data-reactid="402"><span data-reactid="403"><!-- react-text: 404 -->Address<!-- /react-text --></span></th><th class="" data-reactid="405"><span data-reactid="406"><!-- react-text: 407 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="408"><tr class="ant-table-row ant-table-row-level-0" data-reactid="409"><td class="" data-reactid="410"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="411"></span><!-- react-empty: 412 --><a href="#" data-reactid="413">John Brown</a></td><td class="" data-reactid="414"><!-- react-text: 415 -->32<!-- /react-text --></td><td class="" data-reactid="416"><!-- react-text: 417 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="418"><span data-reactid="419"><a href="#" data-reactid="420"><!-- react-text: 421 -->Action 一 <!-- /react-text --><!-- react-text: 422 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="423"></span><a href="#" data-reactid="424">Delete</a><span class="ant-divider" data-reactid="425"></span><a href="#" class="ant-dropdown-link" data-reactid="426"><!-- react-text: 427 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="428"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="429"><td class="" data-reactid="430"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="431"></span><!-- react-empty: 432 --><a href="#" data-reactid="433">Jim Green</a></td><td class="" data-reactid="434"><!-- react-text: 435 -->42<!-- /react-text --></td><td class="" data-reactid="436"><!-- react-text: 437 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="438"><span data-reactid="439"><a href="#" data-reactid="440"><!-- react-text: 441 -->Action 一 <!-- /react-text --><!-- react-text: 442 -->Jim Green<!-- /react-text --></a><span class="ant-divider" data-reactid="443"></span><a href="#" data-reactid="444">Delete</a><span class="ant-divider" data-reactid="445"></span><a href="#" class="ant-dropdown-link" data-reactid="446"><!-- react-text: 447 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="448"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="449"><td class="" data-reactid="450"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="451"></span><!-- react-empty: 452 --><a href="#" data-reactid="453">Joe Black</a></td><td class="" data-reactid="454"><!-- react-text: 455 -->32<!-- /react-text --></td><td class="" data-reactid="456"><!-- react-text: 457 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="458"><span data-reactid="459"><a href="#" data-reactid="460"><!-- react-text: 461 -->Action 一 <!-- /react-text --><!-- react-text: 462 -->Joe Black<!-- /react-text --></a><span class="ant-divider" data-reactid="463"></span><a href="#" data-reactid="464">Delete</a><span class="ant-divider" data-reactid="465"></span><a href="#" class="ant-dropdown-link" data-reactid="466"><!-- react-text: 467 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="468"></i></a></span></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="469"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="470"><a data-reactid="471"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="472"><a data-reactid="473">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="474"><a data-reactid="475"></a></li><!-- react-empty: 476 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="477"><div class="code-box-title" data-reactid="478"><a href="#components-table-demo-basic" data-reactid="479">Basic Usage</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/basic.md" data-reactid="480"><i class="anticon anticon-edit" data-reactid="481"></i></a></div><div data-reactid="482"><p data-reactid="483"><!-- react-text: 484 -->Simple table with actions.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="485"></i></section><section class="highlight-wrapper" data-reactid="486"><div class="highlight" data-reactid="487"><i class="anticon anticon-copy code-box-code-copy" data-reactid="488"></i><pre class="language-jsx" data-reactid="489"><code data-reactid="490"><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"><</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"></</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"><</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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"><</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="491"><section class="code-box-demo" data-reactid="492"><div class="ant-table-wrapper" data-reactid="493"><div class="ant-spin-nested-loading" data-reactid="494"><div class="ant-spin-container" data-reactid="495"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="496"><div class="ant-table-content" data-reactid="497"><div class="ant-table-body" data-reactid="498"><table class="" data-reactid="499"><colgroup data-reactid="500"><col data-reactid="501"/><col data-reactid="502"/><col data-reactid="503"/><col data-reactid="504"/><col data-reactid="505"/></colgroup><thead class="ant-table-thead" data-reactid="506"><tr data-reactid="507"><th class="" colspan="2" data-reactid="508"><span data-reactid="509"><!-- react-text: 510 -->Name<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="511"><span data-reactid="512"><!-- react-text: 513 -->Age<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="514"><span data-reactid="515"><!-- react-text: 516 -->Address<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="517"><span data-reactid="518"><!-- react-text: 519 -->Action<!-- /react-text --></span></th></tr><tr data-reactid="520"><th class="" data-reactid="521"><span data-reactid="522"><!-- react-text: 523 -->First Name<!-- /react-text --></span></th><th class="" data-reactid="524"><span data-reactid="525"><!-- react-text: 526 -->Last Name<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="527"><tr class="ant-table-row ant-table-row-level-0" data-reactid="528"><td class="" data-reactid="529"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="530"></span><!-- react-empty: 531 --><!-- react-text: 532 -->John<!-- /react-text --></td><td class="" data-reactid="533"><!-- react-text: 534 -->Brown<!-- /react-text --></td><td class="" data-reactid="535"><!-- react-text: 536 -->32<!-- /react-text --></td><td class="" data-reactid="537"><!-- react-text: 538 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="539"><span data-reactid="540"><a href="#" data-reactid="541"><!-- react-text: 542 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="543"></span><a href="#" data-reactid="544">Delete</a><span class="ant-divider" data-reactid="545"></span><a href="#" class="ant-dropdown-link" data-reactid="546"><!-- react-text: 547 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="548"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="549"><td class="" data-reactid="550"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="551"></span><!-- react-empty: 552 --><!-- react-text: 553 -->Jim<!-- /react-text --></td><td class="" data-reactid="554"><!-- react-text: 555 -->Green<!-- /react-text --></td><td class="" data-reactid="556"><!-- react-text: 557 -->42<!-- /react-text --></td><td class="" data-reactid="558"><!-- react-text: 559 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="560"><span data-reactid="561"><a href="#" data-reactid="562"><!-- react-text: 563 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="564"></span><a href="#" data-reactid="565">Delete</a><span class="ant-divider" data-reactid="566"></span><a href="#" class="ant-dropdown-link" data-reactid="567"><!-- react-text: 568 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="569"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="570"><td class="" data-reactid="571"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="572"></span><!-- react-empty: 573 --><!-- react-text: 574 -->Joe<!-- /react-text --></td><td class="" data-reactid="575"><!-- react-text: 576 -->Black<!-- /react-text --></td><td class="" data-reactid="577"><!-- react-text: 578 -->32<!-- /react-text --></td><td class="" data-reactid="579"><!-- react-text: 580 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="581"><span data-reactid="582"><a href="#" data-reactid="583"><!-- react-text: 584 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="585"></span><a href="#" data-reactid="586">Delete</a><span class="ant-divider" data-reactid="587"></span><a href="#" class="ant-dropdown-link" data-reactid="588"><!-- react-text: 589 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="590"></i></a></span></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="591"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="592"><a data-reactid="593"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="594"><a data-reactid="595">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="596"><a data-reactid="597"></a></li><!-- react-empty: 598 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="599"><div class="code-box-title" data-reactid="600"><a href="#components-table-demo-jsx" data-reactid="601">JSX style API</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/jsx.md" data-reactid="602"><i class="anticon anticon-edit" data-reactid="603"></i></a></div><div data-reactid="604"><p data-reactid="605"><!-- react-text: 606 -->Using JSX style API (introduced in 2.5.0)<!-- /react-text --></p><blockquote data-reactid="607"><p data-reactid="608"><!-- react-text: 609 -->Since this is just a syntax sugar for the prop <!-- /react-text --><code data-reactid="610"><!-- react-text: 611 -->columns<!-- /react-text --></code><!-- react-text: 612 -->, so that you can't compose <!-- /react-text --><code data-reactid="613"><!-- react-text: 614 -->Column<!-- /react-text --></code><!-- react-text: 615 --> and <!-- /react-text --><code data-reactid="616"><!-- react-text: 617 -->ColumnGroup<!-- /react-text --></code><!-- react-text: 618 --> with other Components.<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="619"></i></section><section class="highlight-wrapper" data-reactid="620"><div class="highlight" data-reactid="621"><i class="anticon anticon-copy code-box-code-copy" data-reactid="622"></i><pre class="language-jsx" data-reactid="623"><code data-reactid="624"><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"><</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"><</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"><</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"><</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"></</span>ColumnGroup</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"><</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"><</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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"></</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="625"><section class="code-box-demo" data-reactid="626"><div class="ant-table-wrapper" data-reactid="627"><div class="ant-spin-nested-loading" data-reactid="628"><div class="ant-spin-container" data-reactid="629"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="630"><div class="ant-table-content" data-reactid="631"><div class="ant-table-body" data-reactid="632"><table class="" data-reactid="633"><colgroup data-reactid="634"><col data-reactid="635"/><col data-reactid="636"/><col data-reactid="637"/><col data-reactid="638"/></colgroup><thead class="ant-table-thead" data-reactid="639"><tr data-reactid="640"><th class="ant-table-selection-column" data-reactid="641"><span data-reactid="642"><div class="ant-table-selection" data-reactid="643"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="644"><span class="ant-checkbox" data-reactid="645"><input type="checkbox" class="ant-checkbox-input" data-reactid="646"/><span class="ant-checkbox-inner" data-reactid="647"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="648"><i class="anticon anticon-down" data-reactid="649"></i></div></div></span></th><th class="" data-reactid="650"><span data-reactid="651"><!-- react-text: 652 -->Name<!-- /react-text --></span></th><th class="" data-reactid="653"><span data-reactid="654"><!-- react-text: 655 -->Age<!-- /react-text --></span></th><th class="" data-reactid="656"><span data-reactid="657"><!-- react-text: 658 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="659"><tr class="ant-table-row ant-table-row-level-0" data-reactid="660"><td class="ant-table-selection-column" data-reactid="661"><span data-reactid="662"><label class="ant-checkbox-wrapper" data-reactid="663"><span class="ant-checkbox" data-reactid="664"><input type="checkbox" class="ant-checkbox-input" data-reactid="665"/><span class="ant-checkbox-inner" data-reactid="666"></span></span></label></span></td><td class="" data-reactid="667"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="668"></span><!-- react-empty: 669 --><a href="#" data-reactid="670">John Brown</a></td><td class="" data-reactid="671"><!-- react-text: 672 -->32<!-- /react-text --></td><td class="" data-reactid="673"><!-- react-text: 674 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="675"><td class="ant-table-selection-column" data-reactid="676"><span data-reactid="677"><label class="ant-checkbox-wrapper" data-reactid="678"><span class="ant-checkbox" data-reactid="679"><input type="checkbox" class="ant-checkbox-input" data-reactid="680"/><span class="ant-checkbox-inner" data-reactid="681"></span></span></label></span></td><td class="" data-reactid="682"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="683"></span><!-- react-empty: 684 --><a href="#" data-reactid="685">Jim Green</a></td><td class="" data-reactid="686"><!-- react-text: 687 -->42<!-- /react-text --></td><td class="" data-reactid="688"><!-- react-text: 689 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="690"><td class="ant-table-selection-column" data-reactid="691"><span data-reactid="692"><label class="ant-checkbox-wrapper" data-reactid="693"><span class="ant-checkbox" data-reactid="694"><input type="checkbox" class="ant-checkbox-input" data-reactid="695"/><span class="ant-checkbox-inner" data-reactid="696"></span></span></label></span></td><td class="" data-reactid="697"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="698"></span><!-- react-empty: 699 --><a href="#" data-reactid="700">Joe Black</a></td><td class="" data-reactid="701"><!-- react-text: 702 -->32<!-- /react-text --></td><td class="" data-reactid="703"><!-- react-text: 704 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="705"><td class="ant-table-selection-column" data-reactid="706"><span data-reactid="707"><label class="ant-checkbox-wrapper" data-reactid="708"><span class="ant-checkbox ant-checkbox-disabled" data-reactid="709"><input type="checkbox" disabled="" class="ant-checkbox-input" data-reactid="710"/><span class="ant-checkbox-inner" data-reactid="711"></span></span></label></span></td><td class="" data-reactid="712"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="713"></span><!-- react-empty: 714 --><a href="#" data-reactid="715">Disabled User</a></td><td class="" data-reactid="716"><!-- react-text: 717 -->99<!-- /react-text --></td><td class="" data-reactid="718"><!-- react-text: 719 -->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="720"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="721"><a data-reactid="722"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="723"><a data-reactid="724">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="725"><a data-reactid="726"></a></li><!-- react-empty: 727 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="728"><div class="code-box-title" data-reactid="729"><a href="#components-table-demo-row-selection" data-reactid="730">selection</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/row-selection.md" data-reactid="731"><i class="anticon anticon-edit" data-reactid="732"></i></a></div><div data-reactid="733"><p data-reactid="734"><!-- react-text: 735 -->Rows can be selectable by making first column as a selectable column.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="736"></i></section><section class="highlight-wrapper" data-reactid="737"><div class="highlight" data-reactid="738"><i class="anticon anticon-copy code-box-code-copy" data-reactid="739"></i><pre class="language-jsx" data-reactid="740"><code data-reactid="741"><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"><</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"></</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"><</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="742"><section class="code-box-demo" data-reactid="743"><div data-reactid="744"><div style="margin-bottom:16px;" data-reactid="745"><button disabled="" type="button" class="ant-btn ant-btn-primary" data-reactid="746"><span data-reactid="747">Reload</span></button><span style="margin-left:8px;" data-reactid="748"></span></div><div class="ant-table-wrapper" data-reactid="749"><div class="ant-spin-nested-loading" data-reactid="750"><div class="ant-spin-container" data-reactid="751"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="752"><div class="ant-table-content" data-reactid="753"><div class="ant-table-body" data-reactid="754"><table class="" data-reactid="755"><colgroup data-reactid="756"><col data-reactid="757"/><col data-reactid="758"/><col data-reactid="759"/><col data-reactid="760"/></colgroup><thead class="ant-table-thead" data-reactid="761"><tr data-reactid="762"><th class="ant-table-selection-column" data-reactid="763"><span data-reactid="764"><div class="ant-table-selection" data-reactid="765"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="766"><span class="ant-checkbox" data-reactid="767"><input type="checkbox" class="ant-checkbox-input" data-reactid="768"/><span class="ant-checkbox-inner" data-reactid="769"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="770"><i class="anticon anticon-down" data-reactid="771"></i></div></div></span></th><th class="" data-reactid="772"><span data-reactid="773"><!-- react-text: 774 -->Name<!-- /react-text --></span></th><th class="" data-reactid="775"><span data-reactid="776"><!-- react-text: 777 -->Age<!-- /react-text --></span></th><th class="" data-reactid="778"><span data-reactid="779"><!-- react-text: 780 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="781"><tr class="ant-table-row ant-table-row-level-0" data-reactid="782"><td class="ant-table-selection-column" data-reactid="783"><span data-reactid="784"><label class="ant-checkbox-wrapper" data-reactid="785"><span class="ant-checkbox" data-reactid="786"><input type="checkbox" class="ant-checkbox-input" data-reactid="787"/><span class="ant-checkbox-inner" data-reactid="788"></span></span></label></span></td><td class="" data-reactid="789"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="790"></span><!-- react-empty: 791 --><!-- react-text: 792 -->Edward King 0<!-- /react-text --></td><td class="" data-reactid="793"><!-- react-text: 794 -->32<!-- /react-text --></td><td class="" data-reactid="795"><!-- react-text: 796 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="797"><td class="ant-table-selection-column" data-reactid="798"><span data-reactid="799"><label class="ant-checkbox-wrapper" data-reactid="800"><span class="ant-checkbox" data-reactid="801"><input type="checkbox" class="ant-checkbox-input" data-reactid="802"/><span class="ant-checkbox-inner" data-reactid="803"></span></span></label></span></td><td class="" data-reactid="804"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="805"></span><!-- react-empty: 806 --><!-- react-text: 807 -->Edward King 1<!-- /react-text --></td><td class="" data-reactid="808"><!-- react-text: 809 -->32<!-- /react-text --></td><td class="" data-reactid="810"><!-- react-text: 811 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="812"><td class="ant-table-selection-column" data-reactid="813"><span data-reactid="814"><label class="ant-checkbox-wrapper" data-reactid="815"><span class="ant-checkbox" data-reactid="816"><input type="checkbox" class="ant-checkbox-input" data-reactid="817"/><span class="ant-checkbox-inner" data-reactid="818"></span></span></label></span></td><td class="" data-reactid="819"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="820"></span><!-- react-empty: 821 --><!-- react-text: 822 -->Edward King 2<!-- /react-text --></td><td class="" data-reactid="823"><!-- react-text: 824 -->32<!-- /react-text --></td><td class="" data-reactid="825"><!-- react-text: 826 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="827"><td class="ant-table-selection-column" data-reactid="828"><span data-reactid="829"><label class="ant-checkbox-wrapper" data-reactid="830"><span class="ant-checkbox" data-reactid="831"><input type="checkbox" class="ant-checkbox-input" data-reactid="832"/><span class="ant-checkbox-inner" data-reactid="833"></span></span></label></span></td><td class="" data-reactid="834"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="835"></span><!-- react-empty: 836 --><!-- react-text: 837 -->Edward King 3<!-- /react-text --></td><td class="" data-reactid="838"><!-- react-text: 839 -->32<!-- /react-text --></td><td class="" data-reactid="840"><!-- react-text: 841 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="842"><td class="ant-table-selection-column" data-reactid="843"><span data-reactid="844"><label class="ant-checkbox-wrapper" data-reactid="845"><span class="ant-checkbox" data-reactid="846"><input type="checkbox" class="ant-checkbox-input" data-reactid="847"/><span class="ant-checkbox-inner" data-reactid="848"></span></span></label></span></td><td class="" data-reactid="849"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="850"></span><!-- react-empty: 851 --><!-- react-text: 852 -->Edward King 4<!-- /react-text --></td><td class="" data-reactid="853"><!-- react-text: 854 -->32<!-- /react-text --></td><td class="" data-reactid="855"><!-- react-text: 856 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="857"><td class="ant-table-selection-column" data-reactid="858"><span data-reactid="859"><label class="ant-checkbox-wrapper" data-reactid="860"><span class="ant-checkbox" data-reactid="861"><input type="checkbox" class="ant-checkbox-input" data-reactid="862"/><span class="ant-checkbox-inner" data-reactid="863"></span></span></label></span></td><td class="" data-reactid="864"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="865"></span><!-- react-empty: 866 --><!-- react-text: 867 -->Edward King 5<!-- /react-text --></td><td class="" data-reactid="868"><!-- react-text: 869 -->32<!-- /react-text --></td><td class="" data-reactid="870"><!-- react-text: 871 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="872"><td class="ant-table-selection-column" data-reactid="873"><span data-reactid="874"><label class="ant-checkbox-wrapper" data-reactid="875"><span class="ant-checkbox" data-reactid="876"><input type="checkbox" class="ant-checkbox-input" data-reactid="877"/><span class="ant-checkbox-inner" data-reactid="878"></span></span></label></span></td><td class="" data-reactid="879"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="880"></span><!-- react-empty: 881 --><!-- react-text: 882 -->Edward King 6<!-- /react-text --></td><td class="" data-reactid="883"><!-- react-text: 884 -->32<!-- /react-text --></td><td class="" data-reactid="885"><!-- react-text: 886 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="887"><td class="ant-table-selection-column" data-reactid="888"><span data-reactid="889"><label class="ant-checkbox-wrapper" data-reactid="890"><span class="ant-checkbox" data-reactid="891"><input type="checkbox" class="ant-checkbox-input" data-reactid="892"/><span class="ant-checkbox-inner" data-reactid="893"></span></span></label></span></td><td class="" data-reactid="894"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="895"></span><!-- react-empty: 896 --><!-- react-text: 897 -->Edward King 7<!-- /react-text --></td><td class="" data-reactid="898"><!-- react-text: 899 -->32<!-- /react-text --></td><td class="" data-reactid="900"><!-- react-text: 901 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="902"><td class="ant-table-selection-column" data-reactid="903"><span data-reactid="904"><label class="ant-checkbox-wrapper" data-reactid="905"><span class="ant-checkbox" data-reactid="906"><input type="checkbox" class="ant-checkbox-input" data-reactid="907"/><span class="ant-checkbox-inner" data-reactid="908"></span></span></label></span></td><td class="" data-reactid="909"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="910"></span><!-- react-empty: 911 --><!-- react-text: 912 -->Edward King 8<!-- /react-text --></td><td class="" data-reactid="913"><!-- react-text: 914 -->32<!-- /react-text --></td><td class="" data-reactid="915"><!-- react-text: 916 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="917"><td class="ant-table-selection-column" data-reactid="918"><span data-reactid="919"><label class="ant-checkbox-wrapper" data-reactid="920"><span class="ant-checkbox" data-reactid="921"><input type="checkbox" class="ant-checkbox-input" data-reactid="922"/><span class="ant-checkbox-inner" data-reactid="923"></span></span></label></span></td><td class="" data-reactid="924"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="925"></span><!-- react-empty: 926 --><!-- react-text: 927 -->Edward King 9<!-- /react-text --></td><td class="" data-reactid="928"><!-- react-text: 929 -->32<!-- /react-text --></td><td class="" data-reactid="930"><!-- react-text: 931 -->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="932"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="933"><a data-reactid="934"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="935"><a data-reactid="936">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="937"><a data-reactid="938">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="939"><a data-reactid="940">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="941"><a data-reactid="942">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" data-reactid="943"><a data-reactid="944">5</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="945"><a data-reactid="946"></a></li><!-- react-empty: 947 --></ul></div></div></div></div></section><section class="code-box-meta markdown" data-reactid="948"><div class="code-box-title" data-reactid="949"><a href="#components-table-demo-row-selection-and-operation" data-reactid="950">Selection and operation</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="951"><i class="anticon anticon-edit" data-reactid="952"></i></a></div><div data-reactid="953"><p data-reactid="954"><!-- react-text: 955 -->To perform operations and clear selections after selecting some rows, use <!-- /react-text --><code data-reactid="956"><!-- react-text: 957 -->rowSelection.selectedRowKeys<!-- /react-text --></code><!-- react-text: 958 --> to control selected rows.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="959"></i></section><section class="highlight-wrapper" data-reactid="960"><div class="highlight" data-reactid="961"><i class="anticon anticon-copy code-box-code-copy" data-reactid="962"></i><pre class="language-jsx" data-reactid="963"><code data-reactid="964"><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"><</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"><</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</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"><</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="965"><section class="code-box-demo" data-reactid="966"><div class="ant-table-wrapper" data-reactid="967"><div class="ant-spin-nested-loading" data-reactid="968"><div class="ant-spin-container" data-reactid="969"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="970"><div class="ant-table-content" data-reactid="971"><div class="ant-table-body" data-reactid="972"><table class="" data-reactid="973"><colgroup data-reactid="974"><col data-reactid="975"/><col data-reactid="976"/><col data-reactid="977"/><col data-reactid="978"/></colgroup><thead class="ant-table-thead" data-reactid="979"><tr data-reactid="980"><th class="ant-table-selection-column" data-reactid="981"><span data-reactid="982"><div class="ant-table-selection" data-reactid="983"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="984"><span class="ant-checkbox" data-reactid="985"><input type="checkbox" class="ant-checkbox-input" data-reactid="986"/><span class="ant-checkbox-inner" data-reactid="987"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="988"><i class="anticon anticon-down" data-reactid="989"></i></div></div></span></th><th class="" data-reactid="990"><span data-reactid="991"><!-- react-text: 992 -->Name<!-- /react-text --></span></th><th class="" data-reactid="993"><span data-reactid="994"><!-- react-text: 995 -->Age<!-- /react-text --></span></th><th class="" data-reactid="996"><span data-reactid="997"><!-- react-text: 998 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="999"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1000"><td class="ant-table-selection-column" data-reactid="1001"><span data-reactid="1002"><label class="ant-checkbox-wrapper" data-reactid="1003"><span class="ant-checkbox" data-reactid="1004"><input type="checkbox" class="ant-checkbox-input" data-reactid="1005"/><span class="ant-checkbox-inner" data-reactid="1006"></span></span></label></span></td><td class="" data-reactid="1007"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1008"></span><!-- react-empty: 1009 --><!-- react-text: 1010 -->Edward King 0<!-- /react-text --></td><td class="" data-reactid="1011"><!-- react-text: 1012 -->32<!-- /react-text --></td><td class="" data-reactid="1013"><!-- react-text: 1014 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1015"><td class="ant-table-selection-column" data-reactid="1016"><span data-reactid="1017"><label class="ant-checkbox-wrapper" data-reactid="1018"><span class="ant-checkbox" data-reactid="1019"><input type="checkbox" class="ant-checkbox-input" data-reactid="1020"/><span class="ant-checkbox-inner" data-reactid="1021"></span></span></label></span></td><td class="" data-reactid="1022"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1023"></span><!-- react-empty: 1024 --><!-- react-text: 1025 -->Edward King 1<!-- /react-text --></td><td class="" data-reactid="1026"><!-- react-text: 1027 -->32<!-- /react-text --></td><td class="" data-reactid="1028"><!-- react-text: 1029 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1030"><td class="ant-table-selection-column" data-reactid="1031"><span data-reactid="1032"><label class="ant-checkbox-wrapper" data-reactid="1033"><span class="ant-checkbox" data-reactid="1034"><input type="checkbox" class="ant-checkbox-input" data-reactid="1035"/><span class="ant-checkbox-inner" data-reactid="1036"></span></span></label></span></td><td class="" data-reactid="1037"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1038"></span><!-- react-empty: 1039 --><!-- react-text: 1040 -->Edward King 2<!-- /react-text --></td><td class="" data-reactid="1041"><!-- react-text: 1042 -->32<!-- /react-text --></td><td class="" data-reactid="1043"><!-- react-text: 1044 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1045"><td class="ant-table-selection-column" data-reactid="1046"><span data-reactid="1047"><label class="ant-checkbox-wrapper" data-reactid="1048"><span class="ant-checkbox" data-reactid="1049"><input type="checkbox" class="ant-checkbox-input" data-reactid="1050"/><span class="ant-checkbox-inner" data-reactid="1051"></span></span></label></span></td><td class="" data-reactid="1052"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1053"></span><!-- react-empty: 1054 --><!-- react-text: 1055 -->Edward King 3<!-- /react-text --></td><td class="" data-reactid="1056"><!-- react-text: 1057 -->32<!-- /react-text --></td><td class="" data-reactid="1058"><!-- react-text: 1059 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1060"><td class="ant-table-selection-column" data-reactid="1061"><span data-reactid="1062"><label class="ant-checkbox-wrapper" data-reactid="1063"><span class="ant-checkbox" data-reactid="1064"><input type="checkbox" class="ant-checkbox-input" data-reactid="1065"/><span class="ant-checkbox-inner" data-reactid="1066"></span></span></label></span></td><td class="" data-reactid="1067"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1068"></span><!-- react-empty: 1069 --><!-- react-text: 1070 -->Edward King 4<!-- /react-text --></td><td class="" data-reactid="1071"><!-- react-text: 1072 -->32<!-- /react-text --></td><td class="" data-reactid="1073"><!-- react-text: 1074 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1075"><td class="ant-table-selection-column" data-reactid="1076"><span data-reactid="1077"><label class="ant-checkbox-wrapper" data-reactid="1078"><span class="ant-checkbox" data-reactid="1079"><input type="checkbox" class="ant-checkbox-input" data-reactid="1080"/><span class="ant-checkbox-inner" data-reactid="1081"></span></span></label></span></td><td class="" data-reactid="1082"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1083"></span><!-- react-empty: 1084 --><!-- react-text: 1085 -->Edward King 5<!-- /react-text --></td><td class="" data-reactid="1086"><!-- react-text: 1087 -->32<!-- /react-text --></td><td class="" data-reactid="1088"><!-- react-text: 1089 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1090"><td class="ant-table-selection-column" data-reactid="1091"><span data-reactid="1092"><label class="ant-checkbox-wrapper" data-reactid="1093"><span class="ant-checkbox" data-reactid="1094"><input type="checkbox" class="ant-checkbox-input" data-reactid="1095"/><span class="ant-checkbox-inner" data-reactid="1096"></span></span></label></span></td><td class="" data-reactid="1097"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1098"></span><!-- react-empty: 1099 --><!-- react-text: 1100 -->Edward King 6<!-- /react-text --></td><td class="" data-reactid="1101"><!-- react-text: 1102 -->32<!-- /react-text --></td><td class="" data-reactid="1103"><!-- react-text: 1104 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1105"><td class="ant-table-selection-column" data-reactid="1106"><span data-reactid="1107"><label class="ant-checkbox-wrapper" data-reactid="1108"><span class="ant-checkbox" data-reactid="1109"><input type="checkbox" class="ant-checkbox-input" data-reactid="1110"/><span class="ant-checkbox-inner" data-reactid="1111"></span></span></label></span></td><td class="" data-reactid="1112"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1113"></span><!-- react-empty: 1114 --><!-- react-text: 1115 -->Edward King 7<!-- /react-text --></td><td class="" data-reactid="1116"><!-- react-text: 1117 -->32<!-- /react-text --></td><td class="" data-reactid="1118"><!-- react-text: 1119 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1120"><td class="ant-table-selection-column" data-reactid="1121"><span data-reactid="1122"><label class="ant-checkbox-wrapper" data-reactid="1123"><span class="ant-checkbox" data-reactid="1124"><input type="checkbox" class="ant-checkbox-input" data-reactid="1125"/><span class="ant-checkbox-inner" data-reactid="1126"></span></span></label></span></td><td class="" data-reactid="1127"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1128"></span><!-- react-empty: 1129 --><!-- react-text: 1130 -->Edward King 8<!-- /react-text --></td><td class="" data-reactid="1131"><!-- react-text: 1132 -->32<!-- /react-text --></td><td class="" data-reactid="1133"><!-- react-text: 1134 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1135"><td class="ant-table-selection-column" data-reactid="1136"><span data-reactid="1137"><label class="ant-checkbox-wrapper" data-reactid="1138"><span class="ant-checkbox" data-reactid="1139"><input type="checkbox" class="ant-checkbox-input" data-reactid="1140"/><span class="ant-checkbox-inner" data-reactid="1141"></span></span></label></span></td><td class="" data-reactid="1142"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1143"></span><!-- react-empty: 1144 --><!-- react-text: 1145 -->Edward King 9<!-- /react-text --></td><td class="" data-reactid="1146"><!-- react-text: 1147 -->32<!-- /react-text --></td><td class="" data-reactid="1148"><!-- react-text: 1149 -->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="1150"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1151"><a data-reactid="1152"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1153"><a data-reactid="1154">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="1155"><a data-reactid="1156">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="1157"><a data-reactid="1158">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="1159"><a data-reactid="1160">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" data-reactid="1161"><a data-reactid="1162">5</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="1163"><a data-reactid="1164"></a></li><!-- react-empty: 1165 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1166"><div class="code-box-title" data-reactid="1167"><a href="#components-table-demo-row-selection-custom" data-reactid="1168">Custom selection</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/row-selection-custom.md" data-reactid="1169"><i class="anticon anticon-edit" data-reactid="1170"></i></a></div><div data-reactid="1171"><p data-reactid="1172"><!-- react-text: 1173 -->Default selection is select all and select invert, Use <!-- /react-text --><code data-reactid="1174"><!-- react-text: 1175 -->rowSelection.selections<!-- /react-text --></code><!-- react-text: 1176 --> custom selections.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1177"></i></section><section class="highlight-wrapper" data-reactid="1178"><div class="highlight" data-reactid="1179"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1180"></i><pre class="language-jsx" data-reactid="1181"><code data-reactid="1182"><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"><</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"><</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"><</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="1183"><section class="code-box-demo" data-reactid="1184"><div data-reactid="1185"><div class="table-operations" data-reactid="1186"><button type="button" class="ant-btn" data-reactid="1187"><span data-reactid="1188">Sort age</span></button><button type="button" class="ant-btn" data-reactid="1189"><span data-reactid="1190">Clear filters</span></button><button type="button" class="ant-btn" data-reactid="1191"><span data-reactid="1192">Clear filters and sorters</span></button></div><div class="ant-table-wrapper" data-reactid="1193"><div class="ant-spin-nested-loading" data-reactid="1194"><div class="ant-spin-container" data-reactid="1195"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1196"><div class="ant-table-content" data-reactid="1197"><div class="ant-table-body" data-reactid="1198"><table class="" data-reactid="1199"><colgroup data-reactid="1200"><col data-reactid="1201"/><col data-reactid="1202"/><col data-reactid="1203"/></colgroup><thead class="ant-table-thead" data-reactid="1204"><tr data-reactid="1205"><th class="" data-reactid="1206"><span data-reactid="1207"><!-- react-text: 1208 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1209"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1210"><i class="anticon anticon-caret-up" data-reactid="1211"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1212"><i class="anticon anticon-caret-down" data-reactid="1213"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1214"></i></span></th><th class="" data-reactid="1215"><span data-reactid="1216"><!-- react-text: 1217 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1218"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1219"><i class="anticon anticon-caret-up" data-reactid="1220"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1221"><i class="anticon anticon-caret-down" data-reactid="1222"></i></span></div></span></th><th class="" data-reactid="1223"><span data-reactid="1224"><!-- react-text: 1225 -->Address<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1226"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1227"><i class="anticon anticon-caret-up" data-reactid="1228"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1229"><i class="anticon anticon-caret-down" data-reactid="1230"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1231"></i></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1232"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1233"><td class="" data-reactid="1234"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1235"></span><!-- react-empty: 1236 --><!-- react-text: 1237 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1238"><!-- react-text: 1239 -->32<!-- /react-text --></td><td class="" data-reactid="1240"><!-- react-text: 1241 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1242"><td class="" data-reactid="1243"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1244"></span><!-- react-empty: 1245 --><!-- react-text: 1246 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1247"><!-- react-text: 1248 -->42<!-- /react-text --></td><td class="" data-reactid="1249"><!-- react-text: 1250 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1251"><td class="" data-reactid="1252"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1253"></span><!-- react-empty: 1254 --><!-- react-text: 1255 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1256"><!-- react-text: 1257 -->32<!-- /react-text --></td><td class="" data-reactid="1258"><!-- react-text: 1259 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1260"><td class="" data-reactid="1261"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1262"></span><!-- react-empty: 1263 --><!-- react-text: 1264 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1265"><!-- react-text: 1266 -->32<!-- /react-text --></td><td class="" data-reactid="1267"><!-- react-text: 1268 -->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="1269"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1270"><a data-reactid="1271"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1272"><a data-reactid="1273">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1274"><a data-reactid="1275"></a></li><!-- react-empty: 1276 --></ul></div></div></div></div><style data-reactid="1277">.table-operations {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.table-operations > button {
|
||
margin-right: 8px;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="1278"><div class="code-box-title" data-reactid="1279"><a href="#components-table-demo-reset-filter" data-reactid="1280">Reset filters and sorters</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/reset-filter.md" data-reactid="1281"><i class="anticon anticon-edit" data-reactid="1282"></i></a></div><div data-reactid="1283"><p data-reactid="1284"><!-- react-text: 1285 -->Control filters and sorters by <!-- /react-text --><code data-reactid="1286"><!-- react-text: 1287 -->filteredValue<!-- /react-text --></code><!-- react-text: 1288 --> and <!-- /react-text --><code data-reactid="1289"><!-- react-text: 1290 -->sortOrder<!-- /react-text --></code><!-- react-text: 1291 -->.<!-- /react-text --></p><blockquote data-reactid="1292"><ol data-reactid="1293"><li data-reactid="1294"><p data-reactid="1295"><!-- react-text: 1296 -->Defining <!-- /react-text --><code data-reactid="1297"><!-- react-text: 1298 -->filteredValue<!-- /react-text --></code><!-- react-text: 1299 --> or <!-- /react-text --><code data-reactid="1300"><!-- react-text: 1301 -->sortOrder<!-- /react-text --></code><!-- react-text: 1302 --> means that it is in the controlled mode.<!-- /react-text --></p></li><li data-reactid="1303"><p data-reactid="1304"><!-- react-text: 1305 -->Make sure <!-- /react-text --><code data-reactid="1306"><!-- react-text: 1307 -->sortOrder<!-- /react-text --></code><!-- react-text: 1308 --> is assigned for only one column.<!-- /react-text --></p></li><li data-reactid="1309"><p data-reactid="1310"><code data-reactid="1311"><!-- react-text: 1312 -->column.key<!-- /react-text --></code><!-- react-text: 1313 --> is required.<!-- /react-text --></p></li></ol></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1314"></i></section><section class="highlight-wrapper" data-reactid="1315"><div class="highlight" data-reactid="1316"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1317"></i><pre class="language-jsx" data-reactid="1318"><code data-reactid="1319"><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">&&</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">&&</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">&&</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"><</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</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"><</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="1320"><pre data-reactid="1321"><code class="css" data-reactid="1322"><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="1323"><section class="code-box-demo" data-reactid="1324"><div class="ant-table-wrapper" data-reactid="1325"><div class="ant-spin-nested-loading" data-reactid="1326"><div class="ant-spin-container" data-reactid="1327"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1328"><div class="ant-table-content" data-reactid="1329"><div class="ant-table-body" data-reactid="1330"><table class="" data-reactid="1331"><colgroup data-reactid="1332"><col data-reactid="1333"/><col data-reactid="1334"/><col data-reactid="1335"/></colgroup><thead class="ant-table-thead" data-reactid="1336"><tr data-reactid="1337"><th class="" data-reactid="1338"><span data-reactid="1339"><!-- react-text: 1340 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1341"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1342"><i class="anticon anticon-caret-up" data-reactid="1343"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1344"><i class="anticon anticon-caret-down" data-reactid="1345"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1346"></i></span></th><th class="" data-reactid="1347"><span data-reactid="1348"><!-- react-text: 1349 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1350"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1351"><i class="anticon anticon-caret-up" data-reactid="1352"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1353"><i class="anticon anticon-caret-down" data-reactid="1354"></i></span></div></span></th><th class="" data-reactid="1355"><span data-reactid="1356"><!-- react-text: 1357 -->Address<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1358"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1359"><i class="anticon anticon-caret-up" data-reactid="1360"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1361"><i class="anticon anticon-caret-down" data-reactid="1362"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1363"></i></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1364"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1365"><td class="" data-reactid="1366"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1367"></span><!-- react-empty: 1368 --><!-- react-text: 1369 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1370"><!-- react-text: 1371 -->32<!-- /react-text --></td><td class="" data-reactid="1372"><!-- react-text: 1373 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1374"><td class="" data-reactid="1375"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1376"></span><!-- react-empty: 1377 --><!-- react-text: 1378 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1379"><!-- react-text: 1380 -->42<!-- /react-text --></td><td class="" data-reactid="1381"><!-- react-text: 1382 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1383"><td class="" data-reactid="1384"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1385"></span><!-- react-empty: 1386 --><!-- react-text: 1387 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1388"><!-- react-text: 1389 -->32<!-- /react-text --></td><td class="" data-reactid="1390"><!-- react-text: 1391 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1392"><td class="" data-reactid="1393"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1394"></span><!-- react-empty: 1395 --><!-- react-text: 1396 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1397"><!-- react-text: 1398 -->32<!-- /react-text --></td><td class="" data-reactid="1399"><!-- react-text: 1400 -->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="1401"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1402"><a data-reactid="1403"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1404"><a data-reactid="1405">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1406"><a data-reactid="1407"></a></li><!-- react-empty: 1408 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1409"><div class="code-box-title" data-reactid="1410"><a href="#components-table-demo-head" data-reactid="1411">Filter and sorter</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/head.md" data-reactid="1412"><i class="anticon anticon-edit" data-reactid="1413"></i></a></div><div data-reactid="1414"><p data-reactid="1415"><!-- react-text: 1416 -->Use <!-- /react-text --><code data-reactid="1417"><!-- react-text: 1418 -->filters<!-- /react-text --></code><!-- react-text: 1419 --> to generate filter menu in columns, <!-- /react-text --><code data-reactid="1420"><!-- react-text: 1421 -->onFilter<!-- /react-text --></code><!-- react-text: 1422 --> to determine filtered result, and <!-- /react-text --><code data-reactid="1423"><!-- react-text: 1424 -->filterMultiple<!-- /react-text --></code><!-- react-text: 1425 --> to indicate whether it's multiple or single selection.<!-- /react-text --></p><p data-reactid="1426"><!-- react-text: 1427 -->Use <!-- /react-text --><code data-reactid="1428"><!-- react-text: 1429 -->sorter<!-- /react-text --></code><!-- react-text: 1430 --> to make a column sortable. <!-- /react-text --><code data-reactid="1431"><!-- react-text: 1432 -->sorter<!-- /react-text --></code><!-- react-text: 1433 --> can be a function <!-- /react-text --><code data-reactid="1434"><!-- react-text: 1435 -->function(a, b) { ... }<!-- /react-text --></code><!-- react-text: 1436 --> for sorting data locally.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1437"></i></section><section class="highlight-wrapper" data-reactid="1438"><div class="highlight" data-reactid="1439"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1440"></i><pre class="language-jsx" data-reactid="1441"><code data-reactid="1442"><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"><</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="1443"><section class="code-box-demo" data-reactid="1444"><div class="ant-table-wrapper" data-reactid="1445"><div class="ant-spin-nested-loading" data-reactid="1446"><div class="ant-spin-container" data-reactid="1447"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1448"><div class="ant-table-content" data-reactid="1449"><div class="ant-table-body" data-reactid="1450"><table class="" data-reactid="1451"><colgroup data-reactid="1452"><col data-reactid="1453"/><col data-reactid="1454"/><col data-reactid="1455"/></colgroup><thead class="ant-table-thead" data-reactid="1456"><tr data-reactid="1457"><th class="" data-reactid="1458"><span data-reactid="1459"><!-- react-text: 1460 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1461"></i></span></th><th class="" data-reactid="1462"><span data-reactid="1463"><!-- react-text: 1464 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1465"><span data-reactid="1466"><!-- react-text: 1467 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1468"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1469"><td class="" data-reactid="1470"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1471"></span><!-- react-empty: 1472 --><!-- react-text: 1473 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1474"><!-- react-text: 1475 -->32<!-- /react-text --></td><td class="" data-reactid="1476"><!-- react-text: 1477 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1478"><td class="" data-reactid="1479"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1480"></span><!-- react-empty: 1481 --><!-- react-text: 1482 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1483"><!-- react-text: 1484 -->42<!-- /react-text --></td><td class="" data-reactid="1485"><!-- react-text: 1486 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1487"><td class="" data-reactid="1488"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1489"></span><!-- react-empty: 1490 --><!-- react-text: 1491 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1492"><!-- react-text: 1493 -->32<!-- /react-text --></td><td class="" data-reactid="1494"><!-- react-text: 1495 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1496"><td class="" data-reactid="1497"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1498"></span><!-- react-empty: 1499 --><!-- react-text: 1500 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1501"><!-- react-text: 1502 -->32<!-- /react-text --></td><td class="" data-reactid="1503"><!-- react-text: 1504 -->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="1505"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1506"><a data-reactid="1507"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1508"><a data-reactid="1509">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1510"><a data-reactid="1511"></a></li><!-- react-empty: 1512 --></ul></div></div></div><style data-reactid="1513">.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="1514"><div class="code-box-title" data-reactid="1515"><a href="#components-table-demo-custom-filter-panel" data-reactid="1516">Customized filter panel</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/custom-filter-panel.md" data-reactid="1517"><i class="anticon anticon-edit" data-reactid="1518"></i></a></div><div data-reactid="1519"><p data-reactid="1520"><!-- react-text: 1521 -->Implement a customized column search example via <!-- /react-text --><code data-reactid="1522"><!-- react-text: 1523 -->filterDropdown<!-- /react-text --></code><!-- react-text: 1524 -->, <!-- /react-text --><code data-reactid="1525"><!-- react-text: 1526 -->filterDropdownVisible<!-- /react-text --></code><!-- react-text: 1527 --> and <!-- /react-text --><code data-reactid="1528"><!-- react-text: 1529 -->filterDropdownVisibleChange<!-- /react-text --></code><!-- react-text: 1530 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1531"></i></section><section class="highlight-wrapper" data-reactid="1532"><div class="highlight" data-reactid="1533"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1534"></i><pre class="language-jsx" data-reactid="1535"><code data-reactid="1536"><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"><</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"><</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"></</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"></</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"><</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"><</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"><</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"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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"><</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"><</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="1537"><pre data-reactid="1538"><code class="css" data-reactid="1539"><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="1540"><section class="code-box-demo" data-reactid="1541"><div class="ant-table-wrapper" data-reactid="1542"><div class="ant-spin-nested-loading" data-reactid="1543"><div class="ant-spin-container" data-reactid="1544"><div class="ant-table ant-table-large ant-table-empty ant-table-scroll-position-left" data-reactid="1545"><div class="ant-table-content" data-reactid="1546"><div class="ant-table-body" data-reactid="1547"><table class="" data-reactid="1548"><colgroup data-reactid="1549"><col style="width:20%;min-width:20%;" data-reactid="1550"/><col style="width:20%;min-width:20%;" data-reactid="1551"/><col data-reactid="1552"/></colgroup><thead class="ant-table-thead" data-reactid="1553"><tr data-reactid="1554"><th class="" data-reactid="1555"><span data-reactid="1556"><!-- react-text: 1557 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1558"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1559"><i class="anticon anticon-caret-up" data-reactid="1560"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1561"><i class="anticon anticon-caret-down" data-reactid="1562"></i></span></div></span></th><th class="" data-reactid="1563"><span data-reactid="1564"><!-- react-text: 1565 -->Gender<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1566"></i></span></th><th class="" data-reactid="1567"><span data-reactid="1568"><!-- react-text: 1569 -->Email<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1570"></tbody></table></div><div class="ant-table-placeholder" data-reactid="1571">No Data</div></div></div></div></div></div></section><section class="code-box-meta markdown" data-reactid="1572"><div class="code-box-title" data-reactid="1573"><a href="#components-table-demo-ajax" data-reactid="1574">Ajax</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/ajax.md" data-reactid="1575"><i class="anticon anticon-edit" data-reactid="1576"></i></a></div><div data-reactid="1577"><p data-reactid="1578"><!-- react-text: 1579 -->This example shows how to fetch and present data from remote server, and how to implement filtering and sorting in server side by sending related parameters to server.<!-- /react-text --></p><p data-reactid="1580"><strong data-reactid="1581"><!-- react-text: 1582 -->Note, this example use <!-- /react-text --><a href="https://randomuser.me" data-reactid="1583"><!-- react-text: 1584 -->Mock API<!-- /react-text --></a><!-- react-text: 1585 --> that you can look up in Network Console.<!-- /react-text --></strong></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1586"></i></section><section class="highlight-wrapper" data-reactid="1587"><div class="highlight" data-reactid="1588"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1589"></i><pre class="language-jsx" data-reactid="1590"><code data-reactid="1591"><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"><</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"><</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="1592"><section class="code-box-demo" data-reactid="1593"><div data-reactid="1594"><h4 data-reactid="1595">Middle size table</h4><div class="ant-table-wrapper" data-reactid="1596"><div class="ant-spin-nested-loading" data-reactid="1597"><div class="ant-spin-container" data-reactid="1598"><div class="ant-table ant-table-middle ant-table-scroll-position-left" data-reactid="1599"><div class="ant-table-content" data-reactid="1600"><div class="ant-table-body" data-reactid="1601"><table class="" data-reactid="1602"><colgroup data-reactid="1603"><col data-reactid="1604"/><col data-reactid="1605"/><col data-reactid="1606"/></colgroup><thead class="ant-table-thead" data-reactid="1607"><tr data-reactid="1608"><th class="" data-reactid="1609"><span data-reactid="1610"><!-- react-text: 1611 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1612"><span data-reactid="1613"><!-- react-text: 1614 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1615"><span data-reactid="1616"><!-- react-text: 1617 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1618"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1619"><td class="" data-reactid="1620"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1621"></span><!-- react-empty: 1622 --><!-- react-text: 1623 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1624"><!-- react-text: 1625 -->32<!-- /react-text --></td><td class="" data-reactid="1626"><!-- react-text: 1627 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1628"><td class="" data-reactid="1629"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1630"></span><!-- react-empty: 1631 --><!-- react-text: 1632 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1633"><!-- react-text: 1634 -->42<!-- /react-text --></td><td class="" data-reactid="1635"><!-- react-text: 1636 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1637"><td class="" data-reactid="1638"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1639"></span><!-- react-empty: 1640 --><!-- react-text: 1641 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1642"><!-- react-text: 1643 -->32<!-- /react-text --></td><td class="" data-reactid="1644"><!-- react-text: 1645 -->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="1646"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1647"><a data-reactid="1648"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1649"><a data-reactid="1650">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1651"><a data-reactid="1652"></a></li><!-- react-empty: 1653 --></ul></div></div></div><h4 data-reactid="1654">Small size table</h4><div class="ant-table-wrapper" data-reactid="1655"><div class="ant-spin-nested-loading" data-reactid="1656"><div class="ant-spin-container" data-reactid="1657"><div class="ant-table ant-table-small ant-table-scroll-position-left" data-reactid="1658"><div class="ant-table-content" data-reactid="1659"><div class="ant-table-body" data-reactid="1660"><table class="" data-reactid="1661"><colgroup data-reactid="1662"><col data-reactid="1663"/><col data-reactid="1664"/><col data-reactid="1665"/></colgroup><thead class="ant-table-thead" data-reactid="1666"><tr data-reactid="1667"><th class="" data-reactid="1668"><span data-reactid="1669"><!-- react-text: 1670 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1671"><span data-reactid="1672"><!-- react-text: 1673 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1674"><span data-reactid="1675"><!-- react-text: 1676 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1677"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1678"><td class="" data-reactid="1679"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1680"></span><!-- react-empty: 1681 --><!-- react-text: 1682 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1683"><!-- react-text: 1684 -->32<!-- /react-text --></td><td class="" data-reactid="1685"><!-- react-text: 1686 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1687"><td class="" data-reactid="1688"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1689"></span><!-- react-empty: 1690 --><!-- react-text: 1691 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1692"><!-- react-text: 1693 -->42<!-- /react-text --></td><td class="" data-reactid="1694"><!-- react-text: 1695 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1696"><td class="" data-reactid="1697"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1698"></span><!-- react-empty: 1699 --><!-- react-text: 1700 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1701"><!-- react-text: 1702 -->32<!-- /react-text --></td><td class="" data-reactid="1703"><!-- react-text: 1704 -->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="1705"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1706"><a data-reactid="1707"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1708"><a data-reactid="1709">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1710"><a data-reactid="1711"></a></li><!-- react-empty: 1712 --></ul></div></div></div></div><style data-reactid="1713">#components-table-demo-size h4 { margin-bottom: 16px; }</style></section><section class="code-box-meta markdown" data-reactid="1714"><div class="code-box-title" data-reactid="1715"><a href="#components-table-demo-size" data-reactid="1716">size</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/size.md" data-reactid="1717"><i class="anticon anticon-edit" data-reactid="1718"></i></a></div><div data-reactid="1719"><p data-reactid="1720"><!-- react-text: 1721 -->Two compacted table size: <!-- /react-text --><code data-reactid="1722"><!-- react-text: 1723 -->middle<!-- /react-text --></code><!-- react-text: 1724 --> and <!-- /react-text --><code data-reactid="1725"><!-- react-text: 1726 -->small<!-- /react-text --></code><!-- react-text: 1727 -->, <!-- /react-text --><code data-reactid="1728"><!-- react-text: 1729 -->small<!-- /react-text --></code><!-- react-text: 1730 --> size is used in Modal only.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1731"></i></section><section class="highlight-wrapper" data-reactid="1732"><div class="highlight" data-reactid="1733"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1734"></i><pre class="language-jsx" data-reactid="1735"><code data-reactid="1736"><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"><</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Middle size table<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>h4</span><span class="token punctuation">></span></span>Small size table<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</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="1737"><section class="code-box-demo" data-reactid="1738"><div class="ant-table-wrapper" data-reactid="1739"><div class="ant-spin-nested-loading" data-reactid="1740"><div class="ant-spin-container" data-reactid="1741"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="1742"><div class="ant-table-title" data-reactid="1743">Header</div><div class="ant-table-content" data-reactid="1744"><div class="ant-table-body" data-reactid="1745"><table class="" data-reactid="1746"><colgroup data-reactid="1747"><col data-reactid="1748"/><col data-reactid="1749"/><col data-reactid="1750"/></colgroup><thead class="ant-table-thead" data-reactid="1751"><tr data-reactid="1752"><th class="" data-reactid="1753"><span data-reactid="1754"><!-- react-text: 1755 -->Name<!-- /react-text --></span></th><th class="column-money" data-reactid="1756"><span data-reactid="1757"><!-- react-text: 1758 -->Cash Assets<!-- /react-text --></span></th><th class="" data-reactid="1759"><span data-reactid="1760"><!-- react-text: 1761 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1762"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1763"><td class="" data-reactid="1764"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1765"></span><!-- react-empty: 1766 --><a href="#" data-reactid="1767">John Brown</a></td><td class="column-money" data-reactid="1768"><!-- react-text: 1769 -->￥300,000.00<!-- /react-text --></td><td class="" data-reactid="1770"><!-- react-text: 1771 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1772"><td class="" data-reactid="1773"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1774"></span><!-- react-empty: 1775 --><a href="#" data-reactid="1776">Jim Green</a></td><td class="column-money" data-reactid="1777"><!-- react-text: 1778 -->￥1,256,000.00<!-- /react-text --></td><td class="" data-reactid="1779"><!-- react-text: 1780 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1781"><td class="" data-reactid="1782"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1783"></span><!-- react-empty: 1784 --><a href="#" data-reactid="1785">Joe Black</a></td><td class="column-money" data-reactid="1786"><!-- react-text: 1787 -->￥120,000.00<!-- /react-text --></td><td class="" data-reactid="1788"><!-- react-text: 1789 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div><div class="ant-table-footer" data-reactid="1790">Footer</div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1791"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1792"><a data-reactid="1793"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1794"><a data-reactid="1795">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1796"><a data-reactid="1797"></a></li><!-- react-empty: 1798 --></ul></div></div></div><style data-reactid="1799">.column-money {
|
||
text-align: right;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="1800"><div class="code-box-title" data-reactid="1801"><a href="#components-table-demo-bordered" data-reactid="1802">border, title and footer</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/bordered.md" data-reactid="1803"><i class="anticon anticon-edit" data-reactid="1804"></i></a></div><div data-reactid="1805"><p data-reactid="1806"><!-- react-text: 1807 -->Add border, title and footer for table.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1808"></i></section><section class="highlight-wrapper" data-reactid="1809"><div class="highlight" data-reactid="1810"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1811"></i><pre class="language-jsx" data-reactid="1812"><code data-reactid="1813"><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"><</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"></</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"><</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="1814"><pre data-reactid="1815"><code class="css" data-reactid="1816"><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="1817"><section class="code-box-demo" data-reactid="1818"><div class="ant-table-wrapper" data-reactid="1819"><div class="ant-spin-nested-loading" data-reactid="1820"><div class="ant-spin-container" data-reactid="1821"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1822"><div class="ant-table-content" data-reactid="1823"><div class="ant-table-body" data-reactid="1824"><table class="" data-reactid="1825"><colgroup data-reactid="1826"><col class="ant-table-expand-icon-col" data-reactid="1827"/><col data-reactid="1828"/><col data-reactid="1829"/><col data-reactid="1830"/><col data-reactid="1831"/></colgroup><thead class="ant-table-thead" data-reactid="1832"><tr data-reactid="1833"><th class="ant-table-expand-icon-th" title="" rowspan="1" data-reactid="1834"></th><th class="" data-reactid="1835"><span data-reactid="1836"><!-- react-text: 1837 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1838"><span data-reactid="1839"><!-- react-text: 1840 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1841"><span data-reactid="1842"><!-- react-text: 1843 -->Address<!-- /react-text --></span></th><th class="" data-reactid="1844"><span data-reactid="1845"><!-- react-text: 1846 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1847"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1848"><td class="ant-table-row-expand-icon-cell" data-reactid="1849"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1850"></span></td><td class="" data-reactid="1851"><!-- react-text: 1852 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1853"><!-- react-text: 1854 -->32<!-- /react-text --></td><td class="" data-reactid="1855"><!-- react-text: 1856 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1857"><a href="#" data-reactid="1858">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1859"><td class="ant-table-row-expand-icon-cell" data-reactid="1860"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1861"></span></td><td class="" data-reactid="1862"><!-- react-text: 1863 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1864"><!-- react-text: 1865 -->42<!-- /react-text --></td><td class="" data-reactid="1866"><!-- react-text: 1867 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1868"><a href="#" data-reactid="1869">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1870"><td class="ant-table-row-expand-icon-cell" data-reactid="1871"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1872"></span></td><td class="" data-reactid="1873"><!-- react-text: 1874 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1875"><!-- react-text: 1876 -->32<!-- /react-text --></td><td class="" data-reactid="1877"><!-- react-text: 1878 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1879"><a href="#" data-reactid="1880">Delete</a></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1881"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1882"><a data-reactid="1883"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1884"><a data-reactid="1885">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1886"><a data-reactid="1887"></a></li><!-- react-empty: 1888 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1889"><div class="code-box-title" data-reactid="1890"><a href="#components-table-demo-expand" data-reactid="1891">Expandable Row</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/expand.md" data-reactid="1892"><i class="anticon anticon-edit" data-reactid="1893"></i></a></div><div data-reactid="1894"><p data-reactid="1895"><!-- react-text: 1896 -->When there's too much information to show and the table can't display all at once.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1897"></i></section><section class="highlight-wrapper" data-reactid="1898"><div class="highlight" data-reactid="1899"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1900"></i><pre class="language-jsx" data-reactid="1901"><code data-reactid="1902"><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"><</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"></</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"><</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"><</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"></</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="1903"><section class="code-box-demo" data-reactid="1904"><div class="ant-table-wrapper" data-reactid="1905"><div class="ant-spin-nested-loading" data-reactid="1906"><div class="ant-spin-container" data-reactid="1907"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="1908"><div class="ant-table-content" data-reactid="1909"><div class="ant-table-body" data-reactid="1910"><table class="" data-reactid="1911"><colgroup data-reactid="1912"><col data-reactid="1913"/><col data-reactid="1914"/><col data-reactid="1915"/><col data-reactid="1916"/><col data-reactid="1917"/></colgroup><thead class="ant-table-thead" data-reactid="1918"><tr data-reactid="1919"><th class="" data-reactid="1920"><span data-reactid="1921"><!-- react-text: 1922 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1923"><span data-reactid="1924"><!-- react-text: 1925 -->Age<!-- /react-text --></span></th><th class="" colspan="2" data-reactid="1926"><span data-reactid="1927"><!-- react-text: 1928 -->Home phone<!-- /react-text --></span></th><th class="" data-reactid="1929"><span data-reactid="1930"><!-- react-text: 1931 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1932"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1933"><td class="" data-reactid="1934"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1935"></span><!-- react-empty: 1936 --><a href="#" data-reactid="1937">John Brown</a></td><td class="" data-reactid="1938"><!-- react-text: 1939 -->32<!-- /react-text --></td><td class="" data-reactid="1940"><!-- react-text: 1941 -->0571-22098909<!-- /react-text --></td><td class="" data-reactid="1942"><!-- react-text: 1943 -->18889898989<!-- /react-text --></td><td class="" data-reactid="1944"><!-- react-text: 1945 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1946"><td class="" data-reactid="1947"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1948"></span><!-- react-empty: 1949 --><a href="#" data-reactid="1950">Jim Green</a></td><td class="" data-reactid="1951"><!-- react-text: 1952 -->42<!-- /react-text --></td><td class="" data-reactid="1953"><!-- react-text: 1954 -->0571-22098333<!-- /react-text --></td><td class="" data-reactid="1955"><!-- react-text: 1956 -->18889898888<!-- /react-text --></td><td class="" data-reactid="1957"><!-- react-text: 1958 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1959"><td class="" data-reactid="1960"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1961"></span><!-- react-empty: 1962 --><a href="#" data-reactid="1963">Joe Black</a></td><td class="" data-reactid="1964"><!-- react-text: 1965 -->32<!-- /react-text --></td><td class="" rowspan="2" data-reactid="1966"><!-- react-text: 1967 -->0575-22098909<!-- /react-text --></td><td class="" data-reactid="1968"><!-- react-text: 1969 -->18900010002<!-- /react-text --></td><td class="" data-reactid="1970"><!-- react-text: 1971 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1972"><td class="" data-reactid="1973"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1974"></span><!-- react-empty: 1975 --><a href="#" data-reactid="1976">Jim Red</a></td><td class="" data-reactid="1977"><!-- react-text: 1978 -->18<!-- /react-text --></td><!-- react-empty: 1979 --><td class="" data-reactid="1980"><!-- react-text: 1981 -->18900010002<!-- /react-text --></td><td class="" data-reactid="1982"><!-- react-text: 1983 -->London No. 2 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1984"><td class="" colspan="5" data-reactid="1985"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1986"></span><!-- react-empty: 1987 --><a href="#" data-reactid="1988">Jake White</a></td><!-- react-empty: 1989 --><!-- react-empty: 1990 --><!-- react-empty: 1991 --><!-- react-empty: 1992 --></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1993"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1994"><a data-reactid="1995"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1996"><a data-reactid="1997">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1998"><a data-reactid="1999"></a></li><!-- react-empty: 2000 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="2001"><div class="code-box-title" data-reactid="2002"><a href="#components-table-demo-colspan-rowspan" data-reactid="2003">colSpan and rowSpan</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/colspan-rowspan.md" data-reactid="2004"><i class="anticon anticon-edit" data-reactid="2005"></i></a></div><div data-reactid="2006"><p data-reactid="2007"><!-- react-text: 2008 -->Table column title supports <!-- /react-text --><code data-reactid="2009"><!-- react-text: 2010 -->colSpan<!-- /react-text --></code><!-- react-text: 2011 --> that set in <!-- /react-text --><code data-reactid="2012"><!-- react-text: 2013 -->column<!-- /react-text --></code><!-- react-text: 2014 -->.<!-- /react-text --></p><p data-reactid="2015"><!-- react-text: 2016 -->Table cell supports <!-- /react-text --><code data-reactid="2017"><!-- react-text: 2018 -->colSpan<!-- /react-text --></code><!-- react-text: 2019 --> and <!-- /react-text --><code data-reactid="2020"><!-- react-text: 2021 -->rowSpan<!-- /react-text --></code><!-- react-text: 2022 --> that set in render return object. When each of them is set to <!-- /react-text --><code data-reactid="2023"><!-- react-text: 2024 -->0<!-- /react-text --></code><!-- react-text: 2025 -->, the cell will not be rendered.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="2026"></i></section><section class="highlight-wrapper" data-reactid="2027"><div class="highlight" data-reactid="2028"><i class="anticon anticon-copy code-box-code-copy" data-reactid="2029"></i><pre class="language-jsx" data-reactid="2030"><code data-reactid="2031"><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"><</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"><</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"></</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"><</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"></</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"><</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="2032"><section class="code-box-demo" data-reactid="2033"><div class="ant-table-wrapper" data-reactid="2034"><div class="ant-spin-nested-loading" data-reactid="2035"><div class="ant-spin-container" data-reactid="2036"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="2037"><div class="ant-table-content" data-reactid="2038"><div class="ant-table-body" data-reactid="2039"><table class="" data-reactid="2040"><colgroup data-reactid="2041"><col data-reactid="2042"/><col style="width:40%;min-width:40%;" data-reactid="2043"/><col style="width:30%;min-width:30%;" data-reactid="2044"/><col data-reactid="2045"/></colgroup><thead class="ant-table-thead" data-reactid="2046"><tr data-reactid="2047"><th class="ant-table-selection-column" data-reactid="2048"><span data-reactid="2049"><div class="ant-table-selection" data-reactid="2050"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="2051"><span class="ant-checkbox" data-reactid="2052"><input type="checkbox" class="ant-checkbox-input" data-reactid="2053"/><span class="ant-checkbox-inner" data-reactid="2054"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="2055"><i class="anticon anticon-down" data-reactid="2056"></i></div></div></span></th><th class="" data-reactid="2057"><span data-reactid="2058"><!-- react-text: 2059 -->Name<!-- /react-text --></span></th><th class="" data-reactid="2060"><span data-reactid="2061"><!-- react-text: 2062 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2063"><span data-reactid="2064"><!-- react-text: 2065 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2066"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2067"><td class="ant-table-selection-column" data-reactid="2068"><span data-reactid="2069"><label class="ant-checkbox-wrapper" data-reactid="2070"><span class="ant-checkbox" data-reactid="2071"><input type="checkbox" class="ant-checkbox-input" data-reactid="2072"/><span class="ant-checkbox-inner" data-reactid="2073"></span></span></label></span></td><td class="" data-reactid="2074"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2075"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2076"></span><!-- react-text: 2077 -->John Brown sr.<!-- /react-text --></td><td class="" data-reactid="2078"><!-- react-text: 2079 -->60<!-- /react-text --></td><td class="" data-reactid="2080"><!-- react-text: 2081 -->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="2082"><td class="ant-table-selection-column" data-reactid="2083"><span data-reactid="2084"><label class="ant-checkbox-wrapper" data-reactid="2085"><span class="ant-checkbox" data-reactid="2086"><input type="checkbox" class="ant-checkbox-input" data-reactid="2087"/><span class="ant-checkbox-inner" data-reactid="2088"></span></span></label></span></td><td class="" data-reactid="2089"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="2090"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2091"></span><!-- react-text: 2092 -->John Brown<!-- /react-text --></td><td class="" data-reactid="2093"><!-- react-text: 2094 -->42<!-- /react-text --></td><td class="" data-reactid="2095"><!-- react-text: 2096 -->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="2097"><td class="ant-table-selection-column" data-reactid="2098"><span data-reactid="2099"><label class="ant-checkbox-wrapper" data-reactid="2100"><span class="ant-checkbox" data-reactid="2101"><input type="checkbox" class="ant-checkbox-input" data-reactid="2102"/><span class="ant-checkbox-inner" data-reactid="2103"></span></span></label></span></td><td class="" data-reactid="2104"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="2105"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2106"></span><!-- react-text: 2107 -->John Brown jr.<!-- /react-text --></td><td class="" data-reactid="2108"><!-- react-text: 2109 -->30<!-- /react-text --></td><td class="" data-reactid="2110"><!-- react-text: 2111 -->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="2112"><td class="ant-table-selection-column" data-reactid="2113"><span data-reactid="2114"><label class="ant-checkbox-wrapper" data-reactid="2115"><span class="ant-checkbox" data-reactid="2116"><input type="checkbox" class="ant-checkbox-input" data-reactid="2117"/><span class="ant-checkbox-inner" data-reactid="2118"></span></span></label></span></td><td class="" data-reactid="2119"><span style="padding-left:40px;" class="ant-table-row-indent indent-level-2" data-reactid="2120"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2121"></span><!-- react-text: 2122 -->Jimmy Brown<!-- /react-text --></td><td class="" data-reactid="2123"><!-- react-text: 2124 -->16<!-- /react-text --></td><td class="" data-reactid="2125"><!-- react-text: 2126 -->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="2127"><td class="ant-table-selection-column" data-reactid="2128"><span data-reactid="2129"><label class="ant-checkbox-wrapper" data-reactid="2130"><span class="ant-checkbox" data-reactid="2131"><input type="checkbox" class="ant-checkbox-input" data-reactid="2132"/><span class="ant-checkbox-inner" data-reactid="2133"></span></span></label></span></td><td class="" data-reactid="2134"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="2135"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2136"></span><!-- react-text: 2137 -->Jim Green sr.<!-- /react-text --></td><td class="" data-reactid="2138"><!-- react-text: 2139 -->72<!-- /react-text --></td><td class="" data-reactid="2140"><!-- react-text: 2141 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-2" style="display:none;" data-reactid="2142"><td class="ant-table-selection-column" data-reactid="2143"><span data-reactid="2144"><label class="ant-checkbox-wrapper" data-reactid="2145"><span class="ant-checkbox" data-reactid="2146"><input type="checkbox" class="ant-checkbox-input" data-reactid="2147"/><span class="ant-checkbox-inner" data-reactid="2148"></span></span></label></span></td><td class="" data-reactid="2149"><span style="padding-left:40px;" class="ant-table-row-indent indent-level-2" data-reactid="2150"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2151"></span><!-- react-text: 2152 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2153"><!-- react-text: 2154 -->42<!-- /react-text --></td><td class="" data-reactid="2155"><!-- react-text: 2156 -->London No. 2 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-3" style="display:none;" data-reactid="2157"><td class="ant-table-selection-column" data-reactid="2158"><span data-reactid="2159"><label class="ant-checkbox-wrapper" data-reactid="2160"><span class="ant-checkbox" data-reactid="2161"><input type="checkbox" class="ant-checkbox-input" data-reactid="2162"/><span class="ant-checkbox-inner" data-reactid="2163"></span></span></label></span></td><td class="" data-reactid="2164"><span style="padding-left:60px;" class="ant-table-row-indent indent-level-3" data-reactid="2165"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2166"></span><!-- react-text: 2167 -->Jim Green jr.<!-- /react-text --></td><td class="" data-reactid="2168"><!-- react-text: 2169 -->25<!-- /react-text --></td><td class="" data-reactid="2170"><!-- react-text: 2171 -->London No. 3 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-3" style="display:none;" data-reactid="2172"><td class="ant-table-selection-column" data-reactid="2173"><span data-reactid="2174"><label class="ant-checkbox-wrapper" data-reactid="2175"><span class="ant-checkbox" data-reactid="2176"><input type="checkbox" class="ant-checkbox-input" data-reactid="2177"/><span class="ant-checkbox-inner" data-reactid="2178"></span></span></label></span></td><td class="" data-reactid="2179"><span style="padding-left:60px;" class="ant-table-row-indent indent-level-3" data-reactid="2180"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2181"></span><!-- react-text: 2182 -->Jimmy Green sr.<!-- /react-text --></td><td class="" data-reactid="2183"><!-- react-text: 2184 -->18<!-- /react-text --></td><td class="" data-reactid="2185"><!-- react-text: 2186 -->London No. 4 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2187"><td class="ant-table-selection-column" data-reactid="2188"><span data-reactid="2189"><label class="ant-checkbox-wrapper" data-reactid="2190"><span class="ant-checkbox" data-reactid="2191"><input type="checkbox" class="ant-checkbox-input" data-reactid="2192"/><span class="ant-checkbox-inner" data-reactid="2193"></span></span></label></span></td><td class="" data-reactid="2194"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2195"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2196"></span><!-- react-text: 2197 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="2198"><!-- react-text: 2199 -->32<!-- /react-text --></td><td class="" data-reactid="2200"><!-- react-text: 2201 -->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="2202"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2203"><a data-reactid="2204"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2205"><a data-reactid="2206">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="2207"><a data-reactid="2208"></a></li><!-- react-empty: 2209 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="2210"><div class="code-box-title" data-reactid="2211"><a href="#components-table-demo-expand-children" data-reactid="2212">Tree data</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/expand-children.md" data-reactid="2213"><i class="anticon anticon-edit" data-reactid="2214"></i></a></div><div data-reactid="2215"><p data-reactid="2216"><!-- react-text: 2217 -->Display tree structure data in Table, control the indent width by setting <!-- /react-text --><code data-reactid="2218"><!-- react-text: 2219 -->indentSize<!-- /react-text --></code><!-- react-text: 2220 -->.<!-- /react-text --></p><blockquote data-reactid="2221"><p data-reactid="2222"><!-- react-text: 2223 -->Note, no support for recursive selection of tree structure data table yet.<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="2224"></i></section><section class="highlight-wrapper" data-reactid="2225"><div class="highlight" data-reactid="2226"><i class="anticon anticon-copy code-box-code-copy" data-reactid="2227"></i><pre class="language-jsx" data-reactid="2228"><code data-reactid="2229"><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"><</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="2230"><section class="code-box-demo" data-reactid="2231"><div class="ant-table-wrapper" data-reactid="2232"><div class="ant-spin-nested-loading" data-reactid="2233"><div class="ant-spin-container" data-reactid="2234"><div class="ant-table ant-table-large ant-table-fixed-header ant-table-scroll-position-left" data-reactid="2235"><div class="ant-table-content" data-reactid="2236"><div class="ant-table-scroll" data-reactid="2237"><div class="ant-table-header" data-reactid="2238"><table class="" data-reactid="2239"><colgroup data-reactid="2240"><col style="width:150px;min-width:150px;" data-reactid="2241"/><col style="width:150px;min-width:150px;" data-reactid="2242"/><col data-reactid="2243"/></colgroup><thead class="ant-table-thead" data-reactid="2244"><tr data-reactid="2245"><th class="" data-reactid="2246"><span data-reactid="2247"><!-- react-text: 2248 -->Name<!-- /react-text --></span></th><th class="" data-reactid="2249"><span data-reactid="2250"><!-- react-text: 2251 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2252"><span data-reactid="2253"><!-- react-text: 2254 -->Address<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body" style="max-height:240px;overflow-y:scroll;" data-reactid="2255"><table class="" data-reactid="2256"><colgroup data-reactid="2257"><col style="width:150px;min-width:150px;" data-reactid="2258"/><col style="width:150px;min-width:150px;" data-reactid="2259"/><col data-reactid="2260"/></colgroup><tbody class="ant-table-tbody" data-reactid="2261"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2262"><td class="" data-reactid="2263"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2264"></span><!-- react-empty: 2265 --><!-- react-text: 2266 -->Edward King 0<!-- /react-text --></td><td class="" data-reactid="2267"><!-- react-text: 2268 -->32<!-- /react-text --></td><td class="" data-reactid="2269"><!-- react-text: 2270 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2271"><td class="" data-reactid="2272"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2273"></span><!-- react-empty: 2274 --><!-- react-text: 2275 -->Edward King 1<!-- /react-text --></td><td class="" data-reactid="2276"><!-- react-text: 2277 -->32<!-- /react-text --></td><td class="" data-reactid="2278"><!-- react-text: 2279 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2280"><td class="" data-reactid="2281"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2282"></span><!-- react-empty: 2283 --><!-- react-text: 2284 -->Edward King 2<!-- /react-text --></td><td class="" data-reactid="2285"><!-- react-text: 2286 -->32<!-- /react-text --></td><td class="" data-reactid="2287"><!-- react-text: 2288 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2289"><td class="" data-reactid="2290"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2291"></span><!-- react-empty: 2292 --><!-- react-text: 2293 -->Edward King 3<!-- /react-text --></td><td class="" data-reactid="2294"><!-- react-text: 2295 -->32<!-- /react-text --></td><td class="" data-reactid="2296"><!-- react-text: 2297 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2298"><td class="" data-reactid="2299"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2300"></span><!-- react-empty: 2301 --><!-- react-text: 2302 -->Edward King 4<!-- /react-text --></td><td class="" data-reactid="2303"><!-- react-text: 2304 -->32<!-- /react-text --></td><td class="" data-reactid="2305"><!-- react-text: 2306 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2307"><td class="" data-reactid="2308"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2309"></span><!-- react-empty: 2310 --><!-- react-text: 2311 -->Edward King 5<!-- /react-text --></td><td class="" data-reactid="2312"><!-- react-text: 2313 -->32<!-- /react-text --></td><td class="" data-reactid="2314"><!-- react-text: 2315 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2316"><td class="" data-reactid="2317"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2318"></span><!-- react-empty: 2319 --><!-- react-text: 2320 -->Edward King 6<!-- /react-text --></td><td class="" data-reactid="2321"><!-- react-text: 2322 -->32<!-- /react-text --></td><td class="" data-reactid="2323"><!-- react-text: 2324 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2325"><td class="" data-reactid="2326"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2327"></span><!-- react-empty: 2328 --><!-- react-text: 2329 -->Edward King 7<!-- /react-text --></td><td class="" data-reactid="2330"><!-- react-text: 2331 -->32<!-- /react-text --></td><td class="" data-reactid="2332"><!-- react-text: 2333 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2334"><td class="" data-reactid="2335"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2336"></span><!-- react-empty: 2337 --><!-- react-text: 2338 -->Edward King 8<!-- /react-text --></td><td class="" data-reactid="2339"><!-- react-text: 2340 -->32<!-- /react-text --></td><td class="" data-reactid="2341"><!-- react-text: 2342 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2343"><td class="" data-reactid="2344"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2345"></span><!-- react-empty: 2346 --><!-- react-text: 2347 -->Edward King 9<!-- /react-text --></td><td class="" data-reactid="2348"><!-- react-text: 2349 -->32<!-- /react-text --></td><td class="" data-reactid="2350"><!-- react-text: 2351 -->London, Park Lane no. 9<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2352"><td class="" data-reactid="2353"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2354"></span><!-- react-empty: 2355 --><!-- react-text: 2356 -->Edward King 10<!-- /react-text --></td><td class="" data-reactid="2357"><!-- react-text: 2358 -->32<!-- /react-text --></td><td class="" data-reactid="2359"><!-- react-text: 2360 -->London, Park Lane no. 10<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2361"><td class="" data-reactid="2362"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2363"></span><!-- react-empty: 2364 --><!-- react-text: 2365 -->Edward King 11<!-- /react-text --></td><td class="" data-reactid="2366"><!-- react-text: 2367 -->32<!-- /react-text --></td><td class="" data-reactid="2368"><!-- react-text: 2369 -->London, Park Lane no. 11<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2370"><td class="" data-reactid="2371"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2372"></span><!-- react-empty: 2373 --><!-- react-text: 2374 -->Edward King 12<!-- /react-text --></td><td class="" data-reactid="2375"><!-- react-text: 2376 -->32<!-- /react-text --></td><td class="" data-reactid="2377"><!-- react-text: 2378 -->London, Park Lane no. 12<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2379"><td class="" data-reactid="2380"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2381"></span><!-- react-empty: 2382 --><!-- react-text: 2383 -->Edward King 13<!-- /react-text --></td><td class="" data-reactid="2384"><!-- react-text: 2385 -->32<!-- /react-text --></td><td class="" data-reactid="2386"><!-- react-text: 2387 -->London, Park Lane no. 13<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2388"><td class="" data-reactid="2389"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2390"></span><!-- react-empty: 2391 --><!-- react-text: 2392 -->Edward King 14<!-- /react-text --></td><td class="" data-reactid="2393"><!-- react-text: 2394 -->32<!-- /react-text --></td><td class="" data-reactid="2395"><!-- react-text: 2396 -->London, Park Lane no. 14<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2397"><td class="" data-reactid="2398"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2399"></span><!-- react-empty: 2400 --><!-- react-text: 2401 -->Edward King 15<!-- /react-text --></td><td class="" data-reactid="2402"><!-- react-text: 2403 -->32<!-- /react-text --></td><td class="" data-reactid="2404"><!-- react-text: 2405 -->London, Park Lane no. 15<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2406"><td class="" data-reactid="2407"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2408"></span><!-- react-empty: 2409 --><!-- react-text: 2410 -->Edward King 16<!-- /react-text --></td><td class="" data-reactid="2411"><!-- react-text: 2412 -->32<!-- /react-text --></td><td class="" data-reactid="2413"><!-- react-text: 2414 -->London, Park Lane no. 16<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2415"><td class="" data-reactid="2416"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2417"></span><!-- react-empty: 2418 --><!-- react-text: 2419 -->Edward King 17<!-- /react-text --></td><td class="" data-reactid="2420"><!-- react-text: 2421 -->32<!-- /react-text --></td><td class="" data-reactid="2422"><!-- react-text: 2423 -->London, Park Lane no. 17<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2424"><td class="" data-reactid="2425"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2426"></span><!-- react-empty: 2427 --><!-- react-text: 2428 -->Edward King 18<!-- /react-text --></td><td class="" data-reactid="2429"><!-- react-text: 2430 -->32<!-- /react-text --></td><td class="" data-reactid="2431"><!-- react-text: 2432 -->London, Park Lane no. 18<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2433"><td class="" data-reactid="2434"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2435"></span><!-- react-empty: 2436 --><!-- react-text: 2437 -->Edward King 19<!-- /react-text --></td><td class="" data-reactid="2438"><!-- react-text: 2439 -->32<!-- /react-text --></td><td class="" data-reactid="2440"><!-- react-text: 2441 -->London, Park Lane no. 19<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2442"><td class="" data-reactid="2443"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2444"></span><!-- react-empty: 2445 --><!-- react-text: 2446 -->Edward King 20<!-- /react-text --></td><td class="" data-reactid="2447"><!-- react-text: 2448 -->32<!-- /react-text --></td><td class="" data-reactid="2449"><!-- react-text: 2450 -->London, Park Lane no. 20<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2451"><td class="" data-reactid="2452"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2453"></span><!-- react-empty: 2454 --><!-- react-text: 2455 -->Edward King 21<!-- /react-text --></td><td class="" data-reactid="2456"><!-- react-text: 2457 -->32<!-- /react-text --></td><td class="" data-reactid="2458"><!-- react-text: 2459 -->London, Park Lane no. 21<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2460"><td class="" data-reactid="2461"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2462"></span><!-- react-empty: 2463 --><!-- react-text: 2464 -->Edward King 22<!-- /react-text --></td><td class="" data-reactid="2465"><!-- react-text: 2466 -->32<!-- /react-text --></td><td class="" data-reactid="2467"><!-- react-text: 2468 -->London, Park Lane no. 22<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2469"><td class="" data-reactid="2470"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2471"></span><!-- react-empty: 2472 --><!-- react-text: 2473 -->Edward King 23<!-- /react-text --></td><td class="" data-reactid="2474"><!-- react-text: 2475 -->32<!-- /react-text --></td><td class="" data-reactid="2476"><!-- react-text: 2477 -->London, Park Lane no. 23<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2478"><td class="" data-reactid="2479"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2480"></span><!-- react-empty: 2481 --><!-- react-text: 2482 -->Edward King 24<!-- /react-text --></td><td class="" data-reactid="2483"><!-- react-text: 2484 -->32<!-- /react-text --></td><td class="" data-reactid="2485"><!-- react-text: 2486 -->London, Park Lane no. 24<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2487"><td class="" data-reactid="2488"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2489"></span><!-- react-empty: 2490 --><!-- react-text: 2491 -->Edward King 25<!-- /react-text --></td><td class="" data-reactid="2492"><!-- react-text: 2493 -->32<!-- /react-text --></td><td class="" data-reactid="2494"><!-- react-text: 2495 -->London, Park Lane no. 25<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2496"><td class="" data-reactid="2497"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2498"></span><!-- react-empty: 2499 --><!-- react-text: 2500 -->Edward King 26<!-- /react-text --></td><td class="" data-reactid="2501"><!-- react-text: 2502 -->32<!-- /react-text --></td><td class="" data-reactid="2503"><!-- react-text: 2504 -->London, Park Lane no. 26<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2505"><td class="" data-reactid="2506"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2507"></span><!-- react-empty: 2508 --><!-- react-text: 2509 -->Edward King 27<!-- /react-text --></td><td class="" data-reactid="2510"><!-- react-text: 2511 -->32<!-- /react-text --></td><td class="" data-reactid="2512"><!-- react-text: 2513 -->London, Park Lane no. 27<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2514"><td class="" data-reactid="2515"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2516"></span><!-- react-empty: 2517 --><!-- react-text: 2518 -->Edward King 28<!-- /react-text --></td><td class="" data-reactid="2519"><!-- react-text: 2520 -->32<!-- /react-text --></td><td class="" data-reactid="2521"><!-- react-text: 2522 -->London, Park Lane no. 28<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2523"><td class="" data-reactid="2524"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2525"></span><!-- react-empty: 2526 --><!-- react-text: 2527 -->Edward King 29<!-- /react-text --></td><td class="" data-reactid="2528"><!-- react-text: 2529 -->32<!-- /react-text --></td><td class="" data-reactid="2530"><!-- react-text: 2531 -->London, Park Lane no. 29<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2532"><td class="" data-reactid="2533"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2534"></span><!-- react-empty: 2535 --><!-- react-text: 2536 -->Edward King 30<!-- /react-text --></td><td class="" data-reactid="2537"><!-- react-text: 2538 -->32<!-- /react-text --></td><td class="" data-reactid="2539"><!-- react-text: 2540 -->London, Park Lane no. 30<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2541"><td class="" data-reactid="2542"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2543"></span><!-- react-empty: 2544 --><!-- react-text: 2545 -->Edward King 31<!-- /react-text --></td><td class="" data-reactid="2546"><!-- react-text: 2547 -->32<!-- /react-text --></td><td class="" data-reactid="2548"><!-- react-text: 2549 -->London, Park Lane no. 31<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2550"><td class="" data-reactid="2551"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2552"></span><!-- react-empty: 2553 --><!-- react-text: 2554 -->Edward King 32<!-- /react-text --></td><td class="" data-reactid="2555"><!-- react-text: 2556 -->32<!-- /react-text --></td><td class="" data-reactid="2557"><!-- react-text: 2558 -->London, Park Lane no. 32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2559"><td class="" data-reactid="2560"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2561"></span><!-- react-empty: 2562 --><!-- react-text: 2563 -->Edward King 33<!-- /react-text --></td><td class="" data-reactid="2564"><!-- react-text: 2565 -->32<!-- /react-text --></td><td class="" data-reactid="2566"><!-- react-text: 2567 -->London, Park Lane no. 33<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2568"><td class="" data-reactid="2569"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2570"></span><!-- react-empty: 2571 --><!-- react-text: 2572 -->Edward King 34<!-- /react-text --></td><td class="" data-reactid="2573"><!-- react-text: 2574 -->32<!-- /react-text --></td><td class="" data-reactid="2575"><!-- react-text: 2576 -->London, Park Lane no. 34<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2577"><td class="" data-reactid="2578"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2579"></span><!-- react-empty: 2580 --><!-- react-text: 2581 -->Edward King 35<!-- /react-text --></td><td class="" data-reactid="2582"><!-- react-text: 2583 -->32<!-- /react-text --></td><td class="" data-reactid="2584"><!-- react-text: 2585 -->London, Park Lane no. 35<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2586"><td class="" data-reactid="2587"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2588"></span><!-- react-empty: 2589 --><!-- react-text: 2590 -->Edward King 36<!-- /react-text --></td><td class="" data-reactid="2591"><!-- react-text: 2592 -->32<!-- /react-text --></td><td class="" data-reactid="2593"><!-- react-text: 2594 -->London, Park Lane no. 36<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2595"><td class="" data-reactid="2596"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2597"></span><!-- react-empty: 2598 --><!-- react-text: 2599 -->Edward King 37<!-- /react-text --></td><td class="" data-reactid="2600"><!-- react-text: 2601 -->32<!-- /react-text --></td><td class="" data-reactid="2602"><!-- react-text: 2603 -->London, Park Lane no. 37<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2604"><td class="" data-reactid="2605"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2606"></span><!-- react-empty: 2607 --><!-- react-text: 2608 -->Edward King 38<!-- /react-text --></td><td class="" data-reactid="2609"><!-- react-text: 2610 -->32<!-- /react-text --></td><td class="" data-reactid="2611"><!-- react-text: 2612 -->London, Park Lane no. 38<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2613"><td class="" data-reactid="2614"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2615"></span><!-- react-empty: 2616 --><!-- react-text: 2617 -->Edward King 39<!-- /react-text --></td><td class="" data-reactid="2618"><!-- react-text: 2619 -->32<!-- /react-text --></td><td class="" data-reactid="2620"><!-- react-text: 2621 -->London, Park Lane no. 39<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2622"><td class="" data-reactid="2623"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2624"></span><!-- react-empty: 2625 --><!-- react-text: 2626 -->Edward King 40<!-- /react-text --></td><td class="" data-reactid="2627"><!-- react-text: 2628 -->32<!-- /react-text --></td><td class="" data-reactid="2629"><!-- react-text: 2630 -->London, Park Lane no. 40<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2631"><td class="" data-reactid="2632"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2633"></span><!-- react-empty: 2634 --><!-- react-text: 2635 -->Edward King 41<!-- /react-text --></td><td class="" data-reactid="2636"><!-- react-text: 2637 -->32<!-- /react-text --></td><td class="" data-reactid="2638"><!-- react-text: 2639 -->London, Park Lane no. 41<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2640"><td class="" data-reactid="2641"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2642"></span><!-- react-empty: 2643 --><!-- react-text: 2644 -->Edward King 42<!-- /react-text --></td><td class="" data-reactid="2645"><!-- react-text: 2646 -->32<!-- /react-text --></td><td class="" data-reactid="2647"><!-- react-text: 2648 -->London, Park Lane no. 42<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2649"><td class="" data-reactid="2650"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2651"></span><!-- react-empty: 2652 --><!-- react-text: 2653 -->Edward King 43<!-- /react-text --></td><td class="" data-reactid="2654"><!-- react-text: 2655 -->32<!-- /react-text --></td><td class="" data-reactid="2656"><!-- react-text: 2657 -->London, Park Lane no. 43<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2658"><td class="" data-reactid="2659"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2660"></span><!-- react-empty: 2661 --><!-- react-text: 2662 -->Edward King 44<!-- /react-text --></td><td class="" data-reactid="2663"><!-- react-text: 2664 -->32<!-- /react-text --></td><td class="" data-reactid="2665"><!-- react-text: 2666 -->London, Park Lane no. 44<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2667"><td class="" data-reactid="2668"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2669"></span><!-- react-empty: 2670 --><!-- react-text: 2671 -->Edward King 45<!-- /react-text --></td><td class="" data-reactid="2672"><!-- react-text: 2673 -->32<!-- /react-text --></td><td class="" data-reactid="2674"><!-- react-text: 2675 -->London, Park Lane no. 45<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2676"><td class="" data-reactid="2677"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2678"></span><!-- react-empty: 2679 --><!-- react-text: 2680 -->Edward King 46<!-- /react-text --></td><td class="" data-reactid="2681"><!-- react-text: 2682 -->32<!-- /react-text --></td><td class="" data-reactid="2683"><!-- react-text: 2684 -->London, Park Lane no. 46<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2685"><td class="" data-reactid="2686"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2687"></span><!-- react-empty: 2688 --><!-- react-text: 2689 -->Edward King 47<!-- /react-text --></td><td class="" data-reactid="2690"><!-- react-text: 2691 -->32<!-- /react-text --></td><td class="" data-reactid="2692"><!-- react-text: 2693 -->London, Park Lane no. 47<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2694"><td class="" data-reactid="2695"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2696"></span><!-- react-empty: 2697 --><!-- react-text: 2698 -->Edward King 48<!-- /react-text --></td><td class="" data-reactid="2699"><!-- react-text: 2700 -->32<!-- /react-text --></td><td class="" data-reactid="2701"><!-- react-text: 2702 -->London, Park Lane no. 48<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2703"><td class="" data-reactid="2704"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2705"></span><!-- react-empty: 2706 --><!-- react-text: 2707 -->Edward King 49<!-- /react-text --></td><td class="" data-reactid="2708"><!-- react-text: 2709 -->32<!-- /react-text --></td><td class="" data-reactid="2710"><!-- react-text: 2711 -->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="2712"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2713"><a data-reactid="2714"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2715"><a data-reactid="2716">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="2717"><a data-reactid="2718">2</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="2719"><a data-reactid="2720"></a></li><!-- react-empty: 2721 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="2722"><div class="code-box-title" data-reactid="2723"><a href="#components-table-demo-fixed-header" data-reactid="2724">Fixed Header</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/fixed-header.md" data-reactid="2725"><i class="anticon anticon-edit" data-reactid="2726"></i></a></div><div data-reactid="2727"><p data-reactid="2728"><!-- react-text: 2729 -->Display large amounts of data in scrollable view.<!-- /react-text --></p><blockquote data-reactid="2730"><p data-reactid="2731"><!-- react-text: 2732 -->Specify the width of each column if header and cell do not align properly.<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="2733"></i></section><section class="highlight-wrapper" data-reactid="2734"><div class="highlight" data-reactid="2735"><i class="anticon anticon-copy code-box-code-copy" data-reactid="2736"></i><pre class="language-jsx" data-reactid="2737"><code data-reactid="2738"><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"><</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"><</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="2739"><section class="code-box-demo" data-reactid="2740"><div class="ant-table-wrapper" data-reactid="2741"><div class="ant-spin-nested-loading" data-reactid="2742"><div class="ant-spin-container" data-reactid="2743"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="2744"><div class="ant-table-content" data-reactid="2745"><div class="ant-table-scroll" data-reactid="2746"><div class="ant-table-body" style="overflow-x:auto;" data-reactid="2747"><table class="ant-table-fixed" style="width:1300px;" data-reactid="2748"><colgroup data-reactid="2749"><col style="width:100px;min-width:100px;" data-reactid="2750"/><col style="width:100px;min-width:100px;" data-reactid="2751"/><col data-reactid="2752"/><col data-reactid="2753"/><col data-reactid="2754"/><col data-reactid="2755"/><col data-reactid="2756"/><col data-reactid="2757"/><col data-reactid="2758"/><col data-reactid="2759"/><col style="width:100px;min-width:100px;" data-reactid="2760"/></colgroup><thead class="ant-table-thead" data-reactid="2761"><tr data-reactid="2762"><th class="" data-reactid="2763"><span data-reactid="2764"><!-- react-text: 2765 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2766"><span data-reactid="2767"><!-- react-text: 2768 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2769"><span data-reactid="2770"><!-- react-text: 2771 -->Column 1<!-- /react-text --></span></th><th class="" data-reactid="2772"><span data-reactid="2773"><!-- react-text: 2774 -->Column 2<!-- /react-text --></span></th><th class="" data-reactid="2775"><span data-reactid="2776"><!-- react-text: 2777 -->Column 3<!-- /react-text --></span></th><th class="" data-reactid="2778"><span data-reactid="2779"><!-- react-text: 2780 -->Column 4<!-- /react-text --></span></th><th class="" data-reactid="2781"><span data-reactid="2782"><!-- react-text: 2783 -->Column 5<!-- /react-text --></span></th><th class="" data-reactid="2784"><span data-reactid="2785"><!-- react-text: 2786 -->Column 6<!-- /react-text --></span></th><th class="" data-reactid="2787"><span data-reactid="2788"><!-- react-text: 2789 -->Column 7<!-- /react-text --></span></th><th class="" data-reactid="2790"><span data-reactid="2791"><!-- react-text: 2792 -->Column 8<!-- /react-text --></span></th><th class="" data-reactid="2793"><span data-reactid="2794"><!-- react-text: 2795 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2796"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2797"><td class="" data-reactid="2798"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2799"></span><!-- react-empty: 2800 --><!-- react-text: 2801 -->John Brown<!-- /react-text --></td><td class="" data-reactid="2802"><!-- react-text: 2803 -->32<!-- /react-text --></td><td class="" data-reactid="2804"><!-- react-text: 2805 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2806"><!-- react-text: 2807 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2808"><!-- react-text: 2809 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2810"><!-- react-text: 2811 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2812"><!-- react-text: 2813 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2814"><!-- react-text: 2815 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2816"><!-- react-text: 2817 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2818"><!-- react-text: 2819 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2820"><a href="#" data-reactid="2821">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2822"><td class="" data-reactid="2823"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2824"></span><!-- react-empty: 2825 --><!-- react-text: 2826 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2827"><!-- react-text: 2828 -->40<!-- /react-text --></td><td class="" data-reactid="2829"><!-- react-text: 2830 -->London Park<!-- /react-text --></td><td class="" data-reactid="2831"><!-- react-text: 2832 -->London Park<!-- /react-text --></td><td class="" data-reactid="2833"><!-- react-text: 2834 -->London Park<!-- /react-text --></td><td class="" data-reactid="2835"><!-- react-text: 2836 -->London Park<!-- /react-text --></td><td class="" data-reactid="2837"><!-- react-text: 2838 -->London Park<!-- /react-text --></td><td class="" data-reactid="2839"><!-- react-text: 2840 -->London Park<!-- /react-text --></td><td class="" data-reactid="2841"><!-- react-text: 2842 -->London Park<!-- /react-text --></td><td class="" data-reactid="2843"><!-- react-text: 2844 -->London Park<!-- /react-text --></td><td class="" data-reactid="2845"><a href="#" data-reactid="2846">action</a></td></tr></tbody></table></div></div><div class="ant-table-fixed-left" 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"/><col style="width:100px;min-width:100px;" data-reactid="2853"/></colgroup><thead class="ant-table-thead" data-reactid="2854"><tr data-reactid="2855"><th class="" data-reactid="2856"><span data-reactid="2857"><!-- react-text: 2858 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2859"><span data-reactid="2860"><!-- react-text: 2861 -->Age<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2862"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2863"><td class="" data-reactid="2864"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2865"></span><!-- react-empty: 2866 --><!-- react-text: 2867 -->John Brown<!-- /react-text --></td><td class="" data-reactid="2868"><!-- react-text: 2869 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2870"><td class="" data-reactid="2871"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2872"></span><!-- react-empty: 2873 --><!-- react-text: 2874 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2875"><!-- react-text: 2876 -->40<!-- /react-text --></td></tr></tbody></table></div></div></div><div class="ant-table-fixed-right" data-reactid="2877"><div class="ant-table-body-outer" data-reactid="2878"><div class="ant-table-body-inner" data-reactid="2879"><table class="ant-table-fixed" data-reactid="2880"><colgroup data-reactid="2881"><col style="width:100px;min-width:100px;" data-reactid="2882"/></colgroup><thead class="ant-table-thead" data-reactid="2883"><tr data-reactid="2884"><th class="" data-reactid="2885"><span data-reactid="2886"><!-- react-text: 2887 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2888"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2889"><td class="" data-reactid="2890"><a href="#" data-reactid="2891">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2892"><td class="" data-reactid="2893"><a href="#" data-reactid="2894">action</a></td></tr></tbody></table></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="2895"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2896"><a data-reactid="2897"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2898"><a data-reactid="2899">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="2900"><a data-reactid="2901"></a></li><!-- react-empty: 2902 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="2903"><div class="code-box-title" data-reactid="2904"><a href="#components-table-demo-fixed-columns" data-reactid="2905">Fixed Columns</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/fixed-columns.md" data-reactid="2906"><i class="anticon anticon-edit" data-reactid="2907"></i></a></div><div data-reactid="2908"><p data-reactid="2909"><!-- react-text: 2910 -->To fix some columns and scroll inside other columns, and you must set <!-- /react-text --><code data-reactid="2911"><!-- react-text: 2912 -->scoll.x<!-- /react-text --></code><!-- react-text: 2913 --> meanwhile.<!-- /react-text --></p><blockquote data-reactid="2914"><p data-reactid="2915"><!-- react-text: 2916 -->Specify the width of columns if header and cell do not align properly.<!-- /react-text --></p><p data-reactid="2917"><!-- react-text: 2918 -->A fixed value which is greater than table width for <!-- /react-text --><code data-reactid="2919"><!-- react-text: 2920 -->scroll.x<!-- /react-text --></code><!-- react-text: 2921 --> is recommended. The sum of unfixed columns should not greater than <!-- /react-text --><code data-reactid="2922"><!-- react-text: 2923 -->scroll.x<!-- /react-text --></code><!-- react-text: 2924 -->.<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="2925"></i></section><section class="highlight-wrapper" data-reactid="2926"><div class="highlight" data-reactid="2927"><i class="anticon anticon-copy code-box-code-copy" data-reactid="2928"></i><pre class="language-jsx" data-reactid="2929"><code data-reactid="2930"><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"><</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"></</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"><</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="2931"><section class="code-box-demo" data-reactid="2932"><div class="ant-table-wrapper" data-reactid="2933"><div class="ant-spin-nested-loading" data-reactid="2934"><div class="ant-spin-container" data-reactid="2935"><div class="ant-table ant-table-large ant-table-fixed-header ant-table-scroll-position-left" data-reactid="2936"><div class="ant-table-content" data-reactid="2937"><div class="ant-table-scroll" data-reactid="2938"><div class="ant-table-header" data-reactid="2939"><table class="ant-table-fixed" style="width:1500px;" data-reactid="2940"><colgroup data-reactid="2941"><col style="width:100px;min-width:100px;" data-reactid="2942"/><col style="width:100px;min-width:100px;" data-reactid="2943"/><col style="width:150px;min-width:150px;" data-reactid="2944"/><col style="width:150px;min-width:150px;" data-reactid="2945"/><col style="width:150px;min-width:150px;" data-reactid="2946"/><col style="width:150px;min-width:150px;" data-reactid="2947"/><col style="width:150px;min-width:150px;" data-reactid="2948"/><col style="width:150px;min-width:150px;" data-reactid="2949"/><col style="width:150px;min-width:150px;" data-reactid="2950"/><col data-reactid="2951"/><col style="width:100px;min-width:100px;" data-reactid="2952"/></colgroup><thead class="ant-table-thead" data-reactid="2953"><tr data-reactid="2954"><th class="" data-reactid="2955"><span data-reactid="2956"><!-- react-text: 2957 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2958"><span data-reactid="2959"><!-- react-text: 2960 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2961"><span data-reactid="2962"><!-- react-text: 2963 -->Column 1<!-- /react-text --></span></th><th class="" data-reactid="2964"><span data-reactid="2965"><!-- react-text: 2966 -->Column 2<!-- /react-text --></span></th><th class="" data-reactid="2967"><span data-reactid="2968"><!-- react-text: 2969 -->Column 3<!-- /react-text --></span></th><th class="" data-reactid="2970"><span data-reactid="2971"><!-- react-text: 2972 -->Column 4<!-- /react-text --></span></th><th class="" data-reactid="2973"><span data-reactid="2974"><!-- react-text: 2975 -->Column 5<!-- /react-text --></span></th><th class="" data-reactid="2976"><span data-reactid="2977"><!-- react-text: 2978 -->Column 6<!-- /react-text --></span></th><th class="" data-reactid="2979"><span data-reactid="2980"><!-- react-text: 2981 -->Column 7<!-- /react-text --></span></th><th class="" data-reactid="2982"><span data-reactid="2983"><!-- react-text: 2984 -->Column 8<!-- /react-text --></span></th><th class="" data-reactid="2985"><span data-reactid="2986"><!-- react-text: 2987 -->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="2988"><table class="ant-table-fixed" style="width:1500px;" data-reactid="2989"><colgroup data-reactid="2990"><col style="width:100px;min-width:100px;" data-reactid="2991"/><col style="width:100px;min-width:100px;" data-reactid="2992"/><col style="width:150px;min-width:150px;" data-reactid="2993"/><col style="width:150px;min-width:150px;" data-reactid="2994"/><col style="width:150px;min-width:150px;" data-reactid="2995"/><col style="width:150px;min-width:150px;" data-reactid="2996"/><col style="width:150px;min-width:150px;" data-reactid="2997"/><col style="width:150px;min-width:150px;" data-reactid="2998"/><col style="width:150px;min-width:150px;" data-reactid="2999"/><col data-reactid="3000"/><col style="width:100px;min-width:100px;" data-reactid="3001"/></colgroup><tbody class="ant-table-tbody" data-reactid="3002"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3003"><td class="" data-reactid="3004"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3005"></span><!-- react-empty: 3006 --><!-- react-text: 3007 -->Edrward 0<!-- /react-text --></td><td class="" data-reactid="3008"><!-- react-text: 3009 -->32<!-- /react-text --></td><td class="" data-reactid="3010"><!-- react-text: 3011 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3012"><!-- react-text: 3013 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3014"><!-- react-text: 3015 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3016"><!-- react-text: 3017 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3018"><!-- react-text: 3019 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3020"><!-- react-text: 3021 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3022"><!-- react-text: 3023 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3024"><!-- react-text: 3025 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3026"><a href="#" data-reactid="3027">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3028"><td class="" data-reactid="3029"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3030"></span><!-- react-empty: 3031 --><!-- react-text: 3032 -->Edrward 1<!-- /react-text --></td><td class="" data-reactid="3033"><!-- react-text: 3034 -->32<!-- /react-text --></td><td class="" data-reactid="3035"><!-- react-text: 3036 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3037"><!-- react-text: 3038 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3039"><!-- react-text: 3040 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3041"><!-- react-text: 3042 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3043"><!-- react-text: 3044 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3045"><!-- react-text: 3046 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3047"><!-- react-text: 3048 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3049"><!-- react-text: 3050 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3051"><a href="#" data-reactid="3052">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3053"><td class="" data-reactid="3054"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3055"></span><!-- react-empty: 3056 --><!-- react-text: 3057 -->Edrward 2<!-- /react-text --></td><td class="" data-reactid="3058"><!-- react-text: 3059 -->32<!-- /react-text --></td><td class="" data-reactid="3060"><!-- react-text: 3061 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3062"><!-- react-text: 3063 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3064"><!-- react-text: 3065 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3066"><!-- react-text: 3067 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3068"><!-- react-text: 3069 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3070"><!-- react-text: 3071 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3072"><!-- react-text: 3073 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3074"><!-- react-text: 3075 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3076"><a href="#" data-reactid="3077">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3078"><td class="" data-reactid="3079"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3080"></span><!-- react-empty: 3081 --><!-- react-text: 3082 -->Edrward 3<!-- /react-text --></td><td class="" data-reactid="3083"><!-- react-text: 3084 -->32<!-- /react-text --></td><td class="" data-reactid="3085"><!-- react-text: 3086 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3087"><!-- react-text: 3088 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3089"><!-- react-text: 3090 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3091"><!-- react-text: 3092 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3093"><!-- react-text: 3094 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3095"><!-- react-text: 3096 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3097"><!-- react-text: 3098 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3099"><!-- react-text: 3100 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3101"><a href="#" data-reactid="3102">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3103"><td class="" data-reactid="3104"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3105"></span><!-- react-empty: 3106 --><!-- react-text: 3107 -->Edrward 4<!-- /react-text --></td><td class="" data-reactid="3108"><!-- react-text: 3109 -->32<!-- /react-text --></td><td class="" data-reactid="3110"><!-- react-text: 3111 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3112"><!-- react-text: 3113 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3114"><!-- react-text: 3115 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3116"><!-- react-text: 3117 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3118"><!-- react-text: 3119 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3120"><!-- react-text: 3121 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3122"><!-- react-text: 3123 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3124"><!-- react-text: 3125 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3126"><a href="#" data-reactid="3127">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3128"><td class="" data-reactid="3129"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3130"></span><!-- react-empty: 3131 --><!-- react-text: 3132 -->Edrward 5<!-- /react-text --></td><td class="" data-reactid="3133"><!-- react-text: 3134 -->32<!-- /react-text --></td><td class="" data-reactid="3135"><!-- react-text: 3136 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3137"><!-- react-text: 3138 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3139"><!-- react-text: 3140 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3141"><!-- react-text: 3142 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3143"><!-- react-text: 3144 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3145"><!-- react-text: 3146 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3147"><!-- react-text: 3148 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3149"><!-- react-text: 3150 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3151"><a href="#" data-reactid="3152">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3153"><td class="" data-reactid="3154"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3155"></span><!-- react-empty: 3156 --><!-- react-text: 3157 -->Edrward 6<!-- /react-text --></td><td class="" data-reactid="3158"><!-- react-text: 3159 -->32<!-- /react-text --></td><td class="" data-reactid="3160"><!-- react-text: 3161 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3162"><!-- react-text: 3163 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3164"><!-- react-text: 3165 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3166"><!-- react-text: 3167 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3168"><!-- react-text: 3169 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3170"><!-- react-text: 3171 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3172"><!-- react-text: 3173 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3174"><!-- react-text: 3175 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3176"><a href="#" data-reactid="3177">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3178"><td class="" data-reactid="3179"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3180"></span><!-- react-empty: 3181 --><!-- react-text: 3182 -->Edrward 7<!-- /react-text --></td><td class="" data-reactid="3183"><!-- react-text: 3184 -->32<!-- /react-text --></td><td class="" data-reactid="3185"><!-- react-text: 3186 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3187"><!-- react-text: 3188 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3189"><!-- react-text: 3190 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3191"><!-- react-text: 3192 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3193"><!-- react-text: 3194 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3195"><!-- react-text: 3196 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3197"><!-- react-text: 3198 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3199"><!-- react-text: 3200 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3201"><a href="#" data-reactid="3202">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3203"><td class="" data-reactid="3204"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3205"></span><!-- react-empty: 3206 --><!-- react-text: 3207 -->Edrward 8<!-- /react-text --></td><td class="" data-reactid="3208"><!-- react-text: 3209 -->32<!-- /react-text --></td><td class="" data-reactid="3210"><!-- react-text: 3211 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3212"><!-- react-text: 3213 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3214"><!-- react-text: 3215 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3216"><!-- react-text: 3217 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3218"><!-- react-text: 3219 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3220"><!-- react-text: 3221 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3222"><!-- react-text: 3223 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3224"><!-- react-text: 3225 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3226"><a href="#" data-reactid="3227">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3228"><td class="" data-reactid="3229"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3230"></span><!-- react-empty: 3231 --><!-- react-text: 3232 -->Edrward 9<!-- /react-text --></td><td class="" data-reactid="3233"><!-- react-text: 3234 -->32<!-- /react-text --></td><td class="" data-reactid="3235"><!-- react-text: 3236 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3237"><!-- react-text: 3238 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3239"><!-- react-text: 3240 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3241"><!-- react-text: 3242 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3243"><!-- react-text: 3244 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3245"><!-- react-text: 3246 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3247"><!-- react-text: 3248 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3249"><!-- react-text: 3250 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3251"><a href="#" data-reactid="3252">action</a></td></tr></tbody></table></div></div><div class="ant-table-fixed-left" data-reactid="3253"><div class="ant-table-header" data-reactid="3254"><table class="ant-table-fixed" data-reactid="3255"><colgroup data-reactid="3256"><col style="width:100px;min-width:100px;" data-reactid="3257"/><col style="width:100px;min-width:100px;" data-reactid="3258"/></colgroup><thead class="ant-table-thead" data-reactid="3259"><tr data-reactid="3260"><th class="" data-reactid="3261"><span data-reactid="3262"><!-- react-text: 3263 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="3264"><span data-reactid="3265"><!-- react-text: 3266 -->Age<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" data-reactid="3267"><div class="ant-table-body-inner" style="max-height:300px;overflow-y:scroll;" data-reactid="3268"><table class="ant-table-fixed" data-reactid="3269"><colgroup data-reactid="3270"><col style="width:100px;min-width:100px;" data-reactid="3271"/><col style="width:100px;min-width:100px;" data-reactid="3272"/></colgroup><tbody class="ant-table-tbody" data-reactid="3273"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3274"><td class="" data-reactid="3275"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3276"></span><!-- react-empty: 3277 --><!-- react-text: 3278 -->Edrward 0<!-- /react-text --></td><td class="" data-reactid="3279"><!-- react-text: 3280 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3281"><td class="" data-reactid="3282"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3283"></span><!-- react-empty: 3284 --><!-- react-text: 3285 -->Edrward 1<!-- /react-text --></td><td class="" data-reactid="3286"><!-- react-text: 3287 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3288"><td class="" data-reactid="3289"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3290"></span><!-- react-empty: 3291 --><!-- react-text: 3292 -->Edrward 2<!-- /react-text --></td><td class="" data-reactid="3293"><!-- react-text: 3294 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3295"><td class="" data-reactid="3296"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3297"></span><!-- react-empty: 3298 --><!-- react-text: 3299 -->Edrward 3<!-- /react-text --></td><td class="" data-reactid="3300"><!-- react-text: 3301 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3302"><td class="" data-reactid="3303"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3304"></span><!-- react-empty: 3305 --><!-- react-text: 3306 -->Edrward 4<!-- /react-text --></td><td class="" data-reactid="3307"><!-- react-text: 3308 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3309"><td class="" data-reactid="3310"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3311"></span><!-- react-empty: 3312 --><!-- react-text: 3313 -->Edrward 5<!-- /react-text --></td><td class="" data-reactid="3314"><!-- react-text: 3315 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3316"><td class="" data-reactid="3317"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3318"></span><!-- react-empty: 3319 --><!-- react-text: 3320 -->Edrward 6<!-- /react-text --></td><td class="" data-reactid="3321"><!-- react-text: 3322 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3323"><td class="" data-reactid="3324"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3325"></span><!-- react-empty: 3326 --><!-- react-text: 3327 -->Edrward 7<!-- /react-text --></td><td class="" data-reactid="3328"><!-- react-text: 3329 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3330"><td class="" data-reactid="3331"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3332"></span><!-- react-empty: 3333 --><!-- react-text: 3334 -->Edrward 8<!-- /react-text --></td><td class="" data-reactid="3335"><!-- react-text: 3336 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3337"><td class="" data-reactid="3338"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3339"></span><!-- react-empty: 3340 --><!-- react-text: 3341 -->Edrward 9<!-- /react-text --></td><td class="" data-reactid="3342"><!-- react-text: 3343 -->32<!-- /react-text --></td></tr></tbody></table></div></div></div><div class="ant-table-fixed-right" data-reactid="3344"><div class="ant-table-header" data-reactid="3345"><table class="ant-table-fixed" data-reactid="3346"><colgroup data-reactid="3347"><col style="width:100px;min-width:100px;" data-reactid="3348"/></colgroup><thead class="ant-table-thead" data-reactid="3349"><tr data-reactid="3350"><th class="" data-reactid="3351"><span data-reactid="3352"><!-- react-text: 3353 -->Action<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" data-reactid="3354"><div class="ant-table-body-inner" style="max-height:300px;overflow-y:scroll;" data-reactid="3355"><table class="ant-table-fixed" data-reactid="3356"><colgroup data-reactid="3357"><col style="width:100px;min-width:100px;" data-reactid="3358"/></colgroup><tbody class="ant-table-tbody" data-reactid="3359"><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><tr class="ant-table-row ant-table-row-level-0" data-reactid="3363"><td class="" data-reactid="3364"><a href="#" data-reactid="3365">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3366"><td class="" data-reactid="3367"><a href="#" data-reactid="3368">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3369"><td class="" data-reactid="3370"><a href="#" data-reactid="3371">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3372"><td class="" data-reactid="3373"><a href="#" data-reactid="3374">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3375"><td class="" data-reactid="3376"><a href="#" data-reactid="3377">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3378"><td class="" data-reactid="3379"><a href="#" data-reactid="3380">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3381"><td class="" data-reactid="3382"><a href="#" data-reactid="3383">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3384"><td class="" data-reactid="3385"><a href="#" data-reactid="3386">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3387"><td class="" data-reactid="3388"><a href="#" data-reactid="3389">action</a></td></tr></tbody></table></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="3390"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3391"><a data-reactid="3392"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3393"><a data-reactid="3394">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="3395"><a data-reactid="3396">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="3397"><a data-reactid="3398">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="3399"><a data-reactid="3400">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next" data-reactid="3401"><a data-reactid="3402">5</a></li><li title="Next 5 Pages" class="ant-pagination-jump-next" data-reactid="3403"><a data-reactid="3404"></a></li><li title="10" class="ant-pagination-item ant-pagination-item-10" data-reactid="3405"><a data-reactid="3406">10</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="3407"><a data-reactid="3408"></a></li><!-- react-empty: 3409 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="3410"><div class="code-box-title" data-reactid="3411"><a href="#components-table-demo-fixed-columns-header" data-reactid="3412">Fixed Columns and Header</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/fixed-columns-header.md" data-reactid="3413"><i class="anticon anticon-edit" data-reactid="3414"></i></a></div><div data-reactid="3415"><p data-reactid="3416"><!-- react-text: 3417 -->A Solution for displaying large amounts of data with long columns.<!-- /react-text --></p><blockquote data-reactid="3418"><p data-reactid="3419"><!-- react-text: 3420 -->Specify the width of columns if header and cell do not align properly.<!-- /react-text --></p><p data-reactid="3421"><!-- react-text: 3422 -->A fixed value which is greater than table width for <!-- /react-text --><code data-reactid="3423"><!-- react-text: 3424 -->scroll.x<!-- /react-text --></code><!-- react-text: 3425 --> is recommended. The sum of unfixed columns should not greater than <!-- /react-text --><code data-reactid="3426"><!-- react-text: 3427 -->scroll.x<!-- /react-text --></code><!-- react-text: 3428 -->.<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3429"></i></section><section class="highlight-wrapper" data-reactid="3430"><div class="highlight" data-reactid="3431"><i class="anticon anticon-copy code-box-code-copy" data-reactid="3432"></i><pre class="language-jsx" data-reactid="3433"><code data-reactid="3434"><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"><</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"></</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"><</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"><</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="3435"><section class="code-box-demo" data-reactid="3436"><div class="ant-table-wrapper" data-reactid="3437"><div class="ant-spin-nested-loading" data-reactid="3438"><div class="ant-spin-container" data-reactid="3439"><div class="ant-table ant-table-middle ant-table-bordered ant-table-fixed-header ant-table-scroll-position-left" data-reactid="3440"><div class="ant-table-content" data-reactid="3441"><div class="ant-table-scroll" data-reactid="3442"><div class="ant-table-header" data-reactid="3443"><table class="ant-table-fixed" style="width:1010px;" data-reactid="3444"><colgroup data-reactid="3445"><col style="width:100px;min-width:100px;" data-reactid="3446"/><col style="width:100px;min-width:100px;" data-reactid="3447"/><col style="width:200px;min-width:200px;" data-reactid="3448"/><col style="width:50px;min-width:50px;" data-reactid="3449"/><col style="width:100px;min-width:100px;" data-reactid="3450"/><col style="width:200px;min-width:200px;" data-reactid="3451"/><col style="width:200px;min-width:200px;" data-reactid="3452"/><col style="width:60px;min-width:60px;" data-reactid="3453"/></colgroup><thead class="ant-table-thead" data-reactid="3454"><tr data-reactid="3455"><th class="" rowspan="4" data-reactid="3456"><span data-reactid="3457"><!-- react-text: 3458 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="3459"></i></span></th><th class="" colspan="4" data-reactid="3460"><span data-reactid="3461"><!-- react-text: 3462 -->Other<!-- /react-text --></span></th><th class="" colspan="2" data-reactid="3463"><span data-reactid="3464"><!-- react-text: 3465 -->Company<!-- /react-text --></span></th><th class="" rowspan="4" data-reactid="3466"><span data-reactid="3467"><!-- react-text: 3468 -->Gender<!-- /react-text --></span></th></tr><tr data-reactid="3469"><th class="" rowspan="3" data-reactid="3470"><span data-reactid="3471"><!-- react-text: 3472 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="3473"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="3474"><i class="anticon anticon-caret-up" data-reactid="3475"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="3476"><i class="anticon anticon-caret-down" data-reactid="3477"></i></span></div></span></th><th class="" colspan="3" data-reactid="3478"><span data-reactid="3479"><!-- react-text: 3480 -->Address<!-- /react-text --></span></th><th class="" rowspan="3" data-reactid="3481"><span data-reactid="3482"><!-- react-text: 3483 -->Company Address<!-- /react-text --></span></th><th class="" rowspan="3" data-reactid="3484"><span data-reactid="3485"><!-- react-text: 3486 -->Company Name<!-- /react-text --></span></th></tr><tr data-reactid="3487"><th class="" rowspan="2" data-reactid="3488"><span data-reactid="3489"><!-- react-text: 3490 -->Street<!-- /react-text --></span></th><th class="" colspan="2" data-reactid="3491"><span data-reactid="3492"><!-- react-text: 3493 -->Block<!-- /react-text --></span></th></tr><tr data-reactid="3494"><th class="" data-reactid="3495"><span data-reactid="3496"><!-- react-text: 3497 -->Building<!-- /react-text --></span></th><th class="" data-reactid="3498"><span data-reactid="3499"><!-- react-text: 3500 -->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="3501"><table class="ant-table-fixed" style="width:1010px;" data-reactid="3502"><colgroup data-reactid="3503"><col style="width:100px;min-width:100px;" data-reactid="3504"/><col style="width:100px;min-width:100px;" data-reactid="3505"/><col style="width:200px;min-width:200px;" data-reactid="3506"/><col style="width:50px;min-width:50px;" data-reactid="3507"/><col style="width:100px;min-width:100px;" data-reactid="3508"/><col style="width:200px;min-width:200px;" data-reactid="3509"/><col style="width:200px;min-width:200px;" data-reactid="3510"/><col style="width:60px;min-width:60px;" data-reactid="3511"/></colgroup><tbody class="ant-table-tbody" data-reactid="3512"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3513"><td class="" data-reactid="3514"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3515"></span><!-- react-empty: 3516 --><!-- react-text: 3517 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3518"><!-- react-text: 3519 -->1<!-- /react-text --></td><td class="" data-reactid="3520"><!-- react-text: 3521 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3522"><!-- react-text: 3523 -->C<!-- /react-text --></td><td class="" data-reactid="3524"><!-- react-text: 3525 -->2035<!-- /react-text --></td><td class="" data-reactid="3526"><!-- react-text: 3527 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3528"><!-- react-text: 3529 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3530"><!-- react-text: 3531 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3532"><td class="" data-reactid="3533"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3534"></span><!-- react-empty: 3535 --><!-- react-text: 3536 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3537"><!-- react-text: 3538 -->2<!-- /react-text --></td><td class="" data-reactid="3539"><!-- react-text: 3540 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3541"><!-- react-text: 3542 -->C<!-- /react-text --></td><td class="" data-reactid="3543"><!-- react-text: 3544 -->2035<!-- /react-text --></td><td class="" data-reactid="3545"><!-- react-text: 3546 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3547"><!-- react-text: 3548 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3549"><!-- react-text: 3550 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3551"><td class="" data-reactid="3552"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3553"></span><!-- react-empty: 3554 --><!-- react-text: 3555 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3556"><!-- react-text: 3557 -->3<!-- /react-text --></td><td class="" data-reactid="3558"><!-- react-text: 3559 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3560"><!-- react-text: 3561 -->C<!-- /react-text --></td><td class="" data-reactid="3562"><!-- react-text: 3563 -->2035<!-- /react-text --></td><td class="" data-reactid="3564"><!-- react-text: 3565 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3566"><!-- react-text: 3567 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3568"><!-- react-text: 3569 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3570"><td class="" data-reactid="3571"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3572"></span><!-- react-empty: 3573 --><!-- react-text: 3574 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3575"><!-- react-text: 3576 -->4<!-- /react-text --></td><td class="" data-reactid="3577"><!-- react-text: 3578 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3579"><!-- react-text: 3580 -->C<!-- /react-text --></td><td class="" data-reactid="3581"><!-- react-text: 3582 -->2035<!-- /react-text --></td><td class="" data-reactid="3583"><!-- react-text: 3584 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3585"><!-- react-text: 3586 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3587"><!-- react-text: 3588 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3589"><td class="" data-reactid="3590"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3591"></span><!-- react-empty: 3592 --><!-- react-text: 3593 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3594"><!-- react-text: 3595 -->5<!-- /react-text --></td><td class="" data-reactid="3596"><!-- react-text: 3597 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3598"><!-- react-text: 3599 -->C<!-- /react-text --></td><td class="" data-reactid="3600"><!-- react-text: 3601 -->2035<!-- /react-text --></td><td class="" data-reactid="3602"><!-- react-text: 3603 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3604"><!-- react-text: 3605 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3606"><!-- react-text: 3607 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3608"><td class="" data-reactid="3609"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3610"></span><!-- react-empty: 3611 --><!-- react-text: 3612 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3613"><!-- react-text: 3614 -->6<!-- /react-text --></td><td class="" data-reactid="3615"><!-- react-text: 3616 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3617"><!-- react-text: 3618 -->C<!-- /react-text --></td><td class="" data-reactid="3619"><!-- react-text: 3620 -->2035<!-- /react-text --></td><td class="" data-reactid="3621"><!-- react-text: 3622 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3623"><!-- react-text: 3624 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3625"><!-- react-text: 3626 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3627"><td class="" data-reactid="3628"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3629"></span><!-- react-empty: 3630 --><!-- react-text: 3631 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3632"><!-- react-text: 3633 -->7<!-- /react-text --></td><td class="" data-reactid="3634"><!-- react-text: 3635 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3636"><!-- react-text: 3637 -->C<!-- /react-text --></td><td class="" data-reactid="3638"><!-- react-text: 3639 -->2035<!-- /react-text --></td><td class="" data-reactid="3640"><!-- react-text: 3641 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3642"><!-- react-text: 3643 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3644"><!-- react-text: 3645 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3646"><td class="" data-reactid="3647"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3648"></span><!-- react-empty: 3649 --><!-- react-text: 3650 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3651"><!-- react-text: 3652 -->8<!-- /react-text --></td><td class="" data-reactid="3653"><!-- react-text: 3654 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3655"><!-- react-text: 3656 -->C<!-- /react-text --></td><td class="" data-reactid="3657"><!-- react-text: 3658 -->2035<!-- /react-text --></td><td class="" data-reactid="3659"><!-- react-text: 3660 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3661"><!-- react-text: 3662 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3663"><!-- react-text: 3664 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3665"><td class="" data-reactid="3666"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3667"></span><!-- react-empty: 3668 --><!-- react-text: 3669 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3670"><!-- react-text: 3671 -->9<!-- /react-text --></td><td class="" data-reactid="3672"><!-- react-text: 3673 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3674"><!-- react-text: 3675 -->C<!-- /react-text --></td><td class="" data-reactid="3676"><!-- react-text: 3677 -->2035<!-- /react-text --></td><td class="" data-reactid="3678"><!-- react-text: 3679 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3680"><!-- react-text: 3681 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3682"><!-- react-text: 3683 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3684"><td class="" data-reactid="3685"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3686"></span><!-- react-empty: 3687 --><!-- react-text: 3688 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3689"><!-- react-text: 3690 -->10<!-- /react-text --></td><td class="" data-reactid="3691"><!-- react-text: 3692 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3693"><!-- react-text: 3694 -->C<!-- /react-text --></td><td class="" data-reactid="3695"><!-- react-text: 3696 -->2035<!-- /react-text --></td><td class="" data-reactid="3697"><!-- react-text: 3698 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3699"><!-- react-text: 3700 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3701"><!-- react-text: 3702 -->M<!-- /react-text --></td></tr></tbody></table></div></div><div class="ant-table-fixed-left" data-reactid="3703"><div class="ant-table-header" data-reactid="3704"><table class="ant-table-fixed" data-reactid="3705"><colgroup data-reactid="3706"><col style="width:100px;min-width:100px;" data-reactid="3707"/></colgroup><thead class="ant-table-thead" data-reactid="3708"><tr data-reactid="3709"><th class="" rowspan="4" data-reactid="3710"><span data-reactid="3711"><!-- react-text: 3712 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="3713"></i></span></th></tr></thead></table></div><div class="ant-table-body-outer" data-reactid="3714"><div class="ant-table-body-inner" style="max-height:240px;overflow-y:scroll;" data-reactid="3715"><table class="ant-table-fixed" data-reactid="3716"><colgroup data-reactid="3717"><col style="width:100px;min-width:100px;" data-reactid="3718"/></colgroup><tbody class="ant-table-tbody" data-reactid="3719"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3720"><td class="" data-reactid="3721"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3722"></span><!-- react-empty: 3723 --><!-- react-text: 3724 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3725"><td class="" data-reactid="3726"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3727"></span><!-- react-empty: 3728 --><!-- react-text: 3729 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3730"><td class="" data-reactid="3731"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3732"></span><!-- react-empty: 3733 --><!-- react-text: 3734 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3735"><td class="" data-reactid="3736"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3737"></span><!-- react-empty: 3738 --><!-- react-text: 3739 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3740"><td class="" data-reactid="3741"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3742"></span><!-- react-empty: 3743 --><!-- react-text: 3744 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3745"><td class="" data-reactid="3746"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3747"></span><!-- react-empty: 3748 --><!-- react-text: 3749 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3750"><td class="" data-reactid="3751"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3752"></span><!-- react-empty: 3753 --><!-- react-text: 3754 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3755"><td class="" data-reactid="3756"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3757"></span><!-- react-empty: 3758 --><!-- react-text: 3759 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3760"><td class="" data-reactid="3761"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3762"></span><!-- react-empty: 3763 --><!-- react-text: 3764 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3765"><td class="" data-reactid="3766"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3767"></span><!-- react-empty: 3768 --><!-- react-text: 3769 -->John Brown<!-- /react-text --></td></tr></tbody></table></div></div></div><div class="ant-table-fixed-right" data-reactid="3770"><div class="ant-table-header" data-reactid="3771"><table class="ant-table-fixed" data-reactid="3772"><colgroup data-reactid="3773"><col style="width:60px;min-width:60px;" data-reactid="3774"/></colgroup><thead class="ant-table-thead" data-reactid="3775"><tr data-reactid="3776"><th class="" rowspan="4" data-reactid="3777"><span data-reactid="3778"><!-- react-text: 3779 -->Gender<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" data-reactid="3780"><div class="ant-table-body-inner" style="max-height:240px;overflow-y:scroll;" data-reactid="3781"><table class="ant-table-fixed" data-reactid="3782"><colgroup data-reactid="3783"><col style="width:60px;min-width:60px;" data-reactid="3784"/></colgroup><tbody class="ant-table-tbody" data-reactid="3785"><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><tr class="ant-table-row ant-table-row-level-0" data-reactid="3792"><td class="" data-reactid="3793"><!-- react-text: 3794 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3795"><td class="" data-reactid="3796"><!-- react-text: 3797 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3798"><td class="" data-reactid="3799"><!-- react-text: 3800 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3801"><td class="" data-reactid="3802"><!-- react-text: 3803 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3804"><td class="" data-reactid="3805"><!-- react-text: 3806 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3807"><td class="" data-reactid="3808"><!-- react-text: 3809 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3810"><td class="" data-reactid="3811"><!-- react-text: 3812 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3813"><td class="" data-reactid="3814"><!-- react-text: 3815 -->M<!-- /react-text --></td></tr></tbody></table></div></div></div></div></div><ul class="ant-pagination ant-table-pagination mini" unselectable="unselectable" data-reactid="3816"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3817"><a data-reactid="3818"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3819"><a data-reactid="3820">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="3821"><a data-reactid="3822">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="3823"><a data-reactid="3824">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="3825"><a data-reactid="3826">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next" data-reactid="3827"><a data-reactid="3828">5</a></li><li title="Next 5 Pages" class="ant-pagination-jump-next" data-reactid="3829"><a data-reactid="3830"></a></li><li title="10" class="ant-pagination-item ant-pagination-item-10" data-reactid="3831"><a data-reactid="3832">10</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="3833"><a data-reactid="3834"></a></li><!-- react-empty: 3835 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="3836"><div class="code-box-title" data-reactid="3837"><a href="#components-table-demo-grouping-columns" data-reactid="3838">Grouping table head</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/grouping-columns.md" data-reactid="3839"><i class="anticon anticon-edit" data-reactid="3840"></i></a></div><div data-reactid="3841"><p data-reactid="3842"><!-- react-text: 3843 -->Group table head with <!-- /react-text --><code data-reactid="3844"><!-- react-text: 3845 -->columns[n].children<!-- /react-text --></code><!-- react-text: 3846 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3847"></i></section><section class="highlight-wrapper" data-reactid="3848"><div class="highlight" data-reactid="3849"><i class="anticon anticon-copy code-box-code-copy" data-reactid="3850"></i><pre class="language-jsx" data-reactid="3851"><code data-reactid="3852"><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"><</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"><</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="3853"><section class="code-box-demo" data-reactid="3854"><div data-reactid="3855"><button type="button" class="ant-btn editable-add-btn" data-reactid="3856"><span data-reactid="3857">Add</span></button><div class="ant-table-wrapper" data-reactid="3858"><div class="ant-spin-nested-loading" data-reactid="3859"><div class="ant-spin-container" data-reactid="3860"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="3861"><div class="ant-table-content" data-reactid="3862"><div class="ant-table-body" data-reactid="3863"><table class="" data-reactid="3864"><colgroup data-reactid="3865"><col style="width:30%;min-width:30%;" data-reactid="3866"/><col data-reactid="3867"/><col data-reactid="3868"/><col data-reactid="3869"/></colgroup><thead class="ant-table-thead" data-reactid="3870"><tr data-reactid="3871"><th class="" data-reactid="3872"><span data-reactid="3873"><!-- react-text: 3874 -->name<!-- /react-text --></span></th><th class="" data-reactid="3875"><span data-reactid="3876"><!-- react-text: 3877 -->age<!-- /react-text --></span></th><th class="" data-reactid="3878"><span data-reactid="3879"><!-- react-text: 3880 -->address<!-- /react-text --></span></th><th class="" data-reactid="3881"><span data-reactid="3882"><!-- react-text: 3883 -->operation<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="3884"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3885"><td class="" data-reactid="3886"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3887"></span><!-- react-empty: 3888 --><div class="editable-cell" data-reactid="3889"><div class="editable-cell-text-wrapper" data-reactid="3890"><!-- react-text: 3891 -->Edward King 0<!-- /react-text --><i class="anticon anticon-edit editable-cell-icon" data-reactid="3892"></i></div></div></td><td class="" data-reactid="3893"><!-- react-text: 3894 -->32<!-- /react-text --></td><td class="" data-reactid="3895"><!-- react-text: 3896 -->London, Park Lane no. 0<!-- /react-text --></td><td class="" data-reactid="3897"><a href="#" data-reactid="3898">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3899"><td class="" data-reactid="3900"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3901"></span><!-- react-empty: 3902 --><div class="editable-cell" data-reactid="3903"><div class="editable-cell-text-wrapper" data-reactid="3904"><!-- react-text: 3905 -->Edward King 1<!-- /react-text --><i class="anticon anticon-edit editable-cell-icon" data-reactid="3906"></i></div></div></td><td class="" data-reactid="3907"><!-- react-text: 3908 -->32<!-- /react-text --></td><td class="" data-reactid="3909"><!-- react-text: 3910 -->London, Park Lane no. 1<!-- /react-text --></td><td class="" data-reactid="3911"><a href="#" data-reactid="3912">Delete</a></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="3913"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3914"><a data-reactid="3915"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3916"><a data-reactid="3917">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="3918"><a data-reactid="3919"></a></li><!-- react-empty: 3920 --></ul></div></div></div></div><style data-reactid="3921">.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="3922"><div class="code-box-title" data-reactid="3923"><a href="#components-table-demo-edit-cell" data-reactid="3924">Editable Cells</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/edit-cell.md" data-reactid="3925"><i class="anticon anticon-edit" data-reactid="3926"></i></a></div><div data-reactid="3927"><p data-reactid="3928"><!-- react-text: 3929 -->Table with editable cells.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3930"></i></section><section class="highlight-wrapper" data-reactid="3931"><div class="highlight" data-reactid="3932"><i class="anticon anticon-copy code-box-code-copy" data-reactid="3933"></i><pre class="language-jsx" data-reactid="3934"><code data-reactid="3935"><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"><</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"><</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"><</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"><</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"></</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"><</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"><</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"></</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"></</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"><</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"><</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"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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"><</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</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"><</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="3936"><pre data-reactid="3937"><code class="css" data-reactid="3938"><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="3939"><section class="code-box-demo" data-reactid="3940"><div class="ant-table-wrapper" data-reactid="3941"><div class="ant-spin-nested-loading" data-reactid="3942"><div class="ant-spin-container" data-reactid="3943"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="3944"><div class="ant-table-content" data-reactid="3945"><div class="ant-table-body" data-reactid="3946"><table class="" data-reactid="3947"><colgroup data-reactid="3948"><col style="width:25%;min-width:25%;" data-reactid="3949"/><col style="width:15%;min-width:15%;" data-reactid="3950"/><col style="width:40%;min-width:40%;" data-reactid="3951"/><col data-reactid="3952"/></colgroup><thead class="ant-table-thead" data-reactid="3953"><tr data-reactid="3954"><th class="" data-reactid="3955"><span data-reactid="3956"><!-- react-text: 3957 -->name<!-- /react-text --></span></th><th class="" data-reactid="3958"><span data-reactid="3959"><!-- react-text: 3960 -->age<!-- /react-text --></span></th><th class="" data-reactid="3961"><span data-reactid="3962"><!-- react-text: 3963 -->address<!-- /react-text --></span></th><th class="" data-reactid="3964"><span data-reactid="3965"><!-- react-text: 3966 -->operation<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="3967"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3968"><td class="" data-reactid="3969"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3970"></span><!-- react-empty: 3971 --><div data-reactid="3972"><div class="editable-row-text" data-reactid="3973">Edward King 0</div></div></td><td class="" data-reactid="3974"><div data-reactid="3975"><div class="editable-row-text" data-reactid="3976">32</div></div></td><td class="" data-reactid="3977"><!-- react-text: 3978 -->London, Park Lane no. 0<!-- /react-text --></td><td class="" data-reactid="3979"><div class="editable-row-operations" data-reactid="3980"><span data-reactid="3981"><a data-reactid="3982">Edit</a></span></div></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="3983"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3984"><a data-reactid="3985"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3986"><a data-reactid="3987">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="3988"><a data-reactid="3989"></a></li><!-- react-empty: 3990 --></ul></div></div></div><style data-reactid="3991">.editable-row-text {
|
||
padding: 5px;
|
||
}
|
||
|
||
.editable-row-operations a {
|
||
margin-right: 8px;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="3992"><div class="code-box-title" data-reactid="3993"><a href="#components-table-demo-edit-row" data-reactid="3994">Editable Rows</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/edit-row.md" data-reactid="3995"><i class="anticon anticon-edit" data-reactid="3996"></i></a></div><div data-reactid="3997"><p data-reactid="3998"><!-- react-text: 3999 -->Table with editable rows.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="4000"></i></section><section class="highlight-wrapper" data-reactid="4001"><div class="highlight" data-reactid="4002"><i class="anticon anticon-copy code-box-code-copy" data-reactid="4003"></i><pre class="language-jsx" data-reactid="4004"><code data-reactid="4005"><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">&&</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"><</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"><</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</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"><</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"></</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"></</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"><</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"><</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>a</span><span class="token punctuation">></span></span>Cancel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Popconfirm</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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"><</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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"></</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"><</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">&&</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">&&</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">&&</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"><</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"><</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="4006"><pre data-reactid="4007"><code class="css" data-reactid="4008"><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="4009"><section class="code-box-demo" data-reactid="4010"><div class="ant-table-wrapper components-table-demo-nested" data-reactid="4011"><div class="ant-spin-nested-loading" data-reactid="4012"><div class="ant-spin-container" data-reactid="4013"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="4014"><div class="ant-table-content" data-reactid="4015"><div class="ant-table-body" data-reactid="4016"><table class="" data-reactid="4017"><colgroup data-reactid="4018"><col class="ant-table-expand-icon-col" data-reactid="4019"/><col data-reactid="4020"/><col data-reactid="4021"/><col data-reactid="4022"/><col data-reactid="4023"/><col data-reactid="4024"/><col data-reactid="4025"/><col data-reactid="4026"/></colgroup><thead class="ant-table-thead" data-reactid="4027"><tr data-reactid="4028"><th class="ant-table-expand-icon-th" title="" rowspan="1" data-reactid="4029"></th><th class="" data-reactid="4030"><span data-reactid="4031"><!-- react-text: 4032 -->Name<!-- /react-text --></span></th><th class="" data-reactid="4033"><span data-reactid="4034"><!-- react-text: 4035 -->Platform<!-- /react-text --></span></th><th class="" data-reactid="4036"><span data-reactid="4037"><!-- react-text: 4038 -->Version<!-- /react-text --></span></th><th class="" data-reactid="4039"><span data-reactid="4040"><!-- react-text: 4041 -->Upgraded<!-- /react-text --></span></th><th class="" data-reactid="4042"><span data-reactid="4043"><!-- react-text: 4044 -->Creator<!-- /react-text --></span></th><th class="" data-reactid="4045"><span data-reactid="4046"><!-- react-text: 4047 -->Date<!-- /react-text --></span></th><th class="" data-reactid="4048"><span data-reactid="4049"><!-- react-text: 4050 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="4051"><tr class="ant-table-row ant-table-row-level-0" data-reactid="4052"><td class="ant-table-row-expand-icon-cell" data-reactid="4053"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4054"></span></td><td class="" data-reactid="4055"><!-- react-text: 4056 -->Screem<!-- /react-text --></td><td class="" data-reactid="4057"><!-- react-text: 4058 -->iOS<!-- /react-text --></td><td class="" data-reactid="4059"><!-- react-text: 4060 -->10.3.4.5654<!-- /react-text --></td><td class="" data-reactid="4061"><!-- react-text: 4062 -->500<!-- /react-text --></td><td class="" data-reactid="4063"><!-- react-text: 4064 -->Jack<!-- /react-text --></td><td class="" data-reactid="4065"><!-- react-text: 4066 -->2014-12-24 23:12:00<!-- /react-text --></td><td class="" data-reactid="4067"><a href="#" data-reactid="4068">Publish</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4069"><td class="ant-table-row-expand-icon-cell" data-reactid="4070"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4071"></span></td><td class="" data-reactid="4072"><!-- react-text: 4073 -->Screem<!-- /react-text --></td><td class="" data-reactid="4074"><!-- react-text: 4075 -->iOS<!-- /react-text --></td><td class="" data-reactid="4076"><!-- react-text: 4077 -->10.3.4.5654<!-- /react-text --></td><td class="" data-reactid="4078"><!-- react-text: 4079 -->500<!-- /react-text --></td><td class="" data-reactid="4080"><!-- react-text: 4081 -->Jack<!-- /react-text --></td><td class="" data-reactid="4082"><!-- react-text: 4083 -->2014-12-24 23:12:00<!-- /react-text --></td><td class="" data-reactid="4084"><a href="#" data-reactid="4085">Publish</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4086"><td class="ant-table-row-expand-icon-cell" data-reactid="4087"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4088"></span></td><td class="" data-reactid="4089"><!-- react-text: 4090 -->Screem<!-- /react-text --></td><td class="" data-reactid="4091"><!-- react-text: 4092 -->iOS<!-- /react-text --></td><td class="" data-reactid="4093"><!-- react-text: 4094 -->10.3.4.5654<!-- /react-text --></td><td class="" data-reactid="4095"><!-- react-text: 4096 -->500<!-- /react-text --></td><td class="" data-reactid="4097"><!-- react-text: 4098 -->Jack<!-- /react-text --></td><td class="" data-reactid="4099"><!-- react-text: 4100 -->2014-12-24 23:12:00<!-- /react-text --></td><td class="" data-reactid="4101"><a href="#" data-reactid="4102">Publish</a></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="4103"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="4104"><a data-reactid="4105"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="4106"><a data-reactid="4107">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="4108"><a data-reactid="4109"></a></li><!-- react-empty: 4110 --></ul></div></div></div><style data-reactid="4111">.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="4112"><div class="code-box-title" data-reactid="4113"><a href="#components-table-demo-nested-table" data-reactid="4114">Nested tables</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/nested-table.md" data-reactid="4115"><i class="anticon anticon-edit" data-reactid="4116"></i></a></div><div data-reactid="4117"><p data-reactid="4118"><!-- react-text: 4119 -->Showing more detailed info of every row.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="4120"></i></section><section class="highlight-wrapper" data-reactid="4121"><div class="highlight" data-reactid="4122"><i class="anticon anticon-copy code-box-code-copy" data-reactid="4123"></i><pre class="language-jsx" data-reactid="4124"><code data-reactid="4125"><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"><</span>Menu</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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"><</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</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"><</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"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Dropdown</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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"><</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"><</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"><</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"></</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"><</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"><</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"><</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="4126"><pre data-reactid="4127"><code class="css" data-reactid="4128"><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="4129"><section class="code-box-demo" data-reactid="4130"><div data-reactid="4131"><div class="components-table-demo-control-bar" data-reactid="4132"><form class="ant-form ant-form-inline" data-reactid="4133"><div class="ant-row ant-form-item" data-reactid="4134"><div class="ant-form-item-label" data-reactid="4135"><label class="" title="Bordered" data-reactid="4136">Bordered</label></div><div class="ant-form-item-control-wrapper" data-reactid="4137"><div class="ant-form-item-control " data-reactid="4138"><span class="ant-switch" tabindex="0" data-reactid="4139"><span class="ant-switch-inner" data-reactid="4140"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4141"><div class="ant-form-item-label" data-reactid="4142"><label class="" title="loading" data-reactid="4143">loading</label></div><div class="ant-form-item-control-wrapper" data-reactid="4144"><div class="ant-form-item-control " data-reactid="4145"><span class="ant-switch" tabindex="0" data-reactid="4146"><span class="ant-switch-inner" data-reactid="4147"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4148"><div class="ant-form-item-label" data-reactid="4149"><label class="" title="Pagination" data-reactid="4150">Pagination</label></div><div class="ant-form-item-control-wrapper" data-reactid="4151"><div class="ant-form-item-control " data-reactid="4152"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4153"><span class="ant-switch-inner" data-reactid="4154"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4155"><div class="ant-form-item-label" data-reactid="4156"><label class="" title="Title" data-reactid="4157">Title</label></div><div class="ant-form-item-control-wrapper" data-reactid="4158"><div class="ant-form-item-control " data-reactid="4159"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4160"><span class="ant-switch-inner" data-reactid="4161"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4162"><div class="ant-form-item-label" data-reactid="4163"><label class="" title="Column Header" data-reactid="4164">Column Header</label></div><div class="ant-form-item-control-wrapper" data-reactid="4165"><div class="ant-form-item-control " data-reactid="4166"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4167"><span class="ant-switch-inner" data-reactid="4168"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4169"><div class="ant-form-item-label" data-reactid="4170"><label class="" title="Footer" data-reactid="4171">Footer</label></div><div class="ant-form-item-control-wrapper" data-reactid="4172"><div class="ant-form-item-control " data-reactid="4173"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4174"><span class="ant-switch-inner" data-reactid="4175"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4176"><div class="ant-form-item-label" data-reactid="4177"><label class="" title="Expandable" data-reactid="4178">Expandable</label></div><div class="ant-form-item-control-wrapper" data-reactid="4179"><div class="ant-form-item-control " data-reactid="4180"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4181"><span class="ant-switch-inner" data-reactid="4182"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4183"><div class="ant-form-item-label" data-reactid="4184"><label class="" title="Checkbox" data-reactid="4185">Checkbox</label></div><div class="ant-form-item-control-wrapper" data-reactid="4186"><div class="ant-form-item-control " data-reactid="4187"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4188"><span class="ant-switch-inner" data-reactid="4189"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4190"><div class="ant-form-item-label" data-reactid="4191"><label class="" title="Fixed Header" data-reactid="4192">Fixed Header</label></div><div class="ant-form-item-control-wrapper" data-reactid="4193"><div class="ant-form-item-control " data-reactid="4194"><span class="ant-switch" tabindex="0" data-reactid="4195"><span class="ant-switch-inner" data-reactid="4196"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4197"><div class="ant-form-item-label" data-reactid="4198"><label class="" title="Size" data-reactid="4199">Size</label></div><div class="ant-form-item-control-wrapper" data-reactid="4200"><div class="ant-form-item-control " data-reactid="4201"><div class="ant-radio-group ant-radio-group-default" data-reactid="4202"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" data-reactid="4203"><span class="ant-radio-button ant-radio-button-checked" data-reactid="4204"><input type="radio" class="ant-radio-button-input" checked="" data-reactid="4205"/><span class="ant-radio-button-inner" data-reactid="4206"></span></span><span data-reactid="4207">Default</span></label><label class="ant-radio-button-wrapper" data-reactid="4208"><span class="ant-radio-button" data-reactid="4209"><input type="radio" class="ant-radio-button-input" data-reactid="4210"/><span class="ant-radio-button-inner" data-reactid="4211"></span></span><span data-reactid="4212">Middle</span></label><label class="ant-radio-button-wrapper" data-reactid="4213"><span class="ant-radio-button" data-reactid="4214"><input type="radio" class="ant-radio-button-input" data-reactid="4215"/><span class="ant-radio-button-inner" data-reactid="4216"></span></span><span data-reactid="4217">Small</span></label></div></div></div></div></form></div><div class="ant-table-wrapper" data-reactid="4218"><div class="ant-spin-nested-loading" data-reactid="4219"><div class="ant-spin-container" data-reactid="4220"><div class="ant-table ant-table-default ant-table-scroll-position-left" data-reactid="4221"><div class="ant-table-title" data-reactid="4222">Here is title</div><div class="ant-table-content" data-reactid="4223"><div class="ant-table-body" data-reactid="4224"><table class="" data-reactid="4225"><colgroup data-reactid="4226"><col class="ant-table-expand-icon-col" data-reactid="4227"/><col data-reactid="4228"/><col style="width:150px;min-width:150px;" data-reactid="4229"/><col style="width:70px;min-width:70px;" data-reactid="4230"/><col data-reactid="4231"/><col style="width:360px;min-width:360px;" data-reactid="4232"/></colgroup><thead class="ant-table-thead" data-reactid="4233"><tr data-reactid="4234"><th class="ant-table-expand-icon-th" title="" rowspan="1" data-reactid="4235"></th><th class="ant-table-selection-column" data-reactid="4236"><span data-reactid="4237"><div class="ant-table-selection" data-reactid="4238"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="4239"><span class="ant-checkbox" data-reactid="4240"><input type="checkbox" class="ant-checkbox-input" data-reactid="4241"/><span class="ant-checkbox-inner" data-reactid="4242"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="4243"><i class="anticon anticon-down" data-reactid="4244"></i></div></div></span></th><th class="" data-reactid="4245"><span data-reactid="4246"><!-- react-text: 4247 -->Name<!-- /react-text --></span></th><th class="" data-reactid="4248"><span data-reactid="4249"><!-- react-text: 4250 -->Age<!-- /react-text --></span></th><th class="" data-reactid="4251"><span data-reactid="4252"><!-- react-text: 4253 -->Address<!-- /react-text --></span></th><th class="" data-reactid="4254"><span data-reactid="4255"><!-- react-text: 4256 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="4257"><tr class="ant-table-row ant-table-row-level-0" data-reactid="4258"><td class="ant-table-row-expand-icon-cell" data-reactid="4259"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4260"></span></td><td class="ant-table-selection-column" data-reactid="4261"><span data-reactid="4262"><label class="ant-checkbox-wrapper" data-reactid="4263"><span class="ant-checkbox" data-reactid="4264"><input type="checkbox" class="ant-checkbox-input" data-reactid="4265"/><span class="ant-checkbox-inner" data-reactid="4266"></span></span></label></span></td><td class="" data-reactid="4267"><a href="#" data-reactid="4268">John Brown</a></td><td class="" data-reactid="4269"><!-- react-text: 4270 -->12<!-- /react-text --></td><td class="" data-reactid="4271"><!-- react-text: 4272 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="4273"><span data-reactid="4274"><a href="#" data-reactid="4275"><!-- react-text: 4276 -->Action 一 <!-- /react-text --><!-- react-text: 4277 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4278"></span><a href="#" data-reactid="4279">Delete</a><span class="ant-divider" data-reactid="4280"></span><a href="#" class="ant-dropdown-link" data-reactid="4281"><!-- react-text: 4282 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4283"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4284"><td class="ant-table-row-expand-icon-cell" data-reactid="4285"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4286"></span></td><td class="ant-table-selection-column" data-reactid="4287"><span data-reactid="4288"><label class="ant-checkbox-wrapper" data-reactid="4289"><span class="ant-checkbox" data-reactid="4290"><input type="checkbox" class="ant-checkbox-input" data-reactid="4291"/><span class="ant-checkbox-inner" data-reactid="4292"></span></span></label></span></td><td class="" data-reactid="4293"><a href="#" data-reactid="4294">John Brown</a></td><td class="" data-reactid="4295"><!-- react-text: 4296 -->22<!-- /react-text --></td><td class="" data-reactid="4297"><!-- react-text: 4298 -->New York No. 2 Lake Park<!-- /react-text --></td><td class="" data-reactid="4299"><span data-reactid="4300"><a href="#" data-reactid="4301"><!-- react-text: 4302 -->Action 一 <!-- /react-text --><!-- react-text: 4303 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4304"></span><a href="#" data-reactid="4305">Delete</a><span class="ant-divider" data-reactid="4306"></span><a href="#" class="ant-dropdown-link" data-reactid="4307"><!-- react-text: 4308 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4309"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4310"><td class="ant-table-row-expand-icon-cell" data-reactid="4311"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4312"></span></td><td class="ant-table-selection-column" data-reactid="4313"><span data-reactid="4314"><label class="ant-checkbox-wrapper" data-reactid="4315"><span class="ant-checkbox" data-reactid="4316"><input type="checkbox" class="ant-checkbox-input" data-reactid="4317"/><span class="ant-checkbox-inner" data-reactid="4318"></span></span></label></span></td><td class="" data-reactid="4319"><a href="#" data-reactid="4320">John Brown</a></td><td class="" data-reactid="4321"><!-- react-text: 4322 -->32<!-- /react-text --></td><td class="" data-reactid="4323"><!-- react-text: 4324 -->New York No. 3 Lake Park<!-- /react-text --></td><td class="" data-reactid="4325"><span data-reactid="4326"><a href="#" data-reactid="4327"><!-- react-text: 4328 -->Action 一 <!-- /react-text --><!-- react-text: 4329 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4330"></span><a href="#" data-reactid="4331">Delete</a><span class="ant-divider" data-reactid="4332"></span><a href="#" class="ant-dropdown-link" data-reactid="4333"><!-- react-text: 4334 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4335"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4336"><td class="ant-table-row-expand-icon-cell" data-reactid="4337"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4338"></span></td><td class="ant-table-selection-column" data-reactid="4339"><span data-reactid="4340"><label class="ant-checkbox-wrapper" data-reactid="4341"><span class="ant-checkbox" data-reactid="4342"><input type="checkbox" class="ant-checkbox-input" data-reactid="4343"/><span class="ant-checkbox-inner" data-reactid="4344"></span></span></label></span></td><td class="" data-reactid="4345"><a href="#" data-reactid="4346">John Brown</a></td><td class="" data-reactid="4347"><!-- react-text: 4348 -->42<!-- /react-text --></td><td class="" data-reactid="4349"><!-- react-text: 4350 -->New York No. 4 Lake Park<!-- /react-text --></td><td class="" data-reactid="4351"><span data-reactid="4352"><a href="#" data-reactid="4353"><!-- react-text: 4354 -->Action 一 <!-- /react-text --><!-- react-text: 4355 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4356"></span><a href="#" data-reactid="4357">Delete</a><span class="ant-divider" data-reactid="4358"></span><a href="#" class="ant-dropdown-link" data-reactid="4359"><!-- react-text: 4360 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4361"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4362"><td class="ant-table-row-expand-icon-cell" data-reactid="4363"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4364"></span></td><td class="ant-table-selection-column" data-reactid="4365"><span data-reactid="4366"><label class="ant-checkbox-wrapper" data-reactid="4367"><span class="ant-checkbox" data-reactid="4368"><input type="checkbox" class="ant-checkbox-input" data-reactid="4369"/><span class="ant-checkbox-inner" data-reactid="4370"></span></span></label></span></td><td class="" data-reactid="4371"><a href="#" data-reactid="4372">John Brown</a></td><td class="" data-reactid="4373"><!-- react-text: 4374 -->52<!-- /react-text --></td><td class="" data-reactid="4375"><!-- react-text: 4376 -->New York No. 5 Lake Park<!-- /react-text --></td><td class="" data-reactid="4377"><span data-reactid="4378"><a href="#" data-reactid="4379"><!-- react-text: 4380 -->Action 一 <!-- /react-text --><!-- react-text: 4381 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4382"></span><a href="#" data-reactid="4383">Delete</a><span class="ant-divider" data-reactid="4384"></span><a href="#" class="ant-dropdown-link" data-reactid="4385"><!-- react-text: 4386 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4387"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4388"><td class="ant-table-row-expand-icon-cell" data-reactid="4389"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4390"></span></td><td class="ant-table-selection-column" data-reactid="4391"><span data-reactid="4392"><label class="ant-checkbox-wrapper" data-reactid="4393"><span class="ant-checkbox" data-reactid="4394"><input type="checkbox" class="ant-checkbox-input" data-reactid="4395"/><span class="ant-checkbox-inner" data-reactid="4396"></span></span></label></span></td><td class="" data-reactid="4397"><a href="#" data-reactid="4398">John Brown</a></td><td class="" data-reactid="4399"><!-- react-text: 4400 -->62<!-- /react-text --></td><td class="" data-reactid="4401"><!-- react-text: 4402 -->New York No. 6 Lake Park<!-- /react-text --></td><td class="" data-reactid="4403"><span data-reactid="4404"><a href="#" data-reactid="4405"><!-- react-text: 4406 -->Action 一 <!-- /react-text --><!-- react-text: 4407 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4408"></span><a href="#" data-reactid="4409">Delete</a><span class="ant-divider" data-reactid="4410"></span><a href="#" class="ant-dropdown-link" data-reactid="4411"><!-- react-text: 4412 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4413"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4414"><td class="ant-table-row-expand-icon-cell" data-reactid="4415"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4416"></span></td><td class="ant-table-selection-column" data-reactid="4417"><span data-reactid="4418"><label class="ant-checkbox-wrapper" data-reactid="4419"><span class="ant-checkbox" data-reactid="4420"><input type="checkbox" class="ant-checkbox-input" data-reactid="4421"/><span class="ant-checkbox-inner" data-reactid="4422"></span></span></label></span></td><td class="" data-reactid="4423"><a href="#" data-reactid="4424">John Brown</a></td><td class="" data-reactid="4425"><!-- react-text: 4426 -->72<!-- /react-text --></td><td class="" data-reactid="4427"><!-- react-text: 4428 -->New York No. 7 Lake Park<!-- /react-text --></td><td class="" data-reactid="4429"><span data-reactid="4430"><a href="#" data-reactid="4431"><!-- react-text: 4432 -->Action 一 <!-- /react-text --><!-- react-text: 4433 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4434"></span><a href="#" data-reactid="4435">Delete</a><span class="ant-divider" data-reactid="4436"></span><a href="#" class="ant-dropdown-link" data-reactid="4437"><!-- react-text: 4438 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4439"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4440"><td class="ant-table-row-expand-icon-cell" data-reactid="4441"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4442"></span></td><td class="ant-table-selection-column" data-reactid="4443"><span data-reactid="4444"><label class="ant-checkbox-wrapper" data-reactid="4445"><span class="ant-checkbox" data-reactid="4446"><input type="checkbox" class="ant-checkbox-input" data-reactid="4447"/><span class="ant-checkbox-inner" data-reactid="4448"></span></span></label></span></td><td class="" data-reactid="4449"><a href="#" data-reactid="4450">John Brown</a></td><td class="" data-reactid="4451"><!-- react-text: 4452 -->82<!-- /react-text --></td><td class="" data-reactid="4453"><!-- react-text: 4454 -->New York No. 8 Lake Park<!-- /react-text --></td><td class="" data-reactid="4455"><span data-reactid="4456"><a href="#" data-reactid="4457"><!-- react-text: 4458 -->Action 一 <!-- /react-text --><!-- react-text: 4459 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4460"></span><a href="#" data-reactid="4461">Delete</a><span class="ant-divider" data-reactid="4462"></span><a href="#" class="ant-dropdown-link" data-reactid="4463"><!-- react-text: 4464 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4465"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4466"><td class="ant-table-row-expand-icon-cell" data-reactid="4467"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4468"></span></td><td class="ant-table-selection-column" data-reactid="4469"><span data-reactid="4470"><label class="ant-checkbox-wrapper" data-reactid="4471"><span class="ant-checkbox" data-reactid="4472"><input type="checkbox" class="ant-checkbox-input" data-reactid="4473"/><span class="ant-checkbox-inner" data-reactid="4474"></span></span></label></span></td><td class="" data-reactid="4475"><a href="#" data-reactid="4476">John Brown</a></td><td class="" data-reactid="4477"><!-- react-text: 4478 -->92<!-- /react-text --></td><td class="" data-reactid="4479"><!-- react-text: 4480 -->New York No. 9 Lake Park<!-- /react-text --></td><td class="" data-reactid="4481"><span data-reactid="4482"><a href="#" data-reactid="4483"><!-- react-text: 4484 -->Action 一 <!-- /react-text --><!-- react-text: 4485 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4486"></span><a href="#" data-reactid="4487">Delete</a><span class="ant-divider" data-reactid="4488"></span><a href="#" class="ant-dropdown-link" data-reactid="4489"><!-- react-text: 4490 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4491"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4492"><td class="ant-table-row-expand-icon-cell" data-reactid="4493"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4494"></span></td><td class="ant-table-selection-column" data-reactid="4495"><span data-reactid="4496"><label class="ant-checkbox-wrapper" data-reactid="4497"><span class="ant-checkbox" data-reactid="4498"><input type="checkbox" class="ant-checkbox-input" data-reactid="4499"/><span class="ant-checkbox-inner" data-reactid="4500"></span></span></label></span></td><td class="" data-reactid="4501"><a href="#" data-reactid="4502">John Brown</a></td><td class="" data-reactid="4503"><!-- react-text: 4504 -->102<!-- /react-text --></td><td class="" data-reactid="4505"><!-- react-text: 4506 -->New York No. 10 Lake Park<!-- /react-text --></td><td class="" data-reactid="4507"><span data-reactid="4508"><a href="#" data-reactid="4509"><!-- react-text: 4510 -->Action 一 <!-- /react-text --><!-- react-text: 4511 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4512"></span><a href="#" data-reactid="4513">Delete</a><span class="ant-divider" data-reactid="4514"></span><a href="#" class="ant-dropdown-link" data-reactid="4515"><!-- react-text: 4516 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4517"></i></a></span></td></tr></tbody></table></div><div class="ant-table-footer" data-reactid="4518">Here is footer</div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="4519"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="4520"><a data-reactid="4521"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="4522"><a data-reactid="4523">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="4524"><a data-reactid="4525"></a></li><!-- react-empty: 4526 --></ul></div></div></div></div><style data-reactid="4527">
|
||
.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="4528"><div class="code-box-title" data-reactid="4529"><a href="#components-table-demo-dynamic-settings" data-reactid="4530">Dynamic Settings</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/dynamic-settings.md" data-reactid="4531"><i class="anticon anticon-edit" data-reactid="4532"></i></a></div><div data-reactid="4533"><p data-reactid="4534"><!-- react-text: 4535 -->Select different settings to see the result.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="4536"></i></section><section class="highlight-wrapper" data-reactid="4537"><div class="highlight" data-reactid="4538"><i class="anticon anticon-copy code-box-code-copy" data-reactid="4539"></i><pre class="language-jsx" data-reactid="4540"><code data-reactid="4541"><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"><</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"></</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"><</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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"><=</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"><</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"></</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"><</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"><</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"><</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"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"><</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"></</span>Radio.Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>Radio.Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>Radio.Button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Radio.Group</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token operator"><</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"></</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"><</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="4542"><h2 id="API" data-reactid="4543"><span data-reactid="4544"><!-- react-text: 4545 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="4546">#</a></h2><h3 id="Table" data-reactid="4547"><span data-reactid="4548"><!-- react-text: 4549 -->Table<!-- /react-text --></span><a href="#Table" class="anchor" data-reactid="4550">#</a></h3><table data-reactid="4551"><thead data-reactid="4552"><tr data-reactid="4553"><th data-reactid="4554"><!-- react-text: 4555 -->Property<!-- /react-text --></th><th data-reactid="4556"><!-- react-text: 4557 -->Description<!-- /react-text --></th><th data-reactid="4558"><!-- react-text: 4559 -->Type<!-- /react-text --></th><th data-reactid="4560"><!-- react-text: 4561 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="4562"><tr data-reactid="4563"><td data-reactid="4564"><!-- react-text: 4565 -->rowSelection<!-- /react-text --></td><td data-reactid="4566"><!-- react-text: 4567 -->row selection <!-- /react-text --><a href="#rowSelection" data-reactid="4568"><!-- react-text: 4569 -->config<!-- /react-text --></a></td><td data-reactid="4570"><!-- react-text: 4571 -->object<!-- /react-text --></td><td data-reactid="4572"><!-- react-text: 4573 -->null<!-- /react-text --></td></tr><tr data-reactid="4574"><td data-reactid="4575"><!-- react-text: 4576 -->pagination<!-- /react-text --></td><td data-reactid="4577"><!-- react-text: 4578 -->pagination <!-- /react-text --><a href="/components/pagination/" data-reactid="4579">config</a><!-- react-text: 4580 -->, hide it via setting to <!-- /react-text --><code data-reactid="4581"><!-- react-text: 4582 -->false<!-- /react-text --></code></td><td data-reactid="4583"><!-- react-text: 4584 -->object<!-- /react-text --></td><td data-reactid="4585"></td></tr><tr data-reactid="4586"><td data-reactid="4587"><!-- react-text: 4588 -->size<!-- /react-text --></td><td data-reactid="4589"><!-- react-text: 4590 -->size of table: <!-- /react-text --><code data-reactid="4591"><!-- react-text: 4592 -->default<!-- /react-text --></code><!-- react-text: 4593 -->, <!-- /react-text --><code data-reactid="4594"><!-- react-text: 4595 -->middle<!-- /react-text --></code><!-- react-text: 4596 --> or <!-- /react-text --><code data-reactid="4597"><!-- react-text: 4598 -->small<!-- /react-text --></code></td><td data-reactid="4599"><!-- react-text: 4600 -->string<!-- /react-text --></td><td data-reactid="4601"><code data-reactid="4602"><!-- react-text: 4603 -->default<!-- /react-text --></code></td></tr><tr data-reactid="4604"><td data-reactid="4605"><!-- react-text: 4606 -->dataSource<!-- /react-text --></td><td data-reactid="4607"><!-- react-text: 4608 -->data record array to be rendered<!-- /react-text --></td><td data-reactid="4609"><!-- react-text: 4610 -->any[]<!-- /react-text --></td><td data-reactid="4611"></td></tr><tr data-reactid="4612"><td data-reactid="4613"><!-- react-text: 4614 -->columns<!-- /react-text --></td><td data-reactid="4615"><!-- react-text: 4616 -->columns of table<!-- /react-text --></td><td data-reactid="4617"><a href="https://git.io/vMMXC" data-reactid="4618"><!-- react-text: 4619 -->ColumnProps<!-- /react-text --></a><!-- react-text: 4620 -->[]<!-- /react-text --></td><td data-reactid="4621"><!-- react-text: 4622 -->-<!-- /react-text --></td></tr><tr data-reactid="4623"><td data-reactid="4624"><!-- react-text: 4625 -->rowKey<!-- /react-text --></td><td data-reactid="4626"><!-- react-text: 4627 -->get row's key, could be a string or function<!-- /react-text --></td><td data-reactid="4628"><!-- react-text: 4629 -->string<!-- /react-text --><!-- react-text: 4630 -->|<!-- /react-text --><!-- react-text: 4631 -->Function(record):string<!-- /react-text --></td><td data-reactid="4632"><!-- react-text: 4633 -->'key'<!-- /react-text --></td></tr><tr data-reactid="4634"><td data-reactid="4635"><!-- react-text: 4636 -->rowClassName<!-- /react-text --></td><td data-reactid="4637"><!-- react-text: 4638 -->get row's className<!-- /react-text --></td><td data-reactid="4639"><!-- react-text: 4640 -->Function(record, index):string<!-- /react-text --></td><td data-reactid="4641"><!-- react-text: 4642 -->-<!-- /react-text --></td></tr><tr data-reactid="4643"><td data-reactid="4644"><!-- react-text: 4645 -->expandedRowRender<!-- /react-text --></td><td data-reactid="4646"><!-- react-text: 4647 -->expanded container render for each row<!-- /react-text --></td><td data-reactid="4648"><!-- react-text: 4649 -->Function<!-- /react-text --></td><td data-reactid="4650"><!-- react-text: 4651 -->-<!-- /react-text --></td></tr><tr data-reactid="4652"><td data-reactid="4653"><!-- react-text: 4654 -->defaultExpandedRowKeys<!-- /react-text --></td><td data-reactid="4655"><!-- react-text: 4656 -->initial expanded row keys<!-- /react-text --></td><td data-reactid="4657"><!-- react-text: 4658 -->string[]<!-- /react-text --></td><td data-reactid="4659"><!-- react-text: 4660 -->-<!-- /react-text --></td></tr><tr data-reactid="4661"><td data-reactid="4662"><!-- react-text: 4663 -->expandedRowKeys<!-- /react-text --></td><td data-reactid="4664"><!-- react-text: 4665 -->current expanded rows keys<!-- /react-text --></td><td data-reactid="4666"><!-- react-text: 4667 -->string[]<!-- /react-text --></td><td data-reactid="4668"><!-- react-text: 4669 -->-<!-- /react-text --></td></tr><tr data-reactid="4670"><td data-reactid="4671"><!-- react-text: 4672 -->defaultExpandAllRows<!-- /react-text --></td><td data-reactid="4673"><!-- react-text: 4674 -->expand all rows initially<!-- /react-text --></td><td data-reactid="4675"><!-- react-text: 4676 -->boolean<!-- /react-text --></td><td data-reactid="4677"><!-- react-text: 4678 -->false<!-- /react-text --></td></tr><tr data-reactid="4679"><td data-reactid="4680"><!-- react-text: 4681 -->onExpandedRowsChange<!-- /react-text --></td><td data-reactid="4682"><!-- react-text: 4683 -->function to call when the expanded rows change<!-- /react-text --></td><td data-reactid="4684"><!-- react-text: 4685 -->Function(expandedRows)<!-- /react-text --></td><td data-reactid="4686"></td></tr><tr data-reactid="4687"><td data-reactid="4688"><!-- react-text: 4689 -->onExpand<!-- /react-text --></td><td data-reactid="4690"><!-- react-text: 4691 -->function to call when click expand icon<!-- /react-text --></td><td data-reactid="4692"><!-- react-text: 4693 -->Function(expanded, record)<!-- /react-text --></td><td data-reactid="4694"></td></tr><tr data-reactid="4695"><td data-reactid="4696"><!-- react-text: 4697 -->onChange<!-- /react-text --></td><td data-reactid="4698"><!-- react-text: 4699 -->callback that is called when pagination, filters, sorter is changed<!-- /react-text --></td><td data-reactid="4700"><!-- react-text: 4701 -->Function(pagination, filters, sorter)<!-- /react-text --></td><td data-reactid="4702"></td></tr><tr data-reactid="4703"><td data-reactid="4704"><!-- react-text: 4705 -->loading<!-- /react-text --></td><td data-reactid="4706"><!-- react-text: 4707 -->loading status of table<!-- /react-text --></td><td data-reactid="4708"><!-- react-text: 4709 -->boolean<!-- /react-text --></td><td data-reactid="4710"><!-- react-text: 4711 -->false<!-- /react-text --></td></tr><tr data-reactid="4712"><td data-reactid="4713"><!-- react-text: 4714 -->locale<!-- /react-text --></td><td data-reactid="4715"><!-- react-text: 4716 -->i18n text include filter, sort, empty text...etc<!-- /react-text --></td><td data-reactid="4717"><!-- react-text: 4718 -->object<!-- /react-text --></td><td data-reactid="4719"><!-- react-text: 4720 -->filterConfirm: 'Ok' <!-- /react-text --><br data-reactid="4721"/><!-- react-text: 4722 --> filterReset: 'Reset' <!-- /react-text --><br data-reactid="4723"/><!-- react-text: 4724 --> emptyText: 'No Data' <!-- /react-text --><br data-reactid="4725"/><!-- react-text: 4726 --> <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511" data-reactid="4727"><!-- react-text: 4728 -->Default<!-- /react-text --></a></td></tr><tr data-reactid="4729"><td data-reactid="4730"><!-- react-text: 4731 -->indentSize<!-- /react-text --></td><td data-reactid="4732"><!-- react-text: 4733 -->index pixel size of tree data<!-- /react-text --></td><td data-reactid="4734"><!-- react-text: 4735 -->number<!-- /react-text --></td><td data-reactid="4736"><!-- react-text: 4737 -->15<!-- /react-text --></td></tr><tr data-reactid="4738"><td data-reactid="4739"><!-- react-text: 4740 -->onRowClick<!-- /react-text --></td><td data-reactid="4741"><!-- react-text: 4742 -->callback that is called when click a row<!-- /react-text --></td><td data-reactid="4743"><!-- react-text: 4744 -->Function(record, index)<!-- /react-text --></td><td data-reactid="4745"><!-- react-text: 4746 -->-<!-- /react-text --></td></tr><tr data-reactid="4747"><td data-reactid="4748"><!-- react-text: 4749 -->bordered<!-- /react-text --></td><td data-reactid="4750"><!-- react-text: 4751 -->whether to show table border completely<!-- /react-text --></td><td data-reactid="4752"><!-- react-text: 4753 -->boolean<!-- /react-text --></td><td data-reactid="4754"><!-- react-text: 4755 -->false<!-- /react-text --></td></tr><tr data-reactid="4756"><td data-reactid="4757"><!-- react-text: 4758 -->showHeader<!-- /react-text --></td><td data-reactid="4759"><!-- react-text: 4760 -->whether to show table header<!-- /react-text --></td><td data-reactid="4761"><!-- react-text: 4762 -->boolean<!-- /react-text --></td><td data-reactid="4763"><!-- react-text: 4764 -->true<!-- /react-text --></td></tr><tr data-reactid="4765"><td data-reactid="4766"><!-- react-text: 4767 -->footer<!-- /react-text --></td><td data-reactid="4768"><!-- react-text: 4769 -->table footer renderer<!-- /react-text --></td><td data-reactid="4770"><!-- react-text: 4771 -->Function(currentPageData)<!-- /react-text --></td><td data-reactid="4772"></td></tr><tr data-reactid="4773"><td data-reactid="4774"><!-- react-text: 4775 -->title<!-- /react-text --></td><td data-reactid="4776"><!-- react-text: 4777 -->table title renderer<!-- /react-text --></td><td data-reactid="4778"><!-- react-text: 4779 -->Function(currentPageData)<!-- /react-text --></td><td data-reactid="4780"></td></tr><tr data-reactid="4781"><td data-reactid="4782"><!-- react-text: 4783 -->scroll<!-- /react-text --></td><td data-reactid="4784"><!-- react-text: 4785 -->whether table can be scroll in x/y direction, <!-- /react-text --><code data-reactid="4786"><!-- react-text: 4787 -->x<!-- /react-text --></code><!-- react-text: 4788 --> or <!-- /react-text --><code data-reactid="4789"><!-- react-text: 4790 -->y<!-- /react-text --></code><!-- react-text: 4791 --> can be a number that indicated the width and height of table body<!-- /react-text --></td><td data-reactid="4792"><!-- react-text: 4793 -->object<!-- /react-text --></td><td data-reactid="4794"><!-- react-text: 4795 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="Column" data-reactid="4796"><span data-reactid="4797"><!-- react-text: 4798 -->Column<!-- /react-text --></span><a href="#Column" class="anchor" data-reactid="4799">#</a></h3><p data-reactid="4800"><!-- react-text: 4801 -->One of Property <!-- /react-text --><code data-reactid="4802"><!-- react-text: 4803 -->columns<!-- /react-text --></code><!-- react-text: 4804 --> for descriping column, Column has the same API.<!-- /react-text --></p><table data-reactid="4805"><thead data-reactid="4806"><tr data-reactid="4807"><th data-reactid="4808"><!-- react-text: 4809 -->Property<!-- /react-text --></th><th data-reactid="4810"><!-- react-text: 4811 -->Description<!-- /react-text --></th><th data-reactid="4812"><!-- react-text: 4813 -->Type<!-- /react-text --></th><th data-reactid="4814"><!-- react-text: 4815 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="4816"><tr data-reactid="4817"><td data-reactid="4818"><!-- react-text: 4819 -->title<!-- /react-text --></td><td data-reactid="4820"><!-- react-text: 4821 -->title of this column<!-- /react-text --></td><td data-reactid="4822"><!-- react-text: 4823 -->string<!-- /react-text --><!-- react-text: 4824 -->|<!-- /react-text --><!-- react-text: 4825 -->ReactNode<!-- /react-text --></td><td data-reactid="4826"><!-- react-text: 4827 -->-<!-- /react-text --></td></tr><tr data-reactid="4828"><td data-reactid="4829"><!-- react-text: 4830 -->key<!-- /react-text --></td><td data-reactid="4831"><!-- react-text: 4832 -->key of this column<!-- /react-text --></td><td data-reactid="4833"><!-- react-text: 4834 -->string<!-- /react-text --></td><td data-reactid="4835"><!-- react-text: 4836 -->-<!-- /react-text --></td></tr><tr data-reactid="4837"><td data-reactid="4838"><!-- react-text: 4839 -->dataIndex<!-- /react-text --></td><td data-reactid="4840"><!-- react-text: 4841 -->display field of the data record, could be set like <!-- /react-text --><code data-reactid="4842"><!-- react-text: 4843 -->a.b.c<!-- /react-text --></code></td><td data-reactid="4844"><!-- react-text: 4845 -->string<!-- /react-text --></td><td data-reactid="4846"><!-- react-text: 4847 -->-<!-- /react-text --></td></tr><tr data-reactid="4848"><td data-reactid="4849"><!-- react-text: 4850 -->render<!-- /react-text --></td><td data-reactid="4851"><!-- react-text: 4852 -->renderer of table cell, has three params: text, record and index of this row. The render value should be a ReactNode, or a object for <!-- /react-text --><a href="#demo-colspan-rowspan" data-reactid="4853"><!-- react-text: 4854 -->colSpan/rowSpan config<!-- /react-text --></a></td><td data-reactid="4855"><!-- react-text: 4856 -->Function(text, record, index) {}<!-- /react-text --></td><td data-reactid="4857"><!-- react-text: 4858 -->-<!-- /react-text --></td></tr><tr data-reactid="4859"><td data-reactid="4860"><!-- react-text: 4861 -->filters<!-- /react-text --></td><td data-reactid="4862"><!-- react-text: 4863 -->filter menu config<!-- /react-text --></td><td data-reactid="4864"><!-- react-text: 4865 -->object[]<!-- /react-text --></td><td data-reactid="4866"><!-- react-text: 4867 -->-<!-- /react-text --></td></tr><tr data-reactid="4868"><td data-reactid="4869"><!-- react-text: 4870 -->onFilter<!-- /react-text --></td><td data-reactid="4871"><!-- react-text: 4872 -->callback that is called when when click confirm filter button<!-- /react-text --></td><td data-reactid="4873"><!-- react-text: 4874 -->Function<!-- /react-text --></td><td data-reactid="4875"><!-- react-text: 4876 -->-<!-- /react-text --></td></tr><tr data-reactid="4877"><td data-reactid="4878"><!-- react-text: 4879 -->filterMultiple<!-- /react-text --></td><td data-reactid="4880"><!-- react-text: 4881 -->whether to select multiple filtered item<!-- /react-text --></td><td data-reactid="4882"><!-- react-text: 4883 -->boolean<!-- /react-text --></td><td data-reactid="4884"><!-- react-text: 4885 -->true<!-- /react-text --></td></tr><tr data-reactid="4886"><td data-reactid="4887"><!-- react-text: 4888 -->filterDropdown<!-- /react-text --></td><td data-reactid="4889"><!-- react-text: 4890 -->customized filter overlay<!-- /react-text --></td><td data-reactid="4891"><!-- react-text: 4892 -->ReactNode<!-- /react-text --></td><td data-reactid="4893"><!-- react-text: 4894 -->-<!-- /react-text --></td></tr><tr data-reactid="4895"><td data-reactid="4896"><!-- react-text: 4897 -->filterDropdownVisible<!-- /react-text --></td><td data-reactid="4898"><!-- react-text: 4899 -->whether filterDropdown is visible<!-- /react-text --></td><td data-reactid="4900"><!-- react-text: 4901 -->boolean<!-- /react-text --></td><td data-reactid="4902"><!-- react-text: 4903 -->-<!-- /react-text --></td></tr><tr data-reactid="4904"><td data-reactid="4905"><!-- react-text: 4906 -->onFilterDropdownVisibleChange<!-- /react-text --></td><td data-reactid="4907"><!-- react-text: 4908 -->called when filterDropdownVisible is changed<!-- /react-text --></td><td data-reactid="4909"><!-- react-text: 4910 -->function(visible) {}<!-- /react-text --></td><td data-reactid="4911"><!-- react-text: 4912 -->-<!-- /react-text --></td></tr><tr data-reactid="4913"><td data-reactid="4914"><!-- react-text: 4915 -->filteredValue<!-- /react-text --></td><td data-reactid="4916"><!-- react-text: 4917 -->controlled filtered value<!-- /react-text --></td><td data-reactid="4918"><!-- react-text: 4919 -->string[]<!-- /react-text --></td><td data-reactid="4920"><!-- react-text: 4921 -->-<!-- /react-text --></td></tr><tr data-reactid="4922"><td data-reactid="4923"><!-- react-text: 4924 -->sorter<!-- /react-text --></td><td data-reactid="4925"><!-- react-text: 4926 -->sort function for local sort. If you need sort buttons only, set it <!-- /react-text --><code data-reactid="4927"><!-- react-text: 4928 -->true<!-- /react-text --></code></td><td data-reactid="4929"><!-- react-text: 4930 -->Function<!-- /react-text --><!-- react-text: 4931 -->|<!-- /react-text --><!-- react-text: 4932 -->boolean<!-- /react-text --></td><td data-reactid="4933"><!-- react-text: 4934 -->-<!-- /react-text --></td></tr><tr data-reactid="4935"><td data-reactid="4936"><!-- react-text: 4937 -->colSpan<!-- /react-text --></td><td data-reactid="4938"><!-- react-text: 4939 -->span of this column's title<!-- /react-text --></td><td data-reactid="4940"><!-- react-text: 4941 -->number<!-- /react-text --></td><td data-reactid="4942"></td></tr><tr data-reactid="4943"><td data-reactid="4944"><!-- react-text: 4945 -->width<!-- /react-text --></td><td data-reactid="4946"><!-- react-text: 4947 -->width of this column<!-- /react-text --></td><td data-reactid="4948"><!-- react-text: 4949 -->string<!-- /react-text --><!-- react-text: 4950 -->|<!-- /react-text --><!-- react-text: 4951 -->number<!-- /react-text --></td><td data-reactid="4952"><!-- react-text: 4953 -->-<!-- /react-text --></td></tr><tr data-reactid="4954"><td data-reactid="4955"><!-- react-text: 4956 -->className<!-- /react-text --></td><td data-reactid="4957"><!-- react-text: 4958 -->className of this column<!-- /react-text --></td><td data-reactid="4959"><!-- react-text: 4960 -->string<!-- /react-text --></td><td data-reactid="4961"><!-- react-text: 4962 -->-<!-- /react-text --></td></tr><tr data-reactid="4963"><td data-reactid="4964"><!-- react-text: 4965 -->fixed<!-- /react-text --></td><td data-reactid="4966"><!-- react-text: 4967 -->set column to be fixed: <!-- /react-text --><code data-reactid="4968"><!-- react-text: 4969 -->true<!-- /react-text --></code><!-- react-text: 4970 -->(same as left) <!-- /react-text --><code data-reactid="4971"><!-- react-text: 4972 -->'left'<!-- /react-text --></code><!-- react-text: 4973 --> <!-- /react-text --><code data-reactid="4974"><!-- react-text: 4975 -->'right'<!-- /react-text --></code></td><td data-reactid="4976"><!-- react-text: 4977 -->boolean<!-- /react-text --><!-- react-text: 4978 -->|<!-- /react-text --><!-- react-text: 4979 -->string<!-- /react-text --></td><td data-reactid="4980"><!-- react-text: 4981 -->false<!-- /react-text --></td></tr><tr data-reactid="4982"><td data-reactid="4983"><!-- react-text: 4984 -->sortOrder<!-- /react-text --></td><td data-reactid="4985"><!-- react-text: 4986 -->controlled sorted value: <!-- /react-text --><code data-reactid="4987"><!-- react-text: 4988 -->'ascend'<!-- /react-text --></code><!-- react-text: 4989 --> <!-- /react-text --><code data-reactid="4990"><!-- react-text: 4991 -->'descend'<!-- /react-text --></code><!-- react-text: 4992 --> <!-- /react-text --><code data-reactid="4993"><!-- react-text: 4994 -->false<!-- /react-text --></code></td><td data-reactid="4995"><!-- react-text: 4996 -->boolean<!-- /react-text --><!-- react-text: 4997 -->|<!-- /react-text --><!-- react-text: 4998 -->string<!-- /react-text --></td><td data-reactid="4999"><!-- react-text: 5000 -->-<!-- /react-text --></td></tr><tr data-reactid="5001"><td data-reactid="5002"><!-- react-text: 5003 -->onCellClick<!-- /react-text --></td><td data-reactid="5004"><!-- react-text: 5005 -->callback when click cell<!-- /react-text --></td><td data-reactid="5006"><!-- react-text: 5007 -->Function(record, event)<!-- /react-text --></td><td data-reactid="5008"><!-- react-text: 5009 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="ColumnGroup" data-reactid="5010"><span data-reactid="5011"><!-- react-text: 5012 -->ColumnGroup<!-- /react-text --></span><a href="#ColumnGroup" class="anchor" data-reactid="5013">#</a></h3><table data-reactid="5014"><thead data-reactid="5015"><tr data-reactid="5016"><th data-reactid="5017"><!-- react-text: 5018 -->Property<!-- /react-text --></th><th data-reactid="5019"><!-- react-text: 5020 -->Description<!-- /react-text --></th><th data-reactid="5021"><!-- react-text: 5022 -->Type<!-- /react-text --></th><th data-reactid="5023"><!-- react-text: 5024 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="5025"><tr data-reactid="5026"><td data-reactid="5027"><!-- react-text: 5028 -->title<!-- /react-text --></td><td data-reactid="5029"><!-- react-text: 5030 -->title of the column group<!-- /react-text --></td><td data-reactid="5031"><!-- react-text: 5032 -->string<!-- /react-text --><!-- react-text: 5033 -->|<!-- /react-text --><!-- react-text: 5034 -->ReactNode<!-- /react-text --></td><td data-reactid="5035"><!-- react-text: 5036 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="rowSelection" data-reactid="5037"><span data-reactid="5038"><!-- react-text: 5039 -->rowSelection<!-- /react-text --></span><a href="#rowSelection" class="anchor" data-reactid="5040">#</a></h3><p data-reactid="5041"><!-- react-text: 5042 -->Properties for selection.<!-- /react-text --></p><table data-reactid="5043"><thead data-reactid="5044"><tr data-reactid="5045"><th data-reactid="5046"><!-- react-text: 5047 -->Property<!-- /react-text --></th><th data-reactid="5048"><!-- react-text: 5049 -->Description<!-- /react-text --></th><th data-reactid="5050"><!-- react-text: 5051 -->Type<!-- /react-text --></th><th data-reactid="5052"><!-- react-text: 5053 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="5054"><tr data-reactid="5055"><td data-reactid="5056"><!-- react-text: 5057 -->type<!-- /react-text --></td><td data-reactid="5058"><code data-reactid="5059"><!-- react-text: 5060 -->checkbox<!-- /react-text --></code><!-- react-text: 5061 --> or <!-- /react-text --><code data-reactid="5062"><!-- react-text: 5063 -->radio<!-- /react-text --></code></td><td data-reactid="5064"><!-- react-text: 5065 -->string<!-- /react-text --></td><td data-reactid="5066"><code data-reactid="5067"><!-- react-text: 5068 -->checkbox<!-- /react-text --></code></td></tr><tr data-reactid="5069"><td data-reactid="5070"><!-- react-text: 5071 -->selectedRowKeys<!-- /react-text --></td><td data-reactid="5072"><!-- react-text: 5073 -->controlled selected row keys<!-- /react-text --></td><td data-reactid="5074"><!-- react-text: 5075 -->string[]<!-- /react-text --></td><td data-reactid="5076"><!-- react-text: 5077 -->[]<!-- /react-text --></td></tr><tr data-reactid="5078"><td data-reactid="5079"><!-- react-text: 5080 -->onChange<!-- /react-text --></td><td data-reactid="5081"><!-- react-text: 5082 -->callback that is called when selected rows change<!-- /react-text --></td><td data-reactid="5083"><!-- react-text: 5084 -->Function(selectedRowKeys, selectedRows)<!-- /react-text --></td><td data-reactid="5085"><!-- react-text: 5086 -->-<!-- /react-text --></td></tr><tr data-reactid="5087"><td data-reactid="5088"><!-- react-text: 5089 -->getCheckboxProps<!-- /react-text --></td><td data-reactid="5090"><!-- react-text: 5091 -->get Checkbox or Radio props<!-- /react-text --></td><td data-reactid="5092"><!-- react-text: 5093 -->Function(record)<!-- /react-text --></td><td data-reactid="5094"><!-- react-text: 5095 -->-<!-- /react-text --></td></tr><tr data-reactid="5096"><td data-reactid="5097"><!-- react-text: 5098 -->onSelect<!-- /react-text --></td><td data-reactid="5099"><!-- react-text: 5100 -->callback that is called when select/deselect one row<!-- /react-text --></td><td data-reactid="5101"><!-- react-text: 5102 -->Function(record, selected, selectedRows)<!-- /react-text --></td><td data-reactid="5103"><!-- react-text: 5104 -->-<!-- /react-text --></td></tr><tr data-reactid="5105"><td data-reactid="5106"><!-- react-text: 5107 -->onSelectAll<!-- /react-text --></td><td data-reactid="5108"><!-- react-text: 5109 -->callback that is called when select/deselect all<!-- /react-text --></td><td data-reactid="5110"><!-- react-text: 5111 -->Function(selected, selectedRows, changeRows)<!-- /react-text --></td><td data-reactid="5112"><!-- react-text: 5113 -->-<!-- /react-text --></td></tr><tr data-reactid="5114"><td data-reactid="5115"><!-- react-text: 5116 -->onSelectInvert<!-- /react-text --></td><td data-reactid="5117"><!-- react-text: 5118 -->callback that is called when select invert<!-- /react-text --></td><td data-reactid="5119"><!-- react-text: 5120 -->Function(selectedRows)<!-- /react-text --></td><td data-reactid="5121"><!-- react-text: 5122 -->-<!-- /react-text --></td></tr><tr data-reactid="5123"><td data-reactid="5124"><!-- react-text: 5125 -->selections<!-- /react-text --></td><td data-reactid="5126"><!-- react-text: 5127 -->custom selection, <!-- /react-text --><a href="#rowSelection" data-reactid="5128"><!-- react-text: 5129 -->config<!-- /react-text --></a></td><td data-reactid="5130"><!-- react-text: 5131 -->object[]<!-- /react-text --></td><td data-reactid="5132"><!-- react-text: 5133 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="selection" data-reactid="5134"><span data-reactid="5135"><!-- react-text: 5136 -->selection<!-- /react-text --></span><a href="#selection" class="anchor" data-reactid="5137">#</a></h3><table data-reactid="5138"><thead data-reactid="5139"><tr data-reactid="5140"><th data-reactid="5141"><!-- react-text: 5142 -->Property<!-- /react-text --></th><th data-reactid="5143"><!-- react-text: 5144 -->Description<!-- /react-text --></th><th data-reactid="5145"><!-- react-text: 5146 -->Type<!-- /react-text --></th><th data-reactid="5147"><!-- react-text: 5148 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="5149"><tr data-reactid="5150"><td data-reactid="5151"><!-- react-text: 5152 -->key<!-- /react-text --></td><td data-reactid="5153"><!-- react-text: 5154 -->key of this selection<!-- /react-text --></td><td data-reactid="5155"><!-- react-text: 5156 -->string<!-- /react-text --></td><td data-reactid="5157"><!-- react-text: 5158 -->-<!-- /react-text --></td></tr><tr data-reactid="5159"><td data-reactid="5160"><!-- react-text: 5161 -->text<!-- /react-text --></td><td data-reactid="5162"><!-- react-text: 5163 -->display text is this selection<!-- /react-text --></td><td data-reactid="5164"><!-- react-text: 5165 -->string<!-- /react-text --><!-- react-text: 5166 -->|<!-- /react-text --><!-- react-text: 5167 -->React.ReactNode<!-- /react-text --></td><td data-reactid="5168"><!-- react-text: 5169 -->-<!-- /react-text --></td></tr><tr data-reactid="5170"><td data-reactid="5171"><!-- react-text: 5172 -->onSelect<!-- /react-text --></td><td data-reactid="5173"><!-- react-text: 5174 -->callback when click this selection<!-- /react-text --></td><td data-reactid="5175"><!-- react-text: 5176 -->Function(changeableRowKeys)<!-- /react-text --></td><td data-reactid="5177"><!-- react-text: 5178 -->-<!-- /react-text --></td></tr></tbody></table><h2 id="Using-in-TypeScript" data-reactid="5179"><span data-reactid="5180"><!-- react-text: 5181 -->Using in TypeScript<!-- /react-text --></span><a href="#Using-in-TypeScript" class="anchor" data-reactid="5182">#</a></h2><pre class="language-jsx" data-reactid="5183"><code data-reactid="5184"><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"><</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"><</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"><</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">// Use JSX style 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"><</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"><</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"><</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"></</span>UserTable</span><span class="token punctuation">></span></span></code></pre><h2 id="Note" data-reactid="5185"><span data-reactid="5186"><!-- react-text: 5187 -->Note<!-- /react-text --></span><a href="#Note" class="anchor" data-reactid="5188">#</a></h2><p data-reactid="5189"><!-- react-text: 5190 -->According to <!-- /react-text --><a href="https://facebook.github.io/react/docs/lists-and-keys.html#keys" data-reactid="5191"><!-- react-text: 5192 -->React documentation<!-- /react-text --></a><!-- react-text: 5193 -->, every child in array should be assigned a unique key. The value inside <!-- /react-text --><code data-reactid="5194"><!-- react-text: 5195 -->dataSource<!-- /react-text --></code><!-- react-text: 5196 --> and <!-- /react-text --><code data-reactid="5197"><!-- react-text: 5198 -->columns<!-- /react-text --></code><!-- react-text: 5199 --> should follow this in Table, and <!-- /react-text --><code data-reactid="5200"><!-- react-text: 5201 -->dataSource[i].key<!-- /react-text --></code><!-- react-text: 5202 --> would be treated as key value defaultly for <!-- /react-text --><code data-reactid="5203"><!-- react-text: 5204 -->dataSource<!-- /react-text --></code><!-- react-text: 5205 -->.<!-- /react-text --></p><p data-reactid="5206"><!-- react-text: 5207 -->If <!-- /react-text --><code data-reactid="5208"><!-- react-text: 5209 -->dataSource[i].key<!-- /react-text --></code><!-- react-text: 5210 --> is not existed, then you should specify the primary key of dataSource value via <!-- /react-text --><code data-reactid="5211"><!-- react-text: 5212 -->rowKey<!-- /react-text --></code><!-- react-text: 5213 -->. If not, warnings like above will show in browser console.<!-- /react-text --></p><p data-reactid="5214"><img src="https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png" data-reactid="5215"/></p><pre class="language-jsx" data-reactid="5216"><code data-reactid="5217"><span class="token comment" spellcheck="true">// primary key is uid</span>
|
||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">// or</span>
|
||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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="5218"><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="5219"><section class="prev-next-nav" data-reactid="5220"><a class="prev-page" href="/components/tooltip/" data-reactid="5221"><span data-reactid="5222">Tooltip</span><span class="chinese" data-reactid="5223"></span></a><a class="next-page" href="/components/tag/" data-reactid="5224"><span data-reactid="5225">Tag</span><span class="chinese" data-reactid="5226"></span></a></section></div></div></div><footer id="footer" data-reactid="5227"><ul data-reactid="5228"><li data-reactid="5229"><h2 data-reactid="5230"><i class="anticon anticon-github" data-reactid="5231"></i><!-- react-text: 5232 --> GitHub<!-- /react-text --></h2><div data-reactid="5233"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="5234"><span data-reactid="5235">Repository</span></a></div><div data-reactid="5236"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="5237"><span data-reactid="5238">Customize Theme</span></a></div><div data-reactid="5239"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="5240"><span data-reactid="5241">Awesome Ant Design</span></a></div></li><li data-reactid="5242"><h2 data-reactid="5243"><i class="anticon anticon-link" data-reactid="5244"></i><!-- react-text: 5245 --> <!-- /react-text --><span data-reactid="5246">Links</span></h2><div data-reactid="5247"><a href="http://mobile.ant.design" data-reactid="5248">Ant Design Mobile</a><span data-reactid="5249"> - </span><span data-reactid="5250">Mobile UI</span></div><div data-reactid="5251"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="5252">dva</a><!-- react-text: 5253 --> - <!-- /react-text --><span data-reactid="5254">Framework</span></div><div data-reactid="5255"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="5256">dva-cli</a><!-- react-text: 5257 --> -<!-- /react-text --><span data-reactid="5258">Developer Tools</span></div><div data-reactid="5259"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="5260">Egg</a><span data-reactid="5261"> - </span><span data-reactid="5262">Enterprise Node Framework</span></div><div data-reactid="5263"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="5264">AntV</a><span data-reactid="5265"> - </span><span data-reactid="5266">Data Visualization</span></div><div data-reactid="5267"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="5268">Ant Motion</a><span data-reactid="5269"> - </span><span data-reactid="5270">Motion Soluction</span></div><div data-reactid="5271"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="5272">AntD Library</a><span data-reactid="5273"> - </span><span data-reactid="5274">Axure library</span></div><div data-reactid="5275"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="5276">Ant UX</a><span data-reactid="5277"> - </span><span data-reactid="5278">Sitemap Template</span></div></li><li data-reactid="5279"><h2 data-reactid="5280"><i class="anticon anticon-customer-service" data-reactid="5281"></i><!-- react-text: 5282 --> <!-- /react-text --><span data-reactid="5283">Community</span></h2><div data-reactid="5284"><a href="/changelog" data-reactid="5285"><span data-reactid="5286">Change Log</span></a></div><div data-reactid="5287"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="5288"><span data-reactid="5289">FAQ</span></a></div><div data-reactid="5290"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="5291"><span data-reactid="5292">Chat Room</span></a></div><div data-reactid="5293"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="5294"><span data-reactid="5295">Bug Report</span></a></div><div data-reactid="5296"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="5297"><span data-reactid="5298">StackOverflow</span></a></div><div data-reactid="5299"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="5300"><span data-reactid="5301">SegmentFault</span></a></div></li><li data-reactid="5302"><h2 data-reactid="5303"><!-- react-text: 5304 -->Copyright © <!-- /react-text --><!-- react-text: 5305 -->2017<!-- /react-text --></h2><div data-reactid="5306"><span data-reactid="5307">Created by Ant UED</span></div><div data-reactid="5308"><!-- react-text: 5309 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="5310">BiSheng</a></div></li></ul></footer></div>
|
||
</div>
|
||
<script src="/common.js"></script>
|
||
<script src="/index.js"></script>
|
||
</body>
|
||
</html>
|