@uiw/doc 4.18.0 → 4.18.1
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.
- package/package.json +1 -1
- package/web/asset-manifest.json +17 -17
- package/web/index.html +1 -1
- package/web/static/js/{6659.12651144.chunk.js → 6659.372695ec.chunk.js} +2 -2
- package/web/static/js/{6659.12651144.chunk.js.map → 6659.372695ec.chunk.js.map} +1 -1
- package/web/static/js/{6869.b8062d81.chunk.js → 6869.37ce78aa.chunk.js} +2 -2
- package/web/static/js/{6869.b8062d81.chunk.js.map → 6869.37ce78aa.chunk.js.map} +1 -1
- package/web/static/js/{7313.0ebd387c.chunk.js → 7313.1deb78f8.chunk.js} +2 -2
- package/web/static/js/{7313.0ebd387c.chunk.js.map → 7313.1deb78f8.chunk.js.map} +1 -1
- package/web/static/js/{766.1191e07c.chunk.js → 766.743dae68.chunk.js} +2 -2
- package/web/static/js/{766.1191e07c.chunk.js.map → 766.743dae68.chunk.js.map} +1 -1
- package/web/static/js/7970.eba3f785.chunk.js +2 -0
- package/web/static/js/7970.eba3f785.chunk.js.map +1 -0
- package/web/static/js/{9820.1374775d.chunk.js → 9820.39dfb9cc.chunk.js} +2 -2
- package/web/static/js/{9820.1374775d.chunk.js.map → 9820.39dfb9cc.chunk.js.map} +1 -1
- package/web/static/js/9900.4957c035.chunk.js +2 -0
- package/web/static/js/9900.4957c035.chunk.js.map +1 -0
- package/web/static/js/main.57df724b.js +2 -0
- package/web/static/js/main.57df724b.js.map +1 -0
- package/web/static/js/7970.08fc032a.chunk.js +0 -2
- package/web/static/js/7970.08fc032a.chunk.js.map +0 -1
- package/web/static/js/9900.2d8ffaaf.chunk.js +0 -2
- package/web/static/js/9900.2d8ffaaf.chunk.js.map +0 -1
- package/web/static/js/main.5ce44b0e.js +0 -2
- package/web/static/js/main.5ce44b0e.js.map +0 -1
package/package.json
CHANGED
package/web/asset-manifest.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"files": {
|
|
3
3
|
"main.css": "/static/css/main.4664f812.css",
|
|
4
|
-
"main.js": "/static/js/main.
|
|
4
|
+
"main.js": "/static/js/main.57df724b.js",
|
|
5
5
|
"static/css/9200.14abaeb3.chunk.css": "/static/css/9200.14abaeb3.chunk.css",
|
|
6
6
|
"static/js/9200.0a1f7353.chunk.js": "/static/js/9200.0a1f7353.chunk.js",
|
|
7
7
|
"static/css/6730.296853db.chunk.css": "/static/css/6730.296853db.chunk.css",
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
"static/js/8849.d5dd1a61.chunk.js": "/static/js/8849.d5dd1a61.chunk.js",
|
|
176
176
|
"static/js/9147.d6a507a2.chunk.js": "/static/js/9147.d6a507a2.chunk.js",
|
|
177
177
|
"static/js/3769.535a1903.chunk.js": "/static/js/3769.535a1903.chunk.js",
|
|
178
|
-
"static/js/6869.
|
|
178
|
+
"static/js/6869.37ce78aa.chunk.js": "/static/js/6869.37ce78aa.chunk.js",
|
|
179
179
|
"static/js/8709.44b46cf7.chunk.js": "/static/js/8709.44b46cf7.chunk.js",
|
|
180
180
|
"static/js/8312.58a5729e.chunk.js": "/static/js/8312.58a5729e.chunk.js",
|
|
181
181
|
"static/js/9188.b7ce0cf2.chunk.js": "/static/js/9188.b7ce0cf2.chunk.js",
|
|
@@ -185,7 +185,7 @@
|
|
|
185
185
|
"static/js/8915.82c6b45a.chunk.js": "/static/js/8915.82c6b45a.chunk.js",
|
|
186
186
|
"static/js/4781.4def496c.chunk.js": "/static/js/4781.4def496c.chunk.js",
|
|
187
187
|
"static/js/1971.d746cb8b.chunk.js": "/static/js/1971.d746cb8b.chunk.js",
|
|
188
|
-
"static/js/7313.
|
|
188
|
+
"static/js/7313.1deb78f8.chunk.js": "/static/js/7313.1deb78f8.chunk.js",
|
|
189
189
|
"static/js/486.fc977627.chunk.js": "/static/js/486.fc977627.chunk.js",
|
|
190
190
|
"static/js/8586.9d605493.chunk.js": "/static/js/8586.9d605493.chunk.js",
|
|
191
191
|
"static/js/2692.db178ecc.chunk.js": "/static/js/2692.db178ecc.chunk.js",
|
|
@@ -198,23 +198,23 @@
|
|
|
198
198
|
"static/js/745.3a86c62c.chunk.js": "/static/js/745.3a86c62c.chunk.js",
|
|
199
199
|
"static/js/5468.aef3688e.chunk.js": "/static/js/5468.aef3688e.chunk.js",
|
|
200
200
|
"static/js/9057.b21f426b.chunk.js": "/static/js/9057.b21f426b.chunk.js",
|
|
201
|
-
"static/js/766.
|
|
202
|
-
"static/js/7970.
|
|
201
|
+
"static/js/766.743dae68.chunk.js": "/static/js/766.743dae68.chunk.js",
|
|
202
|
+
"static/js/7970.eba3f785.chunk.js": "/static/js/7970.eba3f785.chunk.js",
|
|
203
203
|
"static/js/7664.f92b74f7.chunk.js": "/static/js/7664.f92b74f7.chunk.js",
|
|
204
204
|
"static/js/9961.9db8f620.chunk.js": "/static/js/9961.9db8f620.chunk.js",
|
|
205
205
|
"static/js/3811.ac38cada.chunk.js": "/static/js/3811.ac38cada.chunk.js",
|
|
206
|
-
"static/js/6659.
|
|
206
|
+
"static/js/6659.372695ec.chunk.js": "/static/js/6659.372695ec.chunk.js",
|
|
207
207
|
"static/js/2448.ae6c2b6c.chunk.js": "/static/js/2448.ae6c2b6c.chunk.js",
|
|
208
208
|
"static/js/207.891adb65.chunk.js": "/static/js/207.891adb65.chunk.js",
|
|
209
209
|
"static/js/7861.757503f5.chunk.js": "/static/js/7861.757503f5.chunk.js",
|
|
210
210
|
"static/js/5364.b95913d0.chunk.js": "/static/js/5364.b95913d0.chunk.js",
|
|
211
211
|
"static/js/3931.088517c5.chunk.js": "/static/js/3931.088517c5.chunk.js",
|
|
212
|
-
"static/js/9820.
|
|
212
|
+
"static/js/9820.39dfb9cc.chunk.js": "/static/js/9820.39dfb9cc.chunk.js",
|
|
213
213
|
"static/js/6536.e713d674.chunk.js": "/static/js/6536.e713d674.chunk.js",
|
|
214
214
|
"static/js/6036.289c2eb8.chunk.js": "/static/js/6036.289c2eb8.chunk.js",
|
|
215
215
|
"static/js/8488.4330d151.chunk.js": "/static/js/8488.4330d151.chunk.js",
|
|
216
216
|
"static/js/1151.3c560b1f.chunk.js": "/static/js/1151.3c560b1f.chunk.js",
|
|
217
|
-
"static/js/9900.
|
|
217
|
+
"static/js/9900.4957c035.chunk.js": "/static/js/9900.4957c035.chunk.js",
|
|
218
218
|
"static/js/8747.04252521.chunk.js": "/static/js/8747.04252521.chunk.js",
|
|
219
219
|
"static/js/3450.812a2002.chunk.js": "/static/js/3450.812a2002.chunk.js",
|
|
220
220
|
"static/js/9137.fdbcd423.chunk.js": "/static/js/9137.fdbcd423.chunk.js",
|
|
@@ -226,7 +226,7 @@
|
|
|
226
226
|
"static/js/5183.ac2ca737.js": "/static/js/5183.ac2ca737.js",
|
|
227
227
|
"index.html": "/index.html",
|
|
228
228
|
"main.4664f812.css.map": "/static/css/main.4664f812.css.map",
|
|
229
|
-
"main.
|
|
229
|
+
"main.57df724b.js.map": "/static/js/main.57df724b.js.map",
|
|
230
230
|
"9200.14abaeb3.chunk.css.map": "/static/css/9200.14abaeb3.chunk.css.map",
|
|
231
231
|
"9200.0a1f7353.chunk.js.map": "/static/js/9200.0a1f7353.chunk.js.map",
|
|
232
232
|
"6730.296853db.chunk.css.map": "/static/css/6730.296853db.chunk.css.map",
|
|
@@ -400,7 +400,7 @@
|
|
|
400
400
|
"8849.d5dd1a61.chunk.js.map": "/static/js/8849.d5dd1a61.chunk.js.map",
|
|
401
401
|
"9147.d6a507a2.chunk.js.map": "/static/js/9147.d6a507a2.chunk.js.map",
|
|
402
402
|
"3769.535a1903.chunk.js.map": "/static/js/3769.535a1903.chunk.js.map",
|
|
403
|
-
"6869.
|
|
403
|
+
"6869.37ce78aa.chunk.js.map": "/static/js/6869.37ce78aa.chunk.js.map",
|
|
404
404
|
"8709.44b46cf7.chunk.js.map": "/static/js/8709.44b46cf7.chunk.js.map",
|
|
405
405
|
"8312.58a5729e.chunk.js.map": "/static/js/8312.58a5729e.chunk.js.map",
|
|
406
406
|
"9188.b7ce0cf2.chunk.js.map": "/static/js/9188.b7ce0cf2.chunk.js.map",
|
|
@@ -410,7 +410,7 @@
|
|
|
410
410
|
"8915.82c6b45a.chunk.js.map": "/static/js/8915.82c6b45a.chunk.js.map",
|
|
411
411
|
"4781.4def496c.chunk.js.map": "/static/js/4781.4def496c.chunk.js.map",
|
|
412
412
|
"1971.d746cb8b.chunk.js.map": "/static/js/1971.d746cb8b.chunk.js.map",
|
|
413
|
-
"7313.
|
|
413
|
+
"7313.1deb78f8.chunk.js.map": "/static/js/7313.1deb78f8.chunk.js.map",
|
|
414
414
|
"486.fc977627.chunk.js.map": "/static/js/486.fc977627.chunk.js.map",
|
|
415
415
|
"8586.9d605493.chunk.js.map": "/static/js/8586.9d605493.chunk.js.map",
|
|
416
416
|
"2692.db178ecc.chunk.js.map": "/static/js/2692.db178ecc.chunk.js.map",
|
|
@@ -423,23 +423,23 @@
|
|
|
423
423
|
"745.3a86c62c.chunk.js.map": "/static/js/745.3a86c62c.chunk.js.map",
|
|
424
424
|
"5468.aef3688e.chunk.js.map": "/static/js/5468.aef3688e.chunk.js.map",
|
|
425
425
|
"9057.b21f426b.chunk.js.map": "/static/js/9057.b21f426b.chunk.js.map",
|
|
426
|
-
"766.
|
|
427
|
-
"7970.
|
|
426
|
+
"766.743dae68.chunk.js.map": "/static/js/766.743dae68.chunk.js.map",
|
|
427
|
+
"7970.eba3f785.chunk.js.map": "/static/js/7970.eba3f785.chunk.js.map",
|
|
428
428
|
"7664.f92b74f7.chunk.js.map": "/static/js/7664.f92b74f7.chunk.js.map",
|
|
429
429
|
"9961.9db8f620.chunk.js.map": "/static/js/9961.9db8f620.chunk.js.map",
|
|
430
430
|
"3811.ac38cada.chunk.js.map": "/static/js/3811.ac38cada.chunk.js.map",
|
|
431
|
-
"6659.
|
|
431
|
+
"6659.372695ec.chunk.js.map": "/static/js/6659.372695ec.chunk.js.map",
|
|
432
432
|
"2448.ae6c2b6c.chunk.js.map": "/static/js/2448.ae6c2b6c.chunk.js.map",
|
|
433
433
|
"207.891adb65.chunk.js.map": "/static/js/207.891adb65.chunk.js.map",
|
|
434
434
|
"7861.757503f5.chunk.js.map": "/static/js/7861.757503f5.chunk.js.map",
|
|
435
435
|
"5364.b95913d0.chunk.js.map": "/static/js/5364.b95913d0.chunk.js.map",
|
|
436
436
|
"3931.088517c5.chunk.js.map": "/static/js/3931.088517c5.chunk.js.map",
|
|
437
|
-
"9820.
|
|
437
|
+
"9820.39dfb9cc.chunk.js.map": "/static/js/9820.39dfb9cc.chunk.js.map",
|
|
438
438
|
"6536.e713d674.chunk.js.map": "/static/js/6536.e713d674.chunk.js.map",
|
|
439
439
|
"6036.289c2eb8.chunk.js.map": "/static/js/6036.289c2eb8.chunk.js.map",
|
|
440
440
|
"8488.4330d151.chunk.js.map": "/static/js/8488.4330d151.chunk.js.map",
|
|
441
441
|
"1151.3c560b1f.chunk.js.map": "/static/js/1151.3c560b1f.chunk.js.map",
|
|
442
|
-
"9900.
|
|
442
|
+
"9900.4957c035.chunk.js.map": "/static/js/9900.4957c035.chunk.js.map",
|
|
443
443
|
"8747.04252521.chunk.js.map": "/static/js/8747.04252521.chunk.js.map",
|
|
444
444
|
"3450.812a2002.chunk.js.map": "/static/js/3450.812a2002.chunk.js.map",
|
|
445
445
|
"9137.fdbcd423.chunk.js.map": "/static/js/9137.fdbcd423.chunk.js.map",
|
|
@@ -454,6 +454,6 @@
|
|
|
454
454
|
"static/js/vendors-react.a09f50fb.js",
|
|
455
455
|
"static/js/5183.ac2ca737.js",
|
|
456
456
|
"static/css/main.4664f812.css",
|
|
457
|
-
"static/js/main.
|
|
457
|
+
"static/js/main.57df724b.js"
|
|
458
458
|
]
|
|
459
459
|
}
|
package/web/index.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-react.a09f50fb.js"></script><script defer="defer" src="./static/js/5183.ac2ca737.js"></script><script defer="defer" src="./static/js/main.
|
|
1
|
+
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-react.a09f50fb.js"></script><script defer="defer" src="./static/js/5183.ac2ca737.js"></script><script defer="defer" src="./static/js/main.57df724b.js"></script><link href="./static/css/main.4664f812.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6659],{66659:function(n,e,t){t.r(e),e.default="Table \u8868\u683c\n===\n\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-table/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-table)\n[](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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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 }, {\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);\nReactDOM.render(<Demo />, _mount_);\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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e \n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u70b9\u51fb\u5355\u5143\u683c\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u539f\u59cbHTML\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u9009\u62e9\u548c\u64cd\u4f5c\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\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}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u81ea\u5b9a\u4e49\u5355\u5143\u683c\u7701\u7565\u63d0\u793a\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u65e0\u6570\u636e\u72b6\u6001\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u53ef\u5c55\u5f00\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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};\nReactDOM.render(<Demo />, _mount_);\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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u53ef\u7f16\u8f91\n\n\u5229\u7528 render \u5c5e\u6027, \u4f20\u9012\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5b9e\u73b0\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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};\nReactDOM.render(<Demo />, _mount_);\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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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 type=\"primary\" onClick={()=>setChange(rowData)} disabled={actived !== undefined && !flag}>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, state, canSubmit }) => {\n return (\n <div>\n <Table columns={columns(id, setChange, fields)} data={data} />\n </div>\n )\n }}\n </Form>\n};\nReactDOM.render(<Demo />, _mount_);\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\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)` | - | - |\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\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"}}]);
|
|
2
|
-
//# sourceMappingURL=6659.
|
|
1
|
+
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6659],{66659:function(n,e,t){t.r(e),e.default="Table \u8868\u683c\n===\n\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-table/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-table)\n[](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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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 }, {\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);\nReactDOM.render(<Demo />, _mount_);\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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e \n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u70b9\u51fb\u5355\u5143\u683c\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u539f\u59cbHTML\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u9009\u62e9\u548c\u64cd\u4f5c\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\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}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u81ea\u5b9a\u4e49\u5355\u5143\u683c\u7701\u7565\u63d0\u793a\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u65e0\u6570\u636e\u72b6\u6001\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u53ef\u5c55\u5f00\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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};\nReactDOM.render(<Demo />, _mount_);\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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\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);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u53ef\u7f16\u8f91\n\n\u5229\u7528 render \u5c5e\u6027, \u4f20\u9012\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5b9e\u73b0\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\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};\nReactDOM.render(<Demo />, _mount_);\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\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\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};\nReactDOM.render(<Demo />, _mount_);\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\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)` | - | - |\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\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"}}]);
|
|
2
|
+
//# sourceMappingURL=6659.372695ec.chunk.js.map
|