@uiw/doc 5.0.0-bate-10 → 5.0.0-bate-11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/package.json +1 -1
  2. package/web/asset-manifest.json +5 -5
  3. package/web/index.html +1 -1
  4. package/web/static/js/9699.ea3b566d.chunk.js +2 -0
  5. package/web/static/js/9699.ea3b566d.chunk.js.map +1 -0
  6. package/web/static/js/{main.0973cffc.js → main.0078f40f.js} +2 -2
  7. package/web/static/js/main.0078f40f.js.map +1 -0
  8. package/web/static/js/9699.042f9702.chunk.js +0 -2
  9. package/web/static/js/9699.042f9702.chunk.js.map +0 -1
  10. package/web/static/js/main.0973cffc.js.map +0 -1
package/web/static/js/9699.ea3b566d.chunk.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9699],{9699:function(e,n,t){t.r(n),n.default={components:{18:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);var a=[{ellipsis:!0,title:function(e){var t=e.key;return n.default.createElement("span",null,"\u5b57\u6bb5: ",t)},key:"name"},{title:"\u5e74\u9f84",style:{color:"red"},key:"age",isExpandedButton:!0},{title:"\u5730\u5740",key:"info"},{title:"\u64cd\u4f5c",key:"edit",width:98,render:function(e,t,a,o,i){return n.default.createElement("div",null,n.default.createElement(r.Button,{size:"small",type:"danger"},"\u5220\u9664"),n.default.createElement(r.Button,{size:"small",type:"success"},"\u4fee\u6539"))}}],o=[{name:"\u9093\u7d2b\u68cb",age:"12",info:"\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002",edit:""},{name:"\u674e\u6613\u5cf0",age:"32",info:"1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba",edit:""},{name:"\u8303\u51b0\u51b0",age:"23",info:"1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b",edit:""},{name:"\u6768\u5e42",age:"34",info:"1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002",edit:""},{name:"Angelababy",age:"54",info:"1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002",edit:""},{name:"\u5510\u5ae3",age:"12",info:"1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed",edit:""},{name:"\u5434\u4ea6\u51e1",age:"4",info:"1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002",edit:""}];return function(){return n.default.createElement("div",null,n.default.createElement(r.Table,{columns:a,data:o}))}}(),72:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);var a=[{title:"\u59d3\u540d",style:{color:"red"},key:"name",children:[{title:"\u82f1\u6587\u540d\u5b57",width:100,key:"name_en"},{title:"\u4e2d\u6587\u540d\u5b57",key:"cnname",children:[{title:"\u59d3\u540d",style:{color:"red"},key:"firstname",children:[{title:"\u59d3",key:"name1",width:80},{title:"\u540d",key:"name2",width:80}]},{title:"\u62fc\u97f3",key:"lastname",children:[{title:"\u59d3",key:"pinyin1",width:80},{title:"\u540d",key:"pinyin2",width:80}]}]}]},{title:"\u5176\u5b83",key:"other",children:[{title:"\u751f\u65e5",key:"birthday",width:150},{title:"\u804c\u4e1a",key:"job",width:150}]},{title:"\u64cd\u4f5c",key:"edit",width:150,render:function(e,t,a,o,i){return n.default.createElement("div",null,n.default.createElement(r.Button,{size:"small",type:"danger"},"\u5220\u9664"),n.default.createElement("span",null,e," ",t," - ",o," - ",i))}}],o=[{name1:"\u9093",name2:"\u7d2b\u68cb",pinyin1:"deng",pinyin2:"ziqi",name_en:"G.E.M.",birthday:"1991\u5e748\u670816\u65e5",job:"\u5531\u4f5c\u6b4c\u624b\u3001\u4f5c\u66f2\u4eba",edit:""},{name1:"\u5468",name2:"\u6770\u4f26",pinyin1:"zhou",pinyin2:"jielun",name_en:"Jay Chou",birthday:"1979\u5e741\u670818\u65e5",job:"\u6b4c\u624b\u3001\u97f3\u4e50\u4eba",edit:""},{name1:"\u9093",name2:"\u7d2b\u68cb",pinyin1:"deng",pinyin2:"ziqi",name_en:"G.E.M.",birthday:"1991\u5e748\u670816\u65e5",job:"\u5531\u4f5c\u6b4c\u624b\u3001\u4f5c\u66f2\u4eba",edit:""},{name1:"\u5468",name2:"\u6770\u4f26",pinyin1:"zhou",pinyin2:"jielun",name_en:"Jay Chou",birthday:"1979\u5e741\u670818\u65e5",job:"\u6b4c\u624b\u3001\u97f3\u4e50\u4eba",edit:""}];return function(){return n.default.createElement("div",null,n.default.createElement(r.Table,{bordered:!0,columns:a,data:o}))}}(),147:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);var a=[{title:"\u59d3\u540d",key:"name"},{title:"\u5e74\u9f84",style:{color:"red"},key:"age",colSpan:2,render:function(e,n,t,r,a){var o={children:e,props:{}};return 0===r&&(o.props.rowSpan=2),1===r&&(o.props.rowSpan=0),o}},{title:"\u5730\u5740",key:"info",colSpan:0},{title:"\u64cd\u4f5c",key:"edit",width:98,render:function(e,t,a,o,i){return n.default.createElement("div",null,n.default.createElement(r.Button,{size:"small",type:"danger"},"\u5220\u9664"),n.default.createElement(r.Button,{size:"small",type:"success"},"\u4fee\u6539"))}}],o=[{name:"\u9093\u7d2b\u68cb",age:"12",info:"\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002",edit:""},{name:"\u674e\u6613\u5cf0",age:"12",info:"1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba",edit:""},{name:"\u8303\u51b0\u51b0",age:"23",info:"1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b",edit:""},{name:"\u6768\u5e42",age:"34",info:"1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002",edit:""}];return function(){return n.default.createElement("div",null,n.default.createElement(r.Table,{bordered:!0,columns:a,data:o}))}}(),205:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);function a(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,a,o,i,l=[],u=!0,d=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;u=!1}else for(;!(u=(r=o.call(t)).done)&&(l.push(r.value),l.length!==n);u=!0);}catch(c){d=!0,a=c}finally{try{if(!u&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(d)throw a}}return l}}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return o(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return o(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var i=[{title:"\u59d3\u540d",ellipsis:!0,key:"name"},{title:"\u5e74\u9f84",style:{color:"red"},key:"age",isExpandedButton:!0,render:function(e,n,t,r,a,o){var i={children:e,props:{}};return 0===o.level&&(i.props.colSpan=2),i}},{title:"\u5e74\u9f842",style:{color:"red"},key:"age1",render:function(e,n,t,r,a,o){var i=o.level,l={children:t.age,props:{}};return 0===i&&(l.props.colSpan=0),l}},{title:"\u64cd\u4f5c",key:"edit",width:98,render:function(e,t,a,o,i){return n.default.createElement("div",null,n.default.createElement(r.Button,{size:"small",type:"danger"},"\u5220\u9664"),n.default.createElement(r.Button,{size:"small",type:"success"},"\u4fee\u6539"))}}],l=[{name:"\u9093\u7d2b\u68cb",age:"10",id:"1",children:[{name:"\u9093\u7d2b\u68cb-0-1",age:"10",id:"1-1",children:[{name:"\u9093\u7d2b\u68cb-0-1-1",age:"10",id:"1-1-1",children:[{name:"\u9093\u7d2b\u68cb-0-1-1-1",age:"10",id:"-0-1-1-1"},{name:"\u9093\u7d2b\u68cb-0-1-1-2",age:"10",id:"-0-1-1-2"},{name:"\u9093\u7d2b\u68cb-0-1-1-3",age:"10",id:"-0-1-1-3"}]},{name:"\u9093\u7d2b\u68cb-0-1-2",age:"10",id:"1-1-2"}]},{name:"\u9093\u7d2b\u68cb-0-2",age:"10",id:"1-1"},{name:"\u9093\u7d2b\u68cb-0-3",age:"10",id:"1-1"}]},{name:"\u674e\u6613\u5cf0",age:"32",id:"2"},{name:"\u8303\u51b0\u51b0",age:"23",id:"3",children:[{name:"\u8303\u51b0\u51b00-1",age:"23",id:"3-1"},{name:"\u8303\u51b0\u51b00-2",age:"23",id:"3-2"},{name:"\u8303\u51b0\u51b00-3",age:"23",id:"3-3"}]}];return function(){var e=a(n.default.useState([]),2);e[0],e[1];return n.default.createElement("div",null,n.default.createElement(r.Table,{rowKey:"id",expandable:{onExpand:function(e,n){for(var t=arguments.length,r=new Array(t>2?t-2:0),a=2;a<t;a++)r[a-2]=arguments[a];console.log(e,n,r)}},columns:i,data:l}))}}(),319:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);function a(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,a,o,i,l=[],u=!0,d=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;u=!1}else for(;!(u=(r=o.call(t)).done)&&(l.push(r.value),l.length!==n);u=!0);}catch(c){d=!0,a=c}finally{try{if(!u&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(d)throw a}}return l}}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return o(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return o(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var i=[{title:"\u59d3\u540d",ellipsis:!0,key:"name"},{title:"\u5e74\u9f84",style:{color:"red"},key:"age",level:2},{title:"\u5e74\u9f842",style:{color:"red"},key:"age",level:2},{title:"\u64cd\u4f5c",key:"edit",width:98,render:function(e,t,a,o,i){return n.default.createElement("div",null,n.default.createElement(r.Button,{size:"small",type:"danger"},"\u5220\u9664"),n.default.createElement(r.Button,{size:"small",type:"success"},"\u4fee\u6539"))}}],l=[{name:"\u9093\u7d2b\u68cb",age:"10",id:"1",children:[{name:"\u9093\u7d2b\u68cb-0-1",age:"10",id:"1-1",children:[{name:"\u9093\u7d2b\u68cb-0-1-1",age:"10",id:"1-1-1",children:[{name:"\u9093\u7d2b\u68cb-0-1-1-1",age:"10",id:"-0-1-1-1"},{name:"\u9093\u7d2b\u68cb-0-1-1-2",age:"10",id:"-0-1-1-2"},{name:"\u9093\u7d2b\u68cb-0-1-1-3",age:"10",id:"-0-1-1-3"}]},{name:"\u9093\u7d2b\u68cb-0-1-2",age:"10",id:"1-1-2"}]},{name:"\u9093\u7d2b\u68cb-0-2",age:"10",id:"1-1"},{name:"\u9093\u7d2b\u68cb-0-3",age:"10",id:"1-1"}]},{name:"\u674e\u6613\u5cf0",age:"32",id:"2"},{name:"\u8303\u51b0\u51b0",age:"23",id:"3",children:[{name:"\u8303\u51b0\u51b00-1",age:"23",id:"3-1"},{name:"\u8303\u51b0\u51b00-2",age:"23",id:"3-2"},{name:"\u8303\u51b0\u51b00-3",age:"23",id:"3-3"}]}];return function(){var e=a(n.default.useState([]),2);e[0],e[1];return n.default.createElement("div",null,n.default.createElement(r.Table,{rowKey:"id",columns:i,data:l,isAutoMergeRowSpan:!0}))}}(),412:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);var a=[{title:"\u59d3\u540d",style:{color:"red"},key:"name"},{title:"\u5e74\u9f84",key:"age"},{title:"\u5730\u5740",key:"info"},{title:"\u64cd\u4f5c",key:"edit",width:98,render:function(e,t,a,o,i){return n.default.createElement("div",null,n.default.createElement(r.Button,{size:"small",type:"danger"},"\u5220\u9664"),n.default.createElement(r.Button,{size:"small",type:"success"},"\u4fee\u6539"))}}],o=[{name:"\u9093\u7d2b\u68cb",age:"12",info:"\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002",edit:""},{name:"\u674e\u6613\u5cf0",age:"32",info:"1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba",edit:""},{name:"\u8303\u51b0\u51b0",age:"23",info:"1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b",edit:""},{name:"\u6768\u5e42",age:"34",info:"1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002",edit:""},{name:"Angelababy",age:"54",info:"1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002",edit:""},{name:"\u5510\u5ae3",age:"12",info:"1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed",edit:""},{name:"\u5434\u4ea6\u51e1",age:"4",info:"1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002",edit:""}];return function(){return n.default.createElement("div",null,n.default.createElement(r.Table,{title:n.default.createElement("div",null,"\u8fd9\u91cc\u662f\u6807\u9898\uff0c\u6709\u8fb9\u6846\uff0c",n.default.createElement("b",null,"bordered=true")),footer:n.default.createElement("div",null,"\u8fd9\u91cc\u662f\u9875\u811a Footer\uff0c\u6709\u8fb9\u6846\uff0c",n.default.createElement("b",null,"bordered=true")),bordered:!0,columns:a,data:o}),n.default.createElement(r.Table,{title:"\u8fd9\u91cc\u662f\u6807\u9898\uff0c\u6ca1\u6709\u8fb9\u6846",footer:"\u8fd9\u91cc\u662f\u9875\u811a Footer\uff0c\u6ca1\u6709\u8fb9\u6846",columns:a,data:o}))}}(),470:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);var a=[{title:"\u59d3\u540d",style:{color:"red"},key:"name"},{title:"\u5e74\u9f84",key:"age"},{title:"\u5730\u5740",key:"info"},{title:"\u64cd\u4f5c",key:"edit",width:98,render:function(e,t,a,o,i){return n.default.createElement("div",null,n.default.createElement(r.Button,{size:"small",type:"danger"},"\u5220\u9664"),n.default.createElement(r.Button,{size:"small",type:"success"},"\u4fee\u6539"))}}],o=[{name:"\u9093\u7d2b\u68cb",age:"12",info:"\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002",edit:""},{name:"\u674e\u6613\u5cf0",age:"32",info:"1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba",edit:""},{name:"\u8303\u51b0\u51b0",age:"23",info:"1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b",edit:""},{name:"\u6768\u5e42",age:"34",info:"1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002",edit:""},{name:"Angelababy",age:"54",info:"1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002",edit:""},{name:"\u5510\u5ae3",age:"12",info:"1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed",edit:""},{name:"\u5434\u4ea6\u51e1",age:"4",info:"1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002",edit:""}];return function(){return n.default.createElement("div",null,n.default.createElement(r.Table,{title:"\u8868\u5185\u5bb9 tbody \u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6",onCell:function(e,n){var t=n.rowNum,a=n.colNum;console.log("--\x3e3",e),console.log("--\x3e4",t),console.log("--\x3e5",a),r.Notify.info({description:'\u4f60\u70b9\u51fb\u4e86"'.concat(e.name,'"\u3002')})},columns:a,data:o}),n.default.createElement(r.Table,{title:"\u8868\u5934\u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6",onCellHead:function(e,n,t){console.log("--\x3e3",e),console.log("--\x3e4",n),console.log("--\x3e5",t),r.Notify.info({description:'\u4f60\u70b9\u51fb\u4e86"'.concat(e.title,'"\u3002')})},onCell:function(e,n){var t=n.rowNum,a=n.colNum;console.log("--\x3e3",e),console.log("--\x3e4",t),console.log("--\x3e5",a),r.Notify.info({description:'\u4f60\u70b9\u51fb\u4e86"'.concat(e.name,'"\u3002')})},columns:a,data:o}))}}(),543:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);return function(){return n.default.createElement("div",null,n.default.createElement(r.Table,{bordered:!0},n.default.createElement("thead",null,n.default.createElement("tr",null,n.default.createElement("th",null,"\u540d\u79f0"),n.default.createElement("th",null,"\u6570\u91cf"),n.default.createElement("th",null,"\u8be6\u60c5"),n.default.createElement("th",null,"\u4ef7\u683c"))),n.default.createElement("tbody",null,n.default.createElement("tr",null,n.default.createElement("td",null,"\u571f\u8c46"),n.default.createElement("td",null,"18"),n.default.createElement("td",null,"2009/01/12"),n.default.createElement("td",null,"\uffe586,000")),n.default.createElement("tr",null,n.default.createElement("td",null,"\u841d\u535c"),n.default.createElement("td",null,"18"),n.default.createElement("td",null,"2009/01/12"),n.default.createElement("td",null,"\uffe586,000")),n.default.createElement("tr",null,n.default.createElement("td",null,"\u9999\u8549"),n.default.createElement("td",null,"18"),n.default.createElement("td",null,"2009/01/12"),n.default.createElement("td",null,"\uffe586,000")),n.default.createElement("tr",null,n.default.createElement("td",null,"\u829d\u9ebb"),n.default.createElement("td",null,"18"),n.default.createElement("td",null,"2009/01/12"),n.default.createElement("td",null,"\uffe586,000")))),n.default.createElement(r.Table,null,n.default.createElement("caption",null,"\u6ca1\u6709\u8fb9\u6846"),n.default.createElement("thead",null,n.default.createElement("tr",null,n.default.createElement("th",null,"\u540d\u79f0"),n.default.createElement("th",null,"\u6570\u91cf"),n.default.createElement("th",null,"\u8be6\u60c5"),n.default.createElement("th",null,"\u4ef7\u683c"))),n.default.createElement("tbody",null,n.default.createElement("tr",null,n.default.createElement("td",null,"\u571f\u8c46"),n.default.createElement("td",null,"18"),n.default.createElement("td",null,"2009/01/12"),n.default.createElement("td",null,"\uffe586,000")),n.default.createElement("tr",null,n.default.createElement("td",null,"\u841d\u535c"),n.default.createElement("td",null,"18"),n.default.createElement("td",null,"2009/01/12"),n.default.createElement("td",null,"\uffe586,000")),n.default.createElement("tr",null,n.default.createElement("td",null,"\u9999\u8549"),n.default.createElement("td",null,"18"),n.default.createElement("td",null,"2009/01/12"),n.default.createElement("td",null,"\uffe586,000")),n.default.createElement("tr",null,n.default.createElement("td",null,"\u829d\u9ebb"),n.default.createElement("td",null,"18"),n.default.createElement("td",null,"2009/01/12"),n.default.createElement("td",null,"\uffe586,000")))))}}(),629:function(){function e(n){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(n)}var n,r=(n=t(8133))&&n.__esModule?n:{default:n},a=t(3400);function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e,n,t){return(n=d(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(e,n){if(t=e,!(null!=(r=n)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](t):t instanceof r))throw new TypeError("Cannot call a class as a function");var t,r}function u(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,d(r.key),r)}}function d(n){var t=function(n,t){if("object"!==e(n)||null===n)return n;var r=n[Symbol.toPrimitive];if(void 0!==r){var a=r.call(n,t||"default");if("object"!==e(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(n)}(n,"string");return"symbol"===e(t)?t:String(t)}function c(e,n){return c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,n){return e.__proto__=n,e},c(e,n)}function s(e){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var t,r=_(e);if(n){var a=_(this).constructor;t=Reflect.construct(r,arguments,a)}else t=r.apply(this,arguments);return m(this,t)}}function m(n,t){if(t&&("object"===e(t)||"function"===typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return f(n)}function f(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _(e){return _=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},_(e)}var y=function(e){!function(e,n){if("function"!==typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),n&&c(e,n)}(_,e);var n,t,d,m=s(_);function _(e){var n;return l(this,_),(n=m.call(this,e)).state={checked:[],loading:!1,dataSource:[{name:"\u9093\u7d2b\u68cb",age:"12",info:"\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002"},{name:"\u674e\u6613\u5cf0",age:"32",info:"1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba"},{name:"\u8303\u51b0\u51b0",age:"23",info:"1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b"},{name:"\u6768\u5e42",age:"34",info:"1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002"},{name:"Angelababy",age:"54",info:"1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002"},{name:"\u5510\u5ae3",age:"12",info:"1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed"},{name:"\u5434\u4ea6\u51e1",age:"4",info:"1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002"}],columns:[{title:function(e,t,o){var i=n.state.dataSource.length!==n.state.checked.length&&n.state.checked.length>0,l=n.state.dataSource.length===n.state.checked.length;return r.default.createElement(a.Checkbox,{checked:l,indeterminate:i,onClick:function(e){var t=n.state.dataSource.map((function(e,n){return n}));e.target.checked||(t=[]),n.setState({checked:t})}})},key:"checked",render:function(e,t,o,i,l){return r.default.createElement(a.Checkbox,{checked:o.checked,onClick:n.onClickCheckedItem.bind(f(n),i)})}},{title:"\u540d\u5b57",key:"name"},{title:"\u5e74\u9f84",key:"age"},{title:"\u5730\u5740",key:"info"}]},n}return n=_,t=[{key:"onClickCheckedItem",value:function(e,n){var t=this.state.checked;n.target.checked?(t.push(e),t=t.sort((function(e,n){return e-n}))):t.splice(t.indexOf(e),1),this.setState({checked:t})}},{key:"render",value:function(){var e=this,n=this.state.checked,t=this.state.dataSource.map((function(e,t){return function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?o(Object(t),!0).forEach((function(n){i(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}({checked:n.indexOf(t)>-1},e)}));return r.default.createElement("div",null,r.default.createElement(a.Loader,{loading:this.state.loading,style:{display:"block"}},r.default.createElement(a.Table,{columns:this.state.columns,data:t,footer:r.default.createElement(a.Pagination,{current:2,pageSize:10,total:30,divider:!0,onChange:function(n,t,r){e.setState({loading:!0}),setTimeout((function(){var t=e.state.dataSource.map((function(e){return e.age=Number(e.age)+n,e}));e.setState({checked:[],dataSource:t,loading:!1})}),2e3)}})})))}}],t&&u(n.prototype,t),d&&u(n,d),Object.defineProperty(n,"prototype",{writable:!1}),_}(r.default.Component);return y}(),743:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);var a=[{title:"Name",key:"name",render:function(e){return n.default.createElement("a",null,e)},width:150},{title:"Age",key:"age",width:80},{title:"Address",key:"address",ellipsis:!0,render:function(e){return n.default.createElement(r.Tooltip,{placement:"topLeft",content:e},e)}},{title:"Long Column Long Column Long Column",key:"address",ellipsis:!0,render:function(e){return n.default.createElement(r.Tooltip,{placement:"topLeft",content:e},e)}},{title:"Long Column Long Column",key:"address",ellipsis:!0,render:function(e){return n.default.createElement(r.Tooltip,{placement:"topLeft",content:e},e)}},{title:"Long Column",key:"address",ellipsis:!0,render:function(e){return n.default.createElement(r.Tooltip,{placement:"topLeft",content:e},e)}}],o=[{name:"\u9093\u7d2b\u68cb",age:"12",address:"\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002"},{name:"\u674e\u6613\u5cf0",age:"32",address:"1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba"},{name:"\u8303\u51b0\u51b0",age:"23",address:"1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b"},{name:"\u6768\u5e42",age:"34",address:"1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002"},{name:"Angelababy",age:"54",address:"1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002"},{name:"\u5510\u5ae3",age:"12",address:"1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed"},{name:"\u5434\u4ea6\u51e1",age:"4",address:"1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002"}];return function(){return n.default.createElement("div",null,n.default.createElement(r.Table,{title:"\u8868\u5185\u5bb9 tbody \u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6",columns:a,data:o}))}}(),827:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);var a=[{ellipsis:!0,title:"\u59d3\u540d",key:"name"},{title:"\u5e74\u9f84",key:"age"},{title:"\u5730\u5740",key:"info"},{title:"\u64cd\u4f5c",key:"edit",width:98,render:function(e,t,a,o,i){return n.default.createElement("div",null,n.default.createElement(r.Button,{size:"small",type:"danger"},"\u5220\u9664"),n.default.createElement(r.Button,{size:"small",type:"success"},"\u4fee\u6539"))}}],o=[];return function(){return n.default.createElement("div",null,n.default.createElement(r.Table,{columns:a,data:o,empty:n.default.createElement(r.Empty,null)}))}}(),869:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);var a=[{title:"\u59d3\u540d",ellipsis:!0,key:"name"},{title:"\u5e74\u9f84",style:{color:"red"},key:"age"},{title:"\u64cd\u4f5c",key:"edit",width:98,render:function(e,t,a,o,i){return n.default.createElement("div",null,n.default.createElement(r.Button,{size:"small",type:"danger"},"\u5220\u9664"),n.default.createElement(r.Button,{size:"small",type:"success"},"\u4fee\u6539"))}}],o=[{name:"\u9093\u7d2b\u68cb",age:"10",id:"1"},{name:"\u674e\u6613\u5cf0",age:"32",id:"2"},{name:"\u8303\u51b0\u51b0",age:"23",id:"3"}];return function(){return n.default.createElement("div",null,n.default.createElement(r.Table,{rowKey:"id",expandable:{expandedRowRender:function(e,t,r){return n.default.createElement("div",null,e.name)},rowExpandable:function(e){return"\u674e\u6613\u5cf0"!==e.name},expandIcon:function(e){return e?n.default.createElement(r.Icon,{type:"minus-circle-o"}):n.default.createElement(r.Icon,{type:"plus-circle-o"})},defaultExpandedRowKeys:["1"]},columns:a,data:o}))}}(),928:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);function a(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,a,o,i,l=[],u=!0,d=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;u=!1}else for(;!(u=(r=o.call(t)).done)&&(l.push(r.value),l.length!==n);u=!0);}catch(c){d=!0,a=c}finally{try{if(!u&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(d)throw a}}return l}}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return o(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return o(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var i=[{title:"\u59d3\u540d",ellipsis:!0,key:"name"},{title:"\u5e74\u9f84",style:{color:"red"},key:"age"},{title:"\u64cd\u4f5c",key:"edit",width:98,render:function(e,t,a,o,i){return n.default.createElement("div",null,n.default.createElement(r.Button,{size:"small",type:"danger"},"\u5220\u9664"),n.default.createElement(r.Button,{size:"small",type:"success"},"\u4fee\u6539"))}}],l=[{name:"\u9093\u7d2b\u68cb",age:"10",id:"1",children:[{name:"\u9093\u7d2b\u68cb-0-1",age:"10",id:"1-1",children:[{name:"\u9093\u7d2b\u68cb-0-1-1",age:"10",id:"1-1-1",children:[{name:"\u9093\u7d2b\u68cb-0-1-1-1",age:"10",id:"-0-1-1-1"},{name:"\u9093\u7d2b\u68cb-0-1-1-2",age:"10",id:"-0-1-1-2"},{name:"\u9093\u7d2b\u68cb-0-1-1-3",age:"10",id:"-0-1-1-3"}]},{name:"\u9093\u7d2b\u68cb-0-1-2",age:"10",id:"1-1-2"}]},{name:"\u9093\u7d2b\u68cb-0-2",age:"10",id:"1-1"},{name:"\u9093\u7d2b\u68cb-0-3",age:"10",id:"1-1"}]},{name:"\u674e\u6613\u5cf0",age:"32",id:"2"},{name:"\u8303\u51b0\u51b0",age:"23",id:"3",children:[{name:"\u8303\u51b0\u51b00-1",age:"23",id:"3-1"},{name:"\u8303\u51b0\u51b00-2",age:"23",id:"3-2"},{name:"\u8303\u51b0\u51b00-3",age:"23",id:"3-3"}]}];return function(){var e=a(n.default.useState([]),2);e[0],e[1];return n.default.createElement("div",null,n.default.createElement(r.Table,{rowKey:"id",columns:i,data:l}))}}(),1011:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);var a=[{ellipsis:!0,width:1e3,title:function(e){var t=e.key;return n.default.createElement("span",null,"\u5b57\u6bb5: ",t)},key:"name"},{title:"\u5e74\u9f84",style:{color:"red"},key:"age"},{title:"\u5730\u5740",key:"info"},{title:"\u64cd\u4f5c",key:"edit",width:98,render:function(e,t,a,o,i){return n.default.createElement("div",null,n.default.createElement(r.Button,{size:"small",type:"danger"},"\u5220\u9664"),n.default.createElement(r.Button,{size:"small",type:"success"},"\u4fee\u6539"))}}],o=[{name:"\u9093\u7d2b\u68cb",age:"12",info:"\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002",edit:""},{name:"\u674e\u6613\u5cf0",age:"32",info:"1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba",edit:""},{name:"\u8303\u51b0\u51b0",age:"23",info:"1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b",edit:""},{name:"\u6768\u5e42",age:"34",info:"1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002",edit:""},{name:"Angelababy",age:"54",info:"1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002",edit:""},{name:"\u5510\u5ae3",age:"12",info:"1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed",edit:""},{name:"\u5434\u4ea6\u51e1",age:"4",info:"1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002",edit:""}];return function(){return n.default.createElement("div",null,n.default.createElement(r.Table,{scroll:{x:1800,y:100},footer:n.default.createElement("div",{style:{height:20}},"\u8fd9\u4e2a\u662ffooter"),columns:a,data:o}))}}(),1072:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);var a=[{title:"\u59d3\u540d",ellipsis:!0,width:50,key:"name"},{title:"\u5e74\u9f84",width:50,style:{color:"red"},key:"age"},{title:"\u5730\u5740",width:50,key:"info"},{title:"\u64cd\u4f5c",key:"edit",width:98,fixed:"right",render:function(e,t,a,o,i){return n.default.createElement("div",null,n.default.createElement(r.Button,{size:"small",type:"danger"},"\u5220\u9664"),n.default.createElement(r.Button,{size:"small",type:"success"},"\u4fee\u6539"))}}],o=[{name:"\u9093\u7d2b\u68cb",age:"12",info:"\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002",edit:""},{name:"\u674e\u6613\u5cf0",age:"32",info:"1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba",edit:""},{name:"\u8303\u51b0\u51b0",age:"23",info:"1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b",edit:""},{name:"\u6768\u5e42",age:"34",info:"1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002",edit:""},{name:"Angelababy",age:"54",info:"1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002",edit:""},{name:"\u5510\u5ae3",age:"12",info:"1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed",edit:""},{name:"\u5434\u4ea6\u51e1",age:"4",info:"1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002",edit:""}];return function(){return n.default.createElement("div",null,n.default.createElement(r.Table,{scroll:{x:1200},bordered:!0,columns:a,data:o}))}}(),1127:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400),a=["edit","value","type","onChange","component"];function o(e){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o(e)}function i(){return i=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},i.apply(this,arguments)}function l(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,a,o,i,l=[],u=!0,d=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;u=!1}else for(;!(u=(r=o.call(t)).done)&&(l.push(r.value),l.length!==n);u=!0);}catch(c){d=!0,a=c}finally{try{if(!u&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(d)throw a}}return l}}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return u(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return u(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function d(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function s(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){m(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function m(e,n,t){return(n=function(e){var n=function(e,n){if("object"!==o(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==o(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"===o(n)?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}var f=[{id:1,gender:"\u7537",name:"\u9093\u7d2b\u68cb",age:"12",info:"\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973"},{id:2,gender:"\u7537",name:"\u674e\u6613\u5cf0",age:"32",info:"1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba"},{id:3,gender:"\u7537",name:"\u8303\u51b0\u51b0",age:"23",info:"1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b"},{id:4,gender:"\u7537",name:"\u6768\u5e42",age:"34",info:"1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002"},{id:5,gender:"\u7537",name:"Angelababy",age:"54",info:"1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002"},{id:6,gender:"\u7537",name:"\u5510\u5ae3",age:"12",info:"1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed"},{id:7,gender:"\u7537",name:"\u5434\u4ea6\u51e1",age:"4",info:"1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002"}],_=function(e){var t=e.edit,o=e.value,u=e.type,c=e.onChange,s=e.component,m=d(e,a),f=l(n.default.useState(t),2),_=f[0],y=f[1],p=n.default.useRef();return n.default.useEffect((function(){_&&p.current.focus()}),[_]),_?"Select"===s?n.default.createElement(r.Select,{ref:p,defaultValue:o,onBlur:function(e){c(e.target.value),y(!1)}},n.default.createElement(r.Select.Option,{value:"\u7537"},"\u7537"),n.default.createElement(r.Select.Option,{value:"\u5973"},"\u5973")):n.default.createElement(r.Input,i({},m,{defaultValue:o,ref:p,type:u||"text",onBlur:function(e){c(e.target.value),y(!1)}})):n.default.createElement("div",{onClick:function(){y(!0)}},o)};return function(){var e,t=l(n.default.useState(f),2),a=t[0],o=t[1];return n.default.createElement("div",null,n.default.createElement(r.Table,{columns:(e=function(e,n){o(a.map((function(t){return t.id===n?e:t})))},[{title:"\u59d3\u540d",ellipsis:!0,key:"name",render:function(t,r,a){return n.default.createElement(_,{value:t,onChange:function(n){e(s(s({},a),{},{name:n}),a.id)}})}},{title:"\u6027\u522b",key:"gender",render:function(t,r,a){return n.default.createElement(_,{value:t,component:"Select",onChange:function(n){e(s(s({},a),{},{gender:n}),a.id)}})}},{title:"\u5e74\u9f84",key:"age",render:function(t,r,a){return n.default.createElement(_,{value:t,type:"number",onChange:function(n){e(s(s({},a),{},{age:n}),a.id)}})}},{title:"\u5730\u5740",key:"info",render:function(t,r,a){return n.default.createElement(_,{value:t,onChange:function(n){e(s(s({},a),{},{info:n}),a.id)}})}}]),data:a}))}}(),1244:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},r=t(3400);function a(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,a,o,i,l=[],u=!0,d=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;u=!1}else for(;!(u=(r=o.call(t)).done)&&(l.push(r.value),l.length!==n);u=!0);}catch(c){d=!0,a=c}finally{try{if(!u&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(d)throw a}}return l}}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return o(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return o(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var i=function(e,t,a){return[{title:"\u59d3\u540d",ellipsis:!0,key:"name",render:function(n,t,r){return r.id===e?a.name:n}},{title:"\u6027\u522b",key:"gender",render:function(n,t,r){return r.id===e?a.gender:n}},{title:"\u5e74\u9f84",key:"age",render:function(n,t,r){return r.id===e?a.age:n}},{key:"id",render:function(a,o,i){var l=a===e;return l?n.default.createElement(n.default.Fragment,null,n.default.createElement(r.Button,{type:"primary",htmlType:"submit"},"Save"),n.default.createElement(r.Button,{type:"danger",onClick:function(){return t({})}},"Cancel")):n.default.createElement(r.Button,{type:"primary",onClick:function(e){e.preventDefault(),t(i)},disabled:void 0!==e&&!l},"Edit")}}]},l=[{id:1,gender:"\u7537",name:"\u9093\u7d2b\u68cb",age:"12"},{id:2,gender:"\u7537",name:"\u674e\u6613\u5cf0",age:"32"},{id:3,gender:"\u7537",name:"\u8303\u51b0\u51b0",age:"23"},{id:4,gender:"\u7537",name:"\u6768\u5e42",age:"34"},{id:5,gender:"\u7537",name:"Angelababy",age:"54"},{id:6,gender:"\u7537",name:"\u5510\u5ae3",age:"12"},{id:7,gender:"\u7537",name:"\u5434\u4ea6\u51e1",age:"4"}];return function(){var e=a(n.default.useState(l),2),t=e[0],o=e[1],u=a(n.default.useState({}),2),d=u[0],c=u[1],s=a(n.default.useState(),2),m=s[0],f=s[1],_=n.default.useRef(),y=function(e){f(e.id),c(e),_.current.setFields(e)};return n.default.createElement(r.Form,{ref:_,onSubmit:function(e){var n=e.current;JSON.stringify(d)!==JSON.stringify(n)?(o(t.map((function(e){return e.id===n.id?n:e}))),f(void 0),r.Notify.success({title:"\u63d0\u4ea4\u6210\u529f\uff01",description:"\u6570\u636e\u5df2\u7ecf\u66f4\u65b0"})):r.Notify.error({title:"\u63d0\u4ea4\u5931\u8d25\uff01",description:"\u8868\u5355\u63d0\u4ea4\u5185\u5bb9\u5e76\u6ca1\u6709\u4fee\u6539\uff01"})},fields:{name:{children:n.default.createElement(r.Input,{placeholder:"\u8bf7\u8f93\u5165\u59d3\u540d"})},age:{children:n.default.createElement(r.Input,{placeholder:"\u8bf7\u8f93\u5165\u5e74\u9f84",type:"number"})},gender:{children:n.default.createElement(r.Select,null,n.default.createElement(r.Select.Option,{value:"\u7537"},"\u7537"),n.default.createElement(r.Select.Option,{value:"\u5973"},"\u5973"))}}},(function(e){var a=e.fields;return n.default.createElement(r.Table,{columns:i(m,y,a),data:t})}))}}()},data:{18:{name:18,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nvar columns = [{\n // title: '\u59d3\u540d',\n ellipsis: true,\n title: function title(_ref) {\n var key = _ref.key;\n return /*#__PURE__*/_react[\"default\"].createElement(\"span\", null, \"\\u5B57\\u6BB5: \", key);\n },\n key: 'name'\n}, {\n title: '\u5e74\u9f84',\n style: {\n color: 'red'\n },\n key: 'age',\n isExpandedButton: true\n}, {\n title: '\u5730\u5740',\n key: 'info'\n}, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: function render(text, key, rowData, rowNumber, columnNumber) {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"danger\"\n }, \"\\u5220\\u9664\"), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"success\"\n }, \"\\u4FEE\\u6539\"));\n }\n}];\nvar dataSource = [{\n name: '\u9093\u7d2b\u68cb',\n age: '12',\n info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002',\n edit: ''\n}, {\n name: '\u674e\u6613\u5cf0',\n age: '32',\n info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba',\n edit: ''\n}, {\n name: '\u8303\u51b0\u51b0',\n age: '23',\n info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b',\n edit: ''\n}, {\n name: '\u6768\u5e42',\n age: '34',\n info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002',\n edit: ''\n}, {\n name: 'Angelababy',\n age: '54',\n info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002',\n edit: ''\n}, {\n name: '\u5510\u5ae3',\n age: '12',\n info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed',\n edit: ''\n}, {\n name: '\u5434\u4ea6\u51e1',\n age: '4',\n info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002',\n edit: ''\n}];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Table, {\n columns: columns,\n data: dataSource\n }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n // title: '\u59d3\u540d',\n ellipsis: true, \n title: ({ key }) => {\n return (\n <span>\u5b57\u6bb5: {key}</span>\n )\n },\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n isExpandedButton:true,\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table columns={columns} data={dataSource} />\n </div>\n);\nexport default Demo"},72:{name:72,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nvar columns = [{\n title: '\u59d3\u540d',\n style: {\n color: 'red'\n },\n key: 'name',\n children: [{\n title: '\u82f1\u6587\u540d\u5b57',\n width: 100,\n key: 'name_en'\n }, {\n title: '\u4e2d\u6587\u540d\u5b57',\n key: 'cnname',\n children: [{\n title: '\u59d3\u540d',\n style: {\n color: 'red'\n },\n key: 'firstname',\n children: [{\n title: '\u59d3',\n key: 'name1',\n width: 80\n }, {\n title: '\u540d',\n key: 'name2',\n width: 80\n }]\n }, {\n title: '\u62fc\u97f3',\n key: 'lastname',\n children: [{\n title: '\u59d3',\n key: 'pinyin1',\n width: 80\n }, {\n title: '\u540d',\n key: 'pinyin2',\n width: 80\n }]\n }]\n }]\n}, {\n title: '\u5176\u5b83',\n key: 'other',\n children: [{\n title: '\u751f\u65e5',\n key: 'birthday',\n width: 150\n }, {\n title: '\u804c\u4e1a',\n key: 'job',\n width: 150\n }]\n}, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 150,\n render: function render(text, key, rowData, rowNumber, columnNumber) {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"danger\"\n }, \"\\u5220\\u9664\"), /*#__PURE__*/_react[\"default\"].createElement(\"span\", null, text, \" \", key, \" - \", rowNumber, \" - \", columnNumber));\n }\n}];\nvar dataSource = [{\n name1: '\u9093',\n name2: '\u7d2b\u68cb',\n pinyin1: 'deng',\n pinyin2: 'ziqi',\n name_en: 'G.E.M.',\n birthday: '1991\u5e748\u670816\u65e5',\n job: '\u5531\u4f5c\u6b4c\u624b\u3001\u4f5c\u66f2\u4eba',\n edit: ''\n}, {\n name1: '\u5468',\n name2: '\u6770\u4f26',\n pinyin1: 'zhou',\n pinyin2: 'jielun',\n name_en: 'Jay Chou',\n birthday: '1979\u5e741\u670818\u65e5',\n job: '\u6b4c\u624b\u3001\u97f3\u4e50\u4eba',\n edit: ''\n}, {\n name1: '\u9093',\n name2: '\u7d2b\u68cb',\n pinyin1: 'deng',\n pinyin2: 'ziqi',\n name_en: 'G.E.M.',\n birthday: '1991\u5e748\u670816\u65e5',\n job: '\u5531\u4f5c\u6b4c\u624b\u3001\u4f5c\u66f2\u4eba',\n edit: ''\n}, {\n name1: '\u5468',\n name2: '\u6770\u4f26',\n pinyin1: 'zhou',\n pinyin2: 'jielun',\n name_en: 'Jay Chou',\n birthday: '1979\u5e741\u670818\u65e5',\n job: '\u6b4c\u624b\u3001\u97f3\u4e50\u4eba',\n edit: ''\n}];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Table, {\n bordered: true,\n columns: columns,\n data: dataSource\n }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n style: { color: 'red' },\n key: 'name', \n children: [\n {\n title: '\u82f1\u6587\u540d\u5b57',\n width: 100,\n key: 'name_en',\n },\n {\n title: '\u4e2d\u6587\u540d\u5b57',\n key: 'cnname',\n children:[\n {\n title: '\u59d3\u540d',\n style: { color: 'red' },\n key: 'firstname',\n children:[\n { title: '\u59d3', key: 'name1', width: 80 },\n { title: '\u540d', key: 'name2', width: 80 },\n ]\n }, {\n title: '\u62fc\u97f3',\n key: 'lastname',\n children:[\n { title: '\u59d3', key: 'pinyin1', width: 80 },\n { title: '\u540d', key: 'pinyin2', width: 80 },\n ],\n },\n ],\n }, \n ]\n }, {\n title: '\u5176\u5b83',\n key: 'other',\n children:[\n { title: '\u751f\u65e5', key: 'birthday', width: 150 },\n { title: '\u804c\u4e1a', key: 'job', width: 150 },\n ],\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 150,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <span>{text} {key} - {rowNumber} - {columnNumber}</span>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name1: '\u9093', name2:'\u7d2b\u68cb', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991\u5e748\u670816\u65e5', job: '\u5531\u4f5c\u6b4c\u624b\u3001\u4f5c\u66f2\u4eba', edit:'' },\n { name1: '\u5468', name2:'\u6770\u4f26', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979\u5e741\u670818\u65e5', job: '\u6b4c\u624b\u3001\u97f3\u4e50\u4eba', edit:'' },\n { name1: '\u9093', name2:'\u7d2b\u68cb', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991\u5e748\u670816\u65e5', job: '\u5531\u4f5c\u6b4c\u624b\u3001\u4f5c\u66f2\u4eba', edit:'' },\n { name1: '\u5468', name2:'\u6770\u4f26', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979\u5e741\u670818\u65e5', job: '\u6b4c\u624b\u3001\u97f3\u4e50\u4eba', edit:'' },\n];\nconst Demo = () => (\n <div>\n <Table bordered columns={columns} data={dataSource} />\n </div>\n);\nexport default Demo"},147:{name:147,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nvar columns = [{\n title: '\u59d3\u540d',\n key: 'name'\n}, {\n title: '\u5e74\u9f84',\n style: {\n color: 'red'\n },\n key: 'age',\n colSpan: 2,\n render: function render(text, key, rowData, rowNum, colNum) {\n var obj = {\n children: text,\n props: {}\n };\n if (rowNum === 0) {\n obj.props.rowSpan = 2;\n }\n if (rowNum === 1) {\n obj.props.rowSpan = 0;\n }\n return obj;\n }\n}, {\n title: '\u5730\u5740',\n key: 'info',\n colSpan: 0\n}, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: function render(text, key, rowData, rowNumber, columnNumber) {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"danger\"\n }, \"\\u5220\\u9664\"), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"success\"\n }, \"\\u4FEE\\u6539\"));\n }\n}];\nvar dataSource = [{\n name: '\u9093\u7d2b\u68cb',\n age: '12',\n info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002',\n edit: ''\n}, {\n name: '\u674e\u6613\u5cf0',\n age: '12',\n info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba',\n edit: ''\n}, {\n name: '\u8303\u51b0\u51b0',\n age: '23',\n info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b',\n edit: ''\n}, {\n name: '\u6768\u5e42',\n age: '34',\n info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002',\n edit: ''\n}];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Table, {\n bordered: true,\n columns: columns,\n data: dataSource\n }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n colSpan: 2,\n render: (text, key, rowData, rowNum, colNum) => {\n const obj = {\n children: text,\n props: {}\n }\n if (rowNum === 0) {\n obj.props.rowSpan = 2;\n }\n if (rowNum === 1) {\n obj.props.rowSpan = 0;\n }\n return obj;\n }\n }, {\n title: '\u5730\u5740',\n key: 'info',\n colSpan: 0,\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '12', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table bordered columns={columns} data={dataSource} />\n </div>\n);\nexport default Demo"},205:{name:205,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nvar columns = [{\n title: '\u59d3\u540d',\n ellipsis: true,\n key: 'name'\n}, {\n title: '\u5e74\u9f84',\n style: {\n color: 'red'\n },\n key: 'age',\n isExpandedButton: true,\n render: function render(text, key, rowData, rowNum, colNum, _ref) {\n var level = _ref.level;\n var obj = {\n children: text,\n props: {}\n };\n if (level === 0) {\n obj.props.colSpan = 2;\n }\n return obj;\n }\n}, {\n title: '\u5e74\u9f842',\n style: {\n color: 'red'\n },\n key: 'age1',\n render: function render(text, key, rowData, rowNum, colNum, _ref2) {\n var level = _ref2.level;\n var obj = {\n children: rowData.age,\n props: {}\n };\n if (level === 0) {\n obj.props.colSpan = 0;\n }\n return obj;\n }\n}, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: function render(text, key, rowData, rowNumber, columnNumber) {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"danger\"\n }, \"\\u5220\\u9664\"), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"success\"\n }, \"\\u4FEE\\u6539\"));\n }\n}];\nvar dataSource = [{\n name: '\u9093\u7d2b\u68cb',\n age: '10',\n id: '1',\n children: [{\n name: '\u9093\u7d2b\u68cb-0-1',\n age: '10',\n id: '1-1',\n children: [{\n name: '\u9093\u7d2b\u68cb-0-1-1',\n age: '10',\n id: '1-1-1',\n children: [{\n name: '\u9093\u7d2b\u68cb-0-1-1-1',\n age: '10',\n id: '-0-1-1-1'\n }, {\n name: '\u9093\u7d2b\u68cb-0-1-1-2',\n age: '10',\n id: '-0-1-1-2'\n }, {\n name: '\u9093\u7d2b\u68cb-0-1-1-3',\n age: '10',\n id: '-0-1-1-3'\n }]\n }, {\n name: '\u9093\u7d2b\u68cb-0-1-2',\n age: '10',\n id: '1-1-2'\n }]\n }, {\n name: '\u9093\u7d2b\u68cb-0-2',\n age: '10',\n id: '1-1'\n }, {\n name: '\u9093\u7d2b\u68cb-0-3',\n age: '10',\n id: '1-1'\n }]\n}, {\n name: '\u674e\u6613\u5cf0',\n age: '32',\n id: '2'\n}, {\n name: '\u8303\u51b0\u51b0',\n age: '23',\n id: '3',\n children: [{\n name: '\u8303\u51b0\u51b00-1',\n age: '23',\n id: '3-1'\n }, {\n name: '\u8303\u51b0\u51b00-2',\n age: '23',\n id: '3-2'\n }, {\n name: '\u8303\u51b0\u51b00-3',\n age: '23',\n id: '3-3'\n }]\n}];\nvar Demo = function Demo() {\n var _React$useState = _react[\"default\"].useState([]),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n expandedRowKeys = _React$useState2[0],\n setExpandedRowKeys = _React$useState2[1];\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Table, {\n rowKey: \"id\",\n expandable: {\n onExpand: function onExpand(key, record) {\n for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {\n rest[_key - 2] = arguments[_key];\n }\n console.log(key, record, rest);\n }\n },\n columns: columns,\n data: dataSource\n }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { Table, Button, Icon } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n key: 'name', \n }, \n {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n isExpandedButton:true,\n render: (text, key, rowData, rowNum, colNum,{level}) => {\n const obj = {\n children: text,\n props: {}\n }\n if (level === 0) {\n obj.props.colSpan = 2;\n }\n return obj;\n }\n }, \n {\n title: '\u5e74\u9f842',\n style: { color: 'red' },\n key: 'age1',\n render: (text, key, rowData, rowNum, colNum,{level}) => {\n const obj = {\n children: rowData.age,\n props: {}\n }\n if (level === 0) {\n obj.props.colSpan = 0;\n }\n return obj;\n }\n }, \n {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { \n name: '\u9093\u7d2b\u68cb', \n age: '10', \n id: '1', \n children: [\n {\n name: '\u9093\u7d2b\u68cb-0-1', \n age: '10', \n id: '1-1', \n children: [\n { \n name: '\u9093\u7d2b\u68cb-0-1-1', \n age: '10', \n id: '1-1-1',\n children: [\n {name: '\u9093\u7d2b\u68cb-0-1-1-1', age: '10', id: '-0-1-1-1'},\n {name: '\u9093\u7d2b\u68cb-0-1-1-2', age: '10', id: '-0-1-1-2'},\n {name: '\u9093\u7d2b\u68cb-0-1-1-3', age: '10', id: '-0-1-1-3'},\n ]\n },\n { name: '\u9093\u7d2b\u68cb-0-1-2', age: '10', id: '1-1-2',}\n ]\n },\n {name: '\u9093\u7d2b\u68cb-0-2', age: '10', id: '1-1'},\n {name: '\u9093\u7d2b\u68cb-0-3', age: '10', id: '1-1'},\n ]\n },\n { name: '\u674e\u6613\u5cf0', age: '32', id: '2',\n },\n { name: '\u8303\u51b0\u51b0', age: '23', id: '3', \n children: [\n {name: '\u8303\u51b0\u51b00-1', age: '23', id: '3-1'},\n {name: '\u8303\u51b0\u51b00-2', age: '23', id: '3-2'},\n {name: '\u8303\u51b0\u51b00-3', age: '23', id: '3-3'},\n ]\n },\n];\nconst Demo = () => {\n const [expandedRowKeys, setExpandedRowKeys] = React.useState([])\n return (\n <div>\n <Table \n rowKey=\"id\"\n expandable={{\n onExpand:(key,record,...rest)=>{\n console.log(key,record,rest)\n }\n }}\n columns={columns}\n data={dataSource}\n />\n </div>\n )\n};\nexport default Demo"},319:{name:319,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nvar columns = [{\n title: '\u59d3\u540d',\n ellipsis: true,\n key: 'name'\n}, {\n title: '\u5e74\u9f84',\n style: {\n color: 'red'\n },\n key: 'age',\n level: 2\n}, {\n title: '\u5e74\u9f842',\n style: {\n color: 'red'\n },\n key: 'age',\n level: 2\n}, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: function render(text, key, rowData, rowNumber, columnNumber) {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"danger\"\n }, \"\\u5220\\u9664\"), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"success\"\n }, \"\\u4FEE\\u6539\"));\n }\n}];\nvar dataSource = [{\n name: '\u9093\u7d2b\u68cb',\n age: '10',\n id: '1',\n children: [{\n name: '\u9093\u7d2b\u68cb-0-1',\n age: '10',\n id: '1-1',\n children: [{\n name: '\u9093\u7d2b\u68cb-0-1-1',\n age: '10',\n id: '1-1-1',\n children: [{\n name: '\u9093\u7d2b\u68cb-0-1-1-1',\n age: '10',\n id: '-0-1-1-1'\n }, {\n name: '\u9093\u7d2b\u68cb-0-1-1-2',\n age: '10',\n id: '-0-1-1-2'\n }, {\n name: '\u9093\u7d2b\u68cb-0-1-1-3',\n age: '10',\n id: '-0-1-1-3'\n }]\n }, {\n name: '\u9093\u7d2b\u68cb-0-1-2',\n age: '10',\n id: '1-1-2'\n }]\n }, {\n name: '\u9093\u7d2b\u68cb-0-2',\n age: '10',\n id: '1-1'\n }, {\n name: '\u9093\u7d2b\u68cb-0-3',\n age: '10',\n id: '1-1'\n }]\n}, {\n name: '\u674e\u6613\u5cf0',\n age: '32',\n id: '2'\n}, {\n name: '\u8303\u51b0\u51b0',\n age: '23',\n id: '3',\n children: [{\n name: '\u8303\u51b0\u51b00-1',\n age: '23',\n id: '3-1'\n }, {\n name: '\u8303\u51b0\u51b00-2',\n age: '23',\n id: '3-2'\n }, {\n name: '\u8303\u51b0\u51b00-3',\n age: '23',\n id: '3-3'\n }]\n}];\nvar Demo = function Demo() {\n var _React$useState = _react[\"default\"].useState([]),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n expandedRowKeys = _React$useState2[0],\n setExpandedRowKeys = _React$useState2[1];\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Table, {\n rowKey: \"id\",\n columns: columns,\n data: dataSource,\n isAutoMergeRowSpan: true\n }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { Table, Button, Icon } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n key: 'name', \n }, \n {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n level:2\n }, \n {\n title: '\u5e74\u9f842',\n style: { color: 'red' },\n key: 'age',\n level:2\n }, \n {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { \n name: '\u9093\u7d2b\u68cb', \n age: '10', \n id: '1', \n children: [\n {\n name: '\u9093\u7d2b\u68cb-0-1', \n age: '10', \n id: '1-1', \n children: [\n { \n name: '\u9093\u7d2b\u68cb-0-1-1', \n age: '10', \n id: '1-1-1',\n children: [\n {name: '\u9093\u7d2b\u68cb-0-1-1-1', age: '10', id: '-0-1-1-1'},\n {name: '\u9093\u7d2b\u68cb-0-1-1-2', age: '10', id: '-0-1-1-2'},\n {name: '\u9093\u7d2b\u68cb-0-1-1-3', age: '10', id: '-0-1-1-3'},\n ]\n },\n { name: '\u9093\u7d2b\u68cb-0-1-2', age: '10', id: '1-1-2',}\n ]\n },\n {name: '\u9093\u7d2b\u68cb-0-2', age: '10', id: '1-1'},\n {name: '\u9093\u7d2b\u68cb-0-3', age: '10', id: '1-1'},\n ]\n },\n { name: '\u674e\u6613\u5cf0', age: '32', id: '2',\n },\n { name: '\u8303\u51b0\u51b0', age: '23', id: '3', \n children: [\n {name: '\u8303\u51b0\u51b00-1', age: '23', id: '3-1'},\n {name: '\u8303\u51b0\u51b00-2', age: '23', id: '3-2'},\n {name: '\u8303\u51b0\u51b00-3', age: '23', id: '3-3'},\n ]\n },\n];\nconst Demo = () => {\n const [expandedRowKeys, setExpandedRowKeys] = React.useState([])\n return (\n <div>\n <Table \n rowKey=\"id\"\n columns={columns}\n data={dataSource}\n isAutoMergeRowSpan={true}\n />\n </div>\n )\n};\nexport default Demo"},412:{name:412,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nvar columns = [{\n title: '\u59d3\u540d',\n style: {\n color: 'red'\n },\n key: 'name'\n}, {\n title: '\u5e74\u9f84',\n key: 'age'\n}, {\n title: '\u5730\u5740',\n key: 'info'\n}, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: function render(text, key, rowData, rowNumber, columnNumber) {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"danger\"\n }, \"\\u5220\\u9664\"), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"success\"\n }, \"\\u4FEE\\u6539\"));\n }\n}];\nvar dataSource = [{\n name: '\u9093\u7d2b\u68cb',\n age: '12',\n info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002',\n edit: ''\n}, {\n name: '\u674e\u6613\u5cf0',\n age: '32',\n info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba',\n edit: ''\n}, {\n name: '\u8303\u51b0\u51b0',\n age: '23',\n info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b',\n edit: ''\n}, {\n name: '\u6768\u5e42',\n age: '34',\n info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002',\n edit: ''\n}, {\n name: 'Angelababy',\n age: '54',\n info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002',\n edit: ''\n}, {\n name: '\u5510\u5ae3',\n age: '12',\n info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed',\n edit: ''\n}, {\n name: '\u5434\u4ea6\u51e1',\n age: '4',\n info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002',\n edit: ''\n}];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Table, {\n title: /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, \"\\u8FD9\\u91CC\\u662F\\u6807\\u9898\\uFF0C\\u6709\\u8FB9\\u6846\\uFF0C\", /*#__PURE__*/_react[\"default\"].createElement(\"b\", null, \"bordered=true\")),\n footer: /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, \"\\u8FD9\\u91CC\\u662F\\u9875\\u811A Footer\\uFF0C\\u6709\\u8FB9\\u6846\\uFF0C\", /*#__PURE__*/_react[\"default\"].createElement(\"b\", null, \"bordered=true\")),\n bordered: true,\n columns: columns,\n data: dataSource\n }), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Table, {\n title: \"\\u8FD9\\u91CC\\u662F\\u6807\\u9898\\uFF0C\\u6CA1\\u6709\\u8FB9\\u6846\",\n footer: \"\\u8FD9\\u91CC\\u662F\\u9875\\u811A Footer\\uFF0C\\u6CA1\\u6709\\u8FB9\\u6846\",\n columns: columns,\n data: dataSource\n }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n style: { color: 'red' },\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table\n title={(\n <div>\n \u8fd9\u91cc\u662f\u6807\u9898\uff0c\u6709\u8fb9\u6846\uff0c<b>bordered=true</b>\n </div>\n )}\n footer={(\n <div>\n \u8fd9\u91cc\u662f\u9875\u811a Footer\uff0c\u6709\u8fb9\u6846\uff0c<b>bordered=true</b>\n </div>\n )}\n bordered columns={columns} data={dataSource} />\n <Table title=\"\u8fd9\u91cc\u662f\u6807\u9898\uff0c\u6ca1\u6709\u8fb9\u6846\" footer=\"\u8fd9\u91cc\u662f\u9875\u811a Footer\uff0c\u6ca1\u6709\u8fb9\u6846\" columns={columns} data={dataSource} />\n </div>\n);\nexport default Demo"},470:{name:470,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nvar columns = [{\n title: '\u59d3\u540d',\n style: {\n color: 'red'\n },\n key: 'name'\n}, {\n title: '\u5e74\u9f84',\n key: 'age'\n}, {\n title: '\u5730\u5740',\n key: 'info'\n}, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: function render(text, key, rowData, rowNumber, columnNumber) {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"danger\"\n }, \"\\u5220\\u9664\"), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"success\"\n }, \"\\u4FEE\\u6539\"));\n }\n}];\nvar dataSource = [{\n name: '\u9093\u7d2b\u68cb',\n age: '12',\n info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002',\n edit: ''\n}, {\n name: '\u674e\u6613\u5cf0',\n age: '32',\n info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba',\n edit: ''\n}, {\n name: '\u8303\u51b0\u51b0',\n age: '23',\n info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b',\n edit: ''\n}, {\n name: '\u6768\u5e42',\n age: '34',\n info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002',\n edit: ''\n}, {\n name: 'Angelababy',\n age: '54',\n info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002',\n edit: ''\n}, {\n name: '\u5510\u5ae3',\n age: '12',\n info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed',\n edit: ''\n}, {\n name: '\u5434\u4ea6\u51e1',\n age: '4',\n info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002',\n edit: ''\n}];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Table, {\n title: \"\\u8868\\u5185\\u5BB9 tbody \\u5355\\u5143\\u683C\\u70B9\\u51FB\\u56DE\\u8C03\\u4E8B\\u4EF6\",\n onCell: function onCell(rowData, _ref) {\n var rowNum = _ref.rowNum,\n colNum = _ref.colNum;\n console.log('--\x3e3', rowData);\n console.log('--\x3e4', rowNum);\n console.log('--\x3e5', colNum);\n _uiw.Notify.info({\n description: \"\\u4F60\\u70B9\\u51FB\\u4E86\\\"\".concat(rowData.name, \"\\\"\\u3002\")\n });\n },\n columns: columns,\n data: dataSource\n }), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Table, {\n title: \"\\u8868\\u5934\\u5355\\u5143\\u683C\\u70B9\\u51FB\\u56DE\\u8C03\\u4E8B\\u4EF6\",\n onCellHead: function onCellHead(rowData, rowNum, columnNumber) {\n console.log('--\x3e3', rowData);\n console.log('--\x3e4', rowNum);\n console.log('--\x3e5', columnNumber);\n _uiw.Notify.info({\n description: \"\\u4F60\\u70B9\\u51FB\\u4E86\\\"\".concat(rowData.title, \"\\\"\\u3002\")\n });\n },\n onCell: function onCell(rowData, _ref2) {\n var rowNum = _ref2.rowNum,\n colNum = _ref2.colNum;\n console.log('--\x3e3', rowData);\n console.log('--\x3e4', rowNum);\n console.log('--\x3e5', colNum);\n _uiw.Notify.info({\n description: \"\\u4F60\\u70B9\\u51FB\\u4E86\\\"\".concat(rowData.name, \"\\\"\\u3002\")\n });\n },\n columns: columns,\n data: dataSource\n }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { Table, Button, Notify } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n style: { color: 'red' },\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table\n title=\"\u8868\u5185\u5bb9 tbody \u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6\"\n onCell={(rowData, { rowNum, colNum }) => {\n console.log('--\x3e3', rowData);\n console.log('--\x3e4', rowNum);\n console.log('--\x3e5', colNum);\n Notify.info({ description: `\u4f60\u70b9\u51fb\u4e86\"${rowData.name}\"\u3002` });\n }}\n columns={columns}\n data={dataSource}\n />\n <Table\n title=\"\u8868\u5934\u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6\"\n onCellHead={(rowData, rowNum, columnNumber) => {\n console.log('--\x3e3', rowData);\n console.log('--\x3e4', rowNum);\n console.log('--\x3e5', columnNumber);\n Notify.info({ description: `\u4f60\u70b9\u51fb\u4e86\"${rowData.title}\"\u3002` });\n }}\n onCell={(rowData, { rowNum, colNum }) => {\n console.log('--\x3e3', rowData);\n console.log('--\x3e4', rowNum);\n console.log('--\x3e5', colNum);\n Notify.info({ description: `\u4f60\u70b9\u51fb\u4e86\"${rowData.name}\"\u3002` });\n }}\n columns={columns}\n data={dataSource}\n />\n </div>\n);\nexport default Demo"},543:{name:543,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Demo = function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Table, {\n bordered: true\n }, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("th", null, "\\u540D\\u79F0"), /*#__PURE__*/_react["default"].createElement("th", null, "\\u6570\\u91CF"), /*#__PURE__*/_react["default"].createElement("th", null, "\\u8BE6\\u60C5"), /*#__PURE__*/_react["default"].createElement("th", null, "\\u4EF7\\u683C"))), /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "\\u571F\\u8C46"), /*#__PURE__*/_react["default"].createElement("td", null, "18"), /*#__PURE__*/_react["default"].createElement("td", null, "2009/01/12"), /*#__PURE__*/_react["default"].createElement("td", null, "\\uFFE586,000")), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "\\u841D\\u535C"), /*#__PURE__*/_react["default"].createElement("td", null, "18"), /*#__PURE__*/_react["default"].createElement("td", null, "2009/01/12"), /*#__PURE__*/_react["default"].createElement("td", null, "\\uFFE586,000")), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "\\u9999\\u8549"), /*#__PURE__*/_react["default"].createElement("td", null, "18"), /*#__PURE__*/_react["default"].createElement("td", null, "2009/01/12"), /*#__PURE__*/_react["default"].createElement("td", null, "\\uFFE586,000")), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "\\u829D\\u9EBB"), /*#__PURE__*/_react["default"].createElement("td", null, "18"), /*#__PURE__*/_react["default"].createElement("td", null, "2009/01/12"), /*#__PURE__*/_react["default"].createElement("td", null, "\\uFFE586,000")))), /*#__PURE__*/_react["default"].createElement(_uiw.Table, null, /*#__PURE__*/_react["default"].createElement("caption", null, "\\u6CA1\\u6709\\u8FB9\\u6846"), /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("th", null, "\\u540D\\u79F0"), /*#__PURE__*/_react["default"].createElement("th", null, "\\u6570\\u91CF"), /*#__PURE__*/_react["default"].createElement("th", null, "\\u8BE6\\u60C5"), /*#__PURE__*/_react["default"].createElement("th", null, "\\u4EF7\\u683C"))), /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "\\u571F\\u8C46"), /*#__PURE__*/_react["default"].createElement("td", null, "18"), /*#__PURE__*/_react["default"].createElement("td", null, "2009/01/12"), /*#__PURE__*/_react["default"].createElement("td", null, "\\uFFE586,000")), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "\\u841D\\u535C"), /*#__PURE__*/_react["default"].createElement("td", null, "18"), /*#__PURE__*/_react["default"].createElement("td", null, "2009/01/12"), /*#__PURE__*/_react["default"].createElement("td", null, "\\uFFE586,000")), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "\\u9999\\u8549"), /*#__PURE__*/_react["default"].createElement("td", null, "18"), /*#__PURE__*/_react["default"].createElement("td", null, "2009/01/12"), /*#__PURE__*/_react["default"].createElement("td", null, "\\uFFE586,000")), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "\\u829D\\u9EBB"), /*#__PURE__*/_react["default"].createElement("td", null, "18"), /*#__PURE__*/_react["default"].createElement("td", null, "2009/01/12"), /*#__PURE__*/_react["default"].createElement("td", null, "\\uFFE586,000")))));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Table, Button } from 'uiw';\n\nconst Demo = () => (\n <div>\n <Table bordered>\n <thead>\n <tr>\n <th>\u540d\u79f0</th>\n <th>\u6570\u91cf</th>\n <th>\u8be6\u60c5</th>\n <th>\u4ef7\u683c</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>\u571f\u8c46</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u841d\u535c</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u9999\u8549</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u829d\u9ebb</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n </tbody>\n </Table>\n <Table>\n <caption>\u6ca1\u6709\u8fb9\u6846</caption>\n <thead>\n <tr>\n <th>\u540d\u79f0</th>\n <th>\u6570\u91cf</th>\n <th>\u8be6\u60c5</th>\n <th>\u4ef7\u683c</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>\u571f\u8c46</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u841d\u535c</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u9999\u8549</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u829d\u9ebb</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n </tbody>\n </Table>\n </div>\n);\nexport default Demo"},629:{name:629,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n _inherits(Demo, _React$Component);\n var _super = _createSuper(Demo);\n function Demo(props) {\n var _this;\n _classCallCheck(this, Demo);\n _this = _super.call(this, props);\n _this.state = {\n // \u9009\u4e2d\u7684 key\n checked: [],\n loading: false,\n dataSource: [{\n name: \'\u9093\u7d2b\u68cb\',\n age: \'12\',\n info: \'\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002\'\n }, {\n name: \'\u674e\u6613\u5cf0\',\n age: \'32\',\n info: \'1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\'\n }, {\n name: \'\u8303\u51b0\u51b0\',\n age: \'23\',\n info: \'1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b\'\n }, {\n name: \'\u6768\u5e42\',\n age: \'34\',\n info: \'1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002\'\n }, {\n name: \'Angelababy\',\n age: \'54\',\n info: \'1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002\'\n }, {\n name: \'\u5510\u5ae3\',\n age: \'12\',\n info: \'1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed\'\n }, {\n name: \'\u5434\u4ea6\u51e1\',\n age: \'4\',\n info: \'1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002\'\n }],\n columns: [{\n title: function title(data, rowNum, colNum) {\n var indeterminate = _this.state.dataSource.length !== _this.state.checked.length && _this.state.checked.length > 0;\n var checked = _this.state.dataSource.length === _this.state.checked.length;\n return /*#__PURE__*/_react["default"].createElement(_uiw.Checkbox, {\n checked: checked,\n indeterminate: indeterminate,\n onClick: function onClick(evn) {\n var checked = _this.state.dataSource.map(function (item, idx) {\n return idx;\n });\n if (!evn.target.checked) {\n checked = [];\n }\n _this.setState({\n checked: checked\n });\n }\n });\n },\n key: \'checked\',\n render: function render(text, key, rowData, rowNumber, columnNumber) {\n return /*#__PURE__*/_react["default"].createElement(_uiw.Checkbox, {\n checked: rowData.checked,\n onClick: _this.onClickCheckedItem.bind(_assertThisInitialized(_this), rowNumber)\n });\n }\n }, {\n title: \'\u540d\u5b57\',\n key: \'name\'\n }, {\n title: \'\u5e74\u9f84\',\n key: \'age\'\n }, {\n title: \'\u5730\u5740\',\n key: \'info\'\n }]\n };\n return _this;\n }\n _createClass(Demo, [{\n key: "onClickCheckedItem",\n value: function onClickCheckedItem(rowNumber, env) {\n var checked = this.state.checked;\n var isChecked = env.target.checked;\n if (isChecked) {\n // \u6dfb\u52a0\u5230\u9009\u4e2d\u6570\u7ec4\u4e2d\n checked.push(rowNumber);\n checked = checked.sort(function (a, b) {\n return a - b;\n });\n } else {\n // \u5220\u9664\u9009\u4e2d\u9879\n checked.splice(checked.indexOf(rowNumber), 1);\n }\n this.setState({\n checked: checked\n });\n }\n }, {\n key: "render",\n value: function render() {\n var _this2 = this;\n var checked = this.state.checked;\n var dataSource = this.state.dataSource.map(function (item, idx) {\n var isChecked = checked.indexOf(idx) > -1;\n return _objectSpread({\n checked: isChecked\n }, item);\n });\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Loader, {\n loading: this.state.loading,\n style: {\n display: \'block\'\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Table, {\n columns: this.state.columns,\n data: dataSource,\n footer: /*#__PURE__*/_react["default"].createElement(_uiw.Pagination, {\n current: 2,\n pageSize: 10,\n total: 30,\n divider: true,\n onChange: function onChange(current, total, pageSize) {\n _this2.setState({\n loading: true\n });\n var timer = setTimeout(function () {\n // \u6a21\u62df\u53d8\u66f4\u6570\u636e\n var dataSource = _this2.state.dataSource.map(function (item) {\n item.age = Number(item.age) + current;\n return item;\n });\n // \u7ffb\u9875 API \u83b7\u53d6\u6570\u636e\n _this2.setState({\n checked: [],\n dataSource: dataSource,\n loading: false\n });\n }, 2000);\n }\n })\n })));\n }\n }]);\n return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Table, Button, Checkbox, Pagination, Loader } from 'uiw';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n // \u9009\u4e2d\u7684 key\n checked: [],\n loading: false,\n dataSource: [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002' },\n ],\n columns: [\n {\n title: (data, rowNum, colNum) => {\n const indeterminate = this.state.dataSource.length !== this.state.checked.length && this.state.checked.length > 0;\n const checked = this.state.dataSource.length === this.state.checked.length;\n return (\n <Checkbox\n checked={checked}\n indeterminate={indeterminate}\n onClick={(evn) => {\n let checked = this.state.dataSource.map((item, idx) => idx);\n if(!evn.target.checked) {\n checked = [];\n }\n this.setState({ checked });\n }}\n />\n );\n },\n key: 'checked',\n render: (text, key, rowData, rowNumber, columnNumber) => {\n return (\n <Checkbox checked={rowData.checked} onClick={this.onClickCheckedItem.bind(this, rowNumber)} />\n );\n }\n }, {\n title: '\u540d\u5b57',\n key: 'name',\n }, {\n title: '\u5e74\u9f84',\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n },\n ]\n }\n }\n onClickCheckedItem(rowNumber, env) {\n let { checked } = this.state;\n const isChecked = env.target.checked;\n if(isChecked) {\n // \u6dfb\u52a0\u5230\u9009\u4e2d\u6570\u7ec4\u4e2d\n checked.push(rowNumber)\n checked = checked.sort((a, b) => a - b);\n } else {\n // \u5220\u9664\u9009\u4e2d\u9879\n checked.splice(checked.indexOf(rowNumber), 1);\n }\n this.setState({ checked });\n }\n render() {\n const { checked } = this.state;\n const dataSource = this.state.dataSource.map((item, idx) => {\n const isChecked = checked.indexOf(idx) > -1;\n return { checked: isChecked, ...item };\n });\n return (\n <div>\n <Loader loading={this.state.loading} style={{ display: 'block' }}>\n <Table\n columns={this.state.columns}\n data={dataSource}\n footer={\n <Pagination\n current={2}\n pageSize={10}\n total={30}\n divider\n onChange={(current, total, pageSize) => {\n this.setState({ loading: true });\n const timer = setTimeout(() => {\n // \u6a21\u62df\u53d8\u66f4\u6570\u636e\n const dataSource = this.state.dataSource.map(item => {\n item.age = Number(item.age) + current;\n return item;\n });\n // \u7ffb\u9875 API \u83b7\u53d6\u6570\u636e\n this.setState({ checked: [], dataSource, loading: false });\n }, 2000);\n }}\n />\n }\n />\n </Loader>\n </div>\n );\n }\n}\nexport default Demo"},743:{name:743,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nvar columns = [{\n title: 'Name',\n key: 'name',\n render: function render(text) {\n return /*#__PURE__*/_react[\"default\"].createElement(\"a\", null, text);\n },\n width: 150\n}, {\n title: 'Age',\n key: 'age',\n width: 80\n}, {\n title: 'Address',\n key: 'address',\n ellipsis: true,\n render: function render(address) {\n return /*#__PURE__*/_react[\"default\"].createElement(_uiw.Tooltip, {\n placement: \"topLeft\",\n content: address\n }, address);\n }\n}, {\n title: 'Long Column Long Column Long Column',\n key: 'address',\n ellipsis: true,\n render: function render(address) {\n return /*#__PURE__*/_react[\"default\"].createElement(_uiw.Tooltip, {\n placement: \"topLeft\",\n content: address\n }, address);\n }\n}, {\n title: 'Long Column Long Column',\n key: 'address',\n ellipsis: true,\n render: function render(address) {\n return /*#__PURE__*/_react[\"default\"].createElement(_uiw.Tooltip, {\n placement: \"topLeft\",\n content: address\n }, address);\n }\n}, {\n title: 'Long Column',\n key: 'address',\n ellipsis: true,\n render: function render(address) {\n return /*#__PURE__*/_react[\"default\"].createElement(_uiw.Tooltip, {\n placement: \"topLeft\",\n content: address\n }, address);\n }\n}];\nvar data = [{\n name: '\u9093\u7d2b\u68cb',\n age: '12',\n address: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002'\n}, {\n name: '\u674e\u6613\u5cf0',\n age: '32',\n address: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba'\n}, {\n name: '\u8303\u51b0\u51b0',\n age: '23',\n address: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b'\n}, {\n name: '\u6768\u5e42',\n age: '34',\n address: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002'\n}, {\n name: 'Angelababy',\n age: '54',\n address: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002'\n}, {\n name: '\u5510\u5ae3',\n age: '12',\n address: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed'\n}, {\n name: '\u5434\u4ea6\u51e1',\n age: '4',\n address: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002'\n}];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Table, {\n title: \"\\u8868\\u5185\\u5BB9 tbody \\u5355\\u5143\\u683C\\u70B9\\u51FB\\u56DE\\u8C03\\u4E8B\\u4EF6\",\n columns: columns,\n data: data\n }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { Table, Button, Notify, Tooltip } from 'uiw';\n\nconst columns = [\n {\n title: 'Name',\n key: 'name',\n render: text => <a>{text}</a>,\n width: 150,\n },\n {\n title: 'Age',\n key: 'age',\n width: 80,\n },\n {\n title: 'Address',\n key: 'address',\n ellipsis: true,\n render: address => (\n <Tooltip placement=\"topLeft\" content={address}>\n {address}\n </Tooltip>\n ),\n },\n {\n title: 'Long Column Long Column Long Column',\n key: 'address',\n ellipsis: true,\n render: address => (\n <Tooltip placement=\"topLeft\" content={address}>\n {address}\n </Tooltip>\n ),\n },\n {\n title: 'Long Column Long Column',\n key: 'address',\n ellipsis: true,\n render: address => (\n <Tooltip placement=\"topLeft\" content={address}>\n {address}\n </Tooltip>\n ),\n },\n {\n title: 'Long Column',\n key: 'address',\n ellipsis: true,\n render: address => {\n return (\n <Tooltip placement=\"topLeft\" content={address}>\n {address}\n </Tooltip>\n )\n },\n },\n];\n\nconst data = [\n { name: '\u9093\u7d2b\u68cb', age: '12', address: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002' },\n { name: '\u674e\u6613\u5cf0', age: '32', address: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba' },\n { name: '\u8303\u51b0\u51b0', age: '23', address: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b' },\n { name: '\u6768\u5e42', age: '34', address: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002' },\n { name: 'Angelababy', age: '54', address: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002' },\n { name: '\u5510\u5ae3', age: '12', address: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed' },\n { name: '\u5434\u4ea6\u51e1', age: '4', address: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002' },\n];\n\nconst Demo = () => (\n <div>\n <Table\n title=\"\u8868\u5185\u5bb9 tbody \u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6\"\n columns={columns}\n data={data}\n />\n </div>\n);\nexport default Demo"},827:{name:827,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar columns = [{\n ellipsis: true,\n title: \'\u59d3\u540d\',\n key: \'name\'\n}, {\n title: \'\u5e74\u9f84\',\n key: \'age\'\n}, {\n title: \'\u5730\u5740\',\n key: \'info\'\n}, {\n title: \'\u64cd\u4f5c\',\n key: \'edit\',\n width: 98,\n render: function render(text, key, rowData, rowNumber, columnNumber) {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n size: "small",\n type: "danger"\n }, "\\u5220\\u9664"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n size: "small",\n type: "success"\n }, "\\u4FEE\\u6539"));\n }\n}];\nvar dataSource = [];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Table, {\n columns: columns,\n data: dataSource,\n empty: /*#__PURE__*/_react["default"].createElement(_uiw.Empty, null)\n }));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Table, Button, Empty } from 'uiw';\n\nconst columns = [\n {\n ellipsis: true, \n title: '\u59d3\u540d',\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [];\nconst Demo = () => (\n <div>\n <Table\n columns={columns}\n data={dataSource}\n empty={<Empty />} \n />\n </div>\n);\nexport default Demo"},869:{name:869,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar columns = [{\n title: \'\u59d3\u540d\',\n ellipsis: true,\n key: \'name\'\n}, {\n title: \'\u5e74\u9f84\',\n style: {\n color: \'red\'\n },\n key: \'age\'\n}, {\n title: \'\u64cd\u4f5c\',\n key: \'edit\',\n width: 98,\n render: function render(text, key, rowData, rowNumber, columnNumber) {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n size: "small",\n type: "danger"\n }, "\\u5220\\u9664"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n size: "small",\n type: "success"\n }, "\\u4FEE\\u6539"));\n }\n}];\nvar dataSource = [{\n name: \'\u9093\u7d2b\u68cb\',\n age: \'10\',\n id: \'1\'\n}, {\n name: \'\u674e\u6613\u5cf0\',\n age: \'32\',\n id: \'2\'\n}, {\n name: \'\u8303\u51b0\u51b0\',\n age: \'23\',\n id: \'3\'\n}];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Table, {\n rowKey: "id",\n expandable: {\n expandedRowRender: function expandedRowRender(record, index, expanded) {\n return /*#__PURE__*/_react["default"].createElement("div", null, record.name);\n },\n // defaultExpandAllRows: true,\n rowExpandable: function rowExpandable(r) {\n return r.name !== \'\u674e\u6613\u5cf0\';\n },\n expandIcon: function expandIcon(expanded) {\n return expanded ? /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n type: "minus-circle-o"\n }) : /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n type: "plus-circle-o"\n });\n },\n defaultExpandedRowKeys: ["1"]\n },\n columns: columns,\n data: dataSource\n }));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Table, Button, Icon } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n key: 'name', \n }, \n {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n }, \n {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '10', id: '1'},\n { name: '\u674e\u6613\u5cf0', age: '32', id: '2'},\n { name: '\u8303\u51b0\u51b0', age: '23', id: '3'},\n];\nconst Demo = () => (\n <div>\n <Table \n rowKey=\"id\"\n expandable={{\n expandedRowRender: (record, index, expanded)=>{\n return <div>{record.name}</div>\n },\n // defaultExpandAllRows: true,\n rowExpandable: (r)=>r.name!=='\u674e\u6613\u5cf0',\n expandIcon: (expanded) => expanded ? <Icon type=\"minus-circle-o\"/> : <Icon type=\"plus-circle-o\"/>,\n defaultExpandedRowKeys: [\"1\"]\n }}\n columns={columns} \n data={dataSource} \n />\n </div>\n);\nexport default Demo"},928:{name:928,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nvar columns = [{\n title: '\u59d3\u540d',\n ellipsis: true,\n key: 'name'\n}, {\n title: '\u5e74\u9f84',\n style: {\n color: 'red'\n },\n key: 'age'\n}, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: function render(text, key, rowData, rowNumber, columnNumber) {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"danger\"\n }, \"\\u5220\\u9664\"), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"success\"\n }, \"\\u4FEE\\u6539\"));\n }\n}];\nvar dataSource = [{\n name: '\u9093\u7d2b\u68cb',\n age: '10',\n id: '1',\n children: [{\n name: '\u9093\u7d2b\u68cb-0-1',\n age: '10',\n id: '1-1',\n children: [{\n name: '\u9093\u7d2b\u68cb-0-1-1',\n age: '10',\n id: '1-1-1',\n children: [{\n name: '\u9093\u7d2b\u68cb-0-1-1-1',\n age: '10',\n id: '-0-1-1-1'\n }, {\n name: '\u9093\u7d2b\u68cb-0-1-1-2',\n age: '10',\n id: '-0-1-1-2'\n }, {\n name: '\u9093\u7d2b\u68cb-0-1-1-3',\n age: '10',\n id: '-0-1-1-3'\n }]\n }, {\n name: '\u9093\u7d2b\u68cb-0-1-2',\n age: '10',\n id: '1-1-2'\n }]\n }, {\n name: '\u9093\u7d2b\u68cb-0-2',\n age: '10',\n id: '1-1'\n }, {\n name: '\u9093\u7d2b\u68cb-0-3',\n age: '10',\n id: '1-1'\n }]\n}, {\n name: '\u674e\u6613\u5cf0',\n age: '32',\n id: '2'\n}, {\n name: '\u8303\u51b0\u51b0',\n age: '23',\n id: '3',\n children: [{\n name: '\u8303\u51b0\u51b00-1',\n age: '23',\n id: '3-1'\n }, {\n name: '\u8303\u51b0\u51b00-2',\n age: '23',\n id: '3-2'\n }, {\n name: '\u8303\u51b0\u51b00-3',\n age: '23',\n id: '3-3'\n }]\n}];\nvar Demo = function Demo() {\n var _React$useState = _react[\"default\"].useState([]),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n expandedRowKeys = _React$useState2[0],\n setExpandedRowKeys = _React$useState2[1];\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Table, {\n rowKey: \"id\",\n columns: columns,\n data: dataSource\n }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { Table, Button, Icon } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n key: 'name', \n }, \n {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n }, \n {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { \n name: '\u9093\u7d2b\u68cb', \n age: '10', \n id: '1', \n children: [\n {\n name: '\u9093\u7d2b\u68cb-0-1', \n age: '10', \n id: '1-1', \n children: [\n { \n name: '\u9093\u7d2b\u68cb-0-1-1', \n age: '10', \n id: '1-1-1',\n children: [\n {name: '\u9093\u7d2b\u68cb-0-1-1-1', age: '10', id: '-0-1-1-1'},\n {name: '\u9093\u7d2b\u68cb-0-1-1-2', age: '10', id: '-0-1-1-2'},\n {name: '\u9093\u7d2b\u68cb-0-1-1-3', age: '10', id: '-0-1-1-3'},\n ]\n },\n { name: '\u9093\u7d2b\u68cb-0-1-2', age: '10', id: '1-1-2',}\n ]\n },\n {name: '\u9093\u7d2b\u68cb-0-2', age: '10', id: '1-1'},\n {name: '\u9093\u7d2b\u68cb-0-3', age: '10', id: '1-1'},\n ]\n },\n { name: '\u674e\u6613\u5cf0', age: '32', id: '2',},\n { name: '\u8303\u51b0\u51b0', age: '23', id: '3', \n children: [\n {name: '\u8303\u51b0\u51b00-1', age: '23', id: '3-1'},\n {name: '\u8303\u51b0\u51b00-2', age: '23', id: '3-2'},\n {name: '\u8303\u51b0\u51b00-3', age: '23', id: '3-3'},\n ]\n },\n];\nconst Demo = () => {\n const [expandedRowKeys, setExpandedRowKeys] = React.useState([])\n return (\n <div>\n <Table \n rowKey=\"id\"\n columns={columns}\n data={dataSource}\n />\n </div>\n )\n};\nexport default Demo"},1011:{name:1011,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nvar columns = [{\n // title: '\u59d3\u540d',\n ellipsis: true,\n width: 1000,\n title: function title(_ref) {\n var key = _ref.key;\n return /*#__PURE__*/_react[\"default\"].createElement(\"span\", null, \"\\u5B57\\u6BB5: \", key);\n },\n key: 'name'\n}, {\n title: '\u5e74\u9f84',\n style: {\n color: 'red'\n },\n key: 'age'\n}, {\n title: '\u5730\u5740',\n key: 'info'\n}, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: function render(text, key, rowData, rowNumber, columnNumber) {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"danger\"\n }, \"\\u5220\\u9664\"), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"success\"\n }, \"\\u4FEE\\u6539\"));\n }\n}];\nvar dataSource = [{\n name: '\u9093\u7d2b\u68cb',\n age: '12',\n info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002',\n edit: ''\n}, {\n name: '\u674e\u6613\u5cf0',\n age: '32',\n info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba',\n edit: ''\n}, {\n name: '\u8303\u51b0\u51b0',\n age: '23',\n info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b',\n edit: ''\n}, {\n name: '\u6768\u5e42',\n age: '34',\n info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002',\n edit: ''\n}, {\n name: 'Angelababy',\n age: '54',\n info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002',\n edit: ''\n}, {\n name: '\u5510\u5ae3',\n age: '12',\n info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed',\n edit: ''\n}, {\n name: '\u5434\u4ea6\u51e1',\n age: '4',\n info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002',\n edit: ''\n}];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Table, {\n scroll: {\n x: 1800,\n y: 100\n },\n footer: /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n style: {\n height: 20\n }\n }, \"\\u8FD9\\u4E2A\\u662Ffooter\"),\n columns: columns,\n data: dataSource\n }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n // title: '\u59d3\u540d',\n ellipsis: true, \n width: 1000,\n title: ({ key }) => {\n return (\n <span>\u5b57\u6bb5: {key}</span>\n )\n },\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table \n scroll={{x: 1800, y: 100}}\n footer={<div style={{height: 20, }}>\u8fd9\u4e2a\u662ffooter</div>}\n columns={columns} data={dataSource} \n />\n </div>\n);\nexport default Demo"},1072:{name:1072,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nvar columns = [{\n title: '\u59d3\u540d',\n ellipsis: true,\n // fixed: true,\n width: 50,\n key: 'name'\n}, {\n // fixed: true,\n title: '\u5e74\u9f84',\n width: 50,\n style: {\n color: 'red'\n },\n key: 'age'\n}, {\n title: '\u5730\u5740',\n width: 50,\n key: 'info'\n}, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n fixed: 'right',\n render: function render(text, key, rowData, rowNumber, columnNumber) {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"danger\"\n }, \"\\u5220\\u9664\"), /*#__PURE__*/_react[\"default\"].createElement(_uiw.Button, {\n size: \"small\",\n type: \"success\"\n }, \"\\u4FEE\\u6539\"));\n }\n}];\nvar dataSource = [{\n name: '\u9093\u7d2b\u68cb',\n age: '12',\n info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002',\n edit: ''\n}, {\n name: '\u674e\u6613\u5cf0',\n age: '32',\n info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba',\n edit: ''\n}, {\n name: '\u8303\u51b0\u51b0',\n age: '23',\n info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b',\n edit: ''\n}, {\n name: '\u6768\u5e42',\n age: '34',\n info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002',\n edit: ''\n}, {\n name: 'Angelababy',\n age: '54',\n info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002',\n edit: ''\n}, {\n name: '\u5510\u5ae3',\n age: '12',\n info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed',\n edit: ''\n}, {\n name: '\u5434\u4ea6\u51e1',\n age: '4',\n info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002',\n edit: ''\n}];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Table, {\n scroll: {\n x: 1200\n },\n bordered: true,\n columns: columns,\n data: dataSource\n }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n // fixed: true,\n width: 50,\n key: 'name', \n }, {\n // fixed: true,\n title: '\u5e74\u9f84',\n width: 50,\n style: { color: 'red' },\n key: 'age',\n }, {\n title: '\u5730\u5740',\n width: 50,\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n fixed: 'right',\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table scroll={{x: 1200}} bordered columns={columns} data={dataSource} />\n </div>\n);\nexport default Demo"},1127:{name:1127,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nvar _excluded = ["edit", "value", "type", "onChange", "component"];\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nvar columns = function columns(_onChange) {\n return [{\n title: \'\u59d3\u540d\',\n ellipsis: true,\n key: \'name\',\n render: function render(text, key, rowData) {\n return /*#__PURE__*/_react["default"].createElement(EditInput, {\n value: text,\n onChange: function onChange(value) {\n _onChange(_objectSpread(_objectSpread({}, rowData), {}, {\n name: value\n }), rowData.id);\n }\n });\n }\n }, {\n title: \'\u6027\u522b\',\n key: \'gender\',\n render: function render(text, key, rowData) {\n return /*#__PURE__*/_react["default"].createElement(EditInput, {\n value: text,\n component: "Select",\n onChange: function onChange(value) {\n _onChange(_objectSpread(_objectSpread({}, rowData), {}, {\n gender: value\n }), rowData.id);\n }\n });\n }\n }, {\n title: \'\u5e74\u9f84\',\n key: \'age\',\n render: function render(text, key, rowData) {\n return /*#__PURE__*/_react["default"].createElement(EditInput, {\n value: text,\n type: "number",\n onChange: function onChange(value) {\n _onChange(_objectSpread(_objectSpread({}, rowData), {}, {\n age: value\n }), rowData.id);\n }\n });\n }\n }, {\n title: \'\u5730\u5740\',\n key: \'info\',\n render: function render(text, key, rowData) {\n return /*#__PURE__*/_react["default"].createElement(EditInput, {\n value: text,\n onChange: function onChange(value) {\n _onChange(_objectSpread(_objectSpread({}, rowData), {}, {\n info: value\n }), rowData.id);\n }\n });\n }\n }];\n};\nvar dataSource = [{\n id: 1,\n gender: "\u7537",\n name: \'\u9093\u7d2b\u68cb\',\n age: \'12\',\n info: \'\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\'\n}, {\n id: 2,\n gender: "\u7537",\n name: \'\u674e\u6613\u5cf0\',\n age: \'32\',\n info: \'1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\'\n}, {\n id: 3,\n gender: "\u7537",\n name: \'\u8303\u51b0\u51b0\',\n age: \'23\',\n info: \'1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b\'\n}, {\n id: 4,\n gender: "\u7537",\n name: \'\u6768\u5e42\',\n age: \'34\',\n info: \'1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002\'\n}, {\n id: 5,\n gender: "\u7537",\n name: \'Angelababy\',\n age: \'54\',\n info: \'1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002\'\n}, {\n id: 6,\n gender: "\u7537",\n name: \'\u5510\u5ae3\',\n age: \'12\',\n info: \'1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed\'\n}, {\n id: 7,\n gender: "\u7537",\n name: \'\u5434\u4ea6\u51e1\',\n age: \'4\',\n info: \'1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002\'\n}];\nvar EditInput = function EditInput(_ref) {\n var edit = _ref.edit,\n value = _ref.value,\n type = _ref.type,\n onChange = _ref.onChange,\n component = _ref.component,\n other = _objectWithoutProperties(_ref, _excluded);\n var _React$useState = _react["default"].useState(edit),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n isEdit = _React$useState2[0],\n setIsEdit = _React$useState2[1];\n var inputRef = _react["default"].useRef();\n _react["default"].useEffect(function () {\n isEdit && inputRef.current.focus();\n }, [isEdit]);\n if (isEdit) {\n if (component === "Select") {\n return /*#__PURE__*/_react["default"].createElement(_uiw.Select, {\n ref: inputRef,\n defaultValue: value,\n onBlur: function onBlur(e) {\n onChange(e.target.value);\n setIsEdit(false);\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "\\u7537"\n }, "\\u7537"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "\\u5973"\n }, "\\u5973"));\n }\n return /*#__PURE__*/_react["default"].createElement(_uiw.Input, _extends({}, other, {\n defaultValue: value,\n ref: inputRef,\n type: type || "text",\n onBlur: function onBlur(e) {\n onChange(e.target.value);\n setIsEdit(false);\n }\n }));\n }\n return /*#__PURE__*/_react["default"].createElement("div", {\n onClick: function onClick() {\n setIsEdit(true);\n }\n }, value);\n};\nvar Demo = function Demo() {\n var _React$useState3 = _react["default"].useState(dataSource),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n data = _React$useState4[0],\n setData = _React$useState4[1];\n var onChange = function onChange(value, id) {\n setData(data.map(function (it) {\n return it.id === id ? value : it;\n }));\n };\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Table, {\n columns: columns(onChange),\n data: data\n }));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Table, Button, Input, Select } from 'uiw';\n\nconst columns = (onChange) => [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n key: 'name', \n render: (text,key, rowData) => {\n return <EditInput \n value={text} \n onChange={(value)=>{\n onChange({...rowData, name: value}, rowData.id)\n }} \n />\n }\n }, \n {\n title: '\u6027\u522b',\n key: 'gender',\n render: (text,key, rowData) => {\n return <EditInput \n value={text} \n component=\"Select\"\n onChange={(value)=>{\n onChange({...rowData, gender: value}, rowData.id)\n }} \n />\n }\n },\n {\n title: '\u5e74\u9f84',\n key: 'age',\n render: (text,key, rowData) => {\n return <EditInput \n value={text} \n type=\"number\"\n onChange={(value)=>{\n onChange({...rowData, age: value}, rowData.id)\n }} \n />\n }\n }, \n {\n title: '\u5730\u5740',\n key: 'info',\n render: (text,key, rowData) => {\n return <EditInput \n value={text} \n onChange={(value)=>{\n onChange({...rowData, info: value}, rowData.id)\n }} \n />\n }\n }, \n];\nconst dataSource = [\n { id: 1, gender: \"\u7537\", name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973'},\n { id: 2, gender: \"\u7537\", name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', },\n { id: 3, gender: \"\u7537\", name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', },\n { id: 4, gender: \"\u7537\", name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002'},\n { id: 5, gender: \"\u7537\", name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', },\n { id: 6, gender: \"\u7537\", name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', },\n { id: 7, gender: \"\u7537\", name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', },\n];\nconst EditInput = ({edit, value, type, onChange, component, ...other}) => {\n const [isEdit, setIsEdit] = React.useState(edit);\n const inputRef = React.useRef();\n React.useEffect(()=>{\n isEdit && inputRef.current.focus()\n }, [isEdit])\n if(isEdit) {\n if(component === \"Select\") {\n return <Select \n ref={inputRef}\n defaultValue={value} \n onBlur={e=>{\n onChange(e.target.value)\n setIsEdit(false)\n }}\n >\n <Select.Option value=\"\u7537\">\u7537</Select.Option>\n <Select.Option value=\"\u5973\">\u5973</Select.Option>\n </Select>\n }\n return <Input \n {...other}\n defaultValue={value} \n ref={inputRef} \n type={type || \"text\"}\n onBlur={(e)=>{\n onChange(e.target.value)\n setIsEdit(false)\n }}\n />\n }\n return <div onClick={()=>{\n setIsEdit(true)\n }}>{value}</div>\n}\nconst Demo = () => {\n const [data, setData] = React.useState(dataSource)\n const onChange = (value, id) => {\n setData(data.map(it=>it.id === id ? value : it))\n }\n return <div>\n <Table columns={columns(onChange)} data={data} />\n </div>\n};\nexport default Demo"},1244:{name:1244,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nvar columns = function columns(actived, setChange, fields) {\n return [{\n title: \'\u59d3\u540d\',\n ellipsis: true,\n key: \'name\',\n render: function render(text, key, rowData) {\n if (rowData.id === actived) return fields.name;\n return text;\n }\n }, {\n title: \'\u6027\u522b\',\n key: \'gender\',\n render: function render(text, key, rowData) {\n if (rowData.id === actived) return fields.gender;\n return text;\n }\n }, {\n title: \'\u5e74\u9f84\',\n key: \'age\',\n render: function render(text, key, rowData) {\n if (rowData.id === actived) return fields.age;\n return text;\n }\n }, {\n key: \'id\',\n render: function render(id, key, rowData) {\n var flag = id === actived;\n if (flag) {\n return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary",\n htmlType: "submit"\n }, "Save"), /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "danger",\n onClick: function onClick() {\n return setChange({});\n }\n }, "Cancel"));\n }\n return /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n type: "primary",\n onClick: function onClick(e) {\n e.preventDefault();\n setChange(rowData);\n },\n disabled: actived !== undefined && !flag\n }, "Edit");\n }\n }];\n};\nvar dataSource = [{\n id: 1,\n gender: "\u7537",\n name: \'\u9093\u7d2b\u68cb\',\n age: \'12\'\n}, {\n id: 2,\n gender: "\u7537",\n name: \'\u674e\u6613\u5cf0\',\n age: \'32\'\n}, {\n id: 3,\n gender: "\u7537",\n name: \'\u8303\u51b0\u51b0\',\n age: \'23\'\n}, {\n id: 4,\n gender: "\u7537",\n name: \'\u6768\u5e42\',\n age: \'34\'\n}, {\n id: 5,\n gender: "\u7537",\n name: \'Angelababy\',\n age: \'54\'\n}, {\n id: 6,\n gender: "\u7537",\n name: \'\u5510\u5ae3\',\n age: \'12\'\n}, {\n id: 7,\n gender: "\u7537",\n name: \'\u5434\u4ea6\u51e1\',\n age: \'4\'\n}];\nvar Demo = function Demo() {\n var _React$useState = _react["default"].useState(dataSource),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n data = _React$useState2[0],\n setData = _React$useState2[1];\n var _React$useState3 = _react["default"].useState({}),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n itemRowData = _React$useState4[0],\n setItemRowData = _React$useState4[1];\n var _React$useState5 = _react["default"].useState(),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n id = _React$useState6[0],\n setId = _React$useState6[1];\n var form = _react["default"].useRef();\n var setChange = function setChange(rowData) {\n setId(rowData.id);\n setItemRowData(rowData);\n form.current.setFields(rowData);\n };\n return /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n ref: form,\n onSubmit: function onSubmit(_ref) {\n var current = _ref.current;\n if (JSON.stringify(itemRowData) === JSON.stringify(current)) {\n _uiw.Notify.error({\n title: \'\u63d0\u4ea4\u5931\u8d25\uff01\',\n description: "\\u8868\\u5355\\u63D0\\u4EA4\\u5185\\u5BB9\\u5E76\\u6CA1\\u6709\\u4FEE\\u6539\\uFF01"\n });\n return;\n }\n setData(data.map(function (it) {\n return it.id === current.id ? current : it;\n }));\n setId(undefined);\n _uiw.Notify.success({\n title: \'\u63d0\u4ea4\u6210\u529f\uff01\',\n description: \'\u6570\u636e\u5df2\u7ecf\u66f4\u65b0\'\n });\n },\n fields: {\n name: {\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n placeholder: "\\u8BF7\\u8F93\\u5165\\u59D3\\u540D"\n })\n },\n age: {\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n placeholder: "\\u8BF7\\u8F93\\u5165\\u5E74\\u9F84",\n type: "number"\n })\n },\n gender: {\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Select, null, /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "\\u7537"\n }, "\\u7537"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "\\u5973"\n }, "\\u5973"))\n }\n }\n }, function (_ref2) {\n var fields = _ref2.fields;\n return /*#__PURE__*/_react["default"].createElement(_uiw.Table, {\n columns: columns(id, setChange, fields),\n data: data\n });\n });\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Table, Button, Input, Select, Form, Notify } from 'uiw';\n\nconst columns = (actived, setChange, fields) => {\n return [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n key: 'name', \n render: (text,key, rowData) => {\n if(rowData.id === actived) return fields.name\n return text\n }\n }, \n {\n title: '\u6027\u522b',\n key: 'gender',\n render: (text,key, rowData) => {\n if(rowData.id === actived) return fields.gender\n return text\n }\n },\n {\n title: '\u5e74\u9f84',\n key: 'age',\n render: (text,key, rowData) => {\n if(rowData.id === actived) return fields.age\n return text\n }\n }, \n {\n key: 'id',\n render: (id, key, rowData)=>{\n const flag = id === actived\n if(flag){\n return <>\n <Button type=\"primary\" htmlType=\"submit\">Save</Button>\n <Button type=\"danger\" onClick={()=>setChange({})}>Cancel</Button>\n </>\n }\n return <Button \n type=\"primary\" \n onClick={(e)=>{\n e.preventDefault();\n setChange(rowData)\n }} \n disabled={actived !== undefined && !flag}\n >Edit</Button>\n }\n }\n ]\n};\nconst dataSource = [\n { id: 1, gender: \"\u7537\", name: '\u9093\u7d2b\u68cb', age: '12', },\n { id: 2, gender: \"\u7537\", name: '\u674e\u6613\u5cf0', age: '32', },\n { id: 3, gender: \"\u7537\", name: '\u8303\u51b0\u51b0', age: '23', },\n { id: 4, gender: \"\u7537\", name: '\u6768\u5e42', age: '34',},\n { id: 5, gender: \"\u7537\", name: 'Angelababy', age: '54', },\n { id: 6, gender: \"\u7537\", name: '\u5510\u5ae3', age: '12', },\n { id: 7, gender: \"\u7537\", name: '\u5434\u4ea6\u51e1', age: '4', },\n];\nconst Demo = () => {\n const [data, setData] = React.useState(dataSource)\n const [itemRowData, setItemRowData] = React.useState({})\n const [id, setId] = React.useState()\n \n const form = React.useRef()\n const setChange = (rowData) => {\n setId(rowData.id)\n setItemRowData(rowData)\n form.current.setFields(rowData)\n }\n\n return <Form\n ref={form}\n onSubmit={({ current }) => {\n if(JSON.stringify(itemRowData) === JSON.stringify(current)) {\n Notify.error({\n title: '\u63d0\u4ea4\u5931\u8d25\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u5185\u5bb9\u5e76\u6ca1\u6709\u4fee\u6539\uff01`,\n });\n return \n }\n setData(data.map(it=>it.id === current.id ? current : it))\n setId(undefined)\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: '\u6570\u636e\u5df2\u7ecf\u66f4\u65b0'\n });\n }}\n fields={{\n name: {\n children: <Input placeholder=\"\u8bf7\u8f93\u5165\u59d3\u540d\" />\n },\n age: {\n children: <Input placeholder=\"\u8bf7\u8f93\u5165\u5e74\u9f84\" type=\"number\" />\n },\n gender: {\n children: <Select>\n <Select.Option value=\"\u7537\">\u7537</Select.Option>\n <Select.Option value=\"\u5973\">\u5973</Select.Option>\n </Select>\n }\n }}\n >\n {({ fields }) => <Table columns={columns(id, setChange, fields)} data={data} />}\n </Form>\n};\nexport default Demo"}},source:"Table \u8868\u683c\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-table/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-table.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-table)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-table.svg?label=@uiw/react-table)](https://npmjs.com/@uiw/react-table)\n\n\u8868\u793a\u4e24\u79cd\u76f8\u4e92\u5bf9\u7acb\u7684\u72b6\u6001\u95f4\u7684\u5207\u6362\uff0c\u591a\u7528\u4e8e\u89e6\u53d1\u300c\u5f00/\u5173\u300d\u3002\u9009\u4e2d\u65f6\u7684\u5185\u5bb9\u652f\u6301\u54cd\u5e94\u5f0f\u3002\n\n```jsx\nimport { Table } from 'uiw';\n// or\nimport Table from '@uiw/react-table';\n```\n\n### \u57fa\u672c\u4f7f\u7528\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n // title: '\u59d3\u540d',\n ellipsis: true, \n title: ({ key }) => {\n return (\n <span>\u5b57\u6bb5: {key}</span>\n )\n },\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n isExpandedButton:true,\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table columns={columns} data={dataSource} />\n </div>\n);\nexport default Demo\n```\n### \u8868\u5934\u5206\u7ec4\n\n\u8868\u5934\u5206\u7ec4\u901a\u8fc7 `columns` \u6570\u7ec4\u4e2d\u5bf9\u8c61\u7684 `children` \u6765\u5b9e\u73b0\uff0c\u4ee5\u6e32\u67d3\u5206\u7ec4\u8868\u5934\u3002\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n style: { color: 'red' },\n key: 'name', \n children: [\n {\n title: '\u82f1\u6587\u540d\u5b57',\n width: 100,\n key: 'name_en',\n },\n {\n title: '\u4e2d\u6587\u540d\u5b57',\n key: 'cnname',\n children:[\n {\n title: '\u59d3\u540d',\n style: { color: 'red' },\n key: 'firstname',\n children:[\n { title: '\u59d3', key: 'name1', width: 80 },\n { title: '\u540d', key: 'name2', width: 80 },\n ]\n }, {\n title: '\u62fc\u97f3',\n key: 'lastname',\n children:[\n { title: '\u59d3', key: 'pinyin1', width: 80 },\n { title: '\u540d', key: 'pinyin2', width: 80 },\n ],\n },\n ],\n }, \n ]\n }, {\n title: '\u5176\u5b83',\n key: 'other',\n children:[\n { title: '\u751f\u65e5', key: 'birthday', width: 150 },\n { title: '\u804c\u4e1a', key: 'job', width: 150 },\n ],\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 150,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <span>{text} {key} - {rowNumber} - {columnNumber}</span>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name1: '\u9093', name2:'\u7d2b\u68cb', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991\u5e748\u670816\u65e5', job: '\u5531\u4f5c\u6b4c\u624b\u3001\u4f5c\u66f2\u4eba', edit:'' },\n { name1: '\u5468', name2:'\u6770\u4f26', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979\u5e741\u670818\u65e5', job: '\u6b4c\u624b\u3001\u97f3\u4e50\u4eba', edit:'' },\n { name1: '\u9093', name2:'\u7d2b\u68cb', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991\u5e748\u670816\u65e5', job: '\u5531\u4f5c\u6b4c\u624b\u3001\u4f5c\u66f2\u4eba', edit:'' },\n { name1: '\u5468', name2:'\u6770\u4f26', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979\u5e741\u670818\u65e5', job: '\u6b4c\u624b\u3001\u97f3\u4e50\u4eba', edit:'' },\n];\nconst Demo = () => (\n <div>\n <Table bordered columns={columns} data={dataSource} />\n </div>\n);\nexport default Demo\n```\n\n### \u8868\u683c\u884c/\u5217\u5408\u5e76\n\n\u8868\u5934\u53ea\u652f\u6301\u5217\u5408\u5e76\uff0c\u4f7f\u7528 `columns` \u91cc\u7684 `colSpan` \u8fdb\u884c\u8bbe\u7f6e\u3002\u8868\u683c\u652f\u6301\u884c/\u5217\u5408\u5e76\uff0c\u4f7f\u7528 `render` \u91cc\u7684\u5355\u5143\u683c\u5c5e\u6027 `colSpan` \u6216\u8005 `rowSpan` \u8bbe\u503c\u4e3a 0 \u65f6\uff0c\u8bbe\u7f6e\u7684\u8868\u683c\u4e0d\u4f1a\u6e32\u67d3\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n colSpan: 2,\n render: (text, key, rowData, rowNum, colNum) => {\n const obj = {\n children: text,\n props: {}\n }\n if (rowNum === 0) {\n obj.props.rowSpan = 2;\n }\n if (rowNum === 1) {\n obj.props.rowSpan = 0;\n }\n return obj;\n }\n }, {\n title: '\u5730\u5740',\n key: 'info',\n colSpan: 0,\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '12', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table bordered columns={columns} data={dataSource} />\n </div>\n);\nexport default Demo\n```\n\n### \u5217\u5408\u5e76\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button, Icon } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n key: 'name', \n }, \n {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n isExpandedButton:true,\n render: (text, key, rowData, rowNum, colNum,{level}) => {\n const obj = {\n children: text,\n props: {}\n }\n if (level === 0) {\n obj.props.colSpan = 2;\n }\n return obj;\n }\n }, \n {\n title: '\u5e74\u9f842',\n style: { color: 'red' },\n key: 'age1',\n render: (text, key, rowData, rowNum, colNum,{level}) => {\n const obj = {\n children: rowData.age,\n props: {}\n }\n if (level === 0) {\n obj.props.colSpan = 0;\n }\n return obj;\n }\n }, \n {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { \n name: '\u9093\u7d2b\u68cb', \n age: '10', \n id: '1', \n children: [\n {\n name: '\u9093\u7d2b\u68cb-0-1', \n age: '10', \n id: '1-1', \n children: [\n { \n name: '\u9093\u7d2b\u68cb-0-1-1', \n age: '10', \n id: '1-1-1',\n children: [\n {name: '\u9093\u7d2b\u68cb-0-1-1-1', age: '10', id: '-0-1-1-1'},\n {name: '\u9093\u7d2b\u68cb-0-1-1-2', age: '10', id: '-0-1-1-2'},\n {name: '\u9093\u7d2b\u68cb-0-1-1-3', age: '10', id: '-0-1-1-3'},\n ]\n },\n { name: '\u9093\u7d2b\u68cb-0-1-2', age: '10', id: '1-1-2',}\n ]\n },\n {name: '\u9093\u7d2b\u68cb-0-2', age: '10', id: '1-1'},\n {name: '\u9093\u7d2b\u68cb-0-3', age: '10', id: '1-1'},\n ]\n },\n { name: '\u674e\u6613\u5cf0', age: '32', id: '2',\n },\n { name: '\u8303\u51b0\u51b0', age: '23', id: '3', \n children: [\n {name: '\u8303\u51b0\u51b00-1', age: '23', id: '3-1'},\n {name: '\u8303\u51b0\u51b00-2', age: '23', id: '3-2'},\n {name: '\u8303\u51b0\u51b00-3', age: '23', id: '3-3'},\n ]\n },\n];\nconst Demo = () => {\n const [expandedRowKeys, setExpandedRowKeys] = React.useState([])\n return (\n <div>\n <Table \n rowKey=\"id\"\n expandable={{\n onExpand:(key,record,...rest)=>{\n console.log(key,record,rest)\n }\n }}\n columns={columns}\n data={dataSource}\n />\n </div>\n )\n};\nexport default Demo\n```\n\n\n### \u81ea\u52a8\u5408\u5e76\u884c\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button, Icon } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n key: 'name', \n }, \n {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n level:2\n }, \n {\n title: '\u5e74\u9f842',\n style: { color: 'red' },\n key: 'age',\n level:2\n }, \n {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { \n name: '\u9093\u7d2b\u68cb', \n age: '10', \n id: '1', \n children: [\n {\n name: '\u9093\u7d2b\u68cb-0-1', \n age: '10', \n id: '1-1', \n children: [\n { \n name: '\u9093\u7d2b\u68cb-0-1-1', \n age: '10', \n id: '1-1-1',\n children: [\n {name: '\u9093\u7d2b\u68cb-0-1-1-1', age: '10', id: '-0-1-1-1'},\n {name: '\u9093\u7d2b\u68cb-0-1-1-2', age: '10', id: '-0-1-1-2'},\n {name: '\u9093\u7d2b\u68cb-0-1-1-3', age: '10', id: '-0-1-1-3'},\n ]\n },\n { name: '\u9093\u7d2b\u68cb-0-1-2', age: '10', id: '1-1-2',}\n ]\n },\n {name: '\u9093\u7d2b\u68cb-0-2', age: '10', id: '1-1'},\n {name: '\u9093\u7d2b\u68cb-0-3', age: '10', id: '1-1'},\n ]\n },\n { name: '\u674e\u6613\u5cf0', age: '32', id: '2',\n },\n { name: '\u8303\u51b0\u51b0', age: '23', id: '3', \n children: [\n {name: '\u8303\u51b0\u51b00-1', age: '23', id: '3-1'},\n {name: '\u8303\u51b0\u51b00-2', age: '23', id: '3-2'},\n {name: '\u8303\u51b0\u51b00-3', age: '23', id: '3-3'},\n ]\n },\n];\nconst Demo = () => {\n const [expandedRowKeys, setExpandedRowKeys] = React.useState([])\n return (\n <div>\n <Table \n rowKey=\"id\"\n columns={columns}\n data={dataSource}\n isAutoMergeRowSpan={true}\n />\n </div>\n )\n};\nexport default Demo\n```\n\n\n### \u6807\u9898\u9875\u811a\n\n\u6dfb\u52a0\u8868\u683c\u8fb9\u6846\u7ebf\uff0c\u9875\u5934\u548c\u9875\u811a\u7684\u5c55\u73b0\u6548\u679c\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n style: { color: 'red' },\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table\n title={(\n <div>\n \u8fd9\u91cc\u662f\u6807\u9898\uff0c\u6709\u8fb9\u6846\uff0c<b>bordered=true</b>\n </div>\n )}\n footer={(\n <div>\n \u8fd9\u91cc\u662f\u9875\u811a Footer\uff0c\u6709\u8fb9\u6846\uff0c<b>bordered=true</b>\n </div>\n )}\n bordered columns={columns} data={dataSource} />\n <Table title=\"\u8fd9\u91cc\u662f\u6807\u9898\uff0c\u6ca1\u6709\u8fb9\u6846\" footer=\"\u8fd9\u91cc\u662f\u9875\u811a Footer\uff0c\u6ca1\u6709\u8fb9\u6846\" columns={columns} data={dataSource} />\n </div>\n);\nexport default Demo\n```\n\n### \u70b9\u51fb\u5355\u5143\u683c\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button, Notify } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n style: { color: 'red' },\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table\n title=\"\u8868\u5185\u5bb9 tbody \u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6\"\n onCell={(rowData, { rowNum, colNum }) => {\n console.log('--\x3e3', rowData);\n console.log('--\x3e4', rowNum);\n console.log('--\x3e5', colNum);\n Notify.info({ description: `\u4f60\u70b9\u51fb\u4e86\"${rowData.name}\"\u3002` });\n }}\n columns={columns}\n data={dataSource}\n />\n <Table\n title=\"\u8868\u5934\u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6\"\n onCellHead={(rowData, rowNum, columnNumber) => {\n console.log('--\x3e3', rowData);\n console.log('--\x3e4', rowNum);\n console.log('--\x3e5', columnNumber);\n Notify.info({ description: `\u4f60\u70b9\u51fb\u4e86\"${rowData.title}\"\u3002` });\n }}\n onCell={(rowData, { rowNum, colNum }) => {\n console.log('--\x3e3', rowData);\n console.log('--\x3e4', rowNum);\n console.log('--\x3e5', colNum);\n Notify.info({ description: `\u4f60\u70b9\u51fb\u4e86\"${rowData.name}\"\u3002` });\n }}\n columns={columns}\n data={dataSource}\n />\n </div>\n);\nexport default Demo\n```\n\n### \u539f\u59cbHTML\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button } from 'uiw';\n\nconst Demo = () => (\n <div>\n <Table bordered>\n <thead>\n <tr>\n <th>\u540d\u79f0</th>\n <th>\u6570\u91cf</th>\n <th>\u8be6\u60c5</th>\n <th>\u4ef7\u683c</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>\u571f\u8c46</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u841d\u535c</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u9999\u8549</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u829d\u9ebb</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n </tbody>\n </Table>\n <Table>\n <caption>\u6ca1\u6709\u8fb9\u6846</caption>\n <thead>\n <tr>\n <th>\u540d\u79f0</th>\n <th>\u6570\u91cf</th>\n <th>\u8be6\u60c5</th>\n <th>\u4ef7\u683c</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>\u571f\u8c46</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u841d\u535c</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u9999\u8549</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n <tr>\n <td>\u829d\u9ebb</td>\n <td>18</td>\n <td>2009/01/12</td>\n <td>\uffe586,000</td>\n </tr>\n </tbody>\n </Table>\n </div>\n);\nexport default Demo\n```\n\n### \u9009\u62e9\u548c\u64cd\u4f5c\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button, Checkbox, Pagination, Loader } from 'uiw';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n // \u9009\u4e2d\u7684 key\n checked: [],\n loading: false,\n dataSource: [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002' },\n ],\n columns: [\n {\n title: (data, rowNum, colNum) => {\n const indeterminate = this.state.dataSource.length !== this.state.checked.length && this.state.checked.length > 0;\n const checked = this.state.dataSource.length === this.state.checked.length;\n return (\n <Checkbox\n checked={checked}\n indeterminate={indeterminate}\n onClick={(evn) => {\n let checked = this.state.dataSource.map((item, idx) => idx);\n if(!evn.target.checked) {\n checked = [];\n }\n this.setState({ checked });\n }}\n />\n );\n },\n key: 'checked',\n render: (text, key, rowData, rowNumber, columnNumber) => {\n return (\n <Checkbox checked={rowData.checked} onClick={this.onClickCheckedItem.bind(this, rowNumber)} />\n );\n }\n }, {\n title: '\u540d\u5b57',\n key: 'name',\n }, {\n title: '\u5e74\u9f84',\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n },\n ]\n }\n }\n onClickCheckedItem(rowNumber, env) {\n let { checked } = this.state;\n const isChecked = env.target.checked;\n if(isChecked) {\n // \u6dfb\u52a0\u5230\u9009\u4e2d\u6570\u7ec4\u4e2d\n checked.push(rowNumber)\n checked = checked.sort((a, b) => a - b);\n } else {\n // \u5220\u9664\u9009\u4e2d\u9879\n checked.splice(checked.indexOf(rowNumber), 1);\n }\n this.setState({ checked });\n }\n render() {\n const { checked } = this.state;\n const dataSource = this.state.dataSource.map((item, idx) => {\n const isChecked = checked.indexOf(idx) > -1;\n return { checked: isChecked, ...item };\n });\n return (\n <div>\n <Loader loading={this.state.loading} style={{ display: 'block' }}>\n <Table\n columns={this.state.columns}\n data={dataSource}\n footer={\n <Pagination\n current={2}\n pageSize={10}\n total={30}\n divider\n onChange={(current, total, pageSize) => {\n this.setState({ loading: true });\n const timer = setTimeout(() => {\n // \u6a21\u62df\u53d8\u66f4\u6570\u636e\n const dataSource = this.state.dataSource.map(item => {\n item.age = Number(item.age) + current;\n return item;\n });\n // \u7ffb\u9875 API \u83b7\u53d6\u6570\u636e\n this.setState({ checked: [], dataSource, loading: false });\n }, 2000);\n }}\n />\n }\n />\n </Loader>\n </div>\n );\n }\n}\nexport default Demo\n```\n\n### \u81ea\u5b9a\u4e49\u5355\u5143\u683c\u7701\u7565\u63d0\u793a\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button, Notify, Tooltip } from 'uiw';\n\nconst columns = [\n {\n title: 'Name',\n key: 'name',\n render: text => <a>{text}</a>,\n width: 150,\n },\n {\n title: 'Age',\n key: 'age',\n width: 80,\n },\n {\n title: 'Address',\n key: 'address',\n ellipsis: true,\n render: address => (\n <Tooltip placement=\"topLeft\" content={address}>\n {address}\n </Tooltip>\n ),\n },\n {\n title: 'Long Column Long Column Long Column',\n key: 'address',\n ellipsis: true,\n render: address => (\n <Tooltip placement=\"topLeft\" content={address}>\n {address}\n </Tooltip>\n ),\n },\n {\n title: 'Long Column Long Column',\n key: 'address',\n ellipsis: true,\n render: address => (\n <Tooltip placement=\"topLeft\" content={address}>\n {address}\n </Tooltip>\n ),\n },\n {\n title: 'Long Column',\n key: 'address',\n ellipsis: true,\n render: address => {\n return (\n <Tooltip placement=\"topLeft\" content={address}>\n {address}\n </Tooltip>\n )\n },\n },\n];\n\nconst data = [\n { name: '\u9093\u7d2b\u68cb', age: '12', address: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002' },\n { name: '\u674e\u6613\u5cf0', age: '32', address: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba' },\n { name: '\u8303\u51b0\u51b0', age: '23', address: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b' },\n { name: '\u6768\u5e42', age: '34', address: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002' },\n { name: 'Angelababy', age: '54', address: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002' },\n { name: '\u5510\u5ae3', age: '12', address: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed' },\n { name: '\u5434\u4ea6\u51e1', age: '4', address: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002' },\n];\n\nconst Demo = () => (\n <div>\n <Table\n title=\"\u8868\u5185\u5bb9 tbody \u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6\"\n columns={columns}\n data={data}\n />\n </div>\n);\nexport default Demo\n```\n\n### \u65e0\u6570\u636e\u72b6\u6001\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button, Empty } from 'uiw';\n\nconst columns = [\n {\n ellipsis: true, \n title: '\u59d3\u540d',\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [];\nconst Demo = () => (\n <div>\n <Table\n columns={columns}\n data={dataSource}\n empty={<Empty />} \n />\n </div>\n);\nexport default Demo\n```\n\n### \u53ef\u5c55\u5f00\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button, Icon } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n key: 'name', \n }, \n {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n }, \n {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '10', id: '1'},\n { name: '\u674e\u6613\u5cf0', age: '32', id: '2'},\n { name: '\u8303\u51b0\u51b0', age: '23', id: '3'},\n];\nconst Demo = () => (\n <div>\n <Table \n rowKey=\"id\"\n expandable={{\n expandedRowRender: (record, index, expanded)=>{\n return <div>{record.name}</div>\n },\n // defaultExpandAllRows: true,\n rowExpandable: (r)=>r.name!=='\u674e\u6613\u5cf0',\n expandIcon: (expanded) => expanded ? <Icon type=\"minus-circle-o\"/> : <Icon type=\"plus-circle-o\"/>,\n defaultExpandedRowKeys: [\"1\"]\n }}\n columns={columns} \n data={dataSource} \n />\n </div>\n);\nexport default Demo\n```\n\n### \u6811\u5f62\u6570\u636e\u5c55\u793a\n\n\u8868\u683c\u652f\u6301\u6811\u5f62\u6570\u636e\u7684\u5c55\u793a\uff0c\u5f53\u6570\u636e\u4e2d\u6709 children \u5b57\u6bb5\u65f6\u4f1a\u81ea\u52a8\u5c55\u793a\u4e3a\u6811\u5f62\u8868\u683c\uff0c\u5982\u679c\u4e0d\u9700\u8981\u6216\u914d\u7f6e\u4e3a\u5176\u4ed6\u5b57\u6bb5\u53ef\u4ee5\u7528 childrenColumnName \u8fdb\u884c\u914d\u7f6e\u3002\n\n\u53ef\u4ee5\u901a\u8fc7\u8bbe\u7f6e indentSize \u4ee5\u63a7\u5236\u6bcf\u4e00\u5c42\u7684\u7f29\u8fdb\u5bbd\u5ea6\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button, Icon } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n key: 'name', \n }, \n {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n }, \n {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { \n name: '\u9093\u7d2b\u68cb', \n age: '10', \n id: '1', \n children: [\n {\n name: '\u9093\u7d2b\u68cb-0-1', \n age: '10', \n id: '1-1', \n children: [\n { \n name: '\u9093\u7d2b\u68cb-0-1-1', \n age: '10', \n id: '1-1-1',\n children: [\n {name: '\u9093\u7d2b\u68cb-0-1-1-1', age: '10', id: '-0-1-1-1'},\n {name: '\u9093\u7d2b\u68cb-0-1-1-2', age: '10', id: '-0-1-1-2'},\n {name: '\u9093\u7d2b\u68cb-0-1-1-3', age: '10', id: '-0-1-1-3'},\n ]\n },\n { name: '\u9093\u7d2b\u68cb-0-1-2', age: '10', id: '1-1-2',}\n ]\n },\n {name: '\u9093\u7d2b\u68cb-0-2', age: '10', id: '1-1'},\n {name: '\u9093\u7d2b\u68cb-0-3', age: '10', id: '1-1'},\n ]\n },\n { name: '\u674e\u6613\u5cf0', age: '32', id: '2',},\n { name: '\u8303\u51b0\u51b0', age: '23', id: '3', \n children: [\n {name: '\u8303\u51b0\u51b00-1', age: '23', id: '3-1'},\n {name: '\u8303\u51b0\u51b00-2', age: '23', id: '3-2'},\n {name: '\u8303\u51b0\u51b00-3', age: '23', id: '3-3'},\n ]\n },\n];\nconst Demo = () => {\n const [expandedRowKeys, setExpandedRowKeys] = React.useState([])\n return (\n <div>\n <Table \n rowKey=\"id\"\n columns={columns}\n data={dataSource}\n />\n </div>\n )\n};\nexport default Demo\n```\n\n### \u8868\u683c\u5217\u8fc7\u5bbd\u5bfc\u81f4 footer \u6ed1\u52a8\u51fa\u8868\u683c\u5e95\u90e8\n\n\u4f7f\u7528 scroll \u5c5e\u6027\u7ed9\u8868\u683c\u8bbe\u7f6e\u5bbd(x)\u6216\u9ad8(y)\u5373\u53ef\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n // title: '\u59d3\u540d',\n ellipsis: true, \n width: 1000,\n title: ({ key }) => {\n return (\n <span>\u5b57\u6bb5: {key}</span>\n )\n },\n key: 'name', \n }, {\n title: '\u5e74\u9f84',\n style: { color: 'red' },\n key: 'age',\n }, {\n title: '\u5730\u5740',\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table \n scroll={{x: 1800, y: 100}}\n footer={<div style={{height: 20, }}>\u8fd9\u4e2a\u662ffooter</div>}\n columns={columns} data={dataSource} \n />\n </div>\n);\nexport default Demo\n```\n\n### \u56fa\u5b9a\u5217 \n\n\u901a\u8fc7\u4f7f\u7528 fixed \u4f7f\u5176\u5217\u56fa\u5b9a\n> \u26a0\ufe0f \u6ce8\u610f: \u82e5\u5e76\u6ca1\u6709 scroll \u6eda\u52a8\u6761\uff0cfixed \u5c5e\u6027\u5e76\u4e0d\u4f1a\u6709\u76f4\u89c2\u7684\u6548\u679c\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n // fixed: true,\n width: 50,\n key: 'name', \n }, {\n // fixed: true,\n title: '\u5e74\u9f84',\n width: 50,\n style: { color: 'red' },\n key: 'age',\n }, {\n title: '\u5730\u5740',\n width: 50,\n key: 'info',\n }, {\n title: '\u64cd\u4f5c',\n key: 'edit',\n width: 98,\n fixed: 'right',\n render: (text, key, rowData, rowNumber, columnNumber) => (\n <div>\n <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n </div>\n ),\n },\n];\nconst dataSource = [\n { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n <div>\n <Table scroll={{x: 1200}} bordered columns={columns} data={dataSource} />\n </div>\n);\nexport default Demo\n```\n\n### \u53ef\u7f16\u8f91\n\n\u5229\u7528 render \u5c5e\u6027, \u4f20\u9012\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5b9e\u73b0\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button, Input, Select } from 'uiw';\n\nconst columns = (onChange) => [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n key: 'name', \n render: (text,key, rowData) => {\n return <EditInput \n value={text} \n onChange={(value)=>{\n onChange({...rowData, name: value}, rowData.id)\n }} \n />\n }\n }, \n {\n title: '\u6027\u522b',\n key: 'gender',\n render: (text,key, rowData) => {\n return <EditInput \n value={text} \n component=\"Select\"\n onChange={(value)=>{\n onChange({...rowData, gender: value}, rowData.id)\n }} \n />\n }\n },\n {\n title: '\u5e74\u9f84',\n key: 'age',\n render: (text,key, rowData) => {\n return <EditInput \n value={text} \n type=\"number\"\n onChange={(value)=>{\n onChange({...rowData, age: value}, rowData.id)\n }} \n />\n }\n }, \n {\n title: '\u5730\u5740',\n key: 'info',\n render: (text,key, rowData) => {\n return <EditInput \n value={text} \n onChange={(value)=>{\n onChange({...rowData, info: value}, rowData.id)\n }} \n />\n }\n }, \n];\nconst dataSource = [\n { id: 1, gender: \"\u7537\", name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973'},\n { id: 2, gender: \"\u7537\", name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', },\n { id: 3, gender: \"\u7537\", name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', },\n { id: 4, gender: \"\u7537\", name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002'},\n { id: 5, gender: \"\u7537\", name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', },\n { id: 6, gender: \"\u7537\", name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', },\n { id: 7, gender: \"\u7537\", name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', },\n];\nconst EditInput = ({edit, value, type, onChange, component, ...other}) => {\n const [isEdit, setIsEdit] = React.useState(edit);\n const inputRef = React.useRef();\n React.useEffect(()=>{\n isEdit && inputRef.current.focus()\n }, [isEdit])\n if(isEdit) {\n if(component === \"Select\") {\n return <Select \n ref={inputRef}\n defaultValue={value} \n onBlur={e=>{\n onChange(e.target.value)\n setIsEdit(false)\n }}\n >\n <Select.Option value=\"\u7537\">\u7537</Select.Option>\n <Select.Option value=\"\u5973\">\u5973</Select.Option>\n </Select>\n }\n return <Input \n {...other}\n defaultValue={value} \n ref={inputRef} \n type={type || \"text\"}\n onBlur={(e)=>{\n onChange(e.target.value)\n setIsEdit(false)\n }}\n />\n }\n return <div onClick={()=>{\n setIsEdit(true)\n }}>{value}</div>\n}\nconst Demo = () => {\n const [data, setData] = React.useState(dataSource)\n const onChange = (value, id) => {\n setData(data.map(it=>it.id === id ? value : it))\n }\n return <div>\n <Table columns={columns(onChange)} data={data} />\n </div>\n};\nexport default Demo\n```\n\n### \u53ef\u7f16\u8f91\u884c\n\n\u5229\u7528 Form \u7ec4\u4ef6\u548c render \u5c5e\u6027, \u5b9e\u73b0\u7f16\u8f91\u884c\u6548\u679c\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Table, Button, Input, Select, Form, Notify } from 'uiw';\n\nconst columns = (actived, setChange, fields) => {\n return [\n {\n title: '\u59d3\u540d',\n ellipsis: true, \n key: 'name', \n render: (text,key, rowData) => {\n if(rowData.id === actived) return fields.name\n return text\n }\n }, \n {\n title: '\u6027\u522b',\n key: 'gender',\n render: (text,key, rowData) => {\n if(rowData.id === actived) return fields.gender\n return text\n }\n },\n {\n title: '\u5e74\u9f84',\n key: 'age',\n render: (text,key, rowData) => {\n if(rowData.id === actived) return fields.age\n return text\n }\n }, \n {\n key: 'id',\n render: (id, key, rowData)=>{\n const flag = id === actived\n if(flag){\n return <>\n <Button type=\"primary\" htmlType=\"submit\">Save</Button>\n <Button type=\"danger\" onClick={()=>setChange({})}>Cancel</Button>\n </>\n }\n return <Button \n type=\"primary\" \n onClick={(e)=>{\n e.preventDefault();\n setChange(rowData)\n }} \n disabled={actived !== undefined && !flag}\n >Edit</Button>\n }\n }\n ]\n};\nconst dataSource = [\n { id: 1, gender: \"\u7537\", name: '\u9093\u7d2b\u68cb', age: '12', },\n { id: 2, gender: \"\u7537\", name: '\u674e\u6613\u5cf0', age: '32', },\n { id: 3, gender: \"\u7537\", name: '\u8303\u51b0\u51b0', age: '23', },\n { id: 4, gender: \"\u7537\", name: '\u6768\u5e42', age: '34',},\n { id: 5, gender: \"\u7537\", name: 'Angelababy', age: '54', },\n { id: 6, gender: \"\u7537\", name: '\u5510\u5ae3', age: '12', },\n { id: 7, gender: \"\u7537\", name: '\u5434\u4ea6\u51e1', age: '4', },\n];\nconst Demo = () => {\n const [data, setData] = React.useState(dataSource)\n const [itemRowData, setItemRowData] = React.useState({})\n const [id, setId] = React.useState()\n \n const form = React.useRef()\n const setChange = (rowData) => {\n setId(rowData.id)\n setItemRowData(rowData)\n form.current.setFields(rowData)\n }\n\n return <Form\n ref={form}\n onSubmit={({ current }) => {\n if(JSON.stringify(itemRowData) === JSON.stringify(current)) {\n Notify.error({\n title: '\u63d0\u4ea4\u5931\u8d25\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u5185\u5bb9\u5e76\u6ca1\u6709\u4fee\u6539\uff01`,\n });\n return \n }\n setData(data.map(it=>it.id === current.id ? current : it))\n setId(undefined)\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: '\u6570\u636e\u5df2\u7ecf\u66f4\u65b0'\n });\n }}\n fields={{\n name: {\n children: <Input placeholder=\"\u8bf7\u8f93\u5165\u59d3\u540d\" />\n },\n age: {\n children: <Input placeholder=\"\u8bf7\u8f93\u5165\u5e74\u9f84\" type=\"number\" />\n },\n gender: {\n children: <Select>\n <Select.Option value=\"\u7537\">\u7537</Select.Option>\n <Select.Option value=\"\u5973\">\u5973</Select.Option>\n </Select>\n }\n }}\n >\n {({ fields }) => <Table columns={columns(id, setChange, fields)} data={data} />}\n </Form>\n};\nexport default Demo\n```\n\n## Props\n\n### Table\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| columns | \u8868\u683c\u5217\u7684\u914d\u7f6e\u63cf\u8ff0\uff0c\u53ef\u4ee5\u5185\u5d4c `children`\uff0c\u4ee5\u6e32\u67d3\u5206\u7ec4\u8868\u5934\u3002| ColumnProps[] | `[]` |\n| data | \u6570\u636e\u6570\u7ec4\u3002| Array[] | `[]` |\n| title | \u8868\u683c\u6807\u9898 | ~~Function(text, key, rowData, rowNumber, columnNumber)~~ /<br/> Function(data: IColumns, rowNum: Number, colNum: Number)`@3.0.0+` /<br/> String / ReactNode | - |\n| footer | \u8868\u683c\u5c3e\u90e8 | String/ReactNode | - |\n| bordered | \u662f\u5426\u5c55\u793a\u5916\u8fb9\u6846\u548c\u5217\u8fb9\u6846 | Boolean | - |\n| empty | \u65e0\u6570\u636e\u72b6\u6001 | ReactNode | - |\n| onCellHead | \u8868\u5934\u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03 | ~~`Function(text, key, rowData, rowNumber, columnNumber)`~~ /<br/> Function(data: IColumns, colNum: Number, rowNum: Number, evn: React.MouseEvent<HTMLTableCellElement\\>) `@3.0.0+` | - |\n| onCell | \u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03 | ~~`Function(text, key, rowData, rowNumber, columnNumber)`~~ /<br/> Function(data: IColumns, options:{ colNum: Number, rowNum: Number, keyName: String }, evn: React.MouseEvent<HTMLTableCellElement\\>) `@3.1.0+` | - |\n| expandable | \u53ef\u5c55\u5f00\u914d\u7f6e | ExpandableType | - |\n| rowKey | \u8868\u683c\u884c key \u7684\u53d6\u503c | String | - |\n| scroll | \u8868\u683c\u662f\u5426\u53ef\u6eda\u52a8\uff0c\u4e5f\u53ef\u4ee5\u6307\u5b9a\u6eda\u52a8\u533a\u57df\u7684\u5bbd\u3001\u9ad8 | { x?: React.CSSProperties['width'], y?: React.CSSProperties['height'] } | - |\n| isAutoMergeRowSpan | \u662f\u5426\u81ea\u52a8\u5408\u5e76\u884c(\u548c\u8868\u5934\u914d\u7f6e\u4e2d\u7684`level`\u914d\u5408\u4f7f\u7528) | boolean | - |\n\n### ColumnProps\n\n\u5217\u63cf\u8ff0\u6570\u636e\u5bf9\u8c61\uff0c\u662f columns \u4e2d\u7684\u4e00\u9879\uff0c\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c | \u7248\u672c |\n|--------- |-------- |--------- |-------- |-------- |\n| title | \u5217\u5934\u663e\u793a\u6587\u5b57\u3002| ReactNode | - | - |\n| key | \u9700\u8981\u7684 key\uff0c\u53ef\u4ee5\u5ffd\u7565\u8fd9\u4e2a\u5c5e\u6027\uff0c\u5982\u679c\u6807\u9898\u5e26\u6709 `render` \u51fd\u6570\uff0c\u90a3\u4e48\u8fd9\u4e2a `key` \u4e3a\u5fc5\u987b\u975e\u5e38\u91cd\u8981\u3002| String | - | - |\n| width | \u5217\u5bbd\u5ea6\u3002| Number | - | - |\n| colSpan | \u5408\u5e76\u8868\u5934\u884c\u3002| Number | - | - |\n| ellipsis | \u8d85\u8fc7\u5bbd\u5ea6\u5c06\u81ea\u52a8\u7701\u7565\u3002`v4.8.7+`| Boolean | `false` | - |\n| render | \u751f\u6210\u590d\u6742\u6570\u636e\u7684\u6e32\u67d3\u51fd\u6570\uff0c\u53c2\u6570\u5206\u522b\u4e3a\u5f53\u524d\u884c\u7684\u503c\uff0c\u5f53\u524d\u503c\u7684 `key`\uff0c\u884c\u7d22\u5f15\u6570\u636e\uff0c\u5f53\u524d\u884c\u53f7\uff0c\u5f53\u524d\u5217\u53f7\u3002| `Function(text, key, rowData, rowNumber, columnNumber,leveConfig: level: number,rowSpan?: number, summary: { summary: Record<string, {count: number;level: number;}>;summaryCount: Record<string \\| number, number>;} \\| undefined)` | - | - |\n| align | \u8bbe\u7f6e\u5217\u7684\u5bf9\u9f50\u65b9\u5f0f | \"left\"\\|\"center\"\\|\"right\" | - | - |\n| className | \u5217\u6837\u5f0f\u7c7b\u540d | String | - | - |\n| fixed | \u628a\u9009\u62e9\u6846\u5217\u56fa\u5b9a\t | Boolean \\|\"left\"\\|\"right\" | - | 4.15.1 |\n| isExpanded | \u662f\u5426\u5f53\u524d\u5217\u663e\u793a\u5c55\u5f00\u6309\u94ae\t | Boolean | - | - |\n| isExpandedButton | \u662f\u5426\u76f4\u63a5\u663e\u793a\u5c55\u5f00\u6309\u94ae\t | Boolean | - | - |\n| isExpandedButtonLayout | \u5c55\u5f00\u6309\u94ae\u663e\u793a\u53f3\u8fb9\u8fd8\u662f\u5de6\u8fb9 \t | `left \\| right` | - | - |\n| level | \u5408\u5e76\u884c\u5c42\u7ea7(\u548c`isAutoMergeRowSpan`\u4e00\u8d77\u4f7f\u7528) | number | - | - |\n\n### expandable\n\n> \u26a0\ufe0f \u6ce8\u610f: expandedRowKeys \u4e0e onExpandedRowsChange \u5fc5\u987b\u540c\u65f6\u51fa\u73b0\u6216\u4e0d\u51fa\u73b0\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| expandedRowRender | \u81ea\u5b9a\u4e49\u5c55\u5f00\u884c| (record, index, expanded) => React.ReactNode | - |\n| expandIcon | \u81ea\u5b9a\u4e49\u56fe\u6807 | (expanded, record, index) => React.ReactNode; | - |\n| rowExpandable | \u662f\u5426\u5141\u8bb8\u5c55\u5f00| (record)=>Boolean | - |\n| defaultExpandAllRows | \u521d\u59cb\u65f6\uff0c\u662f\u5426\u5c55\u5f00\u6240\u6709\u884c| Boolean | false |\n| defaultExpandedRowKeys | \u521d\u59cb\u65f6\uff0c\u9ed8\u8ba4\u5c55\u5f00\u7684\u884c\trowKey\u6570\u7ec4 | Array | - |\n| expandedRowKeys | \u63a7\u5236\u5c55\u5f00\u7684\u884c\trowKey\u6570\u7ec4 | Array | - |\n| onExpandedRowsChange | \u5c55\u5f00\u7684\u884c\u53d8\u5316\u89e6\u53d1 | (expandedRows)=>void | - |\n| onExpand | \u70b9\u51fb\u5c55\u5f00\u56fe\u6807\u89e6\u53d1 | (expanded,record,index)=>void | - |\n| indentSize | \u63a7\u5236\u6811\u5f62\u7ed3\u6784\u6bcf\u4e00\u5c42\u7684\u7f29\u8fdb\u5bbd\u5ea6 | Number | 16 |\n| childrenColumnName | \u6307\u5b9a\u6811\u5f62\u7ed3\u6784\u7684\u5217\u540d | String | children |\n| isAutoExpanded | \u662f\u5426\u81ea\u52a8\u8bbe\u7f6e\u5c55\u5f00\u6309\u94ae\u4f4d\u7f6e | boolean | true |\n"}}}]);
2
+ //# sourceMappingURL=9699.ea3b566d.chunk.js.map