home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-29 06:36:45 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
a353d0e752b3a23eef1cec910afe84bfaecb5961
ant-design/components/table/index.html
T
Wei Zhu a353d0e752 Updates
2016-11-28 14:36:08 +08:00

1842 lines
596 KiB
HTML
Raw Blame History

<!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="Ant Design - An enterprise-class UI design language and React-based implementation">
<title>Ant Design - One 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-1.css"/>
<link rel="stylesheet" type="text/css" href="/index-2.css"/>
<!--[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>
</head>
<body>
<div id="react-content" hidden>
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="-1953638501"><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 style="display:block;" class="ant-col-xs-0 ant-col-sm-17 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" role="menuitem" aria-selected="false" 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-selected ant-menu-item" role="menuitem" aria-selected="true" 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/install" data-reactid="51">Installation</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="52"><a href="docs/react/practical-projects" data-reactid="53">Practical Projects</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/upgrade-notes" data-reactid="59">Upgrade Notes</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-selected ant-menu-submenu" data-reactid="60"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-open="false" aria-owns="1480314947599_45" aria-haspopup="true" data-reactid="61"><h4 data-reactid="62">Components</h4></div><!-- react-empty: 63 --></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="64"><article data-reactid="65"><div class="toc-affix" data-reactid="66"><div class="" data-reactid="67"><ul class="toc demos-anchor" data-reactid="68"><li title="Basic Usage" data-reactid="69"><a href="#components-table-demo-basic" data-reactid="70">Basic Usage</a></li><li title="JSX style API" data-reactid="71"><a href="#components-table-demo-jsx" data-reactid="72">JSX style API</a></li><li title="selection" data-reactid="73"><a href="#components-table-demo-row-selection" data-reactid="74">selection</a></li><li title="Selection and operation" data-reactid="75"><a href="#components-table-demo-row-selection-and-operation" data-reactid="76">Selection and operation</a></li><li title="Checkbox props" data-reactid="77"><a href="#components-table-demo-row-selection-props" data-reactid="78">Checkbox props</a></li><li title="pagination" data-reactid="79"><a href="#components-table-demo-paging" data-reactid="80">pagination</a></li><li title="Reset filters and sorters" data-reactid="81"><a href="#components-table-demo-reset-filter" data-reactid="82">Reset filters and sorters</a></li><li title="Filter and sorter" data-reactid="83"><a href="#components-table-demo-head" data-reactid="84">Filter and sorter</a></li><li title="Customized filter panel" data-reactid="85"><a href="#components-table-demo-custom-filter-panel" data-reactid="86">Customized filter panel</a></li><li title="Ajax" data-reactid="87"><a href="#components-table-demo-ajax" data-reactid="88">Ajax</a></li><li title="No pagination" data-reactid="89"><a href="#components-table-demo-nopagination" data-reactid="90">No pagination</a></li><li title="size" data-reactid="91"><a href="#components-table-demo-size" data-reactid="92">size</a></li><li title="border, title and footer" data-reactid="93"><a href="#components-table-demo-bordered" data-reactid="94">border, title and footer</a></li><li title="Expandable Row" data-reactid="95"><a href="#components-table-demo-expand" data-reactid="96">Expandable Row</a></li><li title="colSpan and rowSpan" data-reactid="97"><a href="#components-table-demo-colspan-rowspan" data-reactid="98">colSpan and rowSpan</a></li><li title="Tree data" data-reactid="99"><a href="#components-table-demo-expand-children" data-reactid="100">Tree data</a></li><li title="Fixed Header" data-reactid="101"><a href="#components-table-demo-fixed-header" data-reactid="102">Fixed Header</a></li><li title="Fixed Columns" data-reactid="103"><a href="#components-table-demo-fixed-columns" data-reactid="104">Fixed Columns</a></li><li title="Fixed Columns and Header" data-reactid="105"><a href="#components-table-demo-fixed-columns-header" data-reactid="106">Fixed Columns and Header</a></li><li title="Grouping table head" data-reactid="107"><a href="#components-table-demo-grouping-columns" data-reactid="108">Grouping table head</a></li><li title="Editable Cells" data-reactid="109"><a href="#components-table-demo-edit-cell" data-reactid="110">Editable Cells</a></li><li title="Dynamic Settings" data-reactid="111"><a href="#components-table-demo-dynamic-settings" data-reactid="112">Dynamic Settings</a></li><li title="Editable Rows" data-reactid="113"><a href="#components-table-demo-edit-row" data-reactid="114">Editable Rows</a></li></ul></div></div><section class="markdown" data-reactid="115"><h1 data-reactid="116"><!-- react-text: 117 -->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="118"><i class="anticon anticon-edit" data-reactid="119"></i></a></h1><section class="markdown" data-reactid="120"><p data-reactid="121"><!-- react-text: 122 -->A table displays rows data.<!-- /react-text --></p><h2 id="When-To-Use" data-reactid="123"><span data-reactid="124"><!-- react-text: 125 -->When To Use<!-- /react-text --></span><a href="#When-To-Use" class="anchor" data-reactid="126">#</a></h2><ul data-reactid="127"><li data-reactid="128"><p data-reactid="129"><!-- react-text: 130 -->To display a collections of structured data.<!-- /react-text --></p></li><li data-reactid="131"><p data-reactid="132"><!-- react-text: 133 -->To sort, search, paging, filter data.<!-- /react-text --></p></li></ul><h2 id="How-To-Use" data-reactid="134"><span data-reactid="135"><!-- react-text: 136 -->How To Use<!-- /react-text --></span><a href="#How-To-Use" class="anchor" data-reactid="137">#</a></h2><p data-reactid="138"><!-- react-text: 139 -->Specify <!-- /react-text --><code data-reactid="140"><!-- react-text: 141 -->dataSource<!-- /react-text --></code><!-- react-text: 142 --> of Table whose value is an array of data.<!-- /react-text --></p><pre class="language-jsx" data-reactid="143"><code data-reactid="144"><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" >&lt;</span>Table</span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>dataSource<span class="token punctuation" >}</span></span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span></code></pre></section><h2 data-reactid="145"><span data-reactid="146">Examples</span><i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码" data-reactid="147"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="148"><div style="padding-left:8px;padding-right:8px;" class="ant-col-24 code-boxes-col-1-1" data-reactid="149"><section class="code-box" id="components-table-demo-basic" data-reactid="150"><section class="code-box-demo" data-reactid="151"><div class=" clearfix" data-reactid="152"><div class="ant-spin-nested-loading" data-reactid="153"><div class="ant-spin-container" data-reactid="154"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="155"><div class="ant-table-content" data-reactid="156"><div class="" data-reactid="157"><span data-reactid="158"><div class="ant-table-body" data-reactid="159"><table class="" data-reactid="160"><colgroup data-reactid="161"><col data-reactid="162"/><col data-reactid="163"/><col data-reactid="164"/><col data-reactid="165"/></colgroup><thead class="ant-table-thead" data-reactid="166"><tr data-reactid="167"><th class="" data-reactid="168"><span data-reactid="169"><!-- react-text: 170 -->Name<!-- /react-text --></span></th><th class="" data-reactid="171"><span data-reactid="172"><!-- react-text: 173 -->Age<!-- /react-text --></span></th><th class="" data-reactid="174"><span data-reactid="175"><!-- react-text: 176 -->Address<!-- /react-text --></span></th><th class="" data-reactid="177"><span data-reactid="178"><!-- react-text: 179 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="180"><tr class="ant-table-row ant-table-row-level-0" data-reactid="181"><td class="" data-reactid="182"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="183"></span><!-- react-empty: 184 --><a href="#" data-reactid="185">John Brown</a></td><td class="" data-reactid="186"><!-- react-text: 187 -->32<!-- /react-text --></td><td class="" data-reactid="188"><!-- react-text: 189 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="190"><span data-reactid="191"><a href="#" data-reactid="192"><!-- react-text: 193 -->Action 一 <!-- /react-text --><!-- react-text: 194 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="195"></span><a href="#" data-reactid="196">Delete</a><span class="ant-divider" data-reactid="197"></span><a href="#" class="ant-dropdown-link" data-reactid="198"><!-- react-text: 199 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="200"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="201"><td class="" data-reactid="202"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="203"></span><!-- react-empty: 204 --><a href="#" data-reactid="205">Jim Green</a></td><td class="" data-reactid="206"><!-- react-text: 207 -->42<!-- /react-text --></td><td class="" data-reactid="208"><!-- react-text: 209 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="210"><span data-reactid="211"><a href="#" data-reactid="212"><!-- react-text: 213 -->Action 一 <!-- /react-text --><!-- react-text: 214 -->Jim Green<!-- /react-text --></a><span class="ant-divider" data-reactid="215"></span><a href="#" data-reactid="216">Delete</a><span class="ant-divider" data-reactid="217"></span><a href="#" class="ant-dropdown-link" data-reactid="218"><!-- react-text: 219 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="220"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="221"><td class="" data-reactid="222"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="223"></span><!-- react-empty: 224 --><a href="#" data-reactid="225">Joe Black</a></td><td class="" data-reactid="226"><!-- react-text: 227 -->32<!-- /react-text --></td><td class="" data-reactid="228"><!-- react-text: 229 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="230"><span data-reactid="231"><a href="#" data-reactid="232"><!-- react-text: 233 -->Action 一 <!-- /react-text --><!-- react-text: 234 -->Joe Black<!-- /react-text --></a><span class="ant-divider" data-reactid="235"></span><a href="#" data-reactid="236">Delete</a><span class="ant-divider" data-reactid="237"></span><a href="#" class="ant-dropdown-link" data-reactid="238"><!-- react-text: 239 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="240"></i></a></span></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="241"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="242"><a data-reactid="243"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="244"><a data-reactid="245">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="246"><a data-reactid="247"></a></li><!-- react-empty: 248 --></ul></div></section><section class="code-box-meta markdown" data-reactid="249"><div class="code-box-title" data-reactid="250"><a href="#components-table-demo-basic" data-reactid="251">Basic Usage</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/basic.md" data-reactid="252"><i class="anticon anticon-edit" data-reactid="253"></i></a></div><div data-reactid="254"><p data-reactid="255"><!-- react-text: 256 -->Simple table with actions.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="257"></i></section><section class="highlight-wrapper" data-reactid="258"><div class="highlight" data-reactid="259"><pre class="language-jsx" data-reactid="260"><code data-reactid="261"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table<span class="token punctuation" >,</span> Icon <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> text <span class="token operator" >=</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token punctuation" >{</span>text<span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Action'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'action'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>text<span class="token punctuation" >,</span> record<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Action 一 <span class="token punctuation" >{</span>record<span class="token punctuation" >.</span>name<span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-divider<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Delete<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-divider<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-dropdown-link<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
More actions<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>down<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >42</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Joe Black'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'Sidney No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-jsx" data-reactid="262"><section class="code-box-demo" data-reactid="263"><div class=" clearfix" data-reactid="264"><div class="ant-spin-nested-loading" data-reactid="265"><div class="ant-spin-container" data-reactid="266"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="267"><div class="ant-table-content" data-reactid="268"><div class="" data-reactid="269"><span data-reactid="270"><div class="ant-table-body" data-reactid="271"><table class="" data-reactid="272"><colgroup data-reactid="273"><col data-reactid="274"/><col data-reactid="275"/><col data-reactid="276"/><col data-reactid="277"/><col data-reactid="278"/></colgroup><thead class="ant-table-thead" data-reactid="279"><tr data-reactid="280"><th class="" colspan="2" data-reactid="281"><span data-reactid="282"><!-- react-text: 283 -->Name<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="284"><span data-reactid="285"><!-- react-text: 286 -->Age<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="287"><span data-reactid="288"><!-- react-text: 289 -->Address<!-- /react-text --></span></th><th class="" rowspan="2" data-reactid="290"><span data-reactid="291"><!-- react-text: 292 -->Action<!-- /react-text --></span></th></tr><tr data-reactid="293"><th class="" data-reactid="294"><span data-reactid="295"><!-- react-text: 296 -->First Name<!-- /react-text --></span></th><th class="" data-reactid="297"><span data-reactid="298"><!-- react-text: 299 -->Last Name<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="300"><tr class="ant-table-row ant-table-row-level-0" data-reactid="301"><td class="" data-reactid="302"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="303"></span><!-- react-empty: 304 --><!-- react-text: 305 -->John<!-- /react-text --></td><td class="" data-reactid="306"><!-- react-text: 307 -->Brown<!-- /react-text --></td><td class="" data-reactid="308"><!-- react-text: 309 -->32<!-- /react-text --></td><td class="" data-reactid="310"><!-- react-text: 311 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="312"><span data-reactid="313"><a href="#" data-reactid="314"><!-- react-text: 315 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="316"></span><a href="#" data-reactid="317">Delete</a><span class="ant-divider" data-reactid="318"></span><a href="#" class="ant-dropdown-link" data-reactid="319"><!-- react-text: 320 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="321"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="322"><td class="" data-reactid="323"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="324"></span><!-- react-empty: 325 --><!-- react-text: 326 -->Jim<!-- /react-text --></td><td class="" data-reactid="327"><!-- react-text: 328 -->Green<!-- /react-text --></td><td class="" data-reactid="329"><!-- react-text: 330 -->42<!-- /react-text --></td><td class="" data-reactid="331"><!-- react-text: 332 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="333"><span data-reactid="334"><a href="#" data-reactid="335"><!-- react-text: 336 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="337"></span><a href="#" data-reactid="338">Delete</a><span class="ant-divider" data-reactid="339"></span><a href="#" class="ant-dropdown-link" data-reactid="340"><!-- react-text: 341 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="342"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="343"><td class="" data-reactid="344"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="345"></span><!-- react-empty: 346 --><!-- react-text: 347 -->Joe<!-- /react-text --></td><td class="" data-reactid="348"><!-- react-text: 349 -->Black<!-- /react-text --></td><td class="" data-reactid="350"><!-- react-text: 351 -->32<!-- /react-text --></td><td class="" data-reactid="352"><!-- react-text: 353 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="354"><span data-reactid="355"><a href="#" data-reactid="356"><!-- react-text: 357 -->Action 一 <!-- /react-text --></a><span class="ant-divider" data-reactid="358"></span><a href="#" data-reactid="359">Delete</a><span class="ant-divider" data-reactid="360"></span><a href="#" class="ant-dropdown-link" data-reactid="361"><!-- react-text: 362 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="363"></i></a></span></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="364"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="365"><a data-reactid="366"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="367"><a data-reactid="368">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="369"><a data-reactid="370"></a></li><!-- react-empty: 371 --></ul></div></section><section class="code-box-meta markdown" data-reactid="372"><div class="code-box-title" data-reactid="373"><a href="#components-table-demo-jsx" data-reactid="374">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="375"><i class="anticon anticon-edit" data-reactid="376"></i></a></div><div data-reactid="377"><p data-reactid="378"><!-- react-text: 379 -->Using JSX style API (introduced in 2.5.0)<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="380"></i></section><section class="highlight-wrapper" data-reactid="381"><div class="highlight" data-reactid="382"><pre class="language-jsx" data-reactid="383"><code data-reactid="384"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table<span class="token punctuation" >,</span> Icon <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> <span class="token punctuation" >{</span> Column<span class="token punctuation" >,</span> ColumnGroup <span class="token punctuation" >}</span> <span class="token operator" >=</span> Table<span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
firstName<span class="token punctuation" >:</span> <span class="token string" >'John'</span><span class="token punctuation" >,</span>
lastName<span class="token punctuation" >:</span> <span class="token string" >'Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
firstName<span class="token punctuation" >:</span> <span class="token string" >'Jim'</span><span class="token punctuation" >,</span>
lastName<span class="token punctuation" >:</span> <span class="token string" >'Green'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >42</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span>
firstName<span class="token punctuation" >:</span> <span class="token string" >'Joe'</span><span class="token punctuation" >,</span>
lastName<span class="token punctuation" >:</span> <span class="token string" >'Black'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'Sidney No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>ColumnGroup</span> <span class="token attr-name" >title</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Name<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Column</span>
<span class="token attr-name" >title</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>First</span> <span class="token attr-name" >Name"</span>
<span class="token attr-name" >dataIndex</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>firstName<span class="token punctuation" >"</span></span>
<span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>firstName<span class="token punctuation" >"</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Column</span>
<span class="token attr-name" >title</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Last</span> <span class="token attr-name" >Name"</span>
<span class="token attr-name" >dataIndex</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>lastName<span class="token punctuation" >"</span></span>
<span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>lastName<span class="token punctuation" >"</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>ColumnGroup</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Column</span>
<span class="token attr-name" >title</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Age<span class="token punctuation" >"</span></span>
<span class="token attr-name" >dataIndex</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>age<span class="token punctuation" >"</span></span>
<span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>age<span class="token punctuation" >"</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Column</span>
<span class="token attr-name" >title</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Address<span class="token punctuation" >"</span></span>
<span class="token attr-name" >dataIndex</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>address<span class="token punctuation" >"</span></span>
<span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>address<span class="token punctuation" >"</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Column</span>
<span class="token attr-name" >title</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Action<span class="token punctuation" >"</span></span>
<span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>action<span class="token punctuation" >"</span></span>
<span class="token attr-name" >render</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >(</span>text<span class="token punctuation" >,</span> record<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Action 一 <span class="token punctuation" >{</span>record<span class="token punctuation" >.</span>name<span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-divider<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Delete<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-divider<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-dropdown-link<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
More actions<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>down<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >)</span><span class="token punctuation" >}</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Table</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-row-selection" data-reactid="385"><section class="code-box-demo" data-reactid="386"><div class=" clearfix" data-reactid="387"><div class="ant-spin-nested-loading" data-reactid="388"><div class="ant-spin-container" data-reactid="389"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="390"><div class="ant-table-content" data-reactid="391"><div class="" data-reactid="392"><span data-reactid="393"><div class="ant-table-body" data-reactid="394"><table class="" data-reactid="395"><colgroup data-reactid="396"><col data-reactid="397"/><col data-reactid="398"/><col data-reactid="399"/><col data-reactid="400"/></colgroup><thead class="ant-table-thead" data-reactid="401"><tr data-reactid="402"><th class="ant-table-selection-column" data-reactid="403"><span data-reactid="404"><label class="ant-checkbox-wrapper" data-reactid="405"><span class="ant-checkbox" data-reactid="406"><span class="ant-checkbox-inner" data-reactid="407"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="408"/></span></label></span></th><th class="" data-reactid="409"><span data-reactid="410"><!-- react-text: 411 -->Name<!-- /react-text --></span></th><th class="" data-reactid="412"><span data-reactid="413"><!-- react-text: 414 -->Age<!-- /react-text --></span></th><th class="" data-reactid="415"><span data-reactid="416"><!-- react-text: 417 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="418"><tr class="ant-table-row ant-table-row-level-0" data-reactid="419"><td class="ant-table-selection-column" data-reactid="420"><span data-reactid="421"><label class="ant-checkbox-wrapper" data-reactid="422"><span class="ant-checkbox" data-reactid="423"><span class="ant-checkbox-inner" data-reactid="424"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="425"/></span></label></span></td><td class="" data-reactid="426"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="427"></span><!-- react-empty: 428 --><a href="#" data-reactid="429">John Brown</a></td><td class="" data-reactid="430"><!-- react-text: 431 -->32<!-- /react-text --></td><td class="" data-reactid="432"><!-- react-text: 433 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="434"><td class="ant-table-selection-column" data-reactid="435"><span data-reactid="436"><label class="ant-checkbox-wrapper" data-reactid="437"><span class="ant-checkbox" data-reactid="438"><span class="ant-checkbox-inner" data-reactid="439"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="440"/></span></label></span></td><td class="" data-reactid="441"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="442"></span><!-- react-empty: 443 --><a href="#" data-reactid="444">Jim Green</a></td><td class="" data-reactid="445"><!-- react-text: 446 -->42<!-- /react-text --></td><td class="" data-reactid="447"><!-- react-text: 448 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="449"><td class="ant-table-selection-column" data-reactid="450"><span data-reactid="451"><label class="ant-checkbox-wrapper" data-reactid="452"><span class="ant-checkbox" data-reactid="453"><span class="ant-checkbox-inner" data-reactid="454"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="455"/></span></label></span></td><td class="" data-reactid="456"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="457"></span><!-- react-empty: 458 --><a href="#" data-reactid="459">Joe Black</a></td><td class="" data-reactid="460"><!-- react-text: 461 -->32<!-- /react-text --></td><td class="" data-reactid="462"><!-- react-text: 463 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></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></section><section class="code-box-meta markdown" data-reactid="472"><div class="code-box-title" data-reactid="473"><a href="#components-table-demo-row-selection" data-reactid="474">selection</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/row-selection.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 -->Rows can be selectable by making first column as a selectable column.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="480"></i></section><section class="highlight-wrapper" data-reactid="481"><div class="highlight" data-reactid="482"><pre class="language-jsx" data-reactid="483"><code data-reactid="484"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> text <span class="token operator" >=</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token punctuation" >{</span>text<span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >42</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Joe Black'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'Sidney No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true">// rowSelection object indicates the need for row selection</span>
<span class="token keyword" >const</span> rowSelection <span class="token operator" >=</span> <span class="token punctuation" >{</span>
onChange<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>selectedRowKeys<span class="token punctuation" >,</span> selectedRows<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token template-string" ><span class="token string" >`selectedRowKeys: </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>selectedRowKeys<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >,</span> <span class="token string" >'selectedRows: '</span><span class="token punctuation" >,</span> selectedRows<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
onSelect<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>record<span class="token punctuation" >,</span> selected<span class="token punctuation" >,</span> selectedRows<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>record<span class="token punctuation" >,</span> selected<span class="token punctuation" >,</span> selectedRows<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
onSelectAll<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>selected<span class="token punctuation" >,</span> selectedRows<span class="token punctuation" >,</span> changeRows<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>selected<span class="token punctuation" >,</span> selectedRows<span class="token punctuation" >,</span> changeRows<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >rowSelection</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>rowSelection<span class="token punctuation" >}</span></span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-row-selection-and-operation" data-reactid="485"><section class="code-box-demo" data-reactid="486"><div data-reactid="487"><div style="margin-bottom:16px;" data-reactid="488"><button disabled="" type="button" class="ant-btn ant-btn-primary" data-reactid="489"><span data-reactid="490">Reload</span></button><span style="margin-left:8px;" data-reactid="491"></span></div><div class=" clearfix" data-reactid="492"><div class="ant-spin-nested-loading" data-reactid="493"><div class="ant-spin-container" data-reactid="494"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="495"><div class="ant-table-content" data-reactid="496"><div class="" data-reactid="497"><span data-reactid="498"><div class="ant-table-body" data-reactid="499"><table class="" data-reactid="500"><colgroup data-reactid="501"><col data-reactid="502"/><col data-reactid="503"/><col data-reactid="504"/><col data-reactid="505"/></colgroup><thead class="ant-table-thead" data-reactid="506"><tr data-reactid="507"><th class="ant-table-selection-column" data-reactid="508"><span data-reactid="509"><label class="ant-checkbox-wrapper" data-reactid="510"><span class="ant-checkbox" data-reactid="511"><span class="ant-checkbox-inner" data-reactid="512"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="513"/></span></label></span></th><th class="" data-reactid="514"><span data-reactid="515"><!-- react-text: 516 -->Name<!-- /react-text --></span></th><th class="" data-reactid="517"><span data-reactid="518"><!-- react-text: 519 -->Age<!-- /react-text --></span></th><th class="" data-reactid="520"><span data-reactid="521"><!-- react-text: 522 -->Address<!-- /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="ant-table-selection-column" data-reactid="525"><span data-reactid="526"><label class="ant-checkbox-wrapper" data-reactid="527"><span class="ant-checkbox" data-reactid="528"><span class="ant-checkbox-inner" data-reactid="529"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="530"/></span></label></span></td><td class="" data-reactid="531"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="532"></span><!-- react-empty: 533 --><!-- react-text: 534 -->Edward King 0<!-- /react-text --></td><td class="" data-reactid="535"><!-- react-text: 536 -->32<!-- /react-text --></td><td class="" data-reactid="537"><!-- react-text: 538 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="539"><td class="ant-table-selection-column" data-reactid="540"><span data-reactid="541"><label class="ant-checkbox-wrapper" data-reactid="542"><span class="ant-checkbox" data-reactid="543"><span class="ant-checkbox-inner" data-reactid="544"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="545"/></span></label></span></td><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 -->Edward King 1<!-- /react-text --></td><td class="" data-reactid="550"><!-- react-text: 551 -->32<!-- /react-text --></td><td class="" data-reactid="552"><!-- react-text: 553 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="554"><td class="ant-table-selection-column" data-reactid="555"><span data-reactid="556"><label class="ant-checkbox-wrapper" data-reactid="557"><span class="ant-checkbox" data-reactid="558"><span class="ant-checkbox-inner" data-reactid="559"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="560"/></span></label></span></td><td class="" data-reactid="561"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="562"></span><!-- react-empty: 563 --><!-- react-text: 564 -->Edward King 2<!-- /react-text --></td><td class="" data-reactid="565"><!-- react-text: 566 -->32<!-- /react-text --></td><td class="" data-reactid="567"><!-- react-text: 568 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="569"><td class="ant-table-selection-column" data-reactid="570"><span data-reactid="571"><label class="ant-checkbox-wrapper" data-reactid="572"><span class="ant-checkbox" data-reactid="573"><span class="ant-checkbox-inner" data-reactid="574"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="575"/></span></label></span></td><td class="" data-reactid="576"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="577"></span><!-- react-empty: 578 --><!-- react-text: 579 -->Edward King 3<!-- /react-text --></td><td class="" data-reactid="580"><!-- react-text: 581 -->32<!-- /react-text --></td><td class="" data-reactid="582"><!-- react-text: 583 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="584"><td class="ant-table-selection-column" data-reactid="585"><span data-reactid="586"><label class="ant-checkbox-wrapper" data-reactid="587"><span class="ant-checkbox" data-reactid="588"><span class="ant-checkbox-inner" data-reactid="589"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="590"/></span></label></span></td><td class="" data-reactid="591"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="592"></span><!-- react-empty: 593 --><!-- react-text: 594 -->Edward King 4<!-- /react-text --></td><td class="" data-reactid="595"><!-- react-text: 596 -->32<!-- /react-text --></td><td class="" data-reactid="597"><!-- react-text: 598 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="599"><td class="ant-table-selection-column" data-reactid="600"><span data-reactid="601"><label class="ant-checkbox-wrapper" data-reactid="602"><span class="ant-checkbox" data-reactid="603"><span class="ant-checkbox-inner" data-reactid="604"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="605"/></span></label></span></td><td class="" data-reactid="606"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="607"></span><!-- react-empty: 608 --><!-- react-text: 609 -->Edward King 5<!-- /react-text --></td><td class="" data-reactid="610"><!-- react-text: 611 -->32<!-- /react-text --></td><td class="" data-reactid="612"><!-- react-text: 613 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="614"><td class="ant-table-selection-column" data-reactid="615"><span data-reactid="616"><label class="ant-checkbox-wrapper" data-reactid="617"><span class="ant-checkbox" data-reactid="618"><span class="ant-checkbox-inner" data-reactid="619"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="620"/></span></label></span></td><td class="" data-reactid="621"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="622"></span><!-- react-empty: 623 --><!-- react-text: 624 -->Edward King 6<!-- /react-text --></td><td class="" data-reactid="625"><!-- react-text: 626 -->32<!-- /react-text --></td><td class="" data-reactid="627"><!-- react-text: 628 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="629"><td class="ant-table-selection-column" data-reactid="630"><span data-reactid="631"><label class="ant-checkbox-wrapper" data-reactid="632"><span class="ant-checkbox" data-reactid="633"><span class="ant-checkbox-inner" data-reactid="634"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="635"/></span></label></span></td><td class="" data-reactid="636"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="637"></span><!-- react-empty: 638 --><!-- react-text: 639 -->Edward King 7<!-- /react-text --></td><td class="" data-reactid="640"><!-- react-text: 641 -->32<!-- /react-text --></td><td class="" data-reactid="642"><!-- react-text: 643 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="644"><td class="ant-table-selection-column" data-reactid="645"><span data-reactid="646"><label class="ant-checkbox-wrapper" data-reactid="647"><span class="ant-checkbox" data-reactid="648"><span class="ant-checkbox-inner" data-reactid="649"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="650"/></span></label></span></td><td class="" data-reactid="651"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="652"></span><!-- react-empty: 653 --><!-- react-text: 654 -->Edward King 8<!-- /react-text --></td><td class="" data-reactid="655"><!-- react-text: 656 -->32<!-- /react-text --></td><td class="" data-reactid="657"><!-- react-text: 658 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="659"><td class="ant-table-selection-column" data-reactid="660"><span data-reactid="661"><label class="ant-checkbox-wrapper" data-reactid="662"><span class="ant-checkbox" data-reactid="663"><span class="ant-checkbox-inner" data-reactid="664"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="665"/></span></label></span></td><td class="" data-reactid="666"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="667"></span><!-- react-empty: 668 --><!-- react-text: 669 -->Edward King 9<!-- /react-text --></td><td class="" data-reactid="670"><!-- react-text: 671 -->32<!-- /react-text --></td><td class="" data-reactid="672"><!-- react-text: 673 -->London, Park Lane no. 9<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="674"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="675"><a data-reactid="676"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="677"><a data-reactid="678">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="679"><a data-reactid="680">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="681"><a data-reactid="682">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="683"><a data-reactid="684">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" data-reactid="685"><a data-reactid="686">5</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="687"><a data-reactid="688"></a></li><!-- react-empty: 689 --></ul></div></div></section><section class="code-box-meta markdown" data-reactid="690"><div class="code-box-title" data-reactid="691"><a href="#components-table-demo-row-selection-and-operation" data-reactid="692">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="693"><i class="anticon anticon-edit" data-reactid="694"></i></a></div><div data-reactid="695"><p data-reactid="696"><!-- react-text: 697 -->To perform operations and clear selections after selecting some rows, use <!-- /react-text --><code data-reactid="698"><!-- react-text: 699 -->rowSelection.selectedRowKeys<!-- /react-text --></code><!-- react-text: 700 --> to control selected rows.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="701"></i></section><section class="highlight-wrapper" data-reactid="702"><div class="highlight" data-reactid="703"><pre class="language-jsx" data-reactid="704"><code data-reactid="705"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table<span class="token punctuation" >,</span> Button <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >for</span> <span class="token punctuation" >(</span><span class="token keyword" >let</span> i <span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >;</span> i <span class="token operator" >&lt;</span> <span class="token number" >46</span><span class="token punctuation" >;</span> i<span class="token operator" >++</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
data<span class="token punctuation" >.</span><span class="token function" >push</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> i<span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`Edward King </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>i<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`London, Park Lane no. </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>i<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token keyword" >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 punctuation" >{</span>
<span class="token function" >getInitialState</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >return</span> <span class="token punctuation" >{</span>
selectedRowKeys<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span> <span class="token comment" spellcheck="true">// Check here to configure the default column</span>
loading<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token function" >start</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> loading<span class="token punctuation" >:</span> <span class="token boolean" >true</span> <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true">// ajax request after empty completing</span>
<span class="token function" >setTimeout</span><span class="token punctuation" >(</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
selectedRowKeys<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
loading<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token number" >1000</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token function" >onSelectChange</span><span class="token punctuation" >(</span>selectedRowKeys<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'selectedRowKeys changed: '</span><span class="token punctuation" >,</span> selectedRowKeys<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> selectedRowKeys <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token function" >render</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> <span class="token punctuation" >{</span> loading<span class="token punctuation" >,</span> selectedRowKeys <span class="token punctuation" >}</span> <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >;</span>
<span class="token keyword" >const</span> rowSelection <span class="token operator" >=</span> <span class="token punctuation" >{</span>
selectedRowKeys<span class="token punctuation" >,</span>
onChange<span class="token punctuation" >:</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>onSelectChange<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> hasSelected <span class="token operator" >=</span> selectedRowKeys<span class="token punctuation" >.</span>length <span class="token operator" >></span> <span class="token number" >0</span><span class="token punctuation" >;</span>
<span class="token keyword" >return</span> <span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >style</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span> marginBottom<span class="token punctuation" >:</span> <span class="token number" >16</span> <span class="token punctuation" >}</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>primary<span class="token punctuation" >"</span></span> <span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>start<span class="token punctuation" >}</span></span>
<span class="token attr-name" >disabled</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token operator" >!</span>hasSelected<span class="token punctuation" >}</span></span> <span class="token attr-name" >loading</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>loading<span class="token punctuation" >}</span></span>
<span class="token punctuation" >></span></span>Reload<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Button</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >style</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span> marginLeft<span class="token punctuation" >:</span> <span class="token number" >8</span> <span class="token punctuation" >}</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span><span class="token punctuation" >{</span>hasSelected <span class="token operator" >?</span> <span class="token template-string" ><span class="token string" >`Selected </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>selectedRowKeys<span class="token punctuation" >.</span>length<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" > items`</span></span> <span class="token punctuation" >:</span> <span class="token string" >''</span><span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >rowSelection</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>rowSelection<span class="token punctuation" >}</span></span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>App</span> <span class="token punctuation" >/></span></span><span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-row-selection-props" data-reactid="706"><section class="code-box-demo" data-reactid="707"><div class=" clearfix" data-reactid="708"><div class="ant-spin-nested-loading" data-reactid="709"><div class="ant-spin-container" data-reactid="710"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="711"><div class="ant-table-content" data-reactid="712"><div class="" data-reactid="713"><span data-reactid="714"><div class="ant-table-body" data-reactid="715"><table class="" data-reactid="716"><colgroup data-reactid="717"><col data-reactid="718"/><col data-reactid="719"/><col data-reactid="720"/><col data-reactid="721"/></colgroup><thead class="ant-table-thead" data-reactid="722"><tr data-reactid="723"><th class="ant-table-selection-column" data-reactid="724"><span data-reactid="725"><label class="ant-checkbox-wrapper" data-reactid="726"><span class="ant-checkbox" data-reactid="727"><span class="ant-checkbox-inner" data-reactid="728"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="729"/></span></label></span></th><th class="" data-reactid="730"><span data-reactid="731"><!-- react-text: 732 -->Name<!-- /react-text --></span></th><th class="" data-reactid="733"><span data-reactid="734"><!-- react-text: 735 -->Age<!-- /react-text --></span></th><th class="" data-reactid="736"><span data-reactid="737"><!-- react-text: 738 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="739"><tr class="ant-table-row ant-table-row-level-0" data-reactid="740"><td class="ant-table-selection-column" data-reactid="741"><span data-reactid="742"><label class="ant-checkbox-wrapper" data-reactid="743"><span class="ant-checkbox" data-reactid="744"><span class="ant-checkbox-inner" data-reactid="745"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="746"/></span></label></span></td><td class="" data-reactid="747"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="748"></span><!-- react-empty: 749 --><a href="#" data-reactid="750">John Brown</a></td><td class="" data-reactid="751"><!-- react-text: 752 -->32<!-- /react-text --></td><td class="" data-reactid="753"><!-- react-text: 754 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="755"><td class="ant-table-selection-column" data-reactid="756"><span data-reactid="757"><label class="ant-checkbox-wrapper" data-reactid="758"><span class="ant-checkbox ant-checkbox-disabled" data-reactid="759"><span class="ant-checkbox-inner" data-reactid="760"></span><input type="checkbox" disabled="" class="ant-checkbox-input" data-reactid="761"/></span></label></span></td><td class="" data-reactid="762"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="763"></span><!-- react-empty: 764 --><a href="#" data-reactid="765">Jim Green</a></td><td class="" data-reactid="766"><!-- react-text: 767 -->42<!-- /react-text --></td><td class="" data-reactid="768"><!-- react-text: 769 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="770"><td class="ant-table-selection-column" data-reactid="771"><span data-reactid="772"><label class="ant-checkbox-wrapper" data-reactid="773"><span class="ant-checkbox" data-reactid="774"><span class="ant-checkbox-inner" data-reactid="775"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="776"/></span></label></span></td><td class="" data-reactid="777"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="778"></span><!-- react-empty: 779 --><a href="#" data-reactid="780">Joe Black</a></td><td class="" data-reactid="781"><!-- react-text: 782 -->32<!-- /react-text --></td><td class="" data-reactid="783"><!-- react-text: 784 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="785"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="786"><a data-reactid="787"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="788"><a data-reactid="789">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="790"><a data-reactid="791"></a></li><!-- react-empty: 792 --></ul></div></section><section class="code-box-meta markdown" data-reactid="793"><div class="code-box-title" data-reactid="794"><a href="#components-table-demo-row-selection-props" data-reactid="795">Checkbox props</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/row-selection-props.md" data-reactid="796"><i class="anticon anticon-edit" data-reactid="797"></i></a></div><div data-reactid="798"><p data-reactid="799"><!-- react-text: 800 -->Set props to Checkbox or Radio.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="801"></i></section><section class="highlight-wrapper" data-reactid="802"><div class="highlight" data-reactid="803"><pre class="language-jsx" data-reactid="804"><code data-reactid="805"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> text <span class="token operator" >=</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token punctuation" >{</span>text<span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >42</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Joe Black'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'Sidney No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true">// rowSelection object indicates the need for row selection</span>
<span class="token keyword" >const</span> rowSelection <span class="token operator" >=</span> <span class="token punctuation" >{</span>
getCheckboxProps<span class="token punctuation" >:</span> record <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >(</span><span class="token punctuation" >{</span>
disabled<span class="token punctuation" >:</span> record<span class="token punctuation" >.</span>name <span class="token operator" >===</span> <span class="token string" >'Jim Green'</span><span class="token punctuation" >,</span> <span class="token comment" spellcheck="true">// Column configuration not to be checked</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >rowSelection</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>rowSelection<span class="token punctuation" >}</span></span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-paging" data-reactid="806"><section class="code-box-demo" data-reactid="807"><div class=" clearfix" data-reactid="808"><div class="ant-spin-nested-loading" data-reactid="809"><div class="ant-spin-container" data-reactid="810"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="811"><div class="ant-table-content" data-reactid="812"><div class="" data-reactid="813"><span data-reactid="814"><div class="ant-table-body" data-reactid="815"><table class="" data-reactid="816"><colgroup data-reactid="817"><col data-reactid="818"/><col data-reactid="819"/><col data-reactid="820"/></colgroup><thead class="ant-table-thead" data-reactid="821"><tr data-reactid="822"><th class="" data-reactid="823"><span data-reactid="824"><!-- react-text: 825 -->Name<!-- /react-text --></span></th><th class="" data-reactid="826"><span data-reactid="827"><!-- react-text: 828 -->Age<!-- /react-text --></span></th><th class="" data-reactid="829"><span data-reactid="830"><!-- react-text: 831 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="832"><tr class="ant-table-row ant-table-row-level-0" data-reactid="833"><td class="" data-reactid="834"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="835"></span><!-- react-empty: 836 --><a href="#" data-reactid="837">Edward King 0</a></td><td class="" data-reactid="838"><!-- react-text: 839 -->32<!-- /react-text --></td><td class="" data-reactid="840"><!-- react-text: 841 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="842"><td class="" data-reactid="843"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="844"></span><!-- react-empty: 845 --><a href="#" data-reactid="846">Edward King 1</a></td><td class="" data-reactid="847"><!-- react-text: 848 -->32<!-- /react-text --></td><td class="" data-reactid="849"><!-- react-text: 850 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="851"><td class="" data-reactid="852"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="853"></span><!-- react-empty: 854 --><a href="#" data-reactid="855">Edward King 2</a></td><td class="" data-reactid="856"><!-- react-text: 857 -->32<!-- /react-text --></td><td class="" data-reactid="858"><!-- react-text: 859 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="860"><td class="" data-reactid="861"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="862"></span><!-- react-empty: 863 --><a href="#" data-reactid="864">Edward King 3</a></td><td class="" data-reactid="865"><!-- react-text: 866 -->32<!-- /react-text --></td><td class="" data-reactid="867"><!-- react-text: 868 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="869"><td class="" data-reactid="870"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="871"></span><!-- react-empty: 872 --><a href="#" data-reactid="873">Edward King 4</a></td><td class="" data-reactid="874"><!-- react-text: 875 -->32<!-- /react-text --></td><td class="" data-reactid="876"><!-- react-text: 877 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="878"><td class="" data-reactid="879"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="880"></span><!-- react-empty: 881 --><a href="#" data-reactid="882">Edward King 5</a></td><td class="" data-reactid="883"><!-- react-text: 884 -->32<!-- /react-text --></td><td class="" data-reactid="885"><!-- react-text: 886 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="887"><td class="" data-reactid="888"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="889"></span><!-- react-empty: 890 --><a href="#" data-reactid="891">Edward King 6</a></td><td class="" data-reactid="892"><!-- react-text: 893 -->32<!-- /react-text --></td><td class="" data-reactid="894"><!-- react-text: 895 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="896"><td class="" data-reactid="897"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="898"></span><!-- react-empty: 899 --><a href="#" data-reactid="900">Edward King 7</a></td><td class="" data-reactid="901"><!-- react-text: 902 -->32<!-- /react-text --></td><td class="" data-reactid="903"><!-- react-text: 904 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="905"><td class="" data-reactid="906"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="907"></span><!-- react-empty: 908 --><a href="#" data-reactid="909">Edward King 8</a></td><td class="" data-reactid="910"><!-- react-text: 911 -->32<!-- /react-text --></td><td class="" data-reactid="912"><!-- react-text: 913 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="914"><td class="" data-reactid="915"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="916"></span><!-- react-empty: 917 --><a href="#" data-reactid="918">Edward King 9</a></td><td class="" data-reactid="919"><!-- react-text: 920 -->32<!-- /react-text --></td><td class="" data-reactid="921"><!-- react-text: 922 -->London, Park Lane no. 9<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="923"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="924"><a data-reactid="925"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="926"><a data-reactid="927">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="928"><a data-reactid="929">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="930"><a data-reactid="931">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="932"><a data-reactid="933">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" data-reactid="934"><a data-reactid="935">5</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="936"><a data-reactid="937"></a></li><div class="ant-pagination-options" data-reactid="938"><div class="ant-pagination-options-size-changer ant-select ant-select-enabled" data-reactid="939"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="940"><div class="ant-select-selection__rendered" data-reactid="941"><div class="ant-select-selection-selected-value" title="10 / page" style="display:block;opacity:1;" data-reactid="942">10 / page</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="943"><b data-reactid="944"></b></span></div></div></div></ul></div></section><section class="code-box-meta markdown" data-reactid="945"><div class="code-box-title" data-reactid="946"><a href="#components-table-demo-paging" data-reactid="947">pagination</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/paging.md" data-reactid="948"><i class="anticon anticon-edit" data-reactid="949"></i></a></div><div data-reactid="950"><p data-reactid="951"><!-- react-text: 952 -->when use pagination in table.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="953"></i></section><section class="highlight-wrapper" data-reactid="954"><div class="highlight" data-reactid="955"><pre class="language-jsx" data-reactid="956"><code data-reactid="957"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> text <span class="token operator" >=</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token punctuation" >{</span>text<span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >for</span> <span class="token punctuation" >(</span><span class="token keyword" >let</span> i <span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >;</span> i <span class="token operator" >&lt;</span> <span class="token number" >46</span><span class="token punctuation" >;</span> i<span class="token operator" >++</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
data<span class="token punctuation" >.</span><span class="token function" >push</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> i<span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`Edward King </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>i<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`London, Park Lane no. </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>i<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token keyword" >const</span> pagination <span class="token operator" >=</span> <span class="token punctuation" >{</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> <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" >'Current: '</span><span class="token punctuation" >,</span> current<span class="token punctuation" >,</span> <span class="token string" >'; PageSize: '</span><span class="token punctuation" >,</span> pageSize<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</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> <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" >'Current: '</span><span class="token punctuation" >,</span> current<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token attr-name" >pagination</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>pagination<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-reset-filter" data-reactid="958"><section class="code-box-demo" data-reactid="959"><div data-reactid="960"><div class="table-operations" data-reactid="961"><a href="#" data-reactid="962">Age descending order</a><a href="#" data-reactid="963">Clear filters</a><a href="#" data-reactid="964">Clear filters and sorting</a></div><div class=" clearfix" data-reactid="965"><div class="ant-spin-nested-loading" data-reactid="966"><div class="ant-spin-container" data-reactid="967"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="968"><div class="ant-table-content" data-reactid="969"><div class="" data-reactid="970"><span data-reactid="971"><div class="ant-table-body" data-reactid="972"><table class="" data-reactid="973"><colgroup data-reactid="974"><col data-reactid="975"/><col data-reactid="976"/><col data-reactid="977"/></colgroup><thead class="ant-table-thead" data-reactid="978"><tr data-reactid="979"><th class="" data-reactid="980"><span data-reactid="981"><!-- react-text: 982 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="983"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="984"><i class="anticon anticon-caret-up " data-reactid="985"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="986"><i class="anticon anticon-caret-down " data-reactid="987"></i></span></div><i title="Filter Menu" class="anticon anticon-filter " data-reactid="988"></i></span></th><th class="" data-reactid="989"><span data-reactid="990"><!-- react-text: 991 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="992"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="993"><i class="anticon anticon-caret-up " data-reactid="994"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="995"><i class="anticon anticon-caret-down " data-reactid="996"></i></span></div></span></th><th class="" data-reactid="997"><span data-reactid="998"><!-- react-text: 999 -->Address<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1000"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1001"><i class="anticon anticon-caret-up " data-reactid="1002"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1003"><i class="anticon anticon-caret-down " data-reactid="1004"></i></span></div><i title="Filter Menu" class="anticon anticon-filter " data-reactid="1005"></i></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1006"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1007"><td class="" data-reactid="1008"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1009"></span><!-- react-empty: 1010 --><!-- react-text: 1011 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1012"><!-- react-text: 1013 -->32<!-- /react-text --></td><td class="" data-reactid="1014"><!-- react-text: 1015 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1016"><td class="" data-reactid="1017"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1018"></span><!-- react-empty: 1019 --><!-- react-text: 1020 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1021"><!-- react-text: 1022 -->42<!-- /react-text --></td><td class="" data-reactid="1023"><!-- react-text: 1024 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1025"><td class="" data-reactid="1026"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1027"></span><!-- react-empty: 1028 --><!-- react-text: 1029 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1030"><!-- react-text: 1031 -->32<!-- /react-text --></td><td class="" data-reactid="1032"><!-- react-text: 1033 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1034"><td class="" data-reactid="1035"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1036"></span><!-- react-empty: 1037 --><!-- react-text: 1038 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1039"><!-- react-text: 1040 -->32<!-- /react-text --></td><td class="" data-reactid="1041"><!-- react-text: 1042 -->London No. 2 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1043"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1044"><a data-reactid="1045"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1046"><a data-reactid="1047">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1048"><a data-reactid="1049"></a></li><!-- react-empty: 1050 --></ul></div></div><style data-reactid="1051">.table-operations {
font-size: 12px;
text-align: right;
margin-bottom: 16px;
}
.table-operations a {
margin-left: 8px;
}</style></section><section class="code-box-meta markdown" data-reactid="1052"><div class="code-box-title" data-reactid="1053"><a href="#components-table-demo-reset-filter" data-reactid="1054">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="1055"><i class="anticon anticon-edit" data-reactid="1056"></i></a></div><div data-reactid="1057"><p data-reactid="1058"><!-- react-text: 1059 -->Control filters and sorters by <!-- /react-text --><code data-reactid="1060"><!-- react-text: 1061 -->fileredValue<!-- /react-text --></code><!-- react-text: 1062 --> and <!-- /react-text --><code data-reactid="1063"><!-- react-text: 1064 -->sortOrder<!-- /react-text --></code><!-- react-text: 1065 -->.<!-- /react-text --></p><blockquote data-reactid="1066"><ol data-reactid="1067"><li data-reactid="1068"><p data-reactid="1069"><!-- react-text: 1070 -->Defining <!-- /react-text --><code data-reactid="1071"><!-- react-text: 1072 -->fileredValue<!-- /react-text --></code><!-- react-text: 1073 --> or <!-- /react-text --><code data-reactid="1074"><!-- react-text: 1075 -->sortOrder<!-- /react-text --></code><!-- react-text: 1076 --> means that it is in the controlled mode.<!-- /react-text --></p></li><li data-reactid="1077"><p data-reactid="1078"><!-- react-text: 1079 -->Make sure <!-- /react-text --><code data-reactid="1080"><!-- react-text: 1081 -->sortOrder<!-- /react-text --></code><!-- react-text: 1082 --> is assigned for only one column.<!-- /react-text --></p></li><li data-reactid="1083"><p data-reactid="1084"><code data-reactid="1085"><!-- react-text: 1086 -->column.key<!-- /react-text --></code><!-- react-text: 1087 --> is required.<!-- /react-text --></p></li></ol></blockquote></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="1088"></i></section><section class="highlight-wrapper" data-reactid="1089"><div class="highlight" data-reactid="1090"><pre class="language-jsx" data-reactid="1091"><code data-reactid="1092"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >42</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Joe Black'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'Sidney No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'4'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Red'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 2 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >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 punctuation" >{</span>
<span class="token function" >getInitialState</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >return</span> <span class="token punctuation" >{</span>
filteredInfo<span class="token punctuation" >:</span> <span class="token keyword" >null</span><span class="token punctuation" >,</span>
sortedInfo<span class="token punctuation" >:</span> <span class="token keyword" >null</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<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> <span class="token punctuation" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'Various parameters'</span><span class="token punctuation" >,</span> pagination<span class="token punctuation" >,</span> filters<span class="token punctuation" >,</span> sorter<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
filteredInfo<span class="token punctuation" >:</span> filters<span class="token punctuation" >,</span>
sortedInfo<span class="token punctuation" >:</span> sorter<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token function" >clearFilters</span><span class="token punctuation" >(</span>e<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
e<span class="token punctuation" >.</span><span class="token function" >preventDefault</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> filteredInfo<span class="token punctuation" >:</span> <span class="token keyword" >null</span> <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token function" >clearAll</span><span class="token punctuation" >(</span>e<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
e<span class="token punctuation" >.</span><span class="token function" >preventDefault</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
filteredInfo<span class="token punctuation" >:</span> <span class="token keyword" >null</span><span class="token punctuation" >,</span>
sortedInfo<span class="token punctuation" >:</span> <span class="token keyword" >null</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token function" >setAgeSort</span><span class="token punctuation" >(</span>e<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
e<span class="token punctuation" >.</span><span class="token function" >preventDefault</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
sortedInfo<span class="token punctuation" >:</span> <span class="token punctuation" >{</span>
order<span class="token punctuation" >:</span> <span class="token string" >'descend'</span><span class="token punctuation" >,</span>
columnKey<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token function" >render</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >let</span> <span class="token punctuation" >{</span> sortedInfo<span class="token punctuation" >,</span> filteredInfo <span class="token punctuation" >}</span> <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >;</span>
sortedInfo <span class="token operator" >=</span> sortedInfo <span class="token operator" >||</span> <span class="token punctuation" >{</span><span class="token punctuation" >}</span><span class="token punctuation" >;</span>
filteredInfo <span class="token operator" >=</span> filteredInfo <span class="token operator" >||</span> <span class="token punctuation" >{</span><span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
filters<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
<span class="token punctuation" >{</span> text<span class="token punctuation" >:</span> <span class="token string" >'Joe'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'Joe'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> text<span class="token punctuation" >:</span> <span class="token string" >'Jim'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'Jim'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
filteredValue<span class="token punctuation" >:</span> filteredInfo<span class="token punctuation" >.</span>name<span class="token punctuation" >,</span>
onFilter<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>value<span class="token punctuation" >,</span> record<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> record<span class="token punctuation" >.</span>name<span class="token punctuation" >.</span><span class="token function" >includes</span><span class="token punctuation" >(</span>value<span class="token punctuation" >)</span><span class="token punctuation" >,</span>
sorter<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>a<span class="token punctuation" >,</span> b<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> a<span class="token punctuation" >.</span>name<span class="token punctuation" >.</span>length <span class="token operator" >-</span> b<span class="token punctuation" >.</span>name<span class="token punctuation" >.</span>length<span class="token punctuation" >,</span>
sortOrder<span class="token punctuation" >:</span> sortedInfo<span class="token punctuation" >.</span>columnKey <span class="token operator" >===</span> <span class="token string" >'name'</span> <span class="token operator" >&amp;&amp;</span> sortedInfo<span class="token punctuation" >.</span>order<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
sorter<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>a<span class="token punctuation" >,</span> b<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> a<span class="token punctuation" >.</span>age <span class="token operator" >-</span> b<span class="token punctuation" >.</span>age<span class="token punctuation" >,</span>
sortOrder<span class="token punctuation" >:</span> sortedInfo<span class="token punctuation" >.</span>columnKey <span class="token operator" >===</span> <span class="token string" >'age'</span> <span class="token operator" >&amp;&amp;</span> sortedInfo<span class="token punctuation" >.</span>order<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
filters<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
<span class="token punctuation" >{</span> text<span class="token punctuation" >:</span> <span class="token string" >'London'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'London'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> text<span class="token punctuation" >:</span> <span class="token string" >'New York'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'New York'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
filteredValue<span class="token punctuation" >:</span> filteredInfo<span class="token punctuation" >.</span>address<span class="token punctuation" >,</span>
onFilter<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>value<span class="token punctuation" >,</span> record<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> record<span class="token punctuation" >.</span>address<span class="token punctuation" >.</span><span class="token function" >includes</span><span class="token punctuation" >(</span>value<span class="token punctuation" >)</span><span class="token punctuation" >,</span>
sorter<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>a<span class="token punctuation" >,</span> b<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> a<span class="token punctuation" >.</span>address<span class="token punctuation" >.</span>length <span class="token operator" >-</span> b<span class="token punctuation" >.</span>address<span class="token punctuation" >.</span>length<span class="token punctuation" >,</span>
sortOrder<span class="token punctuation" >:</span> sortedInfo<span class="token punctuation" >.</span>columnKey <span class="token operator" >===</span> <span class="token string" >'address'</span> <span class="token operator" >&amp;&amp;</span> sortedInfo<span class="token punctuation" >.</span>order<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >return</span> <span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>table-operations<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span> <span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>setAgeSort<span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>Age descending order<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span> <span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>clearFilters<span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>Clear filters<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span> <span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>clearAll<span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>Clear filters and sorting<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>handleChange<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>App</span> <span class="token punctuation" >/></span></span><span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div><div class="highlight" data-reactid="1093"><pre data-reactid="1094"><code class="css" data-reactid="1095"><span class="token selector" ><span class="token class" >.table-operations</span> </span><span class="token punctuation" >{</span>
<span class="token property" >font-size</span><span class="token punctuation" >:</span> <span class="token number" >12</span>px<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 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> a </span><span class="token punctuation" >{</span>
<span class="token property" >margin-left</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="1096"><section class="code-box-demo" data-reactid="1097"><div class=" clearfix" data-reactid="1098"><div class="ant-spin-nested-loading" data-reactid="1099"><div class="ant-spin-container" data-reactid="1100"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1101"><div class="ant-table-content" data-reactid="1102"><div class="" data-reactid="1103"><span data-reactid="1104"><div class="ant-table-body" data-reactid="1105"><table class="" data-reactid="1106"><colgroup data-reactid="1107"><col data-reactid="1108"/><col data-reactid="1109"/><col data-reactid="1110"/></colgroup><thead class="ant-table-thead" data-reactid="1111"><tr data-reactid="1112"><th class="" data-reactid="1113"><span data-reactid="1114"><!-- react-text: 1115 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1116"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1117"><i class="anticon anticon-caret-up " data-reactid="1118"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1119"><i class="anticon anticon-caret-down " data-reactid="1120"></i></span></div><i title="Filter Menu" class="anticon anticon-filter " data-reactid="1121"></i></span></th><th class="" data-reactid="1122"><span data-reactid="1123"><!-- react-text: 1124 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1125"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1126"><i class="anticon anticon-caret-up " data-reactid="1127"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1128"><i class="anticon anticon-caret-down " data-reactid="1129"></i></span></div></span></th><th class="" data-reactid="1130"><span data-reactid="1131"><!-- react-text: 1132 -->Address<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1133"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1134"><i class="anticon anticon-caret-up " data-reactid="1135"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1136"><i class="anticon anticon-caret-down " data-reactid="1137"></i></span></div><i title="Filter Menu" class="anticon anticon-filter " data-reactid="1138"></i></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1139"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1140"><td class="" data-reactid="1141"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1142"></span><!-- react-empty: 1143 --><!-- react-text: 1144 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1145"><!-- react-text: 1146 -->32<!-- /react-text --></td><td class="" data-reactid="1147"><!-- react-text: 1148 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1149"><td class="" data-reactid="1150"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1151"></span><!-- react-empty: 1152 --><!-- react-text: 1153 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1154"><!-- react-text: 1155 -->42<!-- /react-text --></td><td class="" data-reactid="1156"><!-- react-text: 1157 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1158"><td class="" data-reactid="1159"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1160"></span><!-- react-empty: 1161 --><!-- react-text: 1162 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1163"><!-- react-text: 1164 -->32<!-- /react-text --></td><td class="" data-reactid="1165"><!-- react-text: 1166 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1167"><td class="" data-reactid="1168"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1169"></span><!-- react-empty: 1170 --><!-- react-text: 1171 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1172"><!-- react-text: 1173 -->32<!-- /react-text --></td><td class="" data-reactid="1174"><!-- react-text: 1175 -->London No. 2 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1176"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1177"><a data-reactid="1178"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1179"><a data-reactid="1180">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1181"><a data-reactid="1182"></a></li><!-- react-empty: 1183 --></ul></div></section><section class="code-box-meta markdown" data-reactid="1184"><div class="code-box-title" data-reactid="1185"><a href="#components-table-demo-head" data-reactid="1186">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="1187"><i class="anticon anticon-edit" data-reactid="1188"></i></a></div><div data-reactid="1189"><p data-reactid="1190"><!-- react-text: 1191 -->Use <!-- /react-text --><code data-reactid="1192"><!-- react-text: 1193 -->filters<!-- /react-text --></code><!-- react-text: 1194 --> to generate filter menu in columns, <!-- /react-text --><code data-reactid="1195"><!-- react-text: 1196 -->onFilter<!-- /react-text --></code><!-- react-text: 1197 --> to determine filtered result, and <!-- /react-text --><code data-reactid="1198"><!-- react-text: 1199 -->filterMultiple<!-- /react-text --></code><!-- react-text: 1200 --> to indicate whether it&#x27;s multiple or single selection.<!-- /react-text --></p><p data-reactid="1201"><!-- react-text: 1202 -->Use <!-- /react-text --><code data-reactid="1203"><!-- react-text: 1204 -->sorter<!-- /react-text --></code><!-- react-text: 1205 --> to make a column sortable. <!-- /react-text --><code data-reactid="1206"><!-- react-text: 1207 -->sorter<!-- /react-text --></code><!-- react-text: 1208 --> can be a function <!-- /react-text --><code data-reactid="1209"><!-- react-text: 1210 -->function(a, b) { ... }<!-- /react-text --></code><!-- react-text: 1211 --> for sorting data locally.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="1212"></i></section><section class="highlight-wrapper" data-reactid="1213"><div class="highlight" data-reactid="1214"><pre class="language-jsx" data-reactid="1215"><code data-reactid="1216"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
filters<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
text<span class="token punctuation" >:</span> <span class="token string" >'Joe'</span><span class="token punctuation" >,</span>
value<span class="token punctuation" >:</span> <span class="token string" >'Joe'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
text<span class="token punctuation" >:</span> <span class="token string" >'Jim'</span><span class="token punctuation" >,</span>
value<span class="token punctuation" >:</span> <span class="token string" >'Jim'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
text<span class="token punctuation" >:</span> <span class="token string" >'Submenu'</span><span class="token punctuation" >,</span>
value<span class="token punctuation" >:</span> <span class="token string" >'Submenu'</span><span class="token punctuation" >,</span>
children<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
text<span class="token punctuation" >:</span> <span class="token string" >'Green'</span><span class="token punctuation" >,</span>
value<span class="token punctuation" >:</span> <span class="token string" >'Green'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
text<span class="token punctuation" >:</span> <span class="token string" >'Black'</span><span class="token punctuation" >,</span>
value<span class="token punctuation" >:</span> <span class="token string" >'Black'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
<span class="token comment" spellcheck="true">// specify the condition of filtering result</span>
<span class="token comment" spellcheck="true">// here is that finding the name started with `value`</span>
onFilter<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>value<span class="token punctuation" >,</span> record<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> record<span class="token punctuation" >.</span>name<span class="token punctuation" >.</span><span class="token function" >indexOf</span><span class="token punctuation" >(</span>value<span class="token punctuation" >)</span> <span class="token operator" >===</span> <span class="token number" >0</span><span class="token punctuation" >,</span>
sorter<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>a<span class="token punctuation" >,</span> b<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> a<span class="token punctuation" >.</span>name<span class="token punctuation" >.</span>length <span class="token operator" >-</span> b<span class="token punctuation" >.</span>name<span class="token punctuation" >.</span>length<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
sorter<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>a<span class="token punctuation" >,</span> b<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> a<span class="token punctuation" >.</span>age <span class="token operator" >-</span> b<span class="token punctuation" >.</span>age<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
filters<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
text<span class="token punctuation" >:</span> <span class="token string" >'London'</span><span class="token punctuation" >,</span>
value<span class="token punctuation" >:</span> <span class="token string" >'London'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
text<span class="token punctuation" >:</span> <span class="token string" >'New York'</span><span class="token punctuation" >,</span>
value<span class="token punctuation" >:</span> <span class="token string" >'New York'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
filterMultiple<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
onFilter<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>value<span class="token punctuation" >,</span> record<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> record<span class="token punctuation" >.</span>address<span class="token punctuation" >.</span><span class="token function" >indexOf</span><span class="token punctuation" >(</span>value<span class="token punctuation" >)</span> <span class="token operator" >===</span> <span class="token number" >0</span><span class="token punctuation" >,</span>
sorter<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>a<span class="token punctuation" >,</span> b<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> a<span class="token punctuation" >.</span>address<span class="token punctuation" >.</span>length <span class="token operator" >-</span> b<span class="token punctuation" >.</span>address<span class="token punctuation" >.</span>length<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >42</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Joe Black'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'Sidney No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'4'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Red'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 2 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >function</span> <span class="token function" >onChange</span><span class="token punctuation" >(</span>pagination<span class="token punctuation" >,</span> filters<span class="token punctuation" >,</span> sorter<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'params'</span><span class="token punctuation" >,</span> pagination<span class="token punctuation" >,</span> filters<span class="token punctuation" >,</span> sorter<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>onChange<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-custom-filter-panel" data-reactid="1217"><section class="code-box-demo" data-reactid="1218"><div class=" clearfix" data-reactid="1219"><div class="ant-spin-nested-loading" data-reactid="1220"><div class="ant-spin-container" data-reactid="1221"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1222"><div class="ant-table-content" data-reactid="1223"><div class="" data-reactid="1224"><span data-reactid="1225"><div class="ant-table-body" data-reactid="1226"><table class="" data-reactid="1227"><colgroup data-reactid="1228"><col data-reactid="1229"/><col data-reactid="1230"/><col data-reactid="1231"/></colgroup><thead class="ant-table-thead" data-reactid="1232"><tr data-reactid="1233"><th class="" data-reactid="1234"><span data-reactid="1235"><!-- react-text: 1236 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter " data-reactid="1237"></i></span></th><th class="" data-reactid="1238"><span data-reactid="1239"><!-- react-text: 1240 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1241"><span data-reactid="1242"><!-- react-text: 1243 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1244"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1245"><td class="" data-reactid="1246"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1247"></span><!-- react-empty: 1248 --><!-- react-text: 1249 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1250"><!-- react-text: 1251 -->32<!-- /react-text --></td><td class="" data-reactid="1252"><!-- react-text: 1253 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1254"><td class="" data-reactid="1255"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1256"></span><!-- react-empty: 1257 --><!-- react-text: 1258 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1259"><!-- react-text: 1260 -->42<!-- /react-text --></td><td class="" data-reactid="1261"><!-- react-text: 1262 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1263"><td class="" data-reactid="1264"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1265"></span><!-- react-empty: 1266 --><!-- react-text: 1267 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1268"><!-- react-text: 1269 -->32<!-- /react-text --></td><td class="" data-reactid="1270"><!-- react-text: 1271 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1272"><td class="" data-reactid="1273"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1274"></span><!-- react-empty: 1275 --><!-- react-text: 1276 -->Jim Red<!-- /react-text --></td><td class="" data-reactid="1277"><!-- react-text: 1278 -->32<!-- /react-text --></td><td class="" data-reactid="1279"><!-- react-text: 1280 -->London No. 2 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1281"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1282"><a data-reactid="1283"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1284"><a data-reactid="1285">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1286"><a data-reactid="1287"></a></li><!-- react-empty: 1288 --></ul></div><style data-reactid="1289">.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="1290"><div class="code-box-title" data-reactid="1291"><a href="#components-table-demo-custom-filter-panel" data-reactid="1292">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="1293"><i class="anticon anticon-edit" data-reactid="1294"></i></a></div><div data-reactid="1295"><p data-reactid="1296"><!-- react-text: 1297 -->Implement a customized column search example via <!-- /react-text --><code data-reactid="1298"><!-- react-text: 1299 -->filterDropdown<!-- /react-text --></code><!-- react-text: 1300 -->, <!-- /react-text --><code data-reactid="1301"><!-- react-text: 1302 -->filterDropdownVisible<!-- /react-text --></code><!-- react-text: 1303 --> and <!-- /react-text --><code data-reactid="1304"><!-- react-text: 1305 -->filterDropdownVisibleChange<!-- /react-text --></code><!-- react-text: 1306 -->.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="1307"></i></section><section class="highlight-wrapper" data-reactid="1308"><div class="highlight" data-reactid="1309"><pre class="language-jsx" data-reactid="1310"><code data-reactid="1311"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table<span class="token punctuation" >,</span> Input<span class="token punctuation" >,</span> Button <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >42</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Joe Black'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'Sidney No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'4'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Red'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 2 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >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 punctuation" >{</span>
<span class="token function" >getInitialState</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >return</span> <span class="token punctuation" >{</span>
filterDropdownVisible<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
data<span class="token punctuation" >,</span>
searchText<span class="token punctuation" >:</span> <span class="token string" >''</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token function" >onInputChange</span><span class="token punctuation" >(</span>e<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> searchText<span class="token punctuation" >:</span> e<span class="token punctuation" >.</span>target<span class="token punctuation" >.</span>value <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token function" >onSearch</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> <span class="token punctuation" >{</span> searchText <span class="token punctuation" >}</span> <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >;</span>
<span class="token keyword" >const</span> reg <span class="token operator" >=</span> <span class="token keyword" >new</span> <span class="token class-name" >RegExp</span><span class="token punctuation" >(</span>searchText<span class="token punctuation" >,</span> <span class="token string" >'gi'</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
filterDropdownVisible<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
data<span class="token punctuation" >:</span> data<span class="token punctuation" >.</span><span class="token function" >map</span><span class="token punctuation" >(</span><span class="token punctuation" >(</span>record<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> match <span class="token operator" >=</span> record<span class="token punctuation" >.</span>name<span class="token punctuation" >.</span><span class="token function" >match</span><span class="token punctuation" >(</span>reg<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span><span class="token operator" >!</span>match<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >return</span> <span class="token keyword" >null</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token keyword" >return</span> <span class="token punctuation" >{</span>
<span class="token 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 tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >{</span>record<span class="token punctuation" >.</span>name<span class="token punctuation" >.</span><span class="token function" >split</span><span class="token punctuation" >(</span>reg<span class="token punctuation" >)</span><span class="token punctuation" >.</span><span class="token function" >map</span><span class="token punctuation" >(</span><span class="token punctuation" >(</span>text<span class="token punctuation" >,</span> i<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >(</span>
i <span class="token operator" >></span> <span class="token number" >0</span> <span class="token operator" >?</span> <span class="token punctuation" >[</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>highlight<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token punctuation" >{</span>match<span class="token punctuation" >[</span><span class="token number" >0</span><span class="token punctuation" >]</span><span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span><span class="token punctuation" >,</span> text<span class="token punctuation" >]</span> <span class="token punctuation" >:</span> text
<span class="token punctuation" >)</span><span class="token punctuation" >)</span><span class="token punctuation" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >.</span><span class="token function" >filter</span><span class="token punctuation" >(</span>record <span class="token operator" >=</span><span class="token operator" >></span> <span class="token operator" >!</span><span class="token operator" >!</span>record<span class="token punctuation" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token function" >render</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
filterDropdown<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>custom-filter-dropdown<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Input</span>
<span class="token attr-name" >placeholder</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Search</span> <span class="token attr-name" >name"</span>
<span class="token attr-name" >value</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>searchText<span class="token punctuation" >}</span></span>
<span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>onInputChange<span class="token punctuation" >}</span></span>
<span class="token attr-name" >onPressEnter</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>onSearch<span class="token punctuation" >}</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>primary<span class="token punctuation" >"</span></span> <span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>onSearch<span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>Search<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Button</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >)</span><span class="token punctuation" >,</span>
filterDropdownVisible<span class="token punctuation" >:</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>filterDropdownVisible<span class="token punctuation" >,</span>
onFilterDropdownVisibleChange<span class="token punctuation" >:</span> visible <span class="token operator" >=</span><span class="token operator" >></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> filterDropdownVisible<span class="token punctuation" >:</span> visible <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >return</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>data<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>App</span> <span class="token punctuation" >/></span></span><span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div><div class="highlight" data-reactid="1312"><pre data-reactid="1313"><code class="css" data-reactid="1314"><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="1315"><section class="code-box-demo" data-reactid="1316"><div class=" clearfix" data-reactid="1317"><div class="ant-spin-nested-loading" data-reactid="1318"><div class="ant-spin-container" data-reactid="1319"><div class="ant-table ant-table-large ant-table-empty ant-table-scroll-position-left" data-reactid="1320"><div class="ant-table-content" data-reactid="1321"><div class="" data-reactid="1322"><span data-reactid="1323"><div class="ant-table-body" data-reactid="1324"><table class="" data-reactid="1325"><colgroup data-reactid="1326"><col style="width:20%;min-width:20%;" data-reactid="1327"/><col style="width:20%;min-width:20%;" data-reactid="1328"/><col data-reactid="1329"/></colgroup><thead class="ant-table-thead" data-reactid="1330"><tr data-reactid="1331"><th class="" data-reactid="1332"><span data-reactid="1333"><!-- react-text: 1334 -->Name<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="1335"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="1336"><i class="anticon anticon-caret-up " data-reactid="1337"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="1338"><i class="anticon anticon-caret-down " data-reactid="1339"></i></span></div></span></th><th class="" data-reactid="1340"><span data-reactid="1341"><!-- react-text: 1342 -->Gender<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter " data-reactid="1343"></i></span></th><th class="" data-reactid="1344"><span data-reactid="1345"><!-- react-text: 1346 -->Email<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1347"></tbody></table></div></span><div class="ant-table-placeholder" data-reactid="1348">No Data</div></div></div></div></div></div></div></section><section class="code-box-meta markdown" data-reactid="1349"><div class="code-box-title" data-reactid="1350"><a href="#components-table-demo-ajax" data-reactid="1351">Ajax</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/ajax.md" data-reactid="1352"><i class="anticon anticon-edit" data-reactid="1353"></i></a></div><div data-reactid="1354"><p data-reactid="1355"><!-- react-text: 1356 -->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="1357"><strong data-reactid="1358"><!-- react-text: 1359 -->Note, this example use <!-- /react-text --><a href="https://randomuser.me" data-reactid="1360"><!-- react-text: 1361 -->Mock API<!-- /react-text --></a><!-- react-text: 1362 --> that you can look up in Network Console.<!-- /react-text --></strong></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="1363"></i></section><section class="highlight-wrapper" data-reactid="1364"><div class="highlight" data-reactid="1365"><pre class="language-jsx" data-reactid="1366"><code data-reactid="1367"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >import</span> reqwest <span class="token keyword" >from</span> <span class="token string" >'reqwest'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
sorter<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> name <span class="token operator" >=</span><span class="token operator" >></span> <span class="token template-string" ><span class="token string" >`</span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>name<span class="token punctuation" >.</span>first<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" > </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>name<span class="token punctuation" >.</span>last<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token string" >'20%'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Gender'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'gender'</span><span class="token punctuation" >,</span>
filters<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
<span class="token punctuation" >{</span> text<span class="token punctuation" >:</span> <span class="token string" >'Male'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'male'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> text<span class="token punctuation" >:</span> <span class="token string" >'Female'</span><span class="token punctuation" >,</span> value<span class="token punctuation" >:</span> <span class="token string" >'female'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >]</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token string" >'20%'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Email'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'email'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >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 punctuation" >{</span>
<span class="token function" >getInitialState</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >return</span> <span class="token punctuation" >{</span>
data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
pagination<span class="token punctuation" >:</span> <span class="token punctuation" >{</span><span class="token punctuation" >}</span><span class="token punctuation" >,</span>
loading<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</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 punctuation" >{</span>
<span class="token keyword" >const</span> pager <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>pagination<span class="token punctuation" >;</span>
pager<span class="token punctuation" >.</span>current <span class="token operator" >=</span> pagination<span class="token punctuation" >.</span>current<span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
pagination<span class="token punctuation" >:</span> pager<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >fetch</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
results<span class="token punctuation" >:</span> pagination<span class="token punctuation" >.</span>pageSize<span class="token punctuation" >,</span>
page<span class="token punctuation" >:</span> pagination<span class="token punctuation" >.</span>current<span class="token punctuation" >,</span>
sortField<span class="token punctuation" >:</span> sorter<span class="token punctuation" >.</span>field<span class="token punctuation" >,</span>
sortOrder<span class="token punctuation" >:</span> sorter<span class="token punctuation" >.</span>order<span class="token punctuation" >,</span>
<span class="token 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 punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</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><span class="token punctuation" >}</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token string" >'params:'</span><span class="token punctuation" >,</span> params<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> loading<span class="token punctuation" >:</span> <span class="token boolean" >true</span> <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token function" >reqwest</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
url<span class="token punctuation" >:</span> <span class="token string" >'https://randomuser.me/api'</span><span class="token punctuation" >,</span>
method<span class="token punctuation" >:</span> <span class="token string" >'get'</span><span class="token punctuation" >,</span>
data<span class="token punctuation" >:</span> <span class="token punctuation" >{</span>
results<span class="token punctuation" >:</span> <span class="token number" >10</span><span class="token punctuation" >,</span>
<span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span>params<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
type<span class="token punctuation" >:</span> <span class="token string" >'json'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >.</span><span class="token function" >then</span><span class="token punctuation" >(</span><span class="token punctuation" >(</span>data<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> pagination <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>pagination<span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true">// Read total count from server</span>
<span class="token comment" spellcheck="true">// pagination.total = data.totalCount;</span>
pagination<span class="token punctuation" >.</span>total <span class="token operator" >=</span> <span class="token number" >200</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
loading<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
data<span class="token punctuation" >:</span> data<span class="token punctuation" >.</span>results<span class="token punctuation" >,</span>
pagination<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token function" >componentDidMount</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >fetch</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token function" >render</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >return</span> <span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span>
<span class="token attr-name" >rowKey</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>record <span class="token operator" >=</span><span class="token operator" >></span> record<span class="token punctuation" >.</span>registered<span class="token punctuation" >}</span></span>
<span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>data<span class="token punctuation" >}</span></span>
<span class="token attr-name" >pagination</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>pagination<span class="token punctuation" >}</span></span>
<span class="token attr-name" >loading</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>loading<span class="token punctuation" >}</span></span>
<span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>handleTableChange<span class="token punctuation" >}</span></span>
<span class="token punctuation" >/></span></span>
<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Test</span> <span class="token punctuation" >/></span></span><span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-nopagination" data-reactid="1368"><section class="code-box-demo" data-reactid="1369"><div class=" clearfix" data-reactid="1370"><div class="ant-spin-nested-loading" data-reactid="1371"><div class="ant-spin-container" data-reactid="1372"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1373"><div class="ant-table-content" data-reactid="1374"><div class="" data-reactid="1375"><span data-reactid="1376"><div class="ant-table-body" data-reactid="1377"><table class="" data-reactid="1378"><colgroup data-reactid="1379"><col data-reactid="1380"/><col data-reactid="1381"/><col data-reactid="1382"/></colgroup><thead class="ant-table-thead" data-reactid="1383"><tr data-reactid="1384"><th class="" data-reactid="1385"><span data-reactid="1386"><!-- react-text: 1387 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1388"><span data-reactid="1389"><!-- react-text: 1390 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1391"><span data-reactid="1392"><!-- react-text: 1393 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1394"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1395"><td class="" data-reactid="1396"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1397"></span><!-- react-empty: 1398 --><!-- react-text: 1399 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1400"><!-- react-text: 1401 -->32<!-- /react-text --></td><td class="" data-reactid="1402"><!-- react-text: 1403 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1404"><td class="" data-reactid="1405"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1406"></span><!-- react-empty: 1407 --><!-- react-text: 1408 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1409"><!-- react-text: 1410 -->42<!-- /react-text --></td><td class="" data-reactid="1411"><!-- react-text: 1412 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1413"><td class="" data-reactid="1414"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1415"></span><!-- react-empty: 1416 --><!-- react-text: 1417 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1418"><!-- react-text: 1419 -->32<!-- /react-text --></td><td class="" data-reactid="1420"><!-- react-text: 1421 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div></div></div></div></section><section class="code-box-meta markdown" data-reactid="1422"><div class="code-box-title" data-reactid="1423"><a href="#components-table-demo-nopagination" data-reactid="1424">No pagination</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/nopagination.md" data-reactid="1425"><i class="anticon anticon-edit" data-reactid="1426"></i></a></div><div data-reactid="1427"><p data-reactid="1428"><!-- react-text: 1429 -->Set <!-- /react-text --><code data-reactid="1430"><!-- react-text: 1431 -->pagination={false}<!-- /react-text --></code><!-- react-text: 1432 -->, then no data paging and pagination will be shown.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="1433"></i></section><section class="highlight-wrapper" data-reactid="1434"><div class="highlight" data-reactid="1435"><pre class="language-jsx" data-reactid="1436"><code data-reactid="1437"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >42</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Joe Black'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'Sidney No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token attr-name" >pagination</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token boolean" >false</span><span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-size" data-reactid="1438"><section class="code-box-demo" data-reactid="1439"><div data-reactid="1440"><h4 data-reactid="1441">Middle size table</h4><div class=" clearfix" data-reactid="1442"><div class="ant-spin-nested-loading" data-reactid="1443"><div class="ant-spin-container" data-reactid="1444"><div class="ant-table ant-table-middle ant-table-scroll-position-left" data-reactid="1445"><div class="ant-table-content" data-reactid="1446"><div class="" data-reactid="1447"><span data-reactid="1448"><div class="ant-table-body" data-reactid="1449"><table class="" data-reactid="1450"><colgroup data-reactid="1451"><col data-reactid="1452"/><col data-reactid="1453"/><col data-reactid="1454"/></colgroup><thead class="ant-table-thead" data-reactid="1455"><tr data-reactid="1456"><th class="" data-reactid="1457"><span data-reactid="1458"><!-- react-text: 1459 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1460"><span data-reactid="1461"><!-- react-text: 1462 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1463"><span data-reactid="1464"><!-- react-text: 1465 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1466"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1467"><td class="" data-reactid="1468"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1469"></span><!-- react-empty: 1470 --><!-- react-text: 1471 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1472"><!-- react-text: 1473 -->32<!-- /react-text --></td><td class="" data-reactid="1474"><!-- react-text: 1475 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1476"><td class="" data-reactid="1477"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1478"></span><!-- react-empty: 1479 --><!-- react-text: 1480 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1481"><!-- react-text: 1482 -->42<!-- /react-text --></td><td class="" data-reactid="1483"><!-- react-text: 1484 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1485"><td class="" data-reactid="1486"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1487"></span><!-- react-empty: 1488 --><!-- react-text: 1489 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1490"><!-- react-text: 1491 -->32<!-- /react-text --></td><td class="" data-reactid="1492"><!-- react-text: 1493 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination mini" unselectable="unselectable" data-reactid="1494"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1495"><a data-reactid="1496"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1497"><a data-reactid="1498">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1499"><a data-reactid="1500"></a></li><!-- react-empty: 1501 --></ul></div><h4 data-reactid="1502">Small size table</h4><div class=" clearfix" data-reactid="1503"><div class="ant-spin-nested-loading" data-reactid="1504"><div class="ant-spin-container" data-reactid="1505"><div class="ant-table ant-table-small ant-table-scroll-position-left" data-reactid="1506"><div class="ant-table-content" data-reactid="1507"><div class="" data-reactid="1508"><span data-reactid="1509"><div class="ant-table-body" data-reactid="1510"><table class="" data-reactid="1511"><colgroup data-reactid="1512"><col data-reactid="1513"/><col data-reactid="1514"/><col data-reactid="1515"/></colgroup><thead class="ant-table-thead" data-reactid="1516"><tr data-reactid="1517"><th class="" data-reactid="1518"><span data-reactid="1519"><!-- react-text: 1520 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1521"><span data-reactid="1522"><!-- react-text: 1523 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1524"><span data-reactid="1525"><!-- react-text: 1526 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1527"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1528"><td class="" data-reactid="1529"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1530"></span><!-- react-empty: 1531 --><!-- react-text: 1532 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1533"><!-- react-text: 1534 -->32<!-- /react-text --></td><td class="" data-reactid="1535"><!-- react-text: 1536 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1537"><td class="" data-reactid="1538"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1539"></span><!-- react-empty: 1540 --><!-- react-text: 1541 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1542"><!-- react-text: 1543 -->42<!-- /react-text --></td><td class="" data-reactid="1544"><!-- react-text: 1545 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1546"><td class="" data-reactid="1547"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1548"></span><!-- react-empty: 1549 --><!-- react-text: 1550 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1551"><!-- react-text: 1552 -->32<!-- /react-text --></td><td class="" data-reactid="1553"><!-- react-text: 1554 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination mini" unselectable="unselectable" data-reactid="1555"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1556"><a data-reactid="1557"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1558"><a data-reactid="1559">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1560"><a data-reactid="1561"></a></li><!-- react-empty: 1562 --></ul></div></div><style data-reactid="1563">#components-table-demo-size h4 { margin-bottom: 16px; }</style></section><section class="code-box-meta markdown" data-reactid="1564"><div class="code-box-title" data-reactid="1565"><a href="#components-table-demo-size" data-reactid="1566">size</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/size.md" data-reactid="1567"><i class="anticon anticon-edit" data-reactid="1568"></i></a></div><div data-reactid="1569"><p data-reactid="1570"><!-- react-text: 1571 -->Two compacted table size: <!-- /react-text --><code data-reactid="1572"><!-- react-text: 1573 -->middle<!-- /react-text --></code><!-- react-text: 1574 --> and <!-- /react-text --><code data-reactid="1575"><!-- react-text: 1576 -->small<!-- /react-text --></code><!-- react-text: 1577 -->, <!-- /react-text --><code data-reactid="1578"><!-- react-text: 1579 -->small<!-- /react-text --></code><!-- react-text: 1580 --> size is used in Modal only.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="1581"></i></section><section class="highlight-wrapper" data-reactid="1582"><div class="highlight" data-reactid="1583"><pre class="language-jsx" data-reactid="1584"><code data-reactid="1585"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >42</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Joe Black'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'Sidney No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>h4</span><span class="token punctuation" >></span></span>Middle size table<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>h4</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token attr-name" >size</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>middle<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>h4</span><span class="token punctuation" >></span></span>Small size table<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>h4</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token attr-name" >size</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>small<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-bordered" data-reactid="1586"><section class="code-box-demo" data-reactid="1587"><div class=" clearfix" data-reactid="1588"><div class="ant-spin-nested-loading" data-reactid="1589"><div class="ant-spin-container" data-reactid="1590"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="1591"><div class="ant-table-title" data-reactid="1592">Header</div><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="column-money" data-reactid="1607"><span data-reactid="1608"><!-- react-text: 1609 -->Cash Assets<!-- /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 --><a href="#" data-reactid="1618">John Brown</a></td><td class="column-money" data-reactid="1619"><!-- react-text: 1620 -->￥300,000.00<!-- /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 --><a href="#" data-reactid="1627">Jim Green</a></td><td class="column-money" data-reactid="1628"><!-- react-text: 1629 -->￥1,256,000.00<!-- /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 --><a href="#" data-reactid="1636">Joe Black</a></td><td class="column-money" data-reactid="1637"><!-- react-text: 1638 -->￥120,000.00<!-- /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 class="ant-table-footer" data-reactid="1641">Footer</div></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1642"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1643"><a data-reactid="1644"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1645"><a data-reactid="1646">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1647"><a data-reactid="1648"></a></li><!-- react-empty: 1649 --></ul></div><style data-reactid="1650">.column-money {
text-align: right;
}</style></section><section class="code-box-meta markdown" data-reactid="1651"><div class="code-box-title" data-reactid="1652"><a href="#components-table-demo-bordered" data-reactid="1653">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="1654"><i class="anticon anticon-edit" data-reactid="1655"></i></a></div><div data-reactid="1656"><p data-reactid="1657"><!-- react-text: 1658 -->Add border, title and footer for table.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="1659"></i></section><section class="highlight-wrapper" data-reactid="1660"><div class="highlight" data-reactid="1661"><pre class="language-jsx" data-reactid="1662"><code data-reactid="1663"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> text <span class="token operator" >=</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token punctuation" >{</span>text<span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Cash Assets'</span><span class="token punctuation" >,</span>
className<span class="token punctuation" >:</span> <span class="token string" >'column-money'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'money'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span>
money<span class="token punctuation" >:</span> <span class="token string" >'￥300,000.00'</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green'</span><span class="token punctuation" >,</span>
money<span class="token punctuation" >:</span> <span class="token string" >'￥1,256,000.00'</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Joe Black'</span><span class="token punctuation" >,</span>
money<span class="token punctuation" >:</span> <span class="token string" >'￥120,000.00'</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'Sidney No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span>
<span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span>
<span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span>
<span class="token attr-name" >bordered</span>
<span class="token attr-name" >title</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token string" >'Header'</span><span class="token punctuation" >}</span></span>
<span class="token attr-name" >footer</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token string" >'Footer'</span><span class="token punctuation" >}</span></span>
<span class="token punctuation" >/></span></span>
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div><div class="highlight" data-reactid="1664"><pre data-reactid="1665"><code class="css" data-reactid="1666"><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="1667"><section class="code-box-demo" data-reactid="1668"><div class="table clearfix" data-reactid="1669"><div class="ant-spin-nested-loading" data-reactid="1670"><div class="ant-spin-container" data-reactid="1671"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1672"><div class="ant-table-content" data-reactid="1673"><div class="" data-reactid="1674"><span data-reactid="1675"><div class="ant-table-body" data-reactid="1676"><table class="" data-reactid="1677"><colgroup data-reactid="1678"><col class="ant-table-expand-icon-col" data-reactid="1679"/><col data-reactid="1680"/><col data-reactid="1681"/><col data-reactid="1682"/><col data-reactid="1683"/></colgroup><thead class="ant-table-thead" data-reactid="1684"><tr data-reactid="1685"><th class="ant-table-expand-icon-th" title="" rowspan="1" data-reactid="1686"></th><th class="" data-reactid="1687"><span data-reactid="1688"><!-- react-text: 1689 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1690"><span data-reactid="1691"><!-- react-text: 1692 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1693"><span data-reactid="1694"><!-- react-text: 1695 -->Address<!-- /react-text --></span></th><th class="" data-reactid="1696"><span data-reactid="1697"><!-- react-text: 1698 -->Action<!-- /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="ant-table-row-expand-icon-cell" data-reactid="1701"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1702"></span></td><td class="" data-reactid="1703"><!-- react-text: 1704 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1705"><!-- react-text: 1706 -->32<!-- /react-text --></td><td class="" data-reactid="1707"><!-- react-text: 1708 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1709"><a href="#" data-reactid="1710">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1711"><td class="ant-table-row-expand-icon-cell" data-reactid="1712"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1713"></span></td><td class="" data-reactid="1714"><!-- react-text: 1715 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="1716"><!-- react-text: 1717 -->42<!-- /react-text --></td><td class="" data-reactid="1718"><!-- react-text: 1719 -->London No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1720"><a href="#" data-reactid="1721">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1722"><td class="ant-table-row-expand-icon-cell" data-reactid="1723"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1724"></span></td><td class="" data-reactid="1725"><!-- react-text: 1726 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="1727"><!-- react-text: 1728 -->32<!-- /react-text --></td><td class="" data-reactid="1729"><!-- react-text: 1730 -->Sidney No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="1731"><a href="#" data-reactid="1732">Delete</a></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1733"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1734"><a data-reactid="1735"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1736"><a data-reactid="1737">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1738"><a data-reactid="1739"></a></li><!-- react-empty: 1740 --></ul></div></section><section class="code-box-meta markdown" data-reactid="1741"><div class="code-box-title" data-reactid="1742"><a href="#components-table-demo-expand" data-reactid="1743">Expandable Row</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/table/demo/expand.md" data-reactid="1744"><i class="anticon anticon-edit" data-reactid="1745"></i></a></div><div data-reactid="1746"><p data-reactid="1747"><!-- react-text: 1748 -->When there&#x27;s too much information to show and the table can&#x27;t display all at once.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="1749"></i></section><section class="highlight-wrapper" data-reactid="1750"><div class="highlight" data-reactid="1751"><pre class="language-jsx" data-reactid="1752"><code data-reactid="1753"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'name'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'age'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'address'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Action'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >''</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'x'</span><span class="token punctuation" >,</span> render<span class="token punctuation" >:</span> <span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Delete<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span>
<span class="token punctuation" >{</span> key<span class="token punctuation" >:</span> <span class="token number" >1</span><span class="token punctuation" >,</span> name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span> age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span> address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 1 Lake Park'</span><span class="token punctuation" >,</span> description<span class="token punctuation" >:</span> <span class="token string" >'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> key<span class="token punctuation" >:</span> <span class="token number" >2</span><span class="token punctuation" >,</span> name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green'</span><span class="token punctuation" >,</span> age<span class="token punctuation" >:</span> <span class="token number" >42</span><span class="token punctuation" >,</span> address<span class="token punctuation" >:</span> <span class="token string" >'London No. 1 Lake Park'</span><span class="token punctuation" >,</span> description<span class="token punctuation" >:</span> <span class="token string" >'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> key<span class="token punctuation" >:</span> <span class="token number" >3</span><span class="token punctuation" >,</span> name<span class="token punctuation" >:</span> <span class="token string" >'Joe Black'</span><span class="token punctuation" >,</span> age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span> address<span class="token punctuation" >:</span> <span class="token string" >'Sidney No. 1 Lake Park'</span><span class="token punctuation" >,</span> description<span class="token punctuation" >:</span> <span class="token string" >'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >]</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span>
<span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span>
<span class="token attr-name" >expandedRowRender</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>record <span class="token operator" >=</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span><span class="token punctuation" >{</span>record<span class="token punctuation" >.</span>description<span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span><span class="token punctuation" >}</span></span>
<span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span>
<span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>table<span class="token punctuation" >"</span></span>
<span class="token punctuation" >/></span></span>
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-colspan-rowspan" data-reactid="1754"><section class="code-box-demo" data-reactid="1755"><div class=" clearfix" data-reactid="1756"><div class="ant-spin-nested-loading" data-reactid="1757"><div class="ant-spin-container" data-reactid="1758"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="1759"><div class="ant-table-content" data-reactid="1760"><div class="" data-reactid="1761"><span data-reactid="1762"><div class="ant-table-body" data-reactid="1763"><table class="" data-reactid="1764"><colgroup data-reactid="1765"><col data-reactid="1766"/><col data-reactid="1767"/><col data-reactid="1768"/><col data-reactid="1769"/><col data-reactid="1770"/></colgroup><thead class="ant-table-thead" data-reactid="1771"><tr data-reactid="1772"><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="" colspan="2" data-reactid="1779"><span data-reactid="1780"><!-- react-text: 1781 -->Home phone<!-- /react-text --></span></th><th class="" data-reactid="1782"><span data-reactid="1783"><!-- react-text: 1784 -->Address<!-- /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="" data-reactid="1787"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1788"></span><!-- react-empty: 1789 --><a href="#" data-reactid="1790">John Brown</a></td><td class="" data-reactid="1791"><!-- react-text: 1792 -->32<!-- /react-text --></td><td class="" data-reactid="1793"><!-- react-text: 1794 -->0571-22098909<!-- /react-text --></td><td class="" data-reactid="1795"><!-- react-text: 1796 -->18889898989<!-- /react-text --></td><td class="" data-reactid="1797"><!-- react-text: 1798 -->New York No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1799"><td class="" data-reactid="1800"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1801"></span><!-- react-empty: 1802 --><a href="#" data-reactid="1803">Jim Green</a></td><td class="" data-reactid="1804"><!-- react-text: 1805 -->42<!-- /react-text --></td><td class="" data-reactid="1806"><!-- react-text: 1807 -->0571-22098333<!-- /react-text --></td><td class="" data-reactid="1808"><!-- react-text: 1809 -->18889898888<!-- /react-text --></td><td class="" data-reactid="1810"><!-- react-text: 1811 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1812"><td class="" data-reactid="1813"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1814"></span><!-- react-empty: 1815 --><a href="#" data-reactid="1816">Joe Black</a></td><td class="" data-reactid="1817"><!-- react-text: 1818 -->32<!-- /react-text --></td><td rowspan="2" class="" data-reactid="1819"><!-- react-text: 1820 -->0575-22098909<!-- /react-text --></td><td class="" data-reactid="1821"><!-- react-text: 1822 -->18900010002<!-- /react-text --></td><td class="" data-reactid="1823"><!-- react-text: 1824 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1825"><td class="" data-reactid="1826"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1827"></span><!-- react-empty: 1828 --><a href="#" data-reactid="1829">Jim Red</a></td><td class="" data-reactid="1830"><!-- react-text: 1831 -->18<!-- /react-text --></td><!-- react-empty: 1832 --><td class="" data-reactid="1833"><!-- react-text: 1834 -->18900010002<!-- /react-text --></td><td class="" data-reactid="1835"><!-- react-text: 1836 -->London No. 2 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="1837"><td colspan="5" class="" data-reactid="1838"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1839"></span><!-- react-empty: 1840 --><a href="#" data-reactid="1841">Jake White</a></td><!-- react-empty: 1842 --><!-- react-empty: 1843 --><!-- react-empty: 1844 --><!-- react-empty: 1845 --></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="1846"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="1847"><a data-reactid="1848"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="1849"><a data-reactid="1850">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="1851"><a data-reactid="1852"></a></li><!-- react-empty: 1853 --></ul></div></section><section class="code-box-meta markdown" data-reactid="1854"><div class="code-box-title" data-reactid="1855"><a href="#components-table-demo-colspan-rowspan" data-reactid="1856">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="1857"><i class="anticon anticon-edit" data-reactid="1858"></i></a></div><div data-reactid="1859"><p data-reactid="1860"><!-- react-text: 1861 -->Table column title supports <!-- /react-text --><code data-reactid="1862"><!-- react-text: 1863 -->colSpan<!-- /react-text --></code><!-- react-text: 1864 --> that set in <!-- /react-text --><code data-reactid="1865"><!-- react-text: 1866 -->column<!-- /react-text --></code><!-- react-text: 1867 -->.<!-- /react-text --></p><p data-reactid="1868"><!-- react-text: 1869 -->Table cell supports <!-- /react-text --><code data-reactid="1870"><!-- react-text: 1871 -->colSpan<!-- /react-text --></code><!-- react-text: 1872 --> and <!-- /react-text --><code data-reactid="1873"><!-- react-text: 1874 -->rowSpan<!-- /react-text --></code><!-- react-text: 1875 --> that set in render return object. When each of them is set to <!-- /react-text --><code data-reactid="1876"><!-- react-text: 1877 -->0<!-- /react-text --></code><!-- react-text: 1878 -->, the cell will not be rendered.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="1879"></i></section><section class="highlight-wrapper" data-reactid="1880"><div class="highlight" data-reactid="1881"><pre class="language-jsx" data-reactid="1882"><code data-reactid="1883"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true">// In the fifth row, other columns are merged into first column</span>
<span class="token comment" spellcheck="true">// by setting it's colSpan to be 0</span>
<span class="token keyword" >const</span> renderContent <span class="token operator" >=</span> <span class="token punctuation" >(</span>value<span class="token punctuation" >,</span> row<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> obj <span class="token operator" >=</span> <span class="token punctuation" >{</span>
children<span class="token punctuation" >:</span> value<span class="token punctuation" >,</span>
props<span class="token punctuation" >:</span> <span class="token punctuation" >{</span><span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span>index <span class="token operator" >===</span> <span class="token number" >4</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
obj<span class="token punctuation" >.</span>props<span class="token punctuation" >.</span>colSpan <span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token keyword" >return</span> obj<span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>text<span class="token punctuation" >,</span> row<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span>index <span class="token operator" >&lt;</span> <span class="token number" >4</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >return</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token punctuation" >{</span>text<span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token keyword" >return</span> <span class="token punctuation" >{</span>
children<span class="token punctuation" >:</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token punctuation" >{</span>text<span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token punctuation" >,</span>
props<span class="token punctuation" >:</span> <span class="token punctuation" >{</span>
colSpan<span class="token punctuation" >:</span> <span class="token number" >5</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> renderContent<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Home phone'</span><span class="token punctuation" >,</span>
colSpan<span class="token punctuation" >:</span> <span class="token number" >2</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'tel'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>value<span class="token punctuation" >,</span> row<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> obj <span class="token operator" >=</span> <span class="token punctuation" >{</span>
children<span class="token punctuation" >:</span> value<span class="token punctuation" >,</span>
props<span class="token punctuation" >:</span> <span class="token punctuation" >{</span><span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span>index <span class="token operator" >===</span> <span class="token number" >2</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
obj<span class="token punctuation" >.</span>props<span class="token punctuation" >.</span>rowSpan <span class="token operator" >=</span> <span class="token number" >2</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token comment" spellcheck="true">// These two are merged into above cell</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span>index <span class="token operator" >===</span> <span class="token number" >3</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
obj<span class="token punctuation" >.</span>props<span class="token punctuation" >.</span>rowSpan <span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span>index <span class="token operator" >===</span> <span class="token number" >4</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
obj<span class="token punctuation" >.</span>props<span class="token punctuation" >.</span>colSpan <span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token keyword" >return</span> obj<span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Phone'</span><span class="token punctuation" >,</span>
colSpan<span class="token punctuation" >:</span> <span class="token number" >0</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'phone'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> renderContent<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> renderContent<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
tel<span class="token punctuation" >:</span> <span class="token string" >'0571-22098909'</span><span class="token punctuation" >,</span>
phone<span class="token punctuation" >:</span> <span class="token number" >18889898989</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green'</span><span class="token punctuation" >,</span>
tel<span class="token punctuation" >:</span> <span class="token string" >'0571-22098333'</span><span class="token punctuation" >,</span>
phone<span class="token punctuation" >:</span> <span class="token number" >18889898888</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >42</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Joe Black'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
tel<span class="token punctuation" >:</span> <span class="token string" >'0575-22098909'</span><span class="token punctuation" >,</span>
phone<span class="token punctuation" >:</span> <span class="token number" >18900010002</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'Sidney No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'4'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Red'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >18</span><span class="token punctuation" >,</span>
tel<span class="token punctuation" >:</span> <span class="token string" >'0575-22098909'</span><span class="token punctuation" >,</span>
phone<span class="token punctuation" >:</span> <span class="token number" >18900010002</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 2 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'5'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jake White'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >18</span><span class="token punctuation" >,</span>
tel<span class="token punctuation" >:</span> <span class="token string" >'0575-22098909'</span><span class="token punctuation" >,</span>
phone<span class="token punctuation" >:</span> <span class="token number" >18900010002</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'Dublin No. 2 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token attr-name" >bordered</span> <span class="token punctuation" >/></span></span>
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-expand-children" data-reactid="1884"><section class="code-box-demo" data-reactid="1885"><div class=" clearfix" data-reactid="1886"><div class="ant-spin-nested-loading" data-reactid="1887"><div class="ant-spin-container" data-reactid="1888"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="1889"><div class="ant-table-content" data-reactid="1890"><div class="" data-reactid="1891"><span data-reactid="1892"><div class="ant-table-body" data-reactid="1893"><table class="" data-reactid="1894"><colgroup data-reactid="1895"><col data-reactid="1896"/><col style="width:40%;min-width:40%;" data-reactid="1897"/><col style="width:30%;min-width:30%;" data-reactid="1898"/><col style="width:30%;min-width:30%;" data-reactid="1899"/></colgroup><thead class="ant-table-thead" data-reactid="1900"><tr data-reactid="1901"><th class="ant-table-selection-column" data-reactid="1902"><span data-reactid="1903"><label class="ant-checkbox-wrapper" data-reactid="1904"><span class="ant-checkbox" data-reactid="1905"><span class="ant-checkbox-inner" data-reactid="1906"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="1907"/></span></label></span></th><th class="" data-reactid="1908"><span data-reactid="1909"><!-- react-text: 1910 -->Name<!-- /react-text --></span></th><th class="" data-reactid="1911"><span data-reactid="1912"><!-- react-text: 1913 -->Age<!-- /react-text --></span></th><th class="" data-reactid="1914"><span data-reactid="1915"><!-- react-text: 1916 -->Address<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="1917"><tr class="ant-table-row ant-table-row-level-0" data-reactid="1918"><td class="ant-table-selection-column" data-reactid="1919"><span data-reactid="1920"><label class="ant-checkbox-wrapper" data-reactid="1921"><span class="ant-checkbox" data-reactid="1922"><span class="ant-checkbox-inner" data-reactid="1923"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="1924"/></span></label></span></td><td class="" data-reactid="1925"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="1926"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1927"></span><!-- react-text: 1928 -->John Brown sr.<!-- /react-text --></td><td class="" data-reactid="1929"><!-- react-text: 1930 -->60<!-- /react-text --></td><td class="" data-reactid="1931"><!-- react-text: 1932 -->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="1933"><td class="ant-table-selection-column" data-reactid="1934"><span data-reactid="1935"><label class="ant-checkbox-wrapper" data-reactid="1936"><span class="ant-checkbox" data-reactid="1937"><span class="ant-checkbox-inner" data-reactid="1938"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="1939"/></span></label></span></td><td class="" data-reactid="1940"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="1941"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="1942"></span><!-- react-text: 1943 -->John Brown<!-- /react-text --></td><td class="" data-reactid="1944"><!-- react-text: 1945 -->42<!-- /react-text --></td><td class="" data-reactid="1946"><!-- react-text: 1947 -->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="1948"><td class="ant-table-selection-column" data-reactid="1949"><span data-reactid="1950"><label class="ant-checkbox-wrapper" data-reactid="1951"><span class="ant-checkbox" data-reactid="1952"><span class="ant-checkbox-inner" data-reactid="1953"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="1954"/></span></label></span></td><td class="" data-reactid="1955"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="1956"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1957"></span><!-- react-text: 1958 -->John Brown jr.<!-- /react-text --></td><td class="" data-reactid="1959"><!-- react-text: 1960 -->30<!-- /react-text --></td><td class="" data-reactid="1961"><!-- react-text: 1962 -->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="1963"><td class="ant-table-selection-column" data-reactid="1964"><span data-reactid="1965"><label class="ant-checkbox-wrapper" data-reactid="1966"><span class="ant-checkbox" data-reactid="1967"><span class="ant-checkbox-inner" data-reactid="1968"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="1969"/></span></label></span></td><td class="" data-reactid="1970"><span style="padding-left:40px;" class="ant-table-row-indent indent-level-2" data-reactid="1971"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="1972"></span><!-- react-text: 1973 -->Jimmy Brown<!-- /react-text --></td><td class="" data-reactid="1974"><!-- react-text: 1975 -->16<!-- /react-text --></td><td class="" data-reactid="1976"><!-- react-text: 1977 -->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="1978"><td class="ant-table-selection-column" data-reactid="1979"><span data-reactid="1980"><label class="ant-checkbox-wrapper" data-reactid="1981"><span class="ant-checkbox" data-reactid="1982"><span class="ant-checkbox-inner" data-reactid="1983"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="1984"/></span></label></span></td><td class="" data-reactid="1985"><span style="padding-left:20px;" class="ant-table-row-indent indent-level-1" data-reactid="1986"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="1987"></span><!-- react-text: 1988 -->Jim Green sr.<!-- /react-text --></td><td class="" data-reactid="1989"><!-- react-text: 1990 -->72<!-- /react-text --></td><td class="" data-reactid="1991"><!-- react-text: 1992 -->London No. 1 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-2" style="display:none;" data-reactid="1993"><td class="ant-table-selection-column" data-reactid="1994"><span data-reactid="1995"><label class="ant-checkbox-wrapper" data-reactid="1996"><span class="ant-checkbox" data-reactid="1997"><span class="ant-checkbox-inner" data-reactid="1998"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="1999"/></span></label></span></td><td class="" data-reactid="2000"><span style="padding-left:40px;" class="ant-table-row-indent indent-level-2" data-reactid="2001"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="2002"></span><!-- react-text: 2003 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2004"><!-- react-text: 2005 -->42<!-- /react-text --></td><td class="" data-reactid="2006"><!-- react-text: 2007 -->London No. 2 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-3" style="display:none;" data-reactid="2008"><td class="ant-table-selection-column" data-reactid="2009"><span data-reactid="2010"><label class="ant-checkbox-wrapper" data-reactid="2011"><span class="ant-checkbox" data-reactid="2012"><span class="ant-checkbox-inner" data-reactid="2013"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="2014"/></span></label></span></td><td class="" data-reactid="2015"><span style="padding-left:60px;" class="ant-table-row-indent indent-level-3" data-reactid="2016"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2017"></span><!-- react-text: 2018 -->Jim Green jr.<!-- /react-text --></td><td class="" data-reactid="2019"><!-- react-text: 2020 -->25<!-- /react-text --></td><td class="" data-reactid="2021"><!-- react-text: 2022 -->London No. 3 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-3" style="display:none;" data-reactid="2023"><td class="ant-table-selection-column" data-reactid="2024"><span data-reactid="2025"><label class="ant-checkbox-wrapper" data-reactid="2026"><span class="ant-checkbox" data-reactid="2027"><span class="ant-checkbox-inner" data-reactid="2028"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="2029"/></span></label></span></td><td class="" data-reactid="2030"><span style="padding-left:60px;" class="ant-table-row-indent indent-level-3" data-reactid="2031"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2032"></span><!-- react-text: 2033 -->Jimmy Green sr.<!-- /react-text --></td><td class="" data-reactid="2034"><!-- react-text: 2035 -->18<!-- /react-text --></td><td class="" data-reactid="2036"><!-- react-text: 2037 -->London No. 4 Lake Park<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2038"><td class="ant-table-selection-column" data-reactid="2039"><span data-reactid="2040"><label class="ant-checkbox-wrapper" data-reactid="2041"><span class="ant-checkbox" data-reactid="2042"><span class="ant-checkbox-inner" data-reactid="2043"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="2044"/></span></label></span></td><td class="" data-reactid="2045"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2046"></span><span class="ant-table-row-expand-icon ant-table-row-spaced" data-reactid="2047"></span><!-- react-text: 2048 -->Joe Black<!-- /react-text --></td><td class="" data-reactid="2049"><!-- react-text: 2050 -->32<!-- /react-text --></td><td class="" data-reactid="2051"><!-- react-text: 2052 -->Sidney No. 1 Lake Park<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="2053"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2054"><a data-reactid="2055"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2056"><a data-reactid="2057">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="2058"><a data-reactid="2059"></a></li><!-- react-empty: 2060 --></ul></div></section><section class="code-box-meta markdown" data-reactid="2061"><div class="code-box-title" data-reactid="2062"><a href="#components-table-demo-expand-children" data-reactid="2063">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="2064"><i class="anticon anticon-edit" data-reactid="2065"></i></a></div><div data-reactid="2066"><p data-reactid="2067"><!-- react-text: 2068 -->Display tree structure data in Table, control the indent width by setting <!-- /react-text --><code data-reactid="2069"><!-- react-text: 2070 -->indentSize<!-- /react-text --></code><!-- react-text: 2071 -->.<!-- /react-text --></p><blockquote data-reactid="2072"><p data-reactid="2073"><!-- react-text: 2074 -->Note, no support for recursive selection of tree structure data table yet.<!-- /react-text --></p></blockquote></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="2075"></i></section><section class="highlight-wrapper" data-reactid="2076"><div class="highlight" data-reactid="2077"><pre class="language-jsx" data-reactid="2078"><code data-reactid="2079"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token string" >'40%'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token string" >'30%'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token string" >'30%'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token number" >1</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown sr.'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >60</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 1 Lake Park'</span><span class="token punctuation" >,</span>
children<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token number" >11</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >42</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 2 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token number" >12</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown jr.'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >30</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 3 Lake Park'</span><span class="token punctuation" >,</span>
children<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token number" >121</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jimmy Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >16</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York No. 3 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token number" >13</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green sr.'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >72</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 1 Lake Park'</span><span class="token punctuation" >,</span>
children<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token number" >131</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >42</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 2 Lake Park'</span><span class="token punctuation" >,</span>
children<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token number" >1311</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green jr.'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >25</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 3 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token number" >1312</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jimmy Green sr.'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >18</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London No. 4 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token number" >2</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Joe Black'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'Sidney No. 1 Lake Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true">// rowSelection objects indicates the need for row selection</span>
<span class="token keyword" >const</span> rowSelection <span class="token operator" >=</span> <span class="token punctuation" >{</span>
onChange<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>selectedRowKeys<span class="token punctuation" >,</span> selectedRows<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span><span class="token template-string" ><span class="token string" >`selectedRowKeys: </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>selectedRowKeys<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >,</span> <span class="token string" >'selectedRows: '</span><span class="token punctuation" >,</span> selectedRows<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
onSelect<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>record<span class="token punctuation" >,</span> selected<span class="token punctuation" >,</span> selectedRows<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>record<span class="token punctuation" >,</span> selected<span class="token punctuation" >,</span> selectedRows<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
onSelectAll<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>selected<span class="token punctuation" >,</span> selectedRows<span class="token punctuation" >,</span> changeRows<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>selected<span class="token punctuation" >,</span> selectedRows<span class="token punctuation" >,</span> changeRows<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >rowSelection</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>rowSelection<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-fixed-header" data-reactid="2080"><section class="code-box-demo" data-reactid="2081"><div class=" clearfix" data-reactid="2082"><div class="ant-spin-nested-loading" data-reactid="2083"><div class="ant-spin-container" data-reactid="2084"><div class="ant-table ant-table-large ant-table-fixed-header ant-table-scroll-position-left" data-reactid="2085"><div class="ant-table-content" data-reactid="2086"><div class="ant-table-scroll" data-reactid="2087"><span data-reactid="2088"><div class="ant-table-header" data-reactid="2089"><table class="" data-reactid="2090"><colgroup data-reactid="2091"><col style="width:150px;min-width:150px;" data-reactid="2092"/><col style="width:150px;min-width:150px;" data-reactid="2093"/><col data-reactid="2094"/></colgroup><thead class="ant-table-thead" data-reactid="2095"><tr data-reactid="2096"><th class="" data-reactid="2097"><span data-reactid="2098"><!-- react-text: 2099 -->Name<!-- /react-text --></span></th><th class="" data-reactid="2100"><span data-reactid="2101"><!-- react-text: 2102 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2103"><span data-reactid="2104"><!-- react-text: 2105 -->Address<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body" style="max-height:240px;overflow-y:scroll;" data-reactid="2106"><table class="" data-reactid="2107"><colgroup data-reactid="2108"><col style="width:150px;min-width:150px;" data-reactid="2109"/><col style="width:150px;min-width:150px;" data-reactid="2110"/><col data-reactid="2111"/></colgroup><tbody class="ant-table-tbody" data-reactid="2112"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2113"><td class="" data-reactid="2114"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2115"></span><!-- react-empty: 2116 --><!-- react-text: 2117 -->Edward King 0<!-- /react-text --></td><td class="" data-reactid="2118"><!-- react-text: 2119 -->32<!-- /react-text --></td><td class="" data-reactid="2120"><!-- react-text: 2121 -->London, Park Lane no. 0<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2122"><td class="" data-reactid="2123"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2124"></span><!-- react-empty: 2125 --><!-- react-text: 2126 -->Edward King 1<!-- /react-text --></td><td class="" data-reactid="2127"><!-- react-text: 2128 -->32<!-- /react-text --></td><td class="" data-reactid="2129"><!-- react-text: 2130 -->London, Park Lane no. 1<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2131"><td class="" data-reactid="2132"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2133"></span><!-- react-empty: 2134 --><!-- react-text: 2135 -->Edward King 2<!-- /react-text --></td><td class="" data-reactid="2136"><!-- react-text: 2137 -->32<!-- /react-text --></td><td class="" data-reactid="2138"><!-- react-text: 2139 -->London, Park Lane no. 2<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2140"><td class="" data-reactid="2141"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2142"></span><!-- react-empty: 2143 --><!-- react-text: 2144 -->Edward King 3<!-- /react-text --></td><td class="" data-reactid="2145"><!-- react-text: 2146 -->32<!-- /react-text --></td><td class="" data-reactid="2147"><!-- react-text: 2148 -->London, Park Lane no. 3<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2149"><td class="" data-reactid="2150"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2151"></span><!-- react-empty: 2152 --><!-- react-text: 2153 -->Edward King 4<!-- /react-text --></td><td class="" data-reactid="2154"><!-- react-text: 2155 -->32<!-- /react-text --></td><td class="" data-reactid="2156"><!-- react-text: 2157 -->London, Park Lane no. 4<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2158"><td class="" data-reactid="2159"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2160"></span><!-- react-empty: 2161 --><!-- react-text: 2162 -->Edward King 5<!-- /react-text --></td><td class="" data-reactid="2163"><!-- react-text: 2164 -->32<!-- /react-text --></td><td class="" data-reactid="2165"><!-- react-text: 2166 -->London, Park Lane no. 5<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2167"><td class="" data-reactid="2168"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2169"></span><!-- react-empty: 2170 --><!-- react-text: 2171 -->Edward King 6<!-- /react-text --></td><td class="" data-reactid="2172"><!-- react-text: 2173 -->32<!-- /react-text --></td><td class="" data-reactid="2174"><!-- react-text: 2175 -->London, Park Lane no. 6<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2176"><td class="" data-reactid="2177"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2178"></span><!-- react-empty: 2179 --><!-- react-text: 2180 -->Edward King 7<!-- /react-text --></td><td class="" data-reactid="2181"><!-- react-text: 2182 -->32<!-- /react-text --></td><td class="" data-reactid="2183"><!-- react-text: 2184 -->London, Park Lane no. 7<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2185"><td class="" data-reactid="2186"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2187"></span><!-- react-empty: 2188 --><!-- react-text: 2189 -->Edward King 8<!-- /react-text --></td><td class="" data-reactid="2190"><!-- react-text: 2191 -->32<!-- /react-text --></td><td class="" data-reactid="2192"><!-- react-text: 2193 -->London, Park Lane no. 8<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2194"><td class="" data-reactid="2195"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2196"></span><!-- react-empty: 2197 --><!-- react-text: 2198 -->Edward King 9<!-- /react-text --></td><td class="" data-reactid="2199"><!-- react-text: 2200 -->32<!-- /react-text --></td><td class="" data-reactid="2201"><!-- react-text: 2202 -->London, Park Lane no. 9<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2203"><td class="" data-reactid="2204"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2205"></span><!-- react-empty: 2206 --><!-- react-text: 2207 -->Edward King 10<!-- /react-text --></td><td class="" data-reactid="2208"><!-- react-text: 2209 -->32<!-- /react-text --></td><td class="" data-reactid="2210"><!-- react-text: 2211 -->London, Park Lane no. 10<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2212"><td class="" data-reactid="2213"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2214"></span><!-- react-empty: 2215 --><!-- react-text: 2216 -->Edward King 11<!-- /react-text --></td><td class="" data-reactid="2217"><!-- react-text: 2218 -->32<!-- /react-text --></td><td class="" data-reactid="2219"><!-- react-text: 2220 -->London, Park Lane no. 11<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2221"><td class="" data-reactid="2222"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2223"></span><!-- react-empty: 2224 --><!-- react-text: 2225 -->Edward King 12<!-- /react-text --></td><td class="" data-reactid="2226"><!-- react-text: 2227 -->32<!-- /react-text --></td><td class="" data-reactid="2228"><!-- react-text: 2229 -->London, Park Lane no. 12<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2230"><td class="" data-reactid="2231"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2232"></span><!-- react-empty: 2233 --><!-- react-text: 2234 -->Edward King 13<!-- /react-text --></td><td class="" data-reactid="2235"><!-- react-text: 2236 -->32<!-- /react-text --></td><td class="" data-reactid="2237"><!-- react-text: 2238 -->London, Park Lane no. 13<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2239"><td class="" data-reactid="2240"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2241"></span><!-- react-empty: 2242 --><!-- react-text: 2243 -->Edward King 14<!-- /react-text --></td><td class="" data-reactid="2244"><!-- react-text: 2245 -->32<!-- /react-text --></td><td class="" data-reactid="2246"><!-- react-text: 2247 -->London, Park Lane no. 14<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2248"><td class="" data-reactid="2249"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2250"></span><!-- react-empty: 2251 --><!-- react-text: 2252 -->Edward King 15<!-- /react-text --></td><td class="" data-reactid="2253"><!-- react-text: 2254 -->32<!-- /react-text --></td><td class="" data-reactid="2255"><!-- react-text: 2256 -->London, Park Lane no. 15<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2257"><td class="" data-reactid="2258"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2259"></span><!-- react-empty: 2260 --><!-- react-text: 2261 -->Edward King 16<!-- /react-text --></td><td class="" data-reactid="2262"><!-- react-text: 2263 -->32<!-- /react-text --></td><td class="" data-reactid="2264"><!-- react-text: 2265 -->London, Park Lane no. 16<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2266"><td class="" data-reactid="2267"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2268"></span><!-- react-empty: 2269 --><!-- react-text: 2270 -->Edward King 17<!-- /react-text --></td><td class="" data-reactid="2271"><!-- react-text: 2272 -->32<!-- /react-text --></td><td class="" data-reactid="2273"><!-- react-text: 2274 -->London, Park Lane no. 17<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2275"><td class="" data-reactid="2276"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2277"></span><!-- react-empty: 2278 --><!-- react-text: 2279 -->Edward King 18<!-- /react-text --></td><td class="" data-reactid="2280"><!-- react-text: 2281 -->32<!-- /react-text --></td><td class="" data-reactid="2282"><!-- react-text: 2283 -->London, Park Lane no. 18<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2284"><td class="" data-reactid="2285"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2286"></span><!-- react-empty: 2287 --><!-- react-text: 2288 -->Edward King 19<!-- /react-text --></td><td class="" data-reactid="2289"><!-- react-text: 2290 -->32<!-- /react-text --></td><td class="" data-reactid="2291"><!-- react-text: 2292 -->London, Park Lane no. 19<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2293"><td class="" data-reactid="2294"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2295"></span><!-- react-empty: 2296 --><!-- react-text: 2297 -->Edward King 20<!-- /react-text --></td><td class="" data-reactid="2298"><!-- react-text: 2299 -->32<!-- /react-text --></td><td class="" data-reactid="2300"><!-- react-text: 2301 -->London, Park Lane no. 20<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2302"><td class="" data-reactid="2303"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2304"></span><!-- react-empty: 2305 --><!-- react-text: 2306 -->Edward King 21<!-- /react-text --></td><td class="" data-reactid="2307"><!-- react-text: 2308 -->32<!-- /react-text --></td><td class="" data-reactid="2309"><!-- react-text: 2310 -->London, Park Lane no. 21<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2311"><td class="" data-reactid="2312"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2313"></span><!-- react-empty: 2314 --><!-- react-text: 2315 -->Edward King 22<!-- /react-text --></td><td class="" data-reactid="2316"><!-- react-text: 2317 -->32<!-- /react-text --></td><td class="" data-reactid="2318"><!-- react-text: 2319 -->London, Park Lane no. 22<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2320"><td class="" data-reactid="2321"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2322"></span><!-- react-empty: 2323 --><!-- react-text: 2324 -->Edward King 23<!-- /react-text --></td><td class="" data-reactid="2325"><!-- react-text: 2326 -->32<!-- /react-text --></td><td class="" data-reactid="2327"><!-- react-text: 2328 -->London, Park Lane no. 23<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2329"><td class="" data-reactid="2330"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2331"></span><!-- react-empty: 2332 --><!-- react-text: 2333 -->Edward King 24<!-- /react-text --></td><td class="" data-reactid="2334"><!-- react-text: 2335 -->32<!-- /react-text --></td><td class="" data-reactid="2336"><!-- react-text: 2337 -->London, Park Lane no. 24<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2338"><td class="" data-reactid="2339"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2340"></span><!-- react-empty: 2341 --><!-- react-text: 2342 -->Edward King 25<!-- /react-text --></td><td class="" data-reactid="2343"><!-- react-text: 2344 -->32<!-- /react-text --></td><td class="" data-reactid="2345"><!-- react-text: 2346 -->London, Park Lane no. 25<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2347"><td class="" data-reactid="2348"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2349"></span><!-- react-empty: 2350 --><!-- react-text: 2351 -->Edward King 26<!-- /react-text --></td><td class="" data-reactid="2352"><!-- react-text: 2353 -->32<!-- /react-text --></td><td class="" data-reactid="2354"><!-- react-text: 2355 -->London, Park Lane no. 26<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2356"><td class="" data-reactid="2357"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2358"></span><!-- react-empty: 2359 --><!-- react-text: 2360 -->Edward King 27<!-- /react-text --></td><td class="" data-reactid="2361"><!-- react-text: 2362 -->32<!-- /react-text --></td><td class="" data-reactid="2363"><!-- react-text: 2364 -->London, Park Lane no. 27<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2365"><td class="" data-reactid="2366"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2367"></span><!-- react-empty: 2368 --><!-- react-text: 2369 -->Edward King 28<!-- /react-text --></td><td class="" data-reactid="2370"><!-- react-text: 2371 -->32<!-- /react-text --></td><td class="" data-reactid="2372"><!-- react-text: 2373 -->London, Park Lane no. 28<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2374"><td class="" data-reactid="2375"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2376"></span><!-- react-empty: 2377 --><!-- react-text: 2378 -->Edward King 29<!-- /react-text --></td><td class="" data-reactid="2379"><!-- react-text: 2380 -->32<!-- /react-text --></td><td class="" data-reactid="2381"><!-- react-text: 2382 -->London, Park Lane no. 29<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2383"><td class="" data-reactid="2384"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2385"></span><!-- react-empty: 2386 --><!-- react-text: 2387 -->Edward King 30<!-- /react-text --></td><td class="" data-reactid="2388"><!-- react-text: 2389 -->32<!-- /react-text --></td><td class="" data-reactid="2390"><!-- react-text: 2391 -->London, Park Lane no. 30<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2392"><td class="" data-reactid="2393"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2394"></span><!-- react-empty: 2395 --><!-- react-text: 2396 -->Edward King 31<!-- /react-text --></td><td class="" data-reactid="2397"><!-- react-text: 2398 -->32<!-- /react-text --></td><td class="" data-reactid="2399"><!-- react-text: 2400 -->London, Park Lane no. 31<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2401"><td class="" data-reactid="2402"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2403"></span><!-- react-empty: 2404 --><!-- react-text: 2405 -->Edward King 32<!-- /react-text --></td><td class="" data-reactid="2406"><!-- react-text: 2407 -->32<!-- /react-text --></td><td class="" data-reactid="2408"><!-- react-text: 2409 -->London, Park Lane no. 32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2410"><td class="" data-reactid="2411"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2412"></span><!-- react-empty: 2413 --><!-- react-text: 2414 -->Edward King 33<!-- /react-text --></td><td class="" data-reactid="2415"><!-- react-text: 2416 -->32<!-- /react-text --></td><td class="" data-reactid="2417"><!-- react-text: 2418 -->London, Park Lane no. 33<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2419"><td class="" data-reactid="2420"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2421"></span><!-- react-empty: 2422 --><!-- react-text: 2423 -->Edward King 34<!-- /react-text --></td><td class="" data-reactid="2424"><!-- react-text: 2425 -->32<!-- /react-text --></td><td class="" data-reactid="2426"><!-- react-text: 2427 -->London, Park Lane no. 34<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2428"><td class="" data-reactid="2429"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2430"></span><!-- react-empty: 2431 --><!-- react-text: 2432 -->Edward King 35<!-- /react-text --></td><td class="" data-reactid="2433"><!-- react-text: 2434 -->32<!-- /react-text --></td><td class="" data-reactid="2435"><!-- react-text: 2436 -->London, Park Lane no. 35<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2437"><td class="" data-reactid="2438"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2439"></span><!-- react-empty: 2440 --><!-- react-text: 2441 -->Edward King 36<!-- /react-text --></td><td class="" data-reactid="2442"><!-- react-text: 2443 -->32<!-- /react-text --></td><td class="" data-reactid="2444"><!-- react-text: 2445 -->London, Park Lane no. 36<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2446"><td class="" data-reactid="2447"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2448"></span><!-- react-empty: 2449 --><!-- react-text: 2450 -->Edward King 37<!-- /react-text --></td><td class="" data-reactid="2451"><!-- react-text: 2452 -->32<!-- /react-text --></td><td class="" data-reactid="2453"><!-- react-text: 2454 -->London, Park Lane no. 37<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2455"><td class="" data-reactid="2456"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2457"></span><!-- react-empty: 2458 --><!-- react-text: 2459 -->Edward King 38<!-- /react-text --></td><td class="" data-reactid="2460"><!-- react-text: 2461 -->32<!-- /react-text --></td><td class="" data-reactid="2462"><!-- react-text: 2463 -->London, Park Lane no. 38<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2464"><td class="" data-reactid="2465"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2466"></span><!-- react-empty: 2467 --><!-- react-text: 2468 -->Edward King 39<!-- /react-text --></td><td class="" data-reactid="2469"><!-- react-text: 2470 -->32<!-- /react-text --></td><td class="" data-reactid="2471"><!-- react-text: 2472 -->London, Park Lane no. 39<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2473"><td class="" data-reactid="2474"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2475"></span><!-- react-empty: 2476 --><!-- react-text: 2477 -->Edward King 40<!-- /react-text --></td><td class="" data-reactid="2478"><!-- react-text: 2479 -->32<!-- /react-text --></td><td class="" data-reactid="2480"><!-- react-text: 2481 -->London, Park Lane no. 40<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2482"><td class="" data-reactid="2483"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2484"></span><!-- react-empty: 2485 --><!-- react-text: 2486 -->Edward King 41<!-- /react-text --></td><td class="" data-reactid="2487"><!-- react-text: 2488 -->32<!-- /react-text --></td><td class="" data-reactid="2489"><!-- react-text: 2490 -->London, Park Lane no. 41<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2491"><td class="" data-reactid="2492"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2493"></span><!-- react-empty: 2494 --><!-- react-text: 2495 -->Edward King 42<!-- /react-text --></td><td class="" data-reactid="2496"><!-- react-text: 2497 -->32<!-- /react-text --></td><td class="" data-reactid="2498"><!-- react-text: 2499 -->London, Park Lane no. 42<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2500"><td class="" data-reactid="2501"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2502"></span><!-- react-empty: 2503 --><!-- react-text: 2504 -->Edward King 43<!-- /react-text --></td><td class="" data-reactid="2505"><!-- react-text: 2506 -->32<!-- /react-text --></td><td class="" data-reactid="2507"><!-- react-text: 2508 -->London, Park Lane no. 43<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2509"><td class="" data-reactid="2510"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2511"></span><!-- react-empty: 2512 --><!-- react-text: 2513 -->Edward King 44<!-- /react-text --></td><td class="" data-reactid="2514"><!-- react-text: 2515 -->32<!-- /react-text --></td><td class="" data-reactid="2516"><!-- react-text: 2517 -->London, Park Lane no. 44<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2518"><td class="" data-reactid="2519"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2520"></span><!-- react-empty: 2521 --><!-- react-text: 2522 -->Edward King 45<!-- /react-text --></td><td class="" data-reactid="2523"><!-- react-text: 2524 -->32<!-- /react-text --></td><td class="" data-reactid="2525"><!-- react-text: 2526 -->London, Park Lane no. 45<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2527"><td class="" data-reactid="2528"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2529"></span><!-- react-empty: 2530 --><!-- react-text: 2531 -->Edward King 46<!-- /react-text --></td><td class="" data-reactid="2532"><!-- react-text: 2533 -->32<!-- /react-text --></td><td class="" data-reactid="2534"><!-- react-text: 2535 -->London, Park Lane no. 46<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2536"><td class="" data-reactid="2537"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2538"></span><!-- react-empty: 2539 --><!-- react-text: 2540 -->Edward King 47<!-- /react-text --></td><td class="" data-reactid="2541"><!-- react-text: 2542 -->32<!-- /react-text --></td><td class="" data-reactid="2543"><!-- react-text: 2544 -->London, Park Lane no. 47<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2545"><td class="" data-reactid="2546"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2547"></span><!-- react-empty: 2548 --><!-- react-text: 2549 -->Edward King 48<!-- /react-text --></td><td class="" data-reactid="2550"><!-- react-text: 2551 -->32<!-- /react-text --></td><td class="" data-reactid="2552"><!-- react-text: 2553 -->London, Park Lane no. 48<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2554"><td class="" data-reactid="2555"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2556"></span><!-- react-empty: 2557 --><!-- react-text: 2558 -->Edward King 49<!-- /react-text --></td><td class="" data-reactid="2559"><!-- react-text: 2560 -->32<!-- /react-text --></td><td class="" data-reactid="2561"><!-- react-text: 2562 -->London, Park Lane no. 49<!-- /react-text --></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="2563"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2564"><a data-reactid="2565"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2566"><a data-reactid="2567">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="2568"><a data-reactid="2569">2</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="2570"><a data-reactid="2571"></a></li><!-- react-empty: 2572 --></ul></div></section><section class="code-box-meta markdown" data-reactid="2573"><div class="code-box-title" data-reactid="2574"><a href="#components-table-demo-fixed-header" data-reactid="2575">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="2576"><i class="anticon anticon-edit" data-reactid="2577"></i></a></div><div data-reactid="2578"><p data-reactid="2579"><!-- react-text: 2580 -->Display large amounts of data in scrollable view.<!-- /react-text --></p><blockquote data-reactid="2581"><p data-reactid="2582"><!-- react-text: 2583 -->Specify the width of each column if header and cell do not align properly.<!-- /react-text --></p></blockquote></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="2584"></i></section><section class="highlight-wrapper" data-reactid="2585"><div class="highlight" data-reactid="2586"><pre class="language-jsx" data-reactid="2587"><code data-reactid="2588"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >150</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >150</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >for</span> <span class="token punctuation" >(</span><span class="token keyword" >let</span> i <span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >;</span> i <span class="token operator" >&lt;</span> <span class="token number" >100</span><span class="token punctuation" >;</span> i<span class="token operator" >++</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
data<span class="token punctuation" >.</span><span class="token function" >push</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> i<span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`Edward King </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>i<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`London, Park Lane no. </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>i<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token attr-name" >pagination</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span> pageSize<span class="token punctuation" >:</span> <span class="token number" >50</span> <span class="token punctuation" >}</span><span class="token punctuation" >}</span></span> <span class="token attr-name" >scroll</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span> y<span class="token punctuation" >:</span> <span class="token number" >240</span> <span class="token punctuation" >}</span><span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-fixed-columns" data-reactid="2589"><section class="code-box-demo" data-reactid="2590"><div class=" clearfix" data-reactid="2591"><div class="ant-spin-nested-loading" data-reactid="2592"><div class="ant-spin-container" data-reactid="2593"><div class="ant-table ant-table-large ant-table-scroll-position-left" data-reactid="2594"><div class="ant-table-content" data-reactid="2595"><div class="ant-table-fixed-left" data-reactid="2596"><span data-reactid="2597"><div class="ant-table-body-outer" data-reactid="2598"><div class="ant-table-body-inner" data-reactid="2599"><table class="ant-table-fixed" data-reactid="2600"><colgroup data-reactid="2601"><col style="width:100px;min-width:100px;" data-reactid="2602"/><col style="width:100px;min-width:100px;" data-reactid="2603"/></colgroup><thead class="ant-table-thead" data-reactid="2604"><tr data-reactid="2605"><th class="" data-reactid="2606"><span data-reactid="2607"><!-- react-text: 2608 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2609"><span data-reactid="2610"><!-- react-text: 2611 -->Age<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2612"><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 -->John Brown<!-- /react-text --></td><td class="" data-reactid="2618"><!-- react-text: 2619 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2620"><td class="" data-reactid="2621"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2622"></span><!-- react-empty: 2623 --><!-- react-text: 2624 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2625"><!-- react-text: 2626 -->40<!-- /react-text --></td></tr></tbody></table></div></div></span></div><div class="ant-table-scroll" data-reactid="2627"><span data-reactid="2628"><div class="ant-table-body" style="overflow-x:auto;" data-reactid="2629"><table class="ant-table-fixed" style="width:1300px;" data-reactid="2630"><colgroup data-reactid="2631"><col style="width:100px;min-width:100px;" data-reactid="2632"/><col style="width:100px;min-width:100px;" data-reactid="2633"/><col data-reactid="2634"/><col data-reactid="2635"/><col data-reactid="2636"/><col data-reactid="2637"/><col data-reactid="2638"/><col data-reactid="2639"/><col data-reactid="2640"/><col data-reactid="2641"/><col style="width:100px;min-width:100px;" data-reactid="2642"/></colgroup><thead class="ant-table-thead" data-reactid="2643"><tr data-reactid="2644"><th class="" data-reactid="2645"><span data-reactid="2646"><!-- react-text: 2647 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2648"><span data-reactid="2649"><!-- react-text: 2650 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2651"><span data-reactid="2652"><!-- react-text: 2653 -->Column 1<!-- /react-text --></span></th><th class="" data-reactid="2654"><span data-reactid="2655"><!-- react-text: 2656 -->Column 2<!-- /react-text --></span></th><th class="" data-reactid="2657"><span data-reactid="2658"><!-- react-text: 2659 -->Column 3<!-- /react-text --></span></th><th class="" data-reactid="2660"><span data-reactid="2661"><!-- react-text: 2662 -->Column 4<!-- /react-text --></span></th><th class="" data-reactid="2663"><span data-reactid="2664"><!-- react-text: 2665 -->Column 5<!-- /react-text --></span></th><th class="" data-reactid="2666"><span data-reactid="2667"><!-- react-text: 2668 -->Column 6<!-- /react-text --></span></th><th class="" data-reactid="2669"><span data-reactid="2670"><!-- react-text: 2671 -->Column 7<!-- /react-text --></span></th><th class="" data-reactid="2672"><span data-reactid="2673"><!-- react-text: 2674 -->Column 8<!-- /react-text --></span></th><th class="" data-reactid="2675"><span data-reactid="2676"><!-- react-text: 2677 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2678"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2679"><td class="" data-reactid="2680"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2681"></span><!-- react-empty: 2682 --><!-- react-text: 2683 -->John Brown<!-- /react-text --></td><td class="" data-reactid="2684"><!-- react-text: 2685 -->32<!-- /react-text --></td><td class="" data-reactid="2686"><!-- react-text: 2687 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2688"><!-- react-text: 2689 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2690"><!-- react-text: 2691 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2692"><!-- react-text: 2693 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2694"><!-- react-text: 2695 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2696"><!-- react-text: 2697 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2698"><!-- react-text: 2699 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2700"><!-- react-text: 2701 -->New York Park<!-- /react-text --></td><td class="" data-reactid="2702"><a href="#" data-reactid="2703">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2704"><td class="" data-reactid="2705"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2706"></span><!-- react-empty: 2707 --><!-- react-text: 2708 -->Jim Green<!-- /react-text --></td><td class="" data-reactid="2709"><!-- react-text: 2710 -->40<!-- /react-text --></td><td class="" data-reactid="2711"><!-- react-text: 2712 -->London Park<!-- /react-text --></td><td class="" data-reactid="2713"><!-- react-text: 2714 -->London Park<!-- /react-text --></td><td class="" data-reactid="2715"><!-- react-text: 2716 -->London Park<!-- /react-text --></td><td class="" data-reactid="2717"><!-- react-text: 2718 -->London Park<!-- /react-text --></td><td class="" data-reactid="2719"><!-- react-text: 2720 -->London Park<!-- /react-text --></td><td class="" data-reactid="2721"><!-- react-text: 2722 -->London Park<!-- /react-text --></td><td class="" data-reactid="2723"><!-- react-text: 2724 -->London Park<!-- /react-text --></td><td class="" data-reactid="2725"><!-- react-text: 2726 -->London Park<!-- /react-text --></td><td class="" data-reactid="2727"><a href="#" data-reactid="2728">action</a></td></tr></tbody></table></div></span></div><div class="ant-table-fixed-right" data-reactid="2729"><span data-reactid="2730"><div class="ant-table-body-outer" data-reactid="2731"><div class="ant-table-body-inner" data-reactid="2732"><table class="ant-table-fixed" data-reactid="2733"><colgroup data-reactid="2734"><col style="width:100px;min-width:100px;" data-reactid="2735"/></colgroup><thead class="ant-table-thead" data-reactid="2736"><tr data-reactid="2737"><th class="" data-reactid="2738"><span data-reactid="2739"><!-- react-text: 2740 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="2741"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2742"><td class="" data-reactid="2743"><a href="#" data-reactid="2744">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2745"><td class="" data-reactid="2746"><a href="#" data-reactid="2747">action</a></td></tr></tbody></table></div></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="2748"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="2749"><a data-reactid="2750"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="2751"><a data-reactid="2752">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="2753"><a data-reactid="2754"></a></li><!-- react-empty: 2755 --></ul></div></section><section class="code-box-meta markdown" data-reactid="2756"><div class="code-box-title" data-reactid="2757"><a href="#components-table-demo-fixed-columns" data-reactid="2758">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="2759"><i class="anticon anticon-edit" data-reactid="2760"></i></a></div><div data-reactid="2761"><p data-reactid="2762"><!-- react-text: 2763 -->Fix some columns and scroll in other columns. You must set <!-- /react-text --><code data-reactid="2764"><!-- react-text: 2765 -->scoll.x<!-- /react-text --></code><!-- react-text: 2766 --> meanwhile.<!-- /react-text --></p><blockquote data-reactid="2767"><p data-reactid="2768"><!-- react-text: 2769 -->Specify the width of each column if header and cell do not align properly.<!-- /react-text --></p><p data-reactid="2770"><!-- react-text: 2771 -->A fixed width for <!-- /react-text --><code data-reactid="2772"><!-- react-text: 2773 -->scroll.x<!-- /react-text --></code><!-- react-text: 2774 --> is recommended.<!-- /react-text --></p></blockquote></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="2775"></i></section><section class="highlight-wrapper" data-reactid="2776"><div class="highlight" data-reactid="2777"><pre class="language-jsx" data-reactid="2778"><code data-reactid="2779"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Full Name'</span><span class="token punctuation" >,</span> width<span class="token punctuation" >:</span> <span class="token number" >100</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span> fixed<span class="token punctuation" >:</span> <span class="token string" >'left'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span> width<span class="token punctuation" >:</span> <span class="token number" >100</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span> fixed<span class="token punctuation" >:</span> <span class="token string" >'left'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 1'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'1'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 2'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'2'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 3'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'3'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 4'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'4'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 5'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'5'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 6'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'6'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 7'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'7'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 8'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'8'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Action'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'operation'</span><span class="token punctuation" >,</span>
fixed<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >100</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> <span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>action<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'New York Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Jim Green'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >40</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London Park'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token attr-name" >scroll</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span> x<span class="token punctuation" >:</span> <span class="token number" >1300</span> <span class="token punctuation" >}</span><span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-fixed-columns-header" data-reactid="2780"><section class="code-box-demo" data-reactid="2781"><div class=" clearfix" data-reactid="2782"><div class="ant-spin-nested-loading" data-reactid="2783"><div class="ant-spin-container" data-reactid="2784"><div class="ant-table ant-table-large ant-table-fixed-header ant-table-scroll-position-left" data-reactid="2785"><div class="ant-table-content" data-reactid="2786"><div class="ant-table-fixed-left" data-reactid="2787"><span data-reactid="2788"><div class="ant-table-header" data-reactid="2789"><table class="ant-table-fixed" data-reactid="2790"><colgroup data-reactid="2791"><col style="width:100px;min-width:100px;" data-reactid="2792"/><col style="width:100px;min-width:100px;" data-reactid="2793"/></colgroup><thead class="ant-table-thead" data-reactid="2794"><tr data-reactid="2795"><th class="" data-reactid="2796"><span data-reactid="2797"><!-- react-text: 2798 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2799"><span data-reactid="2800"><!-- react-text: 2801 -->Age<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" style="height:300px;" data-reactid="2802"><div class="ant-table-body-inner" data-reactid="2803"><table class="ant-table-fixed" data-reactid="2804"><colgroup data-reactid="2805"><col style="width:100px;min-width:100px;" data-reactid="2806"/><col style="width:100px;min-width:100px;" data-reactid="2807"/></colgroup><tbody class="ant-table-tbody" data-reactid="2808"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2809"><td class="" data-reactid="2810"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2811"></span><!-- react-empty: 2812 --><!-- react-text: 2813 -->Edrward 0<!-- /react-text --></td><td class="" data-reactid="2814"><!-- react-text: 2815 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2816"><td class="" data-reactid="2817"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2818"></span><!-- react-empty: 2819 --><!-- react-text: 2820 -->Edrward 1<!-- /react-text --></td><td class="" data-reactid="2821"><!-- react-text: 2822 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2823"><td class="" data-reactid="2824"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2825"></span><!-- react-empty: 2826 --><!-- react-text: 2827 -->Edrward 2<!-- /react-text --></td><td class="" data-reactid="2828"><!-- react-text: 2829 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2830"><td class="" data-reactid="2831"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2832"></span><!-- react-empty: 2833 --><!-- react-text: 2834 -->Edrward 3<!-- /react-text --></td><td class="" data-reactid="2835"><!-- react-text: 2836 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2837"><td class="" data-reactid="2838"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2839"></span><!-- react-empty: 2840 --><!-- react-text: 2841 -->Edrward 4<!-- /react-text --></td><td class="" data-reactid="2842"><!-- react-text: 2843 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2844"><td class="" data-reactid="2845"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2846"></span><!-- react-empty: 2847 --><!-- react-text: 2848 -->Edrward 5<!-- /react-text --></td><td class="" data-reactid="2849"><!-- react-text: 2850 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2851"><td class="" data-reactid="2852"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2853"></span><!-- react-empty: 2854 --><!-- react-text: 2855 -->Edrward 6<!-- /react-text --></td><td class="" data-reactid="2856"><!-- react-text: 2857 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2858"><td class="" data-reactid="2859"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2860"></span><!-- react-empty: 2861 --><!-- react-text: 2862 -->Edrward 7<!-- /react-text --></td><td class="" data-reactid="2863"><!-- react-text: 2864 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2865"><td class="" data-reactid="2866"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2867"></span><!-- react-empty: 2868 --><!-- react-text: 2869 -->Edrward 8<!-- /react-text --></td><td class="" data-reactid="2870"><!-- react-text: 2871 -->32<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2872"><td class="" data-reactid="2873"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2874"></span><!-- react-empty: 2875 --><!-- react-text: 2876 -->Edrward 9<!-- /react-text --></td><td class="" data-reactid="2877"><!-- react-text: 2878 -->32<!-- /react-text --></td></tr></tbody></table></div></div></span></div><div class="ant-table-scroll" data-reactid="2879"><span data-reactid="2880"><div class="ant-table-header" data-reactid="2881"><table class="ant-table-fixed" style="width:1500px;" data-reactid="2882"><colgroup data-reactid="2883"><col style="width:100px;min-width:100px;" data-reactid="2884"/><col style="width:100px;min-width:100px;" data-reactid="2885"/><col style="width:150px;min-width:150px;" data-reactid="2886"/><col style="width:150px;min-width:150px;" data-reactid="2887"/><col style="width:150px;min-width:150px;" data-reactid="2888"/><col style="width:150px;min-width:150px;" data-reactid="2889"/><col style="width:150px;min-width:150px;" data-reactid="2890"/><col style="width:150px;min-width:150px;" data-reactid="2891"/><col style="width:150px;min-width:150px;" data-reactid="2892"/><col data-reactid="2893"/><col style="width:100px;min-width:100px;" data-reactid="2894"/></colgroup><thead class="ant-table-thead" data-reactid="2895"><tr data-reactid="2896"><th class="" data-reactid="2897"><span data-reactid="2898"><!-- react-text: 2899 -->Full Name<!-- /react-text --></span></th><th class="" data-reactid="2900"><span data-reactid="2901"><!-- react-text: 2902 -->Age<!-- /react-text --></span></th><th class="" data-reactid="2903"><span data-reactid="2904"><!-- react-text: 2905 -->Column 1<!-- /react-text --></span></th><th class="" data-reactid="2906"><span data-reactid="2907"><!-- react-text: 2908 -->Column 2<!-- /react-text --></span></th><th class="" data-reactid="2909"><span data-reactid="2910"><!-- react-text: 2911 -->Column 3<!-- /react-text --></span></th><th class="" data-reactid="2912"><span data-reactid="2913"><!-- react-text: 2914 -->Column 4<!-- /react-text --></span></th><th class="" data-reactid="2915"><span data-reactid="2916"><!-- react-text: 2917 -->Column 5<!-- /react-text --></span></th><th class="" data-reactid="2918"><span data-reactid="2919"><!-- react-text: 2920 -->Column 6<!-- /react-text --></span></th><th class="" data-reactid="2921"><span data-reactid="2922"><!-- react-text: 2923 -->Column 7<!-- /react-text --></span></th><th class="" data-reactid="2924"><span data-reactid="2925"><!-- react-text: 2926 -->Column 8<!-- /react-text --></span></th><th class="" data-reactid="2927"><span data-reactid="2928"><!-- react-text: 2929 -->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="2930"><table class="ant-table-fixed" style="width:1500px;" data-reactid="2931"><colgroup data-reactid="2932"><col style="width:100px;min-width:100px;" data-reactid="2933"/><col style="width:100px;min-width:100px;" data-reactid="2934"/><col style="width:150px;min-width:150px;" data-reactid="2935"/><col style="width:150px;min-width:150px;" data-reactid="2936"/><col style="width:150px;min-width:150px;" data-reactid="2937"/><col style="width:150px;min-width:150px;" data-reactid="2938"/><col style="width:150px;min-width:150px;" data-reactid="2939"/><col style="width:150px;min-width:150px;" data-reactid="2940"/><col style="width:150px;min-width:150px;" data-reactid="2941"/><col data-reactid="2942"/><col style="width:100px;min-width:100px;" data-reactid="2943"/></colgroup><tbody class="ant-table-tbody" data-reactid="2944"><tr class="ant-table-row ant-table-row-level-0" data-reactid="2945"><td class="" data-reactid="2946"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2947"></span><!-- react-empty: 2948 --><!-- react-text: 2949 -->Edrward 0<!-- /react-text --></td><td class="" data-reactid="2950"><!-- react-text: 2951 -->32<!-- /react-text --></td><td class="" data-reactid="2952"><!-- react-text: 2953 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2954"><!-- react-text: 2955 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2956"><!-- react-text: 2957 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2958"><!-- react-text: 2959 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2960"><!-- react-text: 2961 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2962"><!-- react-text: 2963 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2964"><!-- react-text: 2965 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2966"><!-- react-text: 2967 -->London Park no. 0<!-- /react-text --></td><td class="" data-reactid="2968"><a href="#" data-reactid="2969">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2970"><td class="" data-reactid="2971"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2972"></span><!-- react-empty: 2973 --><!-- react-text: 2974 -->Edrward 1<!-- /react-text --></td><td class="" data-reactid="2975"><!-- react-text: 2976 -->32<!-- /react-text --></td><td class="" data-reactid="2977"><!-- react-text: 2978 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="2979"><!-- react-text: 2980 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="2981"><!-- react-text: 2982 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="2983"><!-- react-text: 2984 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="2985"><!-- react-text: 2986 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="2987"><!-- react-text: 2988 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="2989"><!-- react-text: 2990 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="2991"><!-- react-text: 2992 -->London Park no. 1<!-- /react-text --></td><td class="" data-reactid="2993"><a href="#" data-reactid="2994">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="2995"><td class="" data-reactid="2996"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="2997"></span><!-- react-empty: 2998 --><!-- react-text: 2999 -->Edrward 2<!-- /react-text --></td><td class="" data-reactid="3000"><!-- react-text: 3001 -->32<!-- /react-text --></td><td class="" data-reactid="3002"><!-- react-text: 3003 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3004"><!-- react-text: 3005 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3006"><!-- react-text: 3007 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3008"><!-- react-text: 3009 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3010"><!-- react-text: 3011 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3012"><!-- react-text: 3013 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3014"><!-- react-text: 3015 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3016"><!-- react-text: 3017 -->London Park no. 2<!-- /react-text --></td><td class="" data-reactid="3018"><a href="#" data-reactid="3019">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3020"><td class="" data-reactid="3021"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3022"></span><!-- react-empty: 3023 --><!-- react-text: 3024 -->Edrward 3<!-- /react-text --></td><td class="" data-reactid="3025"><!-- react-text: 3026 -->32<!-- /react-text --></td><td class="" data-reactid="3027"><!-- react-text: 3028 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3029"><!-- react-text: 3030 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3031"><!-- react-text: 3032 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3033"><!-- react-text: 3034 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3035"><!-- react-text: 3036 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3037"><!-- react-text: 3038 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3039"><!-- react-text: 3040 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3041"><!-- react-text: 3042 -->London Park no. 3<!-- /react-text --></td><td class="" data-reactid="3043"><a href="#" data-reactid="3044">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3045"><td class="" data-reactid="3046"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3047"></span><!-- react-empty: 3048 --><!-- react-text: 3049 -->Edrward 4<!-- /react-text --></td><td class="" data-reactid="3050"><!-- react-text: 3051 -->32<!-- /react-text --></td><td class="" data-reactid="3052"><!-- react-text: 3053 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3054"><!-- react-text: 3055 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3056"><!-- react-text: 3057 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3058"><!-- react-text: 3059 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3060"><!-- react-text: 3061 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3062"><!-- react-text: 3063 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3064"><!-- react-text: 3065 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3066"><!-- react-text: 3067 -->London Park no. 4<!-- /react-text --></td><td class="" data-reactid="3068"><a href="#" data-reactid="3069">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3070"><td class="" data-reactid="3071"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3072"></span><!-- react-empty: 3073 --><!-- react-text: 3074 -->Edrward 5<!-- /react-text --></td><td class="" data-reactid="3075"><!-- react-text: 3076 -->32<!-- /react-text --></td><td class="" data-reactid="3077"><!-- react-text: 3078 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3079"><!-- react-text: 3080 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3081"><!-- react-text: 3082 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3083"><!-- react-text: 3084 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3085"><!-- react-text: 3086 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3087"><!-- react-text: 3088 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3089"><!-- react-text: 3090 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3091"><!-- react-text: 3092 -->London Park no. 5<!-- /react-text --></td><td class="" data-reactid="3093"><a href="#" data-reactid="3094">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3095"><td class="" data-reactid="3096"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3097"></span><!-- react-empty: 3098 --><!-- react-text: 3099 -->Edrward 6<!-- /react-text --></td><td class="" data-reactid="3100"><!-- react-text: 3101 -->32<!-- /react-text --></td><td class="" data-reactid="3102"><!-- react-text: 3103 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3104"><!-- react-text: 3105 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3106"><!-- react-text: 3107 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3108"><!-- react-text: 3109 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3110"><!-- react-text: 3111 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3112"><!-- react-text: 3113 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3114"><!-- react-text: 3115 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3116"><!-- react-text: 3117 -->London Park no. 6<!-- /react-text --></td><td class="" data-reactid="3118"><a href="#" data-reactid="3119">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3120"><td class="" data-reactid="3121"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3122"></span><!-- react-empty: 3123 --><!-- react-text: 3124 -->Edrward 7<!-- /react-text --></td><td class="" data-reactid="3125"><!-- react-text: 3126 -->32<!-- /react-text --></td><td class="" data-reactid="3127"><!-- react-text: 3128 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3129"><!-- react-text: 3130 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3131"><!-- react-text: 3132 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3133"><!-- react-text: 3134 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3135"><!-- react-text: 3136 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3137"><!-- react-text: 3138 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3139"><!-- react-text: 3140 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3141"><!-- react-text: 3142 -->London Park no. 7<!-- /react-text --></td><td class="" data-reactid="3143"><a href="#" data-reactid="3144">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3145"><td class="" data-reactid="3146"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3147"></span><!-- react-empty: 3148 --><!-- react-text: 3149 -->Edrward 8<!-- /react-text --></td><td class="" data-reactid="3150"><!-- react-text: 3151 -->32<!-- /react-text --></td><td class="" data-reactid="3152"><!-- react-text: 3153 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3154"><!-- react-text: 3155 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3156"><!-- react-text: 3157 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3158"><!-- react-text: 3159 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3160"><!-- react-text: 3161 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3162"><!-- react-text: 3163 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3164"><!-- react-text: 3165 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3166"><!-- react-text: 3167 -->London Park no. 8<!-- /react-text --></td><td class="" data-reactid="3168"><a href="#" data-reactid="3169">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3170"><td class="" data-reactid="3171"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3172"></span><!-- react-empty: 3173 --><!-- react-text: 3174 -->Edrward 9<!-- /react-text --></td><td class="" data-reactid="3175"><!-- react-text: 3176 -->32<!-- /react-text --></td><td class="" data-reactid="3177"><!-- react-text: 3178 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3179"><!-- react-text: 3180 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3181"><!-- react-text: 3182 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3183"><!-- react-text: 3184 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3185"><!-- react-text: 3186 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3187"><!-- react-text: 3188 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3189"><!-- react-text: 3190 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3191"><!-- react-text: 3192 -->London Park no. 9<!-- /react-text --></td><td class="" data-reactid="3193"><a href="#" data-reactid="3194">action</a></td></tr></tbody></table></div></span></div><div class="ant-table-fixed-right" data-reactid="3195"><span data-reactid="3196"><div class="ant-table-header" data-reactid="3197"><table class="ant-table-fixed" data-reactid="3198"><colgroup data-reactid="3199"><col style="width:100px;min-width:100px;" data-reactid="3200"/></colgroup><thead class="ant-table-thead" data-reactid="3201"><tr data-reactid="3202"><th class="" data-reactid="3203"><span data-reactid="3204"><!-- react-text: 3205 -->Action<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" style="height:300px;" data-reactid="3206"><div class="ant-table-body-inner" data-reactid="3207"><table class="ant-table-fixed" data-reactid="3208"><colgroup data-reactid="3209"><col style="width:100px;min-width:100px;" data-reactid="3210"/></colgroup><tbody class="ant-table-tbody" data-reactid="3211"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3212"><td class="" data-reactid="3213"><a href="#" data-reactid="3214">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3215"><td class="" data-reactid="3216"><a href="#" data-reactid="3217">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3218"><td class="" data-reactid="3219"><a href="#" data-reactid="3220">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3221"><td class="" data-reactid="3222"><a href="#" data-reactid="3223">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3224"><td class="" data-reactid="3225"><a href="#" data-reactid="3226">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3227"><td class="" data-reactid="3228"><a href="#" data-reactid="3229">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3230"><td class="" data-reactid="3231"><a href="#" data-reactid="3232">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3233"><td class="" data-reactid="3234"><a href="#" data-reactid="3235">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3236"><td class="" data-reactid="3237"><a href="#" data-reactid="3238">action</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3239"><td class="" data-reactid="3240"><a href="#" data-reactid="3241">action</a></td></tr></tbody></table></div></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="3242"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3243"><a data-reactid="3244"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3245"><a data-reactid="3246">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="3247"><a data-reactid="3248">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="3249"><a data-reactid="3250">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="3251"><a data-reactid="3252">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" data-reactid="3253"><a data-reactid="3254">5</a></li><li title="Next 5 Pages" class="ant-pagination-jump-next" data-reactid="3255"><a data-reactid="3256"></a></li><li title="10" class="ant-pagination-item ant-pagination-item-10" data-reactid="3257"><a data-reactid="3258">10</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="3259"><a data-reactid="3260"></a></li><!-- react-empty: 3261 --></ul></div></section><section class="code-box-meta markdown" data-reactid="3262"><div class="code-box-title" data-reactid="3263"><a href="#components-table-demo-fixed-columns-header" data-reactid="3264">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="3265"><i class="anticon anticon-edit" data-reactid="3266"></i></a></div><div data-reactid="3267"><p data-reactid="3268"><!-- react-text: 3269 -->Suitable for large amounts of data with long columns.<!-- /react-text --></p><blockquote data-reactid="3270"><p data-reactid="3271"><!-- react-text: 3272 -->Specify the width of each column if header and cell do not align properly.<!-- /react-text --></p><p data-reactid="3273"><!-- react-text: 3274 -->A fixed width for <!-- /react-text --><code data-reactid="3275"><!-- react-text: 3276 -->scroll.x<!-- /react-text --></code><!-- react-text: 3277 --> is recommended. The sum of unfixed columns should not greater than <!-- /react-text --><code data-reactid="3278"><!-- react-text: 3279 -->scroll.x<!-- /react-text --></code><!-- react-text: 3280 -->.<!-- /react-text --></p></blockquote></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="3281"></i></section><section class="highlight-wrapper" data-reactid="3282"><div class="highlight" data-reactid="3283"><pre class="language-jsx" data-reactid="3284"><code data-reactid="3285"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Full Name'</span><span class="token punctuation" >,</span> width<span class="token punctuation" >:</span> <span class="token number" >100</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span> fixed<span class="token punctuation" >:</span> <span class="token string" >'left'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span> width<span class="token punctuation" >:</span> <span class="token number" >100</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span> fixed<span class="token punctuation" >:</span> <span class="token string" >'left'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 1'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span> width<span class="token punctuation" >:</span> <span class="token number" >150</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 2'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'2'</span><span class="token punctuation" >,</span> width<span class="token punctuation" >:</span> <span class="token number" >150</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 3'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'3'</span><span class="token punctuation" >,</span> width<span class="token punctuation" >:</span> <span class="token number" >150</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 4'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'4'</span><span class="token punctuation" >,</span> width<span class="token punctuation" >:</span> <span class="token number" >150</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 5'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'5'</span><span class="token punctuation" >,</span> width<span class="token punctuation" >:</span> <span class="token number" >150</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 6'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'6'</span><span class="token punctuation" >,</span> width<span class="token punctuation" >:</span> <span class="token number" >150</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 7'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'7'</span><span class="token punctuation" >,</span> width<span class="token punctuation" >:</span> <span class="token number" >150</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Column 8'</span><span class="token punctuation" >,</span> dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> key<span class="token punctuation" >:</span> <span class="token string" >'8'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Action'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'operation'</span><span class="token punctuation" >,</span>
fixed<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >100</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> <span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>action<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >for</span> <span class="token punctuation" >(</span><span class="token keyword" >let</span> i <span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >;</span> i <span class="token operator" >&lt;</span> <span class="token number" >100</span><span class="token punctuation" >;</span> i<span class="token operator" >++</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
data<span class="token punctuation" >.</span><span class="token function" >push</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> i<span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`Edrward </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>i<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`London Park no. </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>i<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span> <span class="token attr-name" >scroll</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span> x<span class="token punctuation" >:</span> <span class="token number" >1500</span><span class="token punctuation" >,</span> y<span class="token punctuation" >:</span> <span class="token number" >300</span> <span class="token punctuation" >}</span><span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-grouping-columns" data-reactid="3286"><section class="code-box-demo" data-reactid="3287"><div class=" clearfix" data-reactid="3288"><div class="ant-spin-nested-loading" data-reactid="3289"><div class="ant-spin-container" data-reactid="3290"><div class="ant-table ant-table-middle ant-table-bordered ant-table-fixed-header ant-table-scroll-position-left" data-reactid="3291"><div class="ant-table-content" data-reactid="3292"><div class="ant-table-fixed-left" data-reactid="3293"><span data-reactid="3294"><div class="ant-table-header" data-reactid="3295"><table class="ant-table-fixed" data-reactid="3296"><colgroup data-reactid="3297"><col style="width:100px;min-width:100px;" data-reactid="3298"/></colgroup><thead class="ant-table-thead" data-reactid="3299"><tr data-reactid="3300"><th class="" rowspan="4" data-reactid="3301"><span data-reactid="3302"><!-- react-text: 3303 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter " data-reactid="3304"></i></span></th></tr></thead></table></div><div class="ant-table-body-outer" style="height:240px;" data-reactid="3305"><div class="ant-table-body-inner" data-reactid="3306"><table class="ant-table-fixed" data-reactid="3307"><colgroup data-reactid="3308"><col style="width:100px;min-width:100px;" data-reactid="3309"/></colgroup><tbody class="ant-table-tbody" data-reactid="3310"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3311"><td class="" data-reactid="3312"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3313"></span><!-- react-empty: 3314 --><!-- react-text: 3315 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3316"><td class="" data-reactid="3317"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3318"></span><!-- react-empty: 3319 --><!-- react-text: 3320 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3321"><td class="" data-reactid="3322"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3323"></span><!-- react-empty: 3324 --><!-- react-text: 3325 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3326"><td class="" data-reactid="3327"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3328"></span><!-- react-empty: 3329 --><!-- react-text: 3330 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3331"><td class="" data-reactid="3332"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3333"></span><!-- react-empty: 3334 --><!-- react-text: 3335 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3336"><td class="" data-reactid="3337"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3338"></span><!-- react-empty: 3339 --><!-- react-text: 3340 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3341"><td class="" data-reactid="3342"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3343"></span><!-- react-empty: 3344 --><!-- react-text: 3345 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3346"><td class="" data-reactid="3347"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3348"></span><!-- react-empty: 3349 --><!-- react-text: 3350 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3351"><td class="" data-reactid="3352"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3353"></span><!-- react-empty: 3354 --><!-- react-text: 3355 -->John Brown<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3356"><td class="" data-reactid="3357"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3358"></span><!-- react-empty: 3359 --><!-- react-text: 3360 -->John Brown<!-- /react-text --></td></tr></tbody></table></div></div></span></div><div class="ant-table-scroll" data-reactid="3361"><span data-reactid="3362"><div class="ant-table-header" data-reactid="3363"><table class="ant-table-fixed" style="width:1010px;" data-reactid="3364"><colgroup data-reactid="3365"><col style="width:100px;min-width:100px;" data-reactid="3366"/><col style="width:100px;min-width:100px;" data-reactid="3367"/><col style="width:200px;min-width:200px;" data-reactid="3368"/><col style="width:50px;min-width:50px;" data-reactid="3369"/><col style="width:100px;min-width:100px;" data-reactid="3370"/><col style="width:200px;min-width:200px;" data-reactid="3371"/><col style="width:200px;min-width:200px;" data-reactid="3372"/><col style="width:60px;min-width:60px;" data-reactid="3373"/></colgroup><thead class="ant-table-thead" data-reactid="3374"><tr data-reactid="3375"><th class="" rowspan="4" data-reactid="3376"><span data-reactid="3377"><!-- react-text: 3378 -->Name<!-- /react-text --><i title="Filter Menu" class="anticon anticon-filter " data-reactid="3379"></i></span></th><th class="" colspan="4" data-reactid="3380"><span data-reactid="3381"><!-- react-text: 3382 -->Other<!-- /react-text --></span></th><th class="" colspan="2" data-reactid="3383"><span data-reactid="3384"><!-- react-text: 3385 -->Company<!-- /react-text --></span></th><th class="" rowspan="4" data-reactid="3386"><span data-reactid="3387"><!-- react-text: 3388 -->Gender<!-- /react-text --></span></th></tr><tr data-reactid="3389"><th class="" rowspan="3" data-reactid="3390"><span data-reactid="3391"><!-- react-text: 3392 -->Age<!-- /react-text --><div class="ant-table-column-sorter" data-reactid="3393"><span class="ant-table-column-sorter-up off" title="↑" data-reactid="3394"><i class="anticon anticon-caret-up " data-reactid="3395"></i></span><span class="ant-table-column-sorter-down off" title="↓" data-reactid="3396"><i class="anticon anticon-caret-down " data-reactid="3397"></i></span></div></span></th><th class="" colspan="3" data-reactid="3398"><span data-reactid="3399"><!-- react-text: 3400 -->Address<!-- /react-text --></span></th><th class="" rowspan="3" data-reactid="3401"><span data-reactid="3402"><!-- react-text: 3403 -->Company Address<!-- /react-text --></span></th><th class="" rowspan="3" data-reactid="3404"><span data-reactid="3405"><!-- react-text: 3406 -->Company Name<!-- /react-text --></span></th></tr><tr data-reactid="3407"><th class="" rowspan="2" data-reactid="3408"><span data-reactid="3409"><!-- react-text: 3410 -->Street<!-- /react-text --></span></th><th class="" colspan="2" data-reactid="3411"><span data-reactid="3412"><!-- react-text: 3413 -->Block<!-- /react-text --></span></th></tr><tr data-reactid="3414"><th class="" data-reactid="3415"><span data-reactid="3416"><!-- react-text: 3417 -->Building<!-- /react-text --></span></th><th class="" data-reactid="3418"><span data-reactid="3419"><!-- react-text: 3420 -->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="3421"><table class="ant-table-fixed" style="width:1010px;" data-reactid="3422"><colgroup data-reactid="3423"><col style="width:100px;min-width:100px;" data-reactid="3424"/><col style="width:100px;min-width:100px;" data-reactid="3425"/><col style="width:200px;min-width:200px;" data-reactid="3426"/><col style="width:50px;min-width:50px;" data-reactid="3427"/><col style="width:100px;min-width:100px;" data-reactid="3428"/><col style="width:200px;min-width:200px;" data-reactid="3429"/><col style="width:200px;min-width:200px;" data-reactid="3430"/><col style="width:60px;min-width:60px;" data-reactid="3431"/></colgroup><tbody class="ant-table-tbody" data-reactid="3432"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3433"><td class="" data-reactid="3434"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3435"></span><!-- react-empty: 3436 --><!-- react-text: 3437 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3438"><!-- react-text: 3439 -->1<!-- /react-text --></td><td class="" data-reactid="3440"><!-- react-text: 3441 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3442"><!-- react-text: 3443 -->C<!-- /react-text --></td><td class="" data-reactid="3444"><!-- react-text: 3445 -->2035<!-- /react-text --></td><td class="" data-reactid="3446"><!-- react-text: 3447 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3448"><!-- react-text: 3449 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3450"><!-- react-text: 3451 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3452"><td class="" data-reactid="3453"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3454"></span><!-- react-empty: 3455 --><!-- react-text: 3456 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3457"><!-- react-text: 3458 -->2<!-- /react-text --></td><td class="" data-reactid="3459"><!-- react-text: 3460 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3461"><!-- react-text: 3462 -->C<!-- /react-text --></td><td class="" data-reactid="3463"><!-- react-text: 3464 -->2035<!-- /react-text --></td><td class="" data-reactid="3465"><!-- react-text: 3466 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3467"><!-- react-text: 3468 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3469"><!-- react-text: 3470 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3471"><td class="" data-reactid="3472"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3473"></span><!-- react-empty: 3474 --><!-- react-text: 3475 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3476"><!-- react-text: 3477 -->3<!-- /react-text --></td><td class="" data-reactid="3478"><!-- react-text: 3479 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3480"><!-- react-text: 3481 -->C<!-- /react-text --></td><td class="" data-reactid="3482"><!-- react-text: 3483 -->2035<!-- /react-text --></td><td class="" data-reactid="3484"><!-- react-text: 3485 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3486"><!-- react-text: 3487 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3488"><!-- react-text: 3489 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3490"><td class="" data-reactid="3491"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3492"></span><!-- react-empty: 3493 --><!-- react-text: 3494 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3495"><!-- react-text: 3496 -->4<!-- /react-text --></td><td class="" data-reactid="3497"><!-- react-text: 3498 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3499"><!-- react-text: 3500 -->C<!-- /react-text --></td><td class="" data-reactid="3501"><!-- react-text: 3502 -->2035<!-- /react-text --></td><td class="" data-reactid="3503"><!-- react-text: 3504 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3505"><!-- react-text: 3506 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3507"><!-- react-text: 3508 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3509"><td class="" data-reactid="3510"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3511"></span><!-- react-empty: 3512 --><!-- react-text: 3513 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3514"><!-- react-text: 3515 -->5<!-- /react-text --></td><td class="" data-reactid="3516"><!-- react-text: 3517 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3518"><!-- react-text: 3519 -->C<!-- /react-text --></td><td class="" data-reactid="3520"><!-- react-text: 3521 -->2035<!-- /react-text --></td><td class="" data-reactid="3522"><!-- react-text: 3523 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3524"><!-- react-text: 3525 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3526"><!-- react-text: 3527 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3528"><td class="" data-reactid="3529"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3530"></span><!-- react-empty: 3531 --><!-- react-text: 3532 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3533"><!-- react-text: 3534 -->6<!-- /react-text --></td><td class="" data-reactid="3535"><!-- react-text: 3536 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3537"><!-- react-text: 3538 -->C<!-- /react-text --></td><td class="" data-reactid="3539"><!-- react-text: 3540 -->2035<!-- /react-text --></td><td class="" data-reactid="3541"><!-- react-text: 3542 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3543"><!-- react-text: 3544 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3545"><!-- react-text: 3546 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3547"><td class="" data-reactid="3548"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3549"></span><!-- react-empty: 3550 --><!-- react-text: 3551 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3552"><!-- react-text: 3553 -->7<!-- /react-text --></td><td class="" data-reactid="3554"><!-- react-text: 3555 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3556"><!-- react-text: 3557 -->C<!-- /react-text --></td><td class="" data-reactid="3558"><!-- react-text: 3559 -->2035<!-- /react-text --></td><td class="" data-reactid="3560"><!-- react-text: 3561 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3562"><!-- react-text: 3563 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3564"><!-- react-text: 3565 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3566"><td class="" data-reactid="3567"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3568"></span><!-- react-empty: 3569 --><!-- react-text: 3570 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3571"><!-- react-text: 3572 -->8<!-- /react-text --></td><td class="" data-reactid="3573"><!-- react-text: 3574 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3575"><!-- react-text: 3576 -->C<!-- /react-text --></td><td class="" data-reactid="3577"><!-- react-text: 3578 -->2035<!-- /react-text --></td><td class="" data-reactid="3579"><!-- react-text: 3580 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3581"><!-- react-text: 3582 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3583"><!-- react-text: 3584 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3585"><td class="" data-reactid="3586"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3587"></span><!-- react-empty: 3588 --><!-- react-text: 3589 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3590"><!-- react-text: 3591 -->9<!-- /react-text --></td><td class="" data-reactid="3592"><!-- react-text: 3593 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3594"><!-- react-text: 3595 -->C<!-- /react-text --></td><td class="" data-reactid="3596"><!-- react-text: 3597 -->2035<!-- /react-text --></td><td class="" data-reactid="3598"><!-- react-text: 3599 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3600"><!-- react-text: 3601 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3602"><!-- react-text: 3603 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3604"><td class="" data-reactid="3605"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3606"></span><!-- react-empty: 3607 --><!-- react-text: 3608 -->John Brown<!-- /react-text --></td><td class="" data-reactid="3609"><!-- react-text: 3610 -->10<!-- /react-text --></td><td class="" data-reactid="3611"><!-- react-text: 3612 -->Lake Park<!-- /react-text --></td><td class="" data-reactid="3613"><!-- react-text: 3614 -->C<!-- /react-text --></td><td class="" data-reactid="3615"><!-- react-text: 3616 -->2035<!-- /react-text --></td><td class="" data-reactid="3617"><!-- react-text: 3618 -->Lake Street 42<!-- /react-text --></td><td class="" data-reactid="3619"><!-- react-text: 3620 -->SoftLake Co<!-- /react-text --></td><td class="" data-reactid="3621"><!-- react-text: 3622 -->M<!-- /react-text --></td></tr></tbody></table></div></span></div><div class="ant-table-fixed-right" data-reactid="3623"><span data-reactid="3624"><div class="ant-table-header" data-reactid="3625"><table class="ant-table-fixed" data-reactid="3626"><colgroup data-reactid="3627"><col style="width:60px;min-width:60px;" data-reactid="3628"/></colgroup><thead class="ant-table-thead" data-reactid="3629"><tr data-reactid="3630"><th class="" rowspan="4" data-reactid="3631"><span data-reactid="3632"><!-- react-text: 3633 -->Gender<!-- /react-text --></span></th></tr></thead></table></div><div class="ant-table-body-outer" style="height:240px;" data-reactid="3634"><div class="ant-table-body-inner" data-reactid="3635"><table class="ant-table-fixed" data-reactid="3636"><colgroup data-reactid="3637"><col style="width:60px;min-width:60px;" data-reactid="3638"/></colgroup><tbody class="ant-table-tbody" data-reactid="3639"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3640"><td class="" data-reactid="3641"><!-- react-text: 3642 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3643"><td class="" data-reactid="3644"><!-- react-text: 3645 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3646"><td class="" data-reactid="3647"><!-- react-text: 3648 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3649"><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"><!-- react-text: 3654 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3655"><td class="" data-reactid="3656"><!-- react-text: 3657 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3658"><td class="" data-reactid="3659"><!-- react-text: 3660 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3661"><td class="" data-reactid="3662"><!-- react-text: 3663 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3664"><td class="" data-reactid="3665"><!-- react-text: 3666 -->M<!-- /react-text --></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3667"><td class="" data-reactid="3668"><!-- react-text: 3669 -->M<!-- /react-text --></td></tr></tbody></table></div></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination mini" unselectable="unselectable" data-reactid="3670"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3671"><a data-reactid="3672"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3673"><a data-reactid="3674">1</a></li><li title="2" class="ant-pagination-item ant-pagination-item-2" data-reactid="3675"><a data-reactid="3676">2</a></li><li title="3" class="ant-pagination-item ant-pagination-item-3" data-reactid="3677"><a data-reactid="3678">3</a></li><li title="4" class="ant-pagination-item ant-pagination-item-4" data-reactid="3679"><a data-reactid="3680">4</a></li><li title="5" class="ant-pagination-item ant-pagination-item-5" data-reactid="3681"><a data-reactid="3682">5</a></li><li title="Next 5 Pages" class="ant-pagination-jump-next" data-reactid="3683"><a data-reactid="3684"></a></li><li title="10" class="ant-pagination-item ant-pagination-item-10" data-reactid="3685"><a data-reactid="3686">10</a></li><li title="Next Page" class=" ant-pagination-next" data-reactid="3687"><a data-reactid="3688"></a></li><!-- react-empty: 3689 --></ul></div></section><section class="code-box-meta markdown" data-reactid="3690"><div class="code-box-title" data-reactid="3691"><a href="#components-table-demo-grouping-columns" data-reactid="3692">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="3693"><i class="anticon anticon-edit" data-reactid="3694"></i></a></div><div data-reactid="3695"><p data-reactid="3696"><!-- react-text: 3697 -->Group table head with <!-- /react-text --><code data-reactid="3698"><!-- react-text: 3699 -->columns[n].children<!-- /react-text --></code><!-- react-text: 3700 -->.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="3701"></i></section><section class="highlight-wrapper" data-reactid="3702"><div class="highlight" data-reactid="3703"><pre class="language-jsx" data-reactid="3704"><code data-reactid="3705"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >100</span><span class="token punctuation" >,</span>
fixed<span class="token punctuation" >:</span> <span class="token string" >'left'</span><span class="token punctuation" >,</span>
filters<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
text<span class="token punctuation" >:</span> <span class="token string" >'Joe'</span><span class="token punctuation" >,</span>
value<span class="token punctuation" >:</span> <span class="token string" >'Joe'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
text<span class="token punctuation" >:</span> <span class="token string" >'John'</span><span class="token punctuation" >,</span>
value<span class="token punctuation" >:</span> <span class="token string" >'John'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
onFilter<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>value<span class="token punctuation" >,</span> record<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> record<span class="token punctuation" >.</span>name<span class="token punctuation" >.</span><span class="token function" >indexOf</span><span class="token punctuation" >(</span>value<span class="token punctuation" >)</span> <span class="token operator" >===</span> <span class="token number" >0</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Other'</span><span class="token punctuation" >,</span>
children<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >100</span><span class="token punctuation" >,</span>
sorter<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>a<span class="token punctuation" >,</span> b<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> a<span class="token punctuation" >.</span>age <span class="token operator" >-</span> b<span class="token punctuation" >.</span>age<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
children<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Street'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'street'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'street'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >200</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Block'</span><span class="token punctuation" >,</span>
children<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Building'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'building'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'building'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >50</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Door No.'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'number'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >100</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Company'</span><span class="token punctuation" >,</span>
children<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Company Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'companyAddress'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'companyAddress'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >200</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Company Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'companyName'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'companyName'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >200</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Gender'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'gender'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'gender'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >60</span><span class="token punctuation" >,</span>
fixed<span class="token punctuation" >:</span> <span class="token string" >'right'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >for</span> <span class="token punctuation" >(</span><span class="token keyword" >let</span> i <span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >;</span> i <span class="token operator" >&lt;</span> <span class="token number" >100</span><span class="token punctuation" >;</span> i<span class="token operator" >++</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
data<span class="token punctuation" >.</span><span class="token function" >push</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> i<span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> i <span class="token operator" >+</span> <span class="token number" >1</span><span class="token punctuation" >,</span>
street<span class="token punctuation" >:</span> <span class="token string" >'Lake Park'</span><span class="token punctuation" >,</span>
building<span class="token punctuation" >:</span> <span class="token string" >'C'</span><span class="token punctuation" >,</span>
number<span class="token punctuation" >:</span> <span class="token number" >2035</span><span class="token punctuation" >,</span>
companyAddress<span class="token punctuation" >:</span> <span class="token string" >'Lake Street 42'</span><span class="token punctuation" >,</span>
companyName<span class="token punctuation" >:</span> <span class="token string" >'SoftLake Co'</span><span class="token punctuation" >,</span>
gender<span class="token punctuation" >:</span> <span class="token string" >'M'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span>
<span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span>
<span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span></span>
<span class="token attr-name" >bordered</span>
<span class="token attr-name" >size</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>middle<span class="token punctuation" >"</span></span>
<span class="token attr-name" >scroll</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span> x<span class="token punctuation" >:</span> <span class="token number" >1010</span><span class="token punctuation" >,</span> y<span class="token punctuation" >:</span> <span class="token number" >240</span> <span class="token punctuation" >}</span><span class="token punctuation" >}</span></span>
<span class="token punctuation" >/></span></span>
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-edit-cell" data-reactid="3706"><section class="code-box-demo" data-reactid="3707"><div data-reactid="3708"><button type="button" class="ant-btn ant-btn-ghost editable-add-btn" data-reactid="3709"><span data-reactid="3710">Add</span></button><div class=" clearfix" data-reactid="3711"><div class="ant-spin-nested-loading" data-reactid="3712"><div class="ant-spin-container" data-reactid="3713"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="3714"><div class="ant-table-content" data-reactid="3715"><div class="" data-reactid="3716"><span data-reactid="3717"><div class="ant-table-body" data-reactid="3718"><table class="" data-reactid="3719"><colgroup data-reactid="3720"><col style="width:30%;min-width:30%;" data-reactid="3721"/><col data-reactid="3722"/><col data-reactid="3723"/><col data-reactid="3724"/></colgroup><thead class="ant-table-thead" data-reactid="3725"><tr data-reactid="3726"><th class="" data-reactid="3727"><span data-reactid="3728"><!-- react-text: 3729 -->name<!-- /react-text --></span></th><th class="" data-reactid="3730"><span data-reactid="3731"><!-- react-text: 3732 -->age<!-- /react-text --></span></th><th class="" data-reactid="3733"><span data-reactid="3734"><!-- react-text: 3735 -->address<!-- /react-text --></span></th><th class="" data-reactid="3736"><span data-reactid="3737"><!-- react-text: 3738 -->operation<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="3739"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3740"><td class="" data-reactid="3741"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3742"></span><!-- react-empty: 3743 --><div class="editable-cell" data-reactid="3744"><div class="editable-cell-text-wrapper" data-reactid="3745"><!-- react-text: 3746 -->Edward King 0<!-- /react-text --><i class="anticon anticon-edit editable-cell-icon" data-reactid="3747"></i></div></div></td><td class="" data-reactid="3748"><!-- react-text: 3749 -->32<!-- /react-text --></td><td class="" data-reactid="3750"><!-- react-text: 3751 -->London, Park Lane no. 0<!-- /react-text --></td><td class="" data-reactid="3752"><a href="#" data-reactid="3753">Delete</a></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3754"><td class="" data-reactid="3755"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="3756"></span><!-- react-empty: 3757 --><div class="editable-cell" data-reactid="3758"><div class="editable-cell-text-wrapper" data-reactid="3759"><!-- react-text: 3760 -->Edward King 1<!-- /react-text --><i class="anticon anticon-edit editable-cell-icon" data-reactid="3761"></i></div></div></td><td class="" data-reactid="3762"><!-- react-text: 3763 -->32<!-- /react-text --></td><td class="" data-reactid="3764"><!-- react-text: 3765 -->London, Park Lane no. 1<!-- /react-text --></td><td class="" data-reactid="3766"><a href="#" data-reactid="3767">Delete</a></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="3768"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="3769"><a data-reactid="3770"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="3771"><a data-reactid="3772">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="3773"><a data-reactid="3774"></a></li><!-- react-empty: 3775 --></ul></div></div><style data-reactid="3776">.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="3777"><div class="code-box-title" data-reactid="3778"><a href="#components-table-demo-edit-cell" data-reactid="3779">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="3780"><i class="anticon anticon-edit" data-reactid="3781"></i></a></div><div data-reactid="3782"><p data-reactid="3783"><!-- react-text: 3784 -->Table with editable cells.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="3785"></i></section><section class="highlight-wrapper" data-reactid="3786"><div class="highlight" data-reactid="3787"><pre class="language-jsx" data-reactid="3788"><code data-reactid="3789"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table<span class="token punctuation" >,</span> Input<span class="token punctuation" >,</span> Icon<span class="token punctuation" >,</span> Button<span class="token punctuation" >,</span> Popconfirm <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >class</span> <span class="token class-name" >EditableCell</span> <span class="token keyword" >extends</span> <span class="token class-name" >React<span class="token punctuation" >.</span>Component</span> <span class="token punctuation" >{</span>
state <span class="token operator" >=</span> <span class="token punctuation" >{</span>
value<span class="token punctuation" >:</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >.</span>value<span class="token punctuation" >,</span>
editable<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span>
handleChange <span class="token operator" >=</span> <span class="token punctuation" >(</span>e<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> value <span class="token operator" >=</span> e<span class="token punctuation" >.</span>target<span class="token punctuation" >.</span>value<span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> value <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
check <span class="token operator" >=</span> <span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> editable<span class="token punctuation" >:</span> <span class="token boolean" >false</span> <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >.</span>onChange<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >.</span><span class="token function" >onChange</span><span class="token punctuation" >(</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>value<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token punctuation" >}</span>
edit <span class="token operator" >=</span> <span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> editable<span class="token punctuation" >:</span> <span class="token boolean" >true</span> <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token function" >render</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> <span class="token punctuation" >{</span> value<span class="token punctuation" >,</span> editable <span class="token punctuation" >}</span> <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >;</span>
<span class="token keyword" >return</span> <span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>editable-cell<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token punctuation" >{</span>
editable <span class="token operator" >?</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>editable-cell-input-wrapper<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Input</span>
<span class="token attr-name" >value</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>value<span class="token punctuation" >}</span></span>
<span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>handleChange<span class="token punctuation" >}</span></span>
<span class="token attr-name" >onPressEnter</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>check<span class="token punctuation" >}</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Icon</span>
<span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>check<span class="token punctuation" >"</span></span>
<span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>editable-cell-icon-check<span class="token punctuation" >"</span></span>
<span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>check<span class="token punctuation" >}</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >:</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>editable-cell-text-wrapper<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token punctuation" >{</span>value <span class="token operator" >||</span> <span class="token string" >' '</span><span class="token punctuation" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Icon</span>
<span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>edit<span class="token punctuation" >"</span></span>
<span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>editable-cell-icon<span class="token punctuation" >"</span></span>
<span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>edit<span class="token punctuation" >}</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token punctuation" >}</span>
<span class="token keyword" >class</span> <span class="token class-name" >EditableTable</span> <span class="token keyword" >extends</span> <span class="token class-name" >React<span class="token punctuation" >.</span>Component</span> <span class="token punctuation" >{</span>
<span class="token function" >constructor</span><span class="token punctuation" >(</span>props<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >super</span><span class="token punctuation" >(</span>props<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span>columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token string" >'30%'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>text<span class="token punctuation" >,</span> record<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>EditableCell</span>
<span class="token attr-name" >value</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>text<span class="token punctuation" >}</span></span>
<span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >onCellChange</span><span class="token punctuation" >(</span>index<span class="token punctuation" >,</span> <span class="token string" >'name'</span><span class="token punctuation" >)</span><span class="token punctuation" >}</span></span>
<span class="token punctuation" >/></span></span>
<span class="token punctuation" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'operation'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'operation'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>text<span class="token punctuation" >,</span> record<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >return</span> <span class="token punctuation" >(</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>dataSource<span class="token punctuation" >.</span>length <span class="token operator" >></span> <span class="token number" >1</span> <span class="token operator" >?</span>
<span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Popconfirm</span> <span class="token attr-name" >title</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Sure</span> <span class="token attr-name" >to</span> <span class="token attr-name" >delete?"</span> <span class="token attr-name" >onConfirm</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >onDelete</span><span class="token punctuation" >(</span>index<span class="token punctuation" >)</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Delete<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Popconfirm</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >)</span> <span class="token punctuation" >:</span> <span class="token keyword" >null</span>
<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span>state <span class="token operator" >=</span> <span class="token punctuation" >{</span>
dataSource<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'0'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Edward King 0'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token string" >'32'</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London, Park Lane no. 0'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'1'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Edward King 1'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token string" >'32'</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token string" >'London, Park Lane no. 1'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
count<span class="token punctuation" >:</span> <span class="token number" >2</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
onCellChange <span class="token operator" >=</span> <span class="token punctuation" >(</span>index<span class="token punctuation" >,</span> key<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >return</span> <span class="token punctuation" >(</span>value<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> dataSource <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>dataSource<span class="token punctuation" >]</span><span class="token punctuation" >;</span>
dataSource<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >[</span>key<span class="token punctuation" >]</span> <span class="token operator" >=</span> value<span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> dataSource <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
onDelete <span class="token operator" >=</span> <span class="token punctuation" >(</span>index<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >return</span> <span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> 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><span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>dataSource<span class="token punctuation" >]</span><span class="token punctuation" >;</span>
dataSource<span class="token punctuation" >.</span><span class="token function" >splice</span><span class="token punctuation" >(</span>index<span class="token punctuation" >,</span> <span class="token number" >1</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> dataSource <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
handleAdd <span class="token operator" >=</span> <span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> <span class="token punctuation" >{</span> count<span class="token punctuation" >,</span> dataSource <span class="token punctuation" >}</span> <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >;</span>
<span class="token keyword" >const</span> newData <span class="token operator" >=</span> <span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> count<span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`Edward King </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>count<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token number" >32</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`London, Park Lane no. </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>count<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
dataSource<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token 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 punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token function" >render</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> <span class="token punctuation" >{</span> dataSource <span class="token punctuation" >}</span> <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>columns<span class="token punctuation" >;</span>
<span class="token keyword" >return</span> <span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Button</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>editable-add-btn<span class="token punctuation" >"</span></span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ghost<span class="token punctuation" >"</span></span> <span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>handleAdd<span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>Add<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Button</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >bordered</span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>dataSource<span class="token punctuation" >}</span></span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token punctuation" >}</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>EditableTable</span> <span class="token punctuation" >/></span></span><span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div><div class="highlight" data-reactid="3790"><pre data-reactid="3791"><code class="css" data-reactid="3792"><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-dynamic-settings" data-reactid="3793"><section class="code-box-demo" data-reactid="3794"><div data-reactid="3795"><div class="components-table-demo-control-bar" data-reactid="3796"><form class="ant-form ant-form-inline" data-reactid="3797"><div class="ant-row ant-form-item" data-reactid="3798"><div class="ant-form-item-label" data-reactid="3799"><label class="" data-reactid="3800">Bordered</label></div><div class="" data-reactid="3801"><div class="ant-form-item-control " data-reactid="3802"><span class="ant-switch" tabindex="0" data-reactid="3803"><span class="ant-switch-inner" data-reactid="3804"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="3805"><div class="ant-form-item-label" data-reactid="3806"><label class="" data-reactid="3807">loading</label></div><div class="" data-reactid="3808"><div class="ant-form-item-control " data-reactid="3809"><span class="ant-switch" tabindex="0" data-reactid="3810"><span class="ant-switch-inner" data-reactid="3811"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="3812"><div class="ant-form-item-label" data-reactid="3813"><label class="" data-reactid="3814">Pagination</label></div><div class="" data-reactid="3815"><div class="ant-form-item-control " data-reactid="3816"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="3817"><span class="ant-switch-inner" data-reactid="3818"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="3819"><div class="ant-form-item-label" data-reactid="3820"><label class="" data-reactid="3821">Title</label></div><div class="" data-reactid="3822"><div class="ant-form-item-control " data-reactid="3823"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="3824"><span class="ant-switch-inner" data-reactid="3825"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="3826"><div class="ant-form-item-label" data-reactid="3827"><label class="" data-reactid="3828">Footer</label></div><div class="" data-reactid="3829"><div class="ant-form-item-control " data-reactid="3830"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="3831"><span class="ant-switch-inner" data-reactid="3832"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="3833"><div class="ant-form-item-label" data-reactid="3834"><label class="" data-reactid="3835">Expandable</label></div><div class="" data-reactid="3836"><div class="ant-form-item-control " data-reactid="3837"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="3838"><span class="ant-switch-inner" data-reactid="3839"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="3840"><div class="ant-form-item-label" data-reactid="3841"><label class="" data-reactid="3842">Checkbox</label></div><div class="" data-reactid="3843"><div class="ant-form-item-control " data-reactid="3844"><span checked="" class="ant-switch ant-switch-checked" tabindex="0" data-reactid="3845"><span class="ant-switch-inner" data-reactid="3846"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="3847"><div class="ant-form-item-label" data-reactid="3848"><label class="" data-reactid="3849">Fixed Header</label></div><div class="" data-reactid="3850"><div class="ant-form-item-control " data-reactid="3851"><span class="ant-switch" tabindex="0" data-reactid="3852"><span class="ant-switch-inner" data-reactid="3853"></span></span></div></div></div><div class="ant-row ant-form-item" data-reactid="3854"><div class="ant-form-item-label" data-reactid="3855"><label class="" data-reactid="3856">Size</label></div><div class="" data-reactid="3857"><div class="ant-form-item-control " data-reactid="3858"><div class="ant-radio-group ant-radio-group-default" data-reactid="3859"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked" data-reactid="3860"><span class="ant-radio-button ant-radio-button-checked ant-radio-button ant-radio-button-checked ant-radio-button-checked-1" data-reactid="3861"><span class="ant-radio-button-inner" data-reactid="3862"></span><input type="radio" class="ant-radio-button-input" checked="" data-reactid="3863"/></span><span data-reactid="3864">Default</span></label><label class="ant-radio-button-wrapper" data-reactid="3865"><span class="ant-radio-button" data-reactid="3866"><span class="ant-radio-button-inner" data-reactid="3867"></span><input type="radio" class="ant-radio-button-input" data-reactid="3868"/></span><span data-reactid="3869">Middle</span></label><label class="ant-radio-button-wrapper" data-reactid="3870"><span class="ant-radio-button" data-reactid="3871"><span class="ant-radio-button-inner" data-reactid="3872"></span><input type="radio" class="ant-radio-button-input" data-reactid="3873"/></span><span data-reactid="3874">Small</span></label></div></div></div></div></form></div><div class=" clearfix" data-reactid="3875"><div class="ant-spin-nested-loading" data-reactid="3876"><div class="ant-spin-container" data-reactid="3877"><div class="ant-table ant-table-default ant-table-scroll-position-left" data-reactid="3878"><div class="ant-table-title" data-reactid="3879">Here is title</div><div class="ant-table-content" data-reactid="3880"><div class="" data-reactid="3881"><span data-reactid="3882"><div class="ant-table-body" data-reactid="3883"><table class="" data-reactid="3884"><colgroup data-reactid="3885"><col class="ant-table-expand-icon-col" data-reactid="3886"/><col data-reactid="3887"/><col style="width:150px;min-width:150px;" data-reactid="3888"/><col style="width:70px;min-width:70px;" data-reactid="3889"/><col data-reactid="3890"/><col style="width:360px;min-width:360px;" data-reactid="3891"/></colgroup><thead class="ant-table-thead" data-reactid="3892"><tr data-reactid="3893"><th class="ant-table-expand-icon-th" title="" rowspan="1" data-reactid="3894"></th><th class="ant-table-selection-column" data-reactid="3895"><span data-reactid="3896"><label class="ant-checkbox-wrapper" data-reactid="3897"><span class="ant-checkbox" data-reactid="3898"><span class="ant-checkbox-inner" data-reactid="3899"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="3900"/></span></label></span></th><th class="" data-reactid="3901"><span data-reactid="3902"><!-- react-text: 3903 -->Name<!-- /react-text --></span></th><th class="" data-reactid="3904"><span data-reactid="3905"><!-- react-text: 3906 -->Age<!-- /react-text --></span></th><th class="" data-reactid="3907"><span data-reactid="3908"><!-- react-text: 3909 -->Address<!-- /react-text --></span></th><th class="" data-reactid="3910"><span data-reactid="3911"><!-- react-text: 3912 -->Action<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="3913"><tr class="ant-table-row ant-table-row-level-0" data-reactid="3914"><td class="ant-table-row-expand-icon-cell" data-reactid="3915"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="3916"></span></td><td class="ant-table-selection-column" data-reactid="3917"><span data-reactid="3918"><label class="ant-checkbox-wrapper" data-reactid="3919"><span class="ant-checkbox" data-reactid="3920"><span class="ant-checkbox-inner" data-reactid="3921"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="3922"/></span></label></span></td><td class="" data-reactid="3923"><a href="#" data-reactid="3924">John Brown</a></td><td class="" data-reactid="3925"><!-- react-text: 3926 -->12<!-- /react-text --></td><td class="" data-reactid="3927"><!-- react-text: 3928 -->New York No. 1 Lake Park<!-- /react-text --></td><td class="" data-reactid="3929"><span data-reactid="3930"><a href="#" data-reactid="3931"><!-- react-text: 3932 -->Action 一 <!-- /react-text --><!-- react-text: 3933 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="3934"></span><a href="#" data-reactid="3935">Delete</a><span class="ant-divider" data-reactid="3936"></span><a href="#" class="ant-dropdown-link" data-reactid="3937"><!-- react-text: 3938 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="3939"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3940"><td class="ant-table-row-expand-icon-cell" data-reactid="3941"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="3942"></span></td><td class="ant-table-selection-column" data-reactid="3943"><span data-reactid="3944"><label class="ant-checkbox-wrapper" data-reactid="3945"><span class="ant-checkbox" data-reactid="3946"><span class="ant-checkbox-inner" data-reactid="3947"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="3948"/></span></label></span></td><td class="" data-reactid="3949"><a href="#" data-reactid="3950">John Brown</a></td><td class="" data-reactid="3951"><!-- react-text: 3952 -->22<!-- /react-text --></td><td class="" data-reactid="3953"><!-- react-text: 3954 -->New York No. 2 Lake Park<!-- /react-text --></td><td class="" data-reactid="3955"><span data-reactid="3956"><a href="#" data-reactid="3957"><!-- react-text: 3958 -->Action 一 <!-- /react-text --><!-- react-text: 3959 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="3960"></span><a href="#" data-reactid="3961">Delete</a><span class="ant-divider" data-reactid="3962"></span><a href="#" class="ant-dropdown-link" data-reactid="3963"><!-- react-text: 3964 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="3965"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3966"><td class="ant-table-row-expand-icon-cell" data-reactid="3967"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="3968"></span></td><td class="ant-table-selection-column" data-reactid="3969"><span data-reactid="3970"><label class="ant-checkbox-wrapper" data-reactid="3971"><span class="ant-checkbox" data-reactid="3972"><span class="ant-checkbox-inner" data-reactid="3973"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="3974"/></span></label></span></td><td class="" data-reactid="3975"><a href="#" data-reactid="3976">John Brown</a></td><td class="" data-reactid="3977"><!-- react-text: 3978 -->32<!-- /react-text --></td><td class="" data-reactid="3979"><!-- react-text: 3980 -->New York No. 3 Lake Park<!-- /react-text --></td><td class="" data-reactid="3981"><span data-reactid="3982"><a href="#" data-reactid="3983"><!-- react-text: 3984 -->Action 一 <!-- /react-text --><!-- react-text: 3985 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="3986"></span><a href="#" data-reactid="3987">Delete</a><span class="ant-divider" data-reactid="3988"></span><a href="#" class="ant-dropdown-link" data-reactid="3989"><!-- react-text: 3990 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="3991"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="3992"><td class="ant-table-row-expand-icon-cell" data-reactid="3993"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="3994"></span></td><td class="ant-table-selection-column" data-reactid="3995"><span data-reactid="3996"><label class="ant-checkbox-wrapper" data-reactid="3997"><span class="ant-checkbox" data-reactid="3998"><span class="ant-checkbox-inner" data-reactid="3999"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4000"/></span></label></span></td><td class="" data-reactid="4001"><a href="#" data-reactid="4002">John Brown</a></td><td class="" data-reactid="4003"><!-- react-text: 4004 -->42<!-- /react-text --></td><td class="" data-reactid="4005"><!-- react-text: 4006 -->New York No. 4 Lake Park<!-- /react-text --></td><td class="" data-reactid="4007"><span data-reactid="4008"><a href="#" data-reactid="4009"><!-- react-text: 4010 -->Action 一 <!-- /react-text --><!-- react-text: 4011 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4012"></span><a href="#" data-reactid="4013">Delete</a><span class="ant-divider" data-reactid="4014"></span><a href="#" class="ant-dropdown-link" data-reactid="4015"><!-- react-text: 4016 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="4017"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4018"><td class="ant-table-row-expand-icon-cell" data-reactid="4019"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4020"></span></td><td class="ant-table-selection-column" data-reactid="4021"><span data-reactid="4022"><label class="ant-checkbox-wrapper" data-reactid="4023"><span class="ant-checkbox" data-reactid="4024"><span class="ant-checkbox-inner" data-reactid="4025"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4026"/></span></label></span></td><td class="" data-reactid="4027"><a href="#" data-reactid="4028">John Brown</a></td><td class="" data-reactid="4029"><!-- react-text: 4030 -->52<!-- /react-text --></td><td class="" data-reactid="4031"><!-- react-text: 4032 -->New York No. 5 Lake Park<!-- /react-text --></td><td class="" data-reactid="4033"><span data-reactid="4034"><a href="#" data-reactid="4035"><!-- react-text: 4036 -->Action 一 <!-- /react-text --><!-- react-text: 4037 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4038"></span><a href="#" data-reactid="4039">Delete</a><span class="ant-divider" data-reactid="4040"></span><a href="#" class="ant-dropdown-link" data-reactid="4041"><!-- react-text: 4042 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="4043"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4044"><td class="ant-table-row-expand-icon-cell" data-reactid="4045"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4046"></span></td><td class="ant-table-selection-column" data-reactid="4047"><span data-reactid="4048"><label class="ant-checkbox-wrapper" data-reactid="4049"><span class="ant-checkbox" data-reactid="4050"><span class="ant-checkbox-inner" data-reactid="4051"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4052"/></span></label></span></td><td class="" data-reactid="4053"><a href="#" data-reactid="4054">John Brown</a></td><td class="" data-reactid="4055"><!-- react-text: 4056 -->62<!-- /react-text --></td><td class="" data-reactid="4057"><!-- react-text: 4058 -->New York No. 6 Lake Park<!-- /react-text --></td><td class="" data-reactid="4059"><span data-reactid="4060"><a href="#" data-reactid="4061"><!-- react-text: 4062 -->Action 一 <!-- /react-text --><!-- react-text: 4063 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4064"></span><a href="#" data-reactid="4065">Delete</a><span class="ant-divider" data-reactid="4066"></span><a href="#" class="ant-dropdown-link" data-reactid="4067"><!-- react-text: 4068 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="4069"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4070"><td class="ant-table-row-expand-icon-cell" data-reactid="4071"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4072"></span></td><td class="ant-table-selection-column" data-reactid="4073"><span data-reactid="4074"><label class="ant-checkbox-wrapper" data-reactid="4075"><span class="ant-checkbox" data-reactid="4076"><span class="ant-checkbox-inner" data-reactid="4077"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4078"/></span></label></span></td><td class="" data-reactid="4079"><a href="#" data-reactid="4080">John Brown</a></td><td class="" data-reactid="4081"><!-- react-text: 4082 -->72<!-- /react-text --></td><td class="" data-reactid="4083"><!-- react-text: 4084 -->New York No. 7 Lake Park<!-- /react-text --></td><td class="" data-reactid="4085"><span data-reactid="4086"><a href="#" data-reactid="4087"><!-- react-text: 4088 -->Action 一 <!-- /react-text --><!-- react-text: 4089 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4090"></span><a href="#" data-reactid="4091">Delete</a><span class="ant-divider" data-reactid="4092"></span><a href="#" class="ant-dropdown-link" data-reactid="4093"><!-- react-text: 4094 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="4095"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4096"><td class="ant-table-row-expand-icon-cell" data-reactid="4097"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4098"></span></td><td class="ant-table-selection-column" data-reactid="4099"><span data-reactid="4100"><label class="ant-checkbox-wrapper" data-reactid="4101"><span class="ant-checkbox" data-reactid="4102"><span class="ant-checkbox-inner" data-reactid="4103"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4104"/></span></label></span></td><td class="" data-reactid="4105"><a href="#" data-reactid="4106">John Brown</a></td><td class="" data-reactid="4107"><!-- react-text: 4108 -->82<!-- /react-text --></td><td class="" data-reactid="4109"><!-- react-text: 4110 -->New York No. 8 Lake Park<!-- /react-text --></td><td class="" data-reactid="4111"><span data-reactid="4112"><a href="#" data-reactid="4113"><!-- react-text: 4114 -->Action 一 <!-- /react-text --><!-- react-text: 4115 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4116"></span><a href="#" data-reactid="4117">Delete</a><span class="ant-divider" data-reactid="4118"></span><a href="#" class="ant-dropdown-link" data-reactid="4119"><!-- react-text: 4120 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="4121"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4122"><td class="ant-table-row-expand-icon-cell" data-reactid="4123"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4124"></span></td><td class="ant-table-selection-column" data-reactid="4125"><span data-reactid="4126"><label class="ant-checkbox-wrapper" data-reactid="4127"><span class="ant-checkbox" data-reactid="4128"><span class="ant-checkbox-inner" data-reactid="4129"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4130"/></span></label></span></td><td class="" data-reactid="4131"><a href="#" data-reactid="4132">John Brown</a></td><td class="" data-reactid="4133"><!-- react-text: 4134 -->92<!-- /react-text --></td><td class="" data-reactid="4135"><!-- react-text: 4136 -->New York No. 9 Lake Park<!-- /react-text --></td><td class="" data-reactid="4137"><span data-reactid="4138"><a href="#" data-reactid="4139"><!-- react-text: 4140 -->Action 一 <!-- /react-text --><!-- react-text: 4141 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4142"></span><a href="#" data-reactid="4143">Delete</a><span class="ant-divider" data-reactid="4144"></span><a href="#" class="ant-dropdown-link" data-reactid="4145"><!-- react-text: 4146 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="4147"></i></a></span></td></tr><tr class="ant-table-row ant-table-row-level-0" data-reactid="4148"><td class="ant-table-row-expand-icon-cell" data-reactid="4149"><span class="ant-table-row-expand-icon ant-table-row-collapsed" data-reactid="4150"></span></td><td class="ant-table-selection-column" data-reactid="4151"><span data-reactid="4152"><label class="ant-checkbox-wrapper" data-reactid="4153"><span class="ant-checkbox" data-reactid="4154"><span class="ant-checkbox-inner" data-reactid="4155"></span><input type="checkbox" class="ant-checkbox-input" data-reactid="4156"/></span></label></span></td><td class="" data-reactid="4157"><a href="#" data-reactid="4158">John Brown</a></td><td class="" data-reactid="4159"><!-- react-text: 4160 -->102<!-- /react-text --></td><td class="" data-reactid="4161"><!-- react-text: 4162 -->New York No. 10 Lake Park<!-- /react-text --></td><td class="" data-reactid="4163"><span data-reactid="4164"><a href="#" data-reactid="4165"><!-- react-text: 4166 -->Action 一 <!-- /react-text --><!-- react-text: 4167 -->John Brown<!-- /react-text --></a><span class="ant-divider" data-reactid="4168"></span><a href="#" data-reactid="4169">Delete</a><span class="ant-divider" data-reactid="4170"></span><a href="#" class="ant-dropdown-link" data-reactid="4171"><!-- react-text: 4172 -->More actions<!-- /react-text --><i class="anticon anticon-down " data-reactid="4173"></i></a></span></td></tr></tbody></table></div></span><div class="ant-table-footer" data-reactid="4174">Here is footer</div></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="4175"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="4176"><a data-reactid="4177"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="4178"><a data-reactid="4179">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="4180"><a data-reactid="4181"></a></li><!-- react-empty: 4182 --></ul></div></div><style data-reactid="4183">
.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="4184"><div class="code-box-title" data-reactid="4185"><a href="#components-table-demo-dynamic-settings" data-reactid="4186">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="4187"><i class="anticon anticon-edit" data-reactid="4188"></i></a></div><div data-reactid="4189"><p data-reactid="4190"><!-- react-text: 4191 -->Select different settings to see the result.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="4192"></i></section><section class="highlight-wrapper" data-reactid="4193"><div class="highlight" data-reactid="4194"><pre class="language-jsx" data-reactid="4195"><code data-reactid="4196"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table<span class="token punctuation" >,</span> Icon<span class="token punctuation" >,</span> Switch<span class="token punctuation" >,</span> Radio<span class="token punctuation" >,</span> Form <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> FormItem <span class="token operator" >=</span> Form<span class="token punctuation" >.</span>Item<span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >150</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> text <span class="token operator" >=</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token punctuation" >{</span>text<span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >70</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Action'</span><span class="token punctuation" >,</span>
key<span class="token punctuation" >:</span> <span class="token string" >'action'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token number" >360</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>text<span class="token punctuation" >,</span> record<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Action 一 <span class="token punctuation" >{</span>record<span class="token punctuation" >.</span>name<span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-divider<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Delete<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-divider<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#<span class="token punctuation" >"</span></span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-dropdown-link<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
More actions<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>down<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> data <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >for</span> <span class="token punctuation" >(</span><span class="token keyword" >let</span> i <span class="token operator" >=</span> <span class="token number" >1</span><span class="token punctuation" >;</span> i <span class="token operator" >&lt;=</span> <span class="token number" >10</span><span class="token punctuation" >;</span> i<span class="token operator" >++</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
data<span class="token punctuation" >.</span><span class="token function" >push</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> i<span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John Brown'</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`</span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>i<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >2`</span></span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`New York No. </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>i<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" > Lake Park`</span></span><span class="token punctuation" >,</span>
description<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`My name is John Brown, I am </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>i<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >2 years old, living in New York No. </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>i<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" > Lake Park.`</span></span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token keyword" >const</span> expandedRowRender <span class="token operator" >=</span> record <span class="token operator" >=</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span><span class="token punctuation" >{</span>record<span class="token punctuation" >.</span>description<span class="token punctuation" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> title <span class="token operator" >=</span> <span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token string" >'Here is title'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> footer <span class="token operator" >=</span> <span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token string" >'Here is footer'</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> scroll <span class="token operator" >=</span> <span class="token punctuation" >{</span> y<span class="token punctuation" >:</span> <span class="token number" >240</span> <span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token keyword" >class</span> <span class="token class-name" >Demo</span> <span class="token keyword" >extends</span> <span class="token class-name" >React<span class="token punctuation" >.</span>Component</span> <span class="token punctuation" >{</span>
state <span class="token operator" >=</span> <span class="token punctuation" >{</span>
bordered<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
loading<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
pagination<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
size<span class="token punctuation" >:</span> <span class="token string" >'default'</span><span class="token punctuation" >,</span>
expandedRowRender<span class="token punctuation" >,</span>
title<span class="token punctuation" >,</span>
footer<span class="token punctuation" >,</span>
rowSelection<span class="token punctuation" >:</span> <span class="token punctuation" >{</span><span class="token punctuation" >}</span><span class="token punctuation" >,</span>
scroll<span class="token punctuation" >:</span> undefined<span class="token punctuation" >,</span>
<span class="token punctuation" >}</span>
handleToggle <span class="token operator" >=</span> <span class="token punctuation" >(</span>prop<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >return</span> <span class="token punctuation" >(</span>enable<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> <span class="token punctuation" >[</span>prop<span class="token punctuation" >]</span><span class="token punctuation" >:</span> enable <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
handleSizeChange <span class="token operator" >=</span> <span class="token punctuation" >(</span>e<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> size<span class="token punctuation" >:</span> e<span class="token punctuation" >.</span>target<span class="token punctuation" >.</span>value <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
handleExpandChange <span class="token operator" >=</span> <span class="token punctuation" >(</span>enable<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> expandedRowRender<span class="token punctuation" >:</span> enable <span class="token operator" >?</span> expandedRowRender <span class="token punctuation" >:</span> <span class="token boolean" >false</span> <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
handleTitleChange <span class="token operator" >=</span> <span class="token punctuation" >(</span>enable<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> enable <span class="token operator" >?</span> title <span class="token punctuation" >:</span> undefined <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
handleFooterChange <span class="token operator" >=</span> <span class="token punctuation" >(</span>enable<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> footer<span class="token punctuation" >:</span> enable <span class="token operator" >?</span> footer <span class="token punctuation" >:</span> undefined <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
handleRowSelectionChange <span class="token operator" >=</span> <span class="token punctuation" >(</span>enable<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> rowSelection<span class="token punctuation" >:</span> enable <span class="token operator" >?</span> <span class="token punctuation" >{</span><span class="token punctuation" >}</span> <span class="token punctuation" >:</span> undefined <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
handleScollChange <span class="token operator" >=</span> <span class="token punctuation" >(</span>enable<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> scroll<span class="token punctuation" >:</span> enable <span class="token operator" >?</span> scroll <span class="token punctuation" >:</span> undefined <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token function" >render</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> state <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >;</span>
<span class="token keyword" >return</span> <span class="token punctuation" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>components-table-demo-control-bar<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Form</span> <span class="token attr-name" >inline</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>FormItem</span> <span class="token attr-name" >label</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Bordered<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Switch</span> <span class="token attr-name" >checked</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>state<span class="token punctuation" >.</span>bordered<span class="token punctuation" >}</span></span> <span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >handleToggle</span><span class="token punctuation" >(</span><span class="token string" >'bordered'</span><span class="token punctuation" >)</span><span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>FormItem</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>FormItem</span> <span class="token attr-name" >label</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>loading<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Switch</span> <span class="token attr-name" >checked</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>state<span class="token punctuation" >.</span>loading<span class="token punctuation" >}</span></span> <span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >handleToggle</span><span class="token punctuation" >(</span><span class="token string" >'loading'</span><span class="token punctuation" >)</span><span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>FormItem</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>FormItem</span> <span class="token attr-name" >label</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Pagination<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Switch</span> <span class="token attr-name" >checked</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>state<span class="token punctuation" >.</span>pagination<span class="token punctuation" >}</span></span> <span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >handleToggle</span><span class="token punctuation" >(</span><span class="token string" >'pagination'</span><span class="token punctuation" >)</span><span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>FormItem</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>FormItem</span> <span class="token attr-name" >label</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Title<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Switch</span> <span class="token attr-name" >checked</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token operator" >!</span><span class="token operator" >!</span>state<span class="token punctuation" >.</span>title<span class="token punctuation" >}</span></span> <span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>handleTitleChange<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>FormItem</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>FormItem</span> <span class="token attr-name" >label</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Footer<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Switch</span> <span class="token attr-name" >checked</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token operator" >!</span><span class="token operator" >!</span>state<span class="token punctuation" >.</span>footer<span class="token punctuation" >}</span></span> <span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>handleFooterChange<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>FormItem</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>FormItem</span> <span class="token attr-name" >label</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Expandable<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Switch</span> <span class="token attr-name" >checked</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token operator" >!</span><span class="token operator" >!</span>state<span class="token punctuation" >.</span>expandedRowRender<span class="token punctuation" >}</span></span> <span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>handleExpandChange<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>FormItem</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>FormItem</span> <span class="token attr-name" >label</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Checkbox<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Switch</span> <span class="token attr-name" >checked</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token operator" >!</span><span class="token operator" >!</span>state<span class="token punctuation" >.</span>rowSelection<span class="token punctuation" >}</span></span> <span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>handleRowSelectionChange<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>FormItem</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>FormItem</span> <span class="token attr-name" >label</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Fixed</span> <span class="token attr-name" >Header"</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Switch</span> <span class="token attr-name" >checked</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token operator" >!</span><span class="token operator" >!</span>state<span class="token punctuation" >.</span>scroll<span class="token punctuation" >}</span></span> <span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>handleScollChange<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>FormItem</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>FormItem</span> <span class="token attr-name" >label</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Size<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Radio.Group</span> <span class="token attr-name" >size</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>default<span class="token punctuation" >"</span></span> <span class="token attr-name" >value</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>state<span class="token punctuation" >.</span>size<span class="token punctuation" >}</span></span> <span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>handleSizeChange<span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Radio.Button</span> <span class="token attr-name" >value</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>default<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Default<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Radio.Button</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Radio.Button</span> <span class="token attr-name" >value</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>middle<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Middle<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Radio.Button</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Radio.Button</span> <span class="token attr-name" >value</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>small<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Small<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Radio.Button</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Radio.Group</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>FormItem</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Form</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
<span class="token operator" >&lt;</span>Table <span class="token punctuation" >{</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >}</span> columns<span class="token operator" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span> dataSource<span class="token operator" >=</span><span class="token punctuation" >{</span>data<span class="token punctuation" >}</span> <span class="token operator" >/</span><span class="token operator" >></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token punctuation" >}</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Demo</span> <span class="token punctuation" >/></span></span><span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div></section></section><section class="code-box" id="components-table-demo-edit-row" data-reactid="4197"><section class="code-box-demo" data-reactid="4198"><div class=" clearfix" data-reactid="4199"><div class="ant-spin-nested-loading" data-reactid="4200"><div class="ant-spin-container" data-reactid="4201"><div class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left" data-reactid="4202"><div class="ant-table-content" data-reactid="4203"><div class="" data-reactid="4204"><span data-reactid="4205"><div class="ant-table-body" data-reactid="4206"><table class="" data-reactid="4207"><colgroup data-reactid="4208"><col style="width:25%;min-width:25%;" data-reactid="4209"/><col style="width:15%;min-width:15%;" data-reactid="4210"/><col style="width:40%;min-width:40%;" data-reactid="4211"/><col data-reactid="4212"/></colgroup><thead class="ant-table-thead" data-reactid="4213"><tr data-reactid="4214"><th class="" data-reactid="4215"><span data-reactid="4216"><!-- react-text: 4217 -->name<!-- /react-text --></span></th><th class="" data-reactid="4218"><span data-reactid="4219"><!-- react-text: 4220 -->age<!-- /react-text --></span></th><th class="" data-reactid="4221"><span data-reactid="4222"><!-- react-text: 4223 -->address<!-- /react-text --></span></th><th class="" data-reactid="4224"><span data-reactid="4225"><!-- react-text: 4226 -->operation<!-- /react-text --></span></th></tr></thead><tbody class="ant-table-tbody" data-reactid="4227"><tr class="ant-table-row ant-table-row-level-0" data-reactid="4228"><td class="" data-reactid="4229"><span style="padding-left:0px;" class="ant-table-row-indent indent-level-0" data-reactid="4230"></span><!-- react-empty: 4231 --><div data-reactid="4232"><div class="editable-row-text" data-reactid="4233">Edward King 0</div></div></td><td class="" data-reactid="4234"><div data-reactid="4235"><div class="editable-row-text" data-reactid="4236">32</div></div></td><td class="" data-reactid="4237"><!-- react-text: 4238 -->London, Park Lane no. 0<!-- /react-text --></td><td class="" data-reactid="4239"><div class="editable-row-operations" data-reactid="4240"><span data-reactid="4241"><a data-reactid="4242">Edit</a></span></div></td></tr></tbody></table></div></span></div></div></div></div></div><ul class="ant-pagination ant-table-pagination" unselectable="unselectable" data-reactid="4243"><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" data-reactid="4244"><a data-reactid="4245"></a></li><li title="1" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active" data-reactid="4246"><a data-reactid="4247">1</a></li><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" data-reactid="4248"><a data-reactid="4249"></a></li><!-- react-empty: 4250 --></ul></div><style data-reactid="4251">.editable-row-text {
padding: 5px;
}
.editable-row-operations a {
margin-right: 8px;
}</style></section><section class="code-box-meta markdown" data-reactid="4252"><div class="code-box-title" data-reactid="4253"><a href="#components-table-demo-edit-row" data-reactid="4254">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="4255"><i class="anticon anticon-edit" data-reactid="4256"></i></a></div><div data-reactid="4257"><p data-reactid="4258"><!-- react-text: 4259 -->Table with editable rows.<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="4260"></i></section><section class="highlight-wrapper" data-reactid="4261"><div class="highlight" data-reactid="4262"><pre class="language-jsx" data-reactid="4263"><code data-reactid="4264"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Table<span class="token punctuation" >,</span> Input<span class="token punctuation" >,</span> Popconfirm <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
<span class="token keyword" >class</span> <span class="token class-name" >EditableCell</span> <span class="token keyword" >extends</span> <span class="token class-name" >React<span class="token punctuation" >.</span>Component</span> <span class="token punctuation" >{</span>
state <span class="token operator" >=</span> <span class="token punctuation" >{</span>
value<span class="token punctuation" >:</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >.</span>value<span class="token punctuation" >,</span>
editable<span class="token punctuation" >:</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >.</span>editable <span class="token operator" >||</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span>
<span class="token function" >componentWillReceiveProps</span><span class="token punctuation" >(</span>nextProps<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span>nextProps<span class="token punctuation" >.</span>editable <span class="token operator" >!==</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>editable<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> editable<span class="token punctuation" >:</span> nextProps<span class="token punctuation" >.</span>editable <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span>nextProps<span class="token punctuation" >.</span>editable<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span>cacheValue <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>value<span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token punctuation" >}</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span>nextProps<span class="token punctuation" >.</span>status <span class="token operator" >&amp;&amp;</span> nextProps<span class="token punctuation" >.</span>status <span class="token operator" >!==</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >.</span>status<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span>nextProps<span class="token punctuation" >.</span>status <span class="token operator" >===</span> <span class="token string" >'save'</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >.</span><span class="token function" >onChange</span><span class="token punctuation" >(</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>value<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span> <span class="token keyword" >else</span> <span class="token keyword" >if</span> <span class="token punctuation" >(</span>nextProps<span class="token punctuation" >.</span>status <span class="token operator" >===</span> <span class="token string" >'cancel'</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> value<span class="token punctuation" >:</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>cacheValue <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >.</span><span class="token function" >onChange</span><span class="token punctuation" >(</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>cacheValue<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token punctuation" >}</span>
<span class="token punctuation" >}</span>
<span class="token function" >shouldComponentUpdate</span><span class="token punctuation" >(</span>nextProps<span class="token punctuation" >,</span> nextState<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >return</span> nextProps<span class="token punctuation" >.</span>editable <span class="token operator" >!==</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>editable <span class="token operator" >||</span>
nextState<span class="token punctuation" >.</span>value <span class="token operator" >!==</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>value<span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token function" >handleChange</span><span class="token punctuation" >(</span>e<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> value <span class="token operator" >=</span> e<span class="token punctuation" >.</span>target<span class="token punctuation" >.</span>value<span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> value <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token function" >render</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> <span class="token punctuation" >{</span> value<span class="token punctuation" >,</span> editable <span class="token punctuation" >}</span> <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >;</span>
<span class="token keyword" >return</span> <span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >{</span>
editable <span class="token operator" >?</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Input</span>
<span class="token attr-name" >value</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>value<span class="token punctuation" >}</span></span>
<span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>e <span class="token operator" >=</span><span class="token operator" >></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >handleChange</span><span class="token punctuation" >(</span>e<span class="token punctuation" >)</span><span class="token punctuation" >}</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >:</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>editable-row-text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token punctuation" >{</span>value <span class="token operator" >||</span> <span class="token string" >' '</span><span class="token punctuation" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token punctuation" >}</span>
<span class="token keyword" >class</span> <span class="token class-name" >EditableTable</span> <span class="token keyword" >extends</span> <span class="token class-name" >React<span class="token punctuation" >.</span>Component</span> <span class="token punctuation" >{</span>
<span class="token function" >constructor</span><span class="token punctuation" >(</span>props<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >super</span><span class="token punctuation" >(</span>props<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span>columns <span class="token operator" >=</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token string" >'25%'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>text<span class="token punctuation" >,</span> record<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >renderColumns</span><span class="token punctuation" >(</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>data<span class="token punctuation" >,</span> index<span class="token punctuation" >,</span> <span class="token string" >'name'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token string" >'15%'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>text<span class="token punctuation" >,</span> record<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >renderColumns</span><span class="token punctuation" >(</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>data<span class="token punctuation" >,</span> index<span class="token punctuation" >,</span> <span class="token string" >'age'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span>
width<span class="token punctuation" >:</span> <span class="token string" >'40%'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>text<span class="token punctuation" >,</span> record<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >renderColumns</span><span class="token punctuation" >(</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>data<span class="token punctuation" >,</span> index<span class="token punctuation" >,</span> <span class="token string" >'address'</span><span class="token punctuation" >,</span> text<span class="token punctuation" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'operation'</span><span class="token punctuation" >,</span>
dataIndex<span class="token punctuation" >:</span> <span class="token string" >'operation'</span><span class="token punctuation" >,</span>
render<span class="token punctuation" >:</span> <span class="token punctuation" >(</span>text<span class="token punctuation" >,</span> record<span class="token punctuation" >,</span> index<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> <span class="token punctuation" >{</span> editable <span class="token punctuation" >}</span> <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >.</span>name<span class="token punctuation" >;</span>
<span class="token keyword" >return</span> <span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>editable-row-operations<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token punctuation" >{</span>
editable <span class="token operator" >?</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >editDone</span><span class="token punctuation" >(</span>index<span class="token punctuation" >,</span> <span class="token string" >'save'</span><span class="token punctuation" >)</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>Save<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Popconfirm</span> <span class="token attr-name" >title</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Sure</span> <span class="token attr-name" >to</span> <span class="token attr-name" >cancel?"</span> <span class="token attr-name" >onConfirm</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >editDone</span><span class="token punctuation" >(</span>index<span class="token punctuation" >,</span> <span class="token string" >'cancel'</span><span class="token punctuation" >)</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span><span class="token punctuation" >></span></span>Cancel<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>Popconfirm</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >:</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >edit</span><span class="token punctuation" >(</span>index<span class="token punctuation" >)</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>Edit<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
<span class="token punctuation" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span>state <span class="token operator" >=</span> <span class="token punctuation" >{</span>
data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >'0'</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token punctuation" >{</span>
editable<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
value<span class="token punctuation" >:</span> <span class="token string" >'Edward King 0'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token punctuation" >{</span>
editable<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
value<span class="token punctuation" >:</span> <span class="token string" >'32'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
address<span class="token punctuation" >:</span> <span class="token punctuation" >{</span>
value<span class="token punctuation" >:</span> <span class="token string" >'London, Park Lane no. 0'</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token function" >renderColumns</span><span class="token punctuation" >(</span>data<span class="token punctuation" >,</span> index<span class="token punctuation" >,</span> key<span class="token punctuation" >,</span> text<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> <span class="token punctuation" >{</span> editable<span class="token punctuation" >,</span> status <span class="token punctuation" >}</span> <span class="token operator" >=</span> data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >[</span>key<span class="token punctuation" >]</span><span class="token punctuation" >;</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span><span class="token keyword" >typeof</span> editable <span class="token operator" >===</span> <span class="token string" >'undefined'</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >return</span> text<span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token keyword" >return</span> <span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>EditableCell</span>
<span class="token attr-name" >editable</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>editable<span class="token punctuation" >}</span></span>
<span class="token attr-name" >value</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>text<span class="token punctuation" >}</span></span>
<span class="token attr-name" >onChange</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>value <span class="token operator" >=</span><span class="token operator" >></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >handleChange</span><span class="token punctuation" >(</span>key<span class="token punctuation" >,</span> index<span class="token punctuation" >,</span> value<span class="token punctuation" >)</span><span class="token punctuation" >}</span></span>
<span class="token attr-name" >status</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>status<span class="token punctuation" >}</span></span>
<span class="token punctuation" >/></span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token function" >handleChange</span><span class="token punctuation" >(</span>key<span class="token punctuation" >,</span> index<span class="token punctuation" >,</span> value<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> <span class="token punctuation" >{</span> data <span class="token punctuation" >}</span> <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >;</span>
data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >[</span>key<span class="token punctuation" >]</span><span class="token punctuation" >.</span>value <span class="token operator" >=</span> value<span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> data <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token function" >edit</span><span class="token punctuation" >(</span>index<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> <span class="token punctuation" >{</span> data <span class="token punctuation" >}</span> <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >;</span>
Object<span class="token punctuation" >.</span><span class="token function" >keys</span><span class="token punctuation" >(</span>data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >)</span><span class="token punctuation" >.</span><span class="token function" >forEach</span><span class="token punctuation" >(</span><span class="token punctuation" >(</span>item<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span>data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >[</span>item<span class="token punctuation" >]</span> <span class="token operator" >&amp;&amp;</span> <span class="token keyword" >typeof</span> data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >[</span>item<span class="token punctuation" >]</span><span class="token punctuation" >.</span>editable <span class="token operator" >!==</span> <span class="token string" >'undefined'</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >[</span>item<span class="token punctuation" >]</span><span class="token punctuation" >.</span>editable <span class="token operator" >=</span> <span class="token boolean" >true</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> data <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token function" >editDone</span><span class="token punctuation" >(</span>index<span class="token punctuation" >,</span> type<span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> <span class="token punctuation" >{</span> data <span class="token punctuation" >}</span> <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >;</span>
Object<span class="token punctuation" >.</span><span class="token function" >keys</span><span class="token punctuation" >(</span>data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >)</span><span class="token punctuation" >.</span><span class="token function" >forEach</span><span class="token punctuation" >(</span><span class="token punctuation" >(</span>item<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span>data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >[</span>item<span class="token punctuation" >]</span> <span class="token operator" >&amp;&amp;</span> <span class="token keyword" >typeof</span> data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >[</span>item<span class="token punctuation" >]</span><span class="token punctuation" >.</span>editable <span class="token operator" >!==</span> <span class="token string" >'undefined'</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >[</span>item<span class="token punctuation" >]</span><span class="token punctuation" >.</span>editable <span class="token operator" >=</span> <span class="token boolean" >false</span><span class="token punctuation" >;</span>
data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >[</span>item<span class="token punctuation" >]</span><span class="token punctuation" >.</span>status <span class="token operator" >=</span> type<span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span> data <span class="token punctuation" >}</span><span class="token punctuation" >,</span> <span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
Object<span class="token punctuation" >.</span><span class="token function" >keys</span><span class="token punctuation" >(</span>data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >)</span><span class="token punctuation" >.</span><span class="token function" >forEach</span><span class="token punctuation" >(</span><span class="token punctuation" >(</span>item<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >if</span> <span class="token punctuation" >(</span>data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >[</span>item<span class="token punctuation" >]</span> <span class="token operator" >&amp;&amp;</span> <span class="token keyword" >typeof</span> data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >[</span>item<span class="token punctuation" >]</span><span class="token punctuation" >.</span>editable <span class="token operator" >!==</span> <span class="token string" >'undefined'</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >delete</span> data<span class="token punctuation" >[</span>index<span class="token punctuation" >]</span><span class="token punctuation" >[</span>item<span class="token punctuation" >]</span><span class="token punctuation" >.</span>status<span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token function" >render</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> <span class="token punctuation" >{</span> data <span class="token punctuation" >}</span> <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >;</span>
<span class="token keyword" >const</span> dataSource <span class="token operator" >=</span> data<span class="token punctuation" >.</span><span class="token function" >map</span><span class="token punctuation" >(</span><span class="token punctuation" >(</span>item<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
<span class="token keyword" >const</span> obj <span class="token operator" >=</span> <span class="token punctuation" >{</span><span class="token punctuation" >}</span><span class="token punctuation" >;</span>
Object<span class="token punctuation" >.</span><span class="token function" >keys</span><span class="token punctuation" >(</span>item<span class="token punctuation" >)</span><span class="token punctuation" >.</span><span class="token function" >forEach</span><span class="token punctuation" >(</span><span class="token punctuation" >(</span>key<span class="token punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token punctuation" >{</span>
obj<span class="token punctuation" >[</span>key<span class="token punctuation" >]</span> <span class="token operator" >=</span> key <span class="token operator" >===</span> <span class="token string" >'key'</span> <span class="token operator" >?</span> item<span class="token punctuation" >[</span>key<span class="token punctuation" >]</span> <span class="token punctuation" >:</span> item<span class="token punctuation" >[</span>key<span class="token punctuation" >]</span><span class="token punctuation" >.</span>value<span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >return</span> obj<span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token keyword" >const</span> columns <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>columns<span class="token punctuation" >;</span>
<span class="token keyword" >return</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >bordered</span> <span class="token attr-name" >dataSource</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>dataSource<span class="token punctuation" >}</span></span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>columns<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span>
<span class="token punctuation" >}</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>EditableTable</span> <span class="token punctuation" >/></span></span><span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div><div class="highlight" data-reactid="4265"><pre data-reactid="4266"><code class="css" data-reactid="4267"><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></div></div><section class="markdown api-container" data-reactid="4268"><h2 id="API" data-reactid="4269"><span data-reactid="4270"><!-- react-text: 4271 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="4272">#</a></h2><h3 id="Table" data-reactid="4273"><span data-reactid="4274"><!-- react-text: 4275 -->Table<!-- /react-text --></span><a href="#Table" class="anchor" data-reactid="4276">#</a></h3><table data-reactid="4277"><thead data-reactid="4278"><tr data-reactid="4279"><th data-reactid="4280"><!-- react-text: 4281 -->Property<!-- /react-text --></th><th data-reactid="4282"><!-- react-text: 4283 -->Description<!-- /react-text --></th><th data-reactid="4284"><!-- react-text: 4285 -->Type<!-- /react-text --></th><th data-reactid="4286"><!-- react-text: 4287 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="4288"><tr data-reactid="4289"><td data-reactid="4290"><!-- react-text: 4291 -->rowSelection<!-- /react-text --></td><td data-reactid="4292"><!-- react-text: 4293 -->row selection <!-- /react-text --><a href="#rowSelection" data-reactid="4294"><!-- react-text: 4295 -->config<!-- /react-text --></a></td><td data-reactid="4296"><!-- react-text: 4297 -->Object<!-- /react-text --></td><td data-reactid="4298"><!-- react-text: 4299 -->null<!-- /react-text --></td></tr><tr data-reactid="4300"><td data-reactid="4301"><!-- react-text: 4302 -->pagination<!-- /react-text --></td><td data-reactid="4303"><!-- react-text: 4304 -->pagination <!-- /react-text --><a href="/components/pagination/" data-reactid="4305">config</a><!-- react-text: 4306 -->, hide it via setting to <!-- /react-text --><code data-reactid="4307"><!-- react-text: 4308 -->false<!-- /react-text --></code></td><td data-reactid="4309"><!-- react-text: 4310 -->Object<!-- /react-text --></td><td data-reactid="4311"></td></tr><tr data-reactid="4312"><td data-reactid="4313"><!-- react-text: 4314 -->size<!-- /react-text --></td><td data-reactid="4315"><!-- react-text: 4316 -->size of table: <!-- /react-text --><code data-reactid="4317"><!-- react-text: 4318 -->default<!-- /react-text --></code><!-- react-text: 4319 --> or <!-- /react-text --><code data-reactid="4320"><!-- react-text: 4321 -->small<!-- /react-text --></code></td><td data-reactid="4322"><!-- react-text: 4323 -->String<!-- /react-text --></td><td data-reactid="4324"><code data-reactid="4325"><!-- react-text: 4326 -->default<!-- /react-text --></code></td></tr><tr data-reactid="4327"><td data-reactid="4328"><!-- react-text: 4329 -->dataSource<!-- /react-text --></td><td data-reactid="4330"><!-- react-text: 4331 -->data record array to be rendered<!-- /react-text --></td><td data-reactid="4332"><!-- react-text: 4333 -->Array<!-- /react-text --></td><td data-reactid="4334"></td></tr><tr data-reactid="4335"><td data-reactid="4336"><!-- react-text: 4337 -->columns<!-- /react-text --></td><td data-reactid="4338"><!-- react-text: 4339 -->columns of table<!-- /react-text --></td><td data-reactid="4340"><!-- react-text: 4341 -->Array<!-- /react-text --></td><td data-reactid="4342"><!-- react-text: 4343 -->-<!-- /react-text --></td></tr><tr data-reactid="4344"><td data-reactid="4345"><!-- react-text: 4346 -->rowKey<!-- /react-text --></td><td data-reactid="4347"><!-- react-text: 4348 -->get row&#x27;s key, could be a string or function<!-- /react-text --></td><td data-reactid="4349"><!-- react-text: 4350 -->String or Function(record, index):string<!-- /react-text --></td><td data-reactid="4351"><!-- react-text: 4352 -->&#x27;key&#x27;<!-- /react-text --></td></tr><tr data-reactid="4353"><td data-reactid="4354"><!-- react-text: 4355 -->rowClassName<!-- /react-text --></td><td data-reactid="4356"><!-- react-text: 4357 -->get row&#x27;s className<!-- /react-text --></td><td data-reactid="4358"><!-- react-text: 4359 -->Function(record, index):string<!-- /react-text --></td><td data-reactid="4360"><!-- react-text: 4361 -->-<!-- /react-text --></td></tr><tr data-reactid="4362"><td data-reactid="4363"><!-- react-text: 4364 -->expandedRowRender<!-- /react-text --></td><td data-reactid="4365"><!-- react-text: 4366 -->expanded container render for each row<!-- /react-text --></td><td data-reactid="4367"><!-- react-text: 4368 -->Function<!-- /react-text --></td><td data-reactid="4369"><!-- react-text: 4370 -->-<!-- /react-text --></td></tr><tr data-reactid="4371"><td data-reactid="4372"><!-- react-text: 4373 -->defaultExpandedRowKeys<!-- /react-text --></td><td data-reactid="4374"><!-- react-text: 4375 -->initial expanded row keys<!-- /react-text --></td><td data-reactid="4376"><!-- react-text: 4377 -->Array<!-- /react-text --></td><td data-reactid="4378"><!-- react-text: 4379 -->-<!-- /react-text --></td></tr><tr data-reactid="4380"><td data-reactid="4381"><!-- react-text: 4382 -->expandedRowKeys<!-- /react-text --></td><td data-reactid="4383"><!-- react-text: 4384 -->current expanded rows keys<!-- /react-text --></td><td data-reactid="4385"><!-- react-text: 4386 -->Array<!-- /react-text --></td><td data-reactid="4387"><!-- react-text: 4388 -->-<!-- /react-text --></td></tr><tr data-reactid="4389"><td data-reactid="4390"><!-- react-text: 4391 -->defaultExpandAllRows<!-- /react-text --></td><td data-reactid="4392"><!-- react-text: 4393 -->expand all rows initially<!-- /react-text --></td><td data-reactid="4394"><!-- react-text: 4395 -->Boolean<!-- /react-text --></td><td data-reactid="4396"><!-- react-text: 4397 -->false<!-- /react-text --></td></tr><tr data-reactid="4398"><td data-reactid="4399"><!-- react-text: 4400 -->onExpandedRowsChange<!-- /react-text --></td><td data-reactid="4401"><!-- react-text: 4402 -->function to call when the expanded rows change<!-- /react-text --></td><td data-reactid="4403"><!-- react-text: 4404 -->Function(expandedRows)<!-- /react-text --></td><td data-reactid="4405"></td></tr><tr data-reactid="4406"><td data-reactid="4407"><!-- react-text: 4408 -->onExpand<!-- /react-text --></td><td data-reactid="4409"><!-- react-text: 4410 -->function to call when click expand icon<!-- /react-text --></td><td data-reactid="4411"><!-- react-text: 4412 -->Function(expanded, record)<!-- /react-text --></td><td data-reactid="4413"></td></tr><tr data-reactid="4414"><td data-reactid="4415"><!-- react-text: 4416 -->onChange<!-- /react-text --></td><td data-reactid="4417"><!-- react-text: 4418 -->callback that is called when pagination, filters, sorter is changed<!-- /react-text --></td><td data-reactid="4419"><!-- react-text: 4420 -->Function(pagination, filters, sorter)<!-- /react-text --></td><td data-reactid="4421"></td></tr><tr data-reactid="4422"><td data-reactid="4423"><!-- react-text: 4424 -->loading<!-- /react-text --></td><td data-reactid="4425"><!-- react-text: 4426 -->loading status of table<!-- /react-text --></td><td data-reactid="4427"><!-- react-text: 4428 -->Boolean<!-- /react-text --></td><td data-reactid="4429"><!-- react-text: 4430 -->false<!-- /react-text --></td></tr><tr data-reactid="4431"><td data-reactid="4432"><!-- react-text: 4433 -->locale<!-- /react-text --></td><td data-reactid="4434"><!-- react-text: 4435 -->i18n text include filter, sort, empty text...etc<!-- /react-text --></td><td data-reactid="4436"><!-- react-text: 4437 -->Object<!-- /react-text --></td><td data-reactid="4438"><!-- react-text: 4439 -->filterConfirm: &#x27;Ok&#x27; <!-- /react-text --><br data-reactid="4440"/><!-- react-text: 4441 --> filterReset: &#x27;Reset&#x27; <!-- /react-text --><br data-reactid="4442"/><!-- react-text: 4443 --> emptyText: &#x27;No Data&#x27; <!-- /react-text --><br data-reactid="4444"/><!-- react-text: 4445 --> <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511" data-reactid="4446"><!-- react-text: 4447 -->Default<!-- /react-text --></a></td></tr><tr data-reactid="4448"><td data-reactid="4449"><!-- react-text: 4450 -->indentSize<!-- /react-text --></td><td data-reactid="4451"><!-- react-text: 4452 -->index pixel size of tree data<!-- /react-text --></td><td data-reactid="4453"><!-- react-text: 4454 -->Number<!-- /react-text --></td><td data-reactid="4455"><!-- react-text: 4456 -->15<!-- /react-text --></td></tr><tr data-reactid="4457"><td data-reactid="4458"><!-- react-text: 4459 -->onRowClick<!-- /react-text --></td><td data-reactid="4460"><!-- react-text: 4461 -->callback that is called when click a row<!-- /react-text --></td><td data-reactid="4462"><!-- react-text: 4463 -->Function(record, index)<!-- /react-text --></td><td data-reactid="4464"><!-- react-text: 4465 -->-<!-- /react-text --></td></tr><tr data-reactid="4466"><td data-reactid="4467"><!-- react-text: 4468 -->bordered<!-- /react-text --></td><td data-reactid="4469"><!-- react-text: 4470 -->whether to show table border completely<!-- /react-text --></td><td data-reactid="4471"><!-- react-text: 4472 -->Boolean<!-- /react-text --></td><td data-reactid="4473"><!-- react-text: 4474 -->false<!-- /react-text --></td></tr><tr data-reactid="4475"><td data-reactid="4476"><!-- react-text: 4477 -->showHeader<!-- /react-text --></td><td data-reactid="4478"><!-- react-text: 4479 -->whether to show table header<!-- /react-text --></td><td data-reactid="4480"><!-- react-text: 4481 -->Boolean<!-- /react-text --></td><td data-reactid="4482"><!-- react-text: 4483 -->true<!-- /react-text --></td></tr><tr data-reactid="4484"><td data-reactid="4485"><!-- react-text: 4486 -->footer<!-- /react-text --></td><td data-reactid="4487"><!-- react-text: 4488 -->table footer renderer<!-- /react-text --></td><td data-reactid="4489"><!-- react-text: 4490 -->Function(currentPageData)<!-- /react-text --></td><td data-reactid="4491"></td></tr><tr data-reactid="4492"><td data-reactid="4493"><!-- react-text: 4494 -->title<!-- /react-text --></td><td data-reactid="4495"><!-- react-text: 4496 -->table title renderer<!-- /react-text --></td><td data-reactid="4497"><!-- react-text: 4498 -->Function(currentPageData)<!-- /react-text --></td><td data-reactid="4499"></td></tr><tr data-reactid="4500"><td data-reactid="4501"><!-- react-text: 4502 -->scroll<!-- /react-text --></td><td data-reactid="4503"><!-- react-text: 4504 -->whether table can be scroll in x/y direction, <!-- /react-text --><code data-reactid="4505"><!-- react-text: 4506 -->x<!-- /react-text --></code><!-- react-text: 4507 --> or <!-- /react-text --><code data-reactid="4508"><!-- react-text: 4509 -->y<!-- /react-text --></code><!-- react-text: 4510 --> can be a number that indicated the width and height of table body<!-- /react-text --></td><td data-reactid="4511"><!-- react-text: 4512 -->Object<!-- /react-text --></td><td data-reactid="4513"><!-- react-text: 4514 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="Column" data-reactid="4515"><span data-reactid="4516"><!-- react-text: 4517 -->Column<!-- /react-text --></span><a href="#Column" class="anchor" data-reactid="4518">#</a></h3><p data-reactid="4519"><!-- react-text: 4520 -->One of Property <!-- /react-text --><code data-reactid="4521"><!-- react-text: 4522 -->columns<!-- /react-text --></code><!-- react-text: 4523 --> for descriping column, Column has the same API.<!-- /react-text --></p><table data-reactid="4524"><thead data-reactid="4525"><tr data-reactid="4526"><th data-reactid="4527"><!-- react-text: 4528 -->Property<!-- /react-text --></th><th data-reactid="4529"><!-- react-text: 4530 -->Description<!-- /react-text --></th><th data-reactid="4531"><!-- react-text: 4532 -->Type<!-- /react-text --></th><th data-reactid="4533"><!-- react-text: 4534 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="4535"><tr data-reactid="4536"><td data-reactid="4537"><!-- react-text: 4538 -->title<!-- /react-text --></td><td data-reactid="4539"><!-- react-text: 4540 -->title of this column<!-- /react-text --></td><td data-reactid="4541"><!-- react-text: 4542 -->String or React.Element<!-- /react-text --></td><td data-reactid="4543"><!-- react-text: 4544 -->-<!-- /react-text --></td></tr><tr data-reactid="4545"><td data-reactid="4546"><!-- react-text: 4547 -->key<!-- /react-text --></td><td data-reactid="4548"><!-- react-text: 4549 -->key of this column<!-- /react-text --></td><td data-reactid="4550"><!-- react-text: 4551 -->String<!-- /react-text --></td><td data-reactid="4552"><!-- react-text: 4553 -->-<!-- /react-text --></td></tr><tr data-reactid="4554"><td data-reactid="4555"><!-- react-text: 4556 -->dataIndex<!-- /react-text --></td><td data-reactid="4557"><!-- react-text: 4558 -->display field of the data record, could be set like <!-- /react-text --><code data-reactid="4559"><!-- react-text: 4560 -->a.b.c<!-- /react-text --></code></td><td data-reactid="4561"><!-- react-text: 4562 -->String<!-- /react-text --></td><td data-reactid="4563"><!-- react-text: 4564 -->-<!-- /react-text --></td></tr><tr data-reactid="4565"><td data-reactid="4566"><!-- react-text: 4567 -->render<!-- /react-text --></td><td data-reactid="4568"><!-- react-text: 4569 -->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="4570"><!-- react-text: 4571 -->colSpan/rowSpan config<!-- /react-text --></a></td><td data-reactid="4572"><!-- react-text: 4573 -->Function(text, record, index) {}<!-- /react-text --></td><td data-reactid="4574"><!-- react-text: 4575 -->-<!-- /react-text --></td></tr><tr data-reactid="4576"><td data-reactid="4577"><!-- react-text: 4578 -->filters<!-- /react-text --></td><td data-reactid="4579"><!-- react-text: 4580 -->filter menu config<!-- /react-text --></td><td data-reactid="4581"><!-- react-text: 4582 -->Array<!-- /react-text --></td><td data-reactid="4583"><!-- react-text: 4584 -->-<!-- /react-text --></td></tr><tr data-reactid="4585"><td data-reactid="4586"><!-- react-text: 4587 -->onFilter<!-- /react-text --></td><td data-reactid="4588"><!-- react-text: 4589 -->callback that is called when when click confirm filter button<!-- /react-text --></td><td data-reactid="4590"><!-- react-text: 4591 -->Function<!-- /react-text --></td><td data-reactid="4592"><!-- react-text: 4593 -->-<!-- /react-text --></td></tr><tr data-reactid="4594"><td data-reactid="4595"><!-- react-text: 4596 -->filterMultiple<!-- /react-text --></td><td data-reactid="4597"><!-- react-text: 4598 -->whether to select multiple filtered item<!-- /react-text --></td><td data-reactid="4599"><!-- react-text: 4600 -->Boolean<!-- /react-text --></td><td data-reactid="4601"><!-- react-text: 4602 -->true<!-- /react-text --></td></tr><tr data-reactid="4603"><td data-reactid="4604"><!-- react-text: 4605 -->filterDropdown<!-- /react-text --></td><td data-reactid="4606"><!-- react-text: 4607 -->customized filter overlay<!-- /react-text --></td><td data-reactid="4608"><!-- react-text: 4609 -->React.Element<!-- /react-text --></td><td data-reactid="4610"><!-- react-text: 4611 -->-<!-- /react-text --></td></tr><tr data-reactid="4612"><td data-reactid="4613"><!-- react-text: 4614 -->filterDropdownVisible<!-- /react-text --></td><td data-reactid="4615"><!-- react-text: 4616 -->whether filterDropdown is visible<!-- /react-text --></td><td data-reactid="4617"><!-- react-text: 4618 -->Boolean<!-- /react-text --></td><td data-reactid="4619"><!-- react-text: 4620 -->-<!-- /react-text --></td></tr><tr data-reactid="4621"><td data-reactid="4622"><!-- react-text: 4623 -->onFilterDropdownVisibleChange<!-- /react-text --></td><td data-reactid="4624"><!-- react-text: 4625 -->called when filterDropdownVisible is changed<!-- /react-text --></td><td data-reactid="4626"><!-- react-text: 4627 -->function(visible) {}<!-- /react-text --></td><td data-reactid="4628"><!-- react-text: 4629 -->-<!-- /react-text --></td></tr><tr data-reactid="4630"><td data-reactid="4631"><!-- react-text: 4632 -->filteredValue<!-- /react-text --></td><td data-reactid="4633"><!-- react-text: 4634 -->controlled filtered value<!-- /react-text --></td><td data-reactid="4635"><!-- react-text: 4636 -->Array<!-- /react-text --></td><td data-reactid="4637"><!-- react-text: 4638 -->-<!-- /react-text --></td></tr><tr data-reactid="4639"><td data-reactid="4640"><!-- react-text: 4641 -->sorter<!-- /react-text --></td><td data-reactid="4642"><!-- react-text: 4643 -->sort function for local sort. If you need sort buttons only, set it <!-- /react-text --><code data-reactid="4644"><!-- react-text: 4645 -->true<!-- /react-text --></code></td><td data-reactid="4646"><!-- react-text: 4647 -->Function or Boolean<!-- /react-text --></td><td data-reactid="4648"><!-- react-text: 4649 -->-<!-- /react-text --></td></tr><tr data-reactid="4650"><td data-reactid="4651"><!-- react-text: 4652 -->colSpan<!-- /react-text --></td><td data-reactid="4653"><!-- react-text: 4654 -->span of this column&#x27;s title<!-- /react-text --></td><td data-reactid="4655"><!-- react-text: 4656 -->Number<!-- /react-text --></td><td data-reactid="4657"></td></tr><tr data-reactid="4658"><td data-reactid="4659"><!-- react-text: 4660 -->width<!-- /react-text --></td><td data-reactid="4661"><!-- react-text: 4662 -->width of this column<!-- /react-text --></td><td data-reactid="4663"><!-- react-text: 4664 -->String or Number<!-- /react-text --></td><td data-reactid="4665"><!-- react-text: 4666 -->-<!-- /react-text --></td></tr><tr data-reactid="4667"><td data-reactid="4668"><!-- react-text: 4669 -->className<!-- /react-text --></td><td data-reactid="4670"><!-- react-text: 4671 -->className of this column<!-- /react-text --></td><td data-reactid="4672"><!-- react-text: 4673 -->String<!-- /react-text --></td><td data-reactid="4674"><!-- react-text: 4675 -->-<!-- /react-text --></td></tr><tr data-reactid="4676"><td data-reactid="4677"><!-- react-text: 4678 -->fixed<!-- /react-text --></td><td data-reactid="4679"><!-- react-text: 4680 -->set column to be fixed: <!-- /react-text --><code data-reactid="4681"><!-- react-text: 4682 -->true<!-- /react-text --></code><!-- react-text: 4683 -->(same as left) <!-- /react-text --><code data-reactid="4684"><!-- react-text: 4685 -->&#x27;left&#x27;<!-- /react-text --></code><!-- react-text: 4686 --> <!-- /react-text --><code data-reactid="4687"><!-- react-text: 4688 -->&#x27;right&#x27;<!-- /react-text --></code></td><td data-reactid="4689"><!-- react-text: 4690 -->Boolean or String<!-- /react-text --></td><td data-reactid="4691"><!-- react-text: 4692 -->false<!-- /react-text --></td></tr><tr data-reactid="4693"><td data-reactid="4694"><!-- react-text: 4695 -->sortOrder<!-- /react-text --></td><td data-reactid="4696"><!-- react-text: 4697 -->controlled sorted value: <!-- /react-text --><code data-reactid="4698"><!-- react-text: 4699 -->&#x27;ascend&#x27;<!-- /react-text --></code><!-- react-text: 4700 --> <!-- /react-text --><code data-reactid="4701"><!-- react-text: 4702 -->&#x27;descend&#x27;<!-- /react-text --></code><!-- react-text: 4703 --> <!-- /react-text --><code data-reactid="4704"><!-- react-text: 4705 -->false<!-- /react-text --></code></td><td data-reactid="4706"><!-- react-text: 4707 -->Boolean or String<!-- /react-text --></td><td data-reactid="4708"><!-- react-text: 4709 -->-<!-- /react-text --></td></tr><tr data-reactid="4710"><td data-reactid="4711"><!-- react-text: 4712 -->onCellClick<!-- /react-text --></td><td data-reactid="4713"><!-- react-text: 4714 -->callback when click cell<!-- /react-text --></td><td data-reactid="4715"><!-- react-text: 4716 -->Function(record, event)<!-- /react-text --></td><td data-reactid="4717"><!-- react-text: 4718 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="ColumnGroup" data-reactid="4719"><span data-reactid="4720"><!-- react-text: 4721 -->ColumnGroup<!-- /react-text --></span><a href="#ColumnGroup" class="anchor" data-reactid="4722">#</a></h3><table data-reactid="4723"><thead data-reactid="4724"><tr data-reactid="4725"><th data-reactid="4726"><!-- react-text: 4727 -->Property<!-- /react-text --></th><th data-reactid="4728"><!-- react-text: 4729 -->Description<!-- /react-text --></th><th data-reactid="4730"><!-- react-text: 4731 -->Type<!-- /react-text --></th><th data-reactid="4732"><!-- react-text: 4733 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="4734"><tr data-reactid="4735"><td data-reactid="4736"><!-- react-text: 4737 -->title<!-- /react-text --></td><td data-reactid="4738"><!-- react-text: 4739 -->title of the column group<!-- /react-text --></td><td data-reactid="4740"><!-- react-text: 4741 -->String or React.Element<!-- /react-text --></td><td data-reactid="4742"><!-- react-text: 4743 -->-<!-- /react-text --></td></tr></tbody></table><h3 id="rowSelection" data-reactid="4744"><span data-reactid="4745"><!-- react-text: 4746 -->rowSelection<!-- /react-text --></span><a href="#rowSelection" class="anchor" data-reactid="4747">#</a></h3><p data-reactid="4748"><!-- react-text: 4749 -->Properties for selection.<!-- /react-text --></p><table data-reactid="4750"><thead data-reactid="4751"><tr data-reactid="4752"><th data-reactid="4753"><!-- react-text: 4754 -->Property<!-- /react-text --></th><th data-reactid="4755"><!-- react-text: 4756 -->Description<!-- /react-text --></th><th data-reactid="4757"><!-- react-text: 4758 -->Type<!-- /react-text --></th><th data-reactid="4759"><!-- react-text: 4760 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="4761"><tr data-reactid="4762"><td data-reactid="4763"><!-- react-text: 4764 -->type<!-- /react-text --></td><td data-reactid="4765"><code data-reactid="4766"><!-- react-text: 4767 -->checkbox<!-- /react-text --></code><!-- react-text: 4768 --> or <!-- /react-text --><code data-reactid="4769"><!-- react-text: 4770 -->radio<!-- /react-text --></code></td><td data-reactid="4771"><!-- react-text: 4772 -->String<!-- /react-text --></td><td data-reactid="4773"><code data-reactid="4774"><!-- react-text: 4775 -->checkbox<!-- /react-text --></code></td></tr><tr data-reactid="4776"><td data-reactid="4777"><!-- react-text: 4778 -->selectedRowKeys<!-- /react-text --></td><td data-reactid="4779"><!-- react-text: 4780 -->controlled selected row keys<!-- /react-text --></td><td data-reactid="4781"><!-- react-text: 4782 -->Array<!-- /react-text --></td><td data-reactid="4783"><!-- react-text: 4784 -->[]<!-- /react-text --></td></tr><tr data-reactid="4785"><td data-reactid="4786"><!-- react-text: 4787 -->onChange<!-- /react-text --></td><td data-reactid="4788"><!-- react-text: 4789 -->callback that is called when selected rows change<!-- /react-text --></td><td data-reactid="4790"><!-- react-text: 4791 -->Function(selectedRowKeys, selectedRows)<!-- /react-text --></td><td data-reactid="4792"><!-- react-text: 4793 -->-<!-- /react-text --></td></tr><tr data-reactid="4794"><td data-reactid="4795"><!-- react-text: 4796 -->getCheckboxProps<!-- /react-text --></td><td data-reactid="4797"><!-- react-text: 4798 -->get Checkbox or Radio props<!-- /react-text --></td><td data-reactid="4799"><!-- react-text: 4800 -->Function(record)<!-- /react-text --></td><td data-reactid="4801"><!-- react-text: 4802 -->-<!-- /react-text --></td></tr><tr data-reactid="4803"><td data-reactid="4804"><!-- react-text: 4805 -->onSelect<!-- /react-text --></td><td data-reactid="4806"><!-- react-text: 4807 -->callback that is called when select/deselect one row<!-- /react-text --></td><td data-reactid="4808"><!-- react-text: 4809 -->Function(record, selected, selectedRows)<!-- /react-text --></td><td data-reactid="4810"><!-- react-text: 4811 -->-<!-- /react-text --></td></tr><tr data-reactid="4812"><td data-reactid="4813"><!-- react-text: 4814 -->onSelectAll<!-- /react-text --></td><td data-reactid="4815"><!-- react-text: 4816 -->callback that is called when select/deselect all<!-- /react-text --></td><td data-reactid="4817"><!-- react-text: 4818 -->Function(selected, selectedRows, changeRows)<!-- /react-text --></td><td data-reactid="4819"><!-- react-text: 4820 -->-<!-- /react-text --></td></tr></tbody></table><h2 id="Note" data-reactid="4821"><span data-reactid="4822"><!-- react-text: 4823 -->Note<!-- /react-text --></span><a href="#Note" class="anchor" data-reactid="4824">#</a></h2><p data-reactid="4825"><!-- react-text: 4826 -->According to <!-- /react-text --><a href="http://facebook.github.io/react/docs/multiple-components.html#dynamic-children" data-reactid="4827"><!-- react-text: 4828 -->React documentation<!-- /react-text --></a><!-- react-text: 4829 -->, every child in array should be assigned a unique key. The value inside <!-- /react-text --><code data-reactid="4830"><!-- react-text: 4831 -->dataSource<!-- /react-text --></code><!-- react-text: 4832 --> and <!-- /react-text --><code data-reactid="4833"><!-- react-text: 4834 -->columns<!-- /react-text --></code><!-- react-text: 4835 --> should follow this in Table, and <!-- /react-text --><code data-reactid="4836"><!-- react-text: 4837 -->dataSource[i].key<!-- /react-text --></code><!-- react-text: 4838 --> would be treated as key value defaultly for <!-- /react-text --><code data-reactid="4839"><!-- react-text: 4840 -->dataSource<!-- /react-text --></code><!-- react-text: 4841 -->.<!-- /react-text --></p><p data-reactid="4842"><!-- react-text: 4843 -->If <!-- /react-text --><code data-reactid="4844"><!-- react-text: 4845 -->dataSource[i].key<!-- /react-text --></code><!-- react-text: 4846 --> is not existed, then you should specify the primary key of dataSource value via <!-- /react-text --><code data-reactid="4847"><!-- react-text: 4848 -->rowKey<!-- /react-text --></code><!-- react-text: 4849 -->. If not, warnings like above will show in browser console.<!-- /react-text --></p><p data-reactid="4850"><img src="https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png" data-reactid="4851"/></p><pre class="language-jsx" data-reactid="4852"><code data-reactid="4853"><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" >&lt;</span>Table</span> <span class="token attr-name" >rowKey</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>uid<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true">// or</span>
<span class="token keyword" >return</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>Table</span> <span class="token attr-name" >rowKey</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>record <span class="token operator" >=</span><span class="token operator" >></span> record<span class="token punctuation" >.</span>uid<span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >;</span></code></pre></section></article></div></div><div class="ant-row" data-reactid="4854"><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="4855"><section class="prev-next-nav" data-reactid="4856"><a class="prev-page" href="components/popover/" data-reactid="4857"><span data-reactid="4858">Popover</span><span class="chinese" data-reactid="4859"></span></a><a class="next-page" href="components/tag/" data-reactid="4860"><span data-reactid="4861">Tag</span><span class="chinese" data-reactid="4862"></span></a></section></div></div></div><footer id="footer" data-reactid="4863"><ul data-reactid="4864"><li data-reactid="4865"><h2 data-reactid="4866">GitHub</h2><div data-reactid="4867"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="4868"><span data-reactid="4869">Repository</span></a></div><div data-reactid="4870"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="4871">dva</a><!-- react-text: 4872 --> - <!-- /react-text --><span data-reactid="4873">Framework</span></div><div data-reactid="4874"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="4875">dva-cli</a><!-- react-text: 4876 --> -<!-- /react-text --><span data-reactid="4877">Scaffold</span></div><div data-reactid="4878"><a target="_blank" rel="noopener noreferrer" href="http://ant-tool.github.io" data-reactid="4879">ant-tool</a><!-- react-text: 4880 --> - <!-- /react-text --><span data-reactid="4881">Developer Tools</span></div></li><li data-reactid="4882"><h2 data-reactid="4883"><span data-reactid="4884">Links</span></h2><div data-reactid="4885"><a href="http://mobile.ant.design" data-reactid="4886">Ant Design Mobile</a><span data-reactid="4887"> - </span><span data-reactid="4888">Mobile</span></div><div data-reactid="4889"><a href="https://g2.alipay.com/" data-reactid="4890">G2</a><span data-reactid="4891"> - </span><span data-reactid="4892">Data Visualization</span></div><div data-reactid="4893"><a href="https://antv.alipay.com/" data-reactid="4894">AntV</a><span data-reactid="4895"> - </span><span data-reactid="4896">Data Visualization Specification</span></div><div data-reactid="4897"><a href="http://motion.ant.design" data-reactid="4898">Ant Motion</a><span data-reactid="4899"> - </span><span data-reactid="4900">Motion</span></div><div data-reactid="4901"><a href="http://library.ant.design/" data-reactid="4902">AntD Library</a><span data-reactid="4903"> - </span><span data-reactid="4904">Axure library of Ant Design</span></div><div data-reactid="4905"><a href="http://ux.ant.design" data-reactid="4906">Ant UX</a><span data-reactid="4907"> - </span><span data-reactid="4908">Sitemap Template</span></div></li><li data-reactid="4909"><h2 data-reactid="4910"><span data-reactid="4911">Community</span></h2><div data-reactid="4912"><a rel="noopener noreferrer" href="/changelog" data-reactid="4913"><span data-reactid="4914">Change Log</span></a></div><div data-reactid="4915"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="4916"><span data-reactid="4917">Feedback</span></a></div><div data-reactid="4918"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="4919"><span data-reactid="4920">Chat Room</span></a></div><div data-reactid="4921"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="4922"><span data-reactid="4923">Bug Report</span></a></div></li><li data-reactid="4924"><div data-reactid="4925"><!-- react-text: 4926 -->©2016 <!-- /react-text --><span data-reactid="4927">Created by Ant UED</span></div><div data-reactid="4928"><!-- react-text: 4929 -->Powered by <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="4930">BiSheng</a></div><div style="margin-top:10px;" data-reactid="4931"><span data-reactid="4932">Version: </span><div class="ant-select-sm ant-select ant-select-enabled" data-reactid="4933"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="4934"><div class="ant-select-selection__rendered" data-reactid="4935"><div class="ant-select-selection-selected-value" title="1.11.4" style="display:block;opacity:1;" data-reactid="4936">1.11.4</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="4937"><b data-reactid="4938"></b></span></div></div></div></li></ul></footer></div>
</div>
<div class="ant-site-loading" id="ant-site-loading">
<img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg'/>
<div id="loading-text">One Design Language</div>
</div>
<script>
(function () {
var content = document.getElementById('loading-text');
if (content) {
content.innerHTML = content.innerHTML.split('').map(function (letter, i) {
var className;
if (i > 0 && i < content.innerText.length - 1) {
className = 'yoyo-x-' + (i % 6);
}
if (letter.trim() === '') {
className += ' blank';
}
return '<span class="' + className + '">' + letter + '</span>';
}).join('');
}
})();
// 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>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink