数据详情

5132a31d · gj · 5132a31d · 5132a31d · 5132a31d · 5132a31d
Commit 5132a31d authored May 14, 2019 by gj
15 changed files
--- a/.gitignore
+++ b/.gitignore
+~*
+/template.html
--- a/AntD Table API.md
+++ b/AntD Table API.md
+# AntD Table API
+- Table
+  - bordered
+  - childrenColumnName
+  - columns
+  - components
+  - dataSource
+  - defaultExpandAllRows
+  - defaultExpandedRowKeys
+  - expandedRowKeys
+  - expandedRowRender
+  - expandRowByClick
+  - footer
+  - indentSize
+  - loading
+  - locale
+  - pagination
+  - rowClassName
+  - rowKey
+  - rowSelection
+  - scroll
+  - showHeader
+  - size
+  - title
+  - onChange
+  - onExpand
+  - onExpandedRowsChange
+  - onHeaderRow
+  - onRow
+- Table.columns
+  - align, 'left' | 'right' | 'center'
+  - className
+  - colSpan
+  - dataIndex
+  - defaultSortOrder
+  - filterDropdown
+  - filterDropdownVisible
+  - filtered
+  - filteredValue
+  - filterIcon
+  - filterMultiple
+  - filters
+  - fixed, false | 'left' | 'right'
+  - key
+  - render
+  - sorter
+  - sortOrder
+  - title
+  - width
+  - onCell
+  - onFilter
+  - onFilterDropdownVisibleChange
+  - onHeaderCell
+- Table.pagination
+  - position, 'top' | 'bottom' | 'both'
+- Table.rowSelection
+  - columnWidth
+  - columnTitle
+  - fixed
+  - getCheckboxProps
+  - hideDefaultSelections
+  - selectedRowKeys
+  - selections
+  - type
+  - onChange
+  - onSelect
+  - onSelectAll
+  - onSelectInvert
+- [?] selection
+  - key
+  - text
+  - onSelect
+- ColumnGroup
+  - title
+## Usages
+### onRow
+Same for `onHeaderRow`, `onCell` and `onHeaderCell`.
+```jsx
+<Table
+  onRow={(record) => {
+    return {
+      onClick: () => {},       // click row
+      onMouseEnter: () => {},  // mouse enter row
+      onXxxx...
+    };
+  }}
+  onHeaderRow={(column) => {
+    return {
+      onClick: () => {},        // click header row
+    };
+  }}
+/>
+```
--- a/LICENSE
+++ b/LICENSE
+MIT License
+Copyright (c) 2018 Johann Huang
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
--- a/libs/antd/antd.min.css
+++ b/libs/antd/antd.min.css
--- a/libs/antd/antd.min.js
+++ b/libs/antd/antd.min.js
--- a/libs/js/babel-polyfill.min.js
+++ b/libs/js/babel-polyfill.min.js
--- a/libs/js/babel-standalone.min.js
+++ b/libs/js/babel-standalone.min.js
--- a/libs/js/iifes/canvas-nest.min.js
+++ b/libs/js/iifes/canvas-nest.min.js
+/* https://github.com/hustcc/canvas-nest.js */
+!function () { function o(w, v, i) { return w.getAttribute(v) || i } function j(i) { return document.getElementsByTagName(i) } function l() { var i = j("script"), w = i.length, v = i[w - 1]; return { l: w, z: o(v, "zIndex", -1), o: o(v, "opacity", 0.5), c: o(v, "color", "0,0,0"), n: o(v, "count", 99) } } function k() { r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight } function b() { e.clearRect(0, 0, r, n); var w = [f].concat(t); var x, v, A, B, z, y; t.forEach(function (i) { i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1); for (v = 0; v < w.length; v++) { x = w[v]; if (i !== x && null !== x.x && null !== x.y) { B = i.x - x.x, z = i.y - x.y, y = B * B + z * z; y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke()) } } w.splice(w.indexOf(i), 1) }), m(b) } var u = document.createElement("canvas"), s = l(), c = "c_n" + s.l, e = u.getContext("2d"), r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) { window.setTimeout(i, 1000 / 45) }, a = Math.random, f = { x: null, y: null, max: 20000 }; u.id = c; u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o; j("body")[0].appendChild(u); k(), window.onresize = k; window.onmousemove = function (i) { i = i || window.event, f.x = i.clientX, f.y = i.clientY }, window.onmouseout = function () { f.x = null, f.y = null }; for (var t = [], p = 0; s.n > p; p++) { var h = a() * r, g = a() * n, q = 2 * a() - 1, d = 2 * a() - 1; t.push({ x: h, y: g, xa: q, ya: d, max: 6000 }) } setTimeout(function () { b() }, 100) }();
--- a/libs/js/moment.min.js
+++ b/libs/js/moment.min.js
--- a/libs/js/react-dom.production.min.js
+++ b/libs/js/react-dom.production.min.js
--- a/libs/js/react.production.min.js
+++ b/libs/js/react.production.min.js
+/** @license React v16.4.2
+ * react.production.min.js
+ *
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';(function(p,h){"object"===typeof exports&&"undefined"!==typeof module?module.exports=h():"function"===typeof define&&define.amd?define(h):p.React=h()})(this,function(){function p(a){for(var b=arguments.length-1,f="https://reactjs.org/docs/error-decoder.html?invariant="+a,d=0;d<b;d++)f+="&args[]="+encodeURIComponent(arguments[d+1]);O(!1,"Minified React error #"+a+"; visit %s for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ",
+f)}function h(a){return function(){return a}}function q(a,b,f){this.props=a;this.context=b;this.refs=D;this.updater=f||E}function F(){}function v(a,b,f){this.props=a;this.context=b;this.refs=D;this.updater=f||E}function G(a,b,f){var d=void 0,e={},k=null,c=null;if(null!=b)for(d in void 0!==b.ref&&(c=b.ref),void 0!==b.key&&(k=""+b.key),b)H.call(b,d)&&!I.hasOwnProperty(d)&&(e[d]=b[d]);var g=arguments.length-2;if(1===g)e.children=f;else if(1<g){for(var m=Array(g),l=0;l<g;l++)m[l]=arguments[l+2];e.children=
+m}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===e[d]&&(e[d]=g[d]);return{$$typeof:r,type:a,key:k,ref:c,props:e,_owner:w.current}}function x(a){return"object"===typeof a&&null!==a&&a.$$typeof===r}function P(a){var b={"=":"=0",":":"=2"};return"$"+(""+a).replace(/[=:]/g,function(a){return b[a]})}function J(a,b,f,d){if(u.length){var e=u.pop();e.result=a;e.keyPrefix=b;e.func=f;e.context=d;e.count=0;return e}return{result:a,keyPrefix:b,func:f,context:d,count:0}}function K(a){a.result=null;a.keyPrefix=
+null;a.func=null;a.context=null;a.count=0;10>u.length&&u.push(a)}function t(a,b,f,d){var e=typeof a;if("undefined"===e||"boolean"===e)a=null;var k=!1;if(null===a)k=!0;else switch(e){case "string":case "number":k=!0;break;case "object":switch(a.$$typeof){case r:case Q:k=!0}}if(k)return f(d,a,""===b?"."+y(a,0):b),1;k=0;b=""===b?".":b+":";if(Array.isArray(a))for(var c=0;c<a.length;c++){e=a[c];var g=b+y(e,c);k+=t(e,g,f,d)}else if(null===a||"undefined"===typeof a?g=null:(g=L&&a[L]||a["@@iterator"],g="function"===
+typeof g?g:null),"function"===typeof g)for(a=g.call(a),c=0;!(e=a.next()).done;)e=e.value,g=b+y(e,c++),k+=t(e,g,f,d);else"object"===e&&(f=""+a,p("31","[object Object]"===f?"object with keys {"+Object.keys(a).join(", ")+"}":f,""));return k}function y(a,b){return"object"===typeof a&&null!==a&&null!=a.key?P(a.key):b.toString(36)}function R(a,b,f){a.func.call(a.context,b,a.count++)}function S(a,b,f){var d=a.result,e=a.keyPrefix;a=a.func.call(a.context,b,a.count++);Array.isArray(a)?z(a,d,f,A.thatReturnsArgument):
+null!=a&&(x(a)&&(b=e+(!a.key||b&&b.key===a.key?"":(""+a.key).replace(M,"$&/")+"/")+f,a={$$typeof:r,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}),d.push(a))}function z(a,b,f,d,e){var c="";null!=f&&(c=(""+f).replace(M,"$&/")+"/");b=J(b,c,d,e);null==a||t(a,"",S,b);K(b)}var N=Object.getOwnPropertySymbols,T=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable,B=function(){try{if(!Object.assign)return!1;var a=new String("abc");a[5]="de";if("5"===Object.getOwnPropertyNames(a)[0])return!1;
+var b={};for(a=0;10>a;a++)b["_"+String.fromCharCode(a)]=a;if("0123456789"!==Object.getOwnPropertyNames(b).map(function(a){return b[a]}).join(""))return!1;var f={};"abcdefghijklmnopqrst".split("").forEach(function(a){f[a]=a});return"abcdefghijklmnopqrst"!==Object.keys(Object.assign({},f)).join("")?!1:!0}catch(d){return!1}}()?Object.assign:function(a,b){if(null===a||void 0===a)throw new TypeError("Object.assign cannot be called with null or undefined");var f=Object(a);for(var d,e=1;e<arguments.length;e++){var c=
+Object(arguments[e]);for(var h in c)T.call(c,h)&&(f[h]=c[h]);if(N){d=N(c);for(var g=0;g<d.length;g++)U.call(c,d[g])&&(f[d[g]]=c[d[g]])}}return f},c="function"===typeof Symbol&&Symbol.for,r=c?Symbol.for("react.element"):60103,Q=c?Symbol.for("react.portal"):60106,n=c?Symbol.for("react.fragment"):60107,C=c?Symbol.for("react.strict_mode"):60108,V=c?Symbol.for("react.profiler"):60114,W=c?Symbol.for("react.provider"):60109,X=c?Symbol.for("react.context"):60110,Y=c?Symbol.for("react.async_mode"):60111,Z=
+c?Symbol.for("react.forward_ref"):60112;c&&Symbol.for("react.timeout");var L="function"===typeof Symbol&&Symbol.iterator,O=function(a,b,f,d,c,k,h,g){if(!a){if(void 0===b)a=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var e=[f,d,c,k,h,g],l=0;a=Error(b.replace(/%s/g,function(){return e[l++]}));a.name="Invariant Violation"}a.framesToPop=1;throw a;}},D={};c=function(){};c.thatReturns=h;c.thatReturnsFalse=h(!1);
+c.thatReturnsTrue=h(!0);c.thatReturnsNull=h(null);c.thatReturnsThis=function(){return this};c.thatReturnsArgument=function(a){return a};var A=c,E={isMounted:function(a){return!1},enqueueForceUpdate:function(a,b,c){},enqueueReplaceState:function(a,b,c,d){},enqueueSetState:function(a,b,c,d){}};q.prototype.isReactComponent={};q.prototype.setState=function(a,b){"object"!==typeof a&&"function"!==typeof a&&null!=a?p("85"):void 0;this.updater.enqueueSetState(this,a,b,"setState")};q.prototype.forceUpdate=
+function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate")};F.prototype=q.prototype;c=v.prototype=new F;c.constructor=v;B(c,q.prototype);c.isPureReactComponent=!0;var w={current:null},H=Object.prototype.hasOwnProperty,I={key:!0,ref:!0,__self:!0,__source:!0},M=/\/+/g,u=[];n={Children:{map:function(a,b,c){if(null==a)return a;var d=[];z(a,d,null,b,c);return d},forEach:function(a,b,c){if(null==a)return a;b=J(null,null,b,c);null==a||t(a,"",R,b);K(b)},count:function(a){return null==a?0:t(a,"",A.thatReturnsNull,
+null)},toArray:function(a){var b=[];z(a,b,null,A.thatReturnsArgument);return b},only:function(a){x(a)?void 0:p("143");return a}},createRef:function(){return{current:null}},Component:q,PureComponent:v,createContext:function(a,b){void 0===b&&(b=null);a={$$typeof:X,_calculateChangedBits:b,_defaultValue:a,_currentValue:a,_currentValue2:a,_changedBits:0,_changedBits2:0,Provider:null,Consumer:null};a.Provider={$$typeof:W,_context:a};return a.Consumer=a},forwardRef:function(a){return{$$typeof:Z,render:a}},
+Fragment:n,StrictMode:C,unstable_AsyncMode:Y,unstable_Profiler:V,createElement:G,cloneElement:function(a,b,c){null===a||void 0===a?p("267",a):void 0;var d=void 0,e=B({},a.props),f=a.key,h=a.ref,g=a._owner;if(null!=b){void 0!==b.ref&&(h=b.ref,g=w.current);void 0!==b.key&&(f=""+b.key);var m=void 0;a.type&&a.type.defaultProps&&(m=a.type.defaultProps);for(d in b)H.call(b,d)&&!I.hasOwnProperty(d)&&(e[d]=void 0===b[d]&&void 0!==m?m[d]:b[d])}d=arguments.length-2;if(1===d)e.children=c;else if(1<d){m=Array(d);
+for(var l=0;l<d;l++)m[l]=arguments[l+2];e.children=m}return{$$typeof:r,type:a.type,key:f,ref:h,props:e,_owner:g}},createFactory:function(a){var b=G.bind(null,a);b.type=a;return b},isValidElement:x,version:"16.4.2",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentOwner:w,assign:B}};n=(C={default:n},n)||C;return n.default?n.default:n});
--- a/table/README.md
+++ b/table/README.md
+# Introdution
+## [Ant Design Table Collection 1](https://github.johannhuang.com/ant-design-demos/antd-table-collection-1/src/)
+`Table` is for displaying rows of structured data with the ability to sort, search, paginate, filter data.
+This demo contains code pieces of various tables.
+Special parts of this demo includes:
+- Basic Table with Tag and Divider
+- Table with multiple level header
+- Tables which enable row selection and operation
+Tips about Ant Design Table includes:
+- Use `rowSelection.selectedRowKeys` to control selected rows.
+- Use `rowSelection.selections` custom selections, default no select dropdown, show default selections via setting to `true`.
+- Control filters and sorters by `filteredValue` and `sortOrder`.
+  - Defining `filteredValue` or `sortOrder` means that it is in the controlled mode.
+  - Make sure `sortOrder` is assigned for only one column.
+  - `column.key` is required.
--- a/table/src/index.html
+++ b/table/src/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title></title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.7.3/antd.min.css">
+  <style>
+    #app {
+      width: 100%;
+      max-width: 960px;
+      margin: 0 auto;
+      padding: 44px;
+    }
+    .section {
+      margin: 1em 0;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.7.3/antd.min.js"></script>
+  <script>const mountNode = document.getElementById('app');</script>
+  <script type="text/babel">
+    const { Table, Divider, Tag, Button } = antd;
+    const { Column, ColumnGroup } = Table;
+    class App extends React.Component {
+      constructor() {
+        super();
+        this.state = {
+          selectedRowKeys2: [],
+          selectedRowKeys3: [],
+          loading: false,
+        }
+      }
+      render() {
+        const columns1 = [{
+          title: 'Name',
+          dataIndex: 'name',
+          key: 'name',
+          render: text => <a href="javascript:;">{text}</a>,
+        }, {
+          title: 'Age',
+          dataIndex: 'age',
+          key: 'age',
+        }, {
+          title: 'Address',
+          dataIndex: 'address',
+          key: 'address',
+        }, {
+          title: 'Tags',
+          key: 'tags',
+          dataIndex: 'tags',
+          render: tags => (
+            <span>
+              {tags.map(tag => <Tag color="blue" key={tag}>{tag}</Tag>)}
+            </span>
+          ),
+        }, {
+          title: 'Action',
+          key: 'action',
+          render: (text, record) => (
+            <span>
+              <a href="javascript:;">Invite {record.name}</a>
+              <Divider type="vertical" />
+              <a href="javascript:;">Delete</a>
+            </span>
+          ),
+        }];
+        const data1 = [{
+          key: '1',
+          name: 'John Brown',
+          age: 32,
+          address: 'New York No. 1 Lake Park',
+          tags: ['nice', 'developer'],
+        }, {
+          key: '2',
+          name: 'Jim Green',
+          age: 42,
+          address: 'London No. 1 Lake Park',
+          tags: ['loser'],
+        }, {
+          key: '3',
+          name: 'Joe Black',
+          age: 32,
+          address: 'Sidney No. 1 Lake Park',
+          tags: ['cool', 'teacher'],
+        }, {
+          key: '4',
+          name: 'Disabled User',
+          age: 99,
+          address: 'Sidney No. 1 Lake Park',
+          tags: [],
+        }];
+        const data2 = [{
+          key: '1',
+          firstName: 'John',
+          lastName: 'Brown',
+          age: 32,
+          address: 'New York No. 1 Lake Park',
+          tags: ['nice', 'developer'],
+        }, {
+          key: '2',
+          firstName: 'Jim',
+          lastName: 'Green',
+          age: 42,
+          address: 'London No. 1 Lake Park',
+          tags: ['loser'],
+        }, {
+          key: '3',
+          firstName: 'Joe',
+          lastName: 'Black',
+          age: 32,
+          address: 'Sidney No. 1 Lake Park',
+          tags: ['cool', 'teacher'],
+        }];
+        // rowSelection object indicates the need for row selection
+        const rowSelection1 = {
+          onChange: (selectedRowKeys, selectedRows) => {
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+          },
+          getCheckboxProps: record => ({
+            disabled: record.name === 'Disabled User', // Column configuration not to be checked
+            name: record.name,
+          }),
+        };
+        const rowSelection2 = {
+          selectedRowKeys: this.state.selectedRowKeys2,
+          onChange: (selectedRowKeys, selectedRows) => {
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+            this.setState({ selectedRowKeys2: selectedRowKeys });
+          },
+          getCheckboxProps: record => ({
+            disabled: record.name === 'Disabled User', // Column configuration not to be checked
+            name: record.name,
+          }),
+        };
+        const rowSelection3 = {
+          hideDefaultSelections: true,
+          selectedRowKeys: this.state.selectedRowKeys3,
+          selections: [{
+            key: 'all-data',
+            text: 'Select All Data',
+            onSelect: (changableRowKeys) => {
+              this.setState({
+                selectedRowKeys3: changableRowKeys,
+              });
+            },
+          }, {
+            key: 'odd',
+            text: 'Select Odd Row',
+            onSelect: (changableRowKeys) => {
+              let newSelectedRowKeys = [];
+              newSelectedRowKeys = changableRowKeys.filter((key, index) => {
+                if (index % 2 !== 0) {
+                  return false;
+                }
+                return true;
+              });
+              this.setState({ selectedRowKeys3: newSelectedRowKeys });
+            },
+          }, {
+            key: 'even',
+            text: 'Select Even Row',
+            onSelect: (changableRowKeys) => {
+              let newSelectedRowKeys = [];
+              newSelectedRowKeys = changableRowKeys.filter((key, index) => {
+                if (index % 2 !== 0) {
+                  return true;
+                }
+                return false;
+              });
+              this.setState({ selectedRowKeys3: newSelectedRowKeys });
+            },
+          }],
+          onChange: (selectedRowKeys, selectedRows) => {
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+            this.setState({ selectedRowKeys3: selectedRowKeys });
+          },
+          getCheckboxProps: record => ({
+            disabled: record.name === 'Disabled User', // Column configuration not to be checked
+            name: record.name,
+          }),
+        };
+        return (
+          <div>
+            <div>
+              <h2>1. Basic Usage</h2>
+              <Table columns={columns1} dataSource={data1} />
+            </div>
+            <div>
+              <h2>2. JSX Style API, for columns, after v2.5.0</h2>
+              <Table dataSource={data2}>
+                <ColumnGroup title="Name">
+                  <Column
+                    title="First Name"
+                    dataIndex="firstName"
+                    key="firstName"
+                  />
+                  <Column
+                    title="Last Name"
+                    dataIndex="lastName"
+                    key="lastName"
+                  />
+                </ColumnGroup>
+                <Column
+                  title="Age"
+                  dataIndex="age"
+                  key="age"
+                />
+                <Column
+                  title="Address"
+                  dataIndex="address"
+                  key="address"
+                />
+                <Column
+                  title="Tags"
+                  dataIndex="tags"
+                  key="tags"
+                  render={tags => (
+                    <span>
+                      {tags.map(tag => <Tag color="blue" key={tag}>{tag}</Tag>)}
+                    </span>
+                  )}
+                />
+                <Column
+                  title="Action"
+                  key="action"
+                  render={(text, record) => (
+                    <span>
+                      <a href="javascript:;">Invite {record.lastName}</a>
+                      <Divider type="vertical" />
+                      <a href="javascript:;">Delete</a>
+                    </span>
+                  )}
+                />
+              </Table>
+            </div>
+            <div>
+              <h2>3. Row Selection</h2>
+              <Table rowSelection={rowSelection1} columns={columns1} dataSource={data1} />
+            </div>
+            <div>
+              <h2>4. Row Selection and Operation</h2>
+              <Button onClick={() => this.setState({ selectedRowKeys: [] })}>Do Operation and Clear</Button>
+              <Table rowSelection={rowSelection2} columns={columns1} dataSource={data1} />
+            </div>
+            <div>
+              <h2>5. Custom Row Selection</h2>
+              <Table rowSelection={rowSelection3} columns={columns1} dataSource={data1} />
+            </div>
+          </div>
+        );
+      }
+    }
+  </script>
+  <script type="text/babel">ReactDOM.render(<App />, mountNode);</script>
+  <script src="https://github.johannhuang.com/ant-design-demos/libs/js/iifes/canvas-nest.min.js"></script>
+</body>
+</html>
--- a/table/src/table.html
+++ b/table/src/table.html