mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-19 09:47:31 +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="1610990692"><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="/docs/react/i18n" data-reactid="66">Internationalization</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="67"><a href="https://github.com/websemantics/awesome-ant-design" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="68"><!-- react-text: 69 -->Awesome Ant Design<!-- /react-text --><!-- react-text: 70 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="71"></i></a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="72"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="73"><h4 data-reactid="74">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="75"><li class=" ant-menu-item-group" data-reactid="76"><div class="ant-menu-item-group-title" data-reactid="77">General</div><ul class="ant-menu-item-group-list" data-reactid="78"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="79"><a href="/components/button/" data-reactid="80"><span data-reactid="81">Button</span><span class="chinese" data-reactid="82"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="83"><a href="/components/icon/" data-reactid="84"><span data-reactid="85">Icon</span><span class="chinese" data-reactid="86"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="87"><div class="ant-menu-item-group-title" data-reactid="88">Layout</div><ul class="ant-menu-item-group-list" data-reactid="89"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="90"><a href="/components/grid/" data-reactid="91"><span data-reactid="92">Grid</span><span class="chinese" data-reactid="93"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="94"><a href="/components/layout/" data-reactid="95"><span data-reactid="96">Layout</span><span class="chinese" data-reactid="97"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="98"><div class="ant-menu-item-group-title" data-reactid="99">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="100"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="101"><a href="/components/affix/" data-reactid="102"><span data-reactid="103">Affix</span><span class="chinese" data-reactid="104"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="105"><a href="/components/breadcrumb/" data-reactid="106"><span data-reactid="107">Breadcrumb</span><span class="chinese" data-reactid="108"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="109"><a href="/components/back-top/" data-reactid="110"><span data-reactid="111">BackTop</span><span class="chinese" data-reactid="112"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="113"><a href="/components/dropdown/" data-reactid="114"><span data-reactid="115">Dropdown</span><span class="chinese" data-reactid="116"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="117"><a href="/components/menu/" data-reactid="118"><span data-reactid="119">Menu</span><span class="chinese" data-reactid="120"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="121"><a href="/components/pagination/" data-reactid="122"><span data-reactid="123">Pagination</span><span class="chinese" data-reactid="124"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="125"><a href="/components/steps/" data-reactid="126"><span data-reactid="127">Steps</span><span class="chinese" data-reactid="128"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="129"><a href="/components/tabs/" data-reactid="130"><span data-reactid="131">Tabs</span><span class="chinese" data-reactid="132"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="133"><div class="ant-menu-item-group-title" data-reactid="134">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="135"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="136"><a href="/components/auto-complete/" data-reactid="137"><span data-reactid="138">AutoComplete</span><span class="chinese" data-reactid="139"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="140"><a href="/components/cascader/" data-reactid="141"><span data-reactid="142">Cascader</span><span class="chinese" data-reactid="143"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="144"><a href="/components/checkbox/" data-reactid="145"><span data-reactid="146">Checkbox</span><span class="chinese" data-reactid="147"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="148"><a href="/components/date-picker/" data-reactid="149"><span data-reactid="150">DatePicker</span><span class="chinese" data-reactid="151"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="152"><a href="/components/form/" data-reactid="153"><span data-reactid="154">Form</span><span class="chinese" data-reactid="155"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="156"><a href="/components/input-number/" data-reactid="157"><span data-reactid="158">InputNumber</span><span class="chinese" data-reactid="159"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="160"><a href="/components/input/" data-reactid="161"><span data-reactid="162">Input</span><span class="chinese" data-reactid="163"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="164"><a href="/components/mention/" data-reactid="165"><span data-reactid="166">Mention</span><span class="chinese" data-reactid="167"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="168"><a href="/components/rate/" data-reactid="169"><span data-reactid="170">Rate</span><span class="chinese" data-reactid="171"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="172"><a href="/components/radio/" data-reactid="173"><span data-reactid="174">Radio</span><span class="chinese" data-reactid="175"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="176"><a href="/components/select/" data-reactid="177"><span data-reactid="178">Select</span><span class="chinese" data-reactid="179"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="180"><a href="/components/slider/" data-reactid="181"><span data-reactid="182">Slider</span><span class="chinese" data-reactid="183"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="184"><a href="/components/switch/" data-reactid="185"><span data-reactid="186">Switch</span><span class="chinese" data-reactid="187"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="188"><a href="/components/tree-select/" data-reactid="189"><span data-reactid="190">TreeSelect</span><span class="chinese" data-reactid="191"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="192"><a href="/components/time-picker/" data-reactid="193"><span data-reactid="194">TimePicker</span><span class="chinese" data-reactid="195"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="196"><a href="/components/transfer/" data-reactid="197"><span data-reactid="198">Transfer</span><span class="chinese" data-reactid="199"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="200"><a href="/components/upload/" data-reactid="201"><span data-reactid="202">Upload</span><span class="chinese" data-reactid="203"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="204"><div class="ant-menu-item-group-title" data-reactid="205">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="206"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="207"><a href="/components/badge/" data-reactid="208"><span data-reactid="209">Badge</span><span class="chinese" data-reactid="210"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="211"><a href="/components/calendar/" data-reactid="212"><span data-reactid="213">Calendar</span><span class="chinese" data-reactid="214"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="215"><a href="/components/card/" data-reactid="216"><span data-reactid="217">Card</span><span class="chinese" data-reactid="218"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="219"><a href="/components/carousel/" data-reactid="220"><span data-reactid="221">Carousel</span><span class="chinese" data-reactid="222"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="223"><a href="/components/collapse/" data-reactid="224"><span data-reactid="225">Collapse</span><span class="chinese" data-reactid="226"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="227"><a href="/components/popover/" data-reactid="228"><span data-reactid="229">Popover</span><span class="chinese" data-reactid="230"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="231"><a href="/components/tooltip/" data-reactid="232"><span data-reactid="233">Tooltip</span><span class="chinese" data-reactid="234"></span></a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="235"><a href="/components/table/" data-reactid="236"><span data-reactid="237">Table</span><span class="chinese" data-reactid="238"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="239"><a href="/components/tag/" data-reactid="240"><span data-reactid="241">Tag</span><span class="chinese" data-reactid="242"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="243"><a href="/components/timeline/" data-reactid="244"><span data-reactid="245">Timeline</span><span class="chinese" data-reactid="246"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="247"><a href="/components/tree/" data-reactid="248"><span data-reactid="249">Tree</span><span class="chinese" data-reactid="250"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="251"><div class="ant-menu-item-group-title" data-reactid="252">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="253"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="254"><a href="/components/alert/" data-reactid="255"><span data-reactid="256">Alert</span><span class="chinese" data-reactid="257"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="258"><a href="/components/modal/" data-reactid="259"><span data-reactid="260">Modal</span><span class="chinese" data-reactid="261"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="262"><a href="/components/message/" data-reactid="263"><span data-reactid="264">Message</span><span class="chinese" data-reactid="265"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="266"><a href="/components/notification/" data-reactid="267"><span data-reactid="268">Notification</span><span class="chinese" data-reactid="269"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="270"><a href="/components/progress/" data-reactid="271"><span data-reactid="272">Progress</span><span class="chinese" data-reactid="273"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="274"><a href="/components/popconfirm/" data-reactid="275"><span data-reactid="276">Popconfirm</span><span class="chinese" data-reactid="277"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="278"><a href="/components/spin/" data-reactid="279"><span data-reactid="280">Spin</span><span class="chinese" data-reactid="281"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="282"><div class="ant-menu-item-group-title" data-reactid="283">Other</div><ul class="ant-menu-item-group-list" data-reactid="284"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="285"><a href="/components/anchor/" data-reactid="286"><span data-reactid="287">Anchor</span><span class="chinese" data-reactid="288"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="289"><a href="/components/locale-provider/" data-reactid="290"><span data-reactid="291">LocaleProvider</span><span class="chinese" data-reactid="292"></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="293"><article data-reactid="294"><div class="toc-affix" data-reactid="295"><div class="" data-reactid="296"><ul class="toc demos-anchor" data-reactid="297"><li title="Basic Usage" data-reactid="298"><a href="#components-table-demo-basic" data-reactid="299">Basic Usage</a></li><li title="JSX style API" data-reactid="300"><a href="#components-table-demo-jsx" data-reactid="301">JSX style API</a></li><li title="selection" data-reactid="302"><a href="#components-table-demo-row-selection" data-reactid="303">selection</a></li><li title="Selection and operation" data-reactid="304"><a href="#components-table-demo-row-selection-and-operation" data-reactid="305">Selection and operation</a></li><li title="Custom selection" data-reactid="306"><a href="#components-table-demo-row-selection-custom" data-reactid="307">Custom selection</a></li><li title="Reset filters and sorters" data-reactid="308"><a href="#components-table-demo-reset-filter" data-reactid="309">Reset filters and sorters</a></li><li title="Filter and sorter" data-reactid="310"><a href="#components-table-demo-head" data-reactid="311">Filter and sorter</a></li><li title="Customized filter panel" data-reactid="312"><a href="#components-table-demo-custom-filter-panel" data-reactid="313">Customized filter panel</a></li><li title="Ajax" data-reactid="314"><a href="#components-table-demo-ajax" data-reactid="315">Ajax</a></li><li title="size" data-reactid="316"><a href="#components-table-demo-size" data-reactid="317">size</a></li><li title="border, title and footer" data-reactid="318"><a href="#components-table-demo-bordered" data-reactid="319">border, title and footer</a></li><li title="Expandable Row" data-reactid="320"><a href="#components-table-demo-expand" data-reactid="321">Expandable Row</a></li><li title="colSpan and rowSpan" data-reactid="322"><a href="#components-table-demo-colspan-rowspan" data-reactid="323">colSpan and rowSpan</a></li><li title="Tree data" data-reactid="324"><a href="#components-table-demo-expand-children" data-reactid="325">Tree data</a></li><li title="Fixed Header" data-reactid="326"><a href="#components-table-demo-fixed-header" data-reactid="327">Fixed Header</a></li><li title="Fixed Columns" data-reactid="328"><a href="#components-table-demo-fixed-columns" data-reactid="329">Fixed Columns</a></li><li title="Fixed Columns and Header" data-reactid="330"><a href="#components-table-demo-fixed-columns-header" data-reactid="331">Fixed Columns and Header</a></li><li title="Grouping table head" data-reactid="332"><a href="#components-table-demo-grouping-columns" data-reactid="333">Grouping table head</a></li><li title="Editable Cells" data-reactid="334"><a href="#components-table-demo-edit-cell" data-reactid="335">Editable Cells</a></li><li title="Editable Rows" data-reactid="336"><a href="#components-table-demo-edit-row" data-reactid="337">Editable Rows</a></li><li title="Nested tables" data-reactid="338"><a href="#components-table-demo-nested-table" data-reactid="339">Nested tables</a></li><li title="Dynamic Settings" data-reactid="340"><a href="#components-table-demo-dynamic-settings" data-reactid="341">Dynamic Settings</a></li></ul></div></div><section class="markdown" data-reactid="342"><h1 data-reactid="343"><!-- react-text: 344 -->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="345"><i class="anticon anticon-edit" data-reactid="346"></i></a></h1><section class="markdown" data-reactid="347"><p data-reactid="348"><!-- react-text: 349 -->A table displays rows data.<!-- /react-text --></p><h2 id="When-To-Use" data-reactid="350"><span data-reactid="351"><!-- react-text: 352 -->When To Use<!-- /react-text --></span><a href="#When-To-Use" class="anchor" data-reactid="353">#</a></h2><ul data-reactid="354"><li data-reactid="355"><p data-reactid="356"><!-- react-text: 357 -->To display a collection of structured data.<!-- /react-text --></p></li><li data-reactid="358"><p data-reactid="359"><!-- react-text: 360 -->To sort, search, paginate, filter data.<!-- /react-text --></p></li></ul><h2 id="How-To-Use" data-reactid="361"><span data-reactid="362"><!-- react-text: 363 -->How To Use<!-- /react-text --></span><a href="#How-To-Use" class="anchor" data-reactid="364">#</a></h2><p data-reactid="365"><!-- react-text: 366 -->Specify <!-- /react-text --><code data-reactid="367"><!-- react-text: 368 -->dataSource<!-- /react-text --></code><!-- react-text: 369 --> of Table whose value is an array of data.<!-- /react-text --></p><pre class="language-jsx" data-reactid="370"><code data-reactid="371"><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="372"><span data-reactid="373">Examples</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="374"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="375"><div style="padding-left:8px;padding-right:8px;" class="ant-col-24 code-boxes-col-1-1" data-reactid="376"><section class="code-box" id="components-table-demo-basic" data-reactid="377"><section class="code-box-demo" data-reactid="378"><div class="ant-table-wrapper" data-reactid="379"><div class="ant-spin-nested-loading" data-reactid="380"><div class="ant-spin-container" data-reactid="381"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="382"><div class="ant-table-content" data-reactid="383"><div class="ant-table-body" data-reactid="384"><table class="" data-reactid="385"><colgroup data-reactid="386"><col data-reactid="387"/><col data-reactid="388"/><col data-reactid="389"/><col data-reactid="390"/></colgroup><thead class="ant-table-thead" data-reactid="391"><tr data-reactid="392"><th class="" data-reactid="393"><span data-reactid="394"><!-- react-text: 395 -->Name<!-- /react-text --></span></th><th class="" data-reactid="396"><span data-reactid="397"><!-- react-text: 398 -->Age<!-- /react-text --></span></th><th class="" data-reactid="399"><span data-reactid="400"><!-- react-text: 401 -->Address<!-- /react-text --></span></th><th class="" data-reactid="402"><span data-reactid="403"><!-- react-text: 404 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="405"><tr class="ant-table-row ant-table-row-level-0" data-reactid="406"><td class="" data-reactid="407"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="408"></span><!-- react-empty: 409 --><a href="#" data-reactid="410">John Brown</a></td><td class="" data-reactid="411"><!-- react-text: 412 -->32<!-- /react-text --></td><td class="" data-reactid="413"><!-- react-text: 414 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="415"><span data-reactid="416"><a href="#" data-reactid="417"><!-- react-text: 418 -->Action 一 <!-- /react-text --><!-- react-text: 419 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="420"></span><a href="#" data-reactid="421">Delete</a><span class="ant-divider" data-reactid="422"></span><a href="#" class="ant-dropdown-link" data-reactid="423"><!-- react-text: 424 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="425"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="426"><td class="" data-reactid="427"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="428"></span><!-- react-empty: 429 --><a href="#" data-reactid="430">Jim Green</a></td><td class="" data-reactid="431"><!-- react-text: 432 -->42<!-- /react-text --></td><td class="" data-reactid="433"><!-- react-text: 434 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="435"><span data-reactid="436"><a href="#" data-reactid="437"><!-- react-text: 438 -->Action 一 <!-- /react-text --><!-- react-text: 439 -->Jim Green<!-- /react-text --></a><span class="ant-divider" data-reactid="440"></span><a href="#" data-reactid="441">Delete</a><span class="ant-divider" data-reactid="442"></span><a href="#" class="ant-dropdown-link" data-reactid="443"><!-- react-text: 444 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="445"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="446"><td class="" data-reactid="447"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="448"></span><!-- react-empty: 449 --><a href="#" data-reactid="450">Joe Black</a></td><td class="" data-reactid="451"><!-- react-text: 452 -->32<!-- /react-text --></td><td class="" data-reactid="453"><!-- react-text: 454 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="455"><span data-reactid="456"><a href="#" data-reactid="457"><!-- react-text: 458 -->Action 一 <!-- /react-text --><!-- react-text: 459 -->Joe Black<!-- /react-text --></a><span class="ant-divider" data-reactid="460"></span><a href="#" data-reactid="461">Delete</a><span class="ant-divider" data-reactid="462"></span><a href="#" class="ant-dropdown-link" data-reactid="463"><!-- react-text: 464 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="465"></i></a></span></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="466"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="467"><a data-reactid="468"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="469"><a data-reactid="470">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="471"><a data-reactid="472"></a></li><!-- react-empty: 473 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="474"><div class="code-box-title" data-reactid="475"><a href="#components-table-demo-basic" data-reactid="476">Basic Usage</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/basic.md" data-reactid="477"><i class="anticon anticon-edit" data-reactid="478"></i></a></div><div data-reactid="479"><p data-reactid="480"><!-- react-text: 481 -->Simple table with actions.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="482"></i></section><section class="highlight-wrapper" data-reactid="483"><div class="highlight" data-reactid="484"><i class="anticon anticon-copy code-box-code-copy" data-reactid="485"></i><pre class="language-jsx" data-reactid="486"><code data-reactid="487"><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="488"><section class="code-box-demo" data-reactid="489"><div class="ant-table-wrapper" data-reactid="490"><div class="ant-spin-nested-loading" data-reactid="491"><div class="ant-spin-container" data-reactid="492"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="493"><div class="ant-table-content" data-reactid="494"><div class="ant-table-body" data-reactid="495"><table class="" data-reactid="496"><colgroup data-reactid="497"><col data-reactid="498"/><col data-reactid="499"/><col data-reactid="500"/><col data-reactid="501"/><col data-reactid="502"/></colgroup><thead class="ant-table-thead" data-reactid="503"><tr data-reactid="504"><th class="" colspan="2" data-reactid="505"><span data-reactid="506"><!-- react-text: 507 -->Name<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="508"><span data-reactid="509"><!-- react-text: 510 -->Age<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="511"><span data-reactid="512"><!-- react-text: 513 -->Address<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="514"><span data-reactid="515"><!-- react-text: 516 -->Action<!-- /react-text --></span></th></tr><tr data-reactid="517"><th class="" data-reactid="518"><span data-reactid="519"><!-- react-text: 520 -->First Name<!-- /react-text --></span></th><th class="" data-reactid="521"><span data-reactid="522"><!-- react-text: 523 -->Last Name<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="524"><tr class="ant-table-row ant-table-row-level-0" data-reactid="525"><td class="" data-reactid="526"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="527"></span><!-- react-empty: 528 --><!-- react-text: 529 -->John<!-- /react-text --></td><td class="" data-reactid="530"><!-- react-text: 531 -->Brown<!-- /react-text --></td><td class="" data-reactid="532"><!-- react-text: 533 -->32<!-- /react-text --></td><td class="" data-reactid="534"><!-- react-text: 535 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="536"><span data-reactid="537"><a href="#" data-reactid="538"><!-- react-text: 539 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="540"></span><a href="#" data-reactid="541">Delete</a><span class="ant-divider" data-reactid="542"></span><a href="#" class="ant-dropdown-link" data-reactid="543"><!-- react-text: 544 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="545"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="546"><td class="" data-reactid="547"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="548"></span><!-- react-empty: 549 --><!-- react-text: 550 -->Jim<!-- /react-text --></td><td class="" data-reactid="551"><!-- react-text: 552 -->Green<!-- /react-text --></td><td class="" data-reactid="553"><!-- react-text: 554 -->42<!-- /react-text --></td><td class="" data-reactid="555"><!-- react-text: 556 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="557"><span data-reactid="558"><a href="#" data-reactid="559"><!-- react-text: 560 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="561"></span><a href="#" data-reactid="562">Delete</a><span class="ant-divider" data-reactid="563"></span><a href="#" class="ant-dropdown-link" data-reactid="564"><!-- react-text: 565 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="566"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="567"><td class="" data-reactid="568"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="569"></span><!-- react-empty: 570 --><!-- react-text: 571 -->Joe<!-- /react-text --></td><td class="" data-reactid="572"><!-- react-text: 573 -->Black<!-- /react-text --></td><td class="" data-reactid="574"><!-- react-text: 575 -->32<!-- /react-text --></td><td class="" data-reactid="576"><!-- react-text: 577 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="578"><span data-reactid="579"><a href="#" data-reactid="580"><!-- react-text: 581 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="582"></span><a href="#" data-reactid="583">Delete</a><span class="ant-divider" data-reactid="584"></span><a href="#" class="ant-dropdown-link" data-reactid="585"><!-- react-text: 586 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="587"></i></a></span></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="588"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="589"><a data-reactid="590"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="591"><a data-reactid="592">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="593"><a data-reactid="594"></a></li><!-- react-empty: 595 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="596"><div class="code-box-title" data-reactid="597"><a href="#components-table-demo-jsx" data-reactid="598">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="599"><i class="anticon anticon-edit" data-reactid="600"></i></a></div><div data-reactid="601"><p data-reactid="602"><!-- react-text: 603 -->Using JSX style API (introduced in 2.5.0)<!-- /react-text --></p><blockquote data-reactid="604"><p data-reactid="605"><!-- react-text: 606 -->Since this is just a syntax sugar for the prop <!-- /react-text --><code data-reactid="607"><!-- react-text: 608 -->columns<!-- /react-text --></code><!-- react-text: 609 -->, so that you can't compose <!-- /react-text --><code data-reactid="610"><!-- react-text: 611 -->Column<!-- /react-text --></code><!-- react-text: 612 --> and <!-- /react-text --><code data-reactid="613"><!-- react-text: 614 -->ColumnGroup<!-- /react-text --></code><!-- react-text: 615 --> with other Components.<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="616"></i></section><section class="highlight-wrapper" data-reactid="617"><div class="highlight" data-reactid="618"><i class="anticon anticon-copy code-box-code-copy" data-reactid="619"></i><pre class="language-jsx" data-reactid="620"><code data-reactid="621"><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="622"><section class="code-box-demo" data-reactid="623"><div class="ant-table-wrapper" data-reactid="624"><div class="ant-spin-nested-loading" data-reactid="625"><div class="ant-spin-container" data-reactid="626"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="627"><div class="ant-table-content" data-reactid="628"><div class="ant-table-body" data-reactid="629"><table class="" data-reactid="630"><colgroup data-reactid="631"><col data-reactid="632"/><col data-reactid="633"/><col data-reactid="634"/><col data-reactid="635"/></colgroup><thead class="ant-table-thead" data-reactid="636"><tr data-reactid="637"><th class="ant-table-selection-column" data-reactid="638"><span data-reactid="639"><div class="ant-table-selection" data-reactid="640"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="641"><span class="ant-checkbox" data-reactid="642"><input type="checkbox" class="ant-checkbox-input" data-reactid="643"/><span class="ant-checkbox-inner" data-reactid="644"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="645"><i class="anticon anticon-down" data-reactid="646"></i></div></div></span></th><th class="" data-reactid="647"><span data-reactid="648"><!-- react-text: 649 -->Name<!-- /react-text --></span></th><th class="" data-reactid="650"><span data-reactid="651"><!-- react-text: 652 -->Age<!-- /react-text --></span></th><th class="" data-reactid="653"><span data-reactid="654"><!-- react-text: 655 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="656"><tr class="ant-table-row ant-table-row-level-0" data-reactid="657"><td class="ant-table-selection-column" data-reactid="658"><span data-reactid="659"><label class="ant-checkbox-wrapper" data-reactid="660"><span class="ant-checkbox" data-reactid="661"><input type="checkbox" class="ant-checkbox-input" data-reactid="662"/><span class="ant-checkbox-inner" data-reactid="663"></span></span></label></span></td><td class="" data-reactid="664"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="665"></span><!-- react-empty: 666 --><a href="#" data-reactid="667">John Brown</a></td><td class="" data-reactid="668"><!-- react-text: 669 -->32<!-- /react-text --></td><td class="" data-reactid="670"><!-- react-text: 671 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="672"><td class="ant-table-selection-column" data-reactid="673"><span data-reactid="674"><label class="ant-checkbox-wrapper" data-reactid="675"><span class="ant-checkbox" data-reactid="676"><input type="checkbox" class="ant-checkbox-input" data-reactid="677"/><span class="ant-checkbox-inner" data-reactid="678"></span></span></label></span></td><td class="" data-reactid="679"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="680"></span><!-- react-empty: 681 --><a href="#" data-reactid="682">Jim Green</a></td><td class="" data-reactid="683"><!-- react-text: 684 -->42<!-- /react-text --></td><td class="" data-reactid="685"><!-- react-text: 686 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="687"><td class="ant-table-selection-column" data-reactid="688"><span data-reactid="689"><label class="ant-checkbox-wrapper" data-reactid="690"><span class="ant-checkbox" data-reactid="691"><input type="checkbox" class="ant-checkbox-input" data-reactid="692"/><span class="ant-checkbox-inner" data-reactid="693"></span></span></label></span></td><td class="" data-reactid="694"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="695"></span><!-- react-empty: 696 --><a href="#" data-reactid="697">Joe Black</a></td><td class="" data-reactid="698"><!-- react-text: 699 -->32<!-- /react-text --></td><td class="" data-reactid="700"><!-- react-text: 701 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="702"><td class="ant-table-selection-column" data-reactid="703"><span data-reactid="704"><label class="ant-checkbox-wrapper" data-reactid="705"><span class="ant-checkbox ant-checkbox-disabled" data-reactid="706"><input type="checkbox" disabled="" class="ant-checkbox-input" data-reactid="707"/><span class="ant-checkbox-inner" data-reactid="708"></span></span></label></span></td><td class="" data-reactid="709"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="710"></span><!-- react-empty: 711 --><a href="#" data-reactid="712">Disabled User</a></td><td class="" data-reactid="713"><!-- react-text: 714 -->99<!-- /react-text --></td><td class="" data-reactid="715"><!-- react-text: 716 -->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="717"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="718"><a data-reactid="719"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="720"><a data-reactid="721">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="722"><a data-reactid="723"></a></li><!-- react-empty: 724 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="725"><div class="code-box-title" data-reactid="726"><a href="#components-table-demo-row-selection" data-reactid="727">selection</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/row-selection.md" data-reactid="728"><i class="anticon anticon-edit" data-reactid="729"></i></a></div><div data-reactid="730"><p data-reactid="731"><!-- react-text: 732 -->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="733"></i></section><section class="highlight-wrapper" data-reactid="734"><div class="highlight" data-reactid="735"><i class="anticon anticon-copy code-box-code-copy" data-reactid="736"></i><pre class="language-jsx" data-reactid="737"><code data-reactid="738"><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="739"><section class="code-box-demo" data-reactid="740"><div data-reactid="741"><div style="margin-bottom:16px;" data-reactid="742"><button disabled="" type="button" class="ant-btn ant-btn-primary" data-reactid="743"><span data-reactid="744">Reload</span></button><span style="margin-left:8px;" data-reactid="745"></span></div><div class="ant-table-wrapper" data-reactid="746"><div class="ant-spin-nested-loading" data-reactid="747"><div class="ant-spin-container" data-reactid="748"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="749"><div class="ant-table-content" data-reactid="750"><div class="ant-table-body" data-reactid="751"><table class="" data-reactid="752"><colgroup data-reactid="753"><col data-reactid="754"/><col data-reactid="755"/><col data-reactid="756"/><col data-reactid="757"/></colgroup><thead class="ant-table-thead" data-reactid="758"><tr data-reactid="759"><th class="ant-table-selection-column" data-reactid="760"><span data-reactid="761"><div class="ant-table-selection" data-reactid="762"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="763"><span class="ant-checkbox" data-reactid="764"><input type="checkbox" class="ant-checkbox-input" data-reactid="765"/><span class="ant-checkbox-inner" data-reactid="766"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="767"><i class="anticon anticon-down" data-reactid="768"></i></div></div></span></th><th class="" data-reactid="769"><span data-reactid="770"><!-- react-text: 771 -->Name<!-- /react-text --></span></th><th class="" data-reactid="772"><span data-reactid="773"><!-- react-text: 774 -->Age<!-- /react-text --></span></th><th class="" data-reactid="775"><span data-reactid="776"><!-- react-text: 777 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="778"><tr class="ant-table-row ant-table-row-level-0" data-reactid="779"><td class="ant-table-selection-column" data-reactid="780"><span data-reactid="781"><label class="ant-checkbox-wrapper" data-reactid="782"><span class="ant-checkbox" data-reactid="783"><input type="checkbox" class="ant-checkbox-input" data-reactid="784"/><span class="ant-checkbox-inner" data-reactid="785"></span></span></label></span></td><td class="" data-reactid="786"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="787"></span><!-- react-empty: 788 --><!-- react-text: 789 -->Edward King 0<!-- /react-text --></td><td class="" data-reactid="790"><!-- react-text: 791 -->32<!-- /react-text --></td><td class="" data-reactid="792"><!-- react-text: 793 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="794"><td class="ant-table-selection-column" data-reactid="795"><span data-reactid="796"><label class="ant-checkbox-wrapper" data-reactid="797"><span class="ant-checkbox" data-reactid="798"><input type="checkbox" class="ant-checkbox-input" data-reactid="799"/><span class="ant-checkbox-inner" data-reactid="800"></span></span></label></span></td><td class="" data-reactid="801"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="802"></span><!-- react-empty: 803 --><!-- react-text: 804 -->Edward King 1<!-- /react-text --></td><td class="" data-reactid="805"><!-- react-text: 806 -->32<!-- /react-text --></td><td class="" data-reactid="807"><!-- react-text: 808 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="809"><td class="ant-table-selection-column" data-reactid="810"><span data-reactid="811"><label class="ant-checkbox-wrapper" data-reactid="812"><span class="ant-checkbox" data-reactid="813"><input type="checkbox" class="ant-checkbox-input" data-reactid="814"/><span class="ant-checkbox-inner" data-reactid="815"></span></span></label></span></td><td class="" data-reactid="816"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="817"></span><!-- react-empty: 818 --><!-- react-text: 819 -->Edward King 2<!-- /react-text --></td><td class="" data-reactid="820"><!-- react-text: 821 -->32<!-- /react-text --></td><td class="" data-reactid="822"><!-- react-text: 823 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="824"><td class="ant-table-selection-column" data-reactid="825"><span data-reactid="826"><label class="ant-checkbox-wrapper" data-reactid="827"><span class="ant-checkbox" data-reactid="828"><input type="checkbox" class="ant-checkbox-input" data-reactid="829"/><span class="ant-checkbox-inner" data-reactid="830"></span></span></label></span></td><td class="" data-reactid="831"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="832"></span><!-- react-empty: 833 --><!-- react-text: 834 -->Edward King 3<!-- /react-text --></td><td class="" data-reactid="835"><!-- react-text: 836 -->32<!-- /react-text --></td><td class="" data-reactid="837"><!-- react-text: 838 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="839"><td class="ant-table-selection-column" data-reactid="840"><span data-reactid="841"><label class="ant-checkbox-wrapper" data-reactid="842"><span class="ant-checkbox" data-reactid="843"><input type="checkbox" class="ant-checkbox-input" data-reactid="844"/><span class="ant-checkbox-inner" data-reactid="845"></span></span></label></span></td><td class="" data-reactid="846"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="847"></span><!-- react-empty: 848 --><!-- react-text: 849 -->Edward King 4<!-- /react-text --></td><td class="" data-reactid="850"><!-- react-text: 851 -->32<!-- /react-text --></td><td class="" data-reactid="852"><!-- react-text: 853 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="854"><td class="ant-table-selection-column" data-reactid="855"><span data-reactid="856"><label class="ant-checkbox-wrapper" data-reactid="857"><span class="ant-checkbox" data-reactid="858"><input type="checkbox" class="ant-checkbox-input" data-reactid="859"/><span class="ant-checkbox-inner" data-reactid="860"></span></span></label></span></td><td class="" data-reactid="861"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="862"></span><!-- react-empty: 863 --><!-- react-text: 864 -->Edward King 5<!-- /react-text --></td><td class="" data-reactid="865"><!-- react-text: 866 -->32<!-- /react-text --></td><td class="" data-reactid="867"><!-- react-text: 868 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="869"><td class="ant-table-selection-column" data-reactid="870"><span data-reactid="871"><label class="ant-checkbox-wrapper" data-reactid="872"><span class="ant-checkbox" data-reactid="873"><input type="checkbox" class="ant-checkbox-input" data-reactid="874"/><span class="ant-checkbox-inner" data-reactid="875"></span></span></label></span></td><td class="" data-reactid="876"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="877"></span><!-- react-empty: 878 --><!-- react-text: 879 -->Edward King 6<!-- /react-text --></td><td class="" data-reactid="880"><!-- react-text: 881 -->32<!-- /react-text --></td><td class="" data-reactid="882"><!-- react-text: 883 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="884"><td class="ant-table-selection-column" data-reactid="885"><span data-reactid="886"><label class="ant-checkbox-wrapper" data-reactid="887"><span class="ant-checkbox" data-reactid="888"><input type="checkbox" class="ant-checkbox-input" data-reactid="889"/><span class="ant-checkbox-inner" data-reactid="890"></span></span></label></span></td><td class="" data-reactid="891"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="892"></span><!-- react-empty: 893 --><!-- react-text: 894 -->Edward King 7<!-- /react-text --></td><td class="" data-reactid="895"><!-- react-text: 896 -->32<!-- /react-text --></td><td class="" data-reactid="897"><!-- react-text: 898 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="899"><td class="ant-table-selection-column" data-reactid="900"><span data-reactid="901"><label class="ant-checkbox-wrapper" data-reactid="902"><span class="ant-checkbox" data-reactid="903"><input type="checkbox" class="ant-checkbox-input" data-reactid="904"/><span class="ant-checkbox-inner" data-reactid="905"></span></span></label></span></td><td class="" data-reactid="906"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="907"></span><!-- react-empty: 908 --><!-- react-text: 909 -->Edward King 8<!-- /react-text --></td><td class="" data-reactid="910"><!-- react-text: 911 -->32<!-- /react-text --></td><td class="" data-reactid="912"><!-- react-text: 913 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="914"><td class="ant-table-selection-column" data-reactid="915"><span data-reactid="916"><label class="ant-checkbox-wrapper" data-reactid="917"><span class="ant-checkbox" data-reactid="918"><input type="checkbox" class="ant-checkbox-input" data-reactid="919"/><span class="ant-checkbox-inner" data-reactid="920"></span></span></label></span></td><td class="" data-reactid="921"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="922"></span><!-- react-empty: 923 --><!-- react-text: 924 -->Edward King 9<!-- /react-text --></td><td class="" data-reactid="925"><!-- react-text: 926 -->32<!-- /react-text --></td><td class="" data-reactid="927"><!-- react-text: 928 -->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="929"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="930"><a data-reactid="931"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="932"><a data-reactid="933">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="934"><a data-reactid="935">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="936"><a data-reactid="937">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="938"><a data-reactid="939">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" data-reactid="940"><a data-reactid="941">5</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="942"><a data-reactid="943"></a></li><!-- react-empty: 944 --></ul></div></div></div></div></section><section class="code-box-meta markdown" data-reactid="945"><div class="code-box-title" data-reactid="946"><a href="#components-table-demo-row-selection-and-operation" data-reactid="947">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="948"><i class="anticon anticon-edit" data-reactid="949"></i></a></div><div data-reactid="950"><p data-reactid="951"><!-- react-text: 952 -->To perform operations and clear selections after selecting some rows, use <!-- /react-text --><code data-reactid="953"><!-- react-text: 954 -->rowSelection.selectedRowKeys<!-- /react-text --></code><!-- react-text: 955 --> to control selected rows.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="956"></i></section><section class="highlight-wrapper" data-reactid="957"><div class="highlight" data-reactid="958"><i class="anticon anticon-copy code-box-code-copy" data-reactid="959"></i><pre class="language-jsx" data-reactid="960"><code data-reactid="961"><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="962"><section class="code-box-demo" data-reactid="963"><div class="ant-table-wrapper" data-reactid="964"><div class="ant-spin-nested-loading" data-reactid="965"><div class="ant-spin-container" data-reactid="966"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="967"><div class="ant-table-content" data-reactid="968"><div class="ant-table-body" data-reactid="969"><table class="" data-reactid="970"><colgroup data-reactid="971"><col data-reactid="972"/><col data-reactid="973"/><col data-reactid="974"/><col data-reactid="975"/></colgroup><thead class="ant-table-thead" data-reactid="976"><tr data-reactid="977"><th class="ant-table-selection-column" data-reactid="978"><span data-reactid="979"><div class="ant-table-selection" data-reactid="980"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="981"><span class="ant-checkbox" data-reactid="982"><input type="checkbox" class="ant-checkbox-input" data-reactid="983"/><span class="ant-checkbox-inner" data-reactid="984"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="985"><i class="anticon anticon-down" data-reactid="986"></i></div></div></span></th><th class="" data-reactid="987"><span data-reactid="988"><!-- react-text: 989 -->Name<!-- /react-text --></span></th><th class="" data-reactid="990"><span data-reactid="991"><!-- react-text: 992 -->Age<!-- /react-text --></span></th><th class="" data-reactid="993"><span data-reactid="994"><!-- react-text: 995 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="996"><tr class="ant-table-row ant-table-row-level-0" data-reactid="997"><td class="ant-table-selection-column" data-reactid="998"><span data-reactid="999"><label class="ant-checkbox-wrapper" data-reactid="1000"><span class="ant-checkbox" data-reactid="1001"><input type="checkbox" class="ant-checkbox-input" data-reactid="1002"/><span class="ant-checkbox-inner" data-reactid="1003"></span></span></label></span></td><td class="" data-reactid="1004"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1005"></span><!-- react-empty: 1006 --><!-- react-text: 1007 -->Edward King 0<!-- /react-text --></td><td class="" data-reactid="1008"><!-- react-text: 1009 -->32<!-- /react-text --></td><td class="" data-reactid="1010"><!-- react-text: 1011 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1012"><td class="ant-table-selection-column" data-reactid="1013"><span data-reactid="1014"><label class="ant-checkbox-wrapper" data-reactid="1015"><span class="ant-checkbox" data-reactid="1016"><input type="checkbox" class="ant-checkbox-input" data-reactid="1017"/><span class="ant-checkbox-inner" data-reactid="1018"></span></span></label></span></td><td class="" data-reactid="1019"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1020"></span><!-- react-empty: 1021 --><!-- react-text: 1022 -->Edward King 1<!-- /react-text --></td><td class="" data-reactid="1023"><!-- react-text: 1024 -->32<!-- /react-text --></td><td class="" data-reactid="1025"><!-- react-text: 1026 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1027"><td class="ant-table-selection-column" data-reactid="1028"><span data-reactid="1029"><label class="ant-checkbox-wrapper" data-reactid="1030"><span class="ant-checkbox" data-reactid="1031"><input type="checkbox" class="ant-checkbox-input" data-reactid="1032"/><span class="ant-checkbox-inner" data-reactid="1033"></span></span></label></span></td><td class="" data-reactid="1034"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1035"></span><!-- react-empty: 1036 --><!-- react-text: 1037 -->Edward King 2<!-- /react-text --></td><td class="" data-reactid="1038"><!-- react-text: 1039 -->32<!-- /react-text --></td><td class="" data-reactid="1040"><!-- react-text: 1041 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1042"><td class="ant-table-selection-column" data-reactid="1043"><span data-reactid="1044"><label class="ant-checkbox-wrapper" data-reactid="1045"><span class="ant-checkbox" data-reactid="1046"><input type="checkbox" class="ant-checkbox-input" data-reactid="1047"/><span class="ant-checkbox-inner" data-reactid="1048"></span></span></label></span></td><td class="" data-reactid="1049"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1050"></span><!-- react-empty: 1051 --><!-- react-text: 1052 -->Edward King 3<!-- /react-text --></td><td class="" data-reactid="1053"><!-- react-text: 1054 -->32<!-- /react-text --></td><td class="" data-reactid="1055"><!-- react-text: 1056 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1057"><td class="ant-table-selection-column" data-reactid="1058"><span data-reactid="1059"><label class="ant-checkbox-wrapper" data-reactid="1060"><span class="ant-checkbox" data-reactid="1061"><input type="checkbox" class="ant-checkbox-input" data-reactid="1062"/><span class="ant-checkbox-inner" data-reactid="1063"></span></span></label></span></td><td class="" data-reactid="1064"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1065"></span><!-- react-empty: 1066 --><!-- react-text: 1067 -->Edward King 4<!-- /react-text --></td><td class="" data-reactid="1068"><!-- react-text: 1069 -->32<!-- /react-text --></td><td class="" data-reactid="1070"><!-- react-text: 1071 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1072"><td class="ant-table-selection-column" data-reactid="1073"><span data-reactid="1074"><label class="ant-checkbox-wrapper" data-reactid="1075"><span class="ant-checkbox" data-reactid="1076"><input type="checkbox" class="ant-checkbox-input" data-reactid="1077"/><span class="ant-checkbox-inner" data-reactid="1078"></span></span></label></span></td><td class="" data-reactid="1079"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1080"></span><!-- react-empty: 1081 --><!-- react-text: 1082 -->Edward King 5<!-- /react-text --></td><td class="" data-reactid="1083"><!-- react-text: 1084 -->32<!-- /react-text --></td><td class="" data-reactid="1085"><!-- react-text: 1086 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1087"><td class="ant-table-selection-column" data-reactid="1088"><span data-reactid="1089"><label class="ant-checkbox-wrapper" data-reactid="1090"><span class="ant-checkbox" data-reactid="1091"><input type="checkbox" class="ant-checkbox-input" data-reactid="1092"/><span class="ant-checkbox-inner" data-reactid="1093"></span></span></label></span></td><td class="" data-reactid="1094"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1095"></span><!-- react-empty: 1096 --><!-- react-text: 1097 -->Edward King 6<!-- /react-text --></td><td class="" data-reactid="1098"><!-- react-text: 1099 -->32<!-- /react-text --></td><td class="" data-reactid="1100"><!-- react-text: 1101 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1102"><td class="ant-table-selection-column" data-reactid="1103"><span data-reactid="1104"><label class="ant-checkbox-wrapper" data-reactid="1105"><span class="ant-checkbox" data-reactid="1106"><input type="checkbox" class="ant-checkbox-input" data-reactid="1107"/><span class="ant-checkbox-inner" data-reactid="1108"></span></span></label></span></td><td class="" data-reactid="1109"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1110"></span><!-- react-empty: 1111 --><!-- react-text: 1112 -->Edward King 7<!-- /react-text --></td><td class="" data-reactid="1113"><!-- react-text: 1114 -->32<!-- /react-text --></td><td class="" data-reactid="1115"><!-- react-text: 1116 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1117"><td class="ant-table-selection-column" data-reactid="1118"><span data-reactid="1119"><label class="ant-checkbox-wrapper" data-reactid="1120"><span class="ant-checkbox" data-reactid="1121"><input type="checkbox" class="ant-checkbox-input" data-reactid="1122"/><span class="ant-checkbox-inner" data-reactid="1123"></span></span></label></span></td><td class="" data-reactid="1124"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1125"></span><!-- react-empty: 1126 --><!-- react-text: 1127 -->Edward King 8<!-- /react-text --></td><td class="" data-reactid="1128"><!-- react-text: 1129 -->32<!-- /react-text --></td><td class="" data-reactid="1130"><!-- react-text: 1131 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1132"><td class="ant-table-selection-column" data-reactid="1133"><span data-reactid="1134"><label class="ant-checkbox-wrapper" data-reactid="1135"><span class="ant-checkbox" data-reactid="1136"><input type="checkbox" class="ant-checkbox-input" data-reactid="1137"/><span class="ant-checkbox-inner" data-reactid="1138"></span></span></label></span></td><td class="" data-reactid="1139"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1140"></span><!-- react-empty: 1141 --><!-- react-text: 1142 -->Edward King 9<!-- /react-text --></td><td class="" data-reactid="1143"><!-- react-text: 1144 -->32<!-- /react-text --></td><td class="" data-reactid="1145"><!-- react-text: 1146 -->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="1147"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1148"><a data-reactid="1149"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1150"><a data-reactid="1151">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="1152"><a data-reactid="1153">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="1154"><a data-reactid="1155">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="1156"><a data-reactid="1157">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" data-reactid="1158"><a data-reactid="1159">5</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="1160"><a data-reactid="1161"></a></li><!-- react-empty: 1162 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1163"><div class="code-box-title" data-reactid="1164"><a href="#components-table-demo-row-selection-custom" data-reactid="1165">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="1166"><i class="anticon anticon-edit" data-reactid="1167"></i></a></div><div data-reactid="1168"><p data-reactid="1169"><!-- react-text: 1170 -->Default selection is select all and select invert, Use <!-- /react-text --><code data-reactid="1171"><!-- react-text: 1172 -->rowSelection.selections<!-- /react-text --></code><!-- react-text: 1173 --> custom selections.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1174"></i></section><section class="highlight-wrapper" data-reactid="1175"><div class="highlight" data-reactid="1176"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1177"></i><pre class="language-jsx" data-reactid="1178"><code data-reactid="1179"><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="1180"><section class="code-box-demo" data-reactid="1181"><div data-reactid="1182"><div class="table-operations" data-reactid="1183"><button type="button" class="ant-btn" data-reactid="1184"><span data-reactid="1185">Sort age</span></button><button type="button" class="ant-btn" data-reactid="1186"><span data-reactid="1187">Clear filters</span></button><button type="button" class="ant-btn" data-reactid="1188"><span data-reactid="1189">Clear filters and sorters</span></button></div><div class="ant-table-wrapper" data-reactid="1190"><div class="ant-spin-nested-loading" data-reactid="1191"><div class="ant-spin-container" data-reactid="1192"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1193"><div class="ant-table-content" data-reactid="1194"><div class="ant-table-body" data-reactid="1195"><table class="" data-reactid="1196"><colgroup data-reactid="1197"><col data-reactid="1198"/><col data-reactid="1199"/><col data-reactid="1200"/></colgroup><thead class="ant-table-thead" data-reactid="1201"><tr data-reactid="1202"><th class="" data-reactid="1203"><span data-reactid="1204"><!-- react-text: 1205 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1206"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1207"><i class="anticon anticon-caret-up" data-reactid="1208"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1209"><i class="anticon anticon-caret-down" data-reactid="1210"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1211"></i></span></th><th class="" data-reactid="1212"><span data-reactid="1213"><!-- react-text: 1214 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1215"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1216"><i class="anticon anticon-caret-up" data-reactid="1217"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1218"><i class="anticon anticon-caret-down" data-reactid="1219"></i></span></div></span></th><th class="" data-reactid="1220"><span data-reactid="1221"><!-- react-text: 1222 -->Address<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1223"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1224"><i class="anticon anticon-caret-up" data-reactid="1225"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1226"><i class="anticon anticon-caret-down" data-reactid="1227"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1228"></i></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1229"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1230"><td class="" data-reactid="1231"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1232"></span><!-- react-empty: 1233 --><!-- react-text: 1234 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1235"><!-- react-text: 1236 -->32<!-- /react-text --></td><td class="" data-reactid="1237"><!-- react-text: 1238 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1239"><td class="" data-reactid="1240"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1241"></span><!-- react-empty: 1242 --><!-- react-text: 1243 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1244"><!-- react-text: 1245 -->42<!-- /react-text --></td><td class="" data-reactid="1246"><!-- react-text: 1247 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1248"><td class="" data-reactid="1249"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1250"></span><!-- react-empty: 1251 --><!-- react-text: 1252 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1253"><!-- react-text: 1254 -->32<!-- /react-text --></td><td class="" data-reactid="1255"><!-- react-text: 1256 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1257"><td class="" data-reactid="1258"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1259"></span><!-- react-empty: 1260 --><!-- react-text: 1261 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1262"><!-- react-text: 1263 -->32<!-- /react-text --></td><td class="" data-reactid="1264"><!-- react-text: 1265 -->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="1266"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1267"><a data-reactid="1268"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1269"><a data-reactid="1270">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1271"><a data-reactid="1272"></a></li><!-- react-empty: 1273 --></ul></div></div></div></div><style data-reactid="1274">.table-operations {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.table-operations > button {
|
||
margin-right: 8px;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="1275"><div class="code-box-title" data-reactid="1276"><a href="#components-table-demo-reset-filter" data-reactid="1277">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="1278"><i class="anticon anticon-edit" data-reactid="1279"></i></a></div><div data-reactid="1280"><p data-reactid="1281"><!-- react-text: 1282 -->Control filters and sorters by <!-- /react-text --><code data-reactid="1283"><!-- react-text: 1284 -->filteredValue<!-- /react-text --></code><!-- react-text: 1285 --> and <!-- /react-text --><code data-reactid="1286"><!-- react-text: 1287 -->sortOrder<!-- /react-text --></code><!-- react-text: 1288 -->.<!-- /react-text --></p><blockquote data-reactid="1289"><ol data-reactid="1290"><li data-reactid="1291"><p data-reactid="1292"><!-- react-text: 1293 -->Defining <!-- /react-text --><code data-reactid="1294"><!-- react-text: 1295 -->filteredValue<!-- /react-text --></code><!-- react-text: 1296 --> or <!-- /react-text --><code data-reactid="1297"><!-- react-text: 1298 -->sortOrder<!-- /react-text --></code><!-- react-text: 1299 --> means that it is in the controlled mode.<!-- /react-text --></p></li><li data-reactid="1300"><p data-reactid="1301"><!-- react-text: 1302 -->Make sure <!-- /react-text --><code data-reactid="1303"><!-- react-text: 1304 -->sortOrder<!-- /react-text --></code><!-- react-text: 1305 --> is assigned for only one column.<!-- /react-text --></p></li><li data-reactid="1306"><p data-reactid="1307"><code data-reactid="1308"><!-- react-text: 1309 -->column.key<!-- /react-text --></code><!-- react-text: 1310 --> is required.<!-- /react-text --></p></li></ol></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1311"></i></section><section class="highlight-wrapper" data-reactid="1312"><div class="highlight" data-reactid="1313"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1314"></i><pre class="language-jsx" data-reactid="1315"><code data-reactid="1316"><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="1317"><pre data-reactid="1318"><code class="css" data-reactid="1319"><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="1320"><section class="code-box-demo" data-reactid="1321"><div class="ant-table-wrapper" data-reactid="1322"><div class="ant-spin-nested-loading" data-reactid="1323"><div class="ant-spin-container" data-reactid="1324"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1325"><div class="ant-table-content" data-reactid="1326"><div class="ant-table-body" data-reactid="1327"><table class="" data-reactid="1328"><colgroup data-reactid="1329"><col data-reactid="1330"/><col data-reactid="1331"/><col data-reactid="1332"/></colgroup><thead class="ant-table-thead" data-reactid="1333"><tr data-reactid="1334"><th class="" data-reactid="1335"><span data-reactid="1336"><!-- react-text: 1337 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1338"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1339"><i class="anticon anticon-caret-up" data-reactid="1340"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1341"><i class="anticon anticon-caret-down" data-reactid="1342"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1343"></i></span></th><th class="" data-reactid="1344"><span data-reactid="1345"><!-- react-text: 1346 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1347"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1348"><i class="anticon anticon-caret-up" data-reactid="1349"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1350"><i class="anticon anticon-caret-down" data-reactid="1351"></i></span></div></span></th><th class="" data-reactid="1352"><span data-reactid="1353"><!-- react-text: 1354 -->Address<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1355"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1356"><i class="anticon anticon-caret-up" data-reactid="1357"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1358"><i class="anticon anticon-caret-down" data-reactid="1359"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1360"></i></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1361"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1362"><td class="" data-reactid="1363"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1364"></span><!-- react-empty: 1365 --><!-- react-text: 1366 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1367"><!-- react-text: 1368 -->32<!-- /react-text --></td><td class="" data-reactid="1369"><!-- react-text: 1370 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1371"><td class="" data-reactid="1372"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1373"></span><!-- react-empty: 1374 --><!-- react-text: 1375 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1376"><!-- react-text: 1377 -->42<!-- /react-text --></td><td class="" data-reactid="1378"><!-- react-text: 1379 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1380"><td class="" data-reactid="1381"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1382"></span><!-- react-empty: 1383 --><!-- react-text: 1384 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1385"><!-- react-text: 1386 -->32<!-- /react-text --></td><td class="" data-reactid="1387"><!-- react-text: 1388 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1389"><td class="" data-reactid="1390"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1391"></span><!-- react-empty: 1392 --><!-- react-text: 1393 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1394"><!-- react-text: 1395 -->32<!-- /react-text --></td><td class="" data-reactid="1396"><!-- react-text: 1397 -->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="1398"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1399"><a data-reactid="1400"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1401"><a data-reactid="1402">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1403"><a data-reactid="1404"></a></li><!-- react-empty: 1405 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1406"><div class="code-box-title" data-reactid="1407"><a href="#components-table-demo-head" data-reactid="1408">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="1409"><i class="anticon anticon-edit" data-reactid="1410"></i></a></div><div data-reactid="1411"><p data-reactid="1412"><!-- react-text: 1413 -->Use <!-- /react-text --><code data-reactid="1414"><!-- react-text: 1415 -->filters<!-- /react-text --></code><!-- react-text: 1416 --> to generate filter menu in columns, <!-- /react-text --><code data-reactid="1417"><!-- react-text: 1418 -->onFilter<!-- /react-text --></code><!-- react-text: 1419 --> to determine filtered result, and <!-- /react-text --><code data-reactid="1420"><!-- react-text: 1421 -->filterMultiple<!-- /react-text --></code><!-- react-text: 1422 --> to indicate whether it's multiple or single selection.<!-- /react-text --></p><p data-reactid="1423"><!-- react-text: 1424 -->Use <!-- /react-text --><code data-reactid="1425"><!-- react-text: 1426 -->sorter<!-- /react-text --></code><!-- react-text: 1427 --> to make a column sortable. <!-- /react-text --><code data-reactid="1428"><!-- react-text: 1429 -->sorter<!-- /react-text --></code><!-- react-text: 1430 --> can be a function <!-- /react-text --><code data-reactid="1431"><!-- react-text: 1432 -->function(a, b) { ... }<!-- /react-text --></code><!-- react-text: 1433 --> for sorting data locally.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1434"></i></section><section class="highlight-wrapper" data-reactid="1435"><div class="highlight" data-reactid="1436"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1437"></i><pre class="language-jsx" data-reactid="1438"><code data-reactid="1439"><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="1440"><section class="code-box-demo" data-reactid="1441"><div class="ant-table-wrapper" data-reactid="1442"><div class="ant-spin-nested-loading" data-reactid="1443"><div class="ant-spin-container" data-reactid="1444"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1445"><div class="ant-table-content" data-reactid="1446"><div class="ant-table-body" data-reactid="1447"><table class="" data-reactid="1448"><colgroup data-reactid="1449"><col data-reactid="1450"/><col data-reactid="1451"/><col data-reactid="1452"/></colgroup><thead class="ant-table-thead" data-reactid="1453"><tr data-reactid="1454"><th class="" data-reactid="1455"><span data-reactid="1456"><!-- react-text: 1457 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1458"></i></span></th><th class="" data-reactid="1459"><span data-reactid="1460"><!-- react-text: 1461 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1462"><span data-reactid="1463"><!-- react-text: 1464 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1465"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1466"><td class="" data-reactid="1467"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1468"></span><!-- react-empty: 1469 --><!-- react-text: 1470 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1471"><!-- react-text: 1472 -->32<!-- /react-text --></td><td class="" data-reactid="1473"><!-- react-text: 1474 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1475"><td class="" data-reactid="1476"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1477"></span><!-- react-empty: 1478 --><!-- react-text: 1479 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1480"><!-- react-text: 1481 -->42<!-- /react-text --></td><td class="" data-reactid="1482"><!-- react-text: 1483 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1484"><td class="" data-reactid="1485"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1486"></span><!-- react-empty: 1487 --><!-- react-text: 1488 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1489"><!-- react-text: 1490 -->32<!-- /react-text --></td><td class="" data-reactid="1491"><!-- react-text: 1492 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1493"><td class="" data-reactid="1494"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1495"></span><!-- react-empty: 1496 --><!-- react-text: 1497 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1498"><!-- react-text: 1499 -->32<!-- /react-text --></td><td class="" data-reactid="1500"><!-- react-text: 1501 -->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="1502"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1503"><a data-reactid="1504"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1505"><a data-reactid="1506">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1507"><a data-reactid="1508"></a></li><!-- react-empty: 1509 --></ul></div></div></div><style data-reactid="1510">.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="1511"><div class="code-box-title" data-reactid="1512"><a href="#components-table-demo-custom-filter-panel" data-reactid="1513">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="1514"><i class="anticon anticon-edit" data-reactid="1515"></i></a></div><div data-reactid="1516"><p data-reactid="1517"><!-- react-text: 1518 -->Implement a customized column search example via <!-- /react-text --><code data-reactid="1519"><!-- react-text: 1520 -->filterDropdown<!-- /react-text --></code><!-- react-text: 1521 -->, <!-- /react-text --><code data-reactid="1522"><!-- react-text: 1523 -->filterDropdownVisible<!-- /react-text --></code><!-- react-text: 1524 --> and <!-- /react-text --><code data-reactid="1525"><!-- react-text: 1526 -->filterDropdownVisibleChange<!-- /react-text --></code><!-- react-text: 1527 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1528"></i></section><section class="highlight-wrapper" data-reactid="1529"><div class="highlight" data-reactid="1530"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1531"></i><pre class="language-jsx" data-reactid="1532"><code data-reactid="1533"><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="1534"><pre data-reactid="1535"><code class="css" data-reactid="1536"><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="1537"><section class="code-box-demo" data-reactid="1538"><div class="ant-table-wrapper" data-reactid="1539"><div class="ant-spin-nested-loading" data-reactid="1540"><div class="ant-spin-container" data-reactid="1541"><div class="ant-table ant-table-large ant-table-empty ant-table-scroll-position-left" data-reactid="1542"><div class="ant-table-content" data-reactid="1543"><div class="ant-table-body" data-reactid="1544"><table class="" data-reactid="1545"><colgroup data-reactid="1546"><col style="width:20%;min-width:20%;" data-reactid="1547"/><col style="width:20%;min-width:20%;" data-reactid="1548"/><col data-reactid="1549"/></colgroup><thead class="ant-table-thead" data-reactid="1550"><tr data-reactid="1551"><th class="" data-reactid="1552"><span data-reactid="1553"><!-- react-text: 1554 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1555"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1556"><i class="anticon anticon-caret-up" data-reactid="1557"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1558"><i class="anticon anticon-caret-down" data-reactid="1559"></i></span></div></span></th><th class="" data-reactid="1560"><span data-reactid="1561"><!-- react-text: 1562 -->Gender<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1563"></i></span></th><th class="" data-reactid="1564"><span data-reactid="1565"><!-- react-text: 1566 -->Email<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1567"></tbody></table></div><div class="ant-table-placeholder" data-reactid="1568">No Data</div></div></div></div></div></div></section><section class="code-box-meta markdown" data-reactid="1569"><div class="code-box-title" data-reactid="1570"><a href="#components-table-demo-ajax" data-reactid="1571">Ajax</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/ajax.md" data-reactid="1572"><i class="anticon anticon-edit" data-reactid="1573"></i></a></div><div data-reactid="1574"><p data-reactid="1575"><!-- react-text: 1576 -->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="1577"><strong data-reactid="1578"><!-- react-text: 1579 -->Note, this example use <!-- /react-text --><a href="https://randomuser.me" data-reactid="1580"><!-- react-text: 1581 -->Mock API<!-- /react-text --></a><!-- react-text: 1582 --> 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="1583"></i></section><section class="highlight-wrapper" data-reactid="1584"><div class="highlight" data-reactid="1585"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1586"></i><pre class="language-jsx" data-reactid="1587"><code data-reactid="1588"><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="1589"><section class="code-box-demo" data-reactid="1590"><div data-reactid="1591"><h4 data-reactid="1592">Middle size table</h4><div class="ant-table-wrapper" data-reactid="1593"><div class="ant-spin-nested-loading" data-reactid="1594"><div class="ant-spin-container" data-reactid="1595"><div class="ant-table ant-table-middle ant-table-scroll-position-left" data-reactid="1596"><div class="ant-table-content" data-reactid="1597"><div class="ant-table-body" data-reactid="1598"><table class="" data-reactid="1599"><colgroup data-reactid="1600"><col data-reactid="1601"/><col data-reactid="1602"/><col data-reactid="1603"/></colgroup><thead class="ant-table-thead" data-reactid="1604"><tr data-reactid="1605"><th class="" data-reactid="1606"><span data-reactid="1607"><!-- react-text: 1608 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1609"><span data-reactid="1610"><!-- react-text: 1611 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1612"><span data-reactid="1613"><!-- react-text: 1614 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1615"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1616"><td class="" data-reactid="1617"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1618"></span><!-- react-empty: 1619 --><!-- react-text: 1620 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1621"><!-- react-text: 1622 -->32<!-- /react-text --></td><td class="" data-reactid="1623"><!-- react-text: 1624 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1625"><td class="" data-reactid="1626"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1627"></span><!-- react-empty: 1628 --><!-- react-text: 1629 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1630"><!-- react-text: 1631 -->42<!-- /react-text --></td><td class="" data-reactid="1632"><!-- react-text: 1633 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1634"><td class="" data-reactid="1635"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1636"></span><!-- react-empty: 1637 --><!-- react-text: 1638 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1639"><!-- react-text: 1640 -->32<!-- /react-text --></td><td class="" data-reactid="1641"><!-- react-text: 1642 -->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="1643"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1644"><a data-reactid="1645"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1646"><a data-reactid="1647">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1648"><a data-reactid="1649"></a></li><!-- react-empty: 1650 --></ul></div></div></div><h4 data-reactid="1651">Small size table</h4><div class="ant-table-wrapper" data-reactid="1652"><div class="ant-spin-nested-loading" data-reactid="1653"><div class="ant-spin-container" data-reactid="1654"><div class="ant-table ant-table-small ant-table-scroll-position-left" data-reactid="1655"><div class="ant-table-content" data-reactid="1656"><div class="ant-table-body" data-reactid="1657"><table class="" data-reactid="1658"><colgroup data-reactid="1659"><col data-reactid="1660"/><col data-reactid="1661"/><col data-reactid="1662"/></colgroup><thead class="ant-table-thead" data-reactid="1663"><tr data-reactid="1664"><th class="" data-reactid="1665"><span data-reactid="1666"><!-- react-text: 1667 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1668"><span data-reactid="1669"><!-- react-text: 1670 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1671"><span data-reactid="1672"><!-- react-text: 1673 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1674"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1675"><td class="" data-reactid="1676"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1677"></span><!-- react-empty: 1678 --><!-- react-text: 1679 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1680"><!-- react-text: 1681 -->32<!-- /react-text --></td><td class="" data-reactid="1682"><!-- react-text: 1683 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1684"><td class="" data-reactid="1685"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1686"></span><!-- react-empty: 1687 --><!-- react-text: 1688 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1689"><!-- react-text: 1690 -->42<!-- /react-text --></td><td class="" data-reactid="1691"><!-- react-text: 1692 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1693"><td class="" data-reactid="1694"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1695"></span><!-- react-empty: 1696 --><!-- react-text: 1697 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1698"><!-- react-text: 1699 -->32<!-- /react-text --></td><td class="" data-reactid="1700"><!-- react-text: 1701 -->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="1702"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1703"><a data-reactid="1704"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1705"><a data-reactid="1706">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1707"><a data-reactid="1708"></a></li><!-- react-empty: 1709 --></ul></div></div></div></div><style data-reactid="1710">#components-table-demo-size h4 { margin-bottom: 16px; }</style></section><section class="code-box-meta markdown" data-reactid="1711"><div class="code-box-title" data-reactid="1712"><a href="#components-table-demo-size" data-reactid="1713">size</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/size.md" data-reactid="1714"><i class="anticon anticon-edit" data-reactid="1715"></i></a></div><div data-reactid="1716"><p data-reactid="1717"><!-- react-text: 1718 -->Two compacted table size: <!-- /react-text --><code data-reactid="1719"><!-- react-text: 1720 -->middle<!-- /react-text --></code><!-- react-text: 1721 --> and <!-- /react-text --><code data-reactid="1722"><!-- react-text: 1723 -->small<!-- /react-text --></code><!-- react-text: 1724 -->, <!-- /react-text --><code data-reactid="1725"><!-- react-text: 1726 -->small<!-- /react-text --></code><!-- react-text: 1727 --> size is used in Modal only.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1728"></i></section><section class="highlight-wrapper" data-reactid="1729"><div class="highlight" data-reactid="1730"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1731"></i><pre class="language-jsx" data-reactid="1732"><code data-reactid="1733"><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="1734"><section class="code-box-demo" data-reactid="1735"><div class="ant-table-wrapper" data-reactid="1736"><div class="ant-spin-nested-loading" data-reactid="1737"><div class="ant-spin-container" data-reactid="1738"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="1739"><div class="ant-table-title" data-reactid="1740">Header</div><div class="ant-table-content" data-reactid="1741"><div class="ant-table-body" data-reactid="1742"><table class="" data-reactid="1743"><colgroup data-reactid="1744"><col data-reactid="1745"/><col data-reactid="1746"/><col data-reactid="1747"/></colgroup><thead class="ant-table-thead" data-reactid="1748"><tr data-reactid="1749"><th class="" data-reactid="1750"><span data-reactid="1751"><!-- react-text: 1752 -->Name<!-- /react-text --></span></th><th class="column-money" data-reactid="1753"><span data-reactid="1754"><!-- react-text: 1755 -->Cash Assets<!-- /react-text --></span></th><th class="" data-reactid="1756"><span data-reactid="1757"><!-- react-text: 1758 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1759"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1760"><td class="" data-reactid="1761"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1762"></span><!-- react-empty: 1763 --><a href="#" data-reactid="1764">John Brown</a></td><td class="column-money" data-reactid="1765"><!-- react-text: 1766 -->￥300,000.00<!-- /react-text --></td><td class="" data-reactid="1767"><!-- react-text: 1768 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1769"><td class="" data-reactid="1770"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1771"></span><!-- react-empty: 1772 --><a href="#" data-reactid="1773">Jim Green</a></td><td class="column-money" data-reactid="1774"><!-- react-text: 1775 -->￥1,256,000.00<!-- /react-text --></td><td class="" data-reactid="1776"><!-- react-text: 1777 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1778"><td class="" data-reactid="1779"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1780"></span><!-- react-empty: 1781 --><a href="#" data-reactid="1782">Joe Black</a></td><td class="column-money" data-reactid="1783"><!-- react-text: 1784 -->￥120,000.00<!-- /react-text --></td><td class="" data-reactid="1785"><!-- react-text: 1786 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div><div class="ant-table-footer" data-reactid="1787">Footer</div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1788"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1789"><a data-reactid="1790"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1791"><a data-reactid="1792">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1793"><a data-reactid="1794"></a></li><!-- react-empty: 1795 --></ul></div></div></div><style data-reactid="1796">.column-money {
|
||
text-align: right;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="1797"><div class="code-box-title" data-reactid="1798"><a href="#components-table-demo-bordered" data-reactid="1799">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="1800"><i class="anticon anticon-edit" data-reactid="1801"></i></a></div><div data-reactid="1802"><p data-reactid="1803"><!-- react-text: 1804 -->Add border, title and footer for table.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1805"></i></section><section class="highlight-wrapper" data-reactid="1806"><div class="highlight" data-reactid="1807"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1808"></i><pre class="language-jsx" data-reactid="1809"><code data-reactid="1810"><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="1811"><pre data-reactid="1812"><code class="css" data-reactid="1813"><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="1814"><section class="code-box-demo" data-reactid="1815"><div class="ant-table-wrapper" data-reactid="1816"><div class="ant-spin-nested-loading" data-reactid="1817"><div class="ant-spin-container" data-reactid="1818"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1819"><div class="ant-table-content" data-reactid="1820"><div class="ant-table-body" data-reactid="1821"><table class="" data-reactid="1822"><colgroup data-reactid="1823"><col class="ant-table-expand-icon-col" data-reactid="1824"/><col data-reactid="1825"/><col data-reactid="1826"/><col data-reactid="1827"/><col data-reactid="1828"/></colgroup><thead class="ant-table-thead" data-reactid="1829"><tr data-reactid="1830"><th class="ant-table-expand-icon-th" title="" rowspan="1" data-reactid="1831"></th><th class="" data-reactid="1832"><span data-reactid="1833"><!-- react-text: 1834 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1835"><span data-reactid="1836"><!-- react-text: 1837 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1838"><span data-reactid="1839"><!-- react-text: 1840 -->Address<!-- /react-text --></span></th><th class="" data-reactid="1841"><span data-reactid="1842"><!-- react-text: 1843 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1844"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1845"><td class="ant-table-row-expand-icon-cell" data-reactid="1846"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1847"></span></td><td class="" data-reactid="1848"><!-- react-text: 1849 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1850"><!-- react-text: 1851 -->32<!-- /react-text --></td><td class="" data-reactid="1852"><!-- react-text: 1853 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1854"><a href="#" data-reactid="1855">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1856"><td class="ant-table-row-expand-icon-cell" data-reactid="1857"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1858"></span></td><td class="" data-reactid="1859"><!-- react-text: 1860 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1861"><!-- react-text: 1862 -->42<!-- /react-text --></td><td class="" data-reactid="1863"><!-- react-text: 1864 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1865"><a href="#" data-reactid="1866">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1867"><td class="ant-table-row-expand-icon-cell" data-reactid="1868"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1869"></span></td><td class="" data-reactid="1870"><!-- react-text: 1871 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1872"><!-- react-text: 1873 -->32<!-- /react-text --></td><td class="" data-reactid="1874"><!-- react-text: 1875 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1876"><a href="#" data-reactid="1877">Delete</a></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1878"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1879"><a data-reactid="1880"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1881"><a data-reactid="1882">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1883"><a data-reactid="1884"></a></li><!-- react-empty: 1885 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1886"><div class="code-box-title" data-reactid="1887"><a href="#components-table-demo-expand" data-reactid="1888">Expandable Row</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/table/demo/expand.md" data-reactid="1889"><i class="anticon anticon-edit" data-reactid="1890"></i></a></div><div data-reactid="1891"><p data-reactid="1892"><!-- react-text: 1893 -->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="1894"></i></section><section class="highlight-wrapper" data-reactid="1895"><div class="highlight" data-reactid="1896"><i class="anticon anticon-copy code-box-code-copy" data-reactid="1897"></i><pre class="language-jsx" data-reactid="1898"><code data-reactid="1899"><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="1900"><section class="code-box-demo" data-reactid="1901"><div class="ant-table-wrapper" data-reactid="1902"><div class="ant-spin-nested-loading" data-reactid="1903"><div class="ant-spin-container" data-reactid="1904"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="1905"><div class="ant-table-content" data-reactid="1906"><div class="ant-table-body" data-reactid="1907"><table class="" data-reactid="1908"><colgroup data-reactid="1909"><col data-reactid="1910"/><col data-reactid="1911"/><col data-reactid="1912"/><col data-reactid="1913"/><col data-reactid="1914"/></colgroup><thead class="ant-table-thead" data-reactid="1915"><tr data-reactid="1916"><th class="" data-reactid="1917"><span data-reactid="1918"><!-- react-text: 1919 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1920"><span data-reactid="1921"><!-- react-text: 1922 -->Age<!-- /react-text --></span></th><th class="" colspan="2" data-reactid="1923"><span data-reactid="1924"><!-- react-text: 1925 -->Home phone<!-- /react-text --></span></th><th class="" data-reactid="1926"><span data-reactid="1927"><!-- react-text: 1928 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1929"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1930"><td class="" data-reactid="1931"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1932"></span><!-- react-empty: 1933 --><a href="#" data-reactid="1934">John Brown</a></td><td class="" data-reactid="1935"><!-- react-text: 1936 -->32<!-- /react-text --></td><td class="" data-reactid="1937"><!-- react-text: 1938 -->0571-22098909<!-- /react-text --></td><td class="" data-reactid="1939"><!-- react-text: 1940 -->18889898989<!-- /react-text --></td><td class="" data-reactid="1941"><!-- react-text: 1942 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1943"><td class="" data-reactid="1944"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1945"></span><!-- react-empty: 1946 --><a href="#" data-reactid="1947">Jim Green</a></td><td class="" data-reactid="1948"><!-- react-text: 1949 -->42<!-- /react-text --></td><td class="" data-reactid="1950"><!-- react-text: 1951 -->0571-22098333<!-- /react-text --></td><td class="" data-reactid="1952"><!-- react-text: 1953 -->18889898888<!-- /react-text --></td><td class="" data-reactid="1954"><!-- react-text: 1955 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1956"><td class="" data-reactid="1957"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1958"></span><!-- react-empty: 1959 --><a href="#" data-reactid="1960">Joe Black</a></td><td class="" data-reactid="1961"><!-- react-text: 1962 -->32<!-- /react-text --></td><td class="" rowspan="2" data-reactid="1963"><!-- react-text: 1964 -->0575-22098909<!-- /react-text --></td><td class="" data-reactid="1965"><!-- react-text: 1966 -->18900010002<!-- /react-text --></td><td class="" data-reactid="1967"><!-- react-text: 1968 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1969"><td class="" data-reactid="1970"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1971"></span><!-- react-empty: 1972 --><a href="#" data-reactid="1973">Jim Red</a></td><td class="" data-reactid="1974"><!-- react-text: 1975 -->18<!-- /react-text --></td><!-- react-empty: 1976 --><td class="" data-reactid="1977"><!-- react-text: 1978 -->18900010002<!-- /react-text --></td><td class="" data-reactid="1979"><!-- react-text: 1980 -->London No. 2 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1981"><td class="" colspan="5" data-reactid="1982"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1983"></span><!-- react-empty: 1984 --><a href="#" data-reactid="1985">Jake White</a></td><!-- react-empty: 1986 --><!-- react-empty: 1987 --><!-- react-empty: 1988 --><!-- react-empty: 1989 --></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1990"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1991"><a data-reactid="1992"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1993"><a data-reactid="1994">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1995"><a data-reactid="1996"></a></li><!-- react-empty: 1997 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1998"><div class="code-box-title" data-reactid="1999"><a href="#components-table-demo-colspan-rowspan" data-reactid="2000">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="2001"><i class="anticon anticon-edit" data-reactid="2002"></i></a></div><div data-reactid="2003"><p data-reactid="2004"><!-- react-text: 2005 -->Table column title supports <!-- /react-text --><code data-reactid="2006"><!-- react-text: 2007 -->colSpan<!-- /react-text --></code><!-- react-text: 2008 --> that set in <!-- /react-text --><code data-reactid="2009"><!-- react-text: 2010 -->column<!-- /react-text --></code><!-- react-text: 2011 -->.<!-- /react-text --></p><p data-reactid="2012"><!-- react-text: 2013 -->Table cell supports <!-- /react-text --><code data-reactid="2014"><!-- react-text: 2015 -->colSpan<!-- /react-text --></code><!-- react-text: 2016 --> and <!-- /react-text --><code data-reactid="2017"><!-- react-text: 2018 -->rowSpan<!-- /react-text --></code><!-- react-text: 2019 --> that set in render return object. When each of them is set to <!-- /react-text --><code data-reactid="2020"><!-- react-text: 2021 -->0<!-- /react-text --></code><!-- react-text: 2022 -->, the cell will not be rendered.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="2023"></i></section><section class="highlight-wrapper" data-reactid="2024"><div class="highlight" data-reactid="2025"><i class="anticon anticon-copy code-box-code-copy" data-reactid="2026"></i><pre class="language-jsx" data-reactid="2027"><code data-reactid="2028"><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="2029"><section class="code-box-demo" data-reactid="2030"><div class="ant-table-wrapper" data-reactid="2031"><div class="ant-spin-nested-loading" data-reactid="2032"><div class="ant-spin-container" data-reactid="2033"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="2034"><div class="ant-table-content" data-reactid="2035"><div class="ant-table-body" data-reactid="2036"><table class="" data-reactid="2037"><colgroup data-reactid="2038"><col data-reactid="2039"/><col style="width:40%;min-width:40%;" data-reactid="2040"/><col style="width:30%;min-width:30%;" data-reactid="2041"/><col data-reactid="2042"/></colgroup><thead class="ant-table-thead" data-reactid="2043"><tr data-reactid="2044"><th class="ant-table-selection-column" data-reactid="2045"><span data-reactid="2046"><div class="ant-table-selection" data-reactid="2047"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="2048"><span class="ant-checkbox" data-reactid="2049"><input type="checkbox" class="ant-checkbox-input" data-reactid="2050"/><span class="ant-checkbox-inner" data-reactid="2051"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="2052"><i class="anticon anticon-down" data-reactid="2053"></i></div></div></span></th><th class="" data-reactid="2054"><span data-reactid="2055"><!-- react-text: 2056 -->Name<!-- /react-text --></span></th><th class="" data-reactid="2057"><span data-reactid="2058"><!-- react-text: 2059 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2060"><span data-reactid="2061"><!-- react-text: 2062 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2063"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2064"><td class="ant-table-selection-column" data-reactid="2065"><span data-reactid="2066"><label class="ant-checkbox-wrapper" data-reactid="2067"><span class="ant-checkbox" data-reactid="2068"><input type="checkbox" class="ant-checkbox-input" data-reactid="2069"/><span class="ant-checkbox-inner" data-reactid="2070"></span></span></label></span></td><td class="" data-reactid="2071"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2072"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2073"></span><!-- react-text: 2074 -->John Brown sr.<!-- /react-text --></td><td class="" data-reactid="2075"><!-- react-text: 2076 -->60<!-- /react-text --></td><td class="" data-reactid="2077"><!-- react-text: 2078 -->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="2079"><td class="ant-table-selection-column" data-reactid="2080"><span data-reactid="2081"><label class="ant-checkbox-wrapper" data-reactid="2082"><span class="ant-checkbox" data-reactid="2083"><input type="checkbox" class="ant-checkbox-input" data-reactid="2084"/><span class="ant-checkbox-inner" data-reactid="2085"></span></span></label></span></td><td class="" data-reactid="2086"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="2087"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2088"></span><!-- react-text: 2089 -->John Brown<!-- /react-text --></td><td class="" data-reactid="2090"><!-- react-text: 2091 -->42<!-- /react-text --></td><td class="" data-reactid="2092"><!-- react-text: 2093 -->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="2094"><td class="ant-table-selection-column" data-reactid="2095"><span data-reactid="2096"><label class="ant-checkbox-wrapper" data-reactid="2097"><span class="ant-checkbox" data-reactid="2098"><input type="checkbox" class="ant-checkbox-input" data-reactid="2099"/><span class="ant-checkbox-inner" data-reactid="2100"></span></span></label></span></td><td class="" data-reactid="2101"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="2102"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2103"></span><!-- react-text: 2104 -->John Brown jr.<!-- /react-text --></td><td class="" data-reactid="2105"><!-- react-text: 2106 -->30<!-- /react-text --></td><td class="" data-reactid="2107"><!-- react-text: 2108 -->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="2109"><td class="ant-table-selection-column" data-reactid="2110"><span data-reactid="2111"><label class="ant-checkbox-wrapper" data-reactid="2112"><span class="ant-checkbox" data-reactid="2113"><input type="checkbox" class="ant-checkbox-input" data-reactid="2114"/><span class="ant-checkbox-inner" data-reactid="2115"></span></span></label></span></td><td class="" data-reactid="2116"><span style="padding-left:40px;" class="ant-table-row-indent indent-level-2" data-reactid="2117"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2118"></span><!-- react-text: 2119 -->Jimmy Brown<!-- /react-text --></td><td class="" data-reactid="2120"><!-- react-text: 2121 -->16<!-- /react-text --></td><td class="" data-reactid="2122"><!-- react-text: 2123 -->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="2124"><td class="ant-table-selection-column" data-reactid="2125"><span data-reactid="2126"><label class="ant-checkbox-wrapper" data-reactid="2127"><span class="ant-checkbox" data-reactid="2128"><input type="checkbox" class="ant-checkbox-input" data-reactid="2129"/><span class="ant-checkbox-inner" data-reactid="2130"></span></span></label></span></td><td class="" data-reactid="2131"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="2132"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2133"></span><!-- react-text: 2134 -->Jim Green sr.<!-- /react-text --></td><td class="" data-reactid="2135"><!-- react-text: 2136 -->72<!-- /react-text --></td><td class="" data-reactid="2137"><!-- react-text: 2138 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-2" style="display:none;" data-reactid="2139"><td class="ant-table-selection-column" data-reactid="2140"><span data-reactid="2141"><label class="ant-checkbox-wrapper" data-reactid="2142"><span class="ant-checkbox" data-reactid="2143"><input type="checkbox" class="ant-checkbox-input" data-reactid="2144"/><span class="ant-checkbox-inner" data-reactid="2145"></span></span></label></span></td><td class="" data-reactid="2146"><span style="padding-left:40px;" class="ant-table-row-indent indent-level-2" data-reactid="2147"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2148"></span><!-- react-text: 2149 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2150"><!-- react-text: 2151 -->42<!-- /react-text --></td><td class="" data-reactid="2152"><!-- react-text: 2153 -->London No. 2 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-3" style="display:none;" data-reactid="2154"><td class="ant-table-selection-column" data-reactid="2155"><span data-reactid="2156"><label class="ant-checkbox-wrapper" data-reactid="2157"><span class="ant-checkbox" data-reactid="2158"><input type="checkbox" class="ant-checkbox-input" data-reactid="2159"/><span class="ant-checkbox-inner" data-reactid="2160"></span></span></label></span></td><td class="" data-reactid="2161"><span style="padding-left:60px;" class="ant-table-row-indent indent-level-3" data-reactid="2162"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2163"></span><!-- react-text: 2164 -->Jim Green jr.<!-- /react-text --></td><td class="" data-reactid="2165"><!-- react-text: 2166 -->25<!-- /react-text --></td><td class="" data-reactid="2167"><!-- react-text: 2168 -->London No. 3 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-3" style="display:none;" data-reactid="2169"><td class="ant-table-selection-column" data-reactid="2170"><span data-reactid="2171"><label class="ant-checkbox-wrapper" data-reactid="2172"><span class="ant-checkbox" data-reactid="2173"><input type="checkbox" class="ant-checkbox-input" data-reactid="2174"/><span class="ant-checkbox-inner" data-reactid="2175"></span></span></label></span></td><td class="" data-reactid="2176"><span style="padding-left:60px;" class="ant-table-row-indent indent-level-3" data-reactid="2177"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2178"></span><!-- react-text: 2179 -->Jimmy Green sr.<!-- /react-text --></td><td class="" data-reactid="2180"><!-- react-text: 2181 -->18<!-- /react-text --></td><td class="" data-reactid="2182"><!-- react-text: 2183 -->London No. 4 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2184"><td class="ant-table-selection-column" data-reactid="2185"><span data-reactid="2186"><label class="ant-checkbox-wrapper" data-reactid="2187"><span class="ant-checkbox" data-reactid="2188"><input type="checkbox" class="ant-checkbox-input" data-reactid="2189"/><span class="ant-checkbox-inner" data-reactid="2190"></span></span></label></span></td><td class="" data-reactid="2191"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2192"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2193"></span><!-- react-text: 2194 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="2195"><!-- react-text: 2196 -->32<!-- /react-text --></td><td class="" data-reactid="2197"><!-- react-text: 2198 -->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="2199"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2200"><a data-reactid="2201"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2202"><a data-reactid="2203">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="2204"><a data-reactid="2205"></a></li><!-- react-empty: 2206 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="2207"><div class="code-box-title" data-reactid="2208"><a href="#components-table-demo-expand-children" data-reactid="2209">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="2210"><i class="anticon anticon-edit" data-reactid="2211"></i></a></div><div data-reactid="2212"><p data-reactid="2213"><!-- react-text: 2214 -->Display tree structure data in Table, control the indent width by setting <!-- /react-text --><code data-reactid="2215"><!-- react-text: 2216 -->indentSize<!-- /react-text --></code><!-- react-text: 2217 -->.<!-- /react-text --></p><blockquote data-reactid="2218"><p data-reactid="2219"><!-- react-text: 2220 -->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="2221"></i></section><section class="highlight-wrapper" data-reactid="2222"><div class="highlight" data-reactid="2223"><i class="anticon anticon-copy code-box-code-copy" data-reactid="2224"></i><pre class="language-jsx" data-reactid="2225"><code data-reactid="2226"><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="2227"><section class="code-box-demo" data-reactid="2228"><div class="ant-table-wrapper" data-reactid="2229"><div class="ant-spin-nested-loading" data-reactid="2230"><div class="ant-spin-container" data-reactid="2231"><div class="ant-table ant-table-large ant-table-fixed-header ant-table-scroll-position-left" data-reactid="2232"><div class="ant-table-content" data-reactid="2233"><div class="ant-table-scroll" data-reactid="2234"><div class="ant-table-header" data-reactid="2235"><table class="" data-reactid="2236"><colgroup data-reactid="2237"><col style="width:150px;min-width:150px;" data-reactid="2238"/><col style="width:150px;min-width:150px;" data-reactid="2239"/><col data-reactid="2240"/></colgroup><thead class="ant-table-thead" data-reactid="2241"><tr data-reactid="2242"><th class="" data-reactid="2243"><span data-reactid="2244"><!-- react-text: 2245 -->Name<!-- /react-text --></span></th><th class="" data-reactid="2246"><span data-reactid="2247"><!-- react-text: 2248 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2249"><span data-reactid="2250"><!-- react-text: 2251 -->Address<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body" style="max-height:240px;overflow-y:scroll;" data-reactid="2252"><table class="" data-reactid="2253"><colgroup data-reactid="2254"><col style="width:150px;min-width:150px;" data-reactid="2255"/><col style="width:150px;min-width:150px;" data-reactid="2256"/><col data-reactid="2257"/></colgroup><tbody class="ant-table-tbody" data-reactid="2258"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2259"><td class="" data-reactid="2260"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2261"></span><!-- react-empty: 2262 --><!-- react-text: 2263 -->Edward King 0<!-- /react-text --></td><td class="" data-reactid="2264"><!-- react-text: 2265 -->32<!-- /react-text --></td><td class="" data-reactid="2266"><!-- react-text: 2267 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2268"><td class="" data-reactid="2269"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2270"></span><!-- react-empty: 2271 --><!-- react-text: 2272 -->Edward King 1<!-- /react-text --></td><td class="" data-reactid="2273"><!-- react-text: 2274 -->32<!-- /react-text --></td><td class="" data-reactid="2275"><!-- react-text: 2276 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2277"><td class="" data-reactid="2278"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2279"></span><!-- react-empty: 2280 --><!-- react-text: 2281 -->Edward King 2<!-- /react-text --></td><td class="" data-reactid="2282"><!-- react-text: 2283 -->32<!-- /react-text --></td><td class="" data-reactid="2284"><!-- react-text: 2285 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2286"><td class="" data-reactid="2287"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2288"></span><!-- react-empty: 2289 --><!-- react-text: 2290 -->Edward King 3<!-- /react-text --></td><td class="" data-reactid="2291"><!-- react-text: 2292 -->32<!-- /react-text --></td><td class="" data-reactid="2293"><!-- react-text: 2294 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2295"><td class="" data-reactid="2296"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2297"></span><!-- react-empty: 2298 --><!-- react-text: 2299 -->Edward King 4<!-- /react-text --></td><td class="" data-reactid="2300"><!-- react-text: 2301 -->32<!-- /react-text --></td><td class="" data-reactid="2302"><!-- react-text: 2303 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2304"><td class="" data-reactid="2305"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2306"></span><!-- react-empty: 2307 --><!-- react-text: 2308 -->Edward King 5<!-- /react-text --></td><td class="" data-reactid="2309"><!-- react-text: 2310 -->32<!-- /react-text --></td><td class="" data-reactid="2311"><!-- react-text: 2312 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2313"><td class="" data-reactid="2314"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2315"></span><!-- react-empty: 2316 --><!-- react-text: 2317 -->Edward King 6<!-- /react-text --></td><td class="" data-reactid="2318"><!-- react-text: 2319 -->32<!-- /react-text --></td><td class="" data-reactid="2320"><!-- react-text: 2321 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2322"><td class="" data-reactid="2323"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2324"></span><!-- react-empty: 2325 --><!-- react-text: 2326 -->Edward King 7<!-- /react-text --></td><td class="" data-reactid="2327"><!-- react-text: 2328 -->32<!-- /react-text --></td><td class="" data-reactid="2329"><!-- react-text: 2330 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2331"><td class="" data-reactid="2332"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2333"></span><!-- react-empty: 2334 --><!-- react-text: 2335 -->Edward King 8<!-- /react-text --></td><td class="" data-reactid="2336"><!-- react-text: 2337 -->32<!-- /react-text --></td><td class="" data-reactid="2338"><!-- react-text: 2339 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2340"><td class="" data-reactid="2341"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2342"></span><!-- react-empty: 2343 --><!-- react-text: 2344 -->Edward King 9<!-- /react-text --></td><td class="" data-reactid="2345"><!-- react-text: 2346 -->32<!-- /react-text --></td><td class="" data-reactid="2347"><!-- react-text: 2348 -->London, Park Lane no. 9<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2349"><td class="" data-reactid="2350"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2351"></span><!-- react-empty: 2352 --><!-- react-text: 2353 -->Edward King 10<!-- /react-text --></td><td class="" data-reactid="2354"><!-- react-text: 2355 -->32<!-- /react-text --></td><td class="" data-reactid="2356"><!-- react-text: 2357 -->London, Park Lane no. 10<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2358"><td class="" data-reactid="2359"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2360"></span><!-- react-empty: 2361 --><!-- react-text: 2362 -->Edward King 11<!-- /react-text --></td><td class="" data-reactid="2363"><!-- react-text: 2364 -->32<!-- /react-text --></td><td class="" data-reactid="2365"><!-- react-text: 2366 -->London, Park Lane no. 11<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2367"><td class="" data-reactid="2368"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2369"></span><!-- react-empty: 2370 --><!-- react-text: 2371 -->Edward King 12<!-- /react-text --></td><td class="" data-reactid="2372"><!-- react-text: 2373 -->32<!-- /react-text --></td><td class="" data-reactid="2374"><!-- react-text: 2375 -->London, Park Lane no. 12<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2376"><td class="" data-reactid="2377"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2378"></span><!-- react-empty: 2379 --><!-- react-text: 2380 -->Edward King 13<!-- /react-text --></td><td class="" data-reactid="2381"><!-- react-text: 2382 -->32<!-- /react-text --></td><td class="" data-reactid="2383"><!-- react-text: 2384 -->London, Park Lane no. 13<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2385"><td class="" data-reactid="2386"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2387"></span><!-- react-empty: 2388 --><!-- react-text: 2389 -->Edward King 14<!-- /react-text --></td><td class="" data-reactid="2390"><!-- react-text: 2391 -->32<!-- /react-text --></td><td class="" data-reactid="2392"><!-- react-text: 2393 -->London, Park Lane no. 14<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2394"><td class="" data-reactid="2395"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2396"></span><!-- react-empty: 2397 --><!-- react-text: 2398 -->Edward King 15<!-- /react-text --></td><td class="" data-reactid="2399"><!-- react-text: 2400 -->32<!-- /react-text --></td><td class="" data-reactid="2401"><!-- react-text: 2402 -->London, Park Lane no. 15<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2403"><td class="" data-reactid="2404"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2405"></span><!-- react-empty: 2406 --><!-- react-text: 2407 -->Edward King 16<!-- /react-text --></td><td class="" data-reactid="2408"><!-- react-text: 2409 -->32<!-- /react-text --></td><td class="" data-reactid="2410"><!-- react-text: 2411 -->London, Park Lane no. 16<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2412"><td class="" data-reactid="2413"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2414"></span><!-- react-empty: 2415 --><!-- react-text: 2416 -->Edward King 17<!-- /react-text --></td><td class="" data-reactid="2417"><!-- react-text: 2418 -->32<!-- /react-text --></td><td class="" data-reactid="2419"><!-- react-text: 2420 -->London, Park Lane no. 17<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2421"><td class="" data-reactid="2422"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2423"></span><!-- react-empty: 2424 --><!-- react-text: 2425 -->Edward King 18<!-- /react-text --></td><td class="" data-reactid="2426"><!-- react-text: 2427 -->32<!-- /react-text --></td><td class="" data-reactid="2428"><!-- react-text: 2429 -->London, Park Lane no. 18<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2430"><td class="" data-reactid="2431"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2432"></span><!-- react-empty: 2433 --><!-- react-text: 2434 -->Edward King 19<!-- /react-text --></td><td class="" data-reactid="2435"><!-- react-text: 2436 -->32<!-- /react-text --></td><td class="" data-reactid="2437"><!-- react-text: 2438 -->London, Park Lane no. 19<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2439"><td class="" data-reactid="2440"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2441"></span><!-- react-empty: 2442 --><!-- react-text: 2443 -->Edward King 20<!-- /react-text --></td><td class="" data-reactid="2444"><!-- react-text: 2445 -->32<!-- /react-text --></td><td class="" data-reactid="2446"><!-- react-text: 2447 -->London, Park Lane no. 20<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2448"><td class="" data-reactid="2449"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2450"></span><!-- react-empty: 2451 --><!-- react-text: 2452 -->Edward King 21<!-- /react-text --></td><td class="" data-reactid="2453"><!-- react-text: 2454 -->32<!-- /react-text --></td><td class="" data-reactid="2455"><!-- react-text: 2456 -->London, Park Lane no. 21<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2457"><td class="" data-reactid="2458"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2459"></span><!-- react-empty: 2460 --><!-- react-text: 2461 -->Edward King 22<!-- /react-text --></td><td class="" data-reactid="2462"><!-- react-text: 2463 -->32<!-- /react-text --></td><td class="" data-reactid="2464"><!-- react-text: 2465 -->London, Park Lane no. 22<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2466"><td class="" data-reactid="2467"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2468"></span><!-- react-empty: 2469 --><!-- react-text: 2470 -->Edward King 23<!-- /react-text --></td><td class="" data-reactid="2471"><!-- react-text: 2472 -->32<!-- /react-text --></td><td class="" data-reactid="2473"><!-- react-text: 2474 -->London, Park Lane no. 23<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2475"><td class="" data-reactid="2476"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2477"></span><!-- react-empty: 2478 --><!-- react-text: 2479 -->Edward King 24<!-- /react-text --></td><td class="" data-reactid="2480"><!-- react-text: 2481 -->32<!-- /react-text --></td><td class="" data-reactid="2482"><!-- react-text: 2483 -->London, Park Lane no. 24<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2484"><td class="" data-reactid="2485"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2486"></span><!-- react-empty: 2487 --><!-- react-text: 2488 -->Edward King 25<!-- /react-text --></td><td class="" data-reactid="2489"><!-- react-text: 2490 -->32<!-- /react-text --></td><td class="" data-reactid="2491"><!-- react-text: 2492 -->London, Park Lane no. 25<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2493"><td class="" data-reactid="2494"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2495"></span><!-- react-empty: 2496 --><!-- react-text: 2497 -->Edward King 26<!-- /react-text --></td><td class="" data-reactid="2498"><!-- react-text: 2499 -->32<!-- /react-text --></td><td class="" data-reactid="2500"><!-- react-text: 2501 -->London, Park Lane no. 26<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2502"><td class="" data-reactid="2503"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2504"></span><!-- react-empty: 2505 --><!-- react-text: 2506 -->Edward King 27<!-- /react-text --></td><td class="" data-reactid="2507"><!-- react-text: 2508 -->32<!-- /react-text --></td><td class="" data-reactid="2509"><!-- react-text: 2510 -->London, Park Lane no. 27<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2511"><td class="" data-reactid="2512"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2513"></span><!-- react-empty: 2514 --><!-- react-text: 2515 -->Edward King 28<!-- /react-text --></td><td class="" data-reactid="2516"><!-- react-text: 2517 -->32<!-- /react-text --></td><td class="" data-reactid="2518"><!-- react-text: 2519 -->London, Park Lane no. 28<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2520"><td class="" data-reactid="2521"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2522"></span><!-- react-empty: 2523 --><!-- react-text: 2524 -->Edward King 29<!-- /react-text --></td><td class="" data-reactid="2525"><!-- react-text: 2526 -->32<!-- /react-text --></td><td class="" data-reactid="2527"><!-- react-text: 2528 -->London, Park Lane no. 29<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2529"><td class="" data-reactid="2530"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2531"></span><!-- react-empty: 2532 --><!-- react-text: 2533 -->Edward King 30<!-- /react-text --></td><td class="" data-reactid="2534"><!-- react-text: 2535 -->32<!-- /react-text --></td><td class="" data-reactid="2536"><!-- react-text: 2537 -->London, Park Lane no. 30<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2538"><td class="" data-reactid="2539"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2540"></span><!-- react-empty: 2541 --><!-- react-text: 2542 -->Edward King 31<!-- /react-text --></td><td class="" data-reactid="2543"><!-- react-text: 2544 -->32<!-- /react-text --></td><td class="" data-reactid="2545"><!-- react-text: 2546 -->London, Park Lane no. 31<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2547"><td class="" data-reactid="2548"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2549"></span><!-- react-empty: 2550 --><!-- react-text: 2551 -->Edward King 32<!-- /react-text --></td><td class="" data-reactid="2552"><!-- react-text: 2553 -->32<!-- /react-text --></td><td class="" data-reactid="2554"><!-- react-text: 2555 -->London, Park Lane no. 32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2556"><td class="" data-reactid="2557"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2558"></span><!-- react-empty: 2559 --><!-- react-text: 2560 -->Edward King 33<!-- /react-text --></td><td class="" data-reactid="2561"><!-- react-text: 2562 -->32<!-- /react-text --></td><td class="" data-reactid="2563"><!-- react-text: 2564 -->London, Park Lane no. 33<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2565"><td class="" data-reactid="2566"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2567"></span><!-- react-empty: 2568 --><!-- react-text: 2569 -->Edward King 34<!-- /react-text --></td><td class="" data-reactid="2570"><!-- react-text: 2571 -->32<!-- /react-text --></td><td class="" data-reactid="2572"><!-- react-text: 2573 -->London, Park Lane no. 34<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2574"><td class="" data-reactid="2575"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2576"></span><!-- react-empty: 2577 --><!-- react-text: 2578 -->Edward King 35<!-- /react-text --></td><td class="" data-reactid="2579"><!-- react-text: 2580 -->32<!-- /react-text --></td><td class="" data-reactid="2581"><!-- react-text: 2582 -->London, Park Lane no. 35<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2583"><td class="" data-reactid="2584"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2585"></span><!-- react-empty: 2586 --><!-- react-text: 2587 -->Edward King 36<!-- /react-text --></td><td class="" data-reactid="2588"><!-- react-text: 2589 -->32<!-- /react-text --></td><td class="" data-reactid="2590"><!-- react-text: 2591 -->London, Park Lane no. 36<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2592"><td class="" data-reactid="2593"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2594"></span><!-- react-empty: 2595 --><!-- react-text: 2596 -->Edward King 37<!-- /react-text --></td><td class="" data-reactid="2597"><!-- react-text: 2598 -->32<!-- /react-text --></td><td class="" data-reactid="2599"><!-- react-text: 2600 -->London, Park Lane no. 37<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2601"><td class="" data-reactid="2602"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2603"></span><!-- react-empty: 2604 --><!-- react-text: 2605 -->Edward King 38<!-- /react-text --></td><td class="" data-reactid="2606"><!-- react-text: 2607 -->32<!-- /react-text --></td><td class="" data-reactid="2608"><!-- react-text: 2609 -->London, Park Lane no. 38<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2610"><td class="" data-reactid="2611"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2612"></span><!-- react-empty: 2613 --><!-- react-text: 2614 -->Edward King 39<!-- /react-text --></td><td class="" data-reactid="2615"><!-- react-text: 2616 -->32<!-- /react-text --></td><td class="" data-reactid="2617"><!-- react-text: 2618 -->London, Park Lane no. 39<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2619"><td class="" data-reactid="2620"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2621"></span><!-- react-empty: 2622 --><!-- react-text: 2623 -->Edward King 40<!-- /react-text --></td><td class="" data-reactid="2624"><!-- react-text: 2625 -->32<!-- /react-text --></td><td class="" data-reactid="2626"><!-- react-text: 2627 -->London, Park Lane no. 40<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2628"><td class="" data-reactid="2629"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2630"></span><!-- react-empty: 2631 --><!-- react-text: 2632 -->Edward King 41<!-- /react-text --></td><td class="" data-reactid="2633"><!-- react-text: 2634 -->32<!-- /react-text --></td><td class="" data-reactid="2635"><!-- react-text: 2636 -->London, Park Lane no. 41<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2637"><td class="" data-reactid="2638"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2639"></span><!-- react-empty: 2640 --><!-- react-text: 2641 -->Edward King 42<!-- /react-text --></td><td class="" data-reactid="2642"><!-- react-text: 2643 -->32<!-- /react-text --></td><td class="" data-reactid="2644"><!-- react-text: 2645 -->London, Park Lane no. 42<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2646"><td class="" data-reactid="2647"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2648"></span><!-- react-empty: 2649 --><!-- react-text: 2650 -->Edward King 43<!-- /react-text --></td><td class="" data-reactid="2651"><!-- react-text: 2652 -->32<!-- /react-text --></td><td class="" data-reactid="2653"><!-- react-text: 2654 -->London, Park Lane no. 43<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2655"><td class="" data-reactid="2656"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2657"></span><!-- react-empty: 2658 --><!-- react-text: 2659 -->Edward King 44<!-- /react-text --></td><td class="" data-reactid="2660"><!-- react-text: 2661 -->32<!-- /react-text --></td><td class="" data-reactid="2662"><!-- react-text: 2663 -->London, Park Lane no. 44<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2664"><td class="" data-reactid="2665"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2666"></span><!-- react-empty: 2667 --><!-- react-text: 2668 -->Edward King 45<!-- /react-text --></td><td class="" data-reactid="2669"><!-- react-text: 2670 -->32<!-- /react-text --></td><td class="" data-reactid="2671"><!-- react-text: 2672 -->London, Park Lane no. 45<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2673"><td class="" data-reactid="2674"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2675"></span><!-- react-empty: 2676 --><!-- react-text: 2677 -->Edward King 46<!-- /react-text --></td><td class="" data-reactid="2678"><!-- react-text: 2679 -->32<!-- /react-text --></td><td class="" data-reactid="2680"><!-- react-text: 2681 -->London, Park Lane no. 46<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2682"><td class="" data-reactid="2683"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2684"></span><!-- react-empty: 2685 --><!-- react-text: 2686 -->Edward King 47<!-- /react-text --></td><td class="" data-reactid="2687"><!-- react-text: 2688 -->32<!-- /react-text --></td><td class="" data-reactid="2689"><!-- react-text: 2690 -->London, Park Lane no. 47<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2691"><td class="" data-reactid="2692"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2693"></span><!-- react-empty: 2694 --><!-- react-text: 2695 -->Edward King 48<!-- /react-text --></td><td class="" data-reactid="2696"><!-- react-text: 2697 -->32<!-- /react-text --></td><td class="" data-reactid="2698"><!-- react-text: 2699 -->London, Park Lane no. 48<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2700"><td class="" data-reactid="2701"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2702"></span><!-- react-empty: 2703 --><!-- react-text: 2704 -->Edward King 49<!-- /react-text --></td><td class="" data-reactid="2705"><!-- react-text: 2706 -->32<!-- /react-text --></td><td class="" data-reactid="2707"><!-- react-text: 2708 -->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="2709"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2710"><a data-reactid="2711"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2712"><a data-reactid="2713">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="2714"><a data-reactid="2715">2</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="2716"><a data-reactid="2717"></a></li><!-- react-empty: 2718 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="2719"><div class="code-box-title" data-reactid="2720"><a href="#components-table-demo-fixed-header" data-reactid="2721">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="2722"><i class="anticon anticon-edit" data-reactid="2723"></i></a></div><div data-reactid="2724"><p data-reactid="2725"><!-- react-text: 2726 -->Display large amounts of data in scrollable view.<!-- /react-text --></p><blockquote data-reactid="2727"><p data-reactid="2728"><!-- react-text: 2729 -->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="2730"></i></section><section class="highlight-wrapper" data-reactid="2731"><div class="highlight" data-reactid="2732"><i class="anticon anticon-copy code-box-code-copy" data-reactid="2733"></i><pre class="language-jsx" data-reactid="2734"><code data-reactid="2735"><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="2736"><section class="code-box-demo" data-reactid="2737"><div class="ant-table-wrapper" data-reactid="2738"><div class="ant-spin-nested-loading" data-reactid="2739"><div class="ant-spin-container" data-reactid="2740"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="2741"><div class="ant-table-content" data-reactid="2742"><div class="ant-table-scroll" data-reactid="2743"><div class="ant-table-body" style="overflow-x:auto;" data-reactid="2744"><table class="ant-table-fixed" style="width:1300px;" data-reactid="2745"><colgroup data-reactid="2746"><col style="width:100px;min-width:100px;" data-reactid="2747"/><col style="width:100px;min-width:100px;" data-reactid="2748"/><col data-reactid="2749"/><col data-reactid="2750"/><col data-reactid="2751"/><col data-reactid="2752"/><col data-reactid="2753"/><col data-reactid="2754"/><col data-reactid="2755"/><col data-reactid="2756"/><col style="width:100px;min-width:100px;" data-reactid="2757"/></colgroup><thead class="ant-table-thead" data-reactid="2758"><tr data-reactid="2759"><th class="" data-reactid="2760"><span data-reactid="2761"><!-- react-text: 2762 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2763"><span data-reactid="2764"><!-- react-text: 2765 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2766"><span data-reactid="2767"><!-- react-text: 2768 -->Column 1<!-- /react-text --></span></th><th class="" data-reactid="2769"><span data-reactid="2770"><!-- react-text: 2771 -->Column 2<!-- /react-text --></span></th><th class="" data-reactid="2772"><span data-reactid="2773"><!-- react-text: 2774 -->Column 3<!-- /react-text --></span></th><th class="" data-reactid="2775"><span data-reactid="2776"><!-- react-text: 2777 -->Column 4<!-- /react-text --></span></th><th class="" data-reactid="2778"><span data-reactid="2779"><!-- react-text: 2780 -->Column 5<!-- /react-text --></span></th><th class="" data-reactid="2781"><span data-reactid="2782"><!-- react-text: 2783 -->Column 6<!-- /react-text --></span></th><th class="" data-reactid="2784"><span data-reactid="2785"><!-- react-text: 2786 -->Column 7<!-- /react-text --></span></th><th class="" data-reactid="2787"><span data-reactid="2788"><!-- react-text: 2789 -->Column 8<!-- /react-text --></span></th><th class="" data-reactid="2790"><span data-reactid="2791"><!-- react-text: 2792 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2793"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2794"><td class="" data-reactid="2795"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2796"></span><!-- react-empty: 2797 --><!-- react-text: 2798 -->John Brown<!-- /react-text --></td><td class="" data-reactid="2799"><!-- react-text: 2800 -->32<!-- /react-text --></td><td class="" data-reactid="2801"><!-- react-text: 2802 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2803"><!-- react-text: 2804 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2805"><!-- react-text: 2806 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2807"><!-- react-text: 2808 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2809"><!-- react-text: 2810 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2811"><!-- react-text: 2812 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2813"><!-- react-text: 2814 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2815"><!-- react-text: 2816 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2817"><a href="#" data-reactid="2818">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2819"><td class="" data-reactid="2820"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2821"></span><!-- react-empty: 2822 --><!-- react-text: 2823 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2824"><!-- react-text: 2825 -->40<!-- /react-text --></td><td class="" data-reactid="2826"><!-- react-text: 2827 -->London Park<!-- /react-text --></td><td class="" data-reactid="2828"><!-- react-text: 2829 -->London Park<!-- /react-text --></td><td class="" data-reactid="2830"><!-- react-text: 2831 -->London Park<!-- /react-text --></td><td class="" data-reactid="2832"><!-- react-text: 2833 -->London Park<!-- /react-text --></td><td class="" data-reactid="2834"><!-- react-text: 2835 -->London Park<!-- /react-text --></td><td class="" data-reactid="2836"><!-- react-text: 2837 -->London Park<!-- /react-text --></td><td class="" data-reactid="2838"><!-- react-text: 2839 -->London Park<!-- /react-text --></td><td class="" data-reactid="2840"><!-- react-text: 2841 -->London Park<!-- /react-text --></td><td class="" data-reactid="2842"><a href="#" data-reactid="2843">action</a></td></tr></tbody></table></div></div><div class="ant-table-fixed-left" data-reactid="2844"><div class="ant-table-body-outer" data-reactid="2845"><div class="ant-table-body-inner" data-reactid="2846"><table class="ant-table-fixed" data-reactid="2847"><colgroup data-reactid="2848"><col style="width:100px;min-width:100px;" data-reactid="2849"/><col style="width:100px;min-width:100px;" data-reactid="2850"/></colgroup><thead class="ant-table-thead" data-reactid="2851"><tr data-reactid="2852"><th class="" data-reactid="2853"><span data-reactid="2854"><!-- react-text: 2855 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2856"><span data-reactid="2857"><!-- react-text: 2858 -->Age<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2859"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2860"><td class="" data-reactid="2861"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2862"></span><!-- react-empty: 2863 --><!-- react-text: 2864 -->John Brown<!-- /react-text --></td><td class="" data-reactid="2865"><!-- react-text: 2866 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2867"><td class="" data-reactid="2868"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2869"></span><!-- react-empty: 2870 --><!-- react-text: 2871 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2872"><!-- react-text: 2873 -->40<!-- /react-text --></td></tr></tbody></table></div></div></div><div class="ant-table-fixed-right" data-reactid="2874"><div class="ant-table-body-outer" data-reactid="2875"><div class="ant-table-body-inner" data-reactid="2876"><table class="ant-table-fixed" data-reactid="2877"><colgroup data-reactid="2878"><col style="width:100px;min-width:100px;" data-reactid="2879"/></colgroup><thead class="ant-table-thead" data-reactid="2880"><tr data-reactid="2881"><th class="" data-reactid="2882"><span data-reactid="2883"><!-- react-text: 2884 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2885"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2886"><td class="" data-reactid="2887"><a href="#" data-reactid="2888">action</a></td></tr><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></tbody></table></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="2892"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2893"><a data-reactid="2894"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2895"><a data-reactid="2896">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="2897"><a data-reactid="2898"></a></li><!-- react-empty: 2899 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="2900"><div class="code-box-title" data-reactid="2901"><a href="#components-table-demo-fixed-columns" data-reactid="2902">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="2903"><i class="anticon anticon-edit" data-reactid="2904"></i></a></div><div data-reactid="2905"><p data-reactid="2906"><!-- react-text: 2907 -->To fix some columns and scroll inside other columns, and you must set <!-- /react-text --><code data-reactid="2908"><!-- react-text: 2909 -->scoll.x<!-- /react-text --></code><!-- react-text: 2910 --> meanwhile.<!-- /react-text --></p><blockquote data-reactid="2911"><p data-reactid="2912"><!-- react-text: 2913 -->Specify the width of columns if header and cell do not align properly.<!-- /react-text --></p><p data-reactid="2914"><!-- react-text: 2915 -->A fixed value which is greater than table width for <!-- /react-text --><code data-reactid="2916"><!-- react-text: 2917 -->scroll.x<!-- /react-text --></code><!-- react-text: 2918 --> is recommended. The sum of unfixed columns should not greater than <!-- /react-text --><code data-reactid="2919"><!-- react-text: 2920 -->scroll.x<!-- /react-text --></code><!-- react-text: 2921 -->.<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="2922"></i></section><section class="highlight-wrapper" data-reactid="2923"><div class="highlight" data-reactid="2924"><i class="anticon anticon-copy code-box-code-copy" data-reactid="2925"></i><pre class="language-jsx" data-reactid="2926"><code data-reactid="2927"><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="2928"><section class="code-box-demo" data-reactid="2929"><div class="ant-table-wrapper" data-reactid="2930"><div class="ant-spin-nested-loading" data-reactid="2931"><div class="ant-spin-container" data-reactid="2932"><div class="ant-table ant-table-large ant-table-fixed-header ant-table-scroll-position-left" data-reactid="2933"><div class="ant-table-content" data-reactid="2934"><div class="ant-table-scroll" data-reactid="2935"><div class="ant-table-header" data-reactid="2936"><table class="ant-table-fixed" style="width:1500px;" data-reactid="2937"><colgroup data-reactid="2938"><col style="width:100px;min-width:100px;" data-reactid="2939"/><col style="width:100px;min-width:100px;" data-reactid="2940"/><col style="width:150px;min-width:150px;" data-reactid="2941"/><col style="width:150px;min-width:150px;" data-reactid="2942"/><col style="width:150px;min-width:150px;" 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 data-reactid="2948"/><col style="width:100px;min-width:100px;" data-reactid="2949"/></colgroup><thead class="ant-table-thead" data-reactid="2950"><tr data-reactid="2951"><th class="" data-reactid="2952"><span data-reactid="2953"><!-- react-text: 2954 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2955"><span data-reactid="2956"><!-- react-text: 2957 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2958"><span data-reactid="2959"><!-- react-text: 2960 -->Column 1<!-- /react-text --></span></th><th class="" data-reactid="2961"><span data-reactid="2962"><!-- react-text: 2963 -->Column 2<!-- /react-text --></span></th><th class="" data-reactid="2964"><span data-reactid="2965"><!-- react-text: 2966 -->Column 3<!-- /react-text --></span></th><th class="" data-reactid="2967"><span data-reactid="2968"><!-- react-text: 2969 -->Column 4<!-- /react-text --></span></th><th class="" data-reactid="2970"><span data-reactid="2971"><!-- react-text: 2972 -->Column 5<!-- /react-text --></span></th><th class="" data-reactid="2973"><span data-reactid="2974"><!-- react-text: 2975 -->Column 6<!-- /react-text --></span></th><th class="" data-reactid="2976"><span data-reactid="2977"><!-- react-text: 2978 -->Column 7<!-- /react-text --></span></th><th class="" data-reactid="2979"><span data-reactid="2980"><!-- react-text: 2981 -->Column 8<!-- /react-text --></span></th><th class="" data-reactid="2982"><span data-reactid="2983"><!-- react-text: 2984 -->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="2985"><table class="ant-table-fixed" style="width:1500px;" data-reactid="2986"><colgroup data-reactid="2987"><col style="width:100px;min-width:100px;" data-reactid="2988"/><col style="width:100px;min-width:100px;" data-reactid="2989"/><col style="width:150px;min-width:150px;" data-reactid="2990"/><col style="width:150px;min-width:150px;" data-reactid="2991"/><col style="width:150px;min-width:150px;" 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 data-reactid="2997"/><col style="width:100px;min-width:100px;" data-reactid="2998"/></colgroup><tbody class="ant-table-tbody" data-reactid="2999"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3000"><td class="" data-reactid="3001"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3002"></span><!-- react-empty: 3003 --><!-- react-text: 3004 -->Edrward 0<!-- /react-text --></td><td class="" data-reactid="3005"><!-- react-text: 3006 -->32<!-- /react-text --></td><td class="" data-reactid="3007"><!-- react-text: 3008 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3009"><!-- react-text: 3010 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3011"><!-- react-text: 3012 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3013"><!-- react-text: 3014 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3015"><!-- react-text: 3016 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3017"><!-- react-text: 3018 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3019"><!-- react-text: 3020 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3021"><!-- react-text: 3022 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3023"><a href="#" data-reactid="3024">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3025"><td class="" data-reactid="3026"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3027"></span><!-- react-empty: 3028 --><!-- react-text: 3029 -->Edrward 1<!-- /react-text --></td><td class="" data-reactid="3030"><!-- react-text: 3031 -->32<!-- /react-text --></td><td class="" data-reactid="3032"><!-- react-text: 3033 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3034"><!-- react-text: 3035 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3036"><!-- react-text: 3037 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3038"><!-- react-text: 3039 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3040"><!-- react-text: 3041 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3042"><!-- react-text: 3043 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3044"><!-- react-text: 3045 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3046"><!-- react-text: 3047 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3048"><a href="#" data-reactid="3049">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3050"><td class="" data-reactid="3051"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3052"></span><!-- react-empty: 3053 --><!-- react-text: 3054 -->Edrward 2<!-- /react-text --></td><td class="" data-reactid="3055"><!-- react-text: 3056 -->32<!-- /react-text --></td><td class="" data-reactid="3057"><!-- react-text: 3058 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3059"><!-- react-text: 3060 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3061"><!-- react-text: 3062 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3063"><!-- react-text: 3064 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3065"><!-- react-text: 3066 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3067"><!-- react-text: 3068 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3069"><!-- react-text: 3070 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3071"><!-- react-text: 3072 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3073"><a href="#" data-reactid="3074">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3075"><td class="" data-reactid="3076"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3077"></span><!-- react-empty: 3078 --><!-- react-text: 3079 -->Edrward 3<!-- /react-text --></td><td class="" data-reactid="3080"><!-- react-text: 3081 -->32<!-- /react-text --></td><td class="" data-reactid="3082"><!-- react-text: 3083 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3084"><!-- react-text: 3085 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3086"><!-- react-text: 3087 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3088"><!-- react-text: 3089 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3090"><!-- react-text: 3091 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3092"><!-- react-text: 3093 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3094"><!-- react-text: 3095 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3096"><!-- react-text: 3097 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3098"><a href="#" data-reactid="3099">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3100"><td class="" data-reactid="3101"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3102"></span><!-- react-empty: 3103 --><!-- react-text: 3104 -->Edrward 4<!-- /react-text --></td><td class="" data-reactid="3105"><!-- react-text: 3106 -->32<!-- /react-text --></td><td class="" data-reactid="3107"><!-- react-text: 3108 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3109"><!-- react-text: 3110 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3111"><!-- react-text: 3112 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3113"><!-- react-text: 3114 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3115"><!-- react-text: 3116 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3117"><!-- react-text: 3118 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3119"><!-- react-text: 3120 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3121"><!-- react-text: 3122 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3123"><a href="#" data-reactid="3124">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3125"><td class="" data-reactid="3126"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3127"></span><!-- react-empty: 3128 --><!-- react-text: 3129 -->Edrward 5<!-- /react-text --></td><td class="" data-reactid="3130"><!-- react-text: 3131 -->32<!-- /react-text --></td><td class="" data-reactid="3132"><!-- react-text: 3133 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3134"><!-- react-text: 3135 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3136"><!-- react-text: 3137 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3138"><!-- react-text: 3139 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3140"><!-- react-text: 3141 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3142"><!-- react-text: 3143 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3144"><!-- react-text: 3145 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3146"><!-- react-text: 3147 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3148"><a href="#" data-reactid="3149">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3150"><td class="" data-reactid="3151"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3152"></span><!-- react-empty: 3153 --><!-- react-text: 3154 -->Edrward 6<!-- /react-text --></td><td class="" data-reactid="3155"><!-- react-text: 3156 -->32<!-- /react-text --></td><td class="" data-reactid="3157"><!-- react-text: 3158 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3159"><!-- react-text: 3160 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3161"><!-- react-text: 3162 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3163"><!-- react-text: 3164 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3165"><!-- react-text: 3166 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3167"><!-- react-text: 3168 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3169"><!-- react-text: 3170 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3171"><!-- react-text: 3172 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3173"><a href="#" data-reactid="3174">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3175"><td class="" data-reactid="3176"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3177"></span><!-- react-empty: 3178 --><!-- react-text: 3179 -->Edrward 7<!-- /react-text --></td><td class="" data-reactid="3180"><!-- react-text: 3181 -->32<!-- /react-text --></td><td class="" data-reactid="3182"><!-- react-text: 3183 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3184"><!-- react-text: 3185 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3186"><!-- react-text: 3187 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3188"><!-- react-text: 3189 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3190"><!-- react-text: 3191 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3192"><!-- react-text: 3193 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3194"><!-- react-text: 3195 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3196"><!-- react-text: 3197 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3198"><a href="#" data-reactid="3199">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3200"><td class="" data-reactid="3201"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3202"></span><!-- react-empty: 3203 --><!-- react-text: 3204 -->Edrward 8<!-- /react-text --></td><td class="" data-reactid="3205"><!-- react-text: 3206 -->32<!-- /react-text --></td><td class="" data-reactid="3207"><!-- react-text: 3208 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3209"><!-- react-text: 3210 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3211"><!-- react-text: 3212 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3213"><!-- react-text: 3214 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3215"><!-- react-text: 3216 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3217"><!-- react-text: 3218 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3219"><!-- react-text: 3220 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3221"><!-- react-text: 3222 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3223"><a href="#" data-reactid="3224">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3225"><td class="" data-reactid="3226"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3227"></span><!-- react-empty: 3228 --><!-- react-text: 3229 -->Edrward 9<!-- /react-text --></td><td class="" data-reactid="3230"><!-- react-text: 3231 -->32<!-- /react-text --></td><td class="" data-reactid="3232"><!-- react-text: 3233 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3234"><!-- react-text: 3235 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3236"><!-- react-text: 3237 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3238"><!-- react-text: 3239 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3240"><!-- react-text: 3241 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3242"><!-- react-text: 3243 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3244"><!-- react-text: 3245 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3246"><!-- react-text: 3247 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3248"><a href="#" data-reactid="3249">action</a></td></tr></tbody></table></div></div><div class="ant-table-fixed-left" data-reactid="3250"><div class="ant-table-header" data-reactid="3251"><table class="ant-table-fixed" data-reactid="3252"><colgroup data-reactid="3253"><col style="width:100px;min-width:100px;" data-reactid="3254"/><col style="width:100px;min-width:100px;" data-reactid="3255"/></colgroup><thead class="ant-table-thead" data-reactid="3256"><tr data-reactid="3257"><th class="" data-reactid="3258"><span data-reactid="3259"><!-- react-text: 3260 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="3261"><span data-reactid="3262"><!-- react-text: 3263 -->Age<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" data-reactid="3264"><div class="ant-table-body-inner" style="max-height:300px;overflow-y:scroll;" data-reactid="3265"><table class="ant-table-fixed" data-reactid="3266"><colgroup data-reactid="3267"><col style="width:100px;min-width:100px;" data-reactid="3268"/><col style="width:100px;min-width:100px;" data-reactid="3269"/></colgroup><tbody class="ant-table-tbody" data-reactid="3270"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3271"><td class="" data-reactid="3272"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3273"></span><!-- react-empty: 3274 --><!-- react-text: 3275 -->Edrward 0<!-- /react-text --></td><td class="" data-reactid="3276"><!-- react-text: 3277 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3278"><td class="" data-reactid="3279"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3280"></span><!-- react-empty: 3281 --><!-- react-text: 3282 -->Edrward 1<!-- /react-text --></td><td class="" data-reactid="3283"><!-- react-text: 3284 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3285"><td class="" data-reactid="3286"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3287"></span><!-- react-empty: 3288 --><!-- react-text: 3289 -->Edrward 2<!-- /react-text --></td><td class="" data-reactid="3290"><!-- react-text: 3291 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3292"><td class="" data-reactid="3293"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3294"></span><!-- react-empty: 3295 --><!-- react-text: 3296 -->Edrward 3<!-- /react-text --></td><td class="" data-reactid="3297"><!-- react-text: 3298 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3299"><td class="" data-reactid="3300"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3301"></span><!-- react-empty: 3302 --><!-- react-text: 3303 -->Edrward 4<!-- /react-text --></td><td class="" data-reactid="3304"><!-- react-text: 3305 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3306"><td class="" data-reactid="3307"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3308"></span><!-- react-empty: 3309 --><!-- react-text: 3310 -->Edrward 5<!-- /react-text --></td><td class="" data-reactid="3311"><!-- react-text: 3312 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3313"><td class="" data-reactid="3314"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3315"></span><!-- react-empty: 3316 --><!-- react-text: 3317 -->Edrward 6<!-- /react-text --></td><td class="" data-reactid="3318"><!-- react-text: 3319 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3320"><td class="" data-reactid="3321"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3322"></span><!-- react-empty: 3323 --><!-- react-text: 3324 -->Edrward 7<!-- /react-text --></td><td class="" data-reactid="3325"><!-- react-text: 3326 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3327"><td class="" data-reactid="3328"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3329"></span><!-- react-empty: 3330 --><!-- react-text: 3331 -->Edrward 8<!-- /react-text --></td><td class="" data-reactid="3332"><!-- react-text: 3333 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3334"><td class="" data-reactid="3335"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3336"></span><!-- react-empty: 3337 --><!-- react-text: 3338 -->Edrward 9<!-- /react-text --></td><td class="" data-reactid="3339"><!-- react-text: 3340 -->32<!-- /react-text --></td></tr></tbody></table></div></div></div><div class="ant-table-fixed-right" data-reactid="3341"><div class="ant-table-header" data-reactid="3342"><table class="ant-table-fixed" data-reactid="3343"><colgroup data-reactid="3344"><col style="width:100px;min-width:100px;" data-reactid="3345"/></colgroup><thead class="ant-table-thead" data-reactid="3346"><tr data-reactid="3347"><th class="" data-reactid="3348"><span data-reactid="3349"><!-- react-text: 3350 -->Action<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" data-reactid="3351"><div class="ant-table-body-inner" style="max-height:300px;overflow-y:scroll;" data-reactid="3352"><table class="ant-table-fixed" data-reactid="3353"><colgroup data-reactid="3354"><col style="width:100px;min-width:100px;" data-reactid="3355"/></colgroup><tbody class="ant-table-tbody" data-reactid="3356"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3357"><td class="" data-reactid="3358"><a href="#" data-reactid="3359">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3360"><td class="" data-reactid="3361"><a href="#" data-reactid="3362">action</a></td></tr><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></tbody></table></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="3387"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3388"><a data-reactid="3389"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3390"><a data-reactid="3391">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="3392"><a data-reactid="3393">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="3394"><a data-reactid="3395">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="3396"><a data-reactid="3397">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next" data-reactid="3398"><a data-reactid="3399">5</a></li><li title="Next 5 Pages" class="ant-pagination-jump-next" data-reactid="3400"><a data-reactid="3401"></a></li><li title="10" class="ant-pagination-item ant-pagination-item-10" data-reactid="3402"><a data-reactid="3403">10</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="3404"><a data-reactid="3405"></a></li><!-- react-empty: 3406 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="3407"><div class="code-box-title" data-reactid="3408"><a href="#components-table-demo-fixed-columns-header" data-reactid="3409">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="3410"><i class="anticon anticon-edit" data-reactid="3411"></i></a></div><div data-reactid="3412"><p data-reactid="3413"><!-- react-text: 3414 -->A Solution for displaying large amounts of data with long columns.<!-- /react-text --></p><blockquote data-reactid="3415"><p data-reactid="3416"><!-- react-text: 3417 -->Specify the width of columns if header and cell do not align properly.<!-- /react-text --></p><p data-reactid="3418"><!-- react-text: 3419 -->A fixed value which is greater than table width for <!-- /react-text --><code data-reactid="3420"><!-- react-text: 3421 -->scroll.x<!-- /react-text --></code><!-- react-text: 3422 --> is recommended. The sum of unfixed columns should not greater than <!-- /react-text --><code data-reactid="3423"><!-- react-text: 3424 -->scroll.x<!-- /react-text --></code><!-- react-text: 3425 -->.<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3426"></i></section><section class="highlight-wrapper" data-reactid="3427"><div class="highlight" data-reactid="3428"><i class="anticon anticon-copy code-box-code-copy" data-reactid="3429"></i><pre class="language-jsx" data-reactid="3430"><code data-reactid="3431"><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="3432"><section class="code-box-demo" data-reactid="3433"><div class="ant-table-wrapper" data-reactid="3434"><div class="ant-spin-nested-loading" data-reactid="3435"><div class="ant-spin-container" data-reactid="3436"><div class="ant-table ant-table-middle ant-table-bordered ant-table-fixed-header ant-table-scroll-position-left" data-reactid="3437"><div class="ant-table-content" data-reactid="3438"><div class="ant-table-scroll" data-reactid="3439"><div class="ant-table-header" data-reactid="3440"><table class="ant-table-fixed" style="width:1010px;" data-reactid="3441"><colgroup data-reactid="3442"><col style="width:100px;min-width:100px;" data-reactid="3443"/><col style="width:100px;min-width:100px;" data-reactid="3444"/><col style="width:200px;min-width:200px;" data-reactid="3445"/><col style="width:50px;min-width:50px;" 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:200px;min-width:200px;" data-reactid="3449"/><col style="width:60px;min-width:60px;" data-reactid="3450"/></colgroup><thead class="ant-table-thead" data-reactid="3451"><tr data-reactid="3452"><th class="" rowspan="4" data-reactid="3453"><span data-reactid="3454"><!-- react-text: 3455 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="3456"></i></span></th><th class="" colspan="4" data-reactid="3457"><span data-reactid="3458"><!-- react-text: 3459 -->Other<!-- /react-text --></span></th><th class="" colspan="2" data-reactid="3460"><span data-reactid="3461"><!-- react-text: 3462 -->Company<!-- /react-text --></span></th><th class="" rowspan="4" data-reactid="3463"><span data-reactid="3464"><!-- react-text: 3465 -->Gender<!-- /react-text --></span></th></tr><tr data-reactid="3466"><th class="" rowspan="3" data-reactid="3467"><span data-reactid="3468"><!-- react-text: 3469 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="3470"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="3471"><i class="anticon anticon-caret-up" data-reactid="3472"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="3473"><i class="anticon anticon-caret-down" data-reactid="3474"></i></span></div></span></th><th class="" colspan="3" data-reactid="3475"><span data-reactid="3476"><!-- react-text: 3477 -->Address<!-- /react-text --></span></th><th class="" rowspan="3" data-reactid="3478"><span data-reactid="3479"><!-- react-text: 3480 -->Company Address<!-- /react-text --></span></th><th class="" rowspan="3" data-reactid="3481"><span data-reactid="3482"><!-- react-text: 3483 -->Company Name<!-- /react-text --></span></th></tr><tr data-reactid="3484"><th class="" rowspan="2" data-reactid="3485"><span data-reactid="3486"><!-- react-text: 3487 -->Street<!-- /react-text --></span></th><th class="" colspan="2" data-reactid="3488"><span data-reactid="3489"><!-- react-text: 3490 -->Block<!-- /react-text --></span></th></tr><tr data-reactid="3491"><th class="" data-reactid="3492"><span data-reactid="3493"><!-- react-text: 3494 -->Building<!-- /react-text --></span></th><th class="" data-reactid="3495"><span data-reactid="3496"><!-- react-text: 3497 -->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="3498"><table class="ant-table-fixed" style="width:1010px;" data-reactid="3499"><colgroup data-reactid="3500"><col style="width:100px;min-width:100px;" data-reactid="3501"/><col style="width:100px;min-width:100px;" data-reactid="3502"/><col style="width:200px;min-width:200px;" data-reactid="3503"/><col style="width:50px;min-width:50px;" 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:200px;min-width:200px;" data-reactid="3507"/><col style="width:60px;min-width:60px;" data-reactid="3508"/></colgroup><tbody class="ant-table-tbody" data-reactid="3509"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3510"><td class="" data-reactid="3511"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3512"></span><!-- react-empty: 3513 --><!-- react-text: 3514 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3515"><!-- react-text: 3516 -->1<!-- /react-text --></td><td class="" data-reactid="3517"><!-- react-text: 3518 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3519"><!-- react-text: 3520 -->C<!-- /react-text --></td><td class="" data-reactid="3521"><!-- react-text: 3522 -->2035<!-- /react-text --></td><td class="" data-reactid="3523"><!-- react-text: 3524 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3525"><!-- react-text: 3526 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3527"><!-- react-text: 3528 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3529"><td class="" data-reactid="3530"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3531"></span><!-- react-empty: 3532 --><!-- react-text: 3533 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3534"><!-- react-text: 3535 -->2<!-- /react-text --></td><td class="" data-reactid="3536"><!-- react-text: 3537 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3538"><!-- react-text: 3539 -->C<!-- /react-text --></td><td class="" data-reactid="3540"><!-- react-text: 3541 -->2035<!-- /react-text --></td><td class="" data-reactid="3542"><!-- react-text: 3543 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3544"><!-- react-text: 3545 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3546"><!-- react-text: 3547 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3548"><td class="" data-reactid="3549"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3550"></span><!-- react-empty: 3551 --><!-- react-text: 3552 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3553"><!-- react-text: 3554 -->3<!-- /react-text --></td><td class="" data-reactid="3555"><!-- react-text: 3556 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3557"><!-- react-text: 3558 -->C<!-- /react-text --></td><td class="" data-reactid="3559"><!-- react-text: 3560 -->2035<!-- /react-text --></td><td class="" data-reactid="3561"><!-- react-text: 3562 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3563"><!-- react-text: 3564 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3565"><!-- react-text: 3566 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3567"><td class="" data-reactid="3568"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3569"></span><!-- react-empty: 3570 --><!-- react-text: 3571 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3572"><!-- react-text: 3573 -->4<!-- /react-text --></td><td class="" data-reactid="3574"><!-- react-text: 3575 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3576"><!-- react-text: 3577 -->C<!-- /react-text --></td><td class="" data-reactid="3578"><!-- react-text: 3579 -->2035<!-- /react-text --></td><td class="" data-reactid="3580"><!-- react-text: 3581 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3582"><!-- react-text: 3583 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3584"><!-- react-text: 3585 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3586"><td class="" data-reactid="3587"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3588"></span><!-- react-empty: 3589 --><!-- react-text: 3590 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3591"><!-- react-text: 3592 -->5<!-- /react-text --></td><td class="" data-reactid="3593"><!-- react-text: 3594 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3595"><!-- react-text: 3596 -->C<!-- /react-text --></td><td class="" data-reactid="3597"><!-- react-text: 3598 -->2035<!-- /react-text --></td><td class="" data-reactid="3599"><!-- react-text: 3600 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3601"><!-- react-text: 3602 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3603"><!-- react-text: 3604 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3605"><td class="" data-reactid="3606"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3607"></span><!-- react-empty: 3608 --><!-- react-text: 3609 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3610"><!-- react-text: 3611 -->6<!-- /react-text --></td><td class="" data-reactid="3612"><!-- react-text: 3613 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3614"><!-- react-text: 3615 -->C<!-- /react-text --></td><td class="" data-reactid="3616"><!-- react-text: 3617 -->2035<!-- /react-text --></td><td class="" data-reactid="3618"><!-- react-text: 3619 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3620"><!-- react-text: 3621 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3622"><!-- react-text: 3623 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3624"><td class="" data-reactid="3625"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3626"></span><!-- react-empty: 3627 --><!-- react-text: 3628 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3629"><!-- react-text: 3630 -->7<!-- /react-text --></td><td class="" data-reactid="3631"><!-- react-text: 3632 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3633"><!-- react-text: 3634 -->C<!-- /react-text --></td><td class="" data-reactid="3635"><!-- react-text: 3636 -->2035<!-- /react-text --></td><td class="" data-reactid="3637"><!-- react-text: 3638 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3639"><!-- react-text: 3640 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3641"><!-- react-text: 3642 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3643"><td class="" data-reactid="3644"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3645"></span><!-- react-empty: 3646 --><!-- react-text: 3647 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3648"><!-- react-text: 3649 -->8<!-- /react-text --></td><td class="" data-reactid="3650"><!-- react-text: 3651 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3652"><!-- react-text: 3653 -->C<!-- /react-text --></td><td class="" data-reactid="3654"><!-- react-text: 3655 -->2035<!-- /react-text --></td><td class="" data-reactid="3656"><!-- react-text: 3657 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3658"><!-- react-text: 3659 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3660"><!-- react-text: 3661 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3662"><td class="" data-reactid="3663"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3664"></span><!-- react-empty: 3665 --><!-- react-text: 3666 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3667"><!-- react-text: 3668 -->9<!-- /react-text --></td><td class="" data-reactid="3669"><!-- react-text: 3670 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3671"><!-- react-text: 3672 -->C<!-- /react-text --></td><td class="" data-reactid="3673"><!-- react-text: 3674 -->2035<!-- /react-text --></td><td class="" data-reactid="3675"><!-- react-text: 3676 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3677"><!-- react-text: 3678 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3679"><!-- react-text: 3680 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3681"><td class="" data-reactid="3682"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3683"></span><!-- react-empty: 3684 --><!-- react-text: 3685 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3686"><!-- react-text: 3687 -->10<!-- /react-text --></td><td class="" data-reactid="3688"><!-- react-text: 3689 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3690"><!-- react-text: 3691 -->C<!-- /react-text --></td><td class="" data-reactid="3692"><!-- react-text: 3693 -->2035<!-- /react-text --></td><td class="" data-reactid="3694"><!-- react-text: 3695 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3696"><!-- react-text: 3697 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3698"><!-- react-text: 3699 -->M<!-- /react-text --></td></tr></tbody></table></div></div><div class="ant-table-fixed-left" data-reactid="3700"><div class="ant-table-header" data-reactid="3701"><table class="ant-table-fixed" data-reactid="3702"><colgroup data-reactid="3703"><col style="width:100px;min-width:100px;" data-reactid="3704"/></colgroup><thead class="ant-table-thead" data-reactid="3705"><tr data-reactid="3706"><th class="" rowspan="4" data-reactid="3707"><span data-reactid="3708"><!-- react-text: 3709 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="3710"></i></span></th></tr></thead></table></div><div class="ant-table-body-outer" data-reactid="3711"><div class="ant-table-body-inner" style="max-height:240px;overflow-y:scroll;" data-reactid="3712"><table class="ant-table-fixed" data-reactid="3713"><colgroup data-reactid="3714"><col style="width:100px;min-width:100px;" data-reactid="3715"/></colgroup><tbody class="ant-table-tbody" data-reactid="3716"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3717"><td class="" data-reactid="3718"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3719"></span><!-- react-empty: 3720 --><!-- react-text: 3721 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3722"><td class="" data-reactid="3723"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3724"></span><!-- react-empty: 3725 --><!-- react-text: 3726 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3727"><td class="" data-reactid="3728"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3729"></span><!-- react-empty: 3730 --><!-- react-text: 3731 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3732"><td class="" data-reactid="3733"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3734"></span><!-- react-empty: 3735 --><!-- react-text: 3736 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3737"><td class="" data-reactid="3738"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3739"></span><!-- react-empty: 3740 --><!-- react-text: 3741 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3742"><td class="" data-reactid="3743"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3744"></span><!-- react-empty: 3745 --><!-- react-text: 3746 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3747"><td class="" data-reactid="3748"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3749"></span><!-- react-empty: 3750 --><!-- react-text: 3751 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3752"><td class="" data-reactid="3753"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3754"></span><!-- react-empty: 3755 --><!-- react-text: 3756 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3757"><td class="" data-reactid="3758"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3759"></span><!-- react-empty: 3760 --><!-- react-text: 3761 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3762"><td class="" data-reactid="3763"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3764"></span><!-- react-empty: 3765 --><!-- react-text: 3766 -->John Brown<!-- /react-text --></td></tr></tbody></table></div></div></div><div class="ant-table-fixed-right" data-reactid="3767"><div class="ant-table-header" data-reactid="3768"><table class="ant-table-fixed" data-reactid="3769"><colgroup data-reactid="3770"><col style="width:60px;min-width:60px;" data-reactid="3771"/></colgroup><thead class="ant-table-thead" data-reactid="3772"><tr data-reactid="3773"><th class="" rowspan="4" data-reactid="3774"><span data-reactid="3775"><!-- react-text: 3776 -->Gender<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" data-reactid="3777"><div class="ant-table-body-inner" style="max-height:240px;overflow-y:scroll;" data-reactid="3778"><table class="ant-table-fixed" data-reactid="3779"><colgroup data-reactid="3780"><col style="width:60px;min-width:60px;" data-reactid="3781"/></colgroup><tbody class="ant-table-tbody" data-reactid="3782"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3783"><td class="" data-reactid="3784"><!-- react-text: 3785 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3786"><td class="" data-reactid="3787"><!-- react-text: 3788 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3789"><td class="" data-reactid="3790"><!-- react-text: 3791 -->M<!-- /react-text --></td></tr><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></tbody></table></div></div></div></div></div><ul class="ant-pagination ant-table-pagination mini" unselectable="unselectable" data-reactid="3813"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3814"><a data-reactid="3815"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3816"><a data-reactid="3817">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="3818"><a data-reactid="3819">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="3820"><a data-reactid="3821">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="3822"><a data-reactid="3823">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next" data-reactid="3824"><a data-reactid="3825">5</a></li><li title="Next 5 Pages" class="ant-pagination-jump-next" data-reactid="3826"><a data-reactid="3827"></a></li><li title="10" class="ant-pagination-item ant-pagination-item-10" data-reactid="3828"><a data-reactid="3829">10</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="3830"><a data-reactid="3831"></a></li><!-- react-empty: 3832 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="3833"><div class="code-box-title" data-reactid="3834"><a href="#components-table-demo-grouping-columns" data-reactid="3835">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="3836"><i class="anticon anticon-edit" data-reactid="3837"></i></a></div><div data-reactid="3838"><p data-reactid="3839"><!-- react-text: 3840 -->Group table head with <!-- /react-text --><code data-reactid="3841"><!-- react-text: 3842 -->columns[n].children<!-- /react-text --></code><!-- react-text: 3843 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3844"></i></section><section class="highlight-wrapper" data-reactid="3845"><div class="highlight" data-reactid="3846"><i class="anticon anticon-copy code-box-code-copy" data-reactid="3847"></i><pre class="language-jsx" data-reactid="3848"><code data-reactid="3849"><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="3850"><section class="code-box-demo" data-reactid="3851"><div data-reactid="3852"><button type="button" class="ant-btn editable-add-btn" data-reactid="3853"><span data-reactid="3854">Add</span></button><div class="ant-table-wrapper" data-reactid="3855"><div class="ant-spin-nested-loading" data-reactid="3856"><div class="ant-spin-container" data-reactid="3857"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="3858"><div class="ant-table-content" data-reactid="3859"><div class="ant-table-body" data-reactid="3860"><table class="" data-reactid="3861"><colgroup data-reactid="3862"><col style="width:30%;min-width:30%;" data-reactid="3863"/><col data-reactid="3864"/><col data-reactid="3865"/><col data-reactid="3866"/></colgroup><thead class="ant-table-thead" data-reactid="3867"><tr data-reactid="3868"><th class="" data-reactid="3869"><span data-reactid="3870"><!-- react-text: 3871 -->name<!-- /react-text --></span></th><th class="" data-reactid="3872"><span data-reactid="3873"><!-- react-text: 3874 -->age<!-- /react-text --></span></th><th class="" data-reactid="3875"><span data-reactid="3876"><!-- react-text: 3877 -->address<!-- /react-text --></span></th><th class="" data-reactid="3878"><span data-reactid="3879"><!-- react-text: 3880 -->operation<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="3881"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3882"><td class="" data-reactid="3883"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3884"></span><!-- react-empty: 3885 --><div class="editable-cell" data-reactid="3886"><div class="editable-cell-text-wrapper" data-reactid="3887"><!-- react-text: 3888 -->Edward King 0<!-- /react-text --><i class="anticon anticon-edit editable-cell-icon" data-reactid="3889"></i></div></div></td><td class="" data-reactid="3890"><!-- react-text: 3891 -->32<!-- /react-text --></td><td class="" data-reactid="3892"><!-- react-text: 3893 -->London, Park Lane no. 0<!-- /react-text --></td><td class="" data-reactid="3894"><a href="#" data-reactid="3895">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3896"><td class="" data-reactid="3897"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3898"></span><!-- react-empty: 3899 --><div class="editable-cell" data-reactid="3900"><div class="editable-cell-text-wrapper" data-reactid="3901"><!-- react-text: 3902 -->Edward King 1<!-- /react-text --><i class="anticon anticon-edit editable-cell-icon" data-reactid="3903"></i></div></div></td><td class="" data-reactid="3904"><!-- react-text: 3905 -->32<!-- /react-text --></td><td class="" data-reactid="3906"><!-- react-text: 3907 -->London, Park Lane no. 1<!-- /react-text --></td><td class="" data-reactid="3908"><a href="#" data-reactid="3909">Delete</a></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="3910"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3911"><a data-reactid="3912"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3913"><a data-reactid="3914">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="3915"><a data-reactid="3916"></a></li><!-- react-empty: 3917 --></ul></div></div></div></div><style data-reactid="3918">.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="3919"><div class="code-box-title" data-reactid="3920"><a href="#components-table-demo-edit-cell" data-reactid="3921">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="3922"><i class="anticon anticon-edit" data-reactid="3923"></i></a></div><div data-reactid="3924"><p data-reactid="3925"><!-- react-text: 3926 -->Table with editable cells.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3927"></i></section><section class="highlight-wrapper" data-reactid="3928"><div class="highlight" data-reactid="3929"><i class="anticon anticon-copy code-box-code-copy" data-reactid="3930"></i><pre class="language-jsx" data-reactid="3931"><code data-reactid="3932"><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="3933"><pre data-reactid="3934"><code class="css" data-reactid="3935"><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="3936"><section class="code-box-demo" data-reactid="3937"><div class="ant-table-wrapper" data-reactid="3938"><div class="ant-spin-nested-loading" data-reactid="3939"><div class="ant-spin-container" data-reactid="3940"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="3941"><div class="ant-table-content" data-reactid="3942"><div class="ant-table-body" data-reactid="3943"><table class="" data-reactid="3944"><colgroup data-reactid="3945"><col style="width:25%;min-width:25%;" data-reactid="3946"/><col style="width:15%;min-width:15%;" data-reactid="3947"/><col style="width:40%;min-width:40%;" data-reactid="3948"/><col data-reactid="3949"/></colgroup><thead class="ant-table-thead" data-reactid="3950"><tr data-reactid="3951"><th class="" data-reactid="3952"><span data-reactid="3953"><!-- react-text: 3954 -->name<!-- /react-text --></span></th><th class="" data-reactid="3955"><span data-reactid="3956"><!-- react-text: 3957 -->age<!-- /react-text --></span></th><th class="" data-reactid="3958"><span data-reactid="3959"><!-- react-text: 3960 -->address<!-- /react-text --></span></th><th class="" data-reactid="3961"><span data-reactid="3962"><!-- react-text: 3963 -->operation<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="3964"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3965"><td class="" data-reactid="3966"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3967"></span><!-- react-empty: 3968 --><div data-reactid="3969"><div class="editable-row-text" data-reactid="3970">Edward King 0</div></div></td><td class="" data-reactid="3971"><div data-reactid="3972"><div class="editable-row-text" data-reactid="3973">32</div></div></td><td class="" data-reactid="3974"><!-- react-text: 3975 -->London, Park Lane no. 0<!-- /react-text --></td><td class="" data-reactid="3976"><div class="editable-row-operations" data-reactid="3977"><span data-reactid="3978"><a data-reactid="3979">Edit</a></span></div></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="3980"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3981"><a data-reactid="3982"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3983"><a data-reactid="3984">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="3985"><a data-reactid="3986"></a></li><!-- react-empty: 3987 --></ul></div></div></div><style data-reactid="3988">.editable-row-text {
|
||
padding: 5px;
|
||
}
|
||
|
||
.editable-row-operations a {
|
||
margin-right: 8px;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="3989"><div class="code-box-title" data-reactid="3990"><a href="#components-table-demo-edit-row" data-reactid="3991">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="3992"><i class="anticon anticon-edit" data-reactid="3993"></i></a></div><div data-reactid="3994"><p data-reactid="3995"><!-- react-text: 3996 -->Table with editable rows.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3997"></i></section><section class="highlight-wrapper" data-reactid="3998"><div class="highlight" data-reactid="3999"><i class="anticon anticon-copy code-box-code-copy" data-reactid="4000"></i><pre class="language-jsx" data-reactid="4001"><code data-reactid="4002"><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="4003"><pre data-reactid="4004"><code class="css" data-reactid="4005"><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="4006"><section class="code-box-demo" data-reactid="4007"><div class="ant-table-wrapper components-table-demo-nested" data-reactid="4008"><div class="ant-spin-nested-loading" data-reactid="4009"><div class="ant-spin-container" data-reactid="4010"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="4011"><div class="ant-table-content" data-reactid="4012"><div class="ant-table-body" data-reactid="4013"><table class="" data-reactid="4014"><colgroup data-reactid="4015"><col class="ant-table-expand-icon-col" data-reactid="4016"/><col data-reactid="4017"/><col data-reactid="4018"/><col data-reactid="4019"/><col data-reactid="4020"/><col data-reactid="4021"/><col data-reactid="4022"/><col data-reactid="4023"/></colgroup><thead class="ant-table-thead" data-reactid="4024"><tr data-reactid="4025"><th class="ant-table-expand-icon-th" title="" rowspan="1" data-reactid="4026"></th><th class="" data-reactid="4027"><span data-reactid="4028"><!-- react-text: 4029 -->Name<!-- /react-text --></span></th><th class="" data-reactid="4030"><span data-reactid="4031"><!-- react-text: 4032 -->Platform<!-- /react-text --></span></th><th class="" data-reactid="4033"><span data-reactid="4034"><!-- react-text: 4035 -->Version<!-- /react-text --></span></th><th class="" data-reactid="4036"><span data-reactid="4037"><!-- react-text: 4038 -->Upgraded<!-- /react-text --></span></th><th class="" data-reactid="4039"><span data-reactid="4040"><!-- react-text: 4041 -->Creator<!-- /react-text --></span></th><th class="" data-reactid="4042"><span data-reactid="4043"><!-- react-text: 4044 -->Date<!-- /react-text --></span></th><th class="" data-reactid="4045"><span data-reactid="4046"><!-- react-text: 4047 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="4048"><tr class="ant-table-row ant-table-row-level-0" data-reactid="4049"><td class="ant-table-row-expand-icon-cell" data-reactid="4050"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4051"></span></td><td class="" data-reactid="4052"><!-- react-text: 4053 -->Screem<!-- /react-text --></td><td class="" data-reactid="4054"><!-- react-text: 4055 -->iOS<!-- /react-text --></td><td class="" data-reactid="4056"><!-- react-text: 4057 -->10.3.4.5654<!-- /react-text --></td><td class="" data-reactid="4058"><!-- react-text: 4059 -->500<!-- /react-text --></td><td class="" data-reactid="4060"><!-- react-text: 4061 -->Jack<!-- /react-text --></td><td class="" data-reactid="4062"><!-- react-text: 4063 -->2014-12-24 23:12:00<!-- /react-text --></td><td class="" data-reactid="4064"><a href="#" data-reactid="4065">Publish</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4066"><td class="ant-table-row-expand-icon-cell" data-reactid="4067"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4068"></span></td><td class="" data-reactid="4069"><!-- react-text: 4070 -->Screem<!-- /react-text --></td><td class="" data-reactid="4071"><!-- react-text: 4072 -->iOS<!-- /react-text --></td><td class="" data-reactid="4073"><!-- react-text: 4074 -->10.3.4.5654<!-- /react-text --></td><td class="" data-reactid="4075"><!-- react-text: 4076 -->500<!-- /react-text --></td><td class="" data-reactid="4077"><!-- react-text: 4078 -->Jack<!-- /react-text --></td><td class="" data-reactid="4079"><!-- react-text: 4080 -->2014-12-24 23:12:00<!-- /react-text --></td><td class="" data-reactid="4081"><a href="#" data-reactid="4082">Publish</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4083"><td class="ant-table-row-expand-icon-cell" data-reactid="4084"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4085"></span></td><td class="" data-reactid="4086"><!-- react-text: 4087 -->Screem<!-- /react-text --></td><td class="" data-reactid="4088"><!-- react-text: 4089 -->iOS<!-- /react-text --></td><td class="" data-reactid="4090"><!-- react-text: 4091 -->10.3.4.5654<!-- /react-text --></td><td class="" data-reactid="4092"><!-- react-text: 4093 -->500<!-- /react-text --></td><td class="" data-reactid="4094"><!-- react-text: 4095 -->Jack<!-- /react-text --></td><td class="" data-reactid="4096"><!-- react-text: 4097 -->2014-12-24 23:12:00<!-- /react-text --></td><td class="" data-reactid="4098"><a href="#" data-reactid="4099">Publish</a></td></tr></tbody></table></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="4100"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="4101"><a data-reactid="4102"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="4103"><a data-reactid="4104">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="4105"><a data-reactid="4106"></a></li><!-- react-empty: 4107 --></ul></div></div></div><style data-reactid="4108">.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="4109"><div class="code-box-title" data-reactid="4110"><a href="#components-table-demo-nested-table" data-reactid="4111">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="4112"><i class="anticon anticon-edit" data-reactid="4113"></i></a></div><div data-reactid="4114"><p data-reactid="4115"><!-- react-text: 4116 -->Showing more detailed info of every row.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="4117"></i></section><section class="highlight-wrapper" data-reactid="4118"><div class="highlight" data-reactid="4119"><i class="anticon anticon-copy code-box-code-copy" data-reactid="4120"></i><pre class="language-jsx" data-reactid="4121"><code data-reactid="4122"><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="4123"><pre data-reactid="4124"><code class="css" data-reactid="4125"><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="4126"><section class="code-box-demo" data-reactid="4127"><div data-reactid="4128"><div class="components-table-demo-control-bar" data-reactid="4129"><form class="ant-form ant-form-inline" data-reactid="4130"><div class="ant-row ant-form-item" data-reactid="4131"><div class="ant-form-item-label" data-reactid="4132"><label class="" title="Bordered" data-reactid="4133">Bordered</label></div><div class="ant-form-item-control-wrapper" data-reactid="4134"><div class="ant-form-item-control " data-reactid="4135"><span class="ant-switch" tabindex="0" data-reactid="4136"><span class="ant-switch-inner" data-reactid="4137"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4138"><div class="ant-form-item-label" data-reactid="4139"><label class="" title="loading" data-reactid="4140">loading</label></div><div class="ant-form-item-control-wrapper" data-reactid="4141"><div class="ant-form-item-control " data-reactid="4142"><span class="ant-switch" tabindex="0" data-reactid="4143"><span class="ant-switch-inner" data-reactid="4144"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4145"><div class="ant-form-item-label" data-reactid="4146"><label class="" title="Pagination" data-reactid="4147">Pagination</label></div><div class="ant-form-item-control-wrapper" data-reactid="4148"><div class="ant-form-item-control " data-reactid="4149"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4150"><span class="ant-switch-inner" data-reactid="4151"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4152"><div class="ant-form-item-label" data-reactid="4153"><label class="" title="Title" data-reactid="4154">Title</label></div><div class="ant-form-item-control-wrapper" data-reactid="4155"><div class="ant-form-item-control " data-reactid="4156"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4157"><span class="ant-switch-inner" data-reactid="4158"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4159"><div class="ant-form-item-label" data-reactid="4160"><label class="" title="Column Header" data-reactid="4161">Column Header</label></div><div class="ant-form-item-control-wrapper" data-reactid="4162"><div class="ant-form-item-control " data-reactid="4163"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4164"><span class="ant-switch-inner" data-reactid="4165"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4166"><div class="ant-form-item-label" data-reactid="4167"><label class="" title="Footer" data-reactid="4168">Footer</label></div><div class="ant-form-item-control-wrapper" data-reactid="4169"><div class="ant-form-item-control " data-reactid="4170"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4171"><span class="ant-switch-inner" data-reactid="4172"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4173"><div class="ant-form-item-label" data-reactid="4174"><label class="" title="Expandable" data-reactid="4175">Expandable</label></div><div class="ant-form-item-control-wrapper" data-reactid="4176"><div class="ant-form-item-control " data-reactid="4177"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4178"><span class="ant-switch-inner" data-reactid="4179"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4180"><div class="ant-form-item-label" data-reactid="4181"><label class="" title="Checkbox" data-reactid="4182">Checkbox</label></div><div class="ant-form-item-control-wrapper" data-reactid="4183"><div class="ant-form-item-control " data-reactid="4184"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4185"><span class="ant-switch-inner" data-reactid="4186"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4187"><div class="ant-form-item-label" data-reactid="4188"><label class="" title="Fixed Header" data-reactid="4189">Fixed Header</label></div><div class="ant-form-item-control-wrapper" data-reactid="4190"><div class="ant-form-item-control " data-reactid="4191"><span class="ant-switch" tabindex="0" data-reactid="4192"><span class="ant-switch-inner" data-reactid="4193"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4194"><div class="ant-form-item-label" data-reactid="4195"><label class="" title="Size" data-reactid="4196">Size</label></div><div class="ant-form-item-control-wrapper" data-reactid="4197"><div class="ant-form-item-control " data-reactid="4198"><div class="ant-radio-group ant-radio-group-default" data-reactid="4199"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" data-reactid="4200"><span class="ant-radio-button ant-radio-button-checked" data-reactid="4201"><input type="radio" class="ant-radio-button-input" checked="" data-reactid="4202"/><span class="ant-radio-button-inner" data-reactid="4203"></span></span><span data-reactid="4204">Default</span></label><label class="ant-radio-button-wrapper" data-reactid="4205"><span class="ant-radio-button" data-reactid="4206"><input type="radio" class="ant-radio-button-input" data-reactid="4207"/><span class="ant-radio-button-inner" data-reactid="4208"></span></span><span data-reactid="4209">Middle</span></label><label class="ant-radio-button-wrapper" data-reactid="4210"><span class="ant-radio-button" data-reactid="4211"><input type="radio" class="ant-radio-button-input" data-reactid="4212"/><span class="ant-radio-button-inner" data-reactid="4213"></span></span><span data-reactid="4214">Small</span></label></div></div></div></div></form></div><div class="ant-table-wrapper" data-reactid="4215"><div class="ant-spin-nested-loading" data-reactid="4216"><div class="ant-spin-container" data-reactid="4217"><div class="ant-table ant-table-default ant-table-scroll-position-left" data-reactid="4218"><div class="ant-table-title" data-reactid="4219">Here is title</div><div class="ant-table-content" data-reactid="4220"><div class="ant-table-body" data-reactid="4221"><table class="" data-reactid="4222"><colgroup data-reactid="4223"><col class="ant-table-expand-icon-col" data-reactid="4224"/><col data-reactid="4225"/><col style="width:150px;min-width:150px;" data-reactid="4226"/><col style="width:70px;min-width:70px;" data-reactid="4227"/><col data-reactid="4228"/><col style="width:360px;min-width:360px;" data-reactid="4229"/></colgroup><thead class="ant-table-thead" data-reactid="4230"><tr data-reactid="4231"><th class="ant-table-expand-icon-th" title="" rowspan="1" data-reactid="4232"></th><th class="ant-table-selection-column" data-reactid="4233"><span data-reactid="4234"><div class="ant-table-selection" data-reactid="4235"><label class="ant-table-selection-select-all ant-checkbox-wrapper" data-reactid="4236"><span class="ant-checkbox" data-reactid="4237"><input type="checkbox" class="ant-checkbox-input" data-reactid="4238"/><span class="ant-checkbox-inner" data-reactid="4239"></span></span></label><div class="ant-table-selection-down ant-dropdown-trigger" data-reactid="4240"><i class="anticon anticon-down" data-reactid="4241"></i></div></div></span></th><th class="" data-reactid="4242"><span data-reactid="4243"><!-- react-text: 4244 -->Name<!-- /react-text --></span></th><th class="" data-reactid="4245"><span data-reactid="4246"><!-- react-text: 4247 -->Age<!-- /react-text --></span></th><th class="" data-reactid="4248"><span data-reactid="4249"><!-- react-text: 4250 -->Address<!-- /react-text --></span></th><th class="" data-reactid="4251"><span data-reactid="4252"><!-- react-text: 4253 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="4254"><tr class="ant-table-row ant-table-row-level-0" data-reactid="4255"><td class="ant-table-row-expand-icon-cell" data-reactid="4256"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4257"></span></td><td class="ant-table-selection-column" data-reactid="4258"><span data-reactid="4259"><label class="ant-checkbox-wrapper" data-reactid="4260"><span class="ant-checkbox" data-reactid="4261"><input type="checkbox" class="ant-checkbox-input" data-reactid="4262"/><span class="ant-checkbox-inner" data-reactid="4263"></span></span></label></span></td><td class="" data-reactid="4264"><a href="#" data-reactid="4265">John Brown</a></td><td class="" data-reactid="4266"><!-- react-text: 4267 -->12<!-- /react-text --></td><td class="" data-reactid="4268"><!-- react-text: 4269 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="4270"><span data-reactid="4271"><a href="#" data-reactid="4272"><!-- react-text: 4273 -->Action 一 <!-- /react-text --><!-- react-text: 4274 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4275"></span><a href="#" data-reactid="4276">Delete</a><span class="ant-divider" data-reactid="4277"></span><a href="#" class="ant-dropdown-link" data-reactid="4278"><!-- react-text: 4279 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4280"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4281"><td class="ant-table-row-expand-icon-cell" data-reactid="4282"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4283"></span></td><td class="ant-table-selection-column" data-reactid="4284"><span data-reactid="4285"><label class="ant-checkbox-wrapper" data-reactid="4286"><span class="ant-checkbox" data-reactid="4287"><input type="checkbox" class="ant-checkbox-input" data-reactid="4288"/><span class="ant-checkbox-inner" data-reactid="4289"></span></span></label></span></td><td class="" data-reactid="4290"><a href="#" data-reactid="4291">John Brown</a></td><td class="" data-reactid="4292"><!-- react-text: 4293 -->22<!-- /react-text --></td><td class="" data-reactid="4294"><!-- react-text: 4295 -->New York No. 2 Lake Park<!-- /react-text --></td><td class="" data-reactid="4296"><span data-reactid="4297"><a href="#" data-reactid="4298"><!-- react-text: 4299 -->Action 一 <!-- /react-text --><!-- react-text: 4300 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4301"></span><a href="#" data-reactid="4302">Delete</a><span class="ant-divider" data-reactid="4303"></span><a href="#" class="ant-dropdown-link" data-reactid="4304"><!-- react-text: 4305 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4306"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4307"><td class="ant-table-row-expand-icon-cell" data-reactid="4308"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4309"></span></td><td class="ant-table-selection-column" data-reactid="4310"><span data-reactid="4311"><label class="ant-checkbox-wrapper" data-reactid="4312"><span class="ant-checkbox" data-reactid="4313"><input type="checkbox" class="ant-checkbox-input" data-reactid="4314"/><span class="ant-checkbox-inner" data-reactid="4315"></span></span></label></span></td><td class="" data-reactid="4316"><a href="#" data-reactid="4317">John Brown</a></td><td class="" data-reactid="4318"><!-- react-text: 4319 -->32<!-- /react-text --></td><td class="" data-reactid="4320"><!-- react-text: 4321 -->New York No. 3 Lake Park<!-- /react-text --></td><td class="" data-reactid="4322"><span data-reactid="4323"><a href="#" data-reactid="4324"><!-- react-text: 4325 -->Action 一 <!-- /react-text --><!-- react-text: 4326 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4327"></span><a href="#" data-reactid="4328">Delete</a><span class="ant-divider" data-reactid="4329"></span><a href="#" class="ant-dropdown-link" data-reactid="4330"><!-- react-text: 4331 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4332"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4333"><td class="ant-table-row-expand-icon-cell" data-reactid="4334"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4335"></span></td><td class="ant-table-selection-column" data-reactid="4336"><span data-reactid="4337"><label class="ant-checkbox-wrapper" data-reactid="4338"><span class="ant-checkbox" data-reactid="4339"><input type="checkbox" class="ant-checkbox-input" data-reactid="4340"/><span class="ant-checkbox-inner" data-reactid="4341"></span></span></label></span></td><td class="" data-reactid="4342"><a href="#" data-reactid="4343">John Brown</a></td><td class="" data-reactid="4344"><!-- react-text: 4345 -->42<!-- /react-text --></td><td class="" data-reactid="4346"><!-- react-text: 4347 -->New York No. 4 Lake Park<!-- /react-text --></td><td class="" data-reactid="4348"><span data-reactid="4349"><a href="#" data-reactid="4350"><!-- react-text: 4351 -->Action 一 <!-- /react-text --><!-- react-text: 4352 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4353"></span><a href="#" data-reactid="4354">Delete</a><span class="ant-divider" data-reactid="4355"></span><a href="#" class="ant-dropdown-link" data-reactid="4356"><!-- react-text: 4357 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4358"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4359"><td class="ant-table-row-expand-icon-cell" data-reactid="4360"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4361"></span></td><td class="ant-table-selection-column" data-reactid="4362"><span data-reactid="4363"><label class="ant-checkbox-wrapper" data-reactid="4364"><span class="ant-checkbox" data-reactid="4365"><input type="checkbox" class="ant-checkbox-input" data-reactid="4366"/><span class="ant-checkbox-inner" data-reactid="4367"></span></span></label></span></td><td class="" data-reactid="4368"><a href="#" data-reactid="4369">John Brown</a></td><td class="" data-reactid="4370"><!-- react-text: 4371 -->52<!-- /react-text --></td><td class="" data-reactid="4372"><!-- react-text: 4373 -->New York No. 5 Lake Park<!-- /react-text --></td><td class="" data-reactid="4374"><span data-reactid="4375"><a href="#" data-reactid="4376"><!-- react-text: 4377 -->Action 一 <!-- /react-text --><!-- react-text: 4378 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4379"></span><a href="#" data-reactid="4380">Delete</a><span class="ant-divider" data-reactid="4381"></span><a href="#" class="ant-dropdown-link" data-reactid="4382"><!-- react-text: 4383 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4384"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4385"><td class="ant-table-row-expand-icon-cell" data-reactid="4386"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4387"></span></td><td class="ant-table-selection-column" data-reactid="4388"><span data-reactid="4389"><label class="ant-checkbox-wrapper" data-reactid="4390"><span class="ant-checkbox" data-reactid="4391"><input type="checkbox" class="ant-checkbox-input" data-reactid="4392"/><span class="ant-checkbox-inner" data-reactid="4393"></span></span></label></span></td><td class="" data-reactid="4394"><a href="#" data-reactid="4395">John Brown</a></td><td class="" data-reactid="4396"><!-- react-text: 4397 -->62<!-- /react-text --></td><td class="" data-reactid="4398"><!-- react-text: 4399 -->New York No. 6 Lake Park<!-- /react-text --></td><td class="" data-reactid="4400"><span data-reactid="4401"><a href="#" data-reactid="4402"><!-- react-text: 4403 -->Action 一 <!-- /react-text --><!-- react-text: 4404 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4405"></span><a href="#" data-reactid="4406">Delete</a><span class="ant-divider" data-reactid="4407"></span><a href="#" class="ant-dropdown-link" data-reactid="4408"><!-- react-text: 4409 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4410"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4411"><td class="ant-table-row-expand-icon-cell" data-reactid="4412"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4413"></span></td><td class="ant-table-selection-column" data-reactid="4414"><span data-reactid="4415"><label class="ant-checkbox-wrapper" data-reactid="4416"><span class="ant-checkbox" data-reactid="4417"><input type="checkbox" class="ant-checkbox-input" data-reactid="4418"/><span class="ant-checkbox-inner" data-reactid="4419"></span></span></label></span></td><td class="" data-reactid="4420"><a href="#" data-reactid="4421">John Brown</a></td><td class="" data-reactid="4422"><!-- react-text: 4423 -->72<!-- /react-text --></td><td class="" data-reactid="4424"><!-- react-text: 4425 -->New York No. 7 Lake Park<!-- /react-text --></td><td class="" data-reactid="4426"><span data-reactid="4427"><a href="#" data-reactid="4428"><!-- react-text: 4429 -->Action 一 <!-- /react-text --><!-- react-text: 4430 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4431"></span><a href="#" data-reactid="4432">Delete</a><span class="ant-divider" data-reactid="4433"></span><a href="#" class="ant-dropdown-link" data-reactid="4434"><!-- react-text: 4435 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4436"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4437"><td class="ant-table-row-expand-icon-cell" data-reactid="4438"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4439"></span></td><td class="ant-table-selection-column" data-reactid="4440"><span data-reactid="4441"><label class="ant-checkbox-wrapper" data-reactid="4442"><span class="ant-checkbox" data-reactid="4443"><input type="checkbox" class="ant-checkbox-input" data-reactid="4444"/><span class="ant-checkbox-inner" data-reactid="4445"></span></span></label></span></td><td class="" data-reactid="4446"><a href="#" data-reactid="4447">John Brown</a></td><td class="" data-reactid="4448"><!-- react-text: 4449 -->82<!-- /react-text --></td><td class="" data-reactid="4450"><!-- react-text: 4451 -->New York No. 8 Lake Park<!-- /react-text --></td><td class="" data-reactid="4452"><span data-reactid="4453"><a href="#" data-reactid="4454"><!-- react-text: 4455 -->Action 一 <!-- /react-text --><!-- react-text: 4456 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4457"></span><a href="#" data-reactid="4458">Delete</a><span class="ant-divider" data-reactid="4459"></span><a href="#" class="ant-dropdown-link" data-reactid="4460"><!-- react-text: 4461 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4462"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4463"><td class="ant-table-row-expand-icon-cell" data-reactid="4464"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4465"></span></td><td class="ant-table-selection-column" data-reactid="4466"><span data-reactid="4467"><label class="ant-checkbox-wrapper" data-reactid="4468"><span class="ant-checkbox" data-reactid="4469"><input type="checkbox" class="ant-checkbox-input" data-reactid="4470"/><span class="ant-checkbox-inner" data-reactid="4471"></span></span></label></span></td><td class="" data-reactid="4472"><a href="#" data-reactid="4473">John Brown</a></td><td class="" data-reactid="4474"><!-- react-text: 4475 -->92<!-- /react-text --></td><td class="" data-reactid="4476"><!-- react-text: 4477 -->New York No. 9 Lake Park<!-- /react-text --></td><td class="" data-reactid="4478"><span data-reactid="4479"><a href="#" data-reactid="4480"><!-- react-text: 4481 -->Action 一 <!-- /react-text --><!-- react-text: 4482 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4483"></span><a href="#" data-reactid="4484">Delete</a><span class="ant-divider" data-reactid="4485"></span><a href="#" class="ant-dropdown-link" data-reactid="4486"><!-- react-text: 4487 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4488"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4489"><td class="ant-table-row-expand-icon-cell" data-reactid="4490"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4491"></span></td><td class="ant-table-selection-column" data-reactid="4492"><span data-reactid="4493"><label class="ant-checkbox-wrapper" data-reactid="4494"><span class="ant-checkbox" data-reactid="4495"><input type="checkbox" class="ant-checkbox-input" data-reactid="4496"/><span class="ant-checkbox-inner" data-reactid="4497"></span></span></label></span></td><td class="" data-reactid="4498"><a href="#" data-reactid="4499">John Brown</a></td><td class="" data-reactid="4500"><!-- react-text: 4501 -->102<!-- /react-text --></td><td class="" data-reactid="4502"><!-- react-text: 4503 -->New York No. 10 Lake Park<!-- /react-text --></td><td class="" data-reactid="4504"><span data-reactid="4505"><a href="#" data-reactid="4506"><!-- react-text: 4507 -->Action 一 <!-- /react-text --><!-- react-text: 4508 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4509"></span><a href="#" data-reactid="4510">Delete</a><span class="ant-divider" data-reactid="4511"></span><a href="#" class="ant-dropdown-link" data-reactid="4512"><!-- react-text: 4513 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4514"></i></a></span></td></tr></tbody></table></div><div class="ant-table-footer" data-reactid="4515">Here is footer</div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="4516"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="4517"><a data-reactid="4518"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="4519"><a data-reactid="4520">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="4521"><a data-reactid="4522"></a></li><!-- react-empty: 4523 --></ul></div></div></div></div><style data-reactid="4524">
|
||
.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="4525"><div class="code-box-title" data-reactid="4526"><a href="#components-table-demo-dynamic-settings" data-reactid="4527">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="4528"><i class="anticon anticon-edit" data-reactid="4529"></i></a></div><div data-reactid="4530"><p data-reactid="4531"><!-- react-text: 4532 -->Select different settings to see the result.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="4533"></i></section><section class="highlight-wrapper" data-reactid="4534"><div class="highlight" data-reactid="4535"><i class="anticon anticon-copy code-box-code-copy" data-reactid="4536"></i><pre class="language-jsx" data-reactid="4537"><code data-reactid="4538"><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="4539"><h2 id="API" data-reactid="4540"><span data-reactid="4541"><!-- react-text: 4542 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="4543">#</a></h2><h3 id="Table" data-reactid="4544"><span data-reactid="4545"><!-- react-text: 4546 -->Table<!-- /react-text --></span><a href="#Table" class="anchor" data-reactid="4547">#</a></h3><table data-reactid="4548"><thead data-reactid="4549"><tr data-reactid="4550"><th data-reactid="4551"><!-- react-text: 4552 -->Property<!-- /react-text --></th><th data-reactid="4553"><!-- react-text: 4554 -->Description<!-- /react-text --></th><th data-reactid="4555"><!-- react-text: 4556 -->Type<!-- /react-text --></th><th data-reactid="4557"><!-- react-text: 4558 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="4559"><tr data-reactid="4560"><td data-reactid="4561"><!-- react-text: 4562 -->rowSelection<!-- /react-text --></td><td data-reactid="4563"><!-- react-text: 4564 -->row selection <!-- /react-text --><a href="#rowSelection" data-reactid="4565"><!-- react-text: 4566 -->config<!-- /react-text --></a></td><td data-reactid="4567"><!-- react-text: 4568 -->object<!-- /react-text --></td><td data-reactid="4569"><!-- react-text: 4570 -->null<!-- /react-text --></td></tr><tr data-reactid="4571"><td data-reactid="4572"><!-- react-text: 4573 -->pagination<!-- /react-text --></td><td data-reactid="4574"><!-- react-text: 4575 -->pagination <!-- /react-text --><a href="/components/pagination/" data-reactid="4576">config</a><!-- react-text: 4577 -->, hide it via setting to <!-- /react-text --><code data-reactid="4578"><!-- react-text: 4579 -->false<!-- /react-text --></code></td><td data-reactid="4580"><!-- react-text: 4581 -->object<!-- /react-text --></td><td data-reactid="4582"></td></tr><tr data-reactid="4583"><td data-reactid="4584"><!-- react-text: 4585 -->size<!-- /react-text --></td><td data-reactid="4586"><!-- react-text: 4587 -->size of table: <!-- /react-text --><code data-reactid="4588"><!-- react-text: 4589 -->default<!-- /react-text --></code><!-- react-text: 4590 -->, <!-- /react-text --><code data-reactid="4591"><!-- react-text: 4592 -->middle<!-- /react-text --></code><!-- react-text: 4593 --> or <!-- /react-text --><code data-reactid="4594"><!-- react-text: 4595 -->small<!-- /react-text --></code></td><td data-reactid="4596"><!-- react-text: 4597 -->string<!-- /react-text --></td><td data-reactid="4598"><code data-reactid="4599"><!-- react-text: 4600 -->default<!-- /react-text --></code></td></tr><tr data-reactid="4601"><td data-reactid="4602"><!-- react-text: 4603 -->dataSource<!-- /react-text --></td><td data-reactid="4604"><!-- react-text: 4605 -->data record array to be rendered<!-- /react-text --></td><td data-reactid="4606"><!-- react-text: 4607 -->any[]<!-- /react-text --></td><td data-reactid="4608"></td></tr><tr data-reactid="4609"><td data-reactid="4610"><!-- react-text: 4611 -->columns<!-- /react-text --></td><td data-reactid="4612"><!-- react-text: 4613 -->columns of table<!-- /react-text --></td><td data-reactid="4614"><a href="https://git.io/vMMXC" data-reactid="4615"><!-- react-text: 4616 -->ColumnProps<!-- /react-text --></a><!-- react-text: 4617 -->[]<!-- /react-text --></td><td data-reactid="4618"><!-- react-text: 4619 -->-<!-- /react-text --></td></tr><tr data-reactid="4620"><td data-reactid="4621"><!-- react-text: 4622 -->rowKey<!-- /react-text --></td><td data-reactid="4623"><!-- react-text: 4624 -->get row's key, could be a string or function<!-- /react-text --></td><td data-reactid="4625"><!-- react-text: 4626 -->string<!-- /react-text --><!-- react-text: 4627 -->|<!-- /react-text --><!-- react-text: 4628 -->Function(record):string<!-- /react-text --></td><td data-reactid="4629"><!-- react-text: 4630 -->'key'<!-- /react-text --></td></tr><tr data-reactid="4631"><td data-reactid="4632"><!-- react-text: 4633 -->rowClassName<!-- /react-text --></td><td data-reactid="4634"><!-- react-text: 4635 -->get row's className<!-- /react-text --></td><td data-reactid="4636"><!-- react-text: 4637 -->Function(record, index):string<!-- /react-text --></td><td data-reactid="4638"><!-- react-text: 4639 -->-<!-- /react-text --></td></tr><tr data-reactid="4640"><td data-reactid="4641"><!-- react-text: 4642 -->expandedRowRender<!-- /react-text --></td><td data-reactid="4643"><!-- react-text: 4644 -->expanded container render for each row<!-- /react-text --></td><td data-reactid="4645"><!-- react-text: 4646 -->Function<!-- /react-text --></td><td data-reactid="4647"><!-- react-text: 4648 -->-<!-- /react-text --></td></tr><tr data-reactid="4649"><td data-reactid="4650"><!-- react-text: 4651 -->defaultExpandedRowKeys<!-- /react-text --></td><td data-reactid="4652"><!-- react-text: 4653 -->initial expanded row keys<!-- /react-text --></td><td data-reactid="4654"><!-- react-text: 4655 -->string[]<!-- /react-text --></td><td data-reactid="4656"><!-- react-text: 4657 -->-<!-- /react-text --></td></tr><tr data-reactid="4658"><td data-reactid="4659"><!-- react-text: 4660 -->expandedRowKeys<!-- /react-text --></td><td data-reactid="4661"><!-- react-text: 4662 -->current expanded rows keys<!-- /react-text --></td><td data-reactid="4663"><!-- react-text: 4664 -->string[]<!-- /react-text --></td><td data-reactid="4665"><!-- react-text: 4666 -->-<!-- /react-text --></td></tr><tr data-reactid="4667"><td data-reactid="4668"><!-- react-text: 4669 -->defaultExpandAllRows<!-- /react-text --></td><td data-reactid="4670"><!-- react-text: 4671 -->expand all rows initially<!-- /react-text --></td><td data-reactid="4672"><!-- react-text: 4673 -->boolean<!-- /react-text --></td><td data-reactid="4674"><!-- react-text: 4675 -->false<!-- /react-text --></td></tr><tr data-reactid="4676"><td data-reactid="4677"><!-- react-text: 4678 -->onExpandedRowsChange<!-- /react-text --></td><td data-reactid="4679"><!-- react-text: 4680 -->function to call when the expanded rows change<!-- /react-text --></td><td data-reactid="4681"><!-- react-text: 4682 -->Function(expandedRows)<!-- /react-text --></td><td data-reactid="4683"></td></tr><tr data-reactid="4684"><td data-reactid="4685"><!-- react-text: 4686 -->onExpand<!-- /react-text --></td><td data-reactid="4687"><!-- react-text: 4688 -->function to call when click expand icon<!-- /react-text --></td><td data-reactid="4689"><!-- react-text: 4690 -->Function(expanded, record)<!-- /react-text --></td><td data-reactid="4691"></td></tr><tr data-reactid="4692"><td data-reactid="4693"><!-- react-text: 4694 -->onChange<!-- /react-text --></td><td data-reactid="4695"><!-- react-text: 4696 -->callback that is called when pagination, filters, sorter is changed<!-- /react-text --></td><td data-reactid="4697"><!-- react-text: 4698 -->Function(pagination, filters, sorter)<!-- /react-text --></td><td data-reactid="4699"></td></tr><tr data-reactid="4700"><td data-reactid="4701"><!-- react-text: 4702 -->loading<!-- /react-text --></td><td data-reactid="4703"><!-- react-text: 4704 -->loading status of table<!-- /react-text --></td><td data-reactid="4705"><!-- react-text: 4706 -->boolean<!-- /react-text --></td><td data-reactid="4707"><!-- react-text: 4708 -->false<!-- /react-text --></td></tr><tr data-reactid="4709"><td data-reactid="4710"><!-- react-text: 4711 -->locale<!-- /react-text --></td><td data-reactid="4712"><!-- react-text: 4713 -->i18n text include filter, sort, empty text...etc<!-- /react-text --></td><td data-reactid="4714"><!-- react-text: 4715 -->object<!-- /react-text --></td><td data-reactid="4716"><!-- react-text: 4717 -->filterConfirm: 'Ok' <!-- /react-text --><br data-reactid="4718"/><!-- react-text: 4719 --> filterReset: 'Reset' <!-- /react-text --><br data-reactid="4720"/><!-- react-text: 4721 --> emptyText: 'No Data' <!-- /react-text --><br data-reactid="4722"/><!-- react-text: 4723 --> <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511" data-reactid="4724"><!-- react-text: 4725 -->Default<!-- /react-text --></a></td></tr><tr data-reactid="4726"><td data-reactid="4727"><!-- react-text: 4728 -->indentSize<!-- /react-text --></td><td data-reactid="4729"><!-- react-text: 4730 -->index pixel size of tree data<!-- /react-text --></td><td data-reactid="4731"><!-- react-text: 4732 -->number<!-- /react-text --></td><td data-reactid="4733"><!-- react-text: 4734 -->15<!-- /react-text --></td></tr><tr data-reactid="4735"><td data-reactid="4736"><!-- react-text: 4737 -->onRowClick<!-- /react-text --></td><td data-reactid="4738"><!-- react-text: 4739 -->callback that is called when click a row<!-- /react-text --></td><td data-reactid="4740"><!-- react-text: 4741 -->Function(record, index)<!-- /react-text --></td><td data-reactid="4742"><!-- react-text: 4743 -->-<!-- /react-text --></td></tr><tr data-reactid="4744"><td data-reactid="4745"><!-- react-text: 4746 -->bordered<!-- /react-text --></td><td data-reactid="4747"><!-- react-text: 4748 -->whether to show table border completely<!-- /react-text --></td><td data-reactid="4749"><!-- react-text: 4750 -->boolean<!-- /react-text --></td><td data-reactid="4751"><!-- react-text: 4752 -->false<!-- /react-text --></td></tr><tr data-reactid="4753"><td data-reactid="4754"><!-- react-text: 4755 -->showHeader<!-- /react-text --></td><td data-reactid="4756"><!-- react-text: 4757 -->whether to show table header<!-- /react-text --></td><td data-reactid="4758"><!-- react-text: 4759 -->boolean<!-- /react-text --></td><td data-reactid="4760"><!-- react-text: 4761 -->true<!-- /react-text --></td></tr><tr data-reactid="4762"><td data-reactid="4763"><!-- react-text: 4764 -->footer<!-- /react-text --></td><td data-reactid="4765"><!-- react-text: 4766 -->table footer renderer<!-- /react-text --></td><td data-reactid="4767"><!-- react-text: 4768 -->Function(currentPageData)<!-- /react-text --></td><td data-reactid="4769"></td></tr><tr data-reactid="4770"><td data-reactid="4771"><!-- react-text: 4772 -->title<!-- /react-text --></td><td data-reactid="4773"><!-- react-text: 4774 -->table title renderer<!-- /react-text --></td><td data-reactid="4775"><!-- react-text: 4776 -->Function(currentPageData)<!-- /react-text --></td><td data-reactid="4777"></td></tr><tr data-reactid="4778"><td data-reactid="4779"><!-- react-text: 4780 -->scroll<!-- /react-text --></td><td data-reactid="4781"><!-- react-text: 4782 -->whether table can be scroll in x/y direction, <!-- /react-text --><code data-reactid="4783"><!-- react-text: 4784 -->x<!-- /react-text --></code><!-- react-text: 4785 --> or <!-- /react-text --><code data-reactid="4786"><!-- react-text: 4787 -->y<!-- /react-text --></code><!-- react-text: 4788 --> can be a number that indicated the width and height of table body<!-- /react-text --></td><td data-reactid="4789"><!-- react-text: 4790 -->object<!-- /react-text --></td><td data-reactid="4791"><!-- react-text: 4792 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="Column" data-reactid="4793"><span data-reactid="4794"><!-- react-text: 4795 -->Column<!-- /react-text --></span><a href="#Column" class="anchor" data-reactid="4796">#</a></h3><p data-reactid="4797"><!-- react-text: 4798 -->One of Property <!-- /react-text --><code data-reactid="4799"><!-- react-text: 4800 -->columns<!-- /react-text --></code><!-- react-text: 4801 --> for descriping column, Column has the same API.<!-- /react-text --></p><table data-reactid="4802"><thead data-reactid="4803"><tr data-reactid="4804"><th data-reactid="4805"><!-- react-text: 4806 -->Property<!-- /react-text --></th><th data-reactid="4807"><!-- react-text: 4808 -->Description<!-- /react-text --></th><th data-reactid="4809"><!-- react-text: 4810 -->Type<!-- /react-text --></th><th data-reactid="4811"><!-- react-text: 4812 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="4813"><tr data-reactid="4814"><td data-reactid="4815"><!-- react-text: 4816 -->title<!-- /react-text --></td><td data-reactid="4817"><!-- react-text: 4818 -->title of this column<!-- /react-text --></td><td data-reactid="4819"><!-- react-text: 4820 -->string<!-- /react-text --><!-- react-text: 4821 -->|<!-- /react-text --><!-- react-text: 4822 -->ReactNode<!-- /react-text --></td><td data-reactid="4823"><!-- react-text: 4824 -->-<!-- /react-text --></td></tr><tr data-reactid="4825"><td data-reactid="4826"><!-- react-text: 4827 -->key<!-- /react-text --></td><td data-reactid="4828"><!-- react-text: 4829 -->key of this column<!-- /react-text --></td><td data-reactid="4830"><!-- react-text: 4831 -->string<!-- /react-text --></td><td data-reactid="4832"><!-- react-text: 4833 -->-<!-- /react-text --></td></tr><tr data-reactid="4834"><td data-reactid="4835"><!-- react-text: 4836 -->dataIndex<!-- /react-text --></td><td data-reactid="4837"><!-- react-text: 4838 -->display field of the data record, could be set like <!-- /react-text --><code data-reactid="4839"><!-- react-text: 4840 -->a.b.c<!-- /react-text --></code></td><td data-reactid="4841"><!-- react-text: 4842 -->string<!-- /react-text --></td><td data-reactid="4843"><!-- react-text: 4844 -->-<!-- /react-text --></td></tr><tr data-reactid="4845"><td data-reactid="4846"><!-- react-text: 4847 -->render<!-- /react-text --></td><td data-reactid="4848"><!-- react-text: 4849 -->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="4850"><!-- react-text: 4851 -->colSpan/rowSpan config<!-- /react-text --></a></td><td data-reactid="4852"><!-- react-text: 4853 -->Function(text, record, index) {}<!-- /react-text --></td><td data-reactid="4854"><!-- react-text: 4855 -->-<!-- /react-text --></td></tr><tr data-reactid="4856"><td data-reactid="4857"><!-- react-text: 4858 -->filters<!-- /react-text --></td><td data-reactid="4859"><!-- react-text: 4860 -->filter menu config<!-- /react-text --></td><td data-reactid="4861"><!-- react-text: 4862 -->object[]<!-- /react-text --></td><td data-reactid="4863"><!-- react-text: 4864 -->-<!-- /react-text --></td></tr><tr data-reactid="4865"><td data-reactid="4866"><!-- react-text: 4867 -->onFilter<!-- /react-text --></td><td data-reactid="4868"><!-- react-text: 4869 -->callback that is called when when click confirm filter button<!-- /react-text --></td><td data-reactid="4870"><!-- react-text: 4871 -->Function<!-- /react-text --></td><td data-reactid="4872"><!-- react-text: 4873 -->-<!-- /react-text --></td></tr><tr data-reactid="4874"><td data-reactid="4875"><!-- react-text: 4876 -->filterMultiple<!-- /react-text --></td><td data-reactid="4877"><!-- react-text: 4878 -->whether to select multiple filtered item<!-- /react-text --></td><td data-reactid="4879"><!-- react-text: 4880 -->boolean<!-- /react-text --></td><td data-reactid="4881"><!-- react-text: 4882 -->true<!-- /react-text --></td></tr><tr data-reactid="4883"><td data-reactid="4884"><!-- react-text: 4885 -->filterDropdown<!-- /react-text --></td><td data-reactid="4886"><!-- react-text: 4887 -->customized filter overlay<!-- /react-text --></td><td data-reactid="4888"><!-- react-text: 4889 -->ReactNode<!-- /react-text --></td><td data-reactid="4890"><!-- react-text: 4891 -->-<!-- /react-text --></td></tr><tr data-reactid="4892"><td data-reactid="4893"><!-- react-text: 4894 -->filterDropdownVisible<!-- /react-text --></td><td data-reactid="4895"><!-- react-text: 4896 -->whether filterDropdown is visible<!-- /react-text --></td><td data-reactid="4897"><!-- react-text: 4898 -->boolean<!-- /react-text --></td><td data-reactid="4899"><!-- react-text: 4900 -->-<!-- /react-text --></td></tr><tr data-reactid="4901"><td data-reactid="4902"><!-- react-text: 4903 -->onFilterDropdownVisibleChange<!-- /react-text --></td><td data-reactid="4904"><!-- react-text: 4905 -->called when filterDropdownVisible is changed<!-- /react-text --></td><td data-reactid="4906"><!-- react-text: 4907 -->function(visible) {}<!-- /react-text --></td><td data-reactid="4908"><!-- react-text: 4909 -->-<!-- /react-text --></td></tr><tr data-reactid="4910"><td data-reactid="4911"><!-- react-text: 4912 -->filteredValue<!-- /react-text --></td><td data-reactid="4913"><!-- react-text: 4914 -->controlled filtered value<!-- /react-text --></td><td data-reactid="4915"><!-- react-text: 4916 -->string[]<!-- /react-text --></td><td data-reactid="4917"><!-- react-text: 4918 -->-<!-- /react-text --></td></tr><tr data-reactid="4919"><td data-reactid="4920"><!-- react-text: 4921 -->sorter<!-- /react-text --></td><td data-reactid="4922"><!-- react-text: 4923 -->sort function for local sort. If you need sort buttons only, set it <!-- /react-text --><code data-reactid="4924"><!-- react-text: 4925 -->true<!-- /react-text --></code></td><td data-reactid="4926"><!-- react-text: 4927 -->Function<!-- /react-text --><!-- react-text: 4928 -->|<!-- /react-text --><!-- react-text: 4929 -->boolean<!-- /react-text --></td><td data-reactid="4930"><!-- react-text: 4931 -->-<!-- /react-text --></td></tr><tr data-reactid="4932"><td data-reactid="4933"><!-- react-text: 4934 -->colSpan<!-- /react-text --></td><td data-reactid="4935"><!-- react-text: 4936 -->span of this column's title<!-- /react-text --></td><td data-reactid="4937"><!-- react-text: 4938 -->number<!-- /react-text --></td><td data-reactid="4939"></td></tr><tr data-reactid="4940"><td data-reactid="4941"><!-- react-text: 4942 -->width<!-- /react-text --></td><td data-reactid="4943"><!-- react-text: 4944 -->width of this column<!-- /react-text --></td><td data-reactid="4945"><!-- react-text: 4946 -->string<!-- /react-text --><!-- react-text: 4947 -->|<!-- /react-text --><!-- react-text: 4948 -->number<!-- /react-text --></td><td data-reactid="4949"><!-- react-text: 4950 -->-<!-- /react-text --></td></tr><tr data-reactid="4951"><td data-reactid="4952"><!-- react-text: 4953 -->className<!-- /react-text --></td><td data-reactid="4954"><!-- react-text: 4955 -->className of this column<!-- /react-text --></td><td data-reactid="4956"><!-- react-text: 4957 -->string<!-- /react-text --></td><td data-reactid="4958"><!-- react-text: 4959 -->-<!-- /react-text --></td></tr><tr data-reactid="4960"><td data-reactid="4961"><!-- react-text: 4962 -->fixed<!-- /react-text --></td><td data-reactid="4963"><!-- react-text: 4964 -->set column to be fixed: <!-- /react-text --><code data-reactid="4965"><!-- react-text: 4966 -->true<!-- /react-text --></code><!-- react-text: 4967 -->(same as left) <!-- /react-text --><code data-reactid="4968"><!-- react-text: 4969 -->'left'<!-- /react-text --></code><!-- react-text: 4970 --> <!-- /react-text --><code data-reactid="4971"><!-- react-text: 4972 -->'right'<!-- /react-text --></code></td><td data-reactid="4973"><!-- react-text: 4974 -->boolean<!-- /react-text --><!-- react-text: 4975 -->|<!-- /react-text --><!-- react-text: 4976 -->string<!-- /react-text --></td><td data-reactid="4977"><!-- react-text: 4978 -->false<!-- /react-text --></td></tr><tr data-reactid="4979"><td data-reactid="4980"><!-- react-text: 4981 -->sortOrder<!-- /react-text --></td><td data-reactid="4982"><!-- react-text: 4983 -->controlled sorted value: <!-- /react-text --><code data-reactid="4984"><!-- react-text: 4985 -->'ascend'<!-- /react-text --></code><!-- react-text: 4986 --> <!-- /react-text --><code data-reactid="4987"><!-- react-text: 4988 -->'descend'<!-- /react-text --></code><!-- react-text: 4989 --> <!-- /react-text --><code data-reactid="4990"><!-- react-text: 4991 -->false<!-- /react-text --></code></td><td data-reactid="4992"><!-- react-text: 4993 -->boolean<!-- /react-text --><!-- react-text: 4994 -->|<!-- /react-text --><!-- react-text: 4995 -->string<!-- /react-text --></td><td data-reactid="4996"><!-- react-text: 4997 -->-<!-- /react-text --></td></tr><tr data-reactid="4998"><td data-reactid="4999"><!-- react-text: 5000 -->onCellClick<!-- /react-text --></td><td data-reactid="5001"><!-- react-text: 5002 -->callback when click cell<!-- /react-text --></td><td data-reactid="5003"><!-- react-text: 5004 -->Function(record, event)<!-- /react-text --></td><td data-reactid="5005"><!-- react-text: 5006 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="ColumnGroup" data-reactid="5007"><span data-reactid="5008"><!-- react-text: 5009 -->ColumnGroup<!-- /react-text --></span><a href="#ColumnGroup" class="anchor" data-reactid="5010">#</a></h3><table data-reactid="5011"><thead data-reactid="5012"><tr data-reactid="5013"><th data-reactid="5014"><!-- react-text: 5015 -->Property<!-- /react-text --></th><th data-reactid="5016"><!-- react-text: 5017 -->Description<!-- /react-text --></th><th data-reactid="5018"><!-- react-text: 5019 -->Type<!-- /react-text --></th><th data-reactid="5020"><!-- react-text: 5021 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="5022"><tr data-reactid="5023"><td data-reactid="5024"><!-- react-text: 5025 -->title<!-- /react-text --></td><td data-reactid="5026"><!-- react-text: 5027 -->title of the column group<!-- /react-text --></td><td data-reactid="5028"><!-- react-text: 5029 -->string<!-- /react-text --><!-- react-text: 5030 -->|<!-- /react-text --><!-- react-text: 5031 -->ReactNode<!-- /react-text --></td><td data-reactid="5032"><!-- react-text: 5033 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="rowSelection" data-reactid="5034"><span data-reactid="5035"><!-- react-text: 5036 -->rowSelection<!-- /react-text --></span><a href="#rowSelection" class="anchor" data-reactid="5037">#</a></h3><p data-reactid="5038"><!-- react-text: 5039 -->Properties for selection.<!-- /react-text --></p><table data-reactid="5040"><thead data-reactid="5041"><tr data-reactid="5042"><th data-reactid="5043"><!-- react-text: 5044 -->Property<!-- /react-text --></th><th data-reactid="5045"><!-- react-text: 5046 -->Description<!-- /react-text --></th><th data-reactid="5047"><!-- react-text: 5048 -->Type<!-- /react-text --></th><th data-reactid="5049"><!-- react-text: 5050 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="5051"><tr data-reactid="5052"><td data-reactid="5053"><!-- react-text: 5054 -->type<!-- /react-text --></td><td data-reactid="5055"><code data-reactid="5056"><!-- react-text: 5057 -->checkbox<!-- /react-text --></code><!-- react-text: 5058 --> or <!-- /react-text --><code data-reactid="5059"><!-- react-text: 5060 -->radio<!-- /react-text --></code></td><td data-reactid="5061"><!-- react-text: 5062 -->string<!-- /react-text --></td><td data-reactid="5063"><code data-reactid="5064"><!-- react-text: 5065 -->checkbox<!-- /react-text --></code></td></tr><tr data-reactid="5066"><td data-reactid="5067"><!-- react-text: 5068 -->selectedRowKeys<!-- /react-text --></td><td data-reactid="5069"><!-- react-text: 5070 -->controlled selected row keys<!-- /react-text --></td><td data-reactid="5071"><!-- react-text: 5072 -->string[]<!-- /react-text --></td><td data-reactid="5073"><!-- react-text: 5074 -->[]<!-- /react-text --></td></tr><tr data-reactid="5075"><td data-reactid="5076"><!-- react-text: 5077 -->onChange<!-- /react-text --></td><td data-reactid="5078"><!-- react-text: 5079 -->callback that is called when selected rows change<!-- /react-text --></td><td data-reactid="5080"><!-- react-text: 5081 -->Function(selectedRowKeys, selectedRows)<!-- /react-text --></td><td data-reactid="5082"><!-- react-text: 5083 -->-<!-- /react-text --></td></tr><tr data-reactid="5084"><td data-reactid="5085"><!-- react-text: 5086 -->getCheckboxProps<!-- /react-text --></td><td data-reactid="5087"><!-- react-text: 5088 -->get Checkbox or Radio props<!-- /react-text --></td><td data-reactid="5089"><!-- react-text: 5090 -->Function(record)<!-- /react-text --></td><td data-reactid="5091"><!-- react-text: 5092 -->-<!-- /react-text --></td></tr><tr data-reactid="5093"><td data-reactid="5094"><!-- react-text: 5095 -->onSelect<!-- /react-text --></td><td data-reactid="5096"><!-- react-text: 5097 -->callback that is called when select/deselect one row<!-- /react-text --></td><td data-reactid="5098"><!-- react-text: 5099 -->Function(record, selected, selectedRows)<!-- /react-text --></td><td data-reactid="5100"><!-- react-text: 5101 -->-<!-- /react-text --></td></tr><tr data-reactid="5102"><td data-reactid="5103"><!-- react-text: 5104 -->onSelectAll<!-- /react-text --></td><td data-reactid="5105"><!-- react-text: 5106 -->callback that is called when select/deselect all<!-- /react-text --></td><td data-reactid="5107"><!-- react-text: 5108 -->Function(selected, selectedRows, changeRows)<!-- /react-text --></td><td data-reactid="5109"><!-- react-text: 5110 -->-<!-- /react-text --></td></tr><tr data-reactid="5111"><td data-reactid="5112"><!-- react-text: 5113 -->onSelectInvert<!-- /react-text --></td><td data-reactid="5114"><!-- react-text: 5115 -->callback that is called when select invert<!-- /react-text --></td><td data-reactid="5116"><!-- react-text: 5117 -->Function(selectedRows)<!-- /react-text --></td><td data-reactid="5118"><!-- react-text: 5119 -->-<!-- /react-text --></td></tr><tr data-reactid="5120"><td data-reactid="5121"><!-- react-text: 5122 -->selections<!-- /react-text --></td><td data-reactid="5123"><!-- react-text: 5124 -->custom selection, <!-- /react-text --><a href="#rowSelection" data-reactid="5125"><!-- react-text: 5126 -->config<!-- /react-text --></a></td><td data-reactid="5127"><!-- react-text: 5128 -->object[]<!-- /react-text --></td><td data-reactid="5129"><!-- react-text: 5130 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="selection" data-reactid="5131"><span data-reactid="5132"><!-- react-text: 5133 -->selection<!-- /react-text --></span><a href="#selection" class="anchor" data-reactid="5134">#</a></h3><table data-reactid="5135"><thead data-reactid="5136"><tr data-reactid="5137"><th data-reactid="5138"><!-- react-text: 5139 -->Property<!-- /react-text --></th><th data-reactid="5140"><!-- react-text: 5141 -->Description<!-- /react-text --></th><th data-reactid="5142"><!-- react-text: 5143 -->Type<!-- /react-text --></th><th data-reactid="5144"><!-- react-text: 5145 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="5146"><tr data-reactid="5147"><td data-reactid="5148"><!-- react-text: 5149 -->key<!-- /react-text --></td><td data-reactid="5150"><!-- react-text: 5151 -->key of this selection<!-- /react-text --></td><td data-reactid="5152"><!-- react-text: 5153 -->string<!-- /react-text --></td><td data-reactid="5154"><!-- react-text: 5155 -->-<!-- /react-text --></td></tr><tr data-reactid="5156"><td data-reactid="5157"><!-- react-text: 5158 -->text<!-- /react-text --></td><td data-reactid="5159"><!-- react-text: 5160 -->display text is this selection<!-- /react-text --></td><td data-reactid="5161"><!-- react-text: 5162 -->string<!-- /react-text --><!-- react-text: 5163 -->|<!-- /react-text --><!-- react-text: 5164 -->React.ReactNode<!-- /react-text --></td><td data-reactid="5165"><!-- react-text: 5166 -->-<!-- /react-text --></td></tr><tr data-reactid="5167"><td data-reactid="5168"><!-- react-text: 5169 -->onSelect<!-- /react-text --></td><td data-reactid="5170"><!-- react-text: 5171 -->callback when click this selection<!-- /react-text --></td><td data-reactid="5172"><!-- react-text: 5173 -->Function(changeableRowKeys)<!-- /react-text --></td><td data-reactid="5174"><!-- react-text: 5175 -->-<!-- /react-text --></td></tr></tbody></table><h2 id="Using-in-TypeScript" data-reactid="5176"><span data-reactid="5177"><!-- react-text: 5178 -->Using in TypeScript<!-- /react-text --></span><a href="#Using-in-TypeScript" class="anchor" data-reactid="5179">#</a></h2><pre class="language-jsx" data-reactid="5180"><code data-reactid="5181"><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="5182"><span data-reactid="5183"><!-- react-text: 5184 -->Note<!-- /react-text --></span><a href="#Note" class="anchor" data-reactid="5185">#</a></h2><p data-reactid="5186"><!-- react-text: 5187 -->According to <!-- /react-text --><a href="https://facebook.github.io/react/docs/lists-and-keys.html#keys" data-reactid="5188"><!-- react-text: 5189 -->React documentation<!-- /react-text --></a><!-- react-text: 5190 -->, every child in array should be assigned a unique key. The value inside <!-- /react-text --><code data-reactid="5191"><!-- react-text: 5192 -->dataSource<!-- /react-text --></code><!-- react-text: 5193 --> and <!-- /react-text --><code data-reactid="5194"><!-- react-text: 5195 -->columns<!-- /react-text --></code><!-- react-text: 5196 --> should follow this in Table, and <!-- /react-text --><code data-reactid="5197"><!-- react-text: 5198 -->dataSource[i].key<!-- /react-text --></code><!-- react-text: 5199 --> would be treated as key value defaultly for <!-- /react-text --><code data-reactid="5200"><!-- react-text: 5201 -->dataSource<!-- /react-text --></code><!-- react-text: 5202 -->.<!-- /react-text --></p><p data-reactid="5203"><!-- react-text: 5204 -->If <!-- /react-text --><code data-reactid="5205"><!-- react-text: 5206 -->dataSource[i].key<!-- /react-text --></code><!-- react-text: 5207 --> is not existed, then you should specify the primary key of dataSource value via <!-- /react-text --><code data-reactid="5208"><!-- react-text: 5209 -->rowKey<!-- /react-text --></code><!-- react-text: 5210 -->. If not, warnings like above will show in browser console.<!-- /react-text --></p><p data-reactid="5211"><img src="https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png" data-reactid="5212"/></p><pre class="language-jsx" data-reactid="5213"><code data-reactid="5214"><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="5215"><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="5216"><section class="prev-next-nav" data-reactid="5217"><a class="prev-page" href="/components/tooltip/" data-reactid="5218"><span data-reactid="5219">Tooltip</span><span class="chinese" data-reactid="5220"></span></a><a class="next-page" href="/components/tag/" data-reactid="5221"><span data-reactid="5222">Tag</span><span class="chinese" data-reactid="5223"></span></a></section></div></div></div><footer id="footer" data-reactid="5224"><ul data-reactid="5225"><li data-reactid="5226"><h2 data-reactid="5227"><i class="anticon anticon-github" data-reactid="5228"></i><!-- react-text: 5229 --> GitHub<!-- /react-text --></h2><div data-reactid="5230"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="5231"><span data-reactid="5232">Repository</span></a></div><div data-reactid="5233"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="5234"><span data-reactid="5235">Customize Theme</span></a></div><div data-reactid="5236"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="5237"><span data-reactid="5238">Awesome Ant Design</span></a></div></li><li data-reactid="5239"><h2 data-reactid="5240"><i class="anticon anticon-link" data-reactid="5241"></i><!-- react-text: 5242 --> <!-- /react-text --><span data-reactid="5243">Links</span></h2><div data-reactid="5244"><a href="http://mobile.ant.design" data-reactid="5245">Ant Design Mobile</a><span data-reactid="5246"> - </span><span data-reactid="5247">Mobile UI</span></div><div data-reactid="5248"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="5249">dva</a><!-- react-text: 5250 --> - <!-- /react-text --><span data-reactid="5251">Framework</span></div><div data-reactid="5252"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="5253">dva-cli</a><!-- react-text: 5254 --> -<!-- /react-text --><span data-reactid="5255">Developer Tools</span></div><div data-reactid="5256"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="5257">Egg</a><span data-reactid="5258"> - </span><span data-reactid="5259">Enterprise Node Framework</span></div><div data-reactid="5260"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="5261">AntV</a><span data-reactid="5262"> - </span><span data-reactid="5263">Data Visualization</span></div><div data-reactid="5264"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="5265">Ant Motion</a><span data-reactid="5266"> - </span><span data-reactid="5267">Motion Soluction</span></div><div data-reactid="5268"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="5269">AntD Library</a><span data-reactid="5270"> - </span><span data-reactid="5271">Axure library</span></div><div data-reactid="5272"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="5273">Ant UX</a><span data-reactid="5274"> - </span><span data-reactid="5275">Sitemap Template</span></div></li><li data-reactid="5276"><h2 data-reactid="5277"><i class="anticon anticon-customer-service" data-reactid="5278"></i><!-- react-text: 5279 --> <!-- /react-text --><span data-reactid="5280">Community</span></h2><div data-reactid="5281"><a href="/changelog" data-reactid="5282"><span data-reactid="5283">Change Log</span></a></div><div data-reactid="5284"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="5285"><span data-reactid="5286">FAQ</span></a></div><div data-reactid="5287"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="5288"><span data-reactid="5289">Chat Room</span></a></div><div data-reactid="5290"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="5291"><span data-reactid="5292">Bug Report</span></a></div><div data-reactid="5293"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="5294"><span data-reactid="5295">StackOverflow</span></a></div><div data-reactid="5296"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="5297"><span data-reactid="5298">SegmentFault</span></a></div></li><li data-reactid="5299"><h2 data-reactid="5300"><!-- react-text: 5301 -->Copyright © <!-- /react-text --><!-- react-text: 5302 -->2017<!-- /react-text --></h2><div data-reactid="5303"><span data-reactid="5304">Created by Ant UED</span></div><div data-reactid="5305"><!-- react-text: 5306 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="5307">BiSheng</a></div></li></ul></footer></div>
|
||
</div>
|
||
<script src="/common.js"></script>
|
||
<script src="/index.js"></script>
|
||
</body>
|
||
</html>
|