mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-20 10:16:17 +10:00
1817 lines
518 KiB
HTML
1817 lines
518 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>
|
|
<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>');
|
|
}
|
|
</script>
|
|
<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="-1861603243"><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-6 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-18 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"></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="19"><b data-reactid="20"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="21"><span data-reactid="22">中文</span></button><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="23"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="24"><a href="/" data-reactid="25"><span data-reactid="26">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="27"><a href="/docs/spec/introduce" data-reactid="28"><span data-reactid="29">Specification</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="30"><a href="/docs/react/introduce" data-reactid="31"><span data-reactid="32">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="33"><a href="/docs/pattern/navigation" data-reactid="34"><span data-reactid="35">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="36"><a href="/docs/practice/cases" data-reactid="37"><span data-reactid="38">Practice</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="39"><a href="/docs/resource/download" data-reactid="40"><span data-reactid="41">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="42"><div class="ant-row" data-reactid="43"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="44"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="45"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="46"><a href="/docs/react/introduce" data-reactid="47">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="48"><a href="/docs/react/getting-started" data-reactid="49">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="50"><a href="/docs/react/practical-projects" data-reactid="51">Real project with dva</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="52"><a href="/docs/react/use-with-create-react-app" data-reactid="53">Use in create-react-app</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="54"><a href="/docs/react/customize-theme" data-reactid="55">Customize Theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="56"><a href="/changelog" data-reactid="57">Change Log</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="58"><a href="/docs/react/recommendation" data-reactid="59">Third-Party Library</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="60"><a href="https://github.com/websemantics/awesome-ant-design" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="61"><!-- react-text: 62 -->Awesome Ant Design<!-- /react-text --><!-- react-text: 63 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="64"></i></a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="//github.com/ant-design/intl-example" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="66"><!-- react-text: 67 -->i18n Solution<!-- /react-text --><!-- react-text: 68 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="69"></i></a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="70"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="71"><h4 data-reactid="72">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="73"><li class=" ant-menu-item-group" data-reactid="74"><div class="ant-menu-item-group-title" data-reactid="75">General</div><ul class="ant-menu-item-group-list" data-reactid="76"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="77"><a href="/components/button/" data-reactid="78"><span data-reactid="79">Button</span><span class="chinese" data-reactid="80"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/components/icon/" data-reactid="82"><span data-reactid="83">Icon</span><span class="chinese" data-reactid="84"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="85"><div class="ant-menu-item-group-title" data-reactid="86">Layout</div><ul class="ant-menu-item-group-list" data-reactid="87"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="88"><a href="/components/grid/" data-reactid="89"><span data-reactid="90">Grid</span><span class="chinese" data-reactid="91"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="92"><a href="/components/layout/" data-reactid="93"><span data-reactid="94">Layout</span><span class="chinese" data-reactid="95"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="96"><div class="ant-menu-item-group-title" data-reactid="97">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="98"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="99"><a href="/components/affix/" data-reactid="100"><span data-reactid="101">Affix</span><span class="chinese" data-reactid="102"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="103"><a href="/components/back-top/" data-reactid="104"><span data-reactid="105">BackTop</span><span class="chinese" data-reactid="106"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="107"><a href="/components/breadcrumb/" data-reactid="108"><span data-reactid="109">Breadcrumb</span><span class="chinese" data-reactid="110"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="111"><a href="/components/dropdown/" data-reactid="112"><span data-reactid="113">Dropdown</span><span class="chinese" data-reactid="114"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="115"><a href="/components/menu/" data-reactid="116"><span data-reactid="117">Menu</span><span class="chinese" data-reactid="118"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="119"><a href="/components/pagination/" data-reactid="120"><span data-reactid="121">Pagination</span><span class="chinese" data-reactid="122"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="123"><a href="/components/steps/" data-reactid="124"><span data-reactid="125">Steps</span><span class="chinese" data-reactid="126"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="127"><a href="/components/tabs/" data-reactid="128"><span data-reactid="129">Tabs</span><span class="chinese" data-reactid="130"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="131"><div class="ant-menu-item-group-title" data-reactid="132">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="133"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="134"><a href="/components/auto-complete/" data-reactid="135"><span data-reactid="136">AutoComplete</span><span class="chinese" data-reactid="137"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="138"><a href="/components/checkbox/" data-reactid="139"><span data-reactid="140">Checkbox</span><span class="chinese" data-reactid="141"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="142"><a href="/components/cascader/" data-reactid="143"><span data-reactid="144">Cascader</span><span class="chinese" data-reactid="145"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="146"><a href="/components/date-picker/" data-reactid="147"><span data-reactid="148">DatePicker</span><span class="chinese" data-reactid="149"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="150"><a href="/components/form/" data-reactid="151"><span data-reactid="152">Form</span><span class="chinese" data-reactid="153"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="154"><a href="/components/input/" data-reactid="155"><span data-reactid="156">Input</span><span class="chinese" data-reactid="157"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="158"><a href="/components/input-number/" data-reactid="159"><span data-reactid="160">InputNumber</span><span class="chinese" data-reactid="161"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="162"><a href="/components/mention/" data-reactid="163"><span data-reactid="164">Mention</span><span class="chinese" data-reactid="165"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="166"><a href="/components/radio/" data-reactid="167"><span data-reactid="168">Radio</span><span class="chinese" data-reactid="169"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="170"><a href="/components/rate/" data-reactid="171"><span data-reactid="172">Rate</span><span class="chinese" data-reactid="173"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="174"><a href="/components/select/" data-reactid="175"><span data-reactid="176">Select</span><span class="chinese" data-reactid="177"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="178"><a href="/components/slider/" data-reactid="179"><span data-reactid="180">Slider</span><span class="chinese" data-reactid="181"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="182"><a href="/components/switch/" data-reactid="183"><span data-reactid="184">Switch</span><span class="chinese" data-reactid="185"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="186"><a href="/components/time-picker/" data-reactid="187"><span data-reactid="188">TimePicker</span><span class="chinese" data-reactid="189"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="190"><a href="/components/transfer/" data-reactid="191"><span data-reactid="192">Transfer</span><span class="chinese" data-reactid="193"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="194"><a href="/components/tree-select/" data-reactid="195"><span data-reactid="196">TreeSelect</span><span class="chinese" data-reactid="197"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="198"><a href="/components/upload/" data-reactid="199"><span data-reactid="200">Upload</span><span class="chinese" data-reactid="201"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="202"><div class="ant-menu-item-group-title" data-reactid="203">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="204"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="205"><a href="/components/badge/" data-reactid="206"><span data-reactid="207">Badge</span><span class="chinese" data-reactid="208"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="209"><a href="/components/card/" data-reactid="210"><span data-reactid="211">Card</span><span class="chinese" data-reactid="212"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="213"><a href="/components/carousel/" data-reactid="214"><span data-reactid="215">Carousel</span><span class="chinese" data-reactid="216"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="217"><a href="/components/collapse/" data-reactid="218"><span data-reactid="219">Collapse</span><span class="chinese" data-reactid="220"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="221"><a href="/components/calendar/" data-reactid="222"><span data-reactid="223">Calendar</span><span class="chinese" data-reactid="224"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="225"><a href="/components/popover/" data-reactid="226"><span data-reactid="227">Popover</span><span class="chinese" data-reactid="228"></span></a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="229"><a href="/components/table/" data-reactid="230"><span data-reactid="231">Table</span><span class="chinese" data-reactid="232"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="233"><a href="/components/tag/" data-reactid="234"><span data-reactid="235">Tag</span><span class="chinese" data-reactid="236"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="237"><a href="/components/timeline/" data-reactid="238"><span data-reactid="239">Timeline</span><span class="chinese" data-reactid="240"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="241"><a href="/components/tooltip/" data-reactid="242"><span data-reactid="243">Tooltip</span><span class="chinese" data-reactid="244"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="245"><a href="/components/tree/" data-reactid="246"><span data-reactid="247">Tree</span><span class="chinese" data-reactid="248"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="249"><div class="ant-menu-item-group-title" data-reactid="250">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="251"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="252"><a href="/components/alert/" data-reactid="253"><span data-reactid="254">Alert</span><span class="chinese" data-reactid="255"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="256"><a href="/components/message/" data-reactid="257"><span data-reactid="258">Message</span><span class="chinese" data-reactid="259"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="260"><a href="/components/modal/" data-reactid="261"><span data-reactid="262">Modal</span><span class="chinese" data-reactid="263"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="264"><a href="/components/notification/" data-reactid="265"><span data-reactid="266">Notification</span><span class="chinese" data-reactid="267"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="268"><a href="/components/popconfirm/" data-reactid="269"><span data-reactid="270">Popconfirm</span><span class="chinese" data-reactid="271"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="272"><a href="/components/progress/" data-reactid="273"><span data-reactid="274">Progress</span><span class="chinese" data-reactid="275"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="276"><a href="/components/spin/" data-reactid="277"><span data-reactid="278">Spin</span><span class="chinese" data-reactid="279"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="280"><div class="ant-menu-item-group-title" data-reactid="281">Other</div><ul class="ant-menu-item-group-list" data-reactid="282"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="283"><a href="/components/anchor/" data-reactid="284"><span data-reactid="285">Anchor</span><span class="chinese" data-reactid="286"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="287"><a href="/components/locale-provider/" data-reactid="288"><span data-reactid="289">LocaleProvider</span><span class="chinese" data-reactid="290"></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="291"><article data-reactid="292"><div class="toc-affix" data-reactid="293"><div class="" data-reactid="294"><ul class="toc demos-anchor" data-reactid="295"><li title="Basic Usage" data-reactid="296"><a href="#components-table-demo-basic" data-reactid="297">Basic Usage</a></li><li title="JSX style API" data-reactid="298"><a href="#components-table-demo-jsx" data-reactid="299">JSX style API</a></li><li title="selection" data-reactid="300"><a href="#components-table-demo-row-selection" data-reactid="301">selection</a></li><li title="Selection and operation" data-reactid="302"><a href="#components-table-demo-row-selection-and-operation" data-reactid="303">Selection and operation</a></li><li title="Pagination" data-reactid="304"><a href="#components-table-demo-paging" data-reactid="305">Pagination</a></li><li title="Reset filters and sorters" data-reactid="306"><a href="#components-table-demo-reset-filter" data-reactid="307">Reset filters and sorters</a></li><li title="Filter and sorter" data-reactid="308"><a href="#components-table-demo-head" data-reactid="309">Filter and sorter</a></li><li title="Customized filter panel" data-reactid="310"><a href="#components-table-demo-custom-filter-panel" data-reactid="311">Customized filter panel</a></li><li title="Ajax" data-reactid="312"><a href="#components-table-demo-ajax" data-reactid="313">Ajax</a></li><li title="size" data-reactid="314"><a href="#components-table-demo-size" data-reactid="315">size</a></li><li title="border, title and footer" data-reactid="316"><a href="#components-table-demo-bordered" data-reactid="317">border, title and footer</a></li><li title="Expandable Row" data-reactid="318"><a href="#components-table-demo-expand" data-reactid="319">Expandable Row</a></li><li title="colSpan and rowSpan" data-reactid="320"><a href="#components-table-demo-colspan-rowspan" data-reactid="321">colSpan and rowSpan</a></li><li title="Tree data" data-reactid="322"><a href="#components-table-demo-expand-children" data-reactid="323">Tree data</a></li><li title="Fixed Header" data-reactid="324"><a href="#components-table-demo-fixed-header" data-reactid="325">Fixed Header</a></li><li title="Fixed Columns" data-reactid="326"><a href="#components-table-demo-fixed-columns" data-reactid="327">Fixed Columns</a></li><li title="Fixed Columns and Header" data-reactid="328"><a href="#components-table-demo-fixed-columns-header" data-reactid="329">Fixed Columns and Header</a></li><li title="Grouping table head" data-reactid="330"><a href="#components-table-demo-grouping-columns" data-reactid="331">Grouping table head</a></li><li title="Editable Cells" data-reactid="332"><a href="#components-table-demo-edit-cell" data-reactid="333">Editable Cells</a></li><li title="Editable Rows" data-reactid="334"><a href="#components-table-demo-edit-row" data-reactid="335">Editable Rows</a></li><li title="Dynamic Settings" data-reactid="336"><a href="#components-table-demo-dynamic-settings" data-reactid="337">Dynamic Settings</a></li></ul></div></div><section class="markdown" data-reactid="338"><h1 data-reactid="339"><!-- react-text: 340 -->Table<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/index.en-US.md" data-reactid="341"><i class="anticon anticon-edit" data-reactid="342"></i></a></h1><section class="markdown" data-reactid="343"><p data-reactid="344"><!-- react-text: 345 -->A table displays rows data.<!-- /react-text --></p><h2 id="When-To-Use" data-reactid="346"><span data-reactid="347"><!-- react-text: 348 -->When To Use<!-- /react-text --></span><a href="#When-To-Use" class="anchor" data-reactid="349">#</a></h2><ul data-reactid="350"><li data-reactid="351"><p data-reactid="352"><!-- react-text: 353 -->To display a collection of structured data.<!-- /react-text --></p></li><li data-reactid="354"><p data-reactid="355"><!-- react-text: 356 -->To sort, search, paginate, filter data.<!-- /react-text --></p></li></ul><h2 id="How-To-Use" data-reactid="357"><span data-reactid="358"><!-- react-text: 359 -->How To Use<!-- /react-text --></span><a href="#How-To-Use" class="anchor" data-reactid="360">#</a></h2><p data-reactid="361"><!-- react-text: 362 -->Specify <!-- /react-text --><code data-reactid="363"><!-- react-text: 364 -->dataSource<!-- /react-text --></code><!-- react-text: 365 --> of Table whose value is an array of data.<!-- /react-text --></p><pre class="language-jsx" data-reactid="366"><code data-reactid="367"><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="368"><span data-reactid="369">Examples</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="370"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="371"><div style="padding-left:8px;padding-right:8px;" class="ant-col-24 code-boxes-col-1-1" data-reactid="372"><section class="code-box" id="components-table-demo-basic" data-reactid="373"><section class="code-box-demo" data-reactid="374"><div class=" clearfix" data-reactid="375"><div class="ant-spin-nested-loading" data-reactid="376"><div class="ant-spin-container" data-reactid="377"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="378"><div class="ant-table-content" data-reactid="379"><div class="" data-reactid="380"><span data-reactid="381"><div class="ant-table-body" data-reactid="382"><table class="" data-reactid="383"><colgroup data-reactid="384"><col data-reactid="385"/><col data-reactid="386"/><col data-reactid="387"/><col data-reactid="388"/></colgroup><thead class="ant-table-thead" data-reactid="389"><tr data-reactid="390"><th class="" data-reactid="391"><span data-reactid="392"><!-- react-text: 393 -->Name<!-- /react-text --></span></th><th class="" data-reactid="394"><span data-reactid="395"><!-- react-text: 396 -->Age<!-- /react-text --></span></th><th class="" data-reactid="397"><span data-reactid="398"><!-- react-text: 399 -->Address<!-- /react-text --></span></th><th class="" data-reactid="400"><span data-reactid="401"><!-- react-text: 402 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="403"><tr class="ant-table-row ant-table-row-level-0" data-reactid="404"><td class="" data-reactid="405"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="406"></span><!-- react-empty: 407 --><a href="#" data-reactid="408">John Brown</a></td><td class="" data-reactid="409"><!-- react-text: 410 -->32<!-- /react-text --></td><td class="" data-reactid="411"><!-- react-text: 412 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="413"><span data-reactid="414"><a href="#" data-reactid="415"><!-- react-text: 416 -->Action 一 <!-- /react-text --><!-- react-text: 417 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="418"></span><a href="#" data-reactid="419">Delete</a><span class="ant-divider" data-reactid="420"></span><a href="#" class="ant-dropdown-link" data-reactid="421"><!-- react-text: 422 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="423"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="424"><td class="" data-reactid="425"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="426"></span><!-- react-empty: 427 --><a href="#" data-reactid="428">Jim Green</a></td><td class="" data-reactid="429"><!-- react-text: 430 -->42<!-- /react-text --></td><td class="" data-reactid="431"><!-- react-text: 432 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="433"><span data-reactid="434"><a href="#" data-reactid="435"><!-- react-text: 436 -->Action 一 <!-- /react-text --><!-- react-text: 437 -->Jim Green<!-- /react-text --></a><span class="ant-divider" data-reactid="438"></span><a href="#" data-reactid="439">Delete</a><span class="ant-divider" data-reactid="440"></span><a href="#" class="ant-dropdown-link" data-reactid="441"><!-- react-text: 442 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="443"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="444"><td class="" data-reactid="445"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="446"></span><!-- react-empty: 447 --><a href="#" data-reactid="448">Joe Black</a></td><td class="" data-reactid="449"><!-- react-text: 450 -->32<!-- /react-text --></td><td class="" data-reactid="451"><!-- react-text: 452 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="453"><span data-reactid="454"><a href="#" data-reactid="455"><!-- react-text: 456 -->Action 一 <!-- /react-text --><!-- react-text: 457 -->Joe Black<!-- /react-text --></a><span class="ant-divider" data-reactid="458"></span><a href="#" data-reactid="459">Delete</a><span class="ant-divider" data-reactid="460"></span><a href="#" class="ant-dropdown-link" data-reactid="461"><!-- react-text: 462 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="463"></i></a></span></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="464"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="465"><a data-reactid="466"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="467"><a data-reactid="468">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="469"><a data-reactid="470"></a></li><!-- react-empty: 471 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="472"><div class="code-box-title" data-reactid="473"><a href="#components-table-demo-basic" data-reactid="474">Basic Usage</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/basic.md" data-reactid="475"><i class="anticon anticon-edit" data-reactid="476"></i></a></div><div data-reactid="477"><p data-reactid="478"><!-- react-text: 479 -->Simple table with actions.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="480"></i></section><section class="highlight-wrapper" data-reactid="481"><div class="highlight" data-reactid="482"><pre class="language-__react" data-reactid="483"><code data-reactid="484">import { Table<span class="token punctuation">,</span> Icon } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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 operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>{text}<span class="token operator"><</span><span class="token operator">/</span>a<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">'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> {
|
|
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> {
|
|
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 operator"><</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>Action 一 {record<span class="token punctuation">.</span>name}<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"ant-divider"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>Delete<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"ant-divider"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span> className<span class="token operator">=</span><span class="token string">"ant-dropdown-link"</span><span class="token operator">></span>
|
|
More actions <span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"down"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
}<span class="token punctuation">]</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> data <span class="token operator">=</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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>Table columns<span class="token operator">=</span>{columns} dataSource<span class="token operator">=</span>{data} <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-jsx" data-reactid="485"><section class="code-box-demo" data-reactid="486"><div class=" clearfix" data-reactid="487"><div class="ant-spin-nested-loading" data-reactid="488"><div class="ant-spin-container" data-reactid="489"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="490"><div class="ant-table-content" data-reactid="491"><div class="" data-reactid="492"><span data-reactid="493"><div class="ant-table-body" data-reactid="494"><table class="" data-reactid="495"><colgroup data-reactid="496"><col data-reactid="497"/><col data-reactid="498"/><col data-reactid="499"/><col data-reactid="500"/><col data-reactid="501"/></colgroup><thead class="ant-table-thead" data-reactid="502"><tr data-reactid="503"><th class="" colspan="2" data-reactid="504"><span data-reactid="505"><!-- react-text: 506 -->Name<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="507"><span data-reactid="508"><!-- react-text: 509 -->Age<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="510"><span data-reactid="511"><!-- react-text: 512 -->Address<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="513"><span data-reactid="514"><!-- react-text: 515 -->Action<!-- /react-text --></span></th></tr><tr data-reactid="516"><th class="" data-reactid="517"><span data-reactid="518"><!-- react-text: 519 -->First Name<!-- /react-text --></span></th><th class="" data-reactid="520"><span data-reactid="521"><!-- react-text: 522 -->Last Name<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="523"><tr class="ant-table-row ant-table-row-level-0" data-reactid="524"><td class="" data-reactid="525"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="526"></span><!-- react-empty: 527 --><!-- react-text: 528 -->John<!-- /react-text --></td><td class="" data-reactid="529"><!-- react-text: 530 -->Brown<!-- /react-text --></td><td class="" data-reactid="531"><!-- react-text: 532 -->32<!-- /react-text --></td><td class="" data-reactid="533"><!-- react-text: 534 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="535"><span data-reactid="536"><a href="#" data-reactid="537"><!-- react-text: 538 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="539"></span><a href="#" data-reactid="540">Delete</a><span class="ant-divider" data-reactid="541"></span><a href="#" class="ant-dropdown-link" data-reactid="542"><!-- react-text: 543 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="544"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="545"><td class="" data-reactid="546"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="547"></span><!-- react-empty: 548 --><!-- react-text: 549 -->Jim<!-- /react-text --></td><td class="" data-reactid="550"><!-- react-text: 551 -->Green<!-- /react-text --></td><td class="" data-reactid="552"><!-- react-text: 553 -->42<!-- /react-text --></td><td class="" data-reactid="554"><!-- react-text: 555 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="556"><span data-reactid="557"><a href="#" data-reactid="558"><!-- react-text: 559 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="560"></span><a href="#" data-reactid="561">Delete</a><span class="ant-divider" data-reactid="562"></span><a href="#" class="ant-dropdown-link" data-reactid="563"><!-- react-text: 564 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="565"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="566"><td class="" data-reactid="567"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="568"></span><!-- react-empty: 569 --><!-- react-text: 570 -->Joe<!-- /react-text --></td><td class="" data-reactid="571"><!-- react-text: 572 -->Black<!-- /react-text --></td><td class="" data-reactid="573"><!-- react-text: 574 -->32<!-- /react-text --></td><td class="" data-reactid="575"><!-- react-text: 576 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="577"><span data-reactid="578"><a href="#" data-reactid="579"><!-- react-text: 580 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="581"></span><a href="#" data-reactid="582">Delete</a><span class="ant-divider" data-reactid="583"></span><a href="#" class="ant-dropdown-link" data-reactid="584"><!-- react-text: 585 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="586"></i></a></span></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="587"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="588"><a data-reactid="589"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="590"><a data-reactid="591">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="592"><a data-reactid="593"></a></li><!-- react-empty: 594 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="595"><div class="code-box-title" data-reactid="596"><a href="#components-table-demo-jsx" data-reactid="597">JSX style API</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/jsx.md" data-reactid="598"><i class="anticon anticon-edit" data-reactid="599"></i></a></div><div data-reactid="600"><p data-reactid="601"><!-- react-text: 602 -->Using JSX style API (introduced in 2.5.0)<!-- /react-text --></p><blockquote data-reactid="603"><p data-reactid="604"><!-- react-text: 605 -->Since this is just a syntax sugar for the prop <!-- /react-text --><code data-reactid="606"><!-- react-text: 607 -->columns<!-- /react-text --></code><!-- react-text: 608 -->, so that you can't compose <!-- /react-text --><code data-reactid="609"><!-- react-text: 610 -->Column<!-- /react-text --></code><!-- react-text: 611 --> and <!-- /react-text --><code data-reactid="612"><!-- react-text: 613 -->ColumnGroup<!-- /react-text --></code><!-- react-text: 614 --> with other Components.<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="615"></i></section><section class="highlight-wrapper" data-reactid="616"><div class="highlight" data-reactid="617"><pre class="language-__react" data-reactid="618"><code data-reactid="619">import { Table<span class="token punctuation">,</span> Icon } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> { Column<span class="token punctuation">,</span> ColumnGroup } <span class="token operator">=</span> Table<span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> data <span class="token operator">=</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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>Table dataSource<span class="token operator">=</span>{data}<span class="token operator">></span>
|
|
<span class="token operator"><</span>ColumnGroup title<span class="token operator">=</span><span class="token string">"Name"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Column
|
|
title<span class="token operator">=</span><span class="token string">"First Name"</span>
|
|
dataIndex<span class="token operator">=</span><span class="token string">"firstName"</span>
|
|
key<span class="token operator">=</span><span class="token string">"firstName"</span>
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Column
|
|
title<span class="token operator">=</span><span class="token string">"Last Name"</span>
|
|
dataIndex<span class="token operator">=</span><span class="token string">"lastName"</span>
|
|
key<span class="token operator">=</span><span class="token string">"lastName"</span>
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>ColumnGroup<span class="token operator">></span>
|
|
<span class="token operator"><</span>Column
|
|
title<span class="token operator">=</span><span class="token string">"Age"</span>
|
|
dataIndex<span class="token operator">=</span><span class="token string">"age"</span>
|
|
key<span class="token operator">=</span><span class="token string">"age"</span>
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Column
|
|
title<span class="token operator">=</span><span class="token string">"Address"</span>
|
|
dataIndex<span class="token operator">=</span><span class="token string">"address"</span>
|
|
key<span class="token operator">=</span><span class="token string">"address"</span>
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Column
|
|
title<span class="token operator">=</span><span class="token string">"Action"</span>
|
|
key<span class="token operator">=</span><span class="token string">"action"</span>
|
|
render<span class="token operator">=</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 operator"><</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>Action 一 {record<span class="token punctuation">.</span>name}<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"ant-divider"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>Delete<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"ant-divider"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span> className<span class="token operator">=</span><span class="token string">"ant-dropdown-link"</span><span class="token operator">></span>
|
|
More actions <span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"down"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token punctuation">)</span>}
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Table<span class="token operator">></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-row-selection" data-reactid="620"><section class="code-box-demo" data-reactid="621"><div class=" clearfix" data-reactid="622"><div class="ant-spin-nested-loading" data-reactid="623"><div class="ant-spin-container" data-reactid="624"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="625"><div class="ant-table-content" data-reactid="626"><div class="" data-reactid="627"><span 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"><label class="ant-checkbox-wrapper" data-reactid="640"><span class="ant-checkbox" data-reactid="641"><span class="ant-checkbox-inner" data-reactid="642"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="643"/></span></label></span></th><th class="" data-reactid="644"><span data-reactid="645"><!-- react-text: 646 -->Name<!-- /react-text --></span></th><th class="" data-reactid="647"><span data-reactid="648"><!-- react-text: 649 -->Age<!-- /react-text --></span></th><th class="" data-reactid="650"><span data-reactid="651"><!-- react-text: 652 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="653"><tr class="ant-table-row ant-table-row-level-0" data-reactid="654"><td class="ant-table-selection-column" data-reactid="655"><span data-reactid="656"><label class="ant-checkbox-wrapper" data-reactid="657"><span class="ant-checkbox" data-reactid="658"><span class="ant-checkbox-inner" data-reactid="659"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="660"/></span></label></span></td><td class="" data-reactid="661"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="662"></span><!-- react-empty: 663 --><a href="#" data-reactid="664">John Brown</a></td><td class="" data-reactid="665"><!-- react-text: 666 -->32<!-- /react-text --></td><td class="" data-reactid="667"><!-- react-text: 668 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="669"><td class="ant-table-selection-column" data-reactid="670"><span data-reactid="671"><label class="ant-checkbox-wrapper" data-reactid="672"><span class="ant-checkbox" data-reactid="673"><span class="ant-checkbox-inner" data-reactid="674"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="675"/></span></label></span></td><td class="" data-reactid="676"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="677"></span><!-- react-empty: 678 --><a href="#" data-reactid="679">Jim Green</a></td><td class="" data-reactid="680"><!-- react-text: 681 -->42<!-- /react-text --></td><td class="" data-reactid="682"><!-- react-text: 683 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="684"><td class="ant-table-selection-column" data-reactid="685"><span data-reactid="686"><label class="ant-checkbox-wrapper" data-reactid="687"><span class="ant-checkbox" data-reactid="688"><span class="ant-checkbox-inner" data-reactid="689"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="690"/></span></label></span></td><td class="" data-reactid="691"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="692"></span><!-- react-empty: 693 --><a href="#" data-reactid="694">Joe Black</a></td><td class="" data-reactid="695"><!-- react-text: 696 -->32<!-- /react-text --></td><td class="" data-reactid="697"><!-- react-text: 698 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="699"><td class="ant-table-selection-column" data-reactid="700"><span data-reactid="701"><label class="ant-checkbox-wrapper" data-reactid="702"><span class="ant-checkbox ant-checkbox-disabled" data-reactid="703"><span class="ant-checkbox-inner" data-reactid="704"></span><input type="checkbox" disabled="" class="ant-checkbox-input" data-reactid="705"/></span></label></span></td><td class="" data-reactid="706"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="707"></span><!-- react-empty: 708 --><a href="#" data-reactid="709">Disabled User</a></td><td class="" data-reactid="710"><!-- react-text: 711 -->99<!-- /react-text --></td><td class="" data-reactid="712"><!-- react-text: 713 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="714"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="715"><a data-reactid="716"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="717"><a data-reactid="718">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="719"><a data-reactid="720"></a></li><!-- react-empty: 721 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="722"><div class="code-box-title" data-reactid="723"><a href="#components-table-demo-row-selection" data-reactid="724">selection</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/row-selection.md" data-reactid="725"><i class="anticon anticon-edit" data-reactid="726"></i></a></div><div data-reactid="727"><p data-reactid="728"><!-- react-text: 729 -->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="730"></i></section><section class="highlight-wrapper" data-reactid="731"><div class="highlight" data-reactid="732"><pre class="language-__react" data-reactid="733"><code data-reactid="734">import { Table } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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 operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>{text}<span class="token operator"><</span><span class="token operator">/</span>a<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">'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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> data <span class="token operator">=</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> {
|
|
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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
|
|
<span class="token operator">/</span><span class="token operator">/</span> rowSelection object indicates the need <span class="token keyword">for</span> row selection
|
|
<span class="token keyword">const</span> rowSelection <span class="token operator">=</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> {
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>`selectedRowKeys<span class="token punctuation">:</span> ${selectedRowKeys}`<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 comment" spellcheck="true">;</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> {
|
|
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 comment" spellcheck="true">;</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> {
|
|
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 comment" spellcheck="true">;</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>{
|
|
disabled<span class="token punctuation">:</span> record<span class="token punctuation">.</span>name <span class="token operator">==</span><span class="token operator">=</span> <span class="token string">'Disabled User'</span><span class="token punctuation">,</span> <span class="token operator">/</span><span class="token operator">/</span> Column configuration <span class="token operator">not</span> <span class="token keyword">to</span> be checked
|
|
}<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
}<span class="token comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>Table rowSelection<span class="token operator">=</span>{rowSelection} columns<span class="token operator">=</span>{columns} dataSource<span class="token operator">=</span>{data} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-row-selection-and-operation" data-reactid="735"><section class="code-box-demo" data-reactid="736"><div data-reactid="737"><div style="margin-bottom:16px;" data-reactid="738"><button disabled="" type="button" class="ant-btn ant-btn-primary" data-reactid="739"><span data-reactid="740">Reload</span></button><span style="margin-left:8px;" data-reactid="741"></span></div><div class=" clearfix" data-reactid="742"><div class="ant-spin-nested-loading" data-reactid="743"><div class="ant-spin-container" data-reactid="744"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="745"><div class="ant-table-content" data-reactid="746"><div class="" data-reactid="747"><span data-reactid="748"><div class="ant-table-body" data-reactid="749"><table class="" data-reactid="750"><colgroup data-reactid="751"><col data-reactid="752"/><col data-reactid="753"/><col data-reactid="754"/><col data-reactid="755"/></colgroup><thead class="ant-table-thead" data-reactid="756"><tr data-reactid="757"><th class="ant-table-selection-column" data-reactid="758"><span data-reactid="759"><label class="ant-checkbox-wrapper" data-reactid="760"><span class="ant-checkbox" data-reactid="761"><span class="ant-checkbox-inner" data-reactid="762"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="763"/></span></label></span></th><th class="" data-reactid="764"><span data-reactid="765"><!-- react-text: 766 -->Name<!-- /react-text --></span></th><th class="" data-reactid="767"><span data-reactid="768"><!-- react-text: 769 -->Age<!-- /react-text --></span></th><th class="" data-reactid="770"><span data-reactid="771"><!-- react-text: 772 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="773"><tr class="ant-table-row ant-table-row-level-0" data-reactid="774"><td class="ant-table-selection-column" data-reactid="775"><span data-reactid="776"><label class="ant-checkbox-wrapper" data-reactid="777"><span class="ant-checkbox" data-reactid="778"><span class="ant-checkbox-inner" data-reactid="779"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="780"/></span></label></span></td><td class="" data-reactid="781"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="782"></span><!-- react-empty: 783 --><!-- react-text: 784 -->Edward King 0<!-- /react-text --></td><td class="" data-reactid="785"><!-- react-text: 786 -->32<!-- /react-text --></td><td class="" data-reactid="787"><!-- react-text: 788 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="789"><td class="ant-table-selection-column" data-reactid="790"><span data-reactid="791"><label class="ant-checkbox-wrapper" data-reactid="792"><span class="ant-checkbox" data-reactid="793"><span class="ant-checkbox-inner" data-reactid="794"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="795"/></span></label></span></td><td class="" data-reactid="796"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="797"></span><!-- react-empty: 798 --><!-- react-text: 799 -->Edward King 1<!-- /react-text --></td><td class="" data-reactid="800"><!-- react-text: 801 -->32<!-- /react-text --></td><td class="" data-reactid="802"><!-- react-text: 803 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="804"><td class="ant-table-selection-column" data-reactid="805"><span data-reactid="806"><label class="ant-checkbox-wrapper" data-reactid="807"><span class="ant-checkbox" data-reactid="808"><span class="ant-checkbox-inner" data-reactid="809"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="810"/></span></label></span></td><td class="" data-reactid="811"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="812"></span><!-- react-empty: 813 --><!-- react-text: 814 -->Edward King 2<!-- /react-text --></td><td class="" data-reactid="815"><!-- react-text: 816 -->32<!-- /react-text --></td><td class="" data-reactid="817"><!-- react-text: 818 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="819"><td class="ant-table-selection-column" data-reactid="820"><span data-reactid="821"><label class="ant-checkbox-wrapper" data-reactid="822"><span class="ant-checkbox" data-reactid="823"><span class="ant-checkbox-inner" data-reactid="824"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="825"/></span></label></span></td><td class="" data-reactid="826"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="827"></span><!-- react-empty: 828 --><!-- react-text: 829 -->Edward King 3<!-- /react-text --></td><td class="" data-reactid="830"><!-- react-text: 831 -->32<!-- /react-text --></td><td class="" data-reactid="832"><!-- react-text: 833 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="834"><td class="ant-table-selection-column" data-reactid="835"><span data-reactid="836"><label class="ant-checkbox-wrapper" data-reactid="837"><span class="ant-checkbox" data-reactid="838"><span class="ant-checkbox-inner" data-reactid="839"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="840"/></span></label></span></td><td class="" data-reactid="841"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="842"></span><!-- react-empty: 843 --><!-- react-text: 844 -->Edward King 4<!-- /react-text --></td><td class="" data-reactid="845"><!-- react-text: 846 -->32<!-- /react-text --></td><td class="" data-reactid="847"><!-- react-text: 848 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="849"><td class="ant-table-selection-column" data-reactid="850"><span data-reactid="851"><label class="ant-checkbox-wrapper" data-reactid="852"><span class="ant-checkbox" data-reactid="853"><span class="ant-checkbox-inner" data-reactid="854"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="855"/></span></label></span></td><td class="" data-reactid="856"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="857"></span><!-- react-empty: 858 --><!-- react-text: 859 -->Edward King 5<!-- /react-text --></td><td class="" data-reactid="860"><!-- react-text: 861 -->32<!-- /react-text --></td><td class="" data-reactid="862"><!-- react-text: 863 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="864"><td class="ant-table-selection-column" data-reactid="865"><span data-reactid="866"><label class="ant-checkbox-wrapper" data-reactid="867"><span class="ant-checkbox" data-reactid="868"><span class="ant-checkbox-inner" data-reactid="869"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="870"/></span></label></span></td><td class="" data-reactid="871"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="872"></span><!-- react-empty: 873 --><!-- react-text: 874 -->Edward King 6<!-- /react-text --></td><td class="" data-reactid="875"><!-- react-text: 876 -->32<!-- /react-text --></td><td class="" data-reactid="877"><!-- react-text: 878 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="879"><td class="ant-table-selection-column" data-reactid="880"><span data-reactid="881"><label class="ant-checkbox-wrapper" data-reactid="882"><span class="ant-checkbox" data-reactid="883"><span class="ant-checkbox-inner" data-reactid="884"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="885"/></span></label></span></td><td class="" data-reactid="886"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="887"></span><!-- react-empty: 888 --><!-- react-text: 889 -->Edward King 7<!-- /react-text --></td><td class="" data-reactid="890"><!-- react-text: 891 -->32<!-- /react-text --></td><td class="" data-reactid="892"><!-- react-text: 893 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="894"><td class="ant-table-selection-column" data-reactid="895"><span data-reactid="896"><label class="ant-checkbox-wrapper" data-reactid="897"><span class="ant-checkbox" data-reactid="898"><span class="ant-checkbox-inner" data-reactid="899"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="900"/></span></label></span></td><td class="" data-reactid="901"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="902"></span><!-- react-empty: 903 --><!-- react-text: 904 -->Edward King 8<!-- /react-text --></td><td class="" data-reactid="905"><!-- react-text: 906 -->32<!-- /react-text --></td><td class="" data-reactid="907"><!-- react-text: 908 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="909"><td class="ant-table-selection-column" data-reactid="910"><span data-reactid="911"><label class="ant-checkbox-wrapper" data-reactid="912"><span class="ant-checkbox" data-reactid="913"><span class="ant-checkbox-inner" data-reactid="914"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="915"/></span></label></span></td><td class="" data-reactid="916"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="917"></span><!-- react-empty: 918 --><!-- react-text: 919 -->Edward King 9<!-- /react-text --></td><td class="" data-reactid="920"><!-- react-text: 921 -->32<!-- /react-text --></td><td class="" data-reactid="922"><!-- react-text: 923 -->London, Park Lane no. 9<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="924"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="925"><a data-reactid="926"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="927"><a data-reactid="928">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="929"><a data-reactid="930">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="931"><a data-reactid="932">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="933"><a data-reactid="934">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" data-reactid="935"><a data-reactid="936">5</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="937"><a data-reactid="938"></a></li><!-- react-empty: 939 --></ul></div></div></div></div></section><section class="code-box-meta markdown" data-reactid="940"><div class="code-box-title" data-reactid="941"><a href="#components-table-demo-row-selection-and-operation" data-reactid="942">Selection and operation</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/row-selection-and-operation.md" data-reactid="943"><i class="anticon anticon-edit" data-reactid="944"></i></a></div><div data-reactid="945"><p data-reactid="946"><!-- react-text: 947 -->To perform operations and clear selections after selecting some rows, use <!-- /react-text --><code data-reactid="948"><!-- react-text: 949 -->rowSelection.selectedRowKeys<!-- /react-text --></code><!-- react-text: 950 --> to control selected rows.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="951"></i></section><section class="highlight-wrapper" data-reactid="952"><div class="highlight" data-reactid="953"><pre class="language-__react" data-reactid="954"><code data-reactid="955">import { Table<span class="token punctuation">,</span> Button } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">for</span> <span class="token punctuation">(</span>let i <span class="token operator">=</span> <span class="token number">0</span><span class="token comment" spellcheck="true">; i < 46; i++) {</span>
|
|
data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>{
|
|
key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
|
|
name<span class="token punctuation">:</span> `Edward King ${i}`<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> `London<span class="token punctuation">,</span> Park Lane no<span class="token punctuation">.</span> ${i}`<span class="token punctuation">,</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
|
|
<span class="token keyword">const</span> App <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass</span><span class="token punctuation">(</span>{
|
|
<span class="token function">getInitialState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
return {
|
|
selectedRowKeys<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> Check here <span class="token keyword">to</span> configure the <span class="token keyword">default</span> column
|
|
loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
}<span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</span>
|
|
<span class="token operator">/</span><span class="token operator">/</span> ajax request after empty completing
|
|
<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> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token function">onSelectChange</span><span class="token punctuation">(</span>selectedRowKeys<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 comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>{ selectedRowKeys }<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</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 keyword">const</span> { loading<span class="token punctuation">,</span> selectedRowKeys } <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> rowSelection <span class="token operator">=</span> {
|
|
selectedRowKeys<span class="token punctuation">,</span>
|
|
onChange<span class="token punctuation">:</span> this<span class="token punctuation">.</span>onSelectChange<span class="token punctuation">,</span>
|
|
}<span class="token comment" spellcheck="true">;</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 comment" spellcheck="true">;</span>
|
|
return <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span>div style<span class="token operator">=</span>{{ marginBottom<span class="token punctuation">:</span> <span class="token number">16</span> }}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Button type<span class="token operator">=</span><span class="token string">"primary"</span> onClick<span class="token operator">=</span>{this<span class="token punctuation">.</span>start}
|
|
disabled<span class="token operator">=</span>{!hasSelected} loading<span class="token operator">=</span>{loading}
|
|
<span class="token operator">></span>Reload<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span>
|
|
<span class="token operator"><</span>span style<span class="token operator">=</span>{{ marginLeft<span class="token punctuation">:</span> <span class="token number">8</span> }}<span class="token operator">></span>{hasSelected <span class="token operator">?</span> `Selected ${selectedRowKeys<span class="token punctuation">.</span>length} items` <span class="token punctuation">:</span> <span class="token string">''</span>}<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span>Table rowSelection<span class="token operator">=</span>{rowSelection} columns<span class="token operator">=</span>{columns} dataSource<span class="token operator">=</span>{data} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>App <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-paging" data-reactid="956"><section class="code-box-demo" data-reactid="957"><div class=" clearfix" data-reactid="958"><div class="ant-spin-nested-loading" data-reactid="959"><div class="ant-spin-container" data-reactid="960"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="961"><div class="ant-table-content" data-reactid="962"><div class="" data-reactid="963"><span data-reactid="964"><div class="ant-table-body" data-reactid="965"><table class="" data-reactid="966"><colgroup data-reactid="967"><col data-reactid="968"/><col data-reactid="969"/><col data-reactid="970"/></colgroup><thead class="ant-table-thead" data-reactid="971"><tr data-reactid="972"><th class="" data-reactid="973"><span data-reactid="974"><!-- react-text: 975 -->Name<!-- /react-text --></span></th><th class="" data-reactid="976"><span data-reactid="977"><!-- react-text: 978 -->Age<!-- /react-text --></span></th><th class="" data-reactid="979"><span data-reactid="980"><!-- react-text: 981 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="982"><tr class="ant-table-row ant-table-row-level-0" data-reactid="983"><td class="" data-reactid="984"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="985"></span><!-- react-empty: 986 --><a href="#" data-reactid="987">Edward King 0</a></td><td class="" data-reactid="988"><!-- react-text: 989 -->32<!-- /react-text --></td><td class="" data-reactid="990"><!-- react-text: 991 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="992"><td class="" data-reactid="993"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="994"></span><!-- react-empty: 995 --><a href="#" data-reactid="996">Edward King 1</a></td><td class="" data-reactid="997"><!-- react-text: 998 -->32<!-- /react-text --></td><td class="" data-reactid="999"><!-- react-text: 1000 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1001"><td class="" data-reactid="1002"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1003"></span><!-- react-empty: 1004 --><a href="#" data-reactid="1005">Edward King 2</a></td><td class="" data-reactid="1006"><!-- react-text: 1007 -->32<!-- /react-text --></td><td class="" data-reactid="1008"><!-- react-text: 1009 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1010"><td class="" data-reactid="1011"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1012"></span><!-- react-empty: 1013 --><a href="#" data-reactid="1014">Edward King 3</a></td><td class="" data-reactid="1015"><!-- react-text: 1016 -->32<!-- /react-text --></td><td class="" data-reactid="1017"><!-- react-text: 1018 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1019"><td class="" data-reactid="1020"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1021"></span><!-- react-empty: 1022 --><a href="#" data-reactid="1023">Edward King 4</a></td><td class="" data-reactid="1024"><!-- react-text: 1025 -->32<!-- /react-text --></td><td class="" data-reactid="1026"><!-- react-text: 1027 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1028"><td class="" data-reactid="1029"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1030"></span><!-- react-empty: 1031 --><a href="#" data-reactid="1032">Edward King 5</a></td><td class="" data-reactid="1033"><!-- react-text: 1034 -->32<!-- /react-text --></td><td class="" data-reactid="1035"><!-- react-text: 1036 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1037"><td class="" data-reactid="1038"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1039"></span><!-- react-empty: 1040 --><a href="#" data-reactid="1041">Edward King 6</a></td><td class="" data-reactid="1042"><!-- react-text: 1043 -->32<!-- /react-text --></td><td class="" data-reactid="1044"><!-- react-text: 1045 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1046"><td class="" data-reactid="1047"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1048"></span><!-- react-empty: 1049 --><a href="#" data-reactid="1050">Edward King 7</a></td><td class="" data-reactid="1051"><!-- react-text: 1052 -->32<!-- /react-text --></td><td class="" data-reactid="1053"><!-- react-text: 1054 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1055"><td class="" data-reactid="1056"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1057"></span><!-- react-empty: 1058 --><a href="#" data-reactid="1059">Edward King 8</a></td><td class="" data-reactid="1060"><!-- react-text: 1061 -->32<!-- /react-text --></td><td class="" data-reactid="1062"><!-- react-text: 1063 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1064"><td class="" data-reactid="1065"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1066"></span><!-- react-empty: 1067 --><a href="#" data-reactid="1068">Edward King 9</a></td><td class="" data-reactid="1069"><!-- react-text: 1070 -->32<!-- /react-text --></td><td class="" data-reactid="1071"><!-- react-text: 1072 -->London, Park Lane no. 9<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1073"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1074"><a data-reactid="1075"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1076"><a data-reactid="1077">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="1078"><a data-reactid="1079">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="1080"><a data-reactid="1081">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="1082"><a data-reactid="1083">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" data-reactid="1084"><a data-reactid="1085">5</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="1086"><a data-reactid="1087"></a></li><div class="ant-pagination-options" data-reactid="1088"><div class="ant-pagination-options-size-changer ant-select ant-select-enabled" data-reactid="1089"><div class="ant-select-selection
|
|
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="1090"><div class="ant-select-selection__rendered" data-reactid="1091"><div class="ant-select-selection-selected-value" title="10 / page" style="display:block;opacity:1;" data-reactid="1092">10 / page</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="1093"><b data-reactid="1094"></b></span></div></div></div></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1095"><div class="code-box-title" data-reactid="1096"><a href="#components-table-demo-paging" data-reactid="1097">Pagination</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/paging.md" data-reactid="1098"><i class="anticon anticon-edit" data-reactid="1099"></i></a></div><div data-reactid="1100"><p data-reactid="1101"><!-- react-text: 1102 -->The pagination in table could be configured with an object, and you can use <!-- /react-text --><code data-reactid="1103"><!-- react-text: 1104 -->pagination={false}<!-- /react-text --></code><!-- react-text: 1105 --> to turn off pagination.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1106"></i></section><section class="highlight-wrapper" data-reactid="1107"><div class="highlight" data-reactid="1108"><pre class="language-__react" data-reactid="1109"><code data-reactid="1110">import { Table } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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 operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>{text}<span class="token operator"><</span><span class="token operator">/</span>a<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">'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> {
|
|
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 comment" spellcheck="true">;</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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">for</span> <span class="token punctuation">(</span>let i <span class="token operator">=</span> <span class="token number">0</span><span class="token comment" spellcheck="true">; i < 46; i++) {</span>
|
|
data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>{
|
|
key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
|
|
name<span class="token punctuation">:</span> `Edward King ${i}`<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> `London<span class="token punctuation">,</span> Park Lane no<span class="token punctuation">.</span> ${i}`<span class="token punctuation">,</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
|
|
<span class="token keyword">const</span> pagination <span class="token operator">=</span> {
|
|
total<span class="token punctuation">:</span> data<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
|
|
showSizeChanger<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
onShowSizeChange<span class="token punctuation">:</span> <span class="token punctuation">(</span>current<span class="token punctuation">,</span> pageSize<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Current: '</span><span class="token punctuation">,</span> current<span class="token punctuation">,</span> '<span class="token comment" spellcheck="true">; PageSize: ', pageSize);</span>
|
|
}<span class="token punctuation">,</span>
|
|
onChange<span class="token punctuation">:</span> <span class="token punctuation">(</span>current<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Current: '</span><span class="token punctuation">,</span> current<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
}<span class="token comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>Table columns<span class="token operator">=</span>{columns} dataSource<span class="token operator">=</span>{data} pagination<span class="token operator">=</span>{pagination} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-reset-filter" data-reactid="1111"><section class="code-box-demo" data-reactid="1112"><div data-reactid="1113"><div class="table-operations" data-reactid="1114"><button type="button" class="ant-btn ant-btn-ghost" data-reactid="1115"><span data-reactid="1116">Sort age</span></button><button type="button" class="ant-btn ant-btn-ghost" data-reactid="1117"><span data-reactid="1118">Clear filters</span></button><button type="button" class="ant-btn ant-btn-ghost" data-reactid="1119"><span data-reactid="1120">Clear filters and sorters</span></button></div><div class=" clearfix" data-reactid="1121"><div class="ant-spin-nested-loading" data-reactid="1122"><div class="ant-spin-container" data-reactid="1123"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1124"><div class="ant-table-content" data-reactid="1125"><div class="" data-reactid="1126"><span data-reactid="1127"><div class="ant-table-body" data-reactid="1128"><table class="" data-reactid="1129"><colgroup data-reactid="1130"><col data-reactid="1131"/><col data-reactid="1132"/><col data-reactid="1133"/></colgroup><thead class="ant-table-thead" data-reactid="1134"><tr data-reactid="1135"><th class="" data-reactid="1136"><span data-reactid="1137"><!-- react-text: 1138 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1139"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1140"><i class="anticon anticon-caret-up" data-reactid="1141"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1142"><i class="anticon anticon-caret-down" data-reactid="1143"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1144"></i></span></th><th class="" data-reactid="1145"><span data-reactid="1146"><!-- react-text: 1147 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1148"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1149"><i class="anticon anticon-caret-up" data-reactid="1150"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1151"><i class="anticon anticon-caret-down" data-reactid="1152"></i></span></div></span></th><th class="" data-reactid="1153"><span data-reactid="1154"><!-- react-text: 1155 -->Address<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1156"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1157"><i class="anticon anticon-caret-up" data-reactid="1158"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1159"><i class="anticon anticon-caret-down" data-reactid="1160"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1161"></i></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1162"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1163"><td class="" data-reactid="1164"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1165"></span><!-- react-empty: 1166 --><!-- react-text: 1167 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1168"><!-- react-text: 1169 -->32<!-- /react-text --></td><td class="" data-reactid="1170"><!-- react-text: 1171 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1172"><td class="" data-reactid="1173"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1174"></span><!-- react-empty: 1175 --><!-- react-text: 1176 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1177"><!-- react-text: 1178 -->42<!-- /react-text --></td><td class="" data-reactid="1179"><!-- react-text: 1180 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1181"><td class="" data-reactid="1182"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1183"></span><!-- react-empty: 1184 --><!-- react-text: 1185 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1186"><!-- react-text: 1187 -->32<!-- /react-text --></td><td class="" data-reactid="1188"><!-- react-text: 1189 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1190"><td class="" data-reactid="1191"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1192"></span><!-- react-empty: 1193 --><!-- react-text: 1194 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1195"><!-- react-text: 1196 -->32<!-- /react-text --></td><td class="" data-reactid="1197"><!-- react-text: 1198 -->London No. 2 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1199"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1200"><a data-reactid="1201"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1202"><a data-reactid="1203">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1204"><a data-reactid="1205"></a></li><!-- react-empty: 1206 --></ul></div></div></div></div><style data-reactid="1207">.table-operations {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.table-operations > button {
|
|
margin-right: 8px;
|
|
}</style></section><section class="code-box-meta markdown" data-reactid="1208"><div class="code-box-title" data-reactid="1209"><a href="#components-table-demo-reset-filter" data-reactid="1210">Reset filters and sorters</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/reset-filter.md" data-reactid="1211"><i class="anticon anticon-edit" data-reactid="1212"></i></a></div><div data-reactid="1213"><p data-reactid="1214"><!-- react-text: 1215 -->Control filters and sorters by <!-- /react-text --><code data-reactid="1216"><!-- react-text: 1217 -->filteredValue<!-- /react-text --></code><!-- react-text: 1218 --> and <!-- /react-text --><code data-reactid="1219"><!-- react-text: 1220 -->sortOrder<!-- /react-text --></code><!-- react-text: 1221 -->.<!-- /react-text --></p><blockquote data-reactid="1222"><ol data-reactid="1223"><li data-reactid="1224"><p data-reactid="1225"><!-- react-text: 1226 -->Defining <!-- /react-text --><code data-reactid="1227"><!-- react-text: 1228 -->filteredValue<!-- /react-text --></code><!-- react-text: 1229 --> or <!-- /react-text --><code data-reactid="1230"><!-- react-text: 1231 -->sortOrder<!-- /react-text --></code><!-- react-text: 1232 --> means that it is in the controlled mode.<!-- /react-text --></p></li><li data-reactid="1233"><p data-reactid="1234"><!-- react-text: 1235 -->Make sure <!-- /react-text --><code data-reactid="1236"><!-- react-text: 1237 -->sortOrder<!-- /react-text --></code><!-- react-text: 1238 --> is assigned for only one column.<!-- /react-text --></p></li><li data-reactid="1239"><p data-reactid="1240"><code data-reactid="1241"><!-- react-text: 1242 -->column.key<!-- /react-text --></code><!-- react-text: 1243 --> is required.<!-- /react-text --></p></li></ol></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1244"></i></section><section class="highlight-wrapper" data-reactid="1245"><div class="highlight" data-reactid="1246"><pre class="language-__react" data-reactid="1247"><code data-reactid="1248">import { Table<span class="token punctuation">,</span> Button } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> data <span class="token operator">=</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> {
|
|
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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> App <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass</span><span class="token punctuation">(</span>{
|
|
<span class="token function">getInitialState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
return {
|
|
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 comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token function">handleChange</span><span class="token punctuation">(</span>pagination<span class="token punctuation">,</span> filters<span class="token punctuation">,</span> sorter<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 comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token function">clearFilters</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token function">clearAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token function">setAgeSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>{
|
|
sortedInfo<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 comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
let { sortedInfo<span class="token punctuation">,</span> filteredInfo } <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token comment" spellcheck="true">;</span>
|
|
sortedInfo <span class="token operator">=</span> sortedInfo || {}<span class="token comment" spellcheck="true">;</span>
|
|
filteredInfo <span class="token operator">=</span> filteredInfo || {}<span class="token comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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>
|
|
{ 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>
|
|
{ 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>
|
|
filteredValue<span class="token punctuation">:</span> filteredInfo<span class="token punctuation">.</span>name || <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 operator">=</span> <span class="token string">'name'</span> <span class="token operator">&</span><span class="token operator">&</span> sortedInfo<span class="token punctuation">.</span>order<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 operator">=</span> <span class="token string">'age'</span> <span class="token operator">&</span><span class="token operator">&</span> sortedInfo<span class="token punctuation">.</span>order<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>
|
|
{ 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>
|
|
{ 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>
|
|
filteredValue<span class="token punctuation">:</span> filteredInfo<span class="token punctuation">.</span>address || <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 operator">=</span> <span class="token string">'address'</span> <span class="token operator">&</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 comment" spellcheck="true">;</span>
|
|
return <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"table-operations"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Button type<span class="token operator">=</span><span class="token string">"ghost"</span> onClick<span class="token operator">=</span>{this<span class="token punctuation">.</span>setAgeSort}<span class="token operator">></span>Sort age<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span>
|
|
<span class="token operator"><</span>Button type<span class="token operator">=</span><span class="token string">"ghost"</span> onClick<span class="token operator">=</span>{this<span class="token punctuation">.</span>clearFilters}<span class="token operator">></span>Clear filters<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span>
|
|
<span class="token operator"><</span>Button type<span class="token operator">=</span><span class="token string">"ghost"</span> onClick<span class="token operator">=</span>{this<span class="token punctuation">.</span>clearAll}<span class="token operator">></span>Clear filters <span class="token operator">and</span> sorters<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span>Table columns<span class="token operator">=</span>{columns} dataSource<span class="token operator">=</span>{data} onChange<span class="token operator">=</span>{this<span class="token punctuation">.</span>handleChange} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>App <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div><div class="highlight" data-reactid="1249"><pre data-reactid="1250"><code class="css" data-reactid="1251"><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="1252"><section class="code-box-demo" data-reactid="1253"><div class=" clearfix" data-reactid="1254"><div class="ant-spin-nested-loading" data-reactid="1255"><div class="ant-spin-container" data-reactid="1256"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1257"><div class="ant-table-content" data-reactid="1258"><div class="" data-reactid="1259"><span data-reactid="1260"><div class="ant-table-body" data-reactid="1261"><table class="" data-reactid="1262"><colgroup data-reactid="1263"><col data-reactid="1264"/><col data-reactid="1265"/><col data-reactid="1266"/></colgroup><thead class="ant-table-thead" data-reactid="1267"><tr data-reactid="1268"><th class="" data-reactid="1269"><span data-reactid="1270"><!-- react-text: 1271 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1272"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1273"><i class="anticon anticon-caret-up" data-reactid="1274"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1275"><i class="anticon anticon-caret-down" data-reactid="1276"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1277"></i></span></th><th class="" data-reactid="1278"><span data-reactid="1279"><!-- react-text: 1280 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1281"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1282"><i class="anticon anticon-caret-up" data-reactid="1283"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1284"><i class="anticon anticon-caret-down" data-reactid="1285"></i></span></div></span></th><th class="" data-reactid="1286"><span data-reactid="1287"><!-- react-text: 1288 -->Address<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1289"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1290"><i class="anticon anticon-caret-up" data-reactid="1291"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1292"><i class="anticon anticon-caret-down" data-reactid="1293"></i></span></div><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1294"></i></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1295"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1296"><td class="" data-reactid="1297"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1298"></span><!-- react-empty: 1299 --><!-- react-text: 1300 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1301"><!-- react-text: 1302 -->32<!-- /react-text --></td><td class="" data-reactid="1303"><!-- react-text: 1304 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1305"><td class="" data-reactid="1306"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1307"></span><!-- react-empty: 1308 --><!-- react-text: 1309 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1310"><!-- react-text: 1311 -->42<!-- /react-text --></td><td class="" data-reactid="1312"><!-- react-text: 1313 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1314"><td class="" data-reactid="1315"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1316"></span><!-- react-empty: 1317 --><!-- react-text: 1318 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1319"><!-- react-text: 1320 -->32<!-- /react-text --></td><td class="" data-reactid="1321"><!-- react-text: 1322 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1323"><td class="" data-reactid="1324"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1325"></span><!-- react-empty: 1326 --><!-- react-text: 1327 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1328"><!-- react-text: 1329 -->32<!-- /react-text --></td><td class="" data-reactid="1330"><!-- react-text: 1331 -->London No. 2 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1332"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1333"><a data-reactid="1334"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1335"><a data-reactid="1336">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1337"><a data-reactid="1338"></a></li><!-- react-empty: 1339 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1340"><div class="code-box-title" data-reactid="1341"><a href="#components-table-demo-head" data-reactid="1342">Filter and sorter</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/head.md" data-reactid="1343"><i class="anticon anticon-edit" data-reactid="1344"></i></a></div><div data-reactid="1345"><p data-reactid="1346"><!-- react-text: 1347 -->Use <!-- /react-text --><code data-reactid="1348"><!-- react-text: 1349 -->filters<!-- /react-text --></code><!-- react-text: 1350 --> to generate filter menu in columns, <!-- /react-text --><code data-reactid="1351"><!-- react-text: 1352 -->onFilter<!-- /react-text --></code><!-- react-text: 1353 --> to determine filtered result, and <!-- /react-text --><code data-reactid="1354"><!-- react-text: 1355 -->filterMultiple<!-- /react-text --></code><!-- react-text: 1356 --> to indicate whether it's multiple or single selection.<!-- /react-text --></p><p data-reactid="1357"><!-- react-text: 1358 -->Use <!-- /react-text --><code data-reactid="1359"><!-- react-text: 1360 -->sorter<!-- /react-text --></code><!-- react-text: 1361 --> to make a column sortable. <!-- /react-text --><code data-reactid="1362"><!-- react-text: 1363 -->sorter<!-- /react-text --></code><!-- react-text: 1364 --> can be a function <!-- /react-text --><code data-reactid="1365"><!-- react-text: 1366 -->function(a, b) { ... }<!-- /react-text --></code><!-- react-text: 1367 --> for sorting data locally.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1368"></i></section><section class="highlight-wrapper" data-reactid="1369"><div class="highlight" data-reactid="1370"><pre class="language-__react" data-reactid="1371"><code data-reactid="1372">import { Table } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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>{
|
|
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> {
|
|
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> {
|
|
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>{
|
|
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> {
|
|
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 operator">/</span><span class="token operator">/</span> specify the condition of filtering result
|
|
<span class="token operator">/</span><span class="token operator">/</span> here is that finding the name started <span class="token keyword">with</span> `value`
|
|
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 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> {
|
|
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> {
|
|
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>{
|
|
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> {
|
|
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>
|
|
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 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 comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> data <span class="token operator">=</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> {
|
|
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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
|
|
function <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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
}
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>Table columns<span class="token operator">=</span>{columns} dataSource<span class="token operator">=</span>{data} onChange<span class="token operator">=</span>{onChange} <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-custom-filter-panel" data-reactid="1373"><section class="code-box-demo" data-reactid="1374"><div class=" clearfix" data-reactid="1375"><div class="ant-spin-nested-loading" data-reactid="1376"><div class="ant-spin-container" data-reactid="1377"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1378"><div class="ant-table-content" data-reactid="1379"><div class="" data-reactid="1380"><span data-reactid="1381"><div class="ant-table-body" data-reactid="1382"><table class="" data-reactid="1383"><colgroup data-reactid="1384"><col data-reactid="1385"/><col data-reactid="1386"/><col data-reactid="1387"/></colgroup><thead class="ant-table-thead" data-reactid="1388"><tr data-reactid="1389"><th class="" data-reactid="1390"><span data-reactid="1391"><!-- react-text: 1392 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1393"></i></span></th><th class="" data-reactid="1394"><span data-reactid="1395"><!-- react-text: 1396 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1397"><span data-reactid="1398"><!-- react-text: 1399 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1400"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1401"><td class="" data-reactid="1402"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1403"></span><!-- react-empty: 1404 --><!-- react-text: 1405 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1406"><!-- react-text: 1407 -->32<!-- /react-text --></td><td class="" data-reactid="1408"><!-- react-text: 1409 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1410"><td class="" data-reactid="1411"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1412"></span><!-- react-empty: 1413 --><!-- react-text: 1414 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1415"><!-- react-text: 1416 -->42<!-- /react-text --></td><td class="" data-reactid="1417"><!-- react-text: 1418 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1419"><td class="" data-reactid="1420"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1421"></span><!-- react-empty: 1422 --><!-- react-text: 1423 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1424"><!-- react-text: 1425 -->32<!-- /react-text --></td><td class="" data-reactid="1426"><!-- react-text: 1427 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1428"><td class="" data-reactid="1429"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1430"></span><!-- react-empty: 1431 --><!-- react-text: 1432 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1433"><!-- react-text: 1434 -->32<!-- /react-text --></td><td class="" data-reactid="1435"><!-- react-text: 1436 -->London No. 2 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1437"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1438"><a data-reactid="1439"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1440"><a data-reactid="1441">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1442"><a data-reactid="1443"></a></li><!-- react-empty: 1444 --></ul></div></div></div><style data-reactid="1445">.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="1446"><div class="code-box-title" data-reactid="1447"><a href="#components-table-demo-custom-filter-panel" data-reactid="1448">Customized filter panel</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/custom-filter-panel.md" data-reactid="1449"><i class="anticon anticon-edit" data-reactid="1450"></i></a></div><div data-reactid="1451"><p data-reactid="1452"><!-- react-text: 1453 -->Implement a customized column search example via <!-- /react-text --><code data-reactid="1454"><!-- react-text: 1455 -->filterDropdown<!-- /react-text --></code><!-- react-text: 1456 -->, <!-- /react-text --><code data-reactid="1457"><!-- react-text: 1458 -->filterDropdownVisible<!-- /react-text --></code><!-- react-text: 1459 --> and <!-- /react-text --><code data-reactid="1460"><!-- react-text: 1461 -->filterDropdownVisibleChange<!-- /react-text --></code><!-- react-text: 1462 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1463"></i></section><section class="highlight-wrapper" data-reactid="1464"><div class="highlight" data-reactid="1465"><pre class="language-__react" data-reactid="1466"><code data-reactid="1467">import { Table<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Button } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> data <span class="token operator">=</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> {
|
|
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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> App <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass</span><span class="token punctuation">(</span>{
|
|
<span class="token function">getInitialState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
return {
|
|
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 comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token function">onInputChange</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token function">onSearch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
<span class="token keyword">const</span> { searchText } <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> reg <span class="token operator">=</span> new <span class="token function">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 comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>!match<span class="token punctuation">)</span> {
|
|
return <span class="token keyword">null</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
return {
|
|
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>record<span class="token punctuation">,</span>
|
|
name<span class="token punctuation">:</span> <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>span<span class="token operator">></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 operator"><</span>span className<span class="token operator">=</span><span class="token string">"highlight"</span><span class="token operator">></span>{match<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>}<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></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 operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
}<span class="token comment" spellcheck="true">;</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> !!record<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</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 keyword">const</span> columns <span class="token operator">=</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 operator"><</span>div className<span class="token operator">=</span><span class="token string">"custom-filter-dropdown"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Input
|
|
placeholder<span class="token operator">=</span><span class="token string">"Search name"</span>
|
|
value<span class="token operator">=</span>{this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>searchText}
|
|
onChange<span class="token operator">=</span>{this<span class="token punctuation">.</span>onInputChange}
|
|
onPressEnter<span class="token operator">=</span>{this<span class="token punctuation">.</span>onSearch}
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Button type<span class="token operator">=</span><span class="token string">"primary"</span> onClick<span class="token operator">=</span>{this<span class="token punctuation">.</span>onSearch}<span class="token operator">></span>Search<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
filterDropdownVisible<span class="token punctuation">:</span> this<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> this<span class="token punctuation">.</span><span class="token function">setState</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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
return <span class="token operator"><</span>Table columns<span class="token operator">=</span>{columns} dataSource<span class="token operator">=</span>{this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>data} <span class="token operator">/</span><span class="token operator">></span><span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>App <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div><div class="highlight" data-reactid="1468"><pre data-reactid="1469"><code class="css" data-reactid="1470"><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="1471"><section class="code-box-demo" data-reactid="1472"><div class=" clearfix" data-reactid="1473"><div class="ant-spin-nested-loading" data-reactid="1474"><div class="ant-spin-container" data-reactid="1475"><div class="ant-table ant-table-large ant-table-empty ant-table-scroll-position-left" data-reactid="1476"><div class="ant-table-content" data-reactid="1477"><div class="" data-reactid="1478"><span data-reactid="1479"><div class="ant-table-body" data-reactid="1480"><table class="" data-reactid="1481"><colgroup data-reactid="1482"><col style="width:20%;min-width:20%;" data-reactid="1483"/><col style="width:20%;min-width:20%;" data-reactid="1484"/><col data-reactid="1485"/></colgroup><thead class="ant-table-thead" data-reactid="1486"><tr data-reactid="1487"><th class="" data-reactid="1488"><span data-reactid="1489"><!-- react-text: 1490 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1491"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1492"><i class="anticon anticon-caret-up" data-reactid="1493"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1494"><i class="anticon anticon-caret-down" data-reactid="1495"></i></span></div></span></th><th class="" data-reactid="1496"><span data-reactid="1497"><!-- react-text: 1498 -->Gender<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="1499"></i></span></th><th class="" data-reactid="1500"><span data-reactid="1501"><!-- react-text: 1502 -->Email<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1503"></tbody></table></div></span><div class="ant-table-placeholder" data-reactid="1504">No Data</div></div></div></div></div></div></div></section><section class="code-box-meta markdown" data-reactid="1505"><div class="code-box-title" data-reactid="1506"><a href="#components-table-demo-ajax" data-reactid="1507">Ajax</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/ajax.md" data-reactid="1508"><i class="anticon anticon-edit" data-reactid="1509"></i></a></div><div data-reactid="1510"><p data-reactid="1511"><!-- react-text: 1512 -->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="1513"><strong data-reactid="1514"><!-- react-text: 1515 -->Note, this example use <!-- /react-text --><a href="https://randomuser.me" data-reactid="1516"><!-- react-text: 1517 -->Mock API<!-- /react-text --></a><!-- react-text: 1518 --> 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="1519"></i></section><section class="highlight-wrapper" data-reactid="1520"><div class="highlight" data-reactid="1521"><pre class="language-__react" data-reactid="1522"><code data-reactid="1523">import { Table } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
import reqwest from <span class="token string">'reqwest'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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> `${name<span class="token punctuation">.</span>first} ${name<span class="token punctuation">.</span>last}`<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> {
|
|
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>
|
|
{ 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>
|
|
{ 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>
|
|
width<span class="token punctuation">:</span> <span class="token string">'20%'</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 comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> Test <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass</span><span class="token punctuation">(</span>{
|
|
<span class="token function">getInitialState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
return {
|
|
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>
|
|
loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
}<span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token function">handleTableChange</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 keyword">const</span> pager <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>pagination<span class="token comment" spellcheck="true">;</span>
|
|
pager<span class="token punctuation">.</span>current <span class="token operator">=</span> pagination<span class="token punctuation">.</span>current<span class="token comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">fetch</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 punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>filters<span class="token punctuation">,</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token function">fetch</span><span class="token punctuation">(</span>params <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 comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</span>
|
|
<span class="token function">reqwest</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> {
|
|
results<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>params<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 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 keyword">const</span> pagination <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>pagination<span class="token comment" spellcheck="true">;</span>
|
|
<span class="token operator">/</span><span class="token operator">/</span> Read total count from server
|
|
<span class="token operator">/</span><span class="token operator">/</span> pagination<span class="token punctuation">.</span>total <span class="token operator">=</span> data<span class="token punctuation">.</span>totalCount<span class="token comment" spellcheck="true">;</span>
|
|
pagination<span class="token punctuation">.</span>total <span class="token operator">=</span> <span class="token number">200</span><span class="token comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
this<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
return <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>Table columns<span class="token operator">=</span>{columns}
|
|
rowKey<span class="token operator">=</span>{record <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>registered}
|
|
dataSource<span class="token operator">=</span>{this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>data}
|
|
pagination<span class="token operator">=</span>{this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>pagination}
|
|
loading<span class="token operator">=</span>{this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>loading}
|
|
onChange<span class="token operator">=</span>{this<span class="token punctuation">.</span>handleTableChange}
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>Test <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-size" data-reactid="1524"><section class="code-box-demo" data-reactid="1525"><div data-reactid="1526"><h4 data-reactid="1527">Middle size table</h4><div class=" clearfix" data-reactid="1528"><div class="ant-spin-nested-loading" data-reactid="1529"><div class="ant-spin-container" data-reactid="1530"><div class="ant-table ant-table-middle ant-table-scroll-position-left" data-reactid="1531"><div class="ant-table-content" data-reactid="1532"><div class="" data-reactid="1533"><span data-reactid="1534"><div class="ant-table-body" data-reactid="1535"><table class="" data-reactid="1536"><colgroup data-reactid="1537"><col data-reactid="1538"/><col data-reactid="1539"/><col data-reactid="1540"/></colgroup><thead class="ant-table-thead" data-reactid="1541"><tr data-reactid="1542"><th class="" data-reactid="1543"><span data-reactid="1544"><!-- react-text: 1545 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1546"><span data-reactid="1547"><!-- react-text: 1548 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1549"><span data-reactid="1550"><!-- react-text: 1551 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1552"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1553"><td class="" data-reactid="1554"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1555"></span><!-- react-empty: 1556 --><!-- react-text: 1557 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1558"><!-- react-text: 1559 -->32<!-- /react-text --></td><td class="" data-reactid="1560"><!-- react-text: 1561 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1562"><td class="" data-reactid="1563"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1564"></span><!-- react-empty: 1565 --><!-- react-text: 1566 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1567"><!-- react-text: 1568 -->42<!-- /react-text --></td><td class="" data-reactid="1569"><!-- react-text: 1570 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1571"><td class="" data-reactid="1572"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1573"></span><!-- react-empty: 1574 --><!-- react-text: 1575 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1576"><!-- react-text: 1577 -->32<!-- /react-text --></td><td class="" data-reactid="1578"><!-- react-text: 1579 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination mini" unselectable="unselectable" data-reactid="1580"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1581"><a data-reactid="1582"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1583"><a data-reactid="1584">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1585"><a data-reactid="1586"></a></li><!-- react-empty: 1587 --></ul></div></div></div><h4 data-reactid="1588">Small size table</h4><div class=" clearfix" data-reactid="1589"><div class="ant-spin-nested-loading" data-reactid="1590"><div class="ant-spin-container" data-reactid="1591"><div class="ant-table ant-table-small ant-table-scroll-position-left" data-reactid="1592"><div class="ant-table-content" data-reactid="1593"><div class="" data-reactid="1594"><span data-reactid="1595"><div class="ant-table-body" data-reactid="1596"><table class="" data-reactid="1597"><colgroup data-reactid="1598"><col data-reactid="1599"/><col data-reactid="1600"/><col data-reactid="1601"/></colgroup><thead class="ant-table-thead" data-reactid="1602"><tr data-reactid="1603"><th class="" data-reactid="1604"><span data-reactid="1605"><!-- react-text: 1606 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1607"><span data-reactid="1608"><!-- react-text: 1609 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1610"><span data-reactid="1611"><!-- react-text: 1612 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1613"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1614"><td class="" data-reactid="1615"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1616"></span><!-- react-empty: 1617 --><!-- react-text: 1618 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1619"><!-- react-text: 1620 -->32<!-- /react-text --></td><td class="" data-reactid="1621"><!-- react-text: 1622 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1623"><td class="" data-reactid="1624"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1625"></span><!-- react-empty: 1626 --><!-- react-text: 1627 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1628"><!-- react-text: 1629 -->42<!-- /react-text --></td><td class="" data-reactid="1630"><!-- react-text: 1631 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1632"><td class="" data-reactid="1633"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1634"></span><!-- react-empty: 1635 --><!-- react-text: 1636 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1637"><!-- react-text: 1638 -->32<!-- /react-text --></td><td class="" data-reactid="1639"><!-- react-text: 1640 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination mini" unselectable="unselectable" data-reactid="1641"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1642"><a data-reactid="1643"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1644"><a data-reactid="1645">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1646"><a data-reactid="1647"></a></li><!-- react-empty: 1648 --></ul></div></div></div></div><style data-reactid="1649">#components-table-demo-size h4 { margin-bottom: 16px; }</style></section><section class="code-box-meta markdown" data-reactid="1650"><div class="code-box-title" data-reactid="1651"><a href="#components-table-demo-size" data-reactid="1652">size</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/size.md" data-reactid="1653"><i class="anticon anticon-edit" data-reactid="1654"></i></a></div><div data-reactid="1655"><p data-reactid="1656"><!-- react-text: 1657 -->Two compacted table size: <!-- /react-text --><code data-reactid="1658"><!-- react-text: 1659 -->middle<!-- /react-text --></code><!-- react-text: 1660 --> and <!-- /react-text --><code data-reactid="1661"><!-- react-text: 1662 -->small<!-- /react-text --></code><!-- react-text: 1663 -->, <!-- /react-text --><code data-reactid="1664"><!-- react-text: 1665 -->small<!-- /react-text --></code><!-- react-text: 1666 --> size is used in Modal only.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1667"></i></section><section class="highlight-wrapper" data-reactid="1668"><div class="highlight" data-reactid="1669"><pre class="language-__react" data-reactid="1670"><code data-reactid="1671">import { Table } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> data <span class="token operator">=</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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span>h4<span class="token operator">></span>Middle size table<span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span>
|
|
<span class="token operator"><</span>Table columns<span class="token operator">=</span>{columns} dataSource<span class="token operator">=</span>{data} size<span class="token operator">=</span><span class="token string">"middle"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>h4<span class="token operator">></span>Small size table<span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span>
|
|
<span class="token operator"><</span>Table columns<span class="token operator">=</span>{columns} dataSource<span class="token operator">=</span>{data} size<span class="token operator">=</span><span class="token string">"small"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-bordered" data-reactid="1672"><section class="code-box-demo" data-reactid="1673"><div class=" clearfix" data-reactid="1674"><div class="ant-spin-nested-loading" data-reactid="1675"><div class="ant-spin-container" data-reactid="1676"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="1677"><div class="ant-table-title" data-reactid="1678">Header</div><div class="ant-table-content" data-reactid="1679"><div class="" data-reactid="1680"><span data-reactid="1681"><div class="ant-table-body" data-reactid="1682"><table class="" data-reactid="1683"><colgroup data-reactid="1684"><col data-reactid="1685"/><col data-reactid="1686"/><col data-reactid="1687"/></colgroup><thead class="ant-table-thead" data-reactid="1688"><tr data-reactid="1689"><th class="" data-reactid="1690"><span data-reactid="1691"><!-- react-text: 1692 -->Name<!-- /react-text --></span></th><th class="column-money" data-reactid="1693"><span data-reactid="1694"><!-- react-text: 1695 -->Cash Assets<!-- /react-text --></span></th><th class="" data-reactid="1696"><span data-reactid="1697"><!-- react-text: 1698 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1699"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1700"><td class="" data-reactid="1701"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1702"></span><!-- react-empty: 1703 --><a href="#" data-reactid="1704">John Brown</a></td><td class="column-money" data-reactid="1705"><!-- react-text: 1706 -->￥300,000.00<!-- /react-text --></td><td class="" data-reactid="1707"><!-- react-text: 1708 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1709"><td class="" data-reactid="1710"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1711"></span><!-- react-empty: 1712 --><a href="#" data-reactid="1713">Jim Green</a></td><td class="column-money" data-reactid="1714"><!-- react-text: 1715 -->￥1,256,000.00<!-- /react-text --></td><td class="" data-reactid="1716"><!-- react-text: 1717 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1718"><td class="" data-reactid="1719"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1720"></span><!-- react-empty: 1721 --><a href="#" data-reactid="1722">Joe Black</a></td><td class="column-money" data-reactid="1723"><!-- react-text: 1724 -->￥120,000.00<!-- /react-text --></td><td class="" data-reactid="1725"><!-- react-text: 1726 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span><div class="ant-table-footer" data-reactid="1727">Footer</div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1728"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1729"><a data-reactid="1730"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1731"><a data-reactid="1732">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1733"><a data-reactid="1734"></a></li><!-- react-empty: 1735 --></ul></div></div></div><style data-reactid="1736">.column-money {
|
|
text-align: right;
|
|
}</style></section><section class="code-box-meta markdown" data-reactid="1737"><div class="code-box-title" data-reactid="1738"><a href="#components-table-demo-bordered" data-reactid="1739">border, title and footer</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/bordered.md" data-reactid="1740"><i class="anticon anticon-edit" data-reactid="1741"></i></a></div><div data-reactid="1742"><p data-reactid="1743"><!-- react-text: 1744 -->Add border, title and footer for table.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1745"></i></section><section class="highlight-wrapper" data-reactid="1746"><div class="highlight" data-reactid="1747"><pre class="language-__react" data-reactid="1748"><code data-reactid="1749">import { Table } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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 operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>{text}<span class="token operator"><</span><span class="token operator">/</span>a<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">'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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> data <span class="token operator">=</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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>Table
|
|
columns<span class="token operator">=</span>{columns}
|
|
dataSource<span class="token operator">=</span>{data}
|
|
bordered
|
|
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">'Header'</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">'Footer'</span>}
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div><div class="highlight" data-reactid="1750"><pre data-reactid="1751"><code class="css" data-reactid="1752"><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="1753"><section class="code-box-demo" data-reactid="1754"><div class=" clearfix" data-reactid="1755"><div class="ant-spin-nested-loading" data-reactid="1756"><div class="ant-spin-container" data-reactid="1757"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1758"><div class="ant-table-content" data-reactid="1759"><div class="" data-reactid="1760"><span data-reactid="1761"><div class="ant-table-body" data-reactid="1762"><table class="" data-reactid="1763"><colgroup data-reactid="1764"><col class="ant-table-expand-icon-col" data-reactid="1765"/><col data-reactid="1766"/><col data-reactid="1767"/><col data-reactid="1768"/><col data-reactid="1769"/></colgroup><thead class="ant-table-thead" data-reactid="1770"><tr data-reactid="1771"><th class="ant-table-expand-icon-th" title="" rowspan="1" data-reactid="1772"></th><th class="" data-reactid="1773"><span data-reactid="1774"><!-- react-text: 1775 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1776"><span data-reactid="1777"><!-- react-text: 1778 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1779"><span data-reactid="1780"><!-- react-text: 1781 -->Address<!-- /react-text --></span></th><th class="" data-reactid="1782"><span data-reactid="1783"><!-- react-text: 1784 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1785"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1786"><td class="ant-table-row-expand-icon-cell" data-reactid="1787"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1788"></span></td><td class="" data-reactid="1789"><!-- react-text: 1790 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1791"><!-- react-text: 1792 -->32<!-- /react-text --></td><td class="" data-reactid="1793"><!-- react-text: 1794 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1795"><a href="#" data-reactid="1796">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1797"><td class="ant-table-row-expand-icon-cell" data-reactid="1798"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1799"></span></td><td class="" data-reactid="1800"><!-- react-text: 1801 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1802"><!-- react-text: 1803 -->42<!-- /react-text --></td><td class="" data-reactid="1804"><!-- react-text: 1805 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1806"><a href="#" data-reactid="1807">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1808"><td class="ant-table-row-expand-icon-cell" data-reactid="1809"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1810"></span></td><td class="" data-reactid="1811"><!-- react-text: 1812 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1813"><!-- react-text: 1814 -->32<!-- /react-text --></td><td class="" data-reactid="1815"><!-- react-text: 1816 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1817"><a href="#" data-reactid="1818">Delete</a></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1819"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1820"><a data-reactid="1821"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1822"><a data-reactid="1823">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1824"><a data-reactid="1825"></a></li><!-- react-empty: 1826 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1827"><div class="code-box-title" data-reactid="1828"><a href="#components-table-demo-expand" data-reactid="1829">Expandable Row</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/expand.md" data-reactid="1830"><i class="anticon anticon-edit" data-reactid="1831"></i></a></div><div data-reactid="1832"><p data-reactid="1833"><!-- react-text: 1834 -->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="1835"></i></section><section class="highlight-wrapper" data-reactid="1836"><div class="highlight" data-reactid="1837"><pre class="language-__react" data-reactid="1838"><code data-reactid="1839">import { Table } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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 operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>Delete<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span> }<span class="token punctuation">,</span>
|
|
<span class="token punctuation">]</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> data <span class="token operator">=</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>
|
|
{ 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>
|
|
{ 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 comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>Table
|
|
columns<span class="token operator">=</span>{columns}
|
|
expandedRowRender<span class="token operator">=</span>{record <span class="token operator">=</span><span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>{record<span class="token punctuation">.</span>description}<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>}
|
|
dataSource<span class="token operator">=</span>{data}
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-colspan-rowspan" data-reactid="1840"><section class="code-box-demo" data-reactid="1841"><div class=" clearfix" data-reactid="1842"><div class="ant-spin-nested-loading" data-reactid="1843"><div class="ant-spin-container" data-reactid="1844"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="1845"><div class="ant-table-content" data-reactid="1846"><div class="" data-reactid="1847"><span data-reactid="1848"><div class="ant-table-body" data-reactid="1849"><table class="" data-reactid="1850"><colgroup data-reactid="1851"><col data-reactid="1852"/><col data-reactid="1853"/><col data-reactid="1854"/><col data-reactid="1855"/><col data-reactid="1856"/></colgroup><thead class="ant-table-thead" data-reactid="1857"><tr data-reactid="1858"><th class="" data-reactid="1859"><span data-reactid="1860"><!-- react-text: 1861 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1862"><span data-reactid="1863"><!-- react-text: 1864 -->Age<!-- /react-text --></span></th><th class="" colspan="2" data-reactid="1865"><span data-reactid="1866"><!-- react-text: 1867 -->Home phone<!-- /react-text --></span></th><th class="" data-reactid="1868"><span data-reactid="1869"><!-- react-text: 1870 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1871"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1872"><td class="" data-reactid="1873"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1874"></span><!-- react-empty: 1875 --><a href="#" data-reactid="1876">John Brown</a></td><td class="" data-reactid="1877"><!-- react-text: 1878 -->32<!-- /react-text --></td><td class="" data-reactid="1879"><!-- react-text: 1880 -->0571-22098909<!-- /react-text --></td><td class="" data-reactid="1881"><!-- react-text: 1882 -->18889898989<!-- /react-text --></td><td class="" data-reactid="1883"><!-- react-text: 1884 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1885"><td class="" data-reactid="1886"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1887"></span><!-- react-empty: 1888 --><a href="#" data-reactid="1889">Jim Green</a></td><td class="" data-reactid="1890"><!-- react-text: 1891 -->42<!-- /react-text --></td><td class="" data-reactid="1892"><!-- react-text: 1893 -->0571-22098333<!-- /react-text --></td><td class="" data-reactid="1894"><!-- react-text: 1895 -->18889898888<!-- /react-text --></td><td class="" data-reactid="1896"><!-- react-text: 1897 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1898"><td class="" data-reactid="1899"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1900"></span><!-- react-empty: 1901 --><a href="#" data-reactid="1902">Joe Black</a></td><td class="" data-reactid="1903"><!-- react-text: 1904 -->32<!-- /react-text --></td><td rowspan="2" class="" data-reactid="1905"><!-- react-text: 1906 -->0575-22098909<!-- /react-text --></td><td class="" data-reactid="1907"><!-- react-text: 1908 -->18900010002<!-- /react-text --></td><td class="" data-reactid="1909"><!-- react-text: 1910 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1911"><td class="" data-reactid="1912"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1913"></span><!-- react-empty: 1914 --><a href="#" data-reactid="1915">Jim Red</a></td><td class="" data-reactid="1916"><!-- react-text: 1917 -->18<!-- /react-text --></td><!-- react-empty: 1918 --><td class="" data-reactid="1919"><!-- react-text: 1920 -->18900010002<!-- /react-text --></td><td class="" data-reactid="1921"><!-- react-text: 1922 -->London No. 2 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1923"><td colspan="5" class="" data-reactid="1924"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1925"></span><!-- react-empty: 1926 --><a href="#" data-reactid="1927">Jake White</a></td><!-- react-empty: 1928 --><!-- react-empty: 1929 --><!-- react-empty: 1930 --><!-- react-empty: 1931 --></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1932"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1933"><a data-reactid="1934"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1935"><a data-reactid="1936">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1937"><a data-reactid="1938"></a></li><!-- react-empty: 1939 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="1940"><div class="code-box-title" data-reactid="1941"><a href="#components-table-demo-colspan-rowspan" data-reactid="1942">colSpan and rowSpan</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/colspan-rowspan.md" data-reactid="1943"><i class="anticon anticon-edit" data-reactid="1944"></i></a></div><div data-reactid="1945"><p data-reactid="1946"><!-- react-text: 1947 -->Table column title supports <!-- /react-text --><code data-reactid="1948"><!-- react-text: 1949 -->colSpan<!-- /react-text --></code><!-- react-text: 1950 --> that set in <!-- /react-text --><code data-reactid="1951"><!-- react-text: 1952 -->column<!-- /react-text --></code><!-- react-text: 1953 -->.<!-- /react-text --></p><p data-reactid="1954"><!-- react-text: 1955 -->Table cell supports <!-- /react-text --><code data-reactid="1956"><!-- react-text: 1957 -->colSpan<!-- /react-text --></code><!-- react-text: 1958 --> and <!-- /react-text --><code data-reactid="1959"><!-- react-text: 1960 -->rowSpan<!-- /react-text --></code><!-- react-text: 1961 --> that set in render return object. When each of them is set to <!-- /react-text --><code data-reactid="1962"><!-- react-text: 1963 -->0<!-- /react-text --></code><!-- react-text: 1964 -->, the cell will not be rendered.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="1965"></i></section><section class="highlight-wrapper" data-reactid="1966"><div class="highlight" data-reactid="1967"><pre class="language-__react" data-reactid="1968"><code data-reactid="1969">import { Table } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token operator">/</span><span class="token operator">/</span> <span class="token keyword">In</span> the fifth row<span class="token punctuation">,</span> other columns are merged into first column
|
|
<span class="token operator">/</span><span class="token operator">/</span> by setting it's colSpan <span class="token keyword">to</span> be <span class="token number">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 keyword">const</span> obj <span class="token operator">=</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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">==</span><span class="token operator">=</span> <span class="token number">4</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 comment" spellcheck="true">;</span>
|
|
}
|
|
return obj<span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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 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> {
|
|
return <span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>{text}<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
return {
|
|
children<span class="token punctuation">:</span> <span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>{text}<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token punctuation">,</span>
|
|
props<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 comment" spellcheck="true">;</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> {
|
|
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 keyword">const</span> obj <span class="token operator">=</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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">==</span><span class="token operator">=</span> <span class="token number">2</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 comment" spellcheck="true">;</span>
|
|
}
|
|
<span class="token operator">/</span><span class="token operator">/</span> These two are merged into above cell
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">==</span><span class="token operator">=</span> <span class="token number">3</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 comment" spellcheck="true">;</span>
|
|
}
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">==</span><span class="token operator">=</span> <span class="token number">4</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 comment" spellcheck="true">;</span>
|
|
}
|
|
return obj<span class="token comment" spellcheck="true">;</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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> data <span class="token operator">=</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> {
|
|
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> {
|
|
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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>Table columns<span class="token operator">=</span>{columns} dataSource<span class="token operator">=</span>{data} bordered <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-expand-children" data-reactid="1970"><section class="code-box-demo" data-reactid="1971"><div class=" clearfix" data-reactid="1972"><div class="ant-spin-nested-loading" data-reactid="1973"><div class="ant-spin-container" data-reactid="1974"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1975"><div class="ant-table-content" data-reactid="1976"><div class="" data-reactid="1977"><span data-reactid="1978"><div class="ant-table-body" data-reactid="1979"><table class="" data-reactid="1980"><colgroup data-reactid="1981"><col data-reactid="1982"/><col style="width:40%;min-width:40%;" data-reactid="1983"/><col style="width:30%;min-width:30%;" data-reactid="1984"/><col data-reactid="1985"/></colgroup><thead class="ant-table-thead" data-reactid="1986"><tr data-reactid="1987"><th class="ant-table-selection-column" data-reactid="1988"><span data-reactid="1989"><label class="ant-checkbox-wrapper" data-reactid="1990"><span class="ant-checkbox" data-reactid="1991"><span class="ant-checkbox-inner" data-reactid="1992"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="1993"/></span></label></span></th><th class="" data-reactid="1994"><span data-reactid="1995"><!-- react-text: 1996 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1997"><span data-reactid="1998"><!-- react-text: 1999 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2000"><span data-reactid="2001"><!-- react-text: 2002 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2003"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2004"><td class="ant-table-selection-column" data-reactid="2005"><span data-reactid="2006"><label class="ant-checkbox-wrapper" data-reactid="2007"><span class="ant-checkbox" data-reactid="2008"><span class="ant-checkbox-inner" data-reactid="2009"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="2010"/></span></label></span></td><td class="" data-reactid="2011"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2012"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2013"></span><!-- react-text: 2014 -->John Brown sr.<!-- /react-text --></td><td class="" data-reactid="2015"><!-- react-text: 2016 -->60<!-- /react-text --></td><td class="" data-reactid="2017"><!-- react-text: 2018 -->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="2019"><td class="ant-table-selection-column" data-reactid="2020"><span data-reactid="2021"><label class="ant-checkbox-wrapper" data-reactid="2022"><span class="ant-checkbox" data-reactid="2023"><span class="ant-checkbox-inner" data-reactid="2024"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="2025"/></span></label></span></td><td class="" data-reactid="2026"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="2027"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2028"></span><!-- react-text: 2029 -->John Brown<!-- /react-text --></td><td class="" data-reactid="2030"><!-- react-text: 2031 -->42<!-- /react-text --></td><td class="" data-reactid="2032"><!-- react-text: 2033 -->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="2034"><td class="ant-table-selection-column" data-reactid="2035"><span data-reactid="2036"><label class="ant-checkbox-wrapper" data-reactid="2037"><span class="ant-checkbox" data-reactid="2038"><span class="ant-checkbox-inner" data-reactid="2039"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="2040"/></span></label></span></td><td class="" data-reactid="2041"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="2042"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2043"></span><!-- react-text: 2044 -->John Brown jr.<!-- /react-text --></td><td class="" data-reactid="2045"><!-- react-text: 2046 -->30<!-- /react-text --></td><td class="" data-reactid="2047"><!-- react-text: 2048 -->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="2049"><td class="ant-table-selection-column" data-reactid="2050"><span data-reactid="2051"><label class="ant-checkbox-wrapper" data-reactid="2052"><span class="ant-checkbox" data-reactid="2053"><span class="ant-checkbox-inner" data-reactid="2054"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="2055"/></span></label></span></td><td class="" data-reactid="2056"><span style="padding-left:40px;" class="ant-table-row-indent indent-level-2" data-reactid="2057"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2058"></span><!-- react-text: 2059 -->Jimmy Brown<!-- /react-text --></td><td class="" data-reactid="2060"><!-- react-text: 2061 -->16<!-- /react-text --></td><td class="" data-reactid="2062"><!-- react-text: 2063 -->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="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"><span class="ant-checkbox-inner" data-reactid="2069"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="2070"/></span></label></span></td><td class="" data-reactid="2071"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="2072"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2073"></span><!-- react-text: 2074 -->Jim Green sr.<!-- /react-text --></td><td class="" data-reactid="2075"><!-- react-text: 2076 -->72<!-- /react-text --></td><td class="" data-reactid="2077"><!-- react-text: 2078 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-2" 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"><span class="ant-checkbox-inner" data-reactid="2084"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="2085"/></span></label></span></td><td class="" data-reactid="2086"><span style="padding-left:40px;" class="ant-table-row-indent indent-level-2" data-reactid="2087"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2088"></span><!-- react-text: 2089 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2090"><!-- react-text: 2091 -->42<!-- /react-text --></td><td class="" data-reactid="2092"><!-- react-text: 2093 -->London No. 2 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-3" 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"><span class="ant-checkbox-inner" data-reactid="2099"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="2100"/></span></label></span></td><td class="" data-reactid="2101"><span style="padding-left:60px;" class="ant-table-row-indent indent-level-3" data-reactid="2102"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2103"></span><!-- react-text: 2104 -->Jim Green jr.<!-- /react-text --></td><td class="" data-reactid="2105"><!-- react-text: 2106 -->25<!-- /react-text --></td><td class="" data-reactid="2107"><!-- react-text: 2108 -->London No. 3 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-3" 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"><span class="ant-checkbox-inner" data-reactid="2114"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="2115"/></span></label></span></td><td class="" data-reactid="2116"><span style="padding-left:60px;" class="ant-table-row-indent indent-level-3" data-reactid="2117"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2118"></span><!-- react-text: 2119 -->Jimmy Green sr.<!-- /react-text --></td><td class="" data-reactid="2120"><!-- react-text: 2121 -->18<!-- /react-text --></td><td class="" data-reactid="2122"><!-- react-text: 2123 -->London No. 4 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" 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"><span class="ant-checkbox-inner" data-reactid="2129"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="2130"/></span></label></span></td><td class="" data-reactid="2131"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2132"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2133"></span><!-- react-text: 2134 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="2135"><!-- react-text: 2136 -->32<!-- /react-text --></td><td class="" data-reactid="2137"><!-- react-text: 2138 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="2139"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2140"><a data-reactid="2141"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2142"><a data-reactid="2143">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="2144"><a data-reactid="2145"></a></li><!-- react-empty: 2146 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="2147"><div class="code-box-title" data-reactid="2148"><a href="#components-table-demo-expand-children" data-reactid="2149">Tree data</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/expand-children.md" data-reactid="2150"><i class="anticon anticon-edit" data-reactid="2151"></i></a></div><div data-reactid="2152"><p data-reactid="2153"><!-- react-text: 2154 -->Display tree structure data in Table, control the indent width by setting <!-- /react-text --><code data-reactid="2155"><!-- react-text: 2156 -->indentSize<!-- /react-text --></code><!-- react-text: 2157 -->.<!-- /react-text --></p><blockquote data-reactid="2158"><p data-reactid="2159"><!-- react-text: 2160 -->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="2161"></i></section><section class="highlight-wrapper" data-reactid="2162"><div class="highlight" data-reactid="2163"><pre class="language-__react" data-reactid="2164"><code data-reactid="2165">import { Table } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> data <span class="token operator">=</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>{
|
|
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> {
|
|
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>{
|
|
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> {
|
|
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>{
|
|
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>{
|
|
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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
|
|
<span class="token operator">/</span><span class="token operator">/</span> rowSelection objects indicates the need <span class="token keyword">for</span> row selection
|
|
<span class="token keyword">const</span> rowSelection <span class="token operator">=</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> {
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>`selectedRowKeys<span class="token punctuation">:</span> ${selectedRowKeys}`<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 comment" spellcheck="true">;</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> {
|
|
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 comment" spellcheck="true">;</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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
}<span class="token comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>Table columns<span class="token operator">=</span>{columns} rowSelection<span class="token operator">=</span>{rowSelection} dataSource<span class="token operator">=</span>{data} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-fixed-header" data-reactid="2166"><section class="code-box-demo" data-reactid="2167"><div class=" clearfix" data-reactid="2168"><div class="ant-spin-nested-loading" data-reactid="2169"><div class="ant-spin-container" data-reactid="2170"><div class="ant-table ant-table-large ant-table-fixed-header ant-table-scroll-position-left" data-reactid="2171"><div class="ant-table-content" data-reactid="2172"><div class="ant-table-scroll" data-reactid="2173"><span data-reactid="2174"><div class="ant-table-header" data-reactid="2175"><table class="" data-reactid="2176"><colgroup data-reactid="2177"><col style="width:150px;min-width:150px;" data-reactid="2178"/><col style="width:150px;min-width:150px;" data-reactid="2179"/><col data-reactid="2180"/></colgroup><thead class="ant-table-thead" data-reactid="2181"><tr data-reactid="2182"><th class="" data-reactid="2183"><span data-reactid="2184"><!-- react-text: 2185 -->Name<!-- /react-text --></span></th><th class="" data-reactid="2186"><span data-reactid="2187"><!-- react-text: 2188 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2189"><span data-reactid="2190"><!-- react-text: 2191 -->Address<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body" style="max-height:240px;overflow-y:scroll;" data-reactid="2192"><table class="" data-reactid="2193"><colgroup data-reactid="2194"><col style="width:150px;min-width:150px;" data-reactid="2195"/><col style="width:150px;min-width:150px;" data-reactid="2196"/><col data-reactid="2197"/></colgroup><tbody class="ant-table-tbody" data-reactid="2198"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2199"><td class="" data-reactid="2200"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2201"></span><!-- react-empty: 2202 --><!-- react-text: 2203 -->Edward King 0<!-- /react-text --></td><td class="" data-reactid="2204"><!-- react-text: 2205 -->32<!-- /react-text --></td><td class="" data-reactid="2206"><!-- react-text: 2207 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2208"><td class="" data-reactid="2209"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2210"></span><!-- react-empty: 2211 --><!-- react-text: 2212 -->Edward King 1<!-- /react-text --></td><td class="" data-reactid="2213"><!-- react-text: 2214 -->32<!-- /react-text --></td><td class="" data-reactid="2215"><!-- react-text: 2216 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2217"><td class="" data-reactid="2218"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2219"></span><!-- react-empty: 2220 --><!-- react-text: 2221 -->Edward King 2<!-- /react-text --></td><td class="" data-reactid="2222"><!-- react-text: 2223 -->32<!-- /react-text --></td><td class="" data-reactid="2224"><!-- react-text: 2225 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2226"><td class="" data-reactid="2227"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2228"></span><!-- react-empty: 2229 --><!-- react-text: 2230 -->Edward King 3<!-- /react-text --></td><td class="" data-reactid="2231"><!-- react-text: 2232 -->32<!-- /react-text --></td><td class="" data-reactid="2233"><!-- react-text: 2234 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2235"><td class="" data-reactid="2236"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2237"></span><!-- react-empty: 2238 --><!-- react-text: 2239 -->Edward King 4<!-- /react-text --></td><td class="" data-reactid="2240"><!-- react-text: 2241 -->32<!-- /react-text --></td><td class="" data-reactid="2242"><!-- react-text: 2243 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2244"><td class="" data-reactid="2245"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2246"></span><!-- react-empty: 2247 --><!-- react-text: 2248 -->Edward King 5<!-- /react-text --></td><td class="" data-reactid="2249"><!-- react-text: 2250 -->32<!-- /react-text --></td><td class="" data-reactid="2251"><!-- react-text: 2252 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2253"><td class="" data-reactid="2254"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2255"></span><!-- react-empty: 2256 --><!-- react-text: 2257 -->Edward King 6<!-- /react-text --></td><td class="" data-reactid="2258"><!-- react-text: 2259 -->32<!-- /react-text --></td><td class="" data-reactid="2260"><!-- react-text: 2261 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2262"><td class="" data-reactid="2263"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2264"></span><!-- react-empty: 2265 --><!-- react-text: 2266 -->Edward King 7<!-- /react-text --></td><td class="" data-reactid="2267"><!-- react-text: 2268 -->32<!-- /react-text --></td><td class="" data-reactid="2269"><!-- react-text: 2270 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2271"><td class="" data-reactid="2272"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2273"></span><!-- react-empty: 2274 --><!-- react-text: 2275 -->Edward King 8<!-- /react-text --></td><td class="" data-reactid="2276"><!-- react-text: 2277 -->32<!-- /react-text --></td><td class="" data-reactid="2278"><!-- react-text: 2279 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2280"><td class="" data-reactid="2281"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2282"></span><!-- react-empty: 2283 --><!-- react-text: 2284 -->Edward King 9<!-- /react-text --></td><td class="" data-reactid="2285"><!-- react-text: 2286 -->32<!-- /react-text --></td><td class="" data-reactid="2287"><!-- react-text: 2288 -->London, Park Lane no. 9<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2289"><td class="" data-reactid="2290"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2291"></span><!-- react-empty: 2292 --><!-- react-text: 2293 -->Edward King 10<!-- /react-text --></td><td class="" data-reactid="2294"><!-- react-text: 2295 -->32<!-- /react-text --></td><td class="" data-reactid="2296"><!-- react-text: 2297 -->London, Park Lane no. 10<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2298"><td class="" data-reactid="2299"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2300"></span><!-- react-empty: 2301 --><!-- react-text: 2302 -->Edward King 11<!-- /react-text --></td><td class="" data-reactid="2303"><!-- react-text: 2304 -->32<!-- /react-text --></td><td class="" data-reactid="2305"><!-- react-text: 2306 -->London, Park Lane no. 11<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2307"><td class="" data-reactid="2308"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2309"></span><!-- react-empty: 2310 --><!-- react-text: 2311 -->Edward King 12<!-- /react-text --></td><td class="" data-reactid="2312"><!-- react-text: 2313 -->32<!-- /react-text --></td><td class="" data-reactid="2314"><!-- react-text: 2315 -->London, Park Lane no. 12<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2316"><td class="" data-reactid="2317"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2318"></span><!-- react-empty: 2319 --><!-- react-text: 2320 -->Edward King 13<!-- /react-text --></td><td class="" data-reactid="2321"><!-- react-text: 2322 -->32<!-- /react-text --></td><td class="" data-reactid="2323"><!-- react-text: 2324 -->London, Park Lane no. 13<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2325"><td class="" data-reactid="2326"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2327"></span><!-- react-empty: 2328 --><!-- react-text: 2329 -->Edward King 14<!-- /react-text --></td><td class="" data-reactid="2330"><!-- react-text: 2331 -->32<!-- /react-text --></td><td class="" data-reactid="2332"><!-- react-text: 2333 -->London, Park Lane no. 14<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2334"><td class="" data-reactid="2335"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2336"></span><!-- react-empty: 2337 --><!-- react-text: 2338 -->Edward King 15<!-- /react-text --></td><td class="" data-reactid="2339"><!-- react-text: 2340 -->32<!-- /react-text --></td><td class="" data-reactid="2341"><!-- react-text: 2342 -->London, Park Lane no. 15<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2343"><td class="" data-reactid="2344"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2345"></span><!-- react-empty: 2346 --><!-- react-text: 2347 -->Edward King 16<!-- /react-text --></td><td class="" data-reactid="2348"><!-- react-text: 2349 -->32<!-- /react-text --></td><td class="" data-reactid="2350"><!-- react-text: 2351 -->London, Park Lane no. 16<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2352"><td class="" data-reactid="2353"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2354"></span><!-- react-empty: 2355 --><!-- react-text: 2356 -->Edward King 17<!-- /react-text --></td><td class="" data-reactid="2357"><!-- react-text: 2358 -->32<!-- /react-text --></td><td class="" data-reactid="2359"><!-- react-text: 2360 -->London, Park Lane no. 17<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2361"><td class="" data-reactid="2362"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2363"></span><!-- react-empty: 2364 --><!-- react-text: 2365 -->Edward King 18<!-- /react-text --></td><td class="" data-reactid="2366"><!-- react-text: 2367 -->32<!-- /react-text --></td><td class="" data-reactid="2368"><!-- react-text: 2369 -->London, Park Lane no. 18<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2370"><td class="" data-reactid="2371"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2372"></span><!-- react-empty: 2373 --><!-- react-text: 2374 -->Edward King 19<!-- /react-text --></td><td class="" data-reactid="2375"><!-- react-text: 2376 -->32<!-- /react-text --></td><td class="" data-reactid="2377"><!-- react-text: 2378 -->London, Park Lane no. 19<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2379"><td class="" data-reactid="2380"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2381"></span><!-- react-empty: 2382 --><!-- react-text: 2383 -->Edward King 20<!-- /react-text --></td><td class="" data-reactid="2384"><!-- react-text: 2385 -->32<!-- /react-text --></td><td class="" data-reactid="2386"><!-- react-text: 2387 -->London, Park Lane no. 20<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2388"><td class="" data-reactid="2389"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2390"></span><!-- react-empty: 2391 --><!-- react-text: 2392 -->Edward King 21<!-- /react-text --></td><td class="" data-reactid="2393"><!-- react-text: 2394 -->32<!-- /react-text --></td><td class="" data-reactid="2395"><!-- react-text: 2396 -->London, Park Lane no. 21<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2397"><td class="" data-reactid="2398"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2399"></span><!-- react-empty: 2400 --><!-- react-text: 2401 -->Edward King 22<!-- /react-text --></td><td class="" data-reactid="2402"><!-- react-text: 2403 -->32<!-- /react-text --></td><td class="" data-reactid="2404"><!-- react-text: 2405 -->London, Park Lane no. 22<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2406"><td class="" data-reactid="2407"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2408"></span><!-- react-empty: 2409 --><!-- react-text: 2410 -->Edward King 23<!-- /react-text --></td><td class="" data-reactid="2411"><!-- react-text: 2412 -->32<!-- /react-text --></td><td class="" data-reactid="2413"><!-- react-text: 2414 -->London, Park Lane no. 23<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2415"><td class="" data-reactid="2416"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2417"></span><!-- react-empty: 2418 --><!-- react-text: 2419 -->Edward King 24<!-- /react-text --></td><td class="" data-reactid="2420"><!-- react-text: 2421 -->32<!-- /react-text --></td><td class="" data-reactid="2422"><!-- react-text: 2423 -->London, Park Lane no. 24<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2424"><td class="" data-reactid="2425"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2426"></span><!-- react-empty: 2427 --><!-- react-text: 2428 -->Edward King 25<!-- /react-text --></td><td class="" data-reactid="2429"><!-- react-text: 2430 -->32<!-- /react-text --></td><td class="" data-reactid="2431"><!-- react-text: 2432 -->London, Park Lane no. 25<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2433"><td class="" data-reactid="2434"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2435"></span><!-- react-empty: 2436 --><!-- react-text: 2437 -->Edward King 26<!-- /react-text --></td><td class="" data-reactid="2438"><!-- react-text: 2439 -->32<!-- /react-text --></td><td class="" data-reactid="2440"><!-- react-text: 2441 -->London, Park Lane no. 26<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2442"><td class="" data-reactid="2443"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2444"></span><!-- react-empty: 2445 --><!-- react-text: 2446 -->Edward King 27<!-- /react-text --></td><td class="" data-reactid="2447"><!-- react-text: 2448 -->32<!-- /react-text --></td><td class="" data-reactid="2449"><!-- react-text: 2450 -->London, Park Lane no. 27<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2451"><td class="" data-reactid="2452"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2453"></span><!-- react-empty: 2454 --><!-- react-text: 2455 -->Edward King 28<!-- /react-text --></td><td class="" data-reactid="2456"><!-- react-text: 2457 -->32<!-- /react-text --></td><td class="" data-reactid="2458"><!-- react-text: 2459 -->London, Park Lane no. 28<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2460"><td class="" data-reactid="2461"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2462"></span><!-- react-empty: 2463 --><!-- react-text: 2464 -->Edward King 29<!-- /react-text --></td><td class="" data-reactid="2465"><!-- react-text: 2466 -->32<!-- /react-text --></td><td class="" data-reactid="2467"><!-- react-text: 2468 -->London, Park Lane no. 29<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2469"><td class="" data-reactid="2470"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2471"></span><!-- react-empty: 2472 --><!-- react-text: 2473 -->Edward King 30<!-- /react-text --></td><td class="" data-reactid="2474"><!-- react-text: 2475 -->32<!-- /react-text --></td><td class="" data-reactid="2476"><!-- react-text: 2477 -->London, Park Lane no. 30<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2478"><td class="" data-reactid="2479"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2480"></span><!-- react-empty: 2481 --><!-- react-text: 2482 -->Edward King 31<!-- /react-text --></td><td class="" data-reactid="2483"><!-- react-text: 2484 -->32<!-- /react-text --></td><td class="" data-reactid="2485"><!-- react-text: 2486 -->London, Park Lane no. 31<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2487"><td class="" data-reactid="2488"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2489"></span><!-- react-empty: 2490 --><!-- react-text: 2491 -->Edward King 32<!-- /react-text --></td><td class="" data-reactid="2492"><!-- react-text: 2493 -->32<!-- /react-text --></td><td class="" data-reactid="2494"><!-- react-text: 2495 -->London, Park Lane no. 32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2496"><td class="" data-reactid="2497"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2498"></span><!-- react-empty: 2499 --><!-- react-text: 2500 -->Edward King 33<!-- /react-text --></td><td class="" data-reactid="2501"><!-- react-text: 2502 -->32<!-- /react-text --></td><td class="" data-reactid="2503"><!-- react-text: 2504 -->London, Park Lane no. 33<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2505"><td class="" data-reactid="2506"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2507"></span><!-- react-empty: 2508 --><!-- react-text: 2509 -->Edward King 34<!-- /react-text --></td><td class="" data-reactid="2510"><!-- react-text: 2511 -->32<!-- /react-text --></td><td class="" data-reactid="2512"><!-- react-text: 2513 -->London, Park Lane no. 34<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2514"><td class="" data-reactid="2515"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2516"></span><!-- react-empty: 2517 --><!-- react-text: 2518 -->Edward King 35<!-- /react-text --></td><td class="" data-reactid="2519"><!-- react-text: 2520 -->32<!-- /react-text --></td><td class="" data-reactid="2521"><!-- react-text: 2522 -->London, Park Lane no. 35<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2523"><td class="" data-reactid="2524"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2525"></span><!-- react-empty: 2526 --><!-- react-text: 2527 -->Edward King 36<!-- /react-text --></td><td class="" data-reactid="2528"><!-- react-text: 2529 -->32<!-- /react-text --></td><td class="" data-reactid="2530"><!-- react-text: 2531 -->London, Park Lane no. 36<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2532"><td class="" data-reactid="2533"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2534"></span><!-- react-empty: 2535 --><!-- react-text: 2536 -->Edward King 37<!-- /react-text --></td><td class="" data-reactid="2537"><!-- react-text: 2538 -->32<!-- /react-text --></td><td class="" data-reactid="2539"><!-- react-text: 2540 -->London, Park Lane no. 37<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2541"><td class="" data-reactid="2542"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2543"></span><!-- react-empty: 2544 --><!-- react-text: 2545 -->Edward King 38<!-- /react-text --></td><td class="" data-reactid="2546"><!-- react-text: 2547 -->32<!-- /react-text --></td><td class="" data-reactid="2548"><!-- react-text: 2549 -->London, Park Lane no. 38<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2550"><td class="" data-reactid="2551"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2552"></span><!-- react-empty: 2553 --><!-- react-text: 2554 -->Edward King 39<!-- /react-text --></td><td class="" data-reactid="2555"><!-- react-text: 2556 -->32<!-- /react-text --></td><td class="" data-reactid="2557"><!-- react-text: 2558 -->London, Park Lane no. 39<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2559"><td class="" data-reactid="2560"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2561"></span><!-- react-empty: 2562 --><!-- react-text: 2563 -->Edward King 40<!-- /react-text --></td><td class="" data-reactid="2564"><!-- react-text: 2565 -->32<!-- /react-text --></td><td class="" data-reactid="2566"><!-- react-text: 2567 -->London, Park Lane no. 40<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2568"><td class="" data-reactid="2569"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2570"></span><!-- react-empty: 2571 --><!-- react-text: 2572 -->Edward King 41<!-- /react-text --></td><td class="" data-reactid="2573"><!-- react-text: 2574 -->32<!-- /react-text --></td><td class="" data-reactid="2575"><!-- react-text: 2576 -->London, Park Lane no. 41<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2577"><td class="" data-reactid="2578"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2579"></span><!-- react-empty: 2580 --><!-- react-text: 2581 -->Edward King 42<!-- /react-text --></td><td class="" data-reactid="2582"><!-- react-text: 2583 -->32<!-- /react-text --></td><td class="" data-reactid="2584"><!-- react-text: 2585 -->London, Park Lane no. 42<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2586"><td class="" data-reactid="2587"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2588"></span><!-- react-empty: 2589 --><!-- react-text: 2590 -->Edward King 43<!-- /react-text --></td><td class="" data-reactid="2591"><!-- react-text: 2592 -->32<!-- /react-text --></td><td class="" data-reactid="2593"><!-- react-text: 2594 -->London, Park Lane no. 43<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2595"><td class="" data-reactid="2596"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2597"></span><!-- react-empty: 2598 --><!-- react-text: 2599 -->Edward King 44<!-- /react-text --></td><td class="" data-reactid="2600"><!-- react-text: 2601 -->32<!-- /react-text --></td><td class="" data-reactid="2602"><!-- react-text: 2603 -->London, Park Lane no. 44<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2604"><td class="" data-reactid="2605"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2606"></span><!-- react-empty: 2607 --><!-- react-text: 2608 -->Edward King 45<!-- /react-text --></td><td class="" data-reactid="2609"><!-- react-text: 2610 -->32<!-- /react-text --></td><td class="" data-reactid="2611"><!-- react-text: 2612 -->London, Park Lane no. 45<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2613"><td class="" data-reactid="2614"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2615"></span><!-- react-empty: 2616 --><!-- react-text: 2617 -->Edward King 46<!-- /react-text --></td><td class="" data-reactid="2618"><!-- react-text: 2619 -->32<!-- /react-text --></td><td class="" data-reactid="2620"><!-- react-text: 2621 -->London, Park Lane no. 46<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2622"><td class="" data-reactid="2623"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2624"></span><!-- react-empty: 2625 --><!-- react-text: 2626 -->Edward King 47<!-- /react-text --></td><td class="" data-reactid="2627"><!-- react-text: 2628 -->32<!-- /react-text --></td><td class="" data-reactid="2629"><!-- react-text: 2630 -->London, Park Lane no. 47<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2631"><td class="" data-reactid="2632"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2633"></span><!-- react-empty: 2634 --><!-- react-text: 2635 -->Edward King 48<!-- /react-text --></td><td class="" data-reactid="2636"><!-- react-text: 2637 -->32<!-- /react-text --></td><td class="" data-reactid="2638"><!-- react-text: 2639 -->London, Park Lane no. 48<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2640"><td class="" data-reactid="2641"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2642"></span><!-- react-empty: 2643 --><!-- react-text: 2644 -->Edward King 49<!-- /react-text --></td><td class="" data-reactid="2645"><!-- react-text: 2646 -->32<!-- /react-text --></td><td class="" data-reactid="2647"><!-- react-text: 2648 -->London, Park Lane no. 49<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="2649"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2650"><a data-reactid="2651"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2652"><a data-reactid="2653">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="2654"><a data-reactid="2655">2</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="2656"><a data-reactid="2657"></a></li><!-- react-empty: 2658 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="2659"><div class="code-box-title" data-reactid="2660"><a href="#components-table-demo-fixed-header" data-reactid="2661">Fixed Header</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/fixed-header.md" data-reactid="2662"><i class="anticon anticon-edit" data-reactid="2663"></i></a></div><div data-reactid="2664"><p data-reactid="2665"><!-- react-text: 2666 -->Display large amounts of data in scrollable view.<!-- /react-text --></p><blockquote data-reactid="2667"><p data-reactid="2668"><!-- react-text: 2669 -->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="2670"></i></section><section class="highlight-wrapper" data-reactid="2671"><div class="highlight" data-reactid="2672"><pre class="language-__react" data-reactid="2673"><code data-reactid="2674">import { Table } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">for</span> <span class="token punctuation">(</span>let i <span class="token operator">=</span> <span class="token number">0</span><span class="token comment" spellcheck="true">; i < 100; i++) {</span>
|
|
data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>{
|
|
key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
|
|
name<span class="token punctuation">:</span> `Edward King ${i}`<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> `London<span class="token punctuation">,</span> Park Lane no<span class="token punctuation">.</span> ${i}`<span class="token punctuation">,</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>Table columns<span class="token operator">=</span>{columns} dataSource<span class="token operator">=</span>{data} pagination<span class="token operator">=</span>{{ pageSize<span class="token punctuation">:</span> <span class="token number">50</span> }} scroll<span class="token operator">=</span>{{ y<span class="token punctuation">:</span> <span class="token number">240</span> }} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-fixed-columns" data-reactid="2675"><section class="code-box-demo" data-reactid="2676"><div class=" clearfix" data-reactid="2677"><div class="ant-spin-nested-loading" data-reactid="2678"><div class="ant-spin-container" data-reactid="2679"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="2680"><div class="ant-table-content" data-reactid="2681"><div class="ant-table-fixed-left" data-reactid="2682"><span data-reactid="2683"><div class="ant-table-body-outer" data-reactid="2684"><div class="ant-table-body-inner" data-reactid="2685"><table class="ant-table-fixed" data-reactid="2686"><colgroup data-reactid="2687"><col style="width:100px;min-width:100px;" data-reactid="2688"/><col style="width:100px;min-width:100px;" data-reactid="2689"/></colgroup><thead class="ant-table-thead" data-reactid="2690"><tr data-reactid="2691"><th class="" data-reactid="2692"><span data-reactid="2693"><!-- react-text: 2694 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2695"><span data-reactid="2696"><!-- react-text: 2697 -->Age<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2698"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2699"><td class="" data-reactid="2700"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2701"></span><!-- react-empty: 2702 --><!-- react-text: 2703 -->John Brown<!-- /react-text --></td><td class="" data-reactid="2704"><!-- react-text: 2705 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2706"><td class="" data-reactid="2707"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2708"></span><!-- react-empty: 2709 --><!-- react-text: 2710 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2711"><!-- react-text: 2712 -->40<!-- /react-text --></td></tr></tbody></table></div></div></span></div><div class="ant-table-scroll" data-reactid="2713"><span data-reactid="2714"><div class="ant-table-body" style="overflow-x:auto;" data-reactid="2715"><table class="ant-table-fixed" style="width:1300px;" data-reactid="2716"><colgroup data-reactid="2717"><col style="width:100px;min-width:100px;" data-reactid="2718"/><col style="width:100px;min-width:100px;" data-reactid="2719"/><col data-reactid="2720"/><col data-reactid="2721"/><col data-reactid="2722"/><col data-reactid="2723"/><col data-reactid="2724"/><col data-reactid="2725"/><col data-reactid="2726"/><col data-reactid="2727"/><col style="width:100px;min-width:100px;" data-reactid="2728"/></colgroup><thead class="ant-table-thead" data-reactid="2729"><tr data-reactid="2730"><th class="" data-reactid="2731"><span data-reactid="2732"><!-- react-text: 2733 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2734"><span data-reactid="2735"><!-- react-text: 2736 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2737"><span data-reactid="2738"><!-- react-text: 2739 -->Column 1<!-- /react-text --></span></th><th class="" data-reactid="2740"><span data-reactid="2741"><!-- react-text: 2742 -->Column 2<!-- /react-text --></span></th><th class="" data-reactid="2743"><span data-reactid="2744"><!-- react-text: 2745 -->Column 3<!-- /react-text --></span></th><th class="" data-reactid="2746"><span data-reactid="2747"><!-- react-text: 2748 -->Column 4<!-- /react-text --></span></th><th class="" data-reactid="2749"><span data-reactid="2750"><!-- react-text: 2751 -->Column 5<!-- /react-text --></span></th><th class="" data-reactid="2752"><span data-reactid="2753"><!-- react-text: 2754 -->Column 6<!-- /react-text --></span></th><th class="" data-reactid="2755"><span data-reactid="2756"><!-- react-text: 2757 -->Column 7<!-- /react-text --></span></th><th class="" data-reactid="2758"><span data-reactid="2759"><!-- react-text: 2760 -->Column 8<!-- /react-text --></span></th><th class="" data-reactid="2761"><span data-reactid="2762"><!-- react-text: 2763 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2764"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2765"><td class="" data-reactid="2766"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2767"></span><!-- react-empty: 2768 --><!-- react-text: 2769 -->John Brown<!-- /react-text --></td><td class="" data-reactid="2770"><!-- react-text: 2771 -->32<!-- /react-text --></td><td class="" data-reactid="2772"><!-- react-text: 2773 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2774"><!-- react-text: 2775 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2776"><!-- react-text: 2777 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2778"><!-- react-text: 2779 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2780"><!-- react-text: 2781 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2782"><!-- react-text: 2783 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2784"><!-- react-text: 2785 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2786"><!-- react-text: 2787 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2788"><a href="#" data-reactid="2789">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2790"><td class="" data-reactid="2791"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2792"></span><!-- react-empty: 2793 --><!-- react-text: 2794 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2795"><!-- react-text: 2796 -->40<!-- /react-text --></td><td class="" data-reactid="2797"><!-- react-text: 2798 -->London Park<!-- /react-text --></td><td class="" data-reactid="2799"><!-- react-text: 2800 -->London Park<!-- /react-text --></td><td class="" data-reactid="2801"><!-- react-text: 2802 -->London Park<!-- /react-text --></td><td class="" data-reactid="2803"><!-- react-text: 2804 -->London Park<!-- /react-text --></td><td class="" data-reactid="2805"><!-- react-text: 2806 -->London Park<!-- /react-text --></td><td class="" data-reactid="2807"><!-- react-text: 2808 -->London Park<!-- /react-text --></td><td class="" data-reactid="2809"><!-- react-text: 2810 -->London Park<!-- /react-text --></td><td class="" data-reactid="2811"><!-- react-text: 2812 -->London Park<!-- /react-text --></td><td class="" data-reactid="2813"><a href="#" data-reactid="2814">action</a></td></tr></tbody></table></div></span></div><div class="ant-table-fixed-right" data-reactid="2815"><span data-reactid="2816"><div class="ant-table-body-outer" data-reactid="2817"><div class="ant-table-body-inner" data-reactid="2818"><table class="ant-table-fixed" data-reactid="2819"><colgroup data-reactid="2820"><col style="width:100px;min-width:100px;" data-reactid="2821"/></colgroup><thead class="ant-table-thead" data-reactid="2822"><tr data-reactid="2823"><th class="" data-reactid="2824"><span data-reactid="2825"><!-- react-text: 2826 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2827"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2828"><td class="" data-reactid="2829"><a href="#" data-reactid="2830">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2831"><td class="" data-reactid="2832"><a href="#" data-reactid="2833">action</a></td></tr></tbody></table></div></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="2834"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2835"><a data-reactid="2836"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2837"><a data-reactid="2838">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="2839"><a data-reactid="2840"></a></li><!-- react-empty: 2841 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="2842"><div class="code-box-title" data-reactid="2843"><a href="#components-table-demo-fixed-columns" data-reactid="2844">Fixed Columns</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/fixed-columns.md" data-reactid="2845"><i class="anticon anticon-edit" data-reactid="2846"></i></a></div><div data-reactid="2847"><p data-reactid="2848"><!-- react-text: 2849 -->Fix some columns and scroll in other columns. You must set <!-- /react-text --><code data-reactid="2850"><!-- react-text: 2851 -->scoll.x<!-- /react-text --></code><!-- react-text: 2852 --> meanwhile.<!-- /react-text --></p><blockquote data-reactid="2853"><p data-reactid="2854"><!-- react-text: 2855 -->Specify the width of each column if header and cell do not align properly.<!-- /react-text --></p><p data-reactid="2856"><!-- react-text: 2857 -->A fixed width for <!-- /react-text --><code data-reactid="2858"><!-- react-text: 2859 -->scroll.x<!-- /react-text --></code><!-- react-text: 2860 --> is recommended.<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="2861"></i></section><section class="highlight-wrapper" data-reactid="2862"><div class="highlight" data-reactid="2863"><pre class="language-__react" data-reactid="2864"><code data-reactid="2865">import { Table } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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>
|
|
{
|
|
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 operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>action<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token punctuation">,</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token punctuation">]</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> data <span class="token operator">=</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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>Table columns<span class="token operator">=</span>{columns} dataSource<span class="token operator">=</span>{data} scroll<span class="token operator">=</span>{{ x<span class="token punctuation">:</span> <span class="token number">1300</span> }} <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-fixed-columns-header" data-reactid="2866"><section class="code-box-demo" data-reactid="2867"><div class=" clearfix" data-reactid="2868"><div class="ant-spin-nested-loading" data-reactid="2869"><div class="ant-spin-container" data-reactid="2870"><div class="ant-table ant-table-large ant-table-fixed-header ant-table-scroll-position-left" data-reactid="2871"><div class="ant-table-content" data-reactid="2872"><div class="ant-table-fixed-left" data-reactid="2873"><span data-reactid="2874"><div class="ant-table-header" data-reactid="2875"><table class="ant-table-fixed" data-reactid="2876"><colgroup data-reactid="2877"><col style="width:100px;min-width:100px;" 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 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2885"><span data-reactid="2886"><!-- react-text: 2887 -->Age<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" style="height:300px;" data-reactid="2888"><div class="ant-table-body-inner" data-reactid="2889"><table class="ant-table-fixed" data-reactid="2890"><colgroup data-reactid="2891"><col style="width:100px;min-width:100px;" data-reactid="2892"/><col style="width:100px;min-width:100px;" data-reactid="2893"/></colgroup><tbody class="ant-table-tbody" data-reactid="2894"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2895"><td class="" data-reactid="2896"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2897"></span><!-- react-empty: 2898 --><!-- react-text: 2899 -->Edrward 0<!-- /react-text --></td><td class="" data-reactid="2900"><!-- react-text: 2901 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2902"><td class="" data-reactid="2903"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2904"></span><!-- react-empty: 2905 --><!-- react-text: 2906 -->Edrward 1<!-- /react-text --></td><td class="" data-reactid="2907"><!-- react-text: 2908 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2909"><td class="" data-reactid="2910"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2911"></span><!-- react-empty: 2912 --><!-- react-text: 2913 -->Edrward 2<!-- /react-text --></td><td class="" data-reactid="2914"><!-- react-text: 2915 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2916"><td class="" data-reactid="2917"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2918"></span><!-- react-empty: 2919 --><!-- react-text: 2920 -->Edrward 3<!-- /react-text --></td><td class="" data-reactid="2921"><!-- react-text: 2922 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2923"><td class="" data-reactid="2924"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2925"></span><!-- react-empty: 2926 --><!-- react-text: 2927 -->Edrward 4<!-- /react-text --></td><td class="" data-reactid="2928"><!-- react-text: 2929 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2930"><td class="" data-reactid="2931"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2932"></span><!-- react-empty: 2933 --><!-- react-text: 2934 -->Edrward 5<!-- /react-text --></td><td class="" data-reactid="2935"><!-- react-text: 2936 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2937"><td class="" data-reactid="2938"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2939"></span><!-- react-empty: 2940 --><!-- react-text: 2941 -->Edrward 6<!-- /react-text --></td><td class="" data-reactid="2942"><!-- react-text: 2943 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2944"><td class="" data-reactid="2945"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2946"></span><!-- react-empty: 2947 --><!-- react-text: 2948 -->Edrward 7<!-- /react-text --></td><td class="" data-reactid="2949"><!-- react-text: 2950 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2951"><td class="" data-reactid="2952"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2953"></span><!-- react-empty: 2954 --><!-- react-text: 2955 -->Edrward 8<!-- /react-text --></td><td class="" data-reactid="2956"><!-- react-text: 2957 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2958"><td class="" data-reactid="2959"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2960"></span><!-- react-empty: 2961 --><!-- react-text: 2962 -->Edrward 9<!-- /react-text --></td><td class="" data-reactid="2963"><!-- react-text: 2964 -->32<!-- /react-text --></td></tr></tbody></table></div></div></span></div><div class="ant-table-scroll" data-reactid="2965"><span data-reactid="2966"><div class="ant-table-header" data-reactid="2967"><table class="ant-table-fixed" style="width:1500px;" data-reactid="2968"><colgroup data-reactid="2969"><col style="width:100px;min-width:100px;" data-reactid="2970"/><col style="width:100px;min-width:100px;" data-reactid="2971"/><col style="width:150px;min-width:150px;" data-reactid="2972"/><col style="width:150px;min-width:150px;" data-reactid="2973"/><col style="width:150px;min-width:150px;" data-reactid="2974"/><col style="width:150px;min-width:150px;" data-reactid="2975"/><col style="width:150px;min-width:150px;" data-reactid="2976"/><col style="width:150px;min-width:150px;" data-reactid="2977"/><col style="width:150px;min-width:150px;" data-reactid="2978"/><col data-reactid="2979"/><col style="width:100px;min-width:100px;" data-reactid="2980"/></colgroup><thead class="ant-table-thead" data-reactid="2981"><tr data-reactid="2982"><th class="" data-reactid="2983"><span data-reactid="2984"><!-- react-text: 2985 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2986"><span data-reactid="2987"><!-- react-text: 2988 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2989"><span data-reactid="2990"><!-- react-text: 2991 -->Column 1<!-- /react-text --></span></th><th class="" data-reactid="2992"><span data-reactid="2993"><!-- react-text: 2994 -->Column 2<!-- /react-text --></span></th><th class="" data-reactid="2995"><span data-reactid="2996"><!-- react-text: 2997 -->Column 3<!-- /react-text --></span></th><th class="" data-reactid="2998"><span data-reactid="2999"><!-- react-text: 3000 -->Column 4<!-- /react-text --></span></th><th class="" data-reactid="3001"><span data-reactid="3002"><!-- react-text: 3003 -->Column 5<!-- /react-text --></span></th><th class="" data-reactid="3004"><span data-reactid="3005"><!-- react-text: 3006 -->Column 6<!-- /react-text --></span></th><th class="" data-reactid="3007"><span data-reactid="3008"><!-- react-text: 3009 -->Column 7<!-- /react-text --></span></th><th class="" data-reactid="3010"><span data-reactid="3011"><!-- react-text: 3012 -->Column 8<!-- /react-text --></span></th><th class="" data-reactid="3013"><span data-reactid="3014"><!-- react-text: 3015 -->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="3016"><table class="ant-table-fixed" style="width:1500px;" data-reactid="3017"><colgroup data-reactid="3018"><col style="width:100px;min-width:100px;" data-reactid="3019"/><col style="width:100px;min-width:100px;" data-reactid="3020"/><col style="width:150px;min-width:150px;" data-reactid="3021"/><col style="width:150px;min-width:150px;" data-reactid="3022"/><col style="width:150px;min-width:150px;" data-reactid="3023"/><col style="width:150px;min-width:150px;" data-reactid="3024"/><col style="width:150px;min-width:150px;" data-reactid="3025"/><col style="width:150px;min-width:150px;" data-reactid="3026"/><col style="width:150px;min-width:150px;" data-reactid="3027"/><col data-reactid="3028"/><col style="width:100px;min-width:100px;" data-reactid="3029"/></colgroup><tbody class="ant-table-tbody" data-reactid="3030"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3031"><td class="" data-reactid="3032"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3033"></span><!-- react-empty: 3034 --><!-- react-text: 3035 -->Edrward 0<!-- /react-text --></td><td class="" data-reactid="3036"><!-- react-text: 3037 -->32<!-- /react-text --></td><td class="" data-reactid="3038"><!-- react-text: 3039 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3040"><!-- react-text: 3041 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3042"><!-- react-text: 3043 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3044"><!-- react-text: 3045 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3046"><!-- react-text: 3047 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3048"><!-- react-text: 3049 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3050"><!-- react-text: 3051 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3052"><!-- react-text: 3053 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="3054"><a href="#" data-reactid="3055">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3056"><td class="" data-reactid="3057"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3058"></span><!-- react-empty: 3059 --><!-- react-text: 3060 -->Edrward 1<!-- /react-text --></td><td class="" data-reactid="3061"><!-- react-text: 3062 -->32<!-- /react-text --></td><td class="" data-reactid="3063"><!-- react-text: 3064 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3065"><!-- react-text: 3066 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3067"><!-- react-text: 3068 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3069"><!-- react-text: 3070 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3071"><!-- react-text: 3072 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3073"><!-- react-text: 3074 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3075"><!-- react-text: 3076 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3077"><!-- react-text: 3078 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="3079"><a href="#" data-reactid="3080">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3081"><td class="" data-reactid="3082"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3083"></span><!-- react-empty: 3084 --><!-- react-text: 3085 -->Edrward 2<!-- /react-text --></td><td class="" data-reactid="3086"><!-- react-text: 3087 -->32<!-- /react-text --></td><td class="" data-reactid="3088"><!-- react-text: 3089 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3090"><!-- react-text: 3091 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3092"><!-- react-text: 3093 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3094"><!-- react-text: 3095 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3096"><!-- react-text: 3097 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3098"><!-- react-text: 3099 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3100"><!-- react-text: 3101 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3102"><!-- react-text: 3103 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3104"><a href="#" data-reactid="3105">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3106"><td class="" data-reactid="3107"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3108"></span><!-- react-empty: 3109 --><!-- react-text: 3110 -->Edrward 3<!-- /react-text --></td><td class="" data-reactid="3111"><!-- react-text: 3112 -->32<!-- /react-text --></td><td class="" data-reactid="3113"><!-- react-text: 3114 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3115"><!-- react-text: 3116 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3117"><!-- react-text: 3118 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3119"><!-- react-text: 3120 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3121"><!-- react-text: 3122 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3123"><!-- react-text: 3124 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3125"><!-- react-text: 3126 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3127"><!-- react-text: 3128 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3129"><a href="#" data-reactid="3130">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3131"><td class="" data-reactid="3132"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3133"></span><!-- react-empty: 3134 --><!-- react-text: 3135 -->Edrward 4<!-- /react-text --></td><td class="" data-reactid="3136"><!-- react-text: 3137 -->32<!-- /react-text --></td><td class="" data-reactid="3138"><!-- react-text: 3139 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3140"><!-- react-text: 3141 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3142"><!-- react-text: 3143 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3144"><!-- react-text: 3145 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3146"><!-- react-text: 3147 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3148"><!-- react-text: 3149 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3150"><!-- react-text: 3151 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3152"><!-- react-text: 3153 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3154"><a href="#" data-reactid="3155">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3156"><td class="" data-reactid="3157"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3158"></span><!-- react-empty: 3159 --><!-- react-text: 3160 -->Edrward 5<!-- /react-text --></td><td class="" data-reactid="3161"><!-- react-text: 3162 -->32<!-- /react-text --></td><td class="" data-reactid="3163"><!-- react-text: 3164 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3165"><!-- react-text: 3166 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3167"><!-- react-text: 3168 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3169"><!-- react-text: 3170 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3171"><!-- react-text: 3172 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3173"><!-- react-text: 3174 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3175"><!-- react-text: 3176 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3177"><!-- react-text: 3178 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3179"><a href="#" data-reactid="3180">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3181"><td class="" data-reactid="3182"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3183"></span><!-- react-empty: 3184 --><!-- react-text: 3185 -->Edrward 6<!-- /react-text --></td><td class="" data-reactid="3186"><!-- react-text: 3187 -->32<!-- /react-text --></td><td class="" data-reactid="3188"><!-- react-text: 3189 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3190"><!-- react-text: 3191 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3192"><!-- react-text: 3193 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3194"><!-- react-text: 3195 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3196"><!-- react-text: 3197 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3198"><!-- react-text: 3199 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3200"><!-- react-text: 3201 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3202"><!-- react-text: 3203 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3204"><a href="#" data-reactid="3205">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3206"><td class="" data-reactid="3207"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3208"></span><!-- react-empty: 3209 --><!-- react-text: 3210 -->Edrward 7<!-- /react-text --></td><td class="" data-reactid="3211"><!-- react-text: 3212 -->32<!-- /react-text --></td><td class="" data-reactid="3213"><!-- react-text: 3214 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3215"><!-- react-text: 3216 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3217"><!-- react-text: 3218 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3219"><!-- react-text: 3220 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3221"><!-- react-text: 3222 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3223"><!-- react-text: 3224 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3225"><!-- react-text: 3226 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3227"><!-- react-text: 3228 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3229"><a href="#" data-reactid="3230">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3231"><td class="" data-reactid="3232"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3233"></span><!-- react-empty: 3234 --><!-- react-text: 3235 -->Edrward 8<!-- /react-text --></td><td class="" data-reactid="3236"><!-- react-text: 3237 -->32<!-- /react-text --></td><td class="" data-reactid="3238"><!-- react-text: 3239 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3240"><!-- react-text: 3241 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3242"><!-- react-text: 3243 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3244"><!-- react-text: 3245 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3246"><!-- react-text: 3247 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3248"><!-- react-text: 3249 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3250"><!-- react-text: 3251 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3252"><!-- react-text: 3253 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3254"><a href="#" data-reactid="3255">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3256"><td class="" data-reactid="3257"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3258"></span><!-- react-empty: 3259 --><!-- react-text: 3260 -->Edrward 9<!-- /react-text --></td><td class="" data-reactid="3261"><!-- react-text: 3262 -->32<!-- /react-text --></td><td class="" data-reactid="3263"><!-- react-text: 3264 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3265"><!-- react-text: 3266 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3267"><!-- react-text: 3268 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3269"><!-- react-text: 3270 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3271"><!-- react-text: 3272 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3273"><!-- react-text: 3274 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3275"><!-- react-text: 3276 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3277"><!-- react-text: 3278 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3279"><a href="#" data-reactid="3280">action</a></td></tr></tbody></table></div></span></div><div class="ant-table-fixed-right" data-reactid="3281"><span data-reactid="3282"><div class="ant-table-header" data-reactid="3283"><table class="ant-table-fixed" data-reactid="3284"><colgroup data-reactid="3285"><col style="width:100px;min-width:100px;" data-reactid="3286"/></colgroup><thead class="ant-table-thead" data-reactid="3287"><tr data-reactid="3288"><th class="" data-reactid="3289"><span data-reactid="3290"><!-- react-text: 3291 -->Action<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" style="height:300px;" data-reactid="3292"><div class="ant-table-body-inner" data-reactid="3293"><table class="ant-table-fixed" data-reactid="3294"><colgroup data-reactid="3295"><col style="width:100px;min-width:100px;" data-reactid="3296"/></colgroup><tbody class="ant-table-tbody" data-reactid="3297"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3298"><td class="" data-reactid="3299"><a href="#" data-reactid="3300">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3301"><td class="" data-reactid="3302"><a href="#" data-reactid="3303">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3304"><td class="" data-reactid="3305"><a href="#" data-reactid="3306">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3307"><td class="" data-reactid="3308"><a href="#" data-reactid="3309">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3310"><td class="" data-reactid="3311"><a href="#" data-reactid="3312">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3313"><td class="" data-reactid="3314"><a href="#" data-reactid="3315">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3316"><td class="" data-reactid="3317"><a href="#" data-reactid="3318">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3319"><td class="" data-reactid="3320"><a href="#" data-reactid="3321">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3322"><td class="" data-reactid="3323"><a href="#" data-reactid="3324">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3325"><td class="" data-reactid="3326"><a href="#" data-reactid="3327">action</a></td></tr></tbody></table></div></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="3328"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3329"><a data-reactid="3330"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3331"><a data-reactid="3332">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="3333"><a data-reactid="3334">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="3335"><a data-reactid="3336">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="3337"><a data-reactid="3338">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next" data-reactid="3339"><a data-reactid="3340">5</a></li><li title="Next 5 Pages" class="ant-pagination-jump-next" data-reactid="3341"><a data-reactid="3342"></a></li><li title="10" class="ant-pagination-item ant-pagination-item-10" data-reactid="3343"><a data-reactid="3344">10</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="3345"><a data-reactid="3346"></a></li><!-- react-empty: 3347 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="3348"><div class="code-box-title" data-reactid="3349"><a href="#components-table-demo-fixed-columns-header" data-reactid="3350">Fixed Columns and Header</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/fixed-columns-header.md" data-reactid="3351"><i class="anticon anticon-edit" data-reactid="3352"></i></a></div><div data-reactid="3353"><p data-reactid="3354"><!-- react-text: 3355 -->Suitable for large amounts of data with long columns.<!-- /react-text --></p><blockquote data-reactid="3356"><p data-reactid="3357"><!-- react-text: 3358 -->Specify the width of each column if header and cell do not align properly.<!-- /react-text --></p><p data-reactid="3359"><!-- react-text: 3360 -->A fixed width for <!-- /react-text --><code data-reactid="3361"><!-- react-text: 3362 -->scroll.x<!-- /react-text --></code><!-- react-text: 3363 --> is recommended. The sum of unfixed columns should not greater than <!-- /react-text --><code data-reactid="3364"><!-- react-text: 3365 -->scroll.x<!-- /react-text --></code><!-- react-text: 3366 -->.<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3367"></i></section><section class="highlight-wrapper" data-reactid="3368"><div class="highlight" data-reactid="3369"><pre class="language-__react" data-reactid="3370"><code data-reactid="3371">import { Table } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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>
|
|
{ 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>
|
|
{
|
|
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 operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>action<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token punctuation">,</span>
|
|
}<span class="token punctuation">,</span>
|
|
<span class="token punctuation">]</span><span class="token comment" spellcheck="true">;</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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">for</span> <span class="token punctuation">(</span>let i <span class="token operator">=</span> <span class="token number">0</span><span class="token comment" spellcheck="true">; i < 100; i++) {</span>
|
|
data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>{
|
|
key<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
|
|
name<span class="token punctuation">:</span> `Edrward ${i}`<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> `London Park no<span class="token punctuation">.</span> ${i}`<span class="token punctuation">,</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>Table columns<span class="token operator">=</span>{columns} dataSource<span class="token operator">=</span>{data} scroll<span class="token operator">=</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 operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-grouping-columns" data-reactid="3372"><section class="code-box-demo" data-reactid="3373"><div class=" clearfix" data-reactid="3374"><div class="ant-spin-nested-loading" data-reactid="3375"><div class="ant-spin-container" data-reactid="3376"><div class="ant-table ant-table-middle ant-table-bordered ant-table-fixed-header ant-table-scroll-position-left" data-reactid="3377"><div class="ant-table-content" data-reactid="3378"><div class="ant-table-fixed-left" data-reactid="3379"><span data-reactid="3380"><div class="ant-table-header" data-reactid="3381"><table class="ant-table-fixed" data-reactid="3382"><colgroup data-reactid="3383"><col style="width:100px;min-width:100px;" data-reactid="3384"/></colgroup><thead class="ant-table-thead" data-reactid="3385"><tr data-reactid="3386"><th class="" rowspan="4" data-reactid="3387"><span data-reactid="3388"><!-- react-text: 3389 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="3390"></i></span></th></tr></thead></table></div><div class="ant-table-body-outer" style="height:240px;" data-reactid="3391"><div class="ant-table-body-inner" data-reactid="3392"><table class="ant-table-fixed" data-reactid="3393"><colgroup data-reactid="3394"><col style="width:100px;min-width:100px;" data-reactid="3395"/></colgroup><tbody class="ant-table-tbody" data-reactid="3396"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3397"><td class="" data-reactid="3398"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3399"></span><!-- react-empty: 3400 --><!-- react-text: 3401 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3402"><td class="" data-reactid="3403"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3404"></span><!-- react-empty: 3405 --><!-- react-text: 3406 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3407"><td class="" data-reactid="3408"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3409"></span><!-- react-empty: 3410 --><!-- react-text: 3411 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3412"><td class="" data-reactid="3413"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3414"></span><!-- react-empty: 3415 --><!-- react-text: 3416 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3417"><td class="" data-reactid="3418"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3419"></span><!-- react-empty: 3420 --><!-- react-text: 3421 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3422"><td class="" data-reactid="3423"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3424"></span><!-- react-empty: 3425 --><!-- react-text: 3426 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3427"><td class="" data-reactid="3428"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3429"></span><!-- react-empty: 3430 --><!-- react-text: 3431 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3432"><td class="" data-reactid="3433"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3434"></span><!-- react-empty: 3435 --><!-- react-text: 3436 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3437"><td class="" data-reactid="3438"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3439"></span><!-- react-empty: 3440 --><!-- react-text: 3441 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3442"><td class="" data-reactid="3443"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3444"></span><!-- react-empty: 3445 --><!-- react-text: 3446 -->John Brown<!-- /react-text --></td></tr></tbody></table></div></div></span></div><div class="ant-table-scroll" data-reactid="3447"><span data-reactid="3448"><div class="ant-table-header" data-reactid="3449"><table class="ant-table-fixed" style="width:1010px;" data-reactid="3450"><colgroup data-reactid="3451"><col style="width:100px;min-width:100px;" data-reactid="3452"/><col style="width:100px;min-width:100px;" data-reactid="3453"/><col style="width:200px;min-width:200px;" data-reactid="3454"/><col style="width:50px;min-width:50px;" data-reactid="3455"/><col style="width:100px;min-width:100px;" data-reactid="3456"/><col style="width:200px;min-width:200px;" data-reactid="3457"/><col style="width:200px;min-width:200px;" data-reactid="3458"/><col style="width:60px;min-width:60px;" data-reactid="3459"/></colgroup><thead class="ant-table-thead" data-reactid="3460"><tr data-reactid="3461"><th class="" rowspan="4" data-reactid="3462"><span data-reactid="3463"><!-- react-text: 3464 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter ant-dropdown-trigger" data-reactid="3465"></i></span></th><th class="" colspan="4" data-reactid="3466"><span data-reactid="3467"><!-- react-text: 3468 -->Other<!-- /react-text --></span></th><th class="" colspan="2" data-reactid="3469"><span data-reactid="3470"><!-- react-text: 3471 -->Company<!-- /react-text --></span></th><th class="" rowspan="4" data-reactid="3472"><span data-reactid="3473"><!-- react-text: 3474 -->Gender<!-- /react-text --></span></th></tr><tr data-reactid="3475"><th class="" rowspan="3" data-reactid="3476"><span data-reactid="3477"><!-- react-text: 3478 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="3479"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="3480"><i class="anticon anticon-caret-up" data-reactid="3481"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="3482"><i class="anticon anticon-caret-down" data-reactid="3483"></i></span></div></span></th><th class="" colspan="3" data-reactid="3484"><span data-reactid="3485"><!-- react-text: 3486 -->Address<!-- /react-text --></span></th><th class="" rowspan="3" data-reactid="3487"><span data-reactid="3488"><!-- react-text: 3489 -->Company Address<!-- /react-text --></span></th><th class="" rowspan="3" data-reactid="3490"><span data-reactid="3491"><!-- react-text: 3492 -->Company Name<!-- /react-text --></span></th></tr><tr data-reactid="3493"><th class="" rowspan="2" data-reactid="3494"><span data-reactid="3495"><!-- react-text: 3496 -->Street<!-- /react-text --></span></th><th class="" colspan="2" data-reactid="3497"><span data-reactid="3498"><!-- react-text: 3499 -->Block<!-- /react-text --></span></th></tr><tr data-reactid="3500"><th class="" data-reactid="3501"><span data-reactid="3502"><!-- react-text: 3503 -->Building<!-- /react-text --></span></th><th class="" data-reactid="3504"><span data-reactid="3505"><!-- react-text: 3506 -->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="3507"><table class="ant-table-fixed" style="width:1010px;" data-reactid="3508"><colgroup data-reactid="3509"><col style="width:100px;min-width:100px;" data-reactid="3510"/><col style="width:100px;min-width:100px;" data-reactid="3511"/><col style="width:200px;min-width:200px;" data-reactid="3512"/><col style="width:50px;min-width:50px;" data-reactid="3513"/><col style="width:100px;min-width:100px;" data-reactid="3514"/><col style="width:200px;min-width:200px;" data-reactid="3515"/><col style="width:200px;min-width:200px;" data-reactid="3516"/><col style="width:60px;min-width:60px;" data-reactid="3517"/></colgroup><tbody class="ant-table-tbody" data-reactid="3518"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3519"><td class="" data-reactid="3520"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3521"></span><!-- react-empty: 3522 --><!-- react-text: 3523 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3524"><!-- react-text: 3525 -->1<!-- /react-text --></td><td class="" data-reactid="3526"><!-- react-text: 3527 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3528"><!-- react-text: 3529 -->C<!-- /react-text --></td><td class="" data-reactid="3530"><!-- react-text: 3531 -->2035<!-- /react-text --></td><td class="" data-reactid="3532"><!-- react-text: 3533 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3534"><!-- react-text: 3535 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3536"><!-- react-text: 3537 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3538"><td class="" data-reactid="3539"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3540"></span><!-- react-empty: 3541 --><!-- react-text: 3542 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3543"><!-- react-text: 3544 -->2<!-- /react-text --></td><td class="" data-reactid="3545"><!-- react-text: 3546 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3547"><!-- react-text: 3548 -->C<!-- /react-text --></td><td class="" data-reactid="3549"><!-- react-text: 3550 -->2035<!-- /react-text --></td><td class="" data-reactid="3551"><!-- react-text: 3552 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3553"><!-- react-text: 3554 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3555"><!-- react-text: 3556 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3557"><td class="" data-reactid="3558"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3559"></span><!-- react-empty: 3560 --><!-- react-text: 3561 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3562"><!-- react-text: 3563 -->3<!-- /react-text --></td><td class="" data-reactid="3564"><!-- react-text: 3565 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3566"><!-- react-text: 3567 -->C<!-- /react-text --></td><td class="" data-reactid="3568"><!-- react-text: 3569 -->2035<!-- /react-text --></td><td class="" data-reactid="3570"><!-- react-text: 3571 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3572"><!-- react-text: 3573 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3574"><!-- react-text: 3575 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3576"><td class="" data-reactid="3577"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3578"></span><!-- react-empty: 3579 --><!-- react-text: 3580 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3581"><!-- react-text: 3582 -->4<!-- /react-text --></td><td class="" data-reactid="3583"><!-- react-text: 3584 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3585"><!-- react-text: 3586 -->C<!-- /react-text --></td><td class="" data-reactid="3587"><!-- react-text: 3588 -->2035<!-- /react-text --></td><td class="" data-reactid="3589"><!-- react-text: 3590 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3591"><!-- react-text: 3592 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3593"><!-- react-text: 3594 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3595"><td class="" data-reactid="3596"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3597"></span><!-- react-empty: 3598 --><!-- react-text: 3599 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3600"><!-- react-text: 3601 -->5<!-- /react-text --></td><td class="" data-reactid="3602"><!-- react-text: 3603 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3604"><!-- react-text: 3605 -->C<!-- /react-text --></td><td class="" data-reactid="3606"><!-- react-text: 3607 -->2035<!-- /react-text --></td><td class="" data-reactid="3608"><!-- react-text: 3609 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3610"><!-- react-text: 3611 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3612"><!-- react-text: 3613 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3614"><td class="" data-reactid="3615"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3616"></span><!-- react-empty: 3617 --><!-- react-text: 3618 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3619"><!-- react-text: 3620 -->6<!-- /react-text --></td><td class="" data-reactid="3621"><!-- react-text: 3622 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3623"><!-- react-text: 3624 -->C<!-- /react-text --></td><td class="" data-reactid="3625"><!-- react-text: 3626 -->2035<!-- /react-text --></td><td class="" data-reactid="3627"><!-- react-text: 3628 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3629"><!-- react-text: 3630 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3631"><!-- react-text: 3632 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3633"><td class="" data-reactid="3634"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3635"></span><!-- react-empty: 3636 --><!-- react-text: 3637 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3638"><!-- react-text: 3639 -->7<!-- /react-text --></td><td class="" data-reactid="3640"><!-- react-text: 3641 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3642"><!-- react-text: 3643 -->C<!-- /react-text --></td><td class="" data-reactid="3644"><!-- react-text: 3645 -->2035<!-- /react-text --></td><td class="" data-reactid="3646"><!-- react-text: 3647 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3648"><!-- react-text: 3649 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3650"><!-- react-text: 3651 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3652"><td class="" data-reactid="3653"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3654"></span><!-- react-empty: 3655 --><!-- react-text: 3656 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3657"><!-- react-text: 3658 -->8<!-- /react-text --></td><td class="" data-reactid="3659"><!-- react-text: 3660 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3661"><!-- react-text: 3662 -->C<!-- /react-text --></td><td class="" data-reactid="3663"><!-- react-text: 3664 -->2035<!-- /react-text --></td><td class="" data-reactid="3665"><!-- react-text: 3666 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3667"><!-- react-text: 3668 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3669"><!-- react-text: 3670 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3671"><td class="" data-reactid="3672"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3673"></span><!-- react-empty: 3674 --><!-- react-text: 3675 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3676"><!-- react-text: 3677 -->9<!-- /react-text --></td><td class="" data-reactid="3678"><!-- react-text: 3679 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3680"><!-- react-text: 3681 -->C<!-- /react-text --></td><td class="" data-reactid="3682"><!-- react-text: 3683 -->2035<!-- /react-text --></td><td class="" data-reactid="3684"><!-- react-text: 3685 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3686"><!-- react-text: 3687 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3688"><!-- react-text: 3689 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3690"><td class="" data-reactid="3691"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3692"></span><!-- react-empty: 3693 --><!-- react-text: 3694 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3695"><!-- react-text: 3696 -->10<!-- /react-text --></td><td class="" data-reactid="3697"><!-- react-text: 3698 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3699"><!-- react-text: 3700 -->C<!-- /react-text --></td><td class="" data-reactid="3701"><!-- react-text: 3702 -->2035<!-- /react-text --></td><td class="" data-reactid="3703"><!-- react-text: 3704 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3705"><!-- react-text: 3706 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3707"><!-- react-text: 3708 -->M<!-- /react-text --></td></tr></tbody></table></div></span></div><div class="ant-table-fixed-right" data-reactid="3709"><span data-reactid="3710"><div class="ant-table-header" data-reactid="3711"><table class="ant-table-fixed" data-reactid="3712"><colgroup data-reactid="3713"><col style="width:60px;min-width:60px;" data-reactid="3714"/></colgroup><thead class="ant-table-thead" data-reactid="3715"><tr data-reactid="3716"><th class="" rowspan="4" data-reactid="3717"><span data-reactid="3718"><!-- react-text: 3719 -->Gender<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" style="height:240px;" data-reactid="3720"><div class="ant-table-body-inner" data-reactid="3721"><table class="ant-table-fixed" data-reactid="3722"><colgroup data-reactid="3723"><col style="width:60px;min-width:60px;" data-reactid="3724"/></colgroup><tbody class="ant-table-tbody" data-reactid="3725"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3726"><td class="" data-reactid="3727"><!-- react-text: 3728 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3729"><td class="" data-reactid="3730"><!-- react-text: 3731 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3732"><td class="" data-reactid="3733"><!-- react-text: 3734 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3735"><td class="" data-reactid="3736"><!-- react-text: 3737 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3738"><td class="" data-reactid="3739"><!-- react-text: 3740 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3741"><td class="" data-reactid="3742"><!-- react-text: 3743 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3744"><td class="" data-reactid="3745"><!-- react-text: 3746 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3747"><td class="" data-reactid="3748"><!-- react-text: 3749 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3750"><td class="" data-reactid="3751"><!-- react-text: 3752 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3753"><td class="" data-reactid="3754"><!-- react-text: 3755 -->M<!-- /react-text --></td></tr></tbody></table></div></div></span></div></div></div><ul class="ant-pagination ant-table-pagination mini" unselectable="unselectable" data-reactid="3756"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3757"><a data-reactid="3758"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3759"><a data-reactid="3760">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="3761"><a data-reactid="3762">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="3763"><a data-reactid="3764">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="3765"><a data-reactid="3766">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next" data-reactid="3767"><a data-reactid="3768">5</a></li><li title="Next 5 Pages" class="ant-pagination-jump-next" data-reactid="3769"><a data-reactid="3770"></a></li><li title="10" class="ant-pagination-item ant-pagination-item-10" data-reactid="3771"><a data-reactid="3772">10</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="3773"><a data-reactid="3774"></a></li><!-- react-empty: 3775 --></ul></div></div></div></section><section class="code-box-meta markdown" data-reactid="3776"><div class="code-box-title" data-reactid="3777"><a href="#components-table-demo-grouping-columns" data-reactid="3778">Grouping table head</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/grouping-columns.md" data-reactid="3779"><i class="anticon anticon-edit" data-reactid="3780"></i></a></div><div data-reactid="3781"><p data-reactid="3782"><!-- react-text: 3783 -->Group table head with <!-- /react-text --><code data-reactid="3784"><!-- react-text: 3785 -->columns[n].children<!-- /react-text --></code><!-- react-text: 3786 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3787"></i></section><section class="highlight-wrapper" data-reactid="3788"><div class="highlight" data-reactid="3789"><pre class="language-__react" data-reactid="3790"><code data-reactid="3791">import { Table } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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>{
|
|
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> {
|
|
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>
|
|
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 operator">=</span> <span class="token number">0</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>{
|
|
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> {
|
|
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>{
|
|
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> {
|
|
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>{
|
|
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> {
|
|
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> {
|
|
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>{
|
|
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> {
|
|
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> {
|
|
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 comment" spellcheck="true">;</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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">for</span> <span class="token punctuation">(</span>let i <span class="token operator">=</span> <span class="token number">0</span><span class="token comment" spellcheck="true">; i < 100; i++) {</span>
|
|
data<span class="token punctuation">.</span><span class="token function">push</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 comment" spellcheck="true">;</span>
|
|
}
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>Table
|
|
columns<span class="token operator">=</span>{columns}
|
|
dataSource<span class="token operator">=</span>{data}
|
|
bordered
|
|
size<span class="token operator">=</span><span class="token string">"middle"</span>
|
|
scroll<span class="token operator">=</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 operator">/</span><span class="token operator">></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-edit-cell" data-reactid="3792"><section class="code-box-demo" data-reactid="3793"><div data-reactid="3794"><button type="button" class="ant-btn ant-btn-ghost editable-add-btn" data-reactid="3795"><span data-reactid="3796">Add</span></button><div class=" clearfix" data-reactid="3797"><div class="ant-spin-nested-loading" data-reactid="3798"><div class="ant-spin-container" data-reactid="3799"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="3800"><div class="ant-table-content" data-reactid="3801"><div class="" data-reactid="3802"><span data-reactid="3803"><div class="ant-table-body" data-reactid="3804"><table class="" data-reactid="3805"><colgroup data-reactid="3806"><col style="width:30%;min-width:30%;" data-reactid="3807"/><col data-reactid="3808"/><col data-reactid="3809"/><col data-reactid="3810"/></colgroup><thead class="ant-table-thead" data-reactid="3811"><tr data-reactid="3812"><th class="" data-reactid="3813"><span data-reactid="3814"><!-- react-text: 3815 -->name<!-- /react-text --></span></th><th class="" data-reactid="3816"><span data-reactid="3817"><!-- react-text: 3818 -->age<!-- /react-text --></span></th><th class="" data-reactid="3819"><span data-reactid="3820"><!-- react-text: 3821 -->address<!-- /react-text --></span></th><th class="" data-reactid="3822"><span data-reactid="3823"><!-- react-text: 3824 -->operation<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="3825"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3826"><td class="" data-reactid="3827"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3828"></span><!-- react-empty: 3829 --><div class="editable-cell" data-reactid="3830"><div class="editable-cell-text-wrapper" data-reactid="3831"><!-- react-text: 3832 -->Edward King 0<!-- /react-text --><i class="anticon anticon-edit editable-cell-icon" data-reactid="3833"></i></div></div></td><td class="" data-reactid="3834"><!-- react-text: 3835 -->32<!-- /react-text --></td><td class="" data-reactid="3836"><!-- react-text: 3837 -->London, Park Lane no. 0<!-- /react-text --></td><td class="" data-reactid="3838"><a href="#" data-reactid="3839">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3840"><td class="" data-reactid="3841"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3842"></span><!-- react-empty: 3843 --><div class="editable-cell" data-reactid="3844"><div class="editable-cell-text-wrapper" data-reactid="3845"><!-- react-text: 3846 -->Edward King 1<!-- /react-text --><i class="anticon anticon-edit editable-cell-icon" data-reactid="3847"></i></div></div></td><td class="" data-reactid="3848"><!-- react-text: 3849 -->32<!-- /react-text --></td><td class="" data-reactid="3850"><!-- react-text: 3851 -->London, Park Lane no. 1<!-- /react-text --></td><td class="" data-reactid="3852"><a href="#" data-reactid="3853">Delete</a></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="3854"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3855"><a data-reactid="3856"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3857"><a data-reactid="3858">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="3859"><a data-reactid="3860"></a></li><!-- react-empty: 3861 --></ul></div></div></div></div><style data-reactid="3862">.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:#2db7f5;
|
|
}
|
|
|
|
.editable-add-btn {
|
|
margin-bottom: 8px;
|
|
}</style></section><section class="code-box-meta markdown" data-reactid="3863"><div class="code-box-title" data-reactid="3864"><a href="#components-table-demo-edit-cell" data-reactid="3865">Editable Cells</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/edit-cell.md" data-reactid="3866"><i class="anticon anticon-edit" data-reactid="3867"></i></a></div><div data-reactid="3868"><p data-reactid="3869"><!-- react-text: 3870 -->Table with editable cells.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3871"></i></section><section class="highlight-wrapper" data-reactid="3872"><div class="highlight" data-reactid="3873"><pre class="language-__react" data-reactid="3874"><code data-reactid="3875">import { 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 } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
class EditableCell extends React<span class="token punctuation">.</span>Component {
|
|
state <span class="token operator">=</span> {
|
|
value<span class="token punctuation">:</span> this<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>
|
|
}
|
|
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 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 comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>{ value }<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</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> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>onChange<span class="token punctuation">)</span> {
|
|
this<span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span>this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</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> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</span>
|
|
}
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
<span class="token keyword">const</span> { value<span class="token punctuation">,</span> editable } <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token comment" spellcheck="true">;</span>
|
|
return <span class="token punctuation">(</span><span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"editable-cell"</span><span class="token operator">></span>
|
|
{
|
|
editable <span class="token operator">?</span>
|
|
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"editable-cell-input-wrapper"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Input
|
|
value<span class="token operator">=</span>{value}
|
|
onChange<span class="token operator">=</span>{this<span class="token punctuation">.</span>handleChange}
|
|
onPressEnter<span class="token operator">=</span>{this<span class="token punctuation">.</span>check}
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Icon
|
|
type<span class="token operator">=</span><span class="token string">"check"</span>
|
|
className<span class="token operator">=</span><span class="token string">"editable-cell-icon-check"</span>
|
|
onClick<span class="token operator">=</span>{this<span class="token punctuation">.</span>check}
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">:</span>
|
|
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"editable-cell-text-wrapper"</span><span class="token operator">></span>
|
|
{value || <span class="token string">' '</span>}
|
|
<span class="token operator"><</span>Icon
|
|
type<span class="token operator">=</span><span class="token string">"edit"</span>
|
|
className<span class="token operator">=</span><span class="token string">"editable-cell-icon"</span>
|
|
onClick<span class="token operator">=</span>{this<span class="token punctuation">.</span>edit}
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
}
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
}
|
|
|
|
class EditableTable extends React<span class="token punctuation">.</span>Component {
|
|
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> {
|
|
<span class="token function">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span>columns <span class="token operator">=</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 operator"><</span>EditableCell
|
|
value<span class="token operator">=</span>{text}
|
|
onChange<span class="token operator">=</span>{this<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 operator">/</span><span class="token operator">></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> {
|
|
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> {
|
|
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> {
|
|
return <span class="token punctuation">(</span>
|
|
this<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 operator"><</span>Popconfirm title<span class="token operator">=</span><span class="token string">"Sure to delete?"</span> onConfirm<span class="token operator">=</span>{this<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 operator">></span>
|
|
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>Delete<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Popconfirm<span class="token operator">></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 comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
}<span class="token punctuation">]</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
this<span class="token punctuation">.</span>state <span class="token operator">=</span> {
|
|
dataSource<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> {
|
|
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>
|
|
count<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
|
|
}<span class="token comment" spellcheck="true">;</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> {
|
|
return <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
|
|
<span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">]</span><span class="token comment" spellcheck="true">;</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 comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>{ dataSource }<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token comment" spellcheck="true">;</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> {
|
|
return <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
|
|
<span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">]</span><span class="token comment" spellcheck="true">;</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 comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>{ dataSource }<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token comment" spellcheck="true">;</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 keyword">const</span> { count<span class="token punctuation">,</span> dataSource } <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> newData <span class="token operator">=</span> {
|
|
key<span class="token punctuation">:</span> count<span class="token punctuation">,</span>
|
|
name<span class="token punctuation">:</span> `Edward King ${count}`<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> `London<span class="token punctuation">,</span> Park Lane no<span class="token punctuation">.</span> ${count}`<span class="token punctuation">,</span>
|
|
}<span class="token comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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>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 comment" spellcheck="true">;</span>
|
|
}
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
<span class="token keyword">const</span> { dataSource } <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</span> this<span class="token punctuation">.</span>columns<span class="token comment" spellcheck="true">;</span>
|
|
return <span class="token punctuation">(</span><span class="token operator"><</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span>Button className<span class="token operator">=</span><span class="token string">"editable-add-btn"</span> type<span class="token operator">=</span><span class="token string">"ghost"</span> onClick<span class="token operator">=</span>{this<span class="token punctuation">.</span>handleAdd}<span class="token operator">></span>Add<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span>
|
|
<span class="token operator"><</span>Table bordered dataSource<span class="token operator">=</span>{dataSource} columns<span class="token operator">=</span>{columns} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
}
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>EditableTable <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div><div class="highlight" data-reactid="3876"><pre data-reactid="3877"><code class="css" data-reactid="3878"><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">#2db7f5</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="3879"><section class="code-box-demo" data-reactid="3880"><div class=" clearfix" data-reactid="3881"><div class="ant-spin-nested-loading" data-reactid="3882"><div class="ant-spin-container" data-reactid="3883"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="3884"><div class="ant-table-content" data-reactid="3885"><div class="" data-reactid="3886"><span data-reactid="3887"><div class="ant-table-body" data-reactid="3888"><table class="" data-reactid="3889"><colgroup data-reactid="3890"><col style="width:25%;min-width:25%;" data-reactid="3891"/><col style="width:15%;min-width:15%;" data-reactid="3892"/><col style="width:40%;min-width:40%;" data-reactid="3893"/><col data-reactid="3894"/></colgroup><thead class="ant-table-thead" data-reactid="3895"><tr data-reactid="3896"><th class="" data-reactid="3897"><span data-reactid="3898"><!-- react-text: 3899 -->name<!-- /react-text --></span></th><th class="" data-reactid="3900"><span data-reactid="3901"><!-- react-text: 3902 -->age<!-- /react-text --></span></th><th class="" data-reactid="3903"><span data-reactid="3904"><!-- react-text: 3905 -->address<!-- /react-text --></span></th><th class="" data-reactid="3906"><span data-reactid="3907"><!-- react-text: 3908 -->operation<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="3909"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3910"><td class="" data-reactid="3911"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3912"></span><!-- react-empty: 3913 --><div data-reactid="3914"><div class="editable-row-text" data-reactid="3915">Edward King 0</div></div></td><td class="" data-reactid="3916"><div data-reactid="3917"><div class="editable-row-text" data-reactid="3918">32</div></div></td><td class="" data-reactid="3919"><!-- react-text: 3920 -->London, Park Lane no. 0<!-- /react-text --></td><td class="" data-reactid="3921"><div class="editable-row-operations" data-reactid="3922"><span data-reactid="3923"><a data-reactid="3924">Edit</a></span></div></td></tr></tbody></table></div></span></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="3925"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3926"><a data-reactid="3927"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3928"><a data-reactid="3929">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="3930"><a data-reactid="3931"></a></li><!-- react-empty: 3932 --></ul></div></div></div><style data-reactid="3933">.editable-row-text {
|
|
padding: 5px;
|
|
}
|
|
|
|
.editable-row-operations a {
|
|
margin-right: 8px;
|
|
}</style></section><section class="code-box-meta markdown" data-reactid="3934"><div class="code-box-title" data-reactid="3935"><a href="#components-table-demo-edit-row" data-reactid="3936">Editable Rows</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/edit-row.md" data-reactid="3937"><i class="anticon anticon-edit" data-reactid="3938"></i></a></div><div data-reactid="3939"><p data-reactid="3940"><!-- react-text: 3941 -->Table with editable rows.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="3942"></i></section><section class="highlight-wrapper" data-reactid="3943"><div class="highlight" data-reactid="3944"><pre class="language-__react" data-reactid="3945"><code data-reactid="3946">import { Table<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Popconfirm } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
|
|
class EditableCell extends React<span class="token punctuation">.</span>Component {
|
|
state <span class="token operator">=</span> {
|
|
value<span class="token punctuation">:</span> this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>value<span class="token punctuation">,</span>
|
|
editable<span class="token punctuation">:</span> this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>editable || <span class="token boolean">false</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 keyword">if</span> <span class="token punctuation">(</span>nextProps<span class="token punctuation">.</span>editable !<span class="token operator">==</span> this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>editable<span class="token punctuation">)</span> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>nextProps<span class="token punctuation">.</span>editable<span class="token punctuation">)</span> {
|
|
this<span class="token punctuation">.</span>cacheValue <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token comment" spellcheck="true">;</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 operator">&</span> nextProps<span class="token punctuation">.</span>status !<span class="token operator">==</span> this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>status<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 operator">=</span> <span class="token string">'save'</span><span class="token punctuation">)</span> {
|
|
this<span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span>this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</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 operator">=</span> <span class="token string">'cancel'</span><span class="token punctuation">)</span> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>{ value<span class="token punctuation">:</span> this<span class="token punctuation">.</span>cacheValue }<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span>this<span class="token punctuation">.</span>cacheValue<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
}
|
|
}
|
|
<span class="token function">shouldComponentUpdate</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">,</span> nextState<span class="token punctuation">)</span> {
|
|
return nextProps<span class="token punctuation">.</span>editable !<span class="token operator">==</span> this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>editable ||
|
|
nextState<span class="token punctuation">.</span>value !<span class="token operator">==</span> this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
<span class="token function">handleChange</span><span class="token punctuation">(</span>e<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 comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>{ value }<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
<span class="token keyword">const</span> { value<span class="token punctuation">,</span> editable } <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token comment" spellcheck="true">;</span>
|
|
return <span class="token punctuation">(</span><span class="token operator"><</span>div<span class="token operator">></span>
|
|
{
|
|
editable <span class="token operator">?</span>
|
|
<span class="token operator"><</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span>Input
|
|
value<span class="token operator">=</span>{value}
|
|
onChange<span class="token operator">=</span>{e <span class="token operator">=</span><span class="token operator">></span> this<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 operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">:</span>
|
|
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"editable-row-text"</span><span class="token operator">></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 string">' '</span>}
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
}
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
}
|
|
|
|
class EditableTable extends React<span class="token punctuation">.</span>Component {
|
|
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> {
|
|
<span class="token function">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span>columns <span class="token operator">=</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> this<span class="token punctuation">.</span><span class="token function">renderColumns</span><span class="token punctuation">(</span>this<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> {
|
|
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> this<span class="token punctuation">.</span><span class="token function">renderColumns</span><span class="token punctuation">(</span>this<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> {
|
|
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> this<span class="token punctuation">.</span><span class="token function">renderColumns</span><span class="token punctuation">(</span>this<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> {
|
|
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 keyword">const</span> { editable } <span class="token operator">=</span> this<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 comment" spellcheck="true">;</span>
|
|
return <span class="token punctuation">(</span><span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"editable-row-operations"</span><span class="token operator">></span>
|
|
{
|
|
editable <span class="token operator">?</span>
|
|
<span class="token operator"><</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span>a onClick<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> this<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 operator">></span>Save<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
|
|
<span class="token operator"><</span>Popconfirm title<span class="token operator">=</span><span class="token string">"Sure to cancel?"</span> onConfirm<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> this<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 operator">></span>
|
|
<span class="token operator"><</span>a<span class="token operator">></span>Cancel<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Popconfirm<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token punctuation">:</span>
|
|
<span class="token operator"><</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span>a onClick<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> this<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 operator">></span>Edit<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
}
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">,</span>
|
|
}<span class="token punctuation">]</span><span class="token comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span>state <span class="token operator">=</span> {
|
|
data<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> {
|
|
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>
|
|
age<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>
|
|
address<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 comment" spellcheck="true">;</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 keyword">const</span> { editable<span class="token punctuation">,</span> status } <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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>typeof editable <span class="token operator">==</span><span class="token operator">=</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> {
|
|
return text<span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
return <span class="token punctuation">(</span><span class="token operator"><</span>EditableCell
|
|
editable<span class="token operator">=</span>{editable}
|
|
value<span class="token operator">=</span>{text}
|
|
onChange<span class="token operator">=</span>{value <span class="token operator">=</span><span class="token operator">></span> this<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>}
|
|
status<span class="token operator">=</span>{status}
|
|
<span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</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 keyword">const</span> { data } <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token comment" spellcheck="true">;</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 comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>{ data }<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
<span class="token function">edit</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span> {
|
|
<span class="token keyword">const</span> { data } <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token comment" spellcheck="true">;</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 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 operator">&</span> typeof 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> {
|
|
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 comment" spellcheck="true">;</span>
|
|
}
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>{ data }<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</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 keyword">const</span> { data } <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token comment" spellcheck="true">;</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 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 operator">&</span> typeof 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> {
|
|
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 comment" spellcheck="true">;</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 comment" spellcheck="true">;</span>
|
|
}
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 operator">=</span><span class="token operator">></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 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 operator">&</span> typeof 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> {
|
|
delete 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 comment" spellcheck="true">;</span>
|
|
}
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
<span class="token keyword">const</span> { data } <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token comment" spellcheck="true">;</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 keyword">const</span> obj <span class="token operator">=</span> {}<span class="token comment" spellcheck="true">;</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> {
|
|
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 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 comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
return obj<span class="token comment" spellcheck="true">;</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</span> this<span class="token punctuation">.</span>columns<span class="token comment" spellcheck="true">;</span>
|
|
return <span class="token operator"><</span>Table bordered dataSource<span class="token operator">=</span>{dataSource} columns<span class="token operator">=</span>{columns} <span class="token operator">/</span><span class="token operator">></span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
}
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>EditableTable <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div><div class="highlight" data-reactid="3947"><pre data-reactid="3948"><code class="css" data-reactid="3949"><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-dynamic-settings" data-reactid="3950"><section class="code-box-demo" data-reactid="3951"><div data-reactid="3952"><div class="components-table-demo-control-bar" data-reactid="3953"><form class="ant-form ant-form-inline" data-reactid="3954"><div class="ant-row ant-form-item" data-reactid="3955"><div class="ant-form-item-label" data-reactid="3956"><label class="" data-reactid="3957">Bordered</label></div><div class="" data-reactid="3958"><div class="ant-form-item-control " data-reactid="3959"><span class="ant-switch" tabindex="0" data-reactid="3960"><span class="ant-switch-inner" data-reactid="3961"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="3962"><div class="ant-form-item-label" data-reactid="3963"><label class="" data-reactid="3964">loading</label></div><div class="" data-reactid="3965"><div class="ant-form-item-control " data-reactid="3966"><span class="ant-switch" tabindex="0" data-reactid="3967"><span class="ant-switch-inner" data-reactid="3968"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="3969"><div class="ant-form-item-label" data-reactid="3970"><label class="" data-reactid="3971">Pagination</label></div><div class="" data-reactid="3972"><div class="ant-form-item-control " data-reactid="3973"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="3974"><span class="ant-switch-inner" data-reactid="3975"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="3976"><div class="ant-form-item-label" data-reactid="3977"><label class="" data-reactid="3978">Title</label></div><div class="" data-reactid="3979"><div class="ant-form-item-control " data-reactid="3980"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="3981"><span class="ant-switch-inner" data-reactid="3982"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="3983"><div class="ant-form-item-label" data-reactid="3984"><label class="" data-reactid="3985">Column Header</label></div><div class="" data-reactid="3986"><div class="ant-form-item-control " data-reactid="3987"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="3988"><span class="ant-switch-inner" data-reactid="3989"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="3990"><div class="ant-form-item-label" data-reactid="3991"><label class="" data-reactid="3992">Footer</label></div><div class="" data-reactid="3993"><div class="ant-form-item-control " data-reactid="3994"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="3995"><span class="ant-switch-inner" data-reactid="3996"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="3997"><div class="ant-form-item-label" data-reactid="3998"><label class="" data-reactid="3999">Expandable</label></div><div class="" data-reactid="4000"><div class="ant-form-item-control " data-reactid="4001"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4002"><span class="ant-switch-inner" data-reactid="4003"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4004"><div class="ant-form-item-label" data-reactid="4005"><label class="" data-reactid="4006">Checkbox</label></div><div class="" data-reactid="4007"><div class="ant-form-item-control " data-reactid="4008"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="4009"><span class="ant-switch-inner" data-reactid="4010"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4011"><div class="ant-form-item-label" data-reactid="4012"><label class="" data-reactid="4013">Fixed Header</label></div><div class="" data-reactid="4014"><div class="ant-form-item-control " data-reactid="4015"><span class="ant-switch" tabindex="0" data-reactid="4016"><span class="ant-switch-inner" data-reactid="4017"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="4018"><div class="ant-form-item-label" data-reactid="4019"><label class="" data-reactid="4020">Size</label></div><div class="" data-reactid="4021"><div class="ant-form-item-control " data-reactid="4022"><div class="ant-radio-group ant-radio-group-default" data-reactid="4023"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" data-reactid="4024"><span class="ant-radio-button ant-radio-button-checked ant-radio-button ant-radio-button-checked ant-radio-button-checked-1" data-reactid="4025"><span class="ant-radio-button-inner" data-reactid="4026"></span><input type="radio" class="ant-radio-button-input" checked="" data-reactid="4027"/></span><span data-reactid="4028">Default</span></label><label class="ant-radio-button-wrapper" data-reactid="4029"><span class="ant-radio-button" data-reactid="4030"><span class="ant-radio-button-inner" data-reactid="4031"></span><input type="radio" class="ant-radio-button-input" data-reactid="4032"/></span><span data-reactid="4033">Middle</span></label><label class="ant-radio-button-wrapper" data-reactid="4034"><span class="ant-radio-button" data-reactid="4035"><span class="ant-radio-button-inner" data-reactid="4036"></span><input type="radio" class="ant-radio-button-input" data-reactid="4037"/></span><span data-reactid="4038">Small</span></label></div></div></div></div></form></div><div class=" clearfix" data-reactid="4039"><div class="ant-spin-nested-loading" data-reactid="4040"><div class="ant-spin-container" data-reactid="4041"><div class="ant-table ant-table-default ant-table-scroll-position-left" data-reactid="4042"><div class="ant-table-title" data-reactid="4043">Here is title</div><div class="ant-table-content" data-reactid="4044"><div class="" data-reactid="4045"><span data-reactid="4046"><div class="ant-table-body" data-reactid="4047"><table class="" data-reactid="4048"><colgroup data-reactid="4049"><col class="ant-table-expand-icon-col" data-reactid="4050"/><col data-reactid="4051"/><col style="width:150px;min-width:150px;" data-reactid="4052"/><col style="width:70px;min-width:70px;" data-reactid="4053"/><col data-reactid="4054"/><col style="width:360px;min-width:360px;" data-reactid="4055"/></colgroup><thead class="ant-table-thead" data-reactid="4056"><tr data-reactid="4057"><th class="ant-table-expand-icon-th" title="" rowspan="1" data-reactid="4058"></th><th class="ant-table-selection-column" data-reactid="4059"><span data-reactid="4060"><label class="ant-checkbox-wrapper" data-reactid="4061"><span class="ant-checkbox" data-reactid="4062"><span class="ant-checkbox-inner" data-reactid="4063"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4064"/></span></label></span></th><th class="" data-reactid="4065"><span data-reactid="4066"><!-- react-text: 4067 -->Name<!-- /react-text --></span></th><th class="" data-reactid="4068"><span data-reactid="4069"><!-- react-text: 4070 -->Age<!-- /react-text --></span></th><th class="" data-reactid="4071"><span data-reactid="4072"><!-- react-text: 4073 -->Address<!-- /react-text --></span></th><th class="" data-reactid="4074"><span data-reactid="4075"><!-- react-text: 4076 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="4077"><tr class="ant-table-row ant-table-row-level-0" data-reactid="4078"><td class="ant-table-row-expand-icon-cell" data-reactid="4079"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4080"></span></td><td class="ant-table-selection-column" data-reactid="4081"><span data-reactid="4082"><label class="ant-checkbox-wrapper" data-reactid="4083"><span class="ant-checkbox" data-reactid="4084"><span class="ant-checkbox-inner" data-reactid="4085"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4086"/></span></label></span></td><td class="" data-reactid="4087"><a href="#" data-reactid="4088">John Brown</a></td><td class="" data-reactid="4089"><!-- react-text: 4090 -->12<!-- /react-text --></td><td class="" data-reactid="4091"><!-- react-text: 4092 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="4093"><span data-reactid="4094"><a href="#" data-reactid="4095"><!-- react-text: 4096 -->Action 一 <!-- /react-text --><!-- react-text: 4097 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4098"></span><a href="#" data-reactid="4099">Delete</a><span class="ant-divider" data-reactid="4100"></span><a href="#" class="ant-dropdown-link" data-reactid="4101"><!-- react-text: 4102 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4103"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4104"><td class="ant-table-row-expand-icon-cell" data-reactid="4105"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4106"></span></td><td class="ant-table-selection-column" data-reactid="4107"><span data-reactid="4108"><label class="ant-checkbox-wrapper" data-reactid="4109"><span class="ant-checkbox" data-reactid="4110"><span class="ant-checkbox-inner" data-reactid="4111"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4112"/></span></label></span></td><td class="" data-reactid="4113"><a href="#" data-reactid="4114">John Brown</a></td><td class="" data-reactid="4115"><!-- react-text: 4116 -->22<!-- /react-text --></td><td class="" data-reactid="4117"><!-- react-text: 4118 -->New York No. 2 Lake Park<!-- /react-text --></td><td class="" data-reactid="4119"><span data-reactid="4120"><a href="#" data-reactid="4121"><!-- react-text: 4122 -->Action 一 <!-- /react-text --><!-- react-text: 4123 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4124"></span><a href="#" data-reactid="4125">Delete</a><span class="ant-divider" data-reactid="4126"></span><a href="#" class="ant-dropdown-link" data-reactid="4127"><!-- react-text: 4128 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4129"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4130"><td class="ant-table-row-expand-icon-cell" data-reactid="4131"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4132"></span></td><td class="ant-table-selection-column" data-reactid="4133"><span data-reactid="4134"><label class="ant-checkbox-wrapper" data-reactid="4135"><span class="ant-checkbox" data-reactid="4136"><span class="ant-checkbox-inner" data-reactid="4137"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4138"/></span></label></span></td><td class="" data-reactid="4139"><a href="#" data-reactid="4140">John Brown</a></td><td class="" data-reactid="4141"><!-- react-text: 4142 -->32<!-- /react-text --></td><td class="" data-reactid="4143"><!-- react-text: 4144 -->New York No. 3 Lake Park<!-- /react-text --></td><td class="" data-reactid="4145"><span data-reactid="4146"><a href="#" data-reactid="4147"><!-- react-text: 4148 -->Action 一 <!-- /react-text --><!-- react-text: 4149 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4150"></span><a href="#" data-reactid="4151">Delete</a><span class="ant-divider" data-reactid="4152"></span><a href="#" class="ant-dropdown-link" data-reactid="4153"><!-- react-text: 4154 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4155"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4156"><td class="ant-table-row-expand-icon-cell" data-reactid="4157"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4158"></span></td><td class="ant-table-selection-column" data-reactid="4159"><span data-reactid="4160"><label class="ant-checkbox-wrapper" data-reactid="4161"><span class="ant-checkbox" data-reactid="4162"><span class="ant-checkbox-inner" data-reactid="4163"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4164"/></span></label></span></td><td class="" data-reactid="4165"><a href="#" data-reactid="4166">John Brown</a></td><td class="" data-reactid="4167"><!-- react-text: 4168 -->42<!-- /react-text --></td><td class="" data-reactid="4169"><!-- react-text: 4170 -->New York No. 4 Lake Park<!-- /react-text --></td><td class="" data-reactid="4171"><span data-reactid="4172"><a href="#" data-reactid="4173"><!-- react-text: 4174 -->Action 一 <!-- /react-text --><!-- react-text: 4175 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4176"></span><a href="#" data-reactid="4177">Delete</a><span class="ant-divider" data-reactid="4178"></span><a href="#" class="ant-dropdown-link" data-reactid="4179"><!-- react-text: 4180 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4181"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4182"><td class="ant-table-row-expand-icon-cell" data-reactid="4183"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4184"></span></td><td class="ant-table-selection-column" data-reactid="4185"><span data-reactid="4186"><label class="ant-checkbox-wrapper" data-reactid="4187"><span class="ant-checkbox" data-reactid="4188"><span class="ant-checkbox-inner" data-reactid="4189"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4190"/></span></label></span></td><td class="" data-reactid="4191"><a href="#" data-reactid="4192">John Brown</a></td><td class="" data-reactid="4193"><!-- react-text: 4194 -->52<!-- /react-text --></td><td class="" data-reactid="4195"><!-- react-text: 4196 -->New York No. 5 Lake Park<!-- /react-text --></td><td class="" data-reactid="4197"><span data-reactid="4198"><a href="#" data-reactid="4199"><!-- react-text: 4200 -->Action 一 <!-- /react-text --><!-- react-text: 4201 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4202"></span><a href="#" data-reactid="4203">Delete</a><span class="ant-divider" data-reactid="4204"></span><a href="#" class="ant-dropdown-link" data-reactid="4205"><!-- react-text: 4206 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4207"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4208"><td class="ant-table-row-expand-icon-cell" data-reactid="4209"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4210"></span></td><td class="ant-table-selection-column" data-reactid="4211"><span data-reactid="4212"><label class="ant-checkbox-wrapper" data-reactid="4213"><span class="ant-checkbox" data-reactid="4214"><span class="ant-checkbox-inner" data-reactid="4215"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4216"/></span></label></span></td><td class="" data-reactid="4217"><a href="#" data-reactid="4218">John Brown</a></td><td class="" data-reactid="4219"><!-- react-text: 4220 -->62<!-- /react-text --></td><td class="" data-reactid="4221"><!-- react-text: 4222 -->New York No. 6 Lake Park<!-- /react-text --></td><td class="" data-reactid="4223"><span data-reactid="4224"><a href="#" data-reactid="4225"><!-- react-text: 4226 -->Action 一 <!-- /react-text --><!-- react-text: 4227 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4228"></span><a href="#" data-reactid="4229">Delete</a><span class="ant-divider" data-reactid="4230"></span><a href="#" class="ant-dropdown-link" data-reactid="4231"><!-- react-text: 4232 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4233"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4234"><td class="ant-table-row-expand-icon-cell" data-reactid="4235"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4236"></span></td><td class="ant-table-selection-column" data-reactid="4237"><span data-reactid="4238"><label class="ant-checkbox-wrapper" data-reactid="4239"><span class="ant-checkbox" data-reactid="4240"><span class="ant-checkbox-inner" data-reactid="4241"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4242"/></span></label></span></td><td class="" data-reactid="4243"><a href="#" data-reactid="4244">John Brown</a></td><td class="" data-reactid="4245"><!-- react-text: 4246 -->72<!-- /react-text --></td><td class="" data-reactid="4247"><!-- react-text: 4248 -->New York No. 7 Lake Park<!-- /react-text --></td><td class="" data-reactid="4249"><span data-reactid="4250"><a href="#" data-reactid="4251"><!-- react-text: 4252 -->Action 一 <!-- /react-text --><!-- react-text: 4253 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4254"></span><a href="#" data-reactid="4255">Delete</a><span class="ant-divider" data-reactid="4256"></span><a href="#" class="ant-dropdown-link" data-reactid="4257"><!-- react-text: 4258 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4259"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4260"><td class="ant-table-row-expand-icon-cell" data-reactid="4261"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4262"></span></td><td class="ant-table-selection-column" data-reactid="4263"><span data-reactid="4264"><label class="ant-checkbox-wrapper" data-reactid="4265"><span class="ant-checkbox" data-reactid="4266"><span class="ant-checkbox-inner" data-reactid="4267"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4268"/></span></label></span></td><td class="" data-reactid="4269"><a href="#" data-reactid="4270">John Brown</a></td><td class="" data-reactid="4271"><!-- react-text: 4272 -->82<!-- /react-text --></td><td class="" data-reactid="4273"><!-- react-text: 4274 -->New York No. 8 Lake Park<!-- /react-text --></td><td class="" data-reactid="4275"><span data-reactid="4276"><a href="#" data-reactid="4277"><!-- react-text: 4278 -->Action 一 <!-- /react-text --><!-- react-text: 4279 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4280"></span><a href="#" data-reactid="4281">Delete</a><span class="ant-divider" data-reactid="4282"></span><a href="#" class="ant-dropdown-link" data-reactid="4283"><!-- react-text: 4284 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4285"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4286"><td class="ant-table-row-expand-icon-cell" data-reactid="4287"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4288"></span></td><td class="ant-table-selection-column" data-reactid="4289"><span data-reactid="4290"><label class="ant-checkbox-wrapper" data-reactid="4291"><span class="ant-checkbox" data-reactid="4292"><span class="ant-checkbox-inner" data-reactid="4293"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4294"/></span></label></span></td><td class="" data-reactid="4295"><a href="#" data-reactid="4296">John Brown</a></td><td class="" data-reactid="4297"><!-- react-text: 4298 -->92<!-- /react-text --></td><td class="" data-reactid="4299"><!-- react-text: 4300 -->New York No. 9 Lake Park<!-- /react-text --></td><td class="" data-reactid="4301"><span data-reactid="4302"><a href="#" data-reactid="4303"><!-- react-text: 4304 -->Action 一 <!-- /react-text --><!-- react-text: 4305 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4306"></span><a href="#" data-reactid="4307">Delete</a><span class="ant-divider" data-reactid="4308"></span><a href="#" class="ant-dropdown-link" data-reactid="4309"><!-- react-text: 4310 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4311"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4312"><td class="ant-table-row-expand-icon-cell" data-reactid="4313"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4314"></span></td><td class="ant-table-selection-column" data-reactid="4315"><span data-reactid="4316"><label class="ant-checkbox-wrapper" data-reactid="4317"><span class="ant-checkbox" data-reactid="4318"><span class="ant-checkbox-inner" data-reactid="4319"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4320"/></span></label></span></td><td class="" data-reactid="4321"><a href="#" data-reactid="4322">John Brown</a></td><td class="" data-reactid="4323"><!-- react-text: 4324 -->102<!-- /react-text --></td><td class="" data-reactid="4325"><!-- react-text: 4326 -->New York No. 10 Lake Park<!-- /react-text --></td><td class="" data-reactid="4327"><span data-reactid="4328"><a href="#" data-reactid="4329"><!-- react-text: 4330 -->Action 一 <!-- /react-text --><!-- react-text: 4331 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4332"></span><a href="#" data-reactid="4333">Delete</a><span class="ant-divider" data-reactid="4334"></span><a href="#" class="ant-dropdown-link" data-reactid="4335"><!-- react-text: 4336 -->More actions <!-- /react-text --><i class="anticon anticon-down" data-reactid="4337"></i></a></span></td></tr></tbody></table></div></span><div class="ant-table-footer" data-reactid="4338">Here is footer</div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="4339"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="4340"><a data-reactid="4341"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="4342"><a data-reactid="4343">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="4344"><a data-reactid="4345"></a></li><!-- react-empty: 4346 --></ul></div></div></div></div><style data-reactid="4347">
|
|
.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="4348"><div class="code-box-title" data-reactid="4349"><a href="#components-table-demo-dynamic-settings" data-reactid="4350">Dynamic Settings</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/dynamic-settings.md" data-reactid="4351"><i class="anticon anticon-edit" data-reactid="4352"></i></a></div><div data-reactid="4353"><p data-reactid="4354"><!-- react-text: 4355 -->Select different settings to see the result.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="4356"></i></section><section class="highlight-wrapper" data-reactid="4357"><div class="highlight" data-reactid="4358"><pre class="language-__react" data-reactid="4359"><code data-reactid="4360">import { Table<span class="token punctuation">,</span> Icon<span class="token punctuation">,</span> <span class="token keyword">Switch</span><span class="token punctuation">,</span> Radio<span class="token punctuation">,</span> Form } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token comment" spellcheck="true">;</span>
|
|
|
|
<span class="token keyword">const</span> columns <span class="token operator">=</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 operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>{text}<span class="token operator"><</span><span class="token operator">/</span>a<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">'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> {
|
|
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> {
|
|
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 operator"><</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>Action 一 {record<span class="token punctuation">.</span>name}<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"ant-divider"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span><span class="token operator">></span>Delete<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"ant-divider"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#"</span> className<span class="token operator">=</span><span class="token string">"ant-dropdown-link"</span><span class="token operator">></span>
|
|
More actions <span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"down"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
}<span class="token punctuation">]</span><span class="token comment" spellcheck="true">;</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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">for</span> <span class="token punctuation">(</span>let i <span class="token operator">=</span> <span class="token number">1</span><span class="token comment" spellcheck="true">; i <= 10; i++) {</span>
|
|
data<span class="token punctuation">.</span><span class="token function">push</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 number">2</span>`<span class="token punctuation">,</span>
|
|
address<span class="token punctuation">:</span> `New York No<span class="token punctuation">.</span> ${i} Lake Park`<span class="token punctuation">,</span>
|
|
description<span class="token punctuation">:</span> `My name is John Brown<span class="token punctuation">,</span> I am ${i}<span class="token number">2</span> years old<span class="token punctuation">,</span> living <span class="token keyword">in</span> New York No<span class="token punctuation">.</span> ${i} Lake Park<span class="token punctuation">.</span>`<span class="token punctuation">,</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</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 operator"><</span>p<span class="token operator">></span>{record<span class="token punctuation">.</span>description}<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span><span class="token comment" spellcheck="true">;</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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> showHeader <span class="token operator">=</span> <span class="token boolean">true</span><span class="token comment" spellcheck="true">;</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 comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> scroll <span class="token operator">=</span> { y<span class="token punctuation">:</span> <span class="token number">240</span> }<span class="token comment" spellcheck="true">;</span>
|
|
|
|
class Demo extends React<span class="token punctuation">.</span>Component {
|
|
state <span class="token operator">=</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>
|
|
scroll<span class="token punctuation">:</span> undefined<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> {
|
|
return <span class="token punctuation">(</span>enable<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</span>
|
|
}<span class="token comment" spellcheck="true">;</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> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</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> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</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> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</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> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</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> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</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> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>{ rowSelection<span class="token punctuation">:</span> enable <span class="token operator">?</span> {} <span class="token punctuation">:</span> undefined }<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</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> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</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 comment" spellcheck="true">;</span>
|
|
}
|
|
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
<span class="token keyword">const</span> state <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token comment" spellcheck="true">;</span>
|
|
return <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"components-table-demo-control-bar"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Form inline<span class="token operator">></span>
|
|
<span class="token operator"><</span>FormItem label<span class="token operator">=</span><span class="token string">"Bordered"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token keyword">Switch</span> checked<span class="token operator">=</span>{state<span class="token punctuation">.</span>bordered} onChange<span class="token operator">=</span>{this<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 operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>FormItem<span class="token operator">></span>
|
|
<span class="token operator"><</span>FormItem label<span class="token operator">=</span><span class="token string">"loading"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token keyword">Switch</span> checked<span class="token operator">=</span>{state<span class="token punctuation">.</span>loading} onChange<span class="token operator">=</span>{this<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 operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>FormItem<span class="token operator">></span>
|
|
<span class="token operator"><</span>FormItem label<span class="token operator">=</span><span class="token string">"Pagination"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token keyword">Switch</span> checked<span class="token operator">=</span>{state<span class="token punctuation">.</span>pagination} onChange<span class="token operator">=</span>{this<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 operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>FormItem<span class="token operator">></span>
|
|
<span class="token operator"><</span>FormItem label<span class="token operator">=</span><span class="token string">"Title"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token keyword">Switch</span> checked<span class="token operator">=</span>{!!state<span class="token punctuation">.</span>title} onChange<span class="token operator">=</span>{this<span class="token punctuation">.</span>handleTitleChange} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>FormItem<span class="token operator">></span>
|
|
<span class="token operator"><</span>FormItem label<span class="token operator">=</span><span class="token string">"Column Header"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token keyword">Switch</span> checked<span class="token operator">=</span>{!!state<span class="token punctuation">.</span>showHeader} onChange<span class="token operator">=</span>{this<span class="token punctuation">.</span>handleHeaderChange} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>FormItem<span class="token operator">></span>
|
|
<span class="token operator"><</span>FormItem label<span class="token operator">=</span><span class="token string">"Footer"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token keyword">Switch</span> checked<span class="token operator">=</span>{!!state<span class="token punctuation">.</span>footer} onChange<span class="token operator">=</span>{this<span class="token punctuation">.</span>handleFooterChange} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>FormItem<span class="token operator">></span>
|
|
<span class="token operator"><</span>FormItem label<span class="token operator">=</span><span class="token string">"Expandable"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token keyword">Switch</span> checked<span class="token operator">=</span>{!!state<span class="token punctuation">.</span>expandedRowRender} onChange<span class="token operator">=</span>{this<span class="token punctuation">.</span>handleExpandChange} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>FormItem<span class="token operator">></span>
|
|
<span class="token operator"><</span>FormItem label<span class="token operator">=</span><span class="token string">"Checkbox"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token keyword">Switch</span> checked<span class="token operator">=</span>{!!state<span class="token punctuation">.</span>rowSelection} onChange<span class="token operator">=</span>{this<span class="token punctuation">.</span>handleRowSelectionChange} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>FormItem<span class="token operator">></span>
|
|
<span class="token operator"><</span>FormItem label<span class="token operator">=</span><span class="token string">"Fixed Header"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token keyword">Switch</span> checked<span class="token operator">=</span>{!!state<span class="token punctuation">.</span>scroll} onChange<span class="token operator">=</span>{this<span class="token punctuation">.</span>handleScollChange} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>FormItem<span class="token operator">></span>
|
|
<span class="token operator"><</span>FormItem label<span class="token operator">=</span><span class="token string">"Size"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Radio<span class="token punctuation">.</span>Group size<span class="token operator">=</span><span class="token string">"default"</span> value<span class="token operator">=</span>{state<span class="token punctuation">.</span>size} onChange<span class="token operator">=</span>{this<span class="token punctuation">.</span>handleSizeChange}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Radio<span class="token punctuation">.</span>Button value<span class="token operator">=</span><span class="token string">"default"</span><span class="token operator">></span><span class="token keyword">Default</span><span class="token operator"><</span><span class="token operator">/</span>Radio<span class="token punctuation">.</span>Button<span class="token operator">></span>
|
|
<span class="token operator"><</span>Radio<span class="token punctuation">.</span>Button value<span class="token operator">=</span><span class="token string">"middle"</span><span class="token operator">></span>Middle<span class="token operator"><</span><span class="token operator">/</span>Radio<span class="token punctuation">.</span>Button<span class="token operator">></span>
|
|
<span class="token operator"><</span>Radio<span class="token punctuation">.</span>Button value<span class="token operator">=</span><span class="token string">"small"</span><span class="token operator">></span>Small<span class="token operator"><</span><span class="token operator">/</span>Radio<span class="token punctuation">.</span>Button<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Radio<span class="token punctuation">.</span>Group<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>FormItem<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Form<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span>Table {<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>this<span class="token punctuation">.</span>state} columns<span class="token operator">=</span>{columns} dataSource<span class="token operator">=</span>{data} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
}
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>Demo <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="4361"><h2 id="API" data-reactid="4362"><span data-reactid="4363"><!-- react-text: 4364 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="4365">#</a></h2><h3 id="Table" data-reactid="4366"><span data-reactid="4367"><!-- react-text: 4368 -->Table<!-- /react-text --></span><a href="#Table" class="anchor" data-reactid="4369">#</a></h3><table data-reactid="4370"><thead data-reactid="4371"><tr data-reactid="4372"><th data-reactid="4373"><!-- react-text: 4374 -->Property<!-- /react-text --></th><th data-reactid="4375"><!-- react-text: 4376 -->Description<!-- /react-text --></th><th data-reactid="4377"><!-- react-text: 4378 -->Type<!-- /react-text --></th><th data-reactid="4379"><!-- react-text: 4380 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="4381"><tr data-reactid="4382"><td data-reactid="4383"><!-- react-text: 4384 -->rowSelection<!-- /react-text --></td><td data-reactid="4385"><!-- react-text: 4386 -->row selection <!-- /react-text --><a href="#rowSelection" data-reactid="4387"><!-- react-text: 4388 -->config<!-- /react-text --></a></td><td data-reactid="4389"><!-- react-text: 4390 -->object<!-- /react-text --></td><td data-reactid="4391"><!-- react-text: 4392 -->null<!-- /react-text --></td></tr><tr data-reactid="4393"><td data-reactid="4394"><!-- react-text: 4395 -->pagination<!-- /react-text --></td><td data-reactid="4396"><!-- react-text: 4397 -->pagination <!-- /react-text --><a href="/components/pagination/" data-reactid="4398">config</a><!-- react-text: 4399 -->, hide it via setting to <!-- /react-text --><code data-reactid="4400"><!-- react-text: 4401 -->false<!-- /react-text --></code></td><td data-reactid="4402"><!-- react-text: 4403 -->object<!-- /react-text --></td><td data-reactid="4404"></td></tr><tr data-reactid="4405"><td data-reactid="4406"><!-- react-text: 4407 -->size<!-- /react-text --></td><td data-reactid="4408"><!-- react-text: 4409 -->size of table: <!-- /react-text --><code data-reactid="4410"><!-- react-text: 4411 -->default<!-- /react-text --></code><!-- react-text: 4412 --> or <!-- /react-text --><code data-reactid="4413"><!-- react-text: 4414 -->small<!-- /react-text --></code></td><td data-reactid="4415"><!-- react-text: 4416 -->string<!-- /react-text --></td><td data-reactid="4417"><code data-reactid="4418"><!-- react-text: 4419 -->default<!-- /react-text --></code></td></tr><tr data-reactid="4420"><td data-reactid="4421"><!-- react-text: 4422 -->dataSource<!-- /react-text --></td><td data-reactid="4423"><!-- react-text: 4424 -->data record array to be rendered<!-- /react-text --></td><td data-reactid="4425"><!-- react-text: 4426 -->any[]<!-- /react-text --></td><td data-reactid="4427"></td></tr><tr data-reactid="4428"><td data-reactid="4429"><!-- react-text: 4430 -->columns<!-- /react-text --></td><td data-reactid="4431"><!-- react-text: 4432 -->columns of table<!-- /react-text --></td><td data-reactid="4433"><a href="https://git.io/vMMXC" data-reactid="4434"><!-- react-text: 4435 -->ColumnProps<!-- /react-text --></a><!-- react-text: 4436 -->[]<!-- /react-text --></td><td data-reactid="4437"><!-- react-text: 4438 -->-<!-- /react-text --></td></tr><tr data-reactid="4439"><td data-reactid="4440"><!-- react-text: 4441 -->rowKey<!-- /react-text --></td><td data-reactid="4442"><!-- react-text: 4443 -->get row's key, could be a string or function<!-- /react-text --></td><td data-reactid="4444"><!-- react-text: 4445 -->string<!-- /react-text --><!-- react-text: 4446 -->|<!-- /react-text --><!-- react-text: 4447 -->Function(record):string<!-- /react-text --></td><td data-reactid="4448"><!-- react-text: 4449 -->'key'<!-- /react-text --></td></tr><tr data-reactid="4450"><td data-reactid="4451"><!-- react-text: 4452 -->rowClassName<!-- /react-text --></td><td data-reactid="4453"><!-- react-text: 4454 -->get row's className<!-- /react-text --></td><td data-reactid="4455"><!-- react-text: 4456 -->Function(record, index):string<!-- /react-text --></td><td data-reactid="4457"><!-- react-text: 4458 -->-<!-- /react-text --></td></tr><tr data-reactid="4459"><td data-reactid="4460"><!-- react-text: 4461 -->expandedRowRender<!-- /react-text --></td><td data-reactid="4462"><!-- react-text: 4463 -->expanded container render for each row<!-- /react-text --></td><td data-reactid="4464"><!-- react-text: 4465 -->Function<!-- /react-text --></td><td data-reactid="4466"><!-- react-text: 4467 -->-<!-- /react-text --></td></tr><tr data-reactid="4468"><td data-reactid="4469"><!-- react-text: 4470 -->defaultExpandedRowKeys<!-- /react-text --></td><td data-reactid="4471"><!-- react-text: 4472 -->initial expanded row keys<!-- /react-text --></td><td data-reactid="4473"><!-- react-text: 4474 -->string[]<!-- /react-text --></td><td data-reactid="4475"><!-- react-text: 4476 -->-<!-- /react-text --></td></tr><tr data-reactid="4477"><td data-reactid="4478"><!-- react-text: 4479 -->expandedRowKeys<!-- /react-text --></td><td data-reactid="4480"><!-- react-text: 4481 -->current expanded rows keys<!-- /react-text --></td><td data-reactid="4482"><!-- react-text: 4483 -->string[]<!-- /react-text --></td><td data-reactid="4484"><!-- react-text: 4485 -->-<!-- /react-text --></td></tr><tr data-reactid="4486"><td data-reactid="4487"><!-- react-text: 4488 -->defaultExpandAllRows<!-- /react-text --></td><td data-reactid="4489"><!-- react-text: 4490 -->expand all rows initially<!-- /react-text --></td><td data-reactid="4491"><!-- react-text: 4492 -->boolean<!-- /react-text --></td><td data-reactid="4493"><!-- react-text: 4494 -->false<!-- /react-text --></td></tr><tr data-reactid="4495"><td data-reactid="4496"><!-- react-text: 4497 -->onExpandedRowsChange<!-- /react-text --></td><td data-reactid="4498"><!-- react-text: 4499 -->function to call when the expanded rows change<!-- /react-text --></td><td data-reactid="4500"><!-- react-text: 4501 -->Function(expandedRows)<!-- /react-text --></td><td data-reactid="4502"></td></tr><tr data-reactid="4503"><td data-reactid="4504"><!-- react-text: 4505 -->onExpand<!-- /react-text --></td><td data-reactid="4506"><!-- react-text: 4507 -->function to call when click expand icon<!-- /react-text --></td><td data-reactid="4508"><!-- react-text: 4509 -->Function(expanded, record)<!-- /react-text --></td><td data-reactid="4510"></td></tr><tr data-reactid="4511"><td data-reactid="4512"><!-- react-text: 4513 -->onChange<!-- /react-text --></td><td data-reactid="4514"><!-- react-text: 4515 -->callback that is called when pagination, filters, sorter is changed<!-- /react-text --></td><td data-reactid="4516"><!-- react-text: 4517 -->Function(pagination, filters, sorter)<!-- /react-text --></td><td data-reactid="4518"></td></tr><tr data-reactid="4519"><td data-reactid="4520"><!-- react-text: 4521 -->loading<!-- /react-text --></td><td data-reactid="4522"><!-- react-text: 4523 -->loading status of table<!-- /react-text --></td><td data-reactid="4524"><!-- react-text: 4525 -->boolean<!-- /react-text --></td><td data-reactid="4526"><!-- react-text: 4527 -->false<!-- /react-text --></td></tr><tr data-reactid="4528"><td data-reactid="4529"><!-- react-text: 4530 -->locale<!-- /react-text --></td><td data-reactid="4531"><!-- react-text: 4532 -->i18n text include filter, sort, empty text...etc<!-- /react-text --></td><td data-reactid="4533"><!-- react-text: 4534 -->object<!-- /react-text --></td><td data-reactid="4535"><!-- react-text: 4536 -->filterConfirm: 'Ok' <!-- /react-text --><br data-reactid="4537"/><!-- react-text: 4538 --> filterReset: 'Reset' <!-- /react-text --><br data-reactid="4539"/><!-- react-text: 4540 --> emptyText: 'No Data' <!-- /react-text --><br data-reactid="4541"/><!-- react-text: 4542 --> <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511" data-reactid="4543"><!-- react-text: 4544 -->Default<!-- /react-text --></a></td></tr><tr data-reactid="4545"><td data-reactid="4546"><!-- react-text: 4547 -->indentSize<!-- /react-text --></td><td data-reactid="4548"><!-- react-text: 4549 -->index pixel size of tree data<!-- /react-text --></td><td data-reactid="4550"><!-- react-text: 4551 -->number<!-- /react-text --></td><td data-reactid="4552"><!-- react-text: 4553 -->15<!-- /react-text --></td></tr><tr data-reactid="4554"><td data-reactid="4555"><!-- react-text: 4556 -->onRowClick<!-- /react-text --></td><td data-reactid="4557"><!-- react-text: 4558 -->callback that is called when click a row<!-- /react-text --></td><td data-reactid="4559"><!-- react-text: 4560 -->Function(record, index)<!-- /react-text --></td><td data-reactid="4561"><!-- react-text: 4562 -->-<!-- /react-text --></td></tr><tr data-reactid="4563"><td data-reactid="4564"><!-- react-text: 4565 -->bordered<!-- /react-text --></td><td data-reactid="4566"><!-- react-text: 4567 -->whether to show table border completely<!-- /react-text --></td><td data-reactid="4568"><!-- react-text: 4569 -->boolean<!-- /react-text --></td><td data-reactid="4570"><!-- react-text: 4571 -->false<!-- /react-text --></td></tr><tr data-reactid="4572"><td data-reactid="4573"><!-- react-text: 4574 -->showHeader<!-- /react-text --></td><td data-reactid="4575"><!-- react-text: 4576 -->whether to show table header<!-- /react-text --></td><td data-reactid="4577"><!-- react-text: 4578 -->boolean<!-- /react-text --></td><td data-reactid="4579"><!-- react-text: 4580 -->true<!-- /react-text --></td></tr><tr data-reactid="4581"><td data-reactid="4582"><!-- react-text: 4583 -->footer<!-- /react-text --></td><td data-reactid="4584"><!-- react-text: 4585 -->table footer renderer<!-- /react-text --></td><td data-reactid="4586"><!-- react-text: 4587 -->Function(currentPageData)<!-- /react-text --></td><td data-reactid="4588"></td></tr><tr data-reactid="4589"><td data-reactid="4590"><!-- react-text: 4591 -->title<!-- /react-text --></td><td data-reactid="4592"><!-- react-text: 4593 -->table title renderer<!-- /react-text --></td><td data-reactid="4594"><!-- react-text: 4595 -->Function(currentPageData)<!-- /react-text --></td><td data-reactid="4596"></td></tr><tr data-reactid="4597"><td data-reactid="4598"><!-- react-text: 4599 -->scroll<!-- /react-text --></td><td data-reactid="4600"><!-- react-text: 4601 -->whether table can be scroll in x/y direction, <!-- /react-text --><code data-reactid="4602"><!-- react-text: 4603 -->x<!-- /react-text --></code><!-- react-text: 4604 --> or <!-- /react-text --><code data-reactid="4605"><!-- react-text: 4606 -->y<!-- /react-text --></code><!-- react-text: 4607 --> can be a number that indicated the width and height of table body<!-- /react-text --></td><td data-reactid="4608"><!-- react-text: 4609 -->object<!-- /react-text --></td><td data-reactid="4610"><!-- react-text: 4611 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="Column" data-reactid="4612"><span data-reactid="4613"><!-- react-text: 4614 -->Column<!-- /react-text --></span><a href="#Column" class="anchor" data-reactid="4615">#</a></h3><p data-reactid="4616"><!-- react-text: 4617 -->One of Property <!-- /react-text --><code data-reactid="4618"><!-- react-text: 4619 -->columns<!-- /react-text --></code><!-- react-text: 4620 --> for descriping column, Column has the same API.<!-- /react-text --></p><table data-reactid="4621"><thead data-reactid="4622"><tr data-reactid="4623"><th data-reactid="4624"><!-- react-text: 4625 -->Property<!-- /react-text --></th><th data-reactid="4626"><!-- react-text: 4627 -->Description<!-- /react-text --></th><th data-reactid="4628"><!-- react-text: 4629 -->Type<!-- /react-text --></th><th data-reactid="4630"><!-- react-text: 4631 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="4632"><tr data-reactid="4633"><td data-reactid="4634"><!-- react-text: 4635 -->title<!-- /react-text --></td><td data-reactid="4636"><!-- react-text: 4637 -->title of this column<!-- /react-text --></td><td data-reactid="4638"><!-- react-text: 4639 -->string<!-- /react-text --><!-- react-text: 4640 -->|<!-- /react-text --><!-- react-text: 4641 -->ReactNode<!-- /react-text --></td><td data-reactid="4642"><!-- react-text: 4643 -->-<!-- /react-text --></td></tr><tr data-reactid="4644"><td data-reactid="4645"><!-- react-text: 4646 -->key<!-- /react-text --></td><td data-reactid="4647"><!-- react-text: 4648 -->key of this column<!-- /react-text --></td><td data-reactid="4649"><!-- react-text: 4650 -->string<!-- /react-text --></td><td data-reactid="4651"><!-- react-text: 4652 -->-<!-- /react-text --></td></tr><tr data-reactid="4653"><td data-reactid="4654"><!-- react-text: 4655 -->dataIndex<!-- /react-text --></td><td data-reactid="4656"><!-- react-text: 4657 -->display field of the data record, could be set like <!-- /react-text --><code data-reactid="4658"><!-- react-text: 4659 -->a.b.c<!-- /react-text --></code></td><td data-reactid="4660"><!-- react-text: 4661 -->string<!-- /react-text --></td><td data-reactid="4662"><!-- react-text: 4663 -->-<!-- /react-text --></td></tr><tr data-reactid="4664"><td data-reactid="4665"><!-- react-text: 4666 -->render<!-- /react-text --></td><td data-reactid="4667"><!-- react-text: 4668 -->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="4669"><!-- react-text: 4670 -->colSpan/rowSpan config<!-- /react-text --></a></td><td data-reactid="4671"><!-- react-text: 4672 -->Function(text, record, index) {}<!-- /react-text --></td><td data-reactid="4673"><!-- react-text: 4674 -->-<!-- /react-text --></td></tr><tr data-reactid="4675"><td data-reactid="4676"><!-- react-text: 4677 -->filters<!-- /react-text --></td><td data-reactid="4678"><!-- react-text: 4679 -->filter menu config<!-- /react-text --></td><td data-reactid="4680"><!-- react-text: 4681 -->object[]<!-- /react-text --></td><td data-reactid="4682"><!-- react-text: 4683 -->-<!-- /react-text --></td></tr><tr data-reactid="4684"><td data-reactid="4685"><!-- react-text: 4686 -->onFilter<!-- /react-text --></td><td data-reactid="4687"><!-- react-text: 4688 -->callback that is called when when click confirm filter button<!-- /react-text --></td><td data-reactid="4689"><!-- react-text: 4690 -->Function<!-- /react-text --></td><td data-reactid="4691"><!-- react-text: 4692 -->-<!-- /react-text --></td></tr><tr data-reactid="4693"><td data-reactid="4694"><!-- react-text: 4695 -->filterMultiple<!-- /react-text --></td><td data-reactid="4696"><!-- react-text: 4697 -->whether to select multiple filtered item<!-- /react-text --></td><td data-reactid="4698"><!-- react-text: 4699 -->boolean<!-- /react-text --></td><td data-reactid="4700"><!-- react-text: 4701 -->true<!-- /react-text --></td></tr><tr data-reactid="4702"><td data-reactid="4703"><!-- react-text: 4704 -->filterDropdown<!-- /react-text --></td><td data-reactid="4705"><!-- react-text: 4706 -->customized filter overlay<!-- /react-text --></td><td data-reactid="4707"><!-- react-text: 4708 -->ReactNode<!-- /react-text --></td><td data-reactid="4709"><!-- react-text: 4710 -->-<!-- /react-text --></td></tr><tr data-reactid="4711"><td data-reactid="4712"><!-- react-text: 4713 -->filterDropdownVisible<!-- /react-text --></td><td data-reactid="4714"><!-- react-text: 4715 -->whether filterDropdown is visible<!-- /react-text --></td><td data-reactid="4716"><!-- react-text: 4717 -->boolean<!-- /react-text --></td><td data-reactid="4718"><!-- react-text: 4719 -->-<!-- /react-text --></td></tr><tr data-reactid="4720"><td data-reactid="4721"><!-- react-text: 4722 -->onFilterDropdownVisibleChange<!-- /react-text --></td><td data-reactid="4723"><!-- react-text: 4724 -->called when filterDropdownVisible is changed<!-- /react-text --></td><td data-reactid="4725"><!-- react-text: 4726 -->function(visible) {}<!-- /react-text --></td><td data-reactid="4727"><!-- react-text: 4728 -->-<!-- /react-text --></td></tr><tr data-reactid="4729"><td data-reactid="4730"><!-- react-text: 4731 -->filteredValue<!-- /react-text --></td><td data-reactid="4732"><!-- react-text: 4733 -->controlled filtered value<!-- /react-text --></td><td data-reactid="4734"><!-- react-text: 4735 -->string[]<!-- /react-text --></td><td data-reactid="4736"><!-- react-text: 4737 -->-<!-- /react-text --></td></tr><tr data-reactid="4738"><td data-reactid="4739"><!-- react-text: 4740 -->sorter<!-- /react-text --></td><td data-reactid="4741"><!-- react-text: 4742 -->sort function for local sort. If you need sort buttons only, set it <!-- /react-text --><code data-reactid="4743"><!-- react-text: 4744 -->true<!-- /react-text --></code></td><td data-reactid="4745"><!-- react-text: 4746 -->Function<!-- /react-text --><!-- react-text: 4747 -->|<!-- /react-text --><!-- react-text: 4748 -->boolean<!-- /react-text --></td><td data-reactid="4749"><!-- react-text: 4750 -->-<!-- /react-text --></td></tr><tr data-reactid="4751"><td data-reactid="4752"><!-- react-text: 4753 -->colSpan<!-- /react-text --></td><td data-reactid="4754"><!-- react-text: 4755 -->span of this column's title<!-- /react-text --></td><td data-reactid="4756"><!-- react-text: 4757 -->number<!-- /react-text --></td><td data-reactid="4758"></td></tr><tr data-reactid="4759"><td data-reactid="4760"><!-- react-text: 4761 -->width<!-- /react-text --></td><td data-reactid="4762"><!-- react-text: 4763 -->width of this column<!-- /react-text --></td><td data-reactid="4764"><!-- react-text: 4765 -->string<!-- /react-text --><!-- react-text: 4766 -->|<!-- /react-text --><!-- react-text: 4767 -->number<!-- /react-text --></td><td data-reactid="4768"><!-- react-text: 4769 -->-<!-- /react-text --></td></tr><tr data-reactid="4770"><td data-reactid="4771"><!-- react-text: 4772 -->className<!-- /react-text --></td><td data-reactid="4773"><!-- react-text: 4774 -->className of this column<!-- /react-text --></td><td data-reactid="4775"><!-- react-text: 4776 -->string<!-- /react-text --></td><td data-reactid="4777"><!-- react-text: 4778 -->-<!-- /react-text --></td></tr><tr data-reactid="4779"><td data-reactid="4780"><!-- react-text: 4781 -->fixed<!-- /react-text --></td><td data-reactid="4782"><!-- react-text: 4783 -->set column to be fixed: <!-- /react-text --><code data-reactid="4784"><!-- react-text: 4785 -->true<!-- /react-text --></code><!-- react-text: 4786 -->(same as left) <!-- /react-text --><code data-reactid="4787"><!-- react-text: 4788 -->'left'<!-- /react-text --></code><!-- react-text: 4789 --> <!-- /react-text --><code data-reactid="4790"><!-- react-text: 4791 -->'right'<!-- /react-text --></code></td><td data-reactid="4792"><!-- react-text: 4793 -->boolean<!-- /react-text --><!-- react-text: 4794 -->|<!-- /react-text --><!-- react-text: 4795 -->string<!-- /react-text --></td><td data-reactid="4796"><!-- react-text: 4797 -->false<!-- /react-text --></td></tr><tr data-reactid="4798"><td data-reactid="4799"><!-- react-text: 4800 -->sortOrder<!-- /react-text --></td><td data-reactid="4801"><!-- react-text: 4802 -->controlled sorted value: <!-- /react-text --><code data-reactid="4803"><!-- react-text: 4804 -->'ascend'<!-- /react-text --></code><!-- react-text: 4805 --> <!-- /react-text --><code data-reactid="4806"><!-- react-text: 4807 -->'descend'<!-- /react-text --></code><!-- react-text: 4808 --> <!-- /react-text --><code data-reactid="4809"><!-- react-text: 4810 -->false<!-- /react-text --></code></td><td data-reactid="4811"><!-- react-text: 4812 -->boolean<!-- /react-text --><!-- react-text: 4813 -->|<!-- /react-text --><!-- react-text: 4814 -->string<!-- /react-text --></td><td data-reactid="4815"><!-- react-text: 4816 -->-<!-- /react-text --></td></tr><tr data-reactid="4817"><td data-reactid="4818"><!-- react-text: 4819 -->onCellClick<!-- /react-text --></td><td data-reactid="4820"><!-- react-text: 4821 -->callback when click cell<!-- /react-text --></td><td data-reactid="4822"><!-- react-text: 4823 -->Function(record, event)<!-- /react-text --></td><td data-reactid="4824"><!-- react-text: 4825 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="ColumnGroup" data-reactid="4826"><span data-reactid="4827"><!-- react-text: 4828 -->ColumnGroup<!-- /react-text --></span><a href="#ColumnGroup" class="anchor" data-reactid="4829">#</a></h3><table data-reactid="4830"><thead data-reactid="4831"><tr data-reactid="4832"><th data-reactid="4833"><!-- react-text: 4834 -->Property<!-- /react-text --></th><th data-reactid="4835"><!-- react-text: 4836 -->Description<!-- /react-text --></th><th data-reactid="4837"><!-- react-text: 4838 -->Type<!-- /react-text --></th><th data-reactid="4839"><!-- react-text: 4840 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="4841"><tr data-reactid="4842"><td data-reactid="4843"><!-- react-text: 4844 -->title<!-- /react-text --></td><td data-reactid="4845"><!-- react-text: 4846 -->title of the column group<!-- /react-text --></td><td data-reactid="4847"><!-- react-text: 4848 -->string<!-- /react-text --><!-- react-text: 4849 -->|<!-- /react-text --><!-- react-text: 4850 -->ReactNode<!-- /react-text --></td><td data-reactid="4851"><!-- react-text: 4852 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="rowSelection" data-reactid="4853"><span data-reactid="4854"><!-- react-text: 4855 -->rowSelection<!-- /react-text --></span><a href="#rowSelection" class="anchor" data-reactid="4856">#</a></h3><p data-reactid="4857"><!-- react-text: 4858 -->Properties for selection.<!-- /react-text --></p><table data-reactid="4859"><thead data-reactid="4860"><tr data-reactid="4861"><th data-reactid="4862"><!-- react-text: 4863 -->Property<!-- /react-text --></th><th data-reactid="4864"><!-- react-text: 4865 -->Description<!-- /react-text --></th><th data-reactid="4866"><!-- react-text: 4867 -->Type<!-- /react-text --></th><th data-reactid="4868"><!-- react-text: 4869 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="4870"><tr data-reactid="4871"><td data-reactid="4872"><!-- react-text: 4873 -->type<!-- /react-text --></td><td data-reactid="4874"><code data-reactid="4875"><!-- react-text: 4876 -->checkbox<!-- /react-text --></code><!-- react-text: 4877 --> or <!-- /react-text --><code data-reactid="4878"><!-- react-text: 4879 -->radio<!-- /react-text --></code></td><td data-reactid="4880"><!-- react-text: 4881 -->string<!-- /react-text --></td><td data-reactid="4882"><code data-reactid="4883"><!-- react-text: 4884 -->checkbox<!-- /react-text --></code></td></tr><tr data-reactid="4885"><td data-reactid="4886"><!-- react-text: 4887 -->selectedRowKeys<!-- /react-text --></td><td data-reactid="4888"><!-- react-text: 4889 -->controlled selected row keys<!-- /react-text --></td><td data-reactid="4890"><!-- react-text: 4891 -->string[]<!-- /react-text --></td><td data-reactid="4892"><!-- react-text: 4893 -->[]<!-- /react-text --></td></tr><tr data-reactid="4894"><td data-reactid="4895"><!-- react-text: 4896 -->onChange<!-- /react-text --></td><td data-reactid="4897"><!-- react-text: 4898 -->callback that is called when selected rows change<!-- /react-text --></td><td data-reactid="4899"><!-- react-text: 4900 -->Function(selectedRowKeys, selectedRows)<!-- /react-text --></td><td data-reactid="4901"><!-- react-text: 4902 -->-<!-- /react-text --></td></tr><tr data-reactid="4903"><td data-reactid="4904"><!-- react-text: 4905 -->getCheckboxProps<!-- /react-text --></td><td data-reactid="4906"><!-- react-text: 4907 -->get Checkbox or Radio props<!-- /react-text --></td><td data-reactid="4908"><!-- react-text: 4909 -->Function(record)<!-- /react-text --></td><td data-reactid="4910"><!-- react-text: 4911 -->-<!-- /react-text --></td></tr><tr data-reactid="4912"><td data-reactid="4913"><!-- react-text: 4914 -->onSelect<!-- /react-text --></td><td data-reactid="4915"><!-- react-text: 4916 -->callback that is called when select/deselect one row<!-- /react-text --></td><td data-reactid="4917"><!-- react-text: 4918 -->Function(record, selected, selectedRows)<!-- /react-text --></td><td data-reactid="4919"><!-- react-text: 4920 -->-<!-- /react-text --></td></tr><tr data-reactid="4921"><td data-reactid="4922"><!-- react-text: 4923 -->onSelectAll<!-- /react-text --></td><td data-reactid="4924"><!-- react-text: 4925 -->callback that is called when select/deselect all<!-- /react-text --></td><td data-reactid="4926"><!-- react-text: 4927 -->Function(selected, selectedRows, changeRows)<!-- /react-text --></td><td data-reactid="4928"><!-- react-text: 4929 -->-<!-- /react-text --></td></tr></tbody></table><h2 id="Using-in-TypeScript" data-reactid="4930"><span data-reactid="4931"><!-- react-text: 4932 -->Using in TypeScript<!-- /react-text --></span><a href="#Using-in-TypeScript" class="anchor" data-reactid="4933">#</a></h2><pre class="language-jsx" data-reactid="4934"><code data-reactid="4935"><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="4936"><span data-reactid="4937"><!-- react-text: 4938 -->Note<!-- /react-text --></span><a href="#Note" class="anchor" data-reactid="4939">#</a></h2><p data-reactid="4940"><!-- react-text: 4941 -->According to <!-- /react-text --><a href="http://facebook.github.io/react/docs/multiple-components.html#dynamic-children" data-reactid="4942"><!-- react-text: 4943 -->React documentation<!-- /react-text --></a><!-- react-text: 4944 -->, every child in array should be assigned a unique key. The value inside <!-- /react-text --><code data-reactid="4945"><!-- react-text: 4946 -->dataSource<!-- /react-text --></code><!-- react-text: 4947 --> and <!-- /react-text --><code data-reactid="4948"><!-- react-text: 4949 -->columns<!-- /react-text --></code><!-- react-text: 4950 --> should follow this in Table, and <!-- /react-text --><code data-reactid="4951"><!-- react-text: 4952 -->dataSource[i].key<!-- /react-text --></code><!-- react-text: 4953 --> would be treated as key value defaultly for <!-- /react-text --><code data-reactid="4954"><!-- react-text: 4955 -->dataSource<!-- /react-text --></code><!-- react-text: 4956 -->.<!-- /react-text --></p><p data-reactid="4957"><!-- react-text: 4958 -->If <!-- /react-text --><code data-reactid="4959"><!-- react-text: 4960 -->dataSource[i].key<!-- /react-text --></code><!-- react-text: 4961 --> is not existed, then you should specify the primary key of dataSource value via <!-- /react-text --><code data-reactid="4962"><!-- react-text: 4963 -->rowKey<!-- /react-text --></code><!-- react-text: 4964 -->. If not, warnings like above will show in browser console.<!-- /react-text --></p><p data-reactid="4965"><img src="https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png" data-reactid="4966"/></p><pre class="language-jsx" data-reactid="4967"><code data-reactid="4968"><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="4969"><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="4970"><section class="prev-next-nav" data-reactid="4971"><a class="prev-page" href="/components/popover/" data-reactid="4972"><span data-reactid="4973">Popover</span><span class="chinese" data-reactid="4974"></span></a><a class="next-page" href="/components/tag/" data-reactid="4975"><span data-reactid="4976">Tag</span><span class="chinese" data-reactid="4977"></span></a></section></div></div></div><footer id="footer" data-reactid="4978"><ul data-reactid="4979"><li data-reactid="4980"><h2 data-reactid="4981">GitHub</h2><div data-reactid="4982"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="4983"><span data-reactid="4984">Repository</span></a></div><div data-reactid="4985"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="4986">dva</a><!-- react-text: 4987 --> - <!-- /react-text --><span data-reactid="4988">Framework</span></div><div data-reactid="4989"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="4990">dva-cli</a><!-- react-text: 4991 --> -<!-- /react-text --><span data-reactid="4992">Scaffold</span></div><div data-reactid="4993"><a target="_blank" rel="noopener noreferrer" href="http://ant-tool.github.io" data-reactid="4994">ant-tool</a><!-- react-text: 4995 --> - <!-- /react-text --><span data-reactid="4996">Developer Tools</span></div></li><li data-reactid="4997"><h2 data-reactid="4998"><span data-reactid="4999">Links</span></h2><div data-reactid="5000"><a href="http://mobile.ant.design" data-reactid="5001">Ant Design Mobile</a><span data-reactid="5002"> - </span><span data-reactid="5003">Mobile</span></div><div data-reactid="5004"><a href="https://g2.alipay.com/" data-reactid="5005">G2</a><span data-reactid="5006"> - </span><span data-reactid="5007">Data Visualization</span></div><div data-reactid="5008"><a href="https://antv.alipay.com/" data-reactid="5009">AntV</a><span data-reactid="5010"> - </span><span data-reactid="5011">Data Visualization Specification</span></div><div data-reactid="5012"><a href="http://motion.ant.design" data-reactid="5013">Ant Motion</a><span data-reactid="5014"> - </span><span data-reactid="5015">Motion</span></div><div data-reactid="5016"><a href="http://library.ant.design/" data-reactid="5017">AntD Library</a><span data-reactid="5018"> - </span><span data-reactid="5019">Axure library of Ant Design</span></div><div data-reactid="5020"><a href="http://ux.ant.design" data-reactid="5021">Ant UX</a><span data-reactid="5022"> - </span><span data-reactid="5023">Sitemap Template</span></div></li><li data-reactid="5024"><h2 data-reactid="5025"><span data-reactid="5026">Community</span></h2><div data-reactid="5027"><a rel="noopener noreferrer" href="/changelog" data-reactid="5028"><span data-reactid="5029">Change Log</span></a></div><div data-reactid="5030"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="5031"><span data-reactid="5032">Feedback</span></a></div><div data-reactid="5033"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="5034"><span data-reactid="5035">Chat Room</span></a></div><div data-reactid="5036"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="5037"><span data-reactid="5038">Bug Report</span></a></div></li><li data-reactid="5039"><div data-reactid="5040"><!-- react-text: 5041 -->©2016 <!-- /react-text --><span data-reactid="5042">Created by Ant UED</span></div><div data-reactid="5043"><!-- react-text: 5044 -->Powered by <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="5045">BiSheng</a></div><div style="margin-top:10px;" data-reactid="5046"><span data-reactid="5047">Version: </span><div class="ant-select-sm ant-select ant-select-enabled" data-reactid="5048"><div class="ant-select-selection
|
|
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="5049"><div class="ant-select-selection__rendered" data-reactid="5050"><div class="ant-select-selection-selected-value" title="2.6.4" style="display:block;opacity:1;" data-reactid="5051">2.6.4</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="5052"><b data-reactid="5053"></b></span></div></div></div></li></ul></footer></div>
|
|
</div>
|
|
<script>
|
|
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';
|
|
}
|
|
var queryString = location.search;
|
|
if (queryString) {
|
|
var pathname = location.pathname;
|
|
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
|
|
if (isZhCNConfig !== isZhCN(pathname)) {
|
|
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
|
|
}
|
|
}
|
|
</script>
|
|
<script src="/common.js"></script>
|
|
<script src="/index.js"></script>
|
|
</body>
|
|
</html>
|