{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/table","result":{"data":{"current":{"frontmatter":{"title":"Table 表格","order":81,"brief":"表格用于呈现结构化的数据内容，通常会伴随提供对数据进行操作（排序、搜索、分页……）的能力。","icon":"doc-table"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#如何使用","title":"如何使用"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#基本表格","title":"基本表格"},{"url":"#jsx-写法","title":"JSX 写法"},{"url":"#行选择操作","title":"行选择操作"},{"url":"#自定义渲染","title":"自定义渲染"},{"url":"#带分页组件的表格","title":"带分页组件的表格"},{"url":"#拉取远程数据","title":"拉取远程数据"},{"url":"#固定列或表头","title":"固定列或表头"},{"url":"#带排序和过滤功能的表头","title":"带排序和过滤功能的表头"},{"url":"#自定义表头筛选","title":"自定义表头筛选"},{"url":"#自定义筛选器","title":"自定义筛选器"},{"url":"#筛选确认模式","title":"筛选确认模式"},{"url":"#自定义筛选项渲染","title":"自定义筛选项渲染"},{"url":"#可以展开的表格","title":"可以展开的表格","items":[{"url":"#一般可展开行","title":"一般可展开行"},{"url":"#展开按钮渲染为单独列","title":"展开按钮渲染为单独列"},{"url":"#关闭某一行的可展开按钮渲染","title":"关闭某一行的可展开按钮渲染"}]},{"url":"#树形数据展示","title":"树形数据展示","items":[{"url":"#树形数据简单示例","title":"树形数据简单示例"},{"url":"#行可交换的树形数据","title":"行可交换的树形数据"},{"url":"#树形选择","title":"树形选择"}]},{"url":"#自定义行或单元格事件以及属性","title":"自定义行或单元格事件以及属性"},{"url":"#实现斑马纹样式","title":"实现斑马纹样式"},{"url":"#实现表头样式定制","title":"实现表头样式定制"},{"url":"#实现单元格-hover-样式定制","title":"实现单元格 Hover 样式定制"},{"url":"#单元格缩略","title":"单元格缩略"},{"url":"#可伸缩列","title":"可伸缩列","items":[{"url":"#基本伸缩列","title":"基本伸缩列"},{"url":"#进阶的伸缩列","title":"进阶的伸缩列"}]},{"url":"#拖拽排序","title":"拖拽排序"},{"url":"#表格分组","title":"表格分组"},{"url":"#虚拟化表格","title":"虚拟化表格"},{"url":"#无限滚动","title":"无限滚动"},{"url":"#受控的动态表格","title":"受控的动态表格"},{"url":"#完全自定义渲染","title":"完全自定义渲染"},{"url":"#表头合并","title":"表头合并","items":[{"url":"#合并表头配置式写法","title":"合并表头配置式写法"},{"url":"#合并表头-jsx-写法","title":"合并表头 JSX 写法"}]},{"url":"#行列合并","title":"行列合并"}]},{"url":"#api-参考","title":"API 参考"},{"url":"#table","title":"Table"},{"url":"#onheaderrow--onrow-用法","title":"onHeaderRow / onRow 用法"},{"url":"#column","title":"Column"},{"url":"#columnoncell--onheadercell-用法","title":"Column.onCell / onHeaderCell 用法"},{"url":"#rowselection","title":"rowSelection"},{"url":"#scroll","title":"scroll"},{"url":"#pagination","title":"pagination"},{"url":"#resizable","title":"Resizable"},{"url":"#方法","title":"方法"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#rtlltr","title":"RTL/LTR"},{"url":"#文案规范","title":"文案规范"},{"url":"#设计变量","title":"设计变量"},{"url":"#faq","title":"FAQ"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 81,\n  \"category\": \"展示类\",\n  \"title\": \"Table 表格\",\n  \"icon\": \"doc-table\",\n  \"brief\": \"表格用于呈现结构化的数据内容，通常会伴随提供对数据进行操作（排序、搜索、分页……）的能力。\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar Notice = makeShortcode(\"Notice\");\nvar StickyHeaderTable = makeShortcode(\"StickyHeaderTable\");\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u4F7F\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F80 Table \\u4F20\\u5165\\u8868\\u5934 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"columns\"), \" \\u548C\\u6570\\u636E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dataSource\"), \" \\u8FDB\\u884C\\u6E32\\u67D3\\u3002\"), mdx(Notice, {\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, \"\\u8BF7\\u4E3A `dataSource` \\u4E2D\\u7684\\u6BCF\\u4E2A\\u6570\\u636E\\u9879\\u63D0\\u4F9B\\u4E00\\u4E2A\\u4E0E\\u5176\\u4ED6\\u6570\\u636E\\u9879\\u503C\\u4E0D\\u540C\\u7684 `key`\\uFF0C\\u6216\\u8005\\u4F7F\\u7528 `rowKey` \\u53C2\\u6570\\u6307\\u5B9A\\u4E00\\u4E2A\\u4F5C\\u4E3A\\u4E3B\\u952E\\u7684\\u5C5E\\u6027\\u540D\\uFF0C\\u8868\\u683C\\u7684\\u884C\\u9009\\u62E9\\u3001\\u5C55\\u5F00\\u7B49\\u7EDD\\u5927\\u591A\\u6570\\u884C\\u64CD\\u4F5C\\u529F\\u80FD\\u90FD\\u4F1A\\u4F7F\\u7528\\u5230\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import React from 'react';\\nimport { Table, Tag } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n    const columns = [\\n        {\\n            title: '\\u6807\\u9898',\\n            dataIndex: 'name',\\n        },\\n        {\\n            title: '\\u5927\\u5C0F',\\n            dataIndex: 'size',\\n        },\\n        {\\n            title: '\\u6240\\u6709\\u8005',\\n            dataIndex: 'owner',\\n        },\\n        {\\n            title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n            dataIndex: 'updateTime',\\n        },\\n    ];\\n    const data = [\\n        {\\n            key: '1',\\n            name: 'Semi Design \\u8BBE\\u8BA1\\u7A3F.fig',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',\\n            size: '2M',\\n            owner: '\\u59DC\\u9E4F\\u5FD7',\\n            status: 'success',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'grey',\\n        },\\n        {\\n            key: '2',\\n            name: 'Semi Design \\u5206\\u4EAB\\u6F14\\u793A\\u6587\\u7A3F',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '2M',\\n            owner: '\\u90DD\\u5BA3',\\n            status: 'pending',\\n            updateTime: '2020-01-17 05:31',\\n            avatarBg: 'red',\\n        },\\n        {\\n            key: '3',\\n            name: '\\u8BBE\\u8BA1\\u6587\\u6863',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '34KB',\\n            status: 'wait',\\n            owner: 'Zoey Edwards',\\n            updateTime: '2020-01-26 11:01',\\n            avatarBg: 'light-blue',\\n        },\\n    ];\\n\\n    return <Table columns={columns} dataSource={data} pagination={false} />;\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u8868\\u683C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u8868\\u683C\\uFF0C\\u6700\\u57FA\\u672C\\u7684\\u4E24\\u4E2A\\u53C2\\u6570\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dataSource\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"columns\"), \"\\uFF0C\\u524D\\u8005\\u4E3A\\u6570\\u636E\\u9879\\uFF0C\\u540E\\u8005\\u4E3A\\u6BCF\\u5217\\u7684\\u914D\\u7F6E\\uFF0C\\u4E8C\\u8005\\u7686\\u4E3A\\u6570\\u7EC4\\u7C7B\\u578B\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Table, Avatar, Tag } from '@douyinfe/semi-ui';\\nimport { IconMore, IconTickCircle, IconComment, IconClear } from '@douyinfe/semi-icons';\\n\\nfunction App() {\\n    const columns = [\\n        {\\n            title: '\\u6807\\u9898',\\n            dataIndex: 'name',\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar\\n                            size=\\\"small\\\"\\n                            shape=\\\"square\\\"\\n                            src={record.nameIconSrc}\\n                            style={{ marginRight: 12 }}\\n                        ></Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: '\\u5927\\u5C0F',\\n            dataIndex: 'size',\\n        },\\n        {\\n            title: '\\u4EA4\\u4ED8\\u72B6\\u6001',\\n            dataIndex: 'status',\\n            render: (text) => {\\n                const tagConfig = {\\n                    success: { color: 'green', prefixIcon: <IconTickCircle />, text: '\\u5DF2\\u4EA4\\u4ED8' },\\n                    pending: { color: 'pink', prefixIcon: <IconClear />, text: '\\u5DF2\\u5EF6\\u671F' },\\n                    wait: { color: 'cyan', prefixIcon: <IconComment />, text: '\\u5F85\\u8BC4\\u5BA1' },\\n                };\\n                const tagProps = tagConfig[text];\\n                return <Tag shape='circle' {...tagProps} style={{ userSelect: 'text' }}>{tagProps.text}</Tag>;\\n            }\\n        },\\n        {\\n            title: '\\u6240\\u6709\\u8005',\\n            dataIndex: 'owner',\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                            {typeof text === 'string' && text.slice(0, 1)}\\n                        </Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n            dataIndex: 'updateTime',\\n        },\\n        {\\n            title: '',\\n            dataIndex: 'operate',\\n            render: () => {\\n                return <IconMore />;\\n            },\\n        },\\n    ];\\n    const data = [\\n        {\\n            key: '1',\\n            name: 'Semi Design \\u8BBE\\u8BA1\\u7A3F.fig',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',\\n            size: '2M',\\n            owner: '\\u59DC\\u9E4F\\u5FD7',\\n            status: 'success',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'grey',\\n        },\\n        {\\n            key: '2',\\n            name: 'Semi Design \\u5206\\u4EAB\\u6F14\\u793A\\u6587\\u7A3F',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '2M',\\n            owner: '\\u90DD\\u5BA3',\\n            status: 'pending',\\n            updateTime: '2020-01-17 05:31',\\n            avatarBg: 'red',\\n        },\\n        {\\n            key: '3',\\n            name: '\\u8BBE\\u8BA1\\u6587\\u6863',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '34KB',\\n            status: 'wait',\\n            owner: 'Zoey Edwards',\\n            updateTime: '2020-01-26 11:01',\\n            avatarBg: 'light-blue',\\n        },\\n    ];\\n\\n    return <Table columns={columns} dataSource={data} pagination={false} />;\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"JSX \\u5199\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528 JSX \\u8BED\\u6CD5\\u5B9A\\u4E49 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"columns\"), \"\\uFF0C\\u6CE8\\u610F Table \\u4EC5\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"columns\"), \" \\u7684 JSX \\u8BED\\u6CD5\\u5B9A\\u4E49\\u3002\\u4F60\\u4E0D\\u80FD\\u591F\\u4F7F\\u7528\\u4EFB\\u4F55\\u7EC4\\u4EF6\\u5305\\u88F9 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Table.Column\"), \" \\u7EC4\\u4EF6\\u3002\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, \"1. JSX \\u5199\\u6CD5\\u7684\\u8868\\u683C\\u6682\\u65F6\\u4E0D\\u652F\\u6301 resizable \\u529F\\u80FD\\uFF1B\"), mdx(\"div\", null, \"2. \\u4F7F\\u7528 JSX \\u5199\\u6CD5\\u65F6\\uFF0C\\u8BF7\\u4E0D\\u8981\\u4E0E\\u914D\\u7F6E\\u5199\\u6CD5\\u540C\\u65F6\\u4F7F\\u7528\\uFF1B\\u5982\\u679C\\u540C\\u65F6\\u4F7F\\u7528\\uFF0C\\u4EC5\\u914D\\u7F6E\\u5199\\u6CD5\\u751F\\u6548\\uFF0C\\u4E0D\\u4F1A\\u8FDB\\u884C\\u805A\\u5408\\u64CD\\u4F5C\\u3002\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui';\\nimport { IconMore } from '@douyinfe/semi-icons';\\n\\nconst { Column } = Table;\\n\\nfunction App() {\\n    const data = [\\n        {\\n            key: '1',\\n            name: 'Semi Design \\u8BBE\\u8BA1\\u7A3F.fig',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',\\n            size: '2M',\\n            owner: '\\u59DC\\u9E4F\\u5FD7',\\n            status: 'success',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'grey',\\n        },\\n        {\\n            key: '2',\\n            name: 'Semi Design \\u5206\\u4EAB\\u6F14\\u793A\\u6587\\u7A3F',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '2M',\\n            owner: '\\u90DD\\u5BA3',\\n            status: 'pending',\\n            updateTime: '2020-01-17 05:31',\\n            avatarBg: 'red',\\n        },\\n        {\\n            key: '3',\\n            name: '\\u8BBE\\u8BA1\\u6587\\u6863',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '34KB',\\n            status: 'wait',\\n            owner: 'Zoey Edwards',\\n            updateTime: '2020-01-26 11:01',\\n            avatarBg: 'light-blue',\\n        },\\n    ];\\n\\n    const renderName = (text, record, index) => {\\n        return (\\n            <div>\\n                <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={record.nameIconSrc} style={{ marginRight: 12 }}></Avatar>\\n                {text}\\n            </div>\\n        );\\n    };\\n\\n    const renderOwner = (text, record, index) => {\\n        return (\\n            <div>\\n                <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                    {typeof text === 'string' && text.slice(0, 1)}\\n                </Avatar>\\n                {text}\\n            </div>\\n        );\\n    };\\n\\n    return (\\n        <Table dataSource={data} pagination={false}>\\n            <Column title=\\\"\\u6807\\u9898\\\" dataIndex=\\\"name\\\" key=\\\"name\\\" render={renderName} />\\n            <Column title=\\\"\\u5927\\u5C0F\\\" dataIndex=\\\"size\\\" key=\\\"size\\\" />\\n            <Column title=\\\"\\u6240\\u6709\\u8005\\\" dataIndex=\\\"owner\\\" key=\\\"owner\\\" render={renderOwner} />\\n            <Column title=\\\"\\u66F4\\u65B0\\u65F6\\u95F4\\\" dataIndex=\\\"updateTime\\\" key=\\\"updateTime\\\" />\\n            <Column title=\\\"\\\" dataIndex=\\\"operate\\\" key=\\\"operate\\\" render={() => <IconMore />} />\\n        </Table>\\n    );\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u884C\\u9009\\u62E9\\u64CD\\u4F5C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F80 Table \\u4F20\\u5165 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#rowSelection\"\n  }, \"rowSelection\"), \" \\u5373\\u53EF\\u6253\\u5F00\\u6B64\\u529F\\u80FD\\u3002\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u70B9\\u51FB\\u8868\\u5934\\u7684\\u9009\\u62E9\\u6846\\uFF0C\\u4F1A\\u9009\\u62E9 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dataSource\"), \" \\u91CC\\u6240\\u6709\\u4E0D\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"disabled\"), \" \\u72B6\\u6001\\u7684\\u884C\\u3002\\u9009\\u62E9\\u6240\\u6709\\u884C\\u56DE\\u8C03\\u51FD\\u6570\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onSelectAll\"), \"\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u70B9\\u51FB\\u884C\\u7684\\u9009\\u62E9\\u6846\\u4F1A\\u9009\\u4E2D\\u5F53\\u524D\\u884C\\u3002\\u5B83\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onSelect\"), \"\\uFF1B\")), mdx(Notice, {\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, \"1. \\u8BF7\\u52A1\\u5FC5\\u4E3A `dataSource` \\u4E2D\\u6BCF\\u884C\\u6570\\u636E\\u63D0\\u4F9B\\u4E00\\u4E2A\\u4E0E\\u5176\\u4ED6\\u884C\\u503C\\u4E0D\\u540C\\u7684 `key`\\uFF0C\\u6216\\u8005\\u4F7F\\u7528 `rowKey` \\u53C2\\u6570\\u6307\\u5B9A\\u4E00\\u4E2A\\u4F5C\\u4E3A\\u4E3B\\u952E\\u7684\\u5C5E\\u6027\\u540D\\u3002\"), mdx(\"div\", null, \"2. \\u5982\\u4F60\\u9047\\u89C1\\u5728\\u7B2C\\u4E8C\\u9875\\u70B9\\u51FB\\u884C\\u9009\\u62E9\\u540E\\uFF0C\\u56DE\\u5230\\u7B2C\\u4E00\\u9875\\u95EE\\u9898\\uFF0C\\u8BF7\\u68C0\\u67E5\\u7EC4\\u4EF6\\u6E32\\u67D3\\u662F\\u5426\\u89E6\\u53D1\\u4E86 `dataSource` \\u66F4\\u65B0\\uFF08\\u6D45\\u5BF9\\u6BD4\\uFF09\\u3002`dataSource` \\u66F4\\u65B0\\u540E\\uFF0C\\u975E\\u53D7\\u63A7\\u7684\\u7FFB\\u9875\\u5668\\u4F1A\\u56DE\\u5230\\u7B2C\\u4E00\\u9875\\u3002\\u8BF7\\u5C06 `dataSource` \\u653E\\u5728 state \\u5185\\u3002\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Table, Avatar, Tag } from '@douyinfe/semi-ui';\\nimport { IconMore, IconTickCircle, IconComment, IconClear } from '@douyinfe/semi-icons';\\n\\nfunction App() {\\n    const [selectedKeys, setSelectedKeys] = useState([]);\\n\\n    const columns = useMemo(() => [\\n        {\\n            title: '\\u6807\\u9898',\\n            dataIndex: 'name',\\n            width: 400,\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar\\n                            size=\\\"small\\\"\\n                            shape=\\\"square\\\"\\n                            src={record.nameIconSrc}\\n                            style={{ marginRight: 12 }}\\n                        ></Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: '\\u5927\\u5C0F',\\n            dataIndex: 'size',\\n        },\\n        {\\n            title: '\\u4EA4\\u4ED8\\u72B6\\u6001',\\n            dataIndex: 'status',\\n            render: (text) => {\\n                const tagConfig = {\\n                    success: { color: 'green', prefixIcon: <IconTickCircle />, text: '\\u5DF2\\u4EA4\\u4ED8' },\\n                    pending: { color: 'pink', prefixIcon: <IconClear />, text: '\\u5DF2\\u5EF6\\u671F' },\\n                    wait: { color: 'cyan', prefixIcon: <IconComment />, text: '\\u5F85\\u8BC4\\u5BA1' },\\n                };\\n                const tagProps = tagConfig[text];\\n                return <Tag shape='circle' {...tagProps} style={{ userSelect: 'text' }}>{tagProps.text}</Tag>;\\n            }\\n        },\\n        {\\n            title: '\\u6240\\u6709\\u8005',\\n            dataIndex: 'owner',\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                            {typeof text === 'string' && text.slice(0, 1)}\\n                        </Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n            dataIndex: 'updateTime',\\n        },\\n        {\\n            title: '',\\n            dataIndex: 'operate',\\n            render: () => {\\n                return <IconMore />;\\n            },\\n        },\\n    ], []);\\n\\n    const data = useMemo(() => [\\n        {\\n            key: '1',\\n            name: 'Semi Design \\u8BBE\\u8BA1\\u7A3F.fig',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',\\n            size: '2M',\\n            owner: '\\u59DC\\u9E4F\\u5FD7',\\n            status: 'success',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'grey',\\n        },\\n        {\\n            key: '2',\\n            name: 'Semi Design \\u5206\\u4EAB\\u6F14\\u793A\\u6587\\u7A3F',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '2M',\\n            owner: '\\u90DD\\u5BA3',\\n            status: 'pending',\\n            updateTime: '2020-01-17 05:31',\\n            avatarBg: 'red',\\n        },\\n        {\\n            key: '3',\\n            name: '\\u8BBE\\u8BA1\\u6587\\u6863',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '34KB',\\n            status: 'wait',\\n            owner: 'Zoey Edwards',\\n            updateTime: '2020-01-26 11:01',\\n            avatarBg: 'light-blue',\\n        },\\n        {\\n            key: '4',\\n            name: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F.fig',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',\\n            size: '2M',\\n            owner: '\\u59DC\\u9E4F\\u5FD7',\\n            status: 'wait',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'grey',\\n        },\\n        {\\n            key: '5',\\n            name: 'Semi D2C \\u5206\\u4EAB\\u6F14\\u793A\\u6587\\u7A3F',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '2M',\\n            owner: '\\u90DD\\u5BA3',\\n            status: 'pending',\\n            updateTime: '2020-01-17 05:31',\\n            avatarBg: 'red',\\n        },\\n        {\\n            key: '6',\\n            name: 'Semi D2C \\u8BBE\\u8BA1\\u6587\\u6863',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '34KB',\\n            status: 'success',\\n            owner: 'Zoey Edwards',\\n            updateTime: '2020-01-26 11:01',\\n            avatarBg: 'light-blue',\\n        },\\n    ], []);\\n\\n    const rowSelection = {\\n        getCheckboxProps: record => ({\\n            disabled: record.name === '\\u8BBE\\u8BA1\\u6587\\u6863', // Column configuration not to be checked\\n            name: record.name,\\n        }),\\n        onSelect: (record, selected) => {\\n            console.log(`select row: ${selected}`, record);\\n        },\\n        onSelectAll: (selected, selectedRows) => {\\n            console.log(`select all rows: ${selected}`, selectedRows);\\n        },\\n        onChange: (selectedRowKeys, selectedRows) => {\\n            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\\n            setSelectedKeys(selectedRowKeys);\\n        },\\n    };\\n\\n    const pagination = useMemo(\\n        () => ({\\n            pageSize: 3,\\n        }),\\n        []\\n    );\\n\\n    return <Table columns={columns} dataSource={data} rowSelection={rowSelection} pagination={pagination} />;\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u6237\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Column.render\"), \" \\u6765\\u81EA\\u5B9A\\u4E49\\u67D0\\u4E00\\u5217\\u5355\\u5143\\u683C\\u7684\\u6E32\\u67D3\\uFF0C\\u8BE5\\u529F\\u80FD\\u9002\\u7528\\u4E8E\\u9700\\u8981\\u6E32\\u67D3\\u8F83\\u4E3A\\u590D\\u6742\\u7684\\u5355\\u5143\\u683C\\u5185\\u5BB9\\u65F6\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Table, Avatar, Button, Empty, Typography, Tag } from '@douyinfe/semi-ui';\\nimport { IconMore, IconTickCircle, IconComment, IconClear, IconDelete } from '@douyinfe/semi-icons';\\nimport { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';\\nconst { Text } = Typography;\\n\\nconst raw = [\\n    {\\n        key: '1',\\n        name: 'Semi Design \\u8BBE\\u8BA1\\u7A3F\\u6807\\u9898\\u53EF\\u80FD\\u6709\\u70B9\\u957F\\u8FD9\\u65F6\\u5019\\u5E94\\u8BE5\\u663E\\u793A Tooltip.fig',\\n        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',\\n        size: '2M',\\n        owner: '\\u59DC\\u9E4F\\u5FD7',\\n        status: 'success',\\n        updateTime: '2020-02-02 05:13',\\n        avatarBg: 'grey',\\n    },\\n    {\\n        key: '2',\\n        name: 'Semi Design \\u5206\\u4EAB\\u6F14\\u793A\\u6587\\u7A3F',\\n        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n        size: '2M',\\n        owner: '\\u90DD\\u5BA3',\\n        status: 'pending',\\n        updateTime: '2020-01-17 05:31',\\n        avatarBg: 'red',\\n    },\\n    {\\n        key: '3',\\n        name: '\\u8BBE\\u8BA1\\u6587\\u6863',\\n        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n        size: '34KB',\\n        status: 'wait',\\n        owner: 'Zoey Edwards',\\n        updateTime: '2020-01-26 11:01',\\n        avatarBg: 'light-blue',\\n    },\\n    {\\n        key: '4',\\n        name: 'Semi D2C \\u8BBE\\u8BA1\\u6587\\u6863\\u53EF\\u80FD\\u4E5F\\u6709\\u70B9\\u957F\\u6240\\u4EE5\\u4E5F\\u4F1A\\u663E\\u793A Tooltip',\\n        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n        size: '34KB',\\n        status: 'success',\\n        owner: '\\u59DC\\u742A',\\n        updateTime: '2020-01-26 11:01',\\n        avatarBg: 'green',\\n    },\\n];\\n\\nfunction App() {\\n    const [dataSource, setData] = useState(raw);\\n\\n    const removeRecord = key => {\\n        let newDataSource = [...dataSource];\\n        if (key != null) {\\n            let idx = newDataSource.findIndex(data => data.key === key);\\n\\n            if (idx > -1) {\\n                newDataSource.splice(idx, 1);\\n                setData(newDataSource);\\n            }\\n        }\\n    };\\n    const resetData = () => {\\n        const newDataSource = [...raw];\\n        setData(newDataSource);\\n    };\\n\\n    const columns = [\\n        {\\n            title: '\\u6807\\u9898',\\n            dataIndex: 'name',\\n            width: 400,\\n            render: (text, record, index) => {\\n                return (\\n                    <span style={{ display: 'flex', alignItems: 'center' }}>\\n                        <Avatar\\n                            size=\\\"small\\\"\\n                            shape=\\\"square\\\"\\n                            src={record.nameIconSrc}\\n                            style={{ marginRight: 12 }}\\n                        ></Avatar>\\n                        {/* \\u5BBD\\u5EA6\\u8BA1\\u7B97\\u65B9\\u5F0F\\u4E3A\\u5355\\u5143\\u683C\\u8BBE\\u7F6E\\u5BBD\\u5EA6 - \\u975E\\u6587\\u672C\\u5185\\u5BB9\\u5BBD\\u5EA6 */}\\n                        <Text ellipsis={{ showTooltip: true }} style={{ width: 'calc(400px - 76px)' }}>\\n                            {text}\\n                        </Text>\\n                    </span>\\n                );\\n            },\\n        },\\n        {\\n            title: '\\u5927\\u5C0F',\\n            dataIndex: 'size',\\n            width: 150,\\n        },\\n        {\\n            title: '\\u4EA4\\u4ED8\\u72B6\\u6001',\\n            dataIndex: 'status',\\n            render: (text) => {\\n                const tagConfig = {\\n                    success: { color: 'green', prefixIcon: <IconTickCircle />, text: '\\u5DF2\\u4EA4\\u4ED8' },\\n                    pending: { color: 'pink', prefixIcon: <IconClear />, text: '\\u5DF2\\u5EF6\\u671F' },\\n                    wait: { color: 'cyan', prefixIcon: <IconComment />, text: '\\u5F85\\u8BC4\\u5BA1' },\\n                };\\n                const tagProps = tagConfig[text];\\n                return <Tag shape='circle' {...tagProps} style={{ userSelect: 'text' }}>{tagProps.text}</Tag>;\\n            }\\n        },\\n        {\\n            title: '\\u6240\\u6709\\u8005',\\n            dataIndex: 'owner',\\n            width: 300,\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                            {typeof text === 'string' && text.slice(0, 1)}\\n                        </Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n            dataIndex: 'updateTime',\\n            width: 200,\\n        },\\n        {\\n            title: '',\\n            dataIndex: 'operate',\\n            render: (text, record) => (\\n                <Button icon={<IconDelete />} theme=\\\"borderless\\\" onClick={() => removeRecord(record.key)} />\\n            ),\\n        },\\n    ];\\n\\n    const empty = (\\n        <Empty\\n            image={<IllustrationNoResult />}\\n            darkModeImage={<IllustrationNoResultDark />}\\n            description={'\\u641C\\u7D22\\u65E0\\u7ED3\\u679C'}\\n        />\\n    );\\n\\n    return (\\n        <>\\n            <Button onClick={resetData} style={{ marginBottom: 10 }}>\\n                \\u91CD\\u7F6E\\n            </Button>\\n            <Table\\n                style={{ minHeight: 350 }}\\n                columns={columns}\\n                dataSource={dataSource}\\n                pagination={false}\\n                empty={empty}\\n            />\\n        </>\\n    );\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E26\\u5206\\u9875\\u7EC4\\u4EF6\\u7684\\u8868\\u683C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8868\\u683C\\u5206\\u9875\\u76EE\\u524D\\u652F\\u6301\\u4E24\\u79CD\\u6A21\\u5F0F\\uFF1A\\u53D7\\u63A7\\u548C\\u975E\\u53D7\\u63A7\\u6A21\\u5F0F\\u3002\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53D7\\u63A7\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u5206\\u9875\\u7684\\u72B6\\u6001\\u5B8C\\u5168\\u7531\\u5916\\u90E8\\u4F20\\u5165\\uFF0C\\u4F9D\\u636E\\u4E3A\\u662F\\u5426\\u5F80 Table \\u4F20\\u5165\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"pagination.currentPage\"), \" \\u8FD9\\u4E2A\\u5B57\\u6BB5\\u3002\\u4E00\\u822C\\u60C5\\u51B5\\u4E0B\\uFF0C\\u53D7\\u63A7\\u6A21\\u5F0F\\u9002\\u7528\\u4E8E\\u8FDC\\u7A0B\\u62C9\\u53D6\\u6570\\u636E\\u5E76\\u6E32\\u67D3\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u975E\\u53D7\\u63A7\\u6A21\\u5F0F\\u4E0B\\uFF0CTable \\u9ED8\\u8BA4\\u4F1A\\u5C06\\u4F20\\u5165\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dataSource\"), \" \\u957F\\u5EA6\\u4F5C\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"total\"), \" \\u4F20\\u7ED9 Pagination \\u7EC4\\u4EF6\\uFF0C\\u5F53\\u7136\\u4F60\\u4E5F\\u53EF\\u4EE5\\u4F20\\u5165\\u4E00\\u4E2A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"total\"), \" \\u5B57\\u6BB5\\u6765\\u8986\\u76D6 Table \\u7EC4\\u4EF6\\u7684\\u53D6\\u503C\\uFF0C\\u4E0D\\u8FC7\\u6211\\u4EEC\\u5E76\\u4E0D\\u63A8\\u8350\\u7528\\u6237\\u5728\\u975E\\u53D7\\u63A7\\u5206\\u9875\\u6A21\\u5F0F\\u4E0B\\u4F20\\u5165\\u8FD9\\u4E2A\\u5B57\\u6BB5\\u3002\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState, useMemo } from 'react';\\nimport { Table, Avatar, Tag } from '@douyinfe/semi-ui';\\nimport { IconMore, IconTickCircle, IconComment, IconClear, IconDelete } from '@douyinfe/semi-icons';\\nimport * as dateFns from 'date-fns';\\n\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\nconst columns = [\\n    {\\n        title: '\\u6807\\u9898',\\n        dataIndex: 'name',\\n        width: 400,\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n        filters: [\\n            {\\n                text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n            {\\n                text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n        ],\\n        onFilter: (value, record) => record.name.includes(value),\\n    },\\n    {\\n        title: '\\u5927\\u5C0F',\\n        dataIndex: 'size',\\n        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n        render: text => `${text} KB`,\\n    },\\n    {\\n        title: '\\u4EA4\\u4ED8\\u72B6\\u6001',\\n        dataIndex: 'status',\\n        render: (text) => {\\n            const tagConfig = {\\n                success: { color: 'green', prefixIcon: <IconTickCircle />, text: '\\u5DF2\\u4EA4\\u4ED8' },\\n                pending: { color: 'pink', prefixIcon: <IconClear />, text: '\\u5DF2\\u5EF6\\u671F' },\\n                wait: { color: 'cyan', prefixIcon: <IconComment />, text: '\\u5F85\\u8BC4\\u5BA1' },\\n            };\\n            const tagProps = tagConfig[text] || {};\\n            return <Tag shape='circle' {...tagProps} style={{ userSelect: 'text' }}>{tagProps.text}</Tag>;\\n        }\\n    },\\n    {\\n        title: '\\u6240\\u6709\\u8005',\\n        dataIndex: 'owner',\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                        {typeof text === 'string' && text.slice(0, 1)}\\n                    </Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n        dataIndex: 'updateTime',\\n        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n        render: value => {\\n            return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n        },\\n    },\\n];\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\n\\nfunction App() {\\n    const [dataSource, setData] = useState([]);\\n\\n    const rowSelection = useMemo(\\n        () => ({\\n            onChange: (selectedRowKeys, selectedRows) => {\\n                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\\n            },\\n            getCheckboxProps: record => ({\\n                disabled: record.name === 'Michael James', // Column configuration not to be checked\\n                name: record.name,\\n            }),\\n        }),\\n        []\\n    );\\n    const scroll = useMemo(() => ({ y: 300 }), []);\\n\\n    const getData = () => {\\n        const data = [];\\n        for (let i = 0; i < 46; i++) {\\n            const isSemiDesign = i % 2 === 0;\\n            const randomNumber = (i * 1000) % 199;\\n            data.push({\\n                key: '' + i,\\n                name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n                owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                size: randomNumber,\\n                status: isSemiDesign ? 'success' : 'wait',\\n                updateTime: new Date().valueOf() + randomNumber * DAY,\\n                avatarBg: isSemiDesign ? 'grey' : 'red',\\n            });\\n        }\\n        return data;\\n    };\\n\\n    useEffect(() => {\\n        const data = getData();\\n        setData(data);\\n    }, []);\\n\\n    return <Table columns={columns} dataSource={dataSource} rowSelection={rowSelection} scroll={scroll} />;\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u62C9\\u53D6\\u8FDC\\u7A0B\\u6570\\u636E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6B63\\u5E38\\u60C5\\u51B5\\u4E0B\\uFF0C\\u6570\\u636E\\u5F80\\u5F80\\u4E0D\\u662F\\u4E00\\u6B21\\u6027\\u83B7\\u53D6\\u7684\\uFF0C\\u6211\\u4EEC\\u4F1A\\u5728\\u70B9\\u51FB\\u9875\\u7801\\u3001\\u8FC7\\u6EE4\\u5668\\u6216\\u8005\\u6392\\u5E8F\\u6309\\u94AE\\u65F6\\u4ECE\\u63A5\\u53E3\\u91CD\\u65B0\\u83B7\\u53D6\\u6570\\u636E\\uFF0C\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\u8BF7\\u4F7F\\u7528\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u53D7\\u63A7\\u6A21\\u5F0F\"), \"\\u6765\\u5904\\u7406\\u5206\\u9875\\u3002\\u7528\\u6237\\u9700\\u5F80 Table \\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pagination.currentPage\"), \" \\u8FD9\\u4E2A\\u5B57\\u6BB5\\uFF0C\\u6B64\\u65F6\\u5206\\u9875\\u7EC4\\u4EF6\\u7684\\u6E32\\u67D3\\u5B8C\\u5168\\u4F9D\\u8D56\\u4E8E\\u4F20\\u5165\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pagination\"), \" \\u5BF9\\u8C61\\u3002\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, \"1. \\u975E\\u53D7\\u63A7\\u65F6\\uFF0Cpagination \\u5982\\u679C\\u662F\\u5BF9\\u8C61\\u7C7B\\u578B\\u5219\\u4E0D\\u63A8\\u8350\\u4F7F\\u7528\\u5B57\\u9762\\u91CF\\u5199\\u6CD5\\uFF0C\\u539F\\u56E0\\u662F\\u5B57\\u9762\\u91CF\\u5199\\u6CD5\\u4F1A\\u5BFC\\u81F4\\u8868\\u683C\\u6E32\\u67D3\\u81F3\\u521D\\u59CB\\u72B6\\u6001\\uFF08\\u770B\\u8D77\\u6765\\u50CF\\u662F\\u5206\\u9875\\u5668\\u6CA1\\u6709\\u751F\\u6548\\uFF09\\u3002\\u8BF7\\u5C3D\\u91CF\\u5C06\\u5F15\\u7528\\u578B\\u53C2\\u6570\\u5B9A\\u4E49\\u5728 render \\u65B9\\u6CD5\\u4E4B\\u5916\\uFF0C\\u5982\\u679C\\u4F7F\\u7528\\u4E86 hooks \\u8BF7\\u5229\\u7528 useMemo \\u6216 useState \\u8FDB\\u884C\\u5B58\\u50A8\\uFF1B\"), mdx(\"div\", null, \"2. \\u53D7\\u63A7\\u6A21\\u5F0F\\u4E0B\\uFF0CTable \\u4E0D\\u4F1A\\u5BF9 dataSource \\u5206\\u9875\\uFF0C\\u8BF7\\u7ED9 dataSource \\u4F20\\u5165\\u5F53\\u524D\\u9875\\u6570\\u636E\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState, useMemo } from 'react';\\nimport { Table, Avatar, Tag } from '@douyinfe/semi-ui';\\nimport { IconMore, IconTickCircle, IconComment, IconClear, IconDelete } from '@douyinfe/semi-icons';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\nconst pageSize = 5;\\n\\nconst columns = [\\n    {\\n        title: '\\u6807\\u9898',\\n        dataIndex: 'name',\\n        width: 400,\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n        filters: [\\n            {\\n                text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n            {\\n                text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n        ],\\n        onFilter: (value, record) => record.name.includes(value),\\n    },\\n    {\\n        title: '\\u5927\\u5C0F',\\n        dataIndex: 'size',\\n        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n        render: text => `${text} KB`,\\n    },\\n    {\\n        title: '\\u4EA4\\u4ED8\\u72B6\\u6001',\\n        dataIndex: 'status',\\n        render: (text) => {\\n            const tagConfig = {\\n                success: { color: 'green', prefixIcon: <IconTickCircle />, text: '\\u5DF2\\u4EA4\\u4ED8' },\\n                pending: { color: 'pink', prefixIcon: <IconClear />, text: '\\u5DF2\\u5EF6\\u671F' },\\n                wait: { color: 'cyan', prefixIcon: <IconComment />, text: '\\u5F85\\u8BC4\\u5BA1' },\\n            };\\n            const tagProps = tagConfig[text] || {};\\n            return <Tag shape='circle' {...tagProps} style={{ userSelect: 'text' }}>{tagProps.text}</Tag>;\\n        }\\n    },\\n    {\\n        title: '\\u6240\\u6709\\u8005',\\n        dataIndex: 'owner',\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                        {typeof text === 'string' && text.slice(0, 1)}\\n                    </Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n        dataIndex: 'updateTime',\\n        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n        render: value => {\\n            return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n        },\\n    },\\n];\\n\\nconst getData = () => {\\n    const data = [];\\n    for (let i = 0; i < 46; i++) {\\n        const isSemiDesign = i % 2 === 0;\\n        const randomNumber = (i * 1000) % 199;\\n        data.push({\\n            key: '' + i,\\n            name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n            owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n            size: randomNumber,\\n            status: isSemiDesign ? 'success' : 'wait',\\n            updateTime: new Date().valueOf() + randomNumber * DAY,\\n            avatarBg: isSemiDesign ? 'grey' : 'red',\\n        });\\n    }\\n    return data;\\n};\\n\\nconst data = getData();\\n\\nfunction App() {\\n    const [dataSource, setData] = useState([]);\\n    const [loading, setLoading] = useState(false);\\n    const [currentPage, setPage] = useState(1);\\n\\n    const fetchData = (currentPage = 1) => {\\n        setLoading(true);\\n        setPage(currentPage);\\n        return new Promise((res, rej) => {\\n            setTimeout(() => {\\n                const data = getData();\\n                let dataSource = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);\\n                res(dataSource);\\n            }, 300);\\n        }).then(dataSource => {\\n            setLoading(false);\\n            setData(dataSource);\\n        });\\n    };\\n\\n    const handlePageChange = page => {\\n        fetchData(page);\\n    };\\n\\n    useEffect(() => {\\n        fetchData();\\n    }, []);\\n\\n    return (\\n        <Table\\n            columns={columns}\\n            dataSource={dataSource}\\n            pagination={{\\n                currentPage,\\n                pageSize: 5,\\n                total: data.length,\\n                onPageChange: handlePageChange,\\n            }}\\n            loading={loading}\\n        />\\n    );\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u56FA\\u5B9A\\u5217\\u6216\\u8868\\u5934\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E column \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fixed\"), \" \\u5C5E\\u6027\\u4EE5\\u53CA \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"scroll.x\"), \" \\u6765\\u8FDB\\u884C\\u5217\\u56FA\\u5B9A\\uFF0C\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"scroll.y\"), \" \\u6765\\u8FDB\\u884C\\u8868\\u5934\\u56FA\\u5B9A\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u662F\\u56FA\\u5B9A\\u503C\\uFF0C\\u8BBE\\u7F6E\\u4E3A >=\\u6240\\u6709\\u56FA\\u5B9A\\u5217\\u5BBD\\u4E4B\\u548C + \\u6240\\u6709\\u8868\\u683C\\u5217\\u5BBD\\u4E4B\\u548C \\u7684\\u6570\\u503C\\u3002\"), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"ul\", {\n    parentName: \"blockquote\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5EFA\\u8BAE\\u6307\\u5B9A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"scroll.x\"), \" \\u4E3A\\u5927\\u4E8E\\u8868\\u683C\\u5BBD\\u5EA6\\u7684\", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u56FA\\u5B9A\\u503C\"), \"\\u6216\\u767E\\u5206\\u6BD4\\u3002\\u5982\\u679C\\u662F\\u56FA\\u5B9A\\u503C\\uFF0C\\u8BBE\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \">=\\u6240\\u6709\\u56FA\\u5B9A\\u5217\\u5BBD\\u4E4B\\u548C+\\u6240\\u6709\\u8868\\u683C\\u5217\\u5BBD\\u4E4B\\u548C\"), \" \\u7684\\u6570\\u503C\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u82E5\\u5217\\u5934\\u4E0E\\u5185\\u5BB9\\u4E0D\\u5BF9\\u9F50\\u6216\\u51FA\\u73B0\\u5217\\u91CD\\u590D\\u6216\\u8005\\u56FA\\u5B9A\\u5217\\u5931\\u6548\\u7684\\u60C5\\u51B5\\uFF0C\\u8BF7\\u6307\\u5B9A\\u56FA\\u5B9A\\u5217\\u7684\\u5BBD\\u5EA6 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"width\"), \"\\uFF0C\\u82E5\\u6307\\u5B9A\\u5BBD\\u5EA6\\u540E\\u4ECD\\u4E0D\\u751F\\u6548\\uFF0C\\u8BF7\\u5C1D\\u8BD5\\u5EFA\\u8BAE\\u7559\\u4E00\\u5217\\u4E0D\\u8BBE\\u5BBD\\u5EA6\\u4EE5\\u9002\\u5E94\\u5F39\\u6027\\u5E03\\u5C40\\uFF0C\\u6216\\u8005\\u68C0\\u67E5\\u662F\\u5426\\u6709\\u8D85\\u957F\\u8FDE\\u7EED\\u5B57\\u6BB5\\u7834\\u574F\\u5E03\\u5C40\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8BF7\\u786E\\u4FDD\\u8868\\u683C\\u5185\\u90E8\\u7684\\u6240\\u6709\\u5143\\u7D20\\u5728\\u6E32\\u67D3\\u540E\\u4E0D\\u4F1A\\u5BF9\\u5355\\u5143\\u683C\\u7684\\u9AD8\\u5EA6\\u9020\\u6210\\u5F71\\u54CD\\uFF08\\u4F8B\\u5982\\u542B\\u6709\\u672A\\u52A0\\u8F7D\\u5B8C\\u6210\\u7684\\u56FE\\u7247\\u7B49\\uFF09\\uFF0C\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\u8BF7\\u7ED9\\u5B9A\\u5B50\\u5143\\u7D20\\u4E00\\u4E2A\\u786E\\u5B9A\\u7684\\u9AD8\\u5EA6\\uFF0C\\u4EE5\\u6B64\\u786E\\u4FDD\\u5DE6\\u53F3\\u56FA\\u5B9A\\u5217\\u5355\\u5143\\u683C\\u4E0D\\u4F1A\\u9519\\u4E71\\u3002\"))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState, useMemo } from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui';\\nimport { IconMore } from '@douyinfe/semi-icons';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\n\\nconst columns = [\\n    {\\n        title: '\\u6807\\u9898',\\n        dataIndex: 'name',\\n        fixed: true,\\n        width: 250,\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n        filters: [\\n            {\\n                text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n            {\\n                text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n        ],\\n        onFilter: (value, record) => record.name.includes(value),\\n    },\\n    {\\n        title: '\\u5927\\u5C0F',\\n        dataIndex: 'size',\\n        width: 200,\\n        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n        render: text => `${text} KB`,\\n    },\\n    {\\n        title: '\\u6240\\u6709\\u8005',\\n        dataIndex: 'owner',\\n        width: 200,\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                        {typeof text === 'string' && text.slice(0, 1)}\\n                    </Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n        dataIndex: 'updateTime',\\n        width: 200,\\n        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n        render: value => {\\n            return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n        },\\n    },\\n    {\\n        title: '',\\n        dataIndex: 'operate',\\n        fixed: 'right',\\n        align: 'center',\\n        width: 100,\\n        render: () => {\\n            return <IconMore />;\\n        },\\n    },\\n];\\n\\nfunction App() {\\n    const [dataSource, setData] = useState([]);\\n\\n    const scroll = useMemo(() => ({ y: 300, x: 1200 }), []);\\n    const rowSelection = useMemo(\\n        () => ({\\n            onChange: (selectedRowKeys, selectedRows) => {\\n                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\\n            },\\n            getCheckboxProps: record => ({\\n                disabled: record.name === 'Michael James', // Column configuration not to be checked\\n                name: record.name,\\n            }),\\n            fixed: true,\\n        }),\\n        []\\n    );\\n\\n    const getData = () => {\\n        const data = [];\\n        for (let i = 0; i < 46; i++) {\\n            const isSemiDesign = i % 2 === 0;\\n            const randomNumber = (i * 1000) % 199;\\n            data.push({\\n                key: '' + i,\\n                name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n                owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                size: randomNumber,\\n                updateTime: new Date().valueOf() + randomNumber * DAY,\\n                avatarBg: isSemiDesign ? 'grey' : 'red',\\n            });\\n        }\\n        return data;\\n    };\\n\\n    useEffect(() => {\\n        const data = getData();\\n        setData(data);\\n    }, []);\\n\\n    return <Table columns={columns} dataSource={dataSource} rowSelection={rowSelection} scroll={scroll} />;\\n}\\n\\nrender(App);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"sticky\"), \" \\u5C5E\\u6027\\u53EF\\u4EE5\\u5C06\\u8868\\u5934\\u56FA\\u5B9A\\u5728\\u9875\\u9762\\u9876\\u90E8\\u3002v2.21 \\u7248\\u672C\\u652F\\u6301\\u3002\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"top\"), \" \\u65F6\\u53EF\\u4EE5\\u63A7\\u5236\\u8DDD\\u79BB\\u6EDA\\u52A8\\u5BB9\\u5668\\u7684\\u8DDD\\u79BB\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F00\\u542F sticky \\u540E\\uFF0CTable \\u4F1A\\u81EA\\u52A8\\u6253\\u5F00 fixed \\u5E03\\u5C40\\uFF0C\\u5217\\u5BBD\\u5C06\\u7531 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"column.width\"), \" \\u51B3\\u5B9A\\u3002\\u6CA1\\u6709\\u7ED9\\u5B9A width \\u7684\\u5217\\u5BBD\\u7531\\u6D4F\\u89C8\\u5668\\u81EA\\u52A8\\u5206\\u914D\\u3002\"), mdx(StickyHeaderTable, {\n    mdxType: \"StickyHeaderTable\"\n  }), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=false noInline=true dir=\\\"column\\\"\",\n    \"live\": \"false\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState, useMemo } from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui';\\nimport { IconMore } from '@douyinfe/semi-icons';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\n\\nconst columns = [\\n    {\\n        title: '\\u6807\\u9898',\\n        dataIndex: 'name',\\n        fixed: true,\\n        width: 250,\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n        filters: [\\n            {\\n                text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n            {\\n                text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n        ],\\n        onFilter: (value, record) => record.name.includes(value),\\n    },\\n    {\\n        title: '\\u5927\\u5C0F',\\n        dataIndex: 'size',\\n        width: 200,\\n        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n        render: text => `${text} KB`,\\n    },\\n    {\\n        title: '\\u6240\\u6709\\u8005',\\n        dataIndex: 'owner',\\n        width: 200,\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                        {typeof text === 'string' && text.slice(0, 1)}\\n                    </Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n        dataIndex: 'updateTime',\\n        width: 200,\\n        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n        render: value => {\\n            return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n        },\\n    },\\n    {\\n        title: '',\\n        dataIndex: 'operate',\\n        fixed: 'right',\\n        align: 'center',\\n        width: 100,\\n        render: () => {\\n            return <IconMore />;\\n        },\\n    },\\n];\\n\\nfunction App() {\\n    const [dataSource, setData] = useState([]);\\n\\n    const scroll = useMemo(() => ({ y: 300, x: 1200 }), []);\\n    const rowSelection = useMemo(\\n        () => ({\\n            onChange: (selectedRowKeys, selectedRows) => {\\n                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\\n            },\\n            getCheckboxProps: record => ({\\n                disabled: record.name === 'Michael James', // Column configuration not to be checked\\n                name: record.name,\\n            }),\\n            fixed: true,\\n        }),\\n        []\\n    );\\n\\n    const getData = () => {\\n        const data = [];\\n        for (let i = 0; i < 46; i++) {\\n            const isSemiDesign = i % 2 === 0;\\n            const randomNumber = (i * 1000) % 199;\\n            data.push({\\n                key: '' + i,\\n                name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n                owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                size: randomNumber,\\n                updateTime: new Date().valueOf() + randomNumber * DAY,\\n                avatarBg: isSemiDesign ? 'grey' : 'red',\\n            });\\n        }\\n        return data;\\n    };\\n\\n    useEffect(() => {\\n        const data = getData();\\n        setData(data);\\n    }, []);\\n\\n    return (\\n        <Table\\n            sticky={{ top: 60 }}\\n            columns={columns}\\n            dataSource={dataSource}\\n            rowSelection={rowSelection}\\n            scroll={scroll}\\n        />\\n    );\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E26\\u6392\\u5E8F\\u548C\\u8FC7\\u6EE4\\u529F\\u80FD\\u7684\\u8868\\u5934\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8868\\u683C\\u5185\\u90E8\\u96C6\\u6210\\u4E86\\u8FC7\\u6EE4\\u5668\\u548C\\u6392\\u5E8F\\u63A7\\u4EF6\\uFF0C\\u7528\\u6237\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728 Column \\u4E2D\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filters\"), \" \\u4EE5\\u53CA \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onFilter\"), \" \\u5F00\\u542F\\u8868\\u5934\\u7684\\u8FC7\\u6EE4\\u5668\\u63A7\\u4EF6\\u5C55\\u793A\\uFF0C\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"sorter\"), \" \\u5F00\\u542F\\u8868\\u5934\\u7684\\u6392\\u5E8F\\u63A7\\u4EF6\\u7684\\u5C55\\u793A\\u3002\"), mdx(Notice, {\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, \"1. \\u8BF7\\u4E3A `dataSource` \\u4E2D\\u7684\\u6BCF\\u4E2A\\u6570\\u636E\\u9879\\u63D0\\u4F9B\\u4E00\\u4E2A\\u4E0E\\u5176\\u4ED6\\u6570\\u636E\\u9879\\u503C\\u4E0D\\u540C\\u7684 `key`\\uFF0C\\u6216\\u8005\\u4F7F\\u7528 `rowKey` \\u53C2\\u6570\\u6307\\u5B9A\\u4E00\\u4E2A\\u4F5C\\u4E3A\\u4E3B\\u952E\\u7684\\u5C5E\\u6027\\u540D\\uFF0C\\u8868\\u683C\\u7684\\u884C\\u9009\\u62E9\\u3001\\u5C55\\u5F00\\u7B49\\u7EDD\\u5927\\u591A\\u6570\\u884C\\u64CD\\u4F5C\\u529F\\u80FD\\u90FD\\u4F1A\\u4F7F\\u7528\\u5230\\u3002\"), mdx(\"div\", null, \"2. \\u6392\\u5E8F\\u548C\\u7B5B\\u9009\\u5217\\u5FC5\\u987B\\u8BBE\\u7F6E\\u72EC\\u7ACB\\u7684 `dataIndex`\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState, useMemo } from 'react';\\nimport { Table, Avatar, Tag } from '@douyinfe/semi-ui';\\nimport { IconMore, IconTickCircle, IconComment, IconClear, IconDelete } from '@douyinfe/semi-icons';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\n\\nconst columns = [\\n    {\\n        title: '\\u6807\\u9898',\\n        dataIndex: 'name',\\n        width: 400,\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n        filters: [\\n            {\\n                text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n            {\\n                text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n        ],\\n        onFilter: (value, record) => record.name.includes(value),\\n        sorter: (a, b) => (a.name.length - b.name.length > 0 ? 1 : -1),\\n    },\\n    {\\n        title: '\\u5927\\u5C0F',\\n        dataIndex: 'size',\\n        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n        render: text => `${text} KB`,\\n    },\\n    {\\n        title: '\\u4EA4\\u4ED8\\u72B6\\u6001',\\n        dataIndex: 'status',\\n        render: (text) => {\\n            const tagConfig = {\\n                success: { color: 'green', prefixIcon: <IconTickCircle />, text: '\\u5DF2\\u4EA4\\u4ED8' },\\n                pending: { color: 'pink', prefixIcon: <IconClear />, text: '\\u5DF2\\u5EF6\\u671F' },\\n                wait: { color: 'cyan', prefixIcon: <IconComment />, text: '\\u5F85\\u8BC4\\u5BA1' },\\n            };\\n            const tagProps = tagConfig[text];\\n            return <Tag shape='circle' {...tagProps} style={{ userSelect: 'text' }}>{tagProps.text}</Tag>;\\n        }\\n    },\\n    {\\n        title: '\\u6240\\u6709\\u8005',\\n        dataIndex: 'owner',\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                        {typeof text === 'string' && text.slice(0, 1)}\\n                    </Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n        dataIndex: 'updateTime',\\n        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n        render: value => {\\n            return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n        },\\n    },\\n];\\n\\nfunction App() {\\n    const [dataSource, setData] = useState([]);\\n\\n    const rowSelection = useMemo(\\n        () => ({\\n            onChange: (selectedRowKeys, selectedRows) => {\\n                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\\n            },\\n            getCheckboxProps: record => ({\\n                disabled: record.name === 'Michael James', // Column configuration not to be checked\\n                name: record.name,\\n            }),\\n        }),\\n        []\\n    );\\n    const scroll = useMemo(() => ({ y: 300 }), []);\\n\\n    const getData = () => {\\n        const data = [];\\n        for (let i = 0; i < 46; i++) {\\n            const isSemiDesign = i % 2 === 0;\\n            const randomNumber = (i * 1000) % 199;\\n            data.push({\\n                key: '' + i,\\n                name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n                owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                size: randomNumber,\\n                status: isSemiDesign ? 'success' : 'wait',\\n                updateTime: new Date().valueOf() + randomNumber * DAY,\\n                avatarBg: isSemiDesign ? 'grey' : 'red',\\n            });\\n        }\\n        return data;\\n    };\\n\\n    useEffect(() => {\\n        const data = getData();\\n        setData(data);\\n    }, []);\\n\\n    return <Table columns={columns} dataSource={dataSource} rowSelection={rowSelection} scroll={scroll} />;\\n}\\n\\nrender(App);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"sorter \\u4E3A\\u51FD\\u6570\\u7C7B\\u578B\\u65F6\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u51FD\\u6570\\u7684\\u7B2C\\u4E09\\u4E2A\\u53C2\\u6570\\u83B7\\u53D6 sortOrder \\u72B6\\u6001\\u3002\\u51FD\\u6570\\u7C7B\\u578B\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(a?: RecordType, b?: RecordType, sortOrder?: 'ascend' | 'descend') => number\"), \"\\u3002v2.47 \\u7248\\u672C\\u652F\\u6301\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showSortTip\"), \" \\u5C5E\\u6027\\u63A7\\u5236\\u662F\\u5426\\u5C55\\u793A\\u6392\\u5E8F\\u63D0\\u793A\\uFF0C\\u81EA v2.65 \\u7248\\u672C\\u652F\\u6301\\uFF0C\\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \"\\u3002\\u5F53\\u5F00\\u542F\\u63D0\\u793A\\u540E\\uFF0C\\u5F53\\u4EC5\\u6709\\u6392\\u5E8F\\u529F\\u80FD\\u65F6\\u5019\\uFF0C\\u9F20\\u6807\\u79FB\\u52A8\\u81F3\\u8868\\u5934\\u65F6\\uFF0C\\u4F1A\\u5C55\\u793A\\u6392\\u5E8F\\u63D0\\u793A\\uFF1B\\u5176\\u4ED6\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4EC5\\u9F20\\u6807\\u79FB\\u52A8\\u81F3\\u6392\\u5E8F\\u56FE\\u6807\\u65F6\\uFF0C\\u4F1A\\u5C55\\u793A\\u6392\\u5E8F\\u63D0\\u793A\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6CE8\"), \"\\uFF1A\\u5728\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"sortOrder\"), \" \\u5C5E\\u6027\\u53D7\\u63A7\\u6392\\u5E8F\\u65F6\\uFF0C\\u7531\\u4E8E\\u65E0\\u6CD5\\u9884\\u6D4B\\u4E0B\\u4E00\\u4E2A\\u6392\\u5E8F\\u987A\\u5E8F\\uFF0C\\u56E0\\u6B64 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showSortTip\"), \" \\u4E0D\\u751F\\u6548\\uFF0C\\u4E0D\\u4F1A\\u5C55\\u793A\\u63D0\\u793A\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\n\\nfunction App() {\\n    const columns = [\\n        {\\n            title: '\\u6807\\u9898',\\n            dataIndex: 'name',\\n            width: 400,\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            }\\n        },\\n        {\\n            title: '\\u5927\\u5C0F',\\n            dataIndex: 'size',\\n            sorter: (r1, r2, order) => {\\n                const a = r1.size;\\n                const b = r2.size;\\n                if (typeof a === \\\"number\\\" && typeof b === \\\"number\\\") {\\n                    return a - b; // \\u6570\\u5B57\\u6B63\\u5E38\\u6BD4\\u8F83\\u5927\\u5C0F\\n                } else if (typeof a === \\\"undefined\\\") {\\n                    return order === \\\"ascend\\\" ? 1 : -1; // undefined \\u5728\\u540E\\u9762\\n                } else if (typeof b === \\\"undefined\\\") {\\n                    return order === \\\"ascend\\\" ? -1 : 1; // undefined \\u5728\\u540E\\u9762\\n                } else {\\n                    return 0; // \\u4FDD\\u6301\\u539F\\u6765\\u7684\\u987A\\u5E8F\\n                }\\n            },\\n            showSortTip: true,\\n            render: text => text ? `${text} KB` : '\\u672A\\u77E5',\\n        },\\n        {\\n            title: '\\u6240\\u6709\\u8005',\\n            dataIndex: 'owner',\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                            {typeof text === 'string' && text.slice(0, 1)}\\n                        </Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n            dataIndex: 'updateTime',\\n            render: value => {\\n                return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n            },\\n        },\\n    ];\\n\\n    const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\n    const docIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png';\\n\\n    const dataSource = [\\n        {\\n            key: '1',\\n            name: 'Semi Design \\u8BBE\\u8BA1\\u7A3F.fig',\\n            nameIconSrc: figmaIconUrl,\\n            size: 3,\\n            owner: '\\u59DC\\u9E4F\\u5FD7',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'grey',\\n        },\\n        {\\n            key: '2',\\n            name: 'Semi Design \\u5206\\u4EAB\\u6F14\\u793A\\u6587\\u7A3F',\\n            nameIconSrc: docIconUrl,\\n            size: undefined,\\n            owner: '\\u90DD\\u5BA3',\\n            updateTime: '2020-01-17 05:31',\\n            avatarBg: 'red',\\n        },\\n        {\\n            key: '3',\\n            name: '\\u8BBE\\u8BA1\\u6587\\u6863 3',\\n            nameIconSrc: docIconUrl,\\n            size: 1,\\n            owner: 'Zoey Edwards',\\n            updateTime: '2020-01-26 11:01',\\n            avatarBg: 'light-blue',\\n        },\\n        {\\n            key: '4',\\n            name: '\\u8BBE\\u8BA1\\u6587\\u6863 4',\\n            nameIconSrc: docIconUrl,\\n            size: 5,\\n            owner: 'Zoey Edwards',\\n            updateTime: '2020-01-26 11:01',\\n            avatarBg: 'light-blue',\\n        },\\n        {\\n            key: '5',\\n            name: '\\u8BBE\\u8BA1\\u6587\\u6863 5',\\n            nameIconSrc: docIconUrl,\\n            size: undefined,\\n            owner: 'Zoey Edwards',\\n            updateTime: '2020-01-26 11:01',\\n            avatarBg: 'light-blue',\\n        },\\n        {\\n            key: '6',\\n            name: '\\u8BBE\\u8BA1\\u6587\\u6863 6',\\n            nameIconSrc: docIconUrl,\\n            size: 2,\\n            owner: 'Zoey Edwards',\\n            updateTime: '2020-01-26 11:01',\\n            avatarBg: 'light-blue',\\n        },\\n    ];\\n\\n    return <Table columns={columns} dataSource={dataSource} />;\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u8868\\u5934\\u7B5B\\u9009\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u4F60\\u9700\\u8981\\u5C06\\u7B5B\\u9009\\u5668\\u8F93\\u5165\\u6846\\u5C55\\u793A\\u5728\\u8868\\u5934\\uFF0C\\u53EF\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"title\"), \" \\u4F20\\u5165 ReactNode\\uFF0C\\u914D\\u5408 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filteredValue\"), \" \\u4F7F\\u7528\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState, useEffect, useRef } from 'react';\\nimport { Table, Avatar, Input, Space, Tag } from '@douyinfe/semi-ui';\\nimport { IconMore, IconTickCircle, IconComment, IconClear, IconDelete } from '@douyinfe/semi-icons';\\nimport * as dateFns from 'date-fns';\\n\\nfunction App() {\\n    const [dataSource, setData] = useState([]);\\n    const [filteredValue, setFilteredValue] = useState([]);\\n    const compositionRef = useRef({ isComposition: false });\\n\\n    const DAY = 24 * 60 * 60 * 1000;\\n    const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\n\\n\\n    const handleChange = (value) => {\\n        if (compositionRef.current.isComposition) {\\n            return;\\n        }\\n        const newFilteredValue = value ? [value] : [];\\n        setFilteredValue(newFilteredValue);\\n    };\\n    const handleCompositionStart = () => {\\n        compositionRef.current.isComposition = true;\\n    };\\n\\n    const handleCompositionEnd = (event) => {\\n        compositionRef.current.isComposition = false;\\n        const value = event.target.value;\\n        const newFilteredValue = value ? [value] : [];\\n        setFilteredValue(newFilteredValue);\\n    };\\n\\n\\n    const columns = [\\n        {\\n            title: (\\n                <Space>\\n                    <span>\\u6807\\u9898</span>\\n                    <Input\\n                        placeholder=\\\"\\u8BF7\\u8F93\\u5165\\u7B5B\\u9009\\u503C\\\"\\n                        style={{ width: 200 }}\\n                        onCompositionStart={handleCompositionStart}\\n                        onCompositionEnd={handleCompositionEnd}\\n                        onChange={handleChange}\\n                        showClear \\n                    />\\n                </Space>\\n            ),\\n            dataIndex: 'name',\\n            width: 400,\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n            onFilter: (value, record) => record.name.includes(value),\\n            filteredValue,\\n        },\\n        {\\n            title: '\\u5927\\u5C0F',\\n            dataIndex: 'size',\\n            sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n            render: text => `${text} KB`,\\n        },\\n        {\\n            title: '\\u4EA4\\u4ED8\\u72B6\\u6001',\\n            dataIndex: 'status',\\n            render: (text) => {\\n                const tagConfig = {\\n                    success: { color: 'green', prefixIcon: <IconTickCircle />, text: '\\u5DF2\\u4EA4\\u4ED8' },\\n                    pending: { color: 'pink', prefixIcon: <IconClear />, text: '\\u5DF2\\u5EF6\\u671F' },\\n                    wait: { color: 'cyan', prefixIcon: <IconComment />, text: '\\u5F85\\u8BC4\\u5BA1' },\\n                };\\n                const tagProps = tagConfig[text];\\n                return <Tag shape='circle' {...tagProps} style={{ userSelect: 'text' }}>{tagProps.text}</Tag>;\\n            }\\n        },\\n        {\\n            title: '\\u6240\\u6709\\u8005',\\n            dataIndex: 'owner',\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                            {typeof text === 'string' && text.slice(0, 1)}\\n                        </Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n            dataIndex: 'updateTime',\\n            sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n            render: value => {\\n                return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n            },\\n        },\\n    ];\\n\\n    const getData = () => {\\n        const data = [];\\n        for (let i = 0; i < 46; i++) {\\n            const isSemiDesign = i % 2 === 0;\\n            const randomNumber = (i * 1000) % 199;\\n            data.push({\\n                key: '' + i,\\n                name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u9996\\u9875${i}.fig`,\\n                owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                size: randomNumber,\\n                status: isSemiDesign ? 'success' : 'wait',\\n                updateTime: new Date('2024-01-25').valueOf() + randomNumber * DAY,\\n                avatarBg: isSemiDesign ? 'grey' : 'red',\\n            });\\n        }\\n        return data;\\n    };\\n\\n    useEffect(() => {\\n        const data = getData();\\n        setData(data);\\n    }, []);\\n\\n    return <Table columns={columns} dataSource={dataSource} />;\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7B5B\\u9009\\u5668\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderFilterDropdown\"), \" \\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u7B5B\\u9009\\u5668\\u9762\\u677F\\u3002v2.52 \\u652F\\u6301\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u5728\\u7528\\u6237\\u8F93\\u5165\\u7B5B\\u9009\\u503C\\u7684\\u65F6\\u5019\\u8C03\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"setTempFilteredValue\"), \" \\u5B58\\u50A8\\u7B5B\\u9009\\u503C\\uFF0C\\u5728\\u7B5B\\u9009\\u503C\\u8F93\\u5165\\u5B8C\\u6BD5\\u540E\\u8C03\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"confirm\"), \" \\u89E6\\u53D1\\u771F\\u6B63\\u7684\\u7B5B\\u9009\\u3002\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"confirm({ filteredValue })\"), \" \\u76F4\\u63A5\\u7B5B\\u9009\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tempFilteredValue\"), \" \\u7684\\u539F\\u56E0\\u662F\\u5728\\u9700\\u8981\\u5B58\\u50A8\\u4E34\\u65F6\\u7B5B\\u9009\\u503C\\u7684\\u573A\\u666F\\uFF0C\\u4E0D\\u9700\\u8981\\u81EA\\u5DF1\\u58F0\\u660E\\u4E00\\u4E2A state \\u4FDD\\u5B58\\u8FD9\\u4E2A\\u4E34\\u65F6\\u7B5B\\u9009\\u503C\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"type RenderFilterDropdown = (props: RenderFilterDropdownProps) => React.ReactNode;\\ninterface RenderFilterDropdownProps {\\n    /** \\u4E34\\u65F6\\u7B5B\\u9009\\u503C\\uFF0C\\u521D\\u59CB\\u503C\\u4E3A `filteredValue` \\u6216 `defaultFilteredValue`  */\\n    tempFilteredValue: any[];\\n    /** \\u8BBE\\u7F6E\\u4E34\\u65F6\\u7B5B\\u9009\\u503C  */\\n    setTempFilteredValue: (tempFilteredValue: any[]) => void;\\n    /** `confirm` \\u9ED8\\u8BA4\\u4F1A\\u5C06 `tempFilteredValue` \\u8D4B\\u503C\\u7ED9 `filteredValue` \\u5E76\\u89E6\\u53D1 `onChange` \\u4E8B\\u4EF6\\u3002\\u4F60\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7\\u4F20\\u5165 `filteredValue` \\u76F4\\u63A5\\u8BBE\\u7F6E\\u7B5B\\u9009\\u503C  */\\n    confirm: (props?: { closeDropdown?: boolean; filteredValue?: any[] }) => void;\\n    /** \\u6E05\\u9664\\u7B5B\\u9009\\u503C\\u3001\\u4E34\\u65F6\\u7B5B\\u9009\\u503C  */\\n    clear: (props?: { closeDropdown?: boolean }) => void;\\n    /** \\u5173\\u95ED dropdown  */\\n    close: () => void;\\n    /** \\u7B5B\\u9009\\u5668\\u914D\\u7F6E\\u9879\\uFF0C\\u5982\\u4E0D\\u9700\\u8981\\u53EF\\u4EE5\\u4E0D\\u4F20  */\\n    filters?: RenderDropdownProps['filters']\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState, useEffect, useRef } from 'react';\\nimport { Table, Avatar, Input, Button, Space } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\n\\nfunction App() {\\n    const [dataSource, setData] = useState([]);\\n    const inputRef = useRef();\\n\\n    const DAY = 24 * 60 * 60 * 1000;\\n    const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\n\\n    const columns = [\\n        {\\n            title: '\\u6807\\u9898',\\n            dataIndex: 'name',\\n            width: 400,\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n            onFilter: (value, record) => record.name.includes(value),\\n            renderFilterDropdown: (props) => {\\n                console.log('renderFilterDropdown', props);\\n                const { tempFilteredValue, setTempFilteredValue, confirm, clear, close } = props;\\n\\n                const handleChange = value => {\\n                    const filteredValue = value ? [value] : [];\\n                    setTempFilteredValue(filteredValue);\\n                    // \\u4F60\\u4E5F\\u53EF\\u4EE5\\u5728 input value \\u53D8\\u5316\\u65F6\\u76F4\\u63A5\\u7B5B\\u9009\\n                    // confirm({ filteredValue });\\n                };\\n\\n                return (\\n                    <Space vertical align='start' style={{ padding: 8 }}>\\n                        <Input ref={inputRef} value={tempFilteredValue[0]} onChange={handleChange}/>\\n                        <Space>\\n                            <Button onClick={() => confirm({ closeDropdown: true })}>\\u7B5B\\u9009 + \\u5173\\u95ED</Button>\\n                            <Button onClick={() => clear({ closeDropdown: true })}>\\u6E05\\u9664 + \\u5173\\u95ED</Button>\\n                            <Button onClick={() => close()}>\\u76F4\\u63A5\\u5173\\u95ED</Button>\\n                        </Space>\\n                    </Space>\\n                );\\n            },\\n            onFilterDropdownVisibleChange: (visible) => {\\n                console.log('inputRef', visible, inputRef);\\n                if (inputRef.current && inputRef.current.focus) {\\n                    inputRef.current.focus();\\n                }\\n            }\\n        },\\n        {\\n            title: '\\u5927\\u5C0F',\\n            dataIndex: 'size',\\n            sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n            render: text => `${text} KB`,\\n        },\\n        {\\n            title: '\\u6240\\u6709\\u8005',\\n            dataIndex: 'owner',\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                            {typeof text === 'string' && text.slice(0, 1)}\\n                        </Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n            onFilter: (value, record) => record.owner.includes(value),\\n            defaultFilteredValue: ['\\u59DC\\u9E4F\\u5FD7'],\\n            renderFilterDropdown: (props) => {\\n                console.log('renderFilterDropdown', props);\\n                const { tempFilteredValue, setTempFilteredValue, confirm, clear, close } = props;\\n\\n                const handleChange = (value) => {\\n                    if (value) {\\n                        setTempFilteredValue([value]);\\n                    } else {\\n                        setTempFilteredValue([]);\\n                    }\\n                };\\n\\n                return (\\n                    <Space vertical align='start' style={{ padding: 8 }}>\\n                        <Input value={tempFilteredValue[0]} onChange={handleChange}/>\\n                        <Space>\\n                            <Button onClick={() => confirm({ closeDropdown: false })}>\\u7B5B\\u9009\\u540E\\u4E0D\\u5173\\u95ED</Button>\\n                            <Button onClick={() => clear({ closeDropdown: false })}>\\u6E05\\u9664\\u540E\\u4E0D\\u5173\\u95ED</Button>\\n                            <Button onClick={() => close()}>\\u76F4\\u63A5\\u5173\\u95ED</Button>\\n                        </Space>\\n                    </Space>\\n                );\\n            },\\n        },\\n        {\\n            title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n            dataIndex: 'updateTime',\\n            sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n            render: value => {\\n                return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n            },\\n        },\\n    ];\\n\\n    const getData = () => {\\n        const data = [];\\n        for (let i = 0; i < 46; i++) {\\n            const isSemiDesign = i % 2 === 0;\\n            const randomNumber = (i * 1000) % 199;\\n            data.push({\\n                key: '' + i,\\n                name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n                owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                size: randomNumber,\\n                updateTime: new Date().valueOf() + randomNumber * DAY,\\n                avatarBg: isSemiDesign ? 'grey' : 'red',\\n            });\\n        }\\n        return data;\\n    };\\n\\n    useEffect(() => {\\n        const data = getData();\\n        setData(data);\\n    }, []);\\n\\n    return <Table columns={columns} dataSource={dataSource} />;\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7B5B\\u9009\\u786E\\u8BA4\\u6A21\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filterConfirmMode='confirm'\"), \"\\uFF0C\\u53EF\\u4EE5\\u8BA9\\u7B5B\\u9009\\u4E0B\\u62C9\\u9762\\u677F\\u652F\\u6301\\u786E\\u8BA4\\u6A21\\u5F0F\\u3002\\u5728\\u8BE5\\u6A21\\u5F0F\\u4E0B\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u70B9\\u51FB\\u7B5B\\u9009\\u9879\\u4E0D\\u4F1A\\u7ACB\\u5373\\u751F\\u6548\\uFF0C\\u800C\\u662F\\u5148\\u6682\\u5B58\\u5230\\u4E34\\u65F6\\u72B6\\u6001\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E0B\\u62C9\\u9762\\u677F\\u5E95\\u90E8\\u4F1A\\u663E\\u793A\\\"\\u786E\\u5B9A\\\"\\u548C\\\"\\u91CD\\u7F6E\\\"\\u6309\\u94AE\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u70B9\\u51FB\\\"\\u786E\\u5B9A\\\"\\u6309\\u94AE\\u540E\\u624D\\u4F1A\\u5E94\\u7528\\u7B5B\\u9009\\u6761\\u4EF6\\u5E76\\u5173\\u95ED\\u4E0B\\u62C9\\u9762\\u677F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u70B9\\u51FB\\\"\\u91CD\\u7F6E\\\"\\u6309\\u94AE\\u4F1A\\u6062\\u590D\\u5230\\u6253\\u5F00\\u4E0B\\u62C9\\u9762\\u677F\\u65F6\\u7684\\u521D\\u59CB\\u72B6\\u6001\\uFF08\\u4E0D\\u4F1A\\u5173\\u95ED\\u9762\\u677F\\uFF09\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8FD9\\u4E2A\\u529F\\u80FD\\u9002\\u7528\\u4E8E\\u9700\\u8981\\u591A\\u9009\\u7B5B\\u9009\\u6761\\u4EF6\\u540E\\u518D\\u4E00\\u6B21\\u6027\\u5E94\\u7528\\u7684\\u573A\\u666F\\uFF0C\\u907F\\u514D\\u6BCF\\u6B21\\u70B9\\u51FB\\u90FD\\u89E6\\u53D1\\u7B5B\\u9009\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState, useEffect } from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\n\\nfunction App() {\\n    const [dataSource, setData] = useState([]);\\n\\n    const DAY = 24 * 60 * 60 * 1000;\\n    const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\n\\n    const columns = [\\n        {\\n            title: '\\u6807\\u9898',\\n            dataIndex: 'name',\\n            width: 300,\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n            filters: [\\n                {\\n                    text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                    value: 'Semi Design',\\n                },\\n                {\\n                    text: 'Semi Pro \\u8BBE\\u8BA1\\u7A3F',\\n                    value: 'Semi Pro',\\n                },\\n            ],\\n            onFilter: (value, record) => record.name.includes(value),\\n            filterMultiple: true,\\n            // \\u5F00\\u542F\\u7B5B\\u9009\\u786E\\u8BA4\\u6A21\\u5F0F\\n            filterConfirmMode: 'confirm',\\n        },\\n        {\\n            title: '\\u5927\\u5C0F',\\n            dataIndex: 'size',\\n            sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n            render: text => `${text} KB`,\\n        },\\n        {\\n            title: '\\u6240\\u6709\\u8005',\\n            dataIndex: 'owner',\\n            filters: [\\n                {\\n                    text: '\\u59DC\\u9E4F\\u5FD7',\\n                    value: '\\u59DC\\u9E4F\\u5FD7',\\n                },\\n                {\\n                    text: '\\u90DD\\u5BA3',\\n                    value: '\\u90DD\\u5BA3',\\n                },\\n            ],\\n            onFilter: (value, record) => record.owner.includes(value),\\n            filterMultiple: true,\\n            // \\u5F00\\u542F\\u7B5B\\u9009\\u786E\\u8BA4\\u6A21\\u5F0F\\n            filterConfirmMode: 'confirm',\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                            {typeof text === 'string' && text.slice(0, 1)}\\n                        </Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n            dataIndex: 'updateTime',\\n            sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n            render: value => {\\n                return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n            },\\n        },\\n    ];\\n\\n    const getData = () => {\\n        const data = [];\\n        for (let i = 0; i < 20; i++) {\\n            const isSemiDesign = i % 2 === 0;\\n            const randomNumber = (i * 1000) % 199;\\n            data.push({\\n                key: '' + i,\\n                name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi Pro \\u9996\\u9875${i}.fig`,\\n                owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                size: randomNumber,\\n                updateTime: new Date('2024-01-25').valueOf() + randomNumber * DAY,\\n                avatarBg: isSemiDesign ? 'grey' : 'red',\\n            });\\n        }\\n        return data;\\n    };\\n\\n    useEffect(() => {\\n        const data = getData();\\n        setData(data);\\n    }, []);\\n\\n    return <Table columns={columns} dataSource={dataSource} />;\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7B5B\\u9009\\u9879\\u6E32\\u67D3\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u652F\\u6301\\u5F80 column \\u4E2D\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderFilterDropdownItem\"), \" \\u81EA\\u5B9A\\u4E49\\u6BCF\\u4E2A\\u7B5B\\u9009\\u9879\\u7684\\u6E32\\u67D3\\u65B9\\u5F0F\\u3002\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"text: ReactNode\"), \" \\u5F53\\u524D\\u7B5B\\u9009\\u9879\\u7684\\u6587\\u6848\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"value: any\"), \" \\u5F53\\u524D\\u7B5B\\u9009\\u9879\\u7684\\u503C\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"checked: boolean\"), \" \\u5F53\\u524D\\u7B5B\\u9009\\u9879\\u662F\\u5426\\u5DF2\\u7ECF\\u9009\\u4E2D\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"filteredValue: any[]\"), \" \\u5F53\\u524D\\u6240\\u6709\\u7684\\u7B5B\\u9009\\u503C\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"level: number\"), \" \\u5F53\\u524D\\u7B5B\\u9009\\u9879\\u6240\\u5904\\u5C42\\u7EA7\\uFF0C\\u5982\\u679C\\u662F\\u5D4C\\u5957\\u7684\\u7B5B\\u9009\\u9879\\uFF0C\\u8BE5\\u503C\\u4F1A >= 1\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"filterMultiple: boolean\"), \" \\u5F53\\u524D\\u7B5B\\u9009\\u9879\\u662F\\u5426\\u4E3A\\u591A\\u9009\\u3002\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState, useMemo } from 'react';\\nimport { Table, Avatar, Dropdown } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\n\\nconst columns = [\\n    {\\n        title: '\\u6807\\u9898',\\n        dataIndex: 'name',\\n        width: 400,\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n        filters: [\\n            {\\n                text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n            {\\n                text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n        ],\\n        onFilter: (value, record) => record.name.includes(value),\\n        renderFilterDropdownItem: ({ text, checked, onChange }) => (\\n            <Dropdown.Item onClick={onChange} active={checked}>\\n                {text}\\n            </Dropdown.Item>\\n        ),\\n        filterDropdownProps: {\\n            showTick: true,\\n        },\\n        sorter: (a, b) => (a.name.length - b.name.length > 0 ? 1 : -1),\\n    },\\n    {\\n        title: '\\u5927\\u5C0F',\\n        dataIndex: 'size',\\n        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n        render: text => `${text} KB`,\\n    },\\n    {\\n        title: '\\u6240\\u6709\\u8005',\\n        dataIndex: 'owner',\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                        {typeof text === 'string' && text.slice(0, 1)}\\n                    </Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n        dataIndex: 'updateTime',\\n        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n        render: value => {\\n            return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n        },\\n    },\\n];\\n\\nfunction App() {\\n    const [dataSource, setData] = useState([]);\\n\\n    const rowSelection = useMemo(\\n        () => ({\\n            onChange: (selectedRowKeys, selectedRows) => {\\n                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\\n            },\\n            getCheckboxProps: record => ({\\n                disabled: record.name === 'Michael James', // Column configuration not to be checked\\n                name: record.name,\\n            }),\\n        }),\\n        []\\n    );\\n    const scroll = useMemo(() => ({ y: 300 }), []);\\n\\n    const getData = () => {\\n        const data = [];\\n        for (let i = 0; i < 46; i++) {\\n            const isSemiDesign = i % 2 === 0;\\n            const randomNumber = (i * 1000) % 199;\\n            data.push({\\n                key: '' + i,\\n                name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n                owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                size: randomNumber,\\n                updateTime: new Date().valueOf() + randomNumber * DAY,\\n                avatarBg: isSemiDesign ? 'grey' : 'red',\\n            });\\n        }\\n        return data;\\n    };\\n\\n    useEffect(() => {\\n        const data = getData();\\n        setData(data);\\n    }, []);\\n\\n    return <Table columns={columns} dataSource={dataSource} rowSelection={rowSelection} scroll={scroll} />;\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u5C55\\u5F00\\u7684\\u8868\\u683C\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, \"1. \\u5C55\\u5F00\\u6309\\u94AE\\u4F1A\\u9ED8\\u8BA4\\u4E0E\\u7B2C\\u4E00\\u5217\\u6587\\u6848\\u6E32\\u67D3\\u5728\\u540C\\u4E00\\u4E2A\\u5355\\u5143\\u683C\\u5185\\uFF0C\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u5F80 Table \\u4F20\\u5165 hideExpandedColumn=false \\u5C06\\u5C55\\u5F00\\u6309\\u94AE\\u5355\\u72EC\\u4F5C\\u4E3A\\u4E00\\u5217\\u6E32\\u67D3\\uFF1B\"), mdx(\"div\", null, \"2. \\u8BF7\\u52A1\\u5FC5\\u4E3A\\u6BCF\\u884C\\u6570\\u636E\\u63D0\\u4F9B\\u4E00\\u4E2A\\u4E0E\\u5176\\u4ED6\\u884C\\u503C\\u4E0D\\u540C\\u7684 key\\uFF0C\\u6216\\u8005\\u4F7F\\u7528 rowKey \\u53C2\\u6570\\u6307\\u5B9A\\u4E00\\u4E2A\\u4F5C\\u4E3A\\u4E3B\\u952E\\u7684\\u5C5E\\u6027\\u540D\\u3002\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u4E00\\u822C\\u53EF\\u5C55\\u5F00\\u884C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u9700\\u8981\\u6E32\\u67D3\\u53EF\\u4EE5\\u5C55\\u5F00\\u7684\\u8868\\u683C\\uFF0C\\u9664\\u4E86\\u9700\\u8981\\u5728 Table \\u4F20 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"expandedRowRender\"), \" \\u8FD9\\u4E2A\\u65B9\\u6CD5\\u5916\\uFF0C\\u8FD8\\u5FC5\\u987B\\u8981\\u6307\\u5B9A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rowKey\"), \"\\uFF08\\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"key\"), \"\\uFF09\\uFF0CTable \\u4F1A\\u6839\\u636E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rowKey\"), \" \\u53D6\\u5F97\\u884C\\u552F\\u4E00\\u6807\\u8BC6\\u7B26\\u3002\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5982\\u679C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"rowKey\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Function\"), \"\\uFF0C\\u5219\\u4F1A\\u628A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"rowKey(record)\"), \" \\u7684\\u7ED3\\u679C\\u4F5C\\u4E3A\\u884C\\u552F\\u4E00 ID\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5982\\u679C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"rowKey\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"string\"), \" \\u7C7B\\u578B\\uFF0C\\u5219\\u4F1A\\u628A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"record[rowKey]\"), \" \\u4F5C\\u4E3A\\u884C\\u552F\\u4E00 ID\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Table, Avatar, Descriptions, Tag } from '@douyinfe/semi-ui';\\nimport { IconMore } from '@douyinfe/semi-icons';\\n\\nconst columns = [\\n    {\\n        title: '\\u6807\\u9898',\\n        width: 500,\\n        dataIndex: 'name',\\n        render: (text, record, index) => {\\n            return (\\n                <span>\\n                    <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={record.nameIconSrc} style={{ marginRight: 12 }}></Avatar>\\n                    {text}\\n                </span>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u5927\\u5C0F',\\n        dataIndex: 'size',\\n    },\\n    {\\n        title: '\\u6240\\u6709\\u8005',\\n        dataIndex: 'owner',\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                        {typeof text === 'string' && text.slice(0, 1)}\\n                    </Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n        dataIndex: 'updateTime',\\n    },\\n    {\\n        title: '',\\n        dataIndex: 'operate',\\n        render: () => {\\n            return <IconMore />;\\n        },\\n    },\\n];\\n\\nconst data = [\\n    {\\n        key: '1',\\n        name: 'Semi Design \\u8BBE\\u8BA1\\u7A3F.fig',\\n        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',\\n        size: '2M',\\n        owner: '\\u59DC\\u9E4F\\u5FD7',\\n        updateTime: '2020-02-02 05:13',\\n        avatarBg: 'grey',\\n    },\\n    {\\n        key: '2',\\n        name: 'Semi Design \\u5206\\u4EAB\\u6F14\\u793A\\u6587\\u7A3F',\\n        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n        size: '2M',\\n        owner: '\\u90DD\\u5BA3',\\n        updateTime: '2020-01-17 05:31',\\n        avatarBg: 'red',\\n    },\\n    {\\n        key: '3',\\n        name: '\\u8BBE\\u8BA1\\u6587\\u6863',\\n        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n        size: '34KB',\\n        owner: 'Zoey Edwards',\\n        updateTime: '2020-01-26 11:01',\\n        avatarBg: 'light-blue',\\n    },\\n];\\n\\nconst expandData = {\\n    '0': [\\n        { key: '\\u5B9E\\u9645\\u7528\\u6237\\u6570\\u91CF', value: '1,480,000' },\\n        { key: '7 \\u5929\\u7559\\u5B58', value: '98%' },\\n        { key: '\\u5B89\\u5168\\u7B49\\u7EA7', value: '3 \\u7EA7' },\\n        { key: '\\u5782\\u7C7B\\u6807\\u7B7E', value: <Tag style={{ margin: 0 }}>\\u8BBE\\u8BA1</Tag> },\\n        { key: '\\u8BA4\\u8BC1\\u72B6\\u6001', value: '\\u672A\\u8BA4\\u8BC1' },\\n    ],\\n    '1': [\\n        { key: '\\u5B9E\\u9645\\u7528\\u6237\\u6570\\u91CF', value: '2,480,000' },\\n        { key: '7 \\u5929\\u7559\\u5B58', value: '90%' },\\n        { key: '\\u5B89\\u5168\\u7B49\\u7EA7', value: '1 \\u7EA7' },\\n        { key: '\\u5782\\u7C7B\\u6807\\u7B7E', value: <Tag style={{ margin: 0 }}>\\u6A21\\u677F</Tag> },\\n        { key: '\\u8BA4\\u8BC1\\u72B6\\u6001', value: '\\u5DF2\\u8BA4\\u8BC1' },\\n    ],\\n    '2': [\\n        { key: '\\u5B9E\\u9645\\u7528\\u6237\\u6570\\u91CF', value: '2,920,000' },\\n        { key: '7 \\u5929\\u7559\\u5B58', value: '98%' },\\n        { key: '\\u5B89\\u5168\\u7B49\\u7EA7', value: '2 \\u7EA7' },\\n        { key: '\\u5782\\u7C7B\\u6807\\u7B7E', value: <Tag style={{ margin: 0 }}>\\u6587\\u6863</Tag> },\\n        { key: '\\u8BA4\\u8BC1\\u72B6\\u6001', value: '\\u5DF2\\u8BA4\\u8BC1' },\\n    ],\\n};\\n\\nfunction App() {\\n    const expandRowRender = (record, index) => {\\n        return <Descriptions align=\\\"justify\\\" data={expandData[index]} />;\\n    };\\n\\n    const rowSelection = {\\n        getCheckboxProps: record => ({\\n            disabled: record.name === '\\u8BBE\\u8BA1\\u6587\\u6863', // Column configuration not to be checked\\n            name: record.name,\\n        }),\\n        onSelect: (record, selected) => {\\n            console.log(`select row: ${selected}`, record);\\n        },\\n        onSelectAll: (selected, selectedRows) => {\\n            console.log(`select all rows: ${selected}`, selectedRows);\\n        },\\n        onChange: (selectedRowKeys, selectedRows) => {\\n            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\\n        },\\n    };\\n\\n    return (\\n        <Table\\n            rowKey=\\\"name\\\"\\n            columns={columns}\\n            dataSource={data}\\n            expandedRowRender={expandRowRender}\\n            rowSelection={rowSelection}\\n            pagination={false}\\n        />\\n    );\\n}\\n\\nrender(App);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u5C55\\u5F00\\u6309\\u94AE\\u6E32\\u67D3\\u4E3A\\u5355\\u72EC\\u5217\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u60C5\\u51B5\\uFF0C\\u5C55\\u5F00\\u6309\\u94AE\\u4F1A\\u4E0E\\u7B2C\\u4E00\\u5217\\u6587\\u6848\\u6E32\\u67D3\\u5728\\u540C\\u4E00\\u4E2A\\u5355\\u5143\\u683C\\u5185\\uFF0C\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hideExpandedColumn={false}\"), \" \\u6765\\u6E32\\u67D3\\u4E3A\\u5355\\u72EC\\u4E00\\u5217\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Table, Avatar, Descriptions, Tag } from '@douyinfe/semi-ui';\\nimport { IconMore } from '@douyinfe/semi-icons';\\n\\nconst columns = [\\n    {\\n        title: '\\u6807\\u9898',\\n        width: 500,\\n        dataIndex: 'name',\\n        render: (text, record, index) => {\\n            return (\\n                <span>\\n                    <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={record.nameIconSrc} style={{ marginRight: 12 }}></Avatar>\\n                    {text}\\n                </span>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u5927\\u5C0F',\\n        dataIndex: 'size',\\n    },\\n    {\\n        title: '\\u6240\\u6709\\u8005',\\n        dataIndex: 'owner',\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                        {typeof text === 'string' && text.slice(0, 1)}\\n                    </Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n        dataIndex: 'updateTime',\\n    },\\n    {\\n        title: '',\\n        dataIndex: 'operate',\\n        render: () => {\\n            return <IconMore />;\\n        },\\n    },\\n];\\n\\nconst data = [\\n    {\\n        key: '1',\\n        name: 'Semi Design \\u8BBE\\u8BA1\\u7A3F.fig',\\n        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',\\n        size: '2M',\\n        owner: '\\u59DC\\u9E4F\\u5FD7',\\n        updateTime: '2020-02-02 05:13',\\n        avatarBg: 'grey',\\n    },\\n    {\\n        key: '2',\\n        name: 'Semi Design \\u5206\\u4EAB\\u6F14\\u793A\\u6587\\u7A3F',\\n        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n        size: '2M',\\n        owner: '\\u90DD\\u5BA3',\\n        updateTime: '2020-01-17 05:31',\\n        avatarBg: 'red',\\n    },\\n    {\\n        key: '3',\\n        name: '\\u8BBE\\u8BA1\\u6587\\u6863',\\n        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n        size: '34KB',\\n        owner: 'Zoey Edwards',\\n        updateTime: '2020-01-26 11:01',\\n        avatarBg: 'light-blue',\\n    },\\n];\\n\\nconst expandData = {\\n    '0': [\\n        { key: '\\u5B9E\\u9645\\u7528\\u6237\\u6570\\u91CF', value: '1,480,000' },\\n        { key: '7 \\u5929\\u7559\\u5B58', value: '98%' },\\n        { key: '\\u5B89\\u5168\\u7B49\\u7EA7', value: '3 \\u7EA7' },\\n        { key: '\\u5782\\u7C7B\\u6807\\u7B7E', value: <Tag style={{ margin: 0 }}>\\u8BBE\\u8BA1</Tag> },\\n        { key: '\\u8BA4\\u8BC1\\u72B6\\u6001', value: '\\u672A\\u8BA4\\u8BC1' },\\n    ],\\n    '1': [\\n        { key: '\\u5B9E\\u9645\\u7528\\u6237\\u6570\\u91CF', value: '2,480,000' },\\n        { key: '7 \\u5929\\u7559\\u5B58', value: '90%' },\\n        { key: '\\u5B89\\u5168\\u7B49\\u7EA7', value: '1 \\u7EA7' },\\n        { key: '\\u5782\\u7C7B\\u6807\\u7B7E', value: <Tag style={{ margin: 0 }}>\\u6A21\\u677F</Tag> },\\n        { key: '\\u8BA4\\u8BC1\\u72B6\\u6001', value: '\\u5DF2\\u8BA4\\u8BC1' },\\n    ],\\n    '2': [\\n        { key: '\\u5B9E\\u9645\\u7528\\u6237\\u6570\\u91CF', value: '2,920,000' },\\n        { key: '7 \\u5929\\u7559\\u5B58', value: '98%' },\\n        { key: '\\u5B89\\u5168\\u7B49\\u7EA7', value: '2 \\u7EA7' },\\n        { key: '\\u5782\\u7C7B\\u6807\\u7B7E', value: <Tag style={{ margin: 0 }}>\\u6587\\u6863</Tag> },\\n        { key: '\\u8BA4\\u8BC1\\u72B6\\u6001', value: '\\u5DF2\\u8BA4\\u8BC1' },\\n    ],\\n};\\n\\nfunction App() {\\n    const expandRowRender = (record, index) => {\\n        return <Descriptions align=\\\"justify\\\" data={expandData[index]} />;\\n    };\\n\\n    const rowSelection = {\\n        getCheckboxProps: record => ({\\n            disabled: record.name === '\\u8BBE\\u8BA1\\u6587\\u6863', // Column configuration not to be checked\\n            name: record.name,\\n        }),\\n        onSelect: (record, selected) => {\\n            console.log(`select row: ${selected}`, record);\\n        },\\n        onSelectAll: (selected, selectedRows) => {\\n            console.log(`select all rows: ${selected}`, selectedRows);\\n        },\\n        onChange: (selectedRowKeys, selectedRows) => {\\n            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\\n        },\\n    };\\n\\n    return (\\n        <Table\\n            rowKey=\\\"name\\\"\\n            columns={columns}\\n            dataSource={data}\\n            expandedRowRender={expandRowRender}\\n            hideExpandedColumn={false}\\n            rowSelection={rowSelection}\\n            pagination={false}\\n        />\\n    );\\n}\\n\\nrender(App);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u5173\\u95ED\\u67D0\\u4E00\\u884C\\u7684\\u53EF\\u5C55\\u5F00\\u6309\\u94AE\\u6E32\\u67D3\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rowExpandable\"), \" \\u65B9\\u6CD5\\uFF0C\\u5165\\u53C2\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"record\"), \"\\uFF0C\\u5224\\u65AD\\u8FD4\\u56DE\\u503C\\u662F\\u5426\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \" \\u6765\\u5173\\u95ED\\u67D0\\u4E00\\u884C\\u7684\\u53EF\\u5C55\\u5F00\\u6309\\u94AE\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Table, Avatar, Descriptions, Tag } from '@douyinfe/semi-ui';\\nimport { IconMore } from '@douyinfe/semi-icons';\\n\\nconst columns = [\\n    {\\n        title: '\\u6807\\u9898',\\n        width: 500,\\n        dataIndex: 'name',\\n        render: (text, record, index) => {\\n            return (\\n                <span>\\n                    <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={record.nameIconSrc} style={{ marginRight: 12 }}></Avatar>\\n                    {text}\\n                </span>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u5927\\u5C0F',\\n        dataIndex: 'size',\\n    },\\n    {\\n        title: '\\u6240\\u6709\\u8005',\\n        dataIndex: 'owner',\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                        {typeof text === 'string' && text.slice(0, 1)}\\n                    </Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n        dataIndex: 'updateTime',\\n    },\\n    {\\n        title: '',\\n        dataIndex: 'operate',\\n        render: () => {\\n            return <IconMore />;\\n        },\\n    },\\n];\\n\\nconst data = [\\n    {\\n        key: '1',\\n        name: 'Semi Design \\u8BBE\\u8BA1\\u7A3F.fig',\\n        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',\\n        size: '2M',\\n        owner: '\\u59DC\\u9E4F\\u5FD7',\\n        updateTime: '2020-02-02 05:13',\\n        avatarBg: 'grey',\\n    },\\n    {\\n        key: '2',\\n        name: 'Semi Design \\u5206\\u4EAB\\u6F14\\u793A\\u6587\\u7A3F',\\n        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n        size: '2M',\\n        owner: '\\u90DD\\u5BA3',\\n        updateTime: '2020-01-17 05:31',\\n        avatarBg: 'red',\\n    },\\n    {\\n        key: '3',\\n        name: '\\u8BBE\\u8BA1\\u6587\\u6863',\\n        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n        size: '34KB',\\n        owner: 'Zoey Edwards',\\n        updateTime: '2020-01-26 11:01',\\n        avatarBg: 'light-blue',\\n    },\\n];\\n\\nconst expandData = {\\n    '0': [\\n        { key: '\\u5B9E\\u9645\\u7528\\u6237\\u6570\\u91CF', value: '1,480,000' },\\n        { key: '7 \\u5929\\u7559\\u5B58', value: '98%' },\\n        { key: '\\u5B89\\u5168\\u7B49\\u7EA7', value: '3 \\u7EA7' },\\n        { key: '\\u5782\\u7C7B\\u6807\\u7B7E', value: <Tag style={{ margin: 0 }}>\\u8BBE\\u8BA1</Tag> },\\n        { key: '\\u8BA4\\u8BC1\\u72B6\\u6001', value: '\\u672A\\u8BA4\\u8BC1' },\\n    ],\\n    '1': [\\n        { key: '\\u5B9E\\u9645\\u7528\\u6237\\u6570\\u91CF', value: '2,480,000' },\\n        { key: '7 \\u5929\\u7559\\u5B58', value: '90%' },\\n        { key: '\\u5B89\\u5168\\u7B49\\u7EA7', value: '1 \\u7EA7' },\\n        { key: '\\u5782\\u7C7B\\u6807\\u7B7E', value: <Tag style={{ margin: 0 }}>\\u6A21\\u677F</Tag> },\\n        { key: '\\u8BA4\\u8BC1\\u72B6\\u6001', value: '\\u5DF2\\u8BA4\\u8BC1' },\\n    ],\\n    '2': [\\n        { key: '\\u5B9E\\u9645\\u7528\\u6237\\u6570\\u91CF', value: '2,920,000' },\\n        { key: '7 \\u5929\\u7559\\u5B58', value: '98%' },\\n        { key: '\\u5B89\\u5168\\u7B49\\u7EA7', value: '2 \\u7EA7' },\\n        { key: '\\u5782\\u7C7B\\u6807\\u7B7E', value: <Tag style={{ margin: 0 }}>\\u6587\\u6863</Tag> },\\n        { key: '\\u8BA4\\u8BC1\\u72B6\\u6001', value: '\\u5DF2\\u8BA4\\u8BC1' },\\n    ],\\n};\\n\\nfunction App() {\\n    const expandRowRender = (record, index) => {\\n        return <Descriptions align=\\\"justify\\\" data={expandData[index]} />;\\n    };\\n\\n    const rowSelection = {\\n        getCheckboxProps: record => ({\\n            disabled: record.name === '\\u8BBE\\u8BA1\\u6587\\u6863', // Column configuration not to be checked\\n            name: record.name,\\n        }),\\n        onSelect: (record, selected) => {\\n            console.log(`select row: ${selected}`, record);\\n        },\\n        onSelectAll: (selected, selectedRows) => {\\n            console.log(`select all rows: ${selected}`, selectedRows);\\n        },\\n        onChange: (selectedRowKeys, selectedRows) => {\\n            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\\n        },\\n    };\\n\\n    return (\\n        <Table\\n            rowKey=\\\"name\\\"\\n            columns={columns}\\n            dataSource={data}\\n            expandedRowRender={expandRowRender}\\n            rowExpandable={record => record.name !== '\\u8BBE\\u8BA1\\u6587\\u6863'}\\n            hideExpandedColumn={false}\\n            rowSelection={rowSelection}\\n            pagination={false}\\n        />\\n    );\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6811\\u5F62\\u6570\\u636E\\u5C55\\u793A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8868\\u683C\\u652F\\u6301\\u6811\\u5F62\\u6570\\u636E\\u7684\\u5C55\\u793A\\uFF0C\\u5F53\\u6570\\u636E\\u4E2D\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"children\"), \" \\u5B57\\u6BB5\\u65F6\\u4F1A\\u81EA\\u52A8\\u5C55\\u793A\\u4E3A\\u6811\\u5F62\\u8868\\u683C\\uFF0C\\u5982\\u679C\\u4E0D\\u9700\\u8981\\u6216\\u4F7F\\u7528\\u5176\\u4ED6\\u5B57\\u6BB5\\u53EF\\u4EE5\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"childrenRecordName\"), \" \\u8FDB\\u884C\\u914D\\u7F6E\\u3002\\u53E6\\u5916\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"indentSize\"), \" \\u4EE5\\u63A7\\u5236\\u6BCF\\u4E00\\u5C42\\u7684\\u7F29\\u8FDB\\u5BBD\\u5EA6\\u3002\"), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6CE8\\u610F\\uFF1A\"), \"\\u8BF7\\u52A1\\u5FC5\\u4E3A\\u6BCF\\u884C\\u6570\\u636E\\u63D0\\u4F9B\\u4E00\\u4E2A\\u4E0E\\u5176\\u4ED6\\u884C\\u503C\\u4E0D\\u540C\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"key\"), \"\\uFF0C\\u6216\\u8005\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rowKey\"), \" \\u53C2\\u6570\\u6307\\u5B9A\\u4E00\\u4E2A\\u4F5C\\u4E3A\\u4E3B\\u952E\\u7684\\u5C5E\\u6027\\u540D\\u3002\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u6811\\u5F62\\u6570\\u636E\\u7B80\\u5355\\u793A\\u4F8B\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Table } from '@douyinfe/semi-ui';\\n\\nfunction App() {\\n    const columns = [\\n        {\\n            title: 'Key',\\n            dataIndex: 'dataKey',\\n            key: 'dataKey',\\n        },\\n        {\\n            title: '\\u540D\\u79F0',\\n            dataIndex: 'name',\\n            key: 'name',\\n            width: 200,\\n        },\\n        {\\n            title: '\\u6570\\u636E\\u7C7B\\u578B',\\n            dataIndex: 'type',\\n            key: 'type',\\n            width: 400,\\n        },\\n        {\\n            title: '\\u63CF\\u8FF0',\\n            dataIndex: 'description',\\n            key: 'description',\\n        },\\n        {\\n            title: '\\u9ED8\\u8BA4\\u503C',\\n            dataIndex: 'default',\\n            key: 'default',\\n            width: 100,\\n        },\\n    ];\\n\\n    const data = [\\n        {\\n            key: 1,\\n            dataKey: 'videos_info',\\n            name: '\\u89C6\\u9891\\u4FE1\\u606F',\\n            type: 'Object \\u5BF9\\u8C61',\\n            description: '\\u89C6\\u9891\\u7684\\u5143\\u4FE1\\u606F',\\n            default: '\\u65E0',\\n            children: [\\n                {\\n                    key: 11,\\n                    dataKey: 'status',\\n                    name: '\\u89C6\\u9891\\u72B6\\u6001',\\n                    type: 'Enum <Integer> \\u679A\\u4E3E',\\n                    description: '\\u89C6\\u9891\\u7684\\u53EF\\u89C1\\u3001\\u63A8\\u8350\\u72B6\\u6001',\\n                    default: '1',\\n                },\\n                {\\n                    key: 12,\\n                    dataKey: 'vid',\\n                    name: '\\u89C6\\u9891 ID',\\n                    type: 'String \\u5B57\\u7B26\\u4E32',\\n                    description: '\\u6807\\u8BC6\\u89C6\\u9891\\u7684\\u552F\\u4E00 ID',\\n                    default: '\\u65E0',\\n                    children: [\\n                        {\\n                            dataKey: 'video_url',\\n                            name: '\\u89C6\\u9891\\u5730\\u5740',\\n                            type: 'String \\u5B57\\u7B26\\u4E32',\\n                            description: '\\u89C6\\u9891\\u7684\\u552F\\u4E00\\u94FE\\u63A5',\\n                            default: '\\u65E0',\\n                        },\\n                    ],\\n                },\\n            ],\\n        },\\n        {\\n            key: 2,\\n            dataKey: 'text_info',\\n            name: '\\u6587\\u672C\\u4FE1\\u606F',\\n            type: 'Object \\u5BF9\\u8C61',\\n            description: '\\u89C6\\u9891\\u7684\\u5143\\u4FE1\\u606F',\\n            default: '\\u65E0',\\n            children: [\\n                {\\n                    key: 21,\\n                    dataKey: 'title',\\n                    name: '\\u89C6\\u9891\\u6807\\u9898',\\n                    type: 'String \\u5B57\\u7B26\\u4E32',\\n                    description: '\\u89C6\\u9891\\u7684\\u6807\\u9898',\\n                    default: '\\u65E0',\\n                },\\n                {\\n                    key: 22,\\n                    dataKey: 'video_description',\\n                    name: '\\u89C6\\u9891\\u63CF\\u8FF0',\\n                    type: 'String \\u5B57\\u7B26\\u4E32',\\n                    description: '\\u89C6\\u9891\\u7684\\u63CF\\u8FF0',\\n                    default: '\\u65E0',\\n                },\\n            ],\\n        },\\n    ];\\n\\n    return <Table columns={columns} defaultExpandAllRows dataSource={data} />;\\n}\\n\\nrender(App);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u884C\\u53EF\\u4EA4\\u6362\\u7684\\u6811\\u5F62\\u6570\\u636E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u6539\\u53D8 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dataSource\"), \" \\u5143\\u7D20\\u7684\\u987A\\u5E8F\\u6765\\u5B9E\\u73B0\\u884C\\u4EA4\\u6362\\u64CD\\u4F5C\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState } from 'react';\\nimport { Table, Button } from '@douyinfe/semi-ui';\\nimport { IconArrowUp, IconArrowDown } from '@douyinfe/semi-icons';\\n\\nconst raw = [\\n    {\\n        key: 1,\\n        dataKey: 'videos_info',\\n        name: '\\u89C6\\u9891\\u4FE1\\u606F',\\n        type: 'Object \\u5BF9\\u8C61',\\n        description: '\\u89C6\\u9891\\u7684\\u5143\\u4FE1\\u606F',\\n        default: '\\u65E0',\\n        children: [\\n            {\\n                key: 11,\\n                dataKey: 'status',\\n                name: '\\u89C6\\u9891\\u72B6\\u6001',\\n                type: 'Enum <Integer> \\u679A\\u4E3E',\\n                description: '\\u89C6\\u9891\\u7684\\u53EF\\u89C1\\u3001\\u63A8\\u8350\\u72B6\\u6001',\\n                default: '1',\\n            },\\n            {\\n                key: 12,\\n                dataKey: 'vid',\\n                name: '\\u89C6\\u9891 ID',\\n                type: 'String \\u5B57\\u7B26\\u4E32',\\n                description: '\\u6807\\u8BC6\\u89C6\\u9891\\u7684\\u552F\\u4E00 ID',\\n                default: '\\u65E0',\\n                children: [\\n                    {\\n                        dataKey: 'video_url',\\n                        name: '\\u89C6\\u9891\\u5730\\u5740',\\n                        type: 'String \\u5B57\\u7B26\\u4E32',\\n                        description: '\\u89C6\\u9891\\u7684\\u552F\\u4E00\\u94FE\\u63A5',\\n                        default: '\\u65E0',\\n                    },\\n                ],\\n            },\\n        ],\\n    },\\n    {\\n        key: 2,\\n        dataKey: 'text_info',\\n        name: '\\u6587\\u672C\\u4FE1\\u606F',\\n        type: 'Object \\u5BF9\\u8C61',\\n        description: '\\u89C6\\u9891\\u7684\\u5143\\u4FE1\\u606F',\\n        default: '\\u65E0',\\n        children: [\\n            {\\n                key: 21,\\n                dataKey: 'title',\\n                name: '\\u89C6\\u9891\\u6807\\u9898',\\n                type: 'String \\u5B57\\u7B26\\u4E32',\\n                description: '\\u89C6\\u9891\\u7684\\u6807\\u9898',\\n                default: '\\u65E0',\\n            },\\n            {\\n                key: 22,\\n                dataKey: 'video_description',\\n                name: '\\u89C6\\u9891\\u63CF\\u8FF0',\\n                type: 'String \\u5B57\\u7B26\\u4E32',\\n                description: '\\u89C6\\u9891\\u7684\\u63CF\\u8FF0',\\n                default: '\\u65E0',\\n            },\\n        ],\\n    },\\n];\\n\\nconst rowKey = 'key';\\nconst childrenRecordName = 'children';\\n\\nfunction App() {\\n    const [expandedRowKeys, setExpandedRowKeys] = useState([1, 2]);\\n    const [data, setData] = useState(raw);\\n\\n    const switchRecord = (key1, key2) => {\\n        const newData = [...data];\\n\\n        if (key1 != null && key2 != null) {\\n            const item1 = findRecordByKey(key1, newData);\\n            const item2 = findRecordByKey(key2, newData);\\n\\n            // you have to copy item1 and item2 first\\n            const copiedItem1 = { ...item1 };\\n            const copiedItem2 = { ...item2 };\\n\\n            coverRecord(item1, copiedItem2);\\n            coverRecord(item2, copiedItem1);\\n\\n            setData(newData);\\n        }\\n    };\\n\\n    const findRecordByKey = (key, data) => {\\n        if (Array.isArray(data) && data.length && key != null) {\\n            for (let item of data) {\\n                if (item[rowKey] === key) {\\n                    return item;\\n                }\\n\\n                const children = item[childrenRecordName];\\n                if (Array.isArray(children) && children.length) {\\n                    const item = findRecordByKey(key, children);\\n\\n                    if (item != null) {\\n                        return item;\\n                    }\\n                }\\n            }\\n        }\\n    };\\n\\n    const coverRecord = (obj, srcObj) => {\\n        if (obj && typeof obj === 'object' && srcObj && typeof srcObj === 'object') {\\n            const srcKeys = Object.keys(srcObj);\\n            const copied = { ...srcObj };\\n\\n            Object.assign(obj, copied);\\n\\n            Object.keys(obj).forEach(key => {\\n                if (!srcKeys.includes(key)) {\\n                    delete obj[key];\\n                }\\n            });\\n        }\\n\\n        return obj;\\n    };\\n\\n    const getSameLevelRecords = (key, data = []) => {\\n        if (key != null && Array.isArray(data) && data.length) {\\n            if (data.find(item => item[rowKey] === key)) {\\n                return data;\\n            }\\n            for (let item of data) {\\n                const records = getSameLevelRecords(key, item[childrenRecordName]);\\n\\n                if (records.length) {\\n                    return records;\\n                }\\n            }\\n        }\\n        return [];\\n    };\\n\\n    const columns = [\\n        {\\n            title: 'Key',\\n            dataIndex: 'dataKey',\\n            key: 'dataKey',\\n        },\\n        {\\n            title: '\\u540D\\u79F0',\\n            dataIndex: 'name',\\n            key: 'name',\\n            width: 200,\\n        },\\n        {\\n            title: '\\u6570\\u636E\\u7C7B\\u578B',\\n            dataIndex: 'type',\\n            key: 'type',\\n        },\\n        {\\n            title: '\\u63CF\\u8FF0',\\n            dataIndex: 'description',\\n            key: 'description',\\n        },\\n        {\\n            title: '\\u9ED8\\u8BA4\\u503C',\\n            dataIndex: 'default',\\n            key: 'default',\\n            width: 100,\\n        },\\n        {\\n            key: 'operation',\\n            render: record => {\\n                const records = getSameLevelRecords(record[rowKey], data);\\n                const index = records.findIndex(item => item[rowKey] === record[rowKey]);\\n                const upProps = {};\\n                const downProps = {};\\n\\n                if (index > 0) {\\n                    const upRow = records[index - 1];\\n                    upProps.onClick = () => switchRecord(record[rowKey], upRow[rowKey]);\\n                } else {\\n                    upProps.disabled = true;\\n                }\\n\\n                if (index < records.length - 1) {\\n                    const downRow = records[index + 1];\\n                    downProps.onClick = () => switchRecord(record[rowKey], downRow[rowKey]);\\n                } else {\\n                    downProps.disabled = true;\\n                }\\n\\n                return (\\n                    <>\\n                        <Button icon={<IconArrowUp />} {...upProps} />\\n                        <Button icon={<IconArrowDown />} {...downProps} />\\n                    </>\\n                );\\n            },\\n        },\\n    ];\\n\\n    return (\\n        <Table\\n            columns={columns}\\n            dataSource={data}\\n            rowKey={rowKey}\\n            childrenRecordName={childrenRecordName}\\n            expandedRowKeys={expandedRowKeys}\\n            onExpandedRowsChange={rows => setExpandedRowKeys(rows.map(item => item[rowKey]))}\\n        />\\n    );\\n}\\n\\nrender(App);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u6811\\u5F62\\u9009\\u62E9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\\u8868\\u683C\\u7684\\u884C\\u9009\\u4E2D\\u662F\\u5404\\u81EA\\u72EC\\u7ACB\\u7684\\uFF0C\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u5B9A\\u4E49 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"selectedRowKeys\"), \" \\u6765\\u6A21\\u62DF\\u4E00\\u4E2A\\u6811\\u5F62\\u9009\\u4E2D\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useMemo, useState, useCallback } from 'react';\\nimport { get, union, pullAll } from 'lodash-es';\\nimport { Table } from '@douyinfe/semi-ui';\\n\\nconst childrenRecordName = 'children';\\nconst rowKey = 'key';\\nconst getKey = record => get(record, rowKey, 'key');\\n\\nconst ChildrenDataSelectedDemo = () => {\\n    const [selectedRowKeys, setSelectedRowKeys] = useState([]);\\n\\n    const columns = useMemo(\\n        () => [\\n            {\\n                title: 'Key',\\n                dataIndex: 'dataKey',\\n                key: 'dataKey',\\n            },\\n            {\\n                title: '\\u540D\\u79F0',\\n                dataIndex: 'name',\\n                key: 'name',\\n                width: 200,\\n            },\\n            {\\n                title: '\\u6570\\u636E\\u7C7B\\u578B',\\n                dataIndex: 'type',\\n                key: 'type',\\n                width: 400,\\n            },\\n            {\\n                title: '\\u63CF\\u8FF0',\\n                dataIndex: 'description',\\n                key: 'description',\\n            },\\n            {\\n                title: '\\u9ED8\\u8BA4\\u503C',\\n                dataIndex: 'default',\\n                key: 'default',\\n                width: 100,\\n            },\\n        ],\\n        []\\n    );\\n\\n    const data = useMemo(\\n        () => [\\n            {\\n                key: 1,\\n                dataKey: 'videos_info',\\n                name: '\\u89C6\\u9891\\u4FE1\\u606F',\\n                type: 'Object \\u5BF9\\u8C61',\\n                description: '\\u89C6\\u9891\\u7684\\u5143\\u4FE1\\u606F',\\n                default: '\\u65E0',\\n                children: [\\n                    {\\n                        key: 11,\\n                        dataKey: 'status',\\n                        name: '\\u89C6\\u9891\\u72B6\\u6001',\\n                        type: 'Enum <Integer> \\u679A\\u4E3E',\\n                        description: '\\u89C6\\u9891\\u7684\\u53EF\\u89C1\\u3001\\u63A8\\u8350\\u72B6\\u6001',\\n                        default: '1',\\n                    },\\n                    {\\n                        key: 12,\\n                        dataKey: 'vid',\\n                        name: '\\u89C6\\u9891 ID',\\n                        type: 'String \\u5B57\\u7B26\\u4E32',\\n                        description: '\\u6807\\u8BC6\\u89C6\\u9891\\u7684\\u552F\\u4E00 ID',\\n                        default: '\\u65E0',\\n                        children: [\\n                            {\\n                                key: 121,\\n                                dataKey: 'video_url',\\n                                name: '\\u89C6\\u9891\\u5730\\u5740',\\n                                type: 'String \\u5B57\\u7B26\\u4E32',\\n                                description: '\\u89C6\\u9891\\u7684\\u552F\\u4E00\\u94FE\\u63A5',\\n                                default: '\\u65E0',\\n                            },\\n                        ],\\n                    },\\n                ],\\n            },\\n            {\\n                key: 2,\\n                dataKey: 'text_info',\\n                name: '\\u6587\\u672C\\u4FE1\\u606F',\\n                type: 'Object \\u5BF9\\u8C61',\\n                description: '\\u89C6\\u9891\\u7684\\u5143\\u4FE1\\u606F',\\n                default: '\\u65E0',\\n                children: [\\n                    {\\n                        key: 21,\\n                        dataKey: 'title',\\n                        name: '\\u89C6\\u9891\\u6807\\u9898',\\n                        type: 'String \\u5B57\\u7B26\\u4E32',\\n                        description: '\\u89C6\\u9891\\u7684\\u6807\\u9898',\\n                        default: '\\u65E0',\\n                    },\\n                    {\\n                        key: 22,\\n                        dataKey: 'video_description',\\n                        name: '\\u89C6\\u9891\\u63CF\\u8FF0',\\n                        type: 'String \\u5B57\\u7B26\\u4E32',\\n                        description: '\\u89C6\\u9891\\u7684\\u63CF\\u8FF0',\\n                        default: '\\u65E0',\\n                    },\\n                ],\\n            },\\n        ],\\n        []\\n    );\\n\\n    // \\u81EA\\u5B9A\\u4E49\\u7981\\u7528\\u903B\\u8F91\\n    const isRecordDisabled = record => {\\n        return false;\\n    };\\n\\n    const traverse = (data, res) => {\\n        for (let record of data) {\\n            const children = get(record, 'children');\\n            const disabled = isRecordDisabled(record);\\n            if (!disabled) {\\n                const key = getKey(record);\\n                res.push(key);\\n            }\\n            if (Array.isArray(children)) {\\n                traverse(children, res);\\n            }\\n        }\\n    };\\n\\n    const getAllRowKeys = data => {\\n        const allRowKeys = [];\\n        traverse(data, allRowKeys);\\n        console.log('allRowKeys', allRowKeys);\\n        return allRowKeys;\\n    };\\n\\n    const findShouldSelectRowKeys = (record, selected) => {\\n        let shouldSelectRowKeys;\\n        const children = get(record, 'children');\\n        let childrenRowKeys = [];\\n        if (Array.isArray(children)) {\\n            traverse(children, childrenRowKeys);\\n        }\\n\\n        const key = getKey(record);\\n        if (!selected) {\\n            shouldSelectRowKeys = [...selectedRowKeys];\\n            pullAll(shouldSelectRowKeys, [key, ...childrenRowKeys]);\\n        } else {\\n            shouldSelectRowKeys = union(selectedRowKeys, [key, ...childrenRowKeys]);\\n        }\\n        return shouldSelectRowKeys;\\n    };\\n\\n    // \\u9009\\u4E2D\\u4E00\\u884C\\u65F6\\u9700\\u8981\\u9009\\u4E2D\\u81EA\\u5DF1\\u53EF\\u9009\\u884C\\n    const doSelect = useCallback(\\n        (record, selected) => {\\n            const rowKeys = findShouldSelectRowKeys(record, selected);\\n            setSelectedRowKeys(rowKeys);\\n            console.log('select', record, rowKeys);\\n        },\\n        [selectedRowKeys, rowKey, childrenRecordName]\\n    );\\n\\n    // \\u627E\\u51FA\\u6240\\u6709\\u53EF\\u9009\\u7684\\u884C\\n    const doSelectAll = useCallback((selected, selectedRows) => {\\n        console.log(selected);\\n        let rowKeys = [];\\n        if (selected) {\\n            rowKeys = getAllRowKeys(data);\\n        }\\n        setSelectedRowKeys(rowKeys);\\n    }, []);\\n\\n    const rowSelection = useMemo(\\n        () => ({\\n            selectedRowKeys,\\n            onSelect: doSelect,\\n            onSelectAll: doSelectAll,\\n        }),\\n        [selectedRowKeys, doSelect, doSelectAll]\\n    );\\n\\n    return (\\n        <Table\\n            columns={columns}\\n            rowKey={rowKey}\\n            childrenRecordName={childrenRecordName}\\n            rowSelection={rowSelection}\\n            dataSource={data}\\n            pagination={false}\\n        />\\n    );\\n};\\n\\nrender(ChildrenDataSelectedDemo);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u884C\\u6216\\u5355\\u5143\\u683C\\u4E8B\\u4EF6\\u4EE5\\u53CA\\u5C5E\\u6027\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onRow\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onHeaderRow\"), \" \\u53EF\\u4EE5\\u5B9A\\u4E49\\u8868\\u683C\\u6216\\u8868\\u5934\\u884C\\u7684\\u539F\\u751F\\u4E8B\\u4EF6\\u6216\\u5C5E\\u6027\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"column.onCell\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"column.onHeaderCell\"), \" \\u53EF\\u4EE5\\u5B9A\\u4E49\\u8868\\u683C\\u6216\\u8868\\u5934\\u5355\\u5143\\u683C\\u539F\\u751F\\u4E8B\\u4EF6\\u6216\\u5C5E\\u6027\\u3002\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u539F\\u5219\\u4E0A tr/td/th \\u4E0A\\u652F\\u6301\\u7684\\u5C5E\\u6027\\u6216\\u4E8B\\u4EF6\\u90FD\\u80FD\\u591F\\u88AB\\u5B9A\\u4E49\\u3002\\u4F8B\\u5982\\u4E0B\\u9762\\u8FD9\\u4E2A\\u4F8B\\u5B50\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u5934\\u7684 tr \\u5B9A\\u4E49\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onMouseEnter\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onMouseLeave\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u683C\\u7684 tr \\u5B9A\\u4E49\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"className\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u683C\\u7684\\u7B2C\\u4E09\\u884C\\u5B9A\\u4E49\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onClick\"))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useMemo } from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui/';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\n\\nfunction EventTable(props = {}) {\\n    const columns = useMemo(\\n        () => [\\n            {\\n                title: '\\u6807\\u9898',\\n                dataIndex: 'name',\\n                width: 400,\\n                render: (text, record, index) => {\\n                    return (\\n                        <div>\\n                            <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                            {text}\\n                        </div>\\n                    );\\n                },\\n                filters: [\\n                    {\\n                        text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                        value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                    },\\n                    {\\n                        text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                        value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                    },\\n                ],\\n                onFilter: (value, record) => record.name.includes(value),\\n            },\\n            {\\n                title: '\\u5927\\u5C0F',\\n                dataIndex: 'size',\\n                sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n                render: text => `${text} KB`,\\n            },\\n            {\\n                title: '\\u6240\\u6709\\u8005',\\n                dataIndex: 'owner',\\n                render: (text, record, index) => {\\n                    return (\\n                        <div>\\n                            <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                                {typeof text === 'string' && text.slice(0, 1)}\\n                            </Avatar>\\n                            {text}\\n                        </div>\\n                    );\\n                },\\n            },\\n            {\\n                title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n                dataIndex: 'updateTime',\\n                sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n                render: value => {\\n                    return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n                },\\n            },\\n        ],\\n        []\\n    );\\n\\n    const data = useMemo(() => {\\n        const _data = [];\\n        for (let i = 0; i < 46; i++) {\\n            const isSemiDesign = i % 2 === 0;\\n            const randomNumber = (i * 1000) % 199;\\n            _data.push({\\n                key: '' + i,\\n                name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n                owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                size: randomNumber,\\n                updateTime: new Date().valueOf() + randomNumber * DAY,\\n                avatarBg: isSemiDesign ? 'grey' : 'red',\\n            });\\n        }\\n        return _data;\\n    }, []);\\n\\n    const onRow = useMemo(\\n        () => (record, index) => {\\n            const props = {\\n                className: 'my-tr-class',\\n            };\\n\\n            if (index === 2) {\\n                return {\\n                    ...props,\\n                    onClick: e => console.log('mouse click: ', record, index),\\n                };\\n            } else {\\n                return {\\n                    ...props,\\n                };\\n            }\\n        },\\n        []\\n    );\\n    const onHeaderRow = useMemo(\\n        () => (columns, index) => {\\n            return {\\n                onMouseEnter: e => console.log('mouse enter: ', columns, index),\\n                onMouseLeave: e => console.log('mouse leave: ', columns, index),\\n            };\\n        },\\n        []\\n    );\\n\\n    return <Table columns={columns} dataSource={data} onRow={onRow} onHeaderRow={onHeaderRow} />;\\n}\\n\\nrender(EventTable);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5B9E\\u73B0\\u6591\\u9A6C\\u7EB9\\u6837\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onRow\"), \" \\u7ED9\\u6BCF\\u884C\\u8BBE\\u7F6E\\u4E00\\u4E2A\\u80CC\\u666F\\u8272\\uFF0C\\u5B9E\\u73B0\\u6709\\u6591\\u9A6C\\u7EB9\\u6548\\u679C\\u7684\\u8868\\u683C\\u3002\\u5982\\u679C\\u8BBE\\u7F6E\\u4E86\\u56FA\\u5B9A\\u5217\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onCell\"), \" \\u7ED9\\u6BCF\\u5217\\u8BBE\\u7F6E\\u4E00\\u4E2A\\u80CC\\u666F\\u8272\\u5B9E\\u73B0\\u76F8\\u540C\\u6548\\u679C\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui';\\nimport { IconMore } from '@douyinfe/semi-icons';\\n\\nfunction App() {\\n    const columns = [\\n        {\\n            title: '\\u6807\\u9898',\\n            dataIndex: 'name',\\n            width: 400,\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar\\n                            size=\\\"small\\\"\\n                            shape=\\\"square\\\"\\n                            src={record.nameIconSrc}\\n                            style={{ marginRight: 12 }}\\n                        ></Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: '\\u5927\\u5C0F',\\n            dataIndex: 'size',\\n        },\\n        {\\n            title: '\\u6240\\u6709\\u8005',\\n            dataIndex: 'owner',\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                            {typeof text === 'string' && text.slice(0, 1)}\\n                        </Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n            dataIndex: 'updateTime',\\n        },\\n        {\\n            title: '',\\n            dataIndex: 'operate',\\n            render: () => {\\n                return <IconMore />;\\n            },\\n        },\\n    ];\\n    const data = [\\n        {\\n            key: '1',\\n            name: 'Semi Design \\u8BBE\\u8BA1\\u7A3F.fig',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',\\n            size: '2M',\\n            owner: '\\u59DC\\u9E4F\\u5FD7',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'grey',\\n        },\\n        {\\n            key: '2',\\n            name: 'Semi Design \\u5206\\u4EAB\\u6F14\\u793A\\u6587\\u7A3F',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '2M',\\n            owner: '\\u90DD\\u5BA3',\\n            updateTime: '2020-01-17 05:31',\\n            avatarBg: 'red',\\n        },\\n        {\\n            key: '3',\\n            name: '\\u8BBE\\u8BA1\\u6587\\u6863',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '34KB',\\n            owner: 'Zoey Edwards',\\n            updateTime: '2020-01-26 11:01',\\n            avatarBg: 'light-blue',\\n        },\\n        {\\n            key: '4',\\n            name: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F.fig',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',\\n            size: '2M',\\n            owner: '\\u59DC\\u9E4F\\u5FD7',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'grey',\\n        },\\n        {\\n            key: '5',\\n            name: 'Semi D2C \\u5206\\u4EAB\\u6F14\\u793A\\u6587\\u7A3F',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '2M',\\n            owner: '\\u90DD\\u5BA3',\\n            updateTime: '2020-01-17 05:31',\\n            avatarBg: 'red',\\n        },\\n        {\\n            key: '6',\\n            name: 'Semi D2C \\u8BBE\\u8BA1\\u6587\\u6863',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '34KB',\\n            owner: 'Zoey Edwards',\\n            updateTime: '2020-01-26 11:01',\\n            avatarBg: 'light-blue',\\n        },\\n    ];\\n\\n    const handleRow = (record, index) => {\\n        // \\u7ED9\\u5076\\u6570\\u884C\\u8BBE\\u7F6E\\u6591\\u9A6C\\u7EB9\\n        if (index % 2 === 0) {\\n            return {\\n                style: {\\n                    background: 'var(--semi-color-fill-0)',\\n                },\\n            };\\n        } else {\\n            return {};\\n        }\\n    };\\n\\n    return <Table columns={columns} dataSource={data} onRow={handleRow} pagination={false} />;\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5B9E\\u73B0\\u8868\\u5934\\u6837\\u5F0F\\u5B9A\\u5236\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 Column.onHeaderCell \\u8FD4\\u56DE\\u7279\\u5B9A style \\u6216 className\\uFF0C\\u5B9A\\u5236\\u8868\\u5934\\u7684\\u6837\\u5F0F\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5982\\u4E0B\\u4F8B\\u5B50\\uFF0C\\u901A\\u8FC7\\u4F20\\u5165 backgroundColor \\u6539\\u53D8\\u4E86\\u8868\\u5934\\u80CC\\u666F\\u8272\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from \\\"react\\\";\\nimport { Table, Avatar } from \\\"@douyinfe/semi-ui\\\";\\nimport { IconMore } from \\\"@douyinfe/semi-icons\\\";\\n\\nfunction App() {\\n    const onHeaderCell = () => ({\\n        style: {\\n            backgroundColor: \\\"var(--semi-color-fill-0)\\\",\\n        },\\n    });\\n    const columns = [\\n        {\\n            title: \\\"\\u6807\\u9898\\\",\\n            dataIndex: \\\"name\\\",\\n            width: 280,\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar\\n                            size=\\\"small\\\"\\n                            shape=\\\"square\\\"\\n                            src={record.nameIconSrc}\\n                            style={{ marginRight: 12 }}\\n                        ></Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: \\\"\\u5927\\u5C0F\\\",\\n            width: 100,\\n            dataIndex: \\\"size\\\",\\n        },\\n        {\\n            title: \\\"\\u6240\\u6709\\u8005\\\",\\n            dataIndex: \\\"owner\\\",\\n            width: 200,\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar\\n                            size=\\\"small\\\"\\n                            color={record.avatarBg}\\n                            style={{ marginRight: 4 }}\\n                        >\\n                            {typeof text === \\\"string\\\" && text.slice(0, 1)}\\n                        </Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: \\\"\\u66F4\\u65B0\\u65E5\\u671F\\\",\\n            width: 300,\\n            dataIndex: \\\"updateTime\\\",\\n        },\\n        {\\n            title: \\\"\\\",\\n            dataIndex: \\\"operate\\\",\\n            render: () => {\\n                return <IconMore />;\\n            },\\n        },\\n    ];\\n\\n    columns.forEach((item) => (item.onHeaderCell = onHeaderCell));\\n    const data = [\\n        {\\n            key: \\\"1\\\",\\n            name: \\\"Semi Design \\u8BBE\\u8BA1\\u7A3F.fig\\\",\\n            nameIconSrc:\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png\\\",\\n            size: \\\"2M\\\",\\n            owner: \\\"\\u59DC\\u9E4F\\u5FD7\\\",\\n            updateTime: \\\"2020-02-02 05:13\\\",\\n            avatarBg: \\\"grey\\\",\\n        },\\n        {\\n            key: \\\"2\\\",\\n            name: \\\"Semi Design \\u5206\\u4EAB\\u6F14\\u793A\\u6587\\u7A3F\\\",\\n            nameIconSrc:\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png\\\",\\n            size: \\\"2M\\\",\\n            owner: \\\"\\u90DD\\u5BA3\\\",\\n            updateTime: \\\"2020-01-17 05:31\\\",\\n            avatarBg: \\\"red\\\",\\n        },\\n        {\\n            key: \\\"3\\\",\\n            name: \\\"\\u8BBE\\u8BA1\\u6587\\u6863\\\",\\n            nameIconSrc:\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png\\\",\\n            size: \\\"34KB\\\",\\n            owner: \\\"Zoey Edwards\\\",\\n            updateTime: \\\"2020-01-26 11:01\\\",\\n            avatarBg: \\\"light-blue\\\",\\n        },\\n    ];\\n\\n    return (\\n        <>\\n            <Table\\n                columns={columns}\\n                dataSource={data}\\n                pagination={false}\\n            />\\n        </>\\n    );\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5B9E\\u73B0\\u5355\\u5143\\u683C Hover \\u6837\\u5F0F\\u5B9A\\u5236\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Table \\u9ED8\\u8BA4\\u4E3A\\u6574\\u884C\\u914D\\u7F6E Hover \\u6837\\u5F0F\\uFF0C\\u5982\\u679C\\u4F60\\u9700\\u8981\\u4FEE\\u6539\\u76F8\\u5173\\u6837\\u5F0F\\u53EF\\u4EE5\\u901A\\u8FC7 CSS \\u8986\\u76D6\\u7684\\u65B9\\u5F0F\\u81EA\\u884C\\u5B9E\\u73B0\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5982\\u4E0B\\u4F8B\\u5B50\\uFF0C\\u901A\\u8FC7 CSS \\u8986\\u76D6\\uFF0C\\u5C06\\u53EF Hover \\u7684\\u80CC\\u666F\\u8272\\u6216\\u8005\\u7531\\u884C\\u9AD8\\u4EAE\\u6539\\u4E3A Cell \\u5355\\u5143\\u683C\\u9AD8\\u4EAE  \"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \".component-table-demo-cell-hover-custom {\\n  .semi-table-tbody {\\n    // remove origin style of row hover\\n    .semi-table-row:hover {\\n      .semi-table-row-cell {\\n        background-color: transparent;\\n        background-image: none;\\n        &.semi-table-cell-fixed-left::before {\\n          background-color: transparent;\\n        }\\n      }\\n      // add style of single cell\\n      .semi-table-row-cell:hover {\\n        background-color: rgba(var(--semi-light-green-1), 1);\\n      }\\n    }\\n  }\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from \\\"react\\\";\\nimport { Table, Avatar } from \\\"@douyinfe/semi-ui\\\";\\nimport { IconMore } from \\\"@douyinfe/semi-icons\\\";\\n\\nfunction App() {\\n    const columns = [\\n        {\\n            title: \\\"\\u6807\\u9898\\\",\\n            dataIndex: \\\"name\\\",\\n            // fixed: true,\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar\\n                            size=\\\"small\\\"\\n                            shape=\\\"square\\\"\\n                            src={record.nameIconSrc}\\n                            style={{ marginRight: 12 }}\\n                        ></Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: \\\"\\u5927\\u5C0F\\\",\\n            width: 100,\\n            dataIndex: \\\"size\\\",\\n        },\\n        {\\n            title: \\\"\\u6240\\u6709\\u8005\\\",\\n            dataIndex: \\\"owner\\\",\\n            width: 200,\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar\\n                            size=\\\"small\\\"\\n                            color={record.avatarBg}\\n                            style={{ marginRight: 4 }}\\n                        >\\n                            {typeof text === \\\"string\\\" && text.slice(0, 1)}\\n                        </Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: \\\"\\u66F4\\u65B0\\u65E5\\u671F\\\",\\n            width: 300,\\n            dataIndex: \\\"updateTime\\\",\\n        },\\n        {\\n            title: \\\"\\\",\\n            dataIndex: \\\"operate\\\",\\n            render: () => {\\n                return <IconMore />;\\n            },\\n        },\\n    ];\\n    const data = [\\n        {\\n            key: \\\"1\\\",\\n            name: \\\"Semi Design \\u8BBE\\u8BA1\\u7A3F.fig\\\",\\n            nameIconSrc:\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png\\\",\\n            size: \\\"2M\\\",\\n            owner: \\\"\\u59DC\\u9E4F\\u5FD7\\\",\\n            updateTime: \\\"2020-02-02 05:13\\\",\\n            avatarBg: \\\"grey\\\",\\n        },\\n        {\\n            key: \\\"2\\\",\\n            name: \\\"Semi Design \\u5206\\u4EAB\\u6F14\\u793A\\u6587\\u7A3F\\\",\\n            nameIconSrc:\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png\\\",\\n            size: \\\"2M\\\",\\n            owner: \\\"\\u90DD\\u5BA3\\\",\\n            updateTime: \\\"2020-01-17 05:31\\\",\\n            avatarBg: \\\"red\\\",\\n        },\\n        {\\n            key: \\\"3\\\",\\n            name: \\\"\\u8BBE\\u8BA1\\u6587\\u6863\\\",\\n            nameIconSrc:\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png\\\",\\n            size: \\\"34KB\\\",\\n            owner: \\\"Zoey Edwards\\\",\\n            updateTime: \\\"2020-01-26 11:01\\\",\\n            avatarBg: \\\"light-blue\\\",\\n        },\\n    ];\\n\\n    return (\\n        <>\\n            <Table\\n                columns={columns}\\n                dataSource={data}\\n                className=\\\"component-table-demo-cell-hover-custom\\\"\\n                pagination={false}\\n            />\\n        </>\\n    );\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5355\\u5143\\u683C\\u7F29\\u7565\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ellipsis\"), \" \\u53EF\\u4EE5\\u8BA9\\u5355\\u5143\\u683C\\u81EA\\u52A8\\u5B9E\\u73B0\\u7F29\\u7565\\u6548\\u679C\\u3002v2.34.0 \\u652F\\u6301\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Table } from '@douyinfe/semi-ui';\\nimport { IconMore } from '@douyinfe/semi-icons';\\n\\nfunction App() {\\n    const columns = [\\n        {\\n            title: '\\u6807\\u9898',\\n            dataIndex: 'name',\\n            fixed: true,\\n            width: 250,\\n            filters: [\\n                {\\n                    text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                    value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                },\\n                {\\n                    text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                    value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                },\\n            ],\\n            onFilter: (value, record) => record.name.includes(value),\\n            sorter: (a, b) => (a.name.length - b.name.length > 0 ? 1 : -1),\\n            ellipsis: true,\\n        },\\n        {\\n            title: '\\u6240\\u6709\\u8005',\\n            dataIndex: 'owner',\\n            width: 200,\\n            ellipsis: true,\\n            filters: [\\n                {\\n                    text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                    value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                },\\n                {\\n                    text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                    value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                },\\n            ],\\n            onFilter: (value, record) => record.name.includes(value),\\n            sorter: (a, b) => (a.name.length - b.name.length > 0 ? 1 : -1),\\n        },\\n        {\\n            title: '\\u5927\\u5C0F',\\n            dataIndex: 'size',\\n            sorter: (a, b) => (a.name.length - b.name.length > 0 ? 1 : -1),\\n            ellipsis: true,\\n        },\\n        {\\n            title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n            dataIndex: 'updateTime',\\n            width: 200,\\n            ellipsis: true,\\n        },\\n        {\\n            title: '',\\n            dataIndex: 'operate',\\n            fixed: 'right',\\n            align: 'center',\\n            width: 100,\\n            render: () => {\\n                return <IconMore />;\\n            },\\n        },\\n    ];\\n    const data = [\\n        {\\n            key: '1',\\n            name: 'Semi is designed based on FA architecture, and the main logic is extracted as Foundation package, which is easy to migrate to other frameworks',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',\\n            size: '2M',\\n            owner: 'Pengzhi Jiang Pengzhi Jiang Pengzhi Jiang Pengzhi Jiang',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'grey',\\n        },\\n        {\\n            key: '2',\\n            name: '\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u4E0E UED \\u56E2\\u961F\\u7EF4\\u62A4\\uFF0C\\u6613\\u4E8E\\u5B9A\\u5236\\u7684\\u73B0\\u4EE3\\u5316\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u4EA7\\u54C1\\u3002\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u4E0E UED \\u56E2\\u961F\\u7EF4\\u62A4\\uFF0C\\u6613\\u4E8E\\u5B9A\\u5236\\u7684\\u73B0\\u4EE3\\u5316\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u4EA7\\u54C1\\u3002',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '2M',\\n            owner: '\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'red',\\n        },\\n        {\\n            key: '3',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            name: 'Semi is designed based on FA architecture, and the main logic is extracted as Foundation package, which is easy to migrate to other frameworks',\\n            size: '34KB',\\n            owner: 'Pengzhi Jiang Pengzhi Jiang Pengzhi Jiang Pengzhi Jiang',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'light-blue',\\n        },\\n        {\\n            key: '4',\\n            name: '\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u4E0E UED \\u56E2\\u961F\\u7EF4\\u62A4\\uFF0C\\u6613\\u4E8E\\u5B9A\\u5236\\u7684\\u73B0\\u4EE3\\u5316\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u4EA7\\u54C1\\u3002\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u4E0E UED \\u56E2\\u961F\\u7EF4\\u62A4\\uFF0C\\u6613\\u4E8E\\u5B9A\\u5236\\u7684\\u73B0\\u4EE3\\u5316\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u4EA7\\u54C1\\u3002',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '34KB',\\n            owner: '\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'light-blue',\\n        },\\n    ];\\n\\n    return <Table scroll={{ x: 1200 }} columns={columns} dataSource={data} pagination={false} />;\\n}\\n\\nrender(App);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ellipsis.showTitle\"), \" \\u4E3A false \\u53EF\\u4EE5\\u9690\\u85CF\\u9ED8\\u8BA4\\u539F\\u751F\\u7684 HTML title\\u3002\\u914D\\u5408 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"column.render\"), \" \\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u5185\\u5BB9\\u63D0\\u793A\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Table, Typography } from '@douyinfe/semi-ui';\\nimport { IconMore } from '@douyinfe/semi-icons';\\n\\nfunction App() {\\n    const columns = [\\n        {\\n            title: '\\u6807\\u9898',\\n            dataIndex: 'name',\\n            fixed: true,\\n            width: 250,\\n            filters: [\\n                {\\n                    text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                    value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                },\\n                {\\n                    text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                    value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                },\\n            ],\\n            onFilter: (value, record) => record.name.includes(value),\\n            sorter: (a, b) => (a.name.length - b.name.length > 0 ? 1 : -1),\\n            ellipsis: { showTitle: false },\\n            render: (text) => <Typography.Text ellipsis={{ showTooltip: true }}>{text}</Typography.Text>,\\n        },\\n        {\\n            title: '\\u6240\\u6709\\u8005',\\n            dataIndex: 'owner',\\n            width: 200,\\n            filters: [\\n                {\\n                    text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                    value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                },\\n                {\\n                    text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                    value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                },\\n            ],\\n            onFilter: (value, record) => record.name.includes(value),\\n            sorter: (a, b) => (a.name.length - b.name.length > 0 ? 1 : -1),\\n            ellipsis: { showTitle: false },\\n            render: (text) => <Typography.Text ellipsis={{ showTooltip: true }}>{text}</Typography.Text>,\\n        },\\n        {\\n            title: '\\u5927\\u5C0F',\\n            dataIndex: 'size',\\n            sorter: (a, b) => (a.name.length - b.name.length > 0 ? 1 : -1),\\n            ellipsis: true,\\n        },\\n        {\\n            title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n            dataIndex: 'updateTime',\\n            width: 200,\\n            ellipsis: true,\\n        },\\n        {\\n            title: '',\\n            dataIndex: 'operate',\\n            fixed: 'right',\\n            align: 'center',\\n            width: 100,\\n            render: () => {\\n                return <IconMore />;\\n            },\\n        },\\n    ];\\n    const data = [\\n        {\\n            key: '1',\\n            name: 'Semi is designed based on FA architecture, and the main logic is extracted as Foundation package, which is easy to migrate to other frameworks',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',\\n            size: '2M',\\n            owner: 'Pengzhi Jiang Pengzhi Jiang Pengzhi Jiang Pengzhi Jiang',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'grey',\\n        },\\n        {\\n            key: '2',\\n            name: '\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u4E0E UED \\u56E2\\u961F\\u7EF4\\u62A4\\uFF0C\\u6613\\u4E8E\\u5B9A\\u5236\\u7684\\u73B0\\u4EE3\\u5316\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u4EA7\\u54C1\\u3002\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u4E0E UED \\u56E2\\u961F\\u7EF4\\u62A4\\uFF0C\\u6613\\u4E8E\\u5B9A\\u5236\\u7684\\u73B0\\u4EE3\\u5316\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u4EA7\\u54C1\\u3002',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '2M',\\n            owner: '\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3\\u90DD\\u5BA3',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'red',\\n        },\\n        {\\n            key: '3',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            name: 'Semi is designed based on FA architecture, and the main logic is extracted as Foundation package, which is easy to migrate to other frameworks',\\n            size: '34KB',\\n            owner: 'Pengzhi Jiang',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'light-blue',\\n        },\\n        {\\n            key: '4',\\n            name: '\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u4E0E UED \\u56E2\\u961F\\u7EF4\\u62A4\\uFF0C\\u6613\\u4E8E\\u5B9A\\u5236\\u7684\\u73B0\\u4EE3\\u5316\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u4EA7\\u54C1\\u3002\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u4E0E UED \\u56E2\\u961F\\u7EF4\\u62A4\\uFF0C\\u6613\\u4E8E\\u5B9A\\u5236\\u7684\\u73B0\\u4EE3\\u5316\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u4EA7\\u54C1\\u3002',\\n            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',\\n            size: '34KB',\\n            owner: '\\u90DD\\u5BA3',\\n            updateTime: '2020-02-02 05:13',\\n            avatarBg: 'light-blue',\\n        },\\n    ];\\n\\n    return <Table scroll={{ x: 1200 }} columns={columns} dataSource={data} pagination={false} />;\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4F38\\u7F29\\u5217\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u4F38\\u7F29\\u5217\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u4E00\\u4E9B\\u5185\\u5BB9\\u6BD4\\u8F83\\u591A\\u7684\\u5217\\uFF0C\\u53EF\\u4EE5\\u9009\\u62E9\\u6253\\u5F00\\u4F38\\u7F29\\u5217\\u529F\\u80FD\\uFF0C\\u5728\\u8868\\u5934\\u8FDB\\u884C\\u62C9\\u62FD\\u5B9E\\u73B0\\u5217\\u5BBD\\u7684\\u5B9E\\u65F6\\u53D8\\u5316\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E0D\\u8FC7\\u4F60\\u9700\\u8981\\u6CE8\\u610F\\u4E00\\u4E9B\\u53C2\\u6570\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"resizable\"), \" \\u8BBE\\u5B9A\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"true\"), \" \\u6216\\u8005\\u4E00\\u4E2A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"object\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"columns\"), \" \\u91CC\\u9700\\u8981\\u4F38\\u7F29\\u529F\\u80FD\\u7684\\u5217\\u90FD\\u8981\\u6307\\u5B9A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"width\"), \" \\u8FD9\\u4E2A\\u5B57\\u6BB5\\uFF08\\u5982\\u679C\\u4E0D\\u4F20\\uFF0C\\u8BE5\\u5217\\u4E0D\\u5177\\u5907\\u4F38\\u7F29\\u529F\\u80FD\\uFF0C\\u4E14\\u5176\\u5217\\u5BBD\\u5EA6\\u4F1A\\u88AB\\u6D4F\\u89C8\\u5668\\u81EA\\u52A8\\u8C03\\u6574\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"column.resize\"), \" \\u53EF\\u4EE5\\u5728 resizable \\u5F00\\u542F\\u540E\\u751F\\u6548\\uFF0C\\u8BBE\\u7F6E\\u4E3A false \\u540E\\uFF0C\\u5217\\u4E0D\\u518D\\u652F\\u6301\\u4F38\\u7F29\\u3002v2.42 \\u652F\\u6301\")), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u4E0E\\u56FA\\u5B9A\\u5217\\u540C\\u65F6\\u4F7F\\u7528\\u65F6\\uFF0C\\u9700\\u6307\\u5B9A\\u67D0\\u4E00\\u5217\\u4E0D\\u8BBE\\u7F6E\\u5BBD\\u5EA6\")), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u4E0D\\u63A8\\u8350\\u4E0E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"scroll.x\"), \" \\u540C\\u65F6\\u4F7F\\u7528\\uFF0Cscroll.x \\u6307\\u5B9A\\u8868\\u683C\\u662F\\u6709\\u5BBD\\u5EA6\\u8303\\u56F4\\u7684\\uFF0C\\u800C\\u4F38\\u7F29\\u5217\\u4F1A\\u62D3\\u5C55\\u5217\\u5BBD\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u5BFC\\u81F4\\u8868\\u683C\\u5BF9\\u4E0D\\u9F50\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useMemo } from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui';\\nimport { IconMore, IconTickCircle, IconComment, IconClear, IconDelete } from '@douyinfe/semi-icons';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\n\\nfunction ResizableDemo() {\\n    const columns = [\\n        {\\n            title: '\\u6807\\u9898',\\n            dataIndex: 'name',\\n            width: 300,\\n            resize: false,\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n            filters: [\\n                {\\n                    text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                    value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                },\\n                {\\n                    text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                    value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                },\\n            ],\\n            onFilter: (value, record) => record.name.includes(value),\\n        },\\n        {\\n            title: '\\u5927\\u5C0F',\\n            dataIndex: 'size',\\n            width: 200,\\n            sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n            render: text => `${text} KB`,\\n        },\\n        {\\n            title: '\\u6240\\u6709\\u8005',\\n            width: 200,\\n            dataIndex: 'owner',\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                            {typeof text === 'string' && text.slice(0, 1)}\\n                        </Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n            dataIndex: 'updateTime',\\n            sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n            render: value => {\\n                return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n            },\\n        },\\n        {\\n            title: '\\u64CD\\u4F5C\\u5217',\\n            dataIndex: 'operate',\\n            fixed: 'right',\\n            width: 100,\\n            resize: false,\\n            render: () => {\\n                return <IconMore />;\\n            },\\n        },\\n    ];\\n\\n    const data = useMemo(() => {\\n        const _data = [];\\n        for (let i = 0; i < 46; i++) {\\n            const isSemiDesign = i % 2 === 0;\\n            const randomNumber = (i * 1000) % 199;\\n            _data.push({\\n                key: '' + i,\\n                name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n                owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                size: randomNumber,\\n                updateTime: new Date().valueOf() + randomNumber * DAY,\\n                avatarBg: isSemiDesign ? 'grey' : 'red',\\n            });\\n        }\\n        return _data;\\n    }, []);\\n\\n    return <Table columns={columns} dataSource={data} resizable bordered />;\\n}\\n\\nrender(ResizableDemo);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u8FDB\\u9636\\u7684\\u4F38\\u7F29\\u5217\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"resizable\"), \" \\u8FD8\\u80FD\\u4E3A\\u4E00\\u4E2A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Object\"), \"\\uFF0C\\u5305\\u62EC\\u4E09\\u4E2A\\u4E8B\\u4EF6\\u65B9\\u6CD5\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onResize\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onResizeStart\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onResizeStop\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5206\\u522B\\u89E6\\u53D1\\u4E8E\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u5217\\u5BBD\\u6539\\u53D8\\u4E2D\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u5F00\\u59CB\\u6539\\u53D8\"), \"\\u548C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u7ED3\\u675F\\u6539\\u53D8\"), \"\\u4E09\\u4E2A\\u65F6\\u673A\\u3002\\u5F00\\u53D1\\u8005\\u53EF\\u4EE5\\u9009\\u62E9\\u5728\\u8FD9\\u4E2A\\u65F6\\u673A\\u4FEE\\u6539 column\\uFF0C\\u4F8B\\u5982\\u5728\\u62C9\\u62FD\\u65F6\\u589E\\u52A0\\u4E00\\u4E2A\\u62D6\\u52A8\\u65F6\\u7684\\u7AD6\\u7EBF\\u6548\\u679C\\u7B49\\uFF0C\\u5982\\u4E0B\\u4F8B\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useMemo } from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\nconst pagination = { pageSize: 5 };\\n\\nfunction ResizableDemo() {\\n    const columns = [\\n        {\\n            title: '\\u6807\\u9898',\\n            dataIndex: 'name',\\n            width: 400,\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n            filters: [\\n                {\\n                    text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                    value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                },\\n                {\\n                    text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                    value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                },\\n            ],\\n            onFilter: (value, record) => record.name.includes(value),\\n        },\\n        {\\n            title: '\\u5927\\u5C0F',\\n            dataIndex: 'size',\\n            width: 200,\\n            sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n            render: text => `${text} KB`,\\n        },\\n        {\\n            title: '\\u6240\\u6709\\u8005',\\n            width: 200,\\n            dataIndex: 'owner',\\n            render: (text, record, index) => {\\n                return (\\n                    <div>\\n                        <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                            {typeof text === 'string' && text.slice(0, 1)}\\n                        </Avatar>\\n                        {text}\\n                    </div>\\n                );\\n            },\\n        },\\n        {\\n            title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n            dataIndex: 'updateTime',\\n            sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n            render: value => {\\n                return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n            },\\n        },\\n    ];\\n\\n    const data = useMemo(() => {\\n        const _data = [];\\n        for (let i = 0; i < 46; i++) {\\n            const isSemiDesign = i % 2 === 0;\\n            const randomNumber = (i * 1000) % 199;\\n            _data.push({\\n                key: '' + i,\\n                name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n                owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                size: randomNumber,\\n                updateTime: new Date().valueOf() + randomNumber * DAY,\\n                avatarBg: isSemiDesign ? 'grey' : 'red',\\n            });\\n        }\\n        return _data;\\n    }, []);\\n\\n    const resizable = {\\n        onResizeStart: curColumn => {\\n            const className = addClass(curColumn.className, 'my-resizing');\\n\\n            return { className };\\n        },\\n        onResizeStop: curColumn => {\\n            const className = removeClass(curColumn.className, 'my-resizing');\\n\\n            return { className };\\n        },\\n    };\\n\\n    return (\\n        <div id=\\\"components-table-demo-resizable-column\\\">\\n            <Table columns={columns} dataSource={data} resizable={resizable} pagination={pagination} bordered />\\n        </div>\\n    );\\n}\\n\\nrender(ResizableDemo);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u672C\\u4F8B\\u4E2D\\u4F7F\\u7528\\u7684 CSS \\u6837\\u5F0F\\u5B9A\\u4E49\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"#components-table-demo-resizable-column .my-resizing {\\n    border-right: 2px solid red;\\n}\\n\\n#components-table-demo-resizable-column .react-resizable-handle:hover {\\n    background-color: red;\\n}\\n\\n#components-table-demo-resizable-column .my-resizing:hover .react-resizable-handle {\\n    background-color: inherit;\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u62D6\\u62FD\\u6392\\u5E8F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/clauderic/dnd-kit/tree/master\"\n  }, \"dnd-kit\"), \" \\u642D\\u914D \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/DouyinFE/semi-design/blob/340c93e4e1612a879be869c43ad7a9a85ab5a302/packages/semi-ui/table/interface.ts#L200\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"components\")), \" API \\u53EF\\u8F7B\\u677E\\u5B9E\\u73B0\\u62D6\\u62FD\\u6392\\u5E8F\\u3002v2.58 \\u7248\\u672C\\u652F\\u6301\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true hideInDSM\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React, { useEffect, useMemo, useState } from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\nimport { DndContext, PointerSensor, useSensors, useSensor } from '@dnd-kit/core'; // based on @dnd-kit/core v6\\nimport { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\\nimport { CSS as cssDndKit } from '@dnd-kit/utilities';\\nimport classNames from 'classnames';\\n\\nfunction App() {\\n    const pageSize = 10;\\n    const [dataSource, setData] = useState([]);\\n    const [pageData, setPageData] = useState([]);\\n    const columns = useMemo(\\n        () => [\\n            {\\n                title: '\\u6807\\u9898',\\n                dataIndex: 'name',\\n                width: 400,\\n                render: (text, record, index) => {\\n                    return (\\n                        <div>\\n                            <Avatar\\n                                size=\\\"small\\\"\\n                                shape=\\\"square\\\"\\n                                src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png\\\"\\n                                style={{ marginRight: 12 }}\\n                            ></Avatar>\\n                            {text}\\n                        </div>\\n                    );\\n                },\\n                filters: [\\n                    {\\n                        text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                        value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                    },\\n                    {\\n                        text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                        value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                    },\\n                ],\\n                onFilter: (value, record) => record.name.includes(value),\\n            },\\n            {\\n                title: '\\u5927\\u5C0F',\\n                dataIndex: 'size',\\n                sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n                render: text => `${text} KB`,\\n            },\\n            {\\n                title: '\\u6240\\u6709\\u8005',\\n                dataIndex: 'owner',\\n                render: (text, record, index) => {\\n                    return (\\n                        <div>\\n                            <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                                {typeof text === 'string' && text.slice(0, 1)}\\n                            </Avatar>\\n                            {text}\\n                        </div>\\n                    );\\n                },\\n            },\\n            {\\n                title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n                dataIndex: 'updateTime',\\n                sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n                render: value => {\\n                    return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n                },\\n            },\\n        ],\\n        []\\n    );\\n\\n    useEffect(() => {\\n        const getData = () => {\\n            const data = [];\\n            for (let i = 0; i < 46; i++) {\\n                const isSemiDesign = i % 2 === 0;\\n                const randomNumber = (i * 1000) % 199;\\n                data.push({\\n                    key: '' + i,\\n                    name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n                    owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                    size: randomNumber,\\n                    updateTime: new Date().valueOf() + randomNumber,\\n                    avatarBg: isSemiDesign ? 'grey' : 'red',\\n                });\\n            }\\n            return data;\\n        };\\n        const data = getData();\\n        setData(data);\\n    }, []);\\n    const [pageNum, setPageNum] = useState(1);\\n\\n    useEffect(() => {\\n        const currentPageData = dataSource.slice((pageNum - 1) * pageSize, pageNum * pageSize);\\n        setPageData(currentPageData);\\n    }, [dataSource, pageNum]);\\n\\n    const sensors = useSensors(\\n        useSensor(PointerSensor, {\\n            activationConstraint: { distance: 1 },\\n        })\\n    );\\n\\n    const handleDragEnd = event => {\\n        const { active, over } = event;\\n        if (active && over && active.id !== over.id) {\\n            setPageData(prev => {\\n                const activeIndex = prev.findIndex(data => data.key === active.id);\\n                const overIndex = prev.findIndex(data => data.key === over.id);\\n                return arrayMove(prev, activeIndex, overIndex);\\n            });\\n        }\\n    };\\n\\n    const handleChange = ({ pagination }) => {\\n        const { currentPage } = pagination;\\n        setPageNum(currentPage);\\n    };\\n\\n    const SortableRow = (props) => {\\n        const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } = useSortable({\\n            id: props['data-row-key'],\\n        });\\n        const style = {\\n            ...props.style,\\n            transform: cssDndKit.Transform.toString(transform),\\n            transition,\\n            cursor: 'grabbing',\\n            ...(isDragging ? { zIndex: 999, position: 'relative' } : {}),\\n        };\\n        const rowCls = classNames(props.className,\\n            {\\n                ['isDragging']: isDragging,\\n                ['isOver']: isOver,\\n            }\\n        );\\n        const onPointerDown = (event) => {\\n            event.persist();\\n            console.log('props', event);\\n            listeners.onPointerDown(event);\\n        };\\n\\n        return <tr {...props} className={rowCls} ref={setNodeRef} style={style} {...attributes} {...listeners} onPointerDown={onPointerDown}></tr>;\\n    };\\n\\n    return (\\n        <DndContext\\n            // https://docs.dndkit.com/api-documentation/context-provider#autoscroll\\n            autoScroll={true}\\n            sensors={sensors}\\n            modifiers={[restrictToVerticalAxis]}\\n            onDragEnd={handleDragEnd}\\n        >\\n            <SortableContext items={pageData.map(data => data.key)} strategy={verticalListSortingStrategy}>\\n                <Table\\n                    components={{\\n                        body: {\\n                            row: SortableRow,\\n                        },\\n                    }}\\n                    rowKey=\\\"key\\\"\\n                    columns={columns}\\n                    dataSource={pageData}\\n                    pagination={{ currentPage: pageNum, pageSize: pageSize, total: dataSource.length }}\\n                    onChange={handleChange}\\n                />\\n            </SortableContext>\\n        </DndContext>\\n    );\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8868\\u683C\\u5206\\u7EC4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u4E00\\u4E9B\\u6570\\u636E\\u9700\\u8981\\u5206\\u7EC4\\u5C55\\u793A\\u7684\\u8868\\u683C\\uFF0C\\u53EF\\u4EE5\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"groupBy\"), \" \\u5B9A\\u4E49\\u5206\\u7EC4\\u89C4\\u5219\\uFF0C\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderGroupSection\"), \" \\u6765\\u5B9A\\u4E49\\u5206\\u7EC4\\u8868\\u5934\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6CE8\\u610F\\uFF1A\"), \"\\u8BF7\\u52A1\\u5FC5\\u4E3A\\u6BCF\\u884C\\u6570\\u636E\\u63D0\\u4F9B\\u4E00\\u4E2A\\u4E0E\\u5176\\u4ED6\\u884C\\u503C\\u4E0D\\u540C\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"key\"), \"\\uFF0C\\u6216\\u8005\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rowKey\"), \" \\u53C2\\u6570\\u6307\\u5B9A\\u4E00\\u4E2A\\u4F5C\\u4E3A\\u4E3B\\u952E\\u7684\\u5C5E\\u6027\\u540D\\u3002\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\n\\nconst columns = [\\n    {\\n        title: '\\u6807\\u9898',\\n        dataIndex: 'name',\\n        width: 400,\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n        filters: [\\n            {\\n                text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n            {\\n                text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n        ],\\n        onFilter: (value, record) => record.name.includes(value),\\n    },\\n    {\\n        title: '\\u5927\\u5C0F',\\n        dataIndex: 'size',\\n        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n        render: text => `${text} KB`,\\n    },\\n    {\\n        title: '\\u6240\\u6709\\u8005',\\n        dataIndex: 'owner',\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                        {typeof text === 'string' && text.slice(0, 1)}\\n                    </Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n        dataIndex: 'updateTime',\\n        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n        render: value => {\\n            return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n        },\\n    },\\n];\\n\\nconst getData = () => {\\n    const data = [];\\n    for (let i = 0; i < 46; i++) {\\n        const isSemiDesign = i % 2 === 0;\\n        const randomNumber = ((i * 1000) % 19) + 100;\\n        data.push({\\n            key: '' + i,\\n            name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n            owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n            size: randomNumber,\\n            updateTime: new Date().valueOf() + randomNumber * DAY,\\n            avatarBg: isSemiDesign ? 'grey' : 'red',\\n        });\\n    }\\n    return data;\\n};\\n\\nconst data = getData();\\n\\nfunction Demo() {\\n    const rowKey = record =>\\n        `${record.owner && record.owner.toLowerCase()}-${record.name && record.name.toLowerCase()}`;\\n\\n    return (\\n        <div style={{ padding: '20px 0px' }}>\\n            <Table\\n                dataSource={data}\\n                rowKey={rowKey}\\n                groupBy={'size'}\\n                columns={columns}\\n                renderGroupSection={groupKey => <strong>\\u6839\\u636E\\u6587\\u4EF6\\u5927\\u5C0F\\u5206\\u7EC4 {groupKey} KB</strong>}\\n                onGroupedRow={(group, index) => {\\n                    return {\\n                        // onMouseEnter: () => {\\n                        //     console.log(`Grouped row mouse enter: `, group, index);\\n                        // },\\n                        // onMouseLeave: () => {\\n                        //     console.log(`Grouped row mouse leave: `, group, index);\\n                        // },\\n                        onClick: e => {\\n                            console.log(`Grouped row clicked: `, group, index);\\n                        },\\n                    };\\n                }}\\n                clickGroupedRowToExpand // if you want to click the entire row to expand\\n                scroll={{ y: 480 }}\\n            />\\n        </div>\\n    );\\n}\\n\\nrender(Demo);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u865A\\u62DF\\u5316\\u8868\\u683C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u865A\\u62DF\\u5316\\u53EF\\u7528\\u4E8E\\u9700\\u8981\\u6E32\\u67D3\\u5927\\u89C4\\u6A21\\u6570\\u636E\\u7684\\u573A\\u666F\\uFF0C\\u901A\\u8FC7\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"virtualized\"), \" \\u53C2\\u6570\\u6765\\u5F00\\u542F\\u8FD9\\u4E2A\\u529F\\u80FD\\u3002\\u9700\\u8981\\u6CE8\\u610F\\u7684\\u662F\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5FC5\\u987B\\u4F20\\u9012 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"scroll.y\"), \"\\uFF08number\\uFF09\\u4E0E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"style.width\"), \"\\uFF08number\\uFF09\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9700\\u8981\\u4F20\\u9012\\u6BCF\\u884C\\u7684\\u9AD8\\u5EA6 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"virtualized.itemSize\"), \"\\uFF08\\u4E0D\\u4F20\\u65F6\\u666E\\u901A\\u884C\\u9AD8\\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"56\"), \"\\uFF0C\\u7EC4\\u5934\\u884C\\u9AD8\\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"56\"), \"\\uFF09\\uFF0C\\u53EF\\u4EE5\\u4E3A\\u5982\\u4E0B\\u7C7B\\u578B\\uFF1A\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"number\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"(index, { sectionRow?: boolean, expandedRow?: boolean }) => number\")))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u683C\\u5206\\u7EC4\\u865A\\u62DF\\u5316\\u5DF2\\u652F\\u6301\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Semi Table \\u5E95\\u5C42\\u501F\\u52A9\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"react-window\"), \" \\u7684\\u80FD\\u529B\\u6765\\u5B9E\\u73B0\\u865A\\u62DF\\u5316\\uFF0C\\u56E0\\u6B64 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"react-window\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"VariableSizeList\"), \" \\u6240\\u652F\\u6301\\u7684\\u5176\\u4ED6\\u53C2\\u6570\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"virtualized\"), \"(object) \\u4F20\\u5165\\uFF0C\\u4F8B\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"overscanCount\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5982\\u679C\\u9700\\u8981\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"VariableSizeList\"), \" \\u7684 API\\uFF0C\\u53EF\\u4EE5\\u4F20\\u5165\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"getVirtualizedListRef\"), \" \\u83B7\\u53D6\\u5BF9\\u5E94 ref\\uFF0C\\u9700\\u8981\\u7248\\u672C >= \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"1.20\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4EE5\\u4E0B\\u4E3A\\u6E32\\u67D3 1000 \\u6761\\u6570\\u636E\\u7684\\u793A\\u4F8B\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useRef } from 'react';\\nimport { Table, Avatar, Button } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\n\\nconst columns = [\\n    {\\n        title: '\\u6807\\u9898',\\n        dataIndex: 'name',\\n        width: 200,\\n        fixed: true,\\n        render: (text, record, index) => {\\n            return <div>{text}</div>;\\n        },\\n        filters: [\\n            {\\n                text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n            {\\n                text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n        ],\\n        onFilter: (value, record) => record.name.includes(value),\\n    },\\n    {\\n        title: '\\u5927\\u5C0F',\\n        dataIndex: 'size',\\n        width: 150,\\n        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n        render: text => `${text} KB`,\\n    },\\n    {\\n        title: '\\u6240\\u6709\\u8005',\\n        dataIndex: 'owner',\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                        {typeof text === 'string' && text.slice(0, 1)}\\n                    </Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n        dataIndex: 'updateTime',\\n        fixed: 'right',\\n        width: 150,\\n        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n        render: value => {\\n            return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n        },\\n    },\\n];\\n\\nconst getData = () => {\\n    const data = [];\\n    for (let i = 0; i < 1000; i++) {\\n        const isSemiDesign = i % 2 === 0;\\n        const randomNumber = (i * 1000) % 199;\\n        data.push({\\n            key: '' + i,\\n            name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n            owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n            size: randomNumber,\\n            updateTime: new Date().valueOf() + randomNumber * DAY,\\n            avatarBg: isSemiDesign ? 'grey' : 'red',\\n        });\\n    }\\n    return data;\\n};\\n\\nconst data = getData();\\n\\nfunction VirtualizedFixedDemo() {\\n    let virtualizedListRef = useRef();\\n    const scroll = { y: 400, x: 900 };\\n    const style = { width: 750, margin: '0 auto' };\\n\\n    return (\\n        <>\\n            <Button onClick={() => virtualizedListRef.current.scrollToItem(100)}>Scroll to 100</Button>\\n            <Table\\n                pagination={false}\\n                columns={columns}\\n                dataSource={data}\\n                scroll={scroll}\\n                style={style}\\n                virtualized\\n                getVirtualizedListRef={ref => (virtualizedListRef = ref)}\\n            />\\n        </>\\n    );\\n}\\n\\nrender(VirtualizedFixedDemo);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u65E0\\u9650\\u6EDA\\u52A8\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u4E8E\\u865A\\u62DF\\u5316\\u7279\\u6027\\uFF0C\\u901A\\u8FC7\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"virtualized.onScroll\"), \" \\u6211\\u4EEC\\u53EF\\u4EE5\\u5B9E\\u73B0\\u65E0\\u9650\\u6EDA\\u52A8\\u52A0\\u8F7D\\u6570\\u636E\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\" hideInDSM\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"hideInDSM\": true\n  }, \"import React, { useRef } from 'react';\\nimport { Table, Avatar, Button } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\n\\nconst columns = [\\n    {\\n        title: '\\u6807\\u9898',\\n        dataIndex: 'name',\\n        width: 200,\\n        fixed: true,\\n        render: (text, record, index) => {\\n            return <div>{text}</div>;\\n        },\\n        filters: [\\n            {\\n                text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n            {\\n                text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n        ],\\n        onFilter: (value, record) => record.name.includes(value),\\n    },\\n    {\\n        title: '\\u5927\\u5C0F',\\n        dataIndex: 'size',\\n        width: 150,\\n        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n        render: text => `${text} KB`,\\n    },\\n    {\\n        title: '\\u6240\\u6709\\u8005',\\n        dataIndex: 'owner',\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                        {typeof text === 'string' && text.slice(0, 1)}\\n                    </Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n        dataIndex: 'updateTime',\\n        fixed: 'right',\\n        width: 150,\\n        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n        render: value => {\\n            return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n        },\\n    },\\n];\\n\\nfunction InfiniteScrollDemo() {\\n    const [data, setData] = useState([]);\\n\\n    const scroll = { y: 600, x: 1000 };\\n    const style = { width: 750, margin: '0 auto' };\\n\\n    const loadMore = () => {\\n        const pageSize = 20; // load 20 records every time\\n        const newData = [...data];\\n        const currentLength = data.length;\\n        for (let i = currentLength; i < currentLength + pageSize; i++) {\\n            const isSemiDesign = i % 2 === 0;\\n            const randomNumber = (i * 1000) % 199;\\n            newData.push({\\n                key: '' + i,\\n                name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n                owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                size: randomNumber,\\n                updateTime: new Date().valueOf() + randomNumber * DAY,\\n                avatarBg: isSemiDesign ? 'grey' : 'red',\\n            });\\n        }\\n        setData(newData);\\n    };\\n\\n    const itemSize = 56;\\n    const virtualized = {\\n        itemSize,\\n        onScroll: ({ scrollDirection, scrollOffset, scrollUpdateWasRequested }) => {\\n            if (\\n                scrollDirection === 'forward' &&\\n                scrollOffset >= (data.length - Math.ceil(scroll.y / itemSize) * 1.5) * itemSize &&\\n                !scrollUpdateWasRequested\\n            ) {\\n                loadMore();\\n            }\\n        },\\n    };\\n\\n    useEffect(() => {\\n        loadMore();\\n    }, []);\\n\\n    return (\\n        <Table\\n            pagination={false}\\n            columns={columns}\\n            dataSource={data}\\n            scroll={scroll}\\n            style={style}\\n            virtualized={virtualized}\\n        />\\n    );\\n}\\n\\nrender(InfiniteScrollDemo);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53D7\\u63A7\\u7684\\u52A8\\u6001\\u8868\\u683C\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\" hideInDSM\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Table, Switch, ButtonGroup, Button, Avatar } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\n\\nclass App extends React.Component {\\n    constructor(props) {\\n        super(props);\\n        const dataTotalSize = 46;\\n        const columns = [\\n            {\\n                title: '\\u6807\\u9898',\\n                dataIndex: 'name',\\n                width: 400,\\n                render: (text, record, index) => {\\n                    return (\\n                        <span>\\n                            <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                            {text}\\n                        </span>\\n                    );\\n                },\\n                filters: [\\n                    {\\n                        text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                        value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                    },\\n                    {\\n                        text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                        value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                    },\\n                ],\\n                onFilter: (value, record) => record.name.includes(value),\\n            },\\n            {\\n                title: '\\u5927\\u5C0F',\\n                dataIndex: 'size',\\n                sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n                render: text => `${text} KB`,\\n            },\\n            {\\n                title: '\\u6240\\u6709\\u8005',\\n                dataIndex: 'owner',\\n                render: (text, record, index) => {\\n                    return (\\n                        <div>\\n                            <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                                {typeof text === 'string' && text.slice(0, 1)}\\n                            </Avatar>\\n                            {text}\\n                        </div>\\n                    );\\n                },\\n            },\\n            {\\n                title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n                dataIndex: 'updateTime',\\n                sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n                render: value => {\\n                    return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n                },\\n            },\\n        ];\\n\\n        this.getData = () => {\\n            const data = [];\\n            for (let i = 0; i < dataTotalSize; i++) {\\n                const isSemiDesign = i % 2 === 0;\\n                const randomNumber = (i * 1000) % 199;\\n                data.push({\\n                    key: '' + i,\\n                    name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n                    owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                    size: randomNumber,\\n                    updateTime: new Date().valueOf() + randomNumber * DAY,\\n                    avatarBg: isSemiDesign ? 'grey' : 'red',\\n                });\\n            }\\n            return data;\\n        };\\n\\n        const data = this.getData();\\n        this.data = data;\\n\\n        this.mergeColumns = (column, columns, keys = ['dataIndex']) => {\\n            columns = [...columns];\\n            columns.forEach((curColumn, index) => {\\n                let isTarget = !!(keys && keys.length);\\n\\n                for (let key of keys) {\\n                    if (column[key] !== curColumn[key]) {\\n                        isTarget = false;\\n                        break;\\n                    }\\n                }\\n\\n                if (isTarget) {\\n                    columns[index] = { ...curColumn, ...column };\\n                }\\n            });\\n\\n            return columns;\\n        };\\n\\n        this.filterData = (filters, dataSource) => {\\n            dataSource = [...dataSource];\\n            filters.forEach(filter => {\\n                let filteredValue = filter.filteredValue;\\n                let dataIndex = filter.dataIndex;\\n                if (Array.isArray(filteredValue) && filteredValue.length && dataIndex) {\\n                    dataSource = dataSource.filter(\\n                        data => filteredValue.filter(value => String(data[dataIndex]).indexOf(value) > -1).length\\n                    );\\n                }\\n            });\\n\\n            return dataSource;\\n        };\\n\\n        this.getSelfSorterColumn = columns => {\\n            columns = columns || this.state.columns;\\n            return columns.filter(column => !!column.sorter)[0];\\n        };\\n\\n        this.getSelfFilterColumns = columns => {\\n            columns = columns || this.state.columns;\\n            return columns.filter(column => Array.isArray(column.filteredValue) && column.filteredValue.length);\\n        };\\n\\n        this.sortData = (sortObj, dataSource) => {\\n            let { sorter, sortOrder, dataIndex } = sortObj;\\n\\n            if (sorter && sortOrder && typeof sorter !== 'function') {\\n                sorter = (a, b) => (a[dataIndex] > b[dataIndex] ? 1 : -1);\\n            }\\n\\n            if (typeof sorter === 'function') {\\n                dataSource = [...dataSource].sort(sorter);\\n\\n                if (sortOrder === 'descend') {\\n                    dataSource = dataSource.reverse();\\n                }\\n            }\\n\\n            return dataSource;\\n        };\\n\\n        this.fetchData = (currentPage = 1, sorter = {}, filters = []) => {\\n            // console.log(`FetchData currentPage: `, currentPage);\\n            let pagination = { ...this.state.pagination, currentPage };\\n            return new Promise((res, rej) => {\\n                setTimeout(() => {\\n                    let data = [...this.data];\\n                    data = this.sortData(sorter, data);\\n                    data = this.filterData(filters, data);\\n                    let dataSource = data.slice(\\n                        (currentPage - 1) * pagination.pageSize,\\n                        currentPage * pagination.pageSize\\n                    );\\n                    pagination.total = data.length;\\n                    res({\\n                        dataSource,\\n                        pagination,\\n                        sorter,\\n                        filters,\\n                    });\\n                }, 1500);\\n            });\\n        };\\n\\n        this.setPage = (currentPage, sorter, filters) => {\\n            if (this.state.loading) {\\n                return;\\n            }\\n            if (typeof currentPage !== 'number') {\\n                currentPage = (this.state.pagination && this.state.pagination.currentPage) || 1;\\n            }\\n\\n            sorter = sorter || this.getSelfSorterColumn();\\n            filters = filters || this.getSelfFilterColumns();\\n\\n            this.setState({ loading: true });\\n            this.fetchData(currentPage, sorter, filters)\\n                .then(({ dataSource, pagination, sorter, filters }) => {\\n                    let columns = [...this.state.columns];\\n                    columns = this.mergeColumns(sorter, columns);\\n                    for (let filterObj of filters) {\\n                        columns = this.mergeColumns(filterObj, columns);\\n                    }\\n                    this.setState({\\n                        loading: false,\\n                        pagination,\\n                        dataSource,\\n                        columns,\\n                    });\\n                })\\n                .catch(err => {\\n                    console.error(err);\\n                    this.setState({ loading: false });\\n                });\\n        };\\n\\n        this.toggleFixHeader = checked => {\\n            let scroll = { ...this.state.scroll };\\n\\n            if (checked) {\\n                scroll.y = 300;\\n            } else {\\n                scroll.y = null;\\n            }\\n\\n            this.setState({ scroll });\\n        };\\n\\n        this.toggleFixColumns = checked => {\\n            let columns = [...this.state.columns];\\n            let scroll = { ...this.state.scroll };\\n            let expandCellFixed = this.state.expandCellFixed;\\n            let rowSelection = this.state.rowSelection;\\n\\n            if (checked) {\\n                columns[0].fixed = true;\\n\\n                if (rowSelection) {\\n                    rowSelection = { ...rowSelection, fixed: true };\\n                }\\n                if (columns.length > 1) {\\n                    columns[columns.length - 1].fixed = 'right';\\n                }\\n                scroll.x = '150%';\\n                expandCellFixed = true;\\n            } else {\\n                columns.forEach(column => {\\n                    column.fixed = false;\\n                });\\n                scroll.x = null;\\n                expandCellFixed = false;\\n\\n                if (rowSelection) {\\n                    rowSelection = { ...rowSelection, fixed: false };\\n                }\\n            }\\n\\n            this.setState({\\n                rowSelection,\\n                expandCellFixed,\\n                columns,\\n                scroll,\\n            });\\n        };\\n\\n        this.toggleRowSelection = checked => {\\n            let rowSelection = this.state.rowSelection;\\n            // const anyColumnFixed = this.state.columns.some(column => !!column.fixed);\\n\\n            if (checked) {\\n                rowSelection = {\\n                    width: 48,\\n                    fixed: true,\\n                    onChange: (selectedRowKeys, selectedRows) =>\\n                        console.log(\\n                            'Selection changed, selectedRowKeys: ',\\n                            selectedRowKeys,\\n                            'selectedRows: ',\\n                            selectedRows\\n                        ),\\n                };\\n            } else {\\n                rowSelection = null;\\n            }\\n\\n            this.setState({ rowSelection });\\n        };\\n\\n        this.toggleLoading = checked => {\\n            let loading = this.state.loading;\\n\\n            if (checked) {\\n                loading = true;\\n            } else {\\n                loading = false;\\n            }\\n\\n            this.setState({ loading });\\n        };\\n\\n        this.toggleExpandedRowRender = checked => {\\n            let expandedRowRender = this.state.expandedRowRender;\\n\\n            if (checked) {\\n                expandedRowRender = record => {\\n                    return {\\n                        children: <p>{record.description}</p>,\\n                        fixed: 'left',\\n                    };\\n                };\\n            } else {\\n                expandedRowRender = null;\\n            }\\n\\n            this.setState({ expandedRowRender });\\n        };\\n\\n        this.toggleShowSorter = checked => {\\n            let columns = [...this.state.columns];\\n\\n            if (checked) {\\n                columns.forEach(column => column.dataIndex === 'age' && (column.sorter = true));\\n            } else {\\n                columns.forEach(column => (column.sorter = null));\\n            }\\n\\n            this.setState({ columns });\\n        };\\n\\n        this.toggleShowFilter = checked => {\\n            let columns = [...this.state.columns];\\n\\n            if (checked) {\\n                columns.forEach(column => {\\n                    if (column.dataIndex === 'name') {\\n                        column.filters = [\\n                            {\\n                                text: '\\u59D3\\u540D\\u4E2D\\u5305\\u542B 1',\\n                                value: '1',\\n                            },\\n                            {\\n                                text: '\\u59D3\\u540D\\u4E2D\\u5305\\u542B 2',\\n                                value: '2',\\n                            },\\n                            {\\n                                text: '\\u59D3\\u540D\\u4E2D\\u5305\\u542B 3',\\n                                value: '3',\\n                            },\\n                        ];\\n                        column.filteredValue = [];\\n                    }\\n                });\\n            } else {\\n                columns.forEach(column => {\\n                    column.filters = null;\\n                    column.filteredValue = null;\\n                });\\n            }\\n\\n            this.setState({ columns });\\n\\n            if (!checked) {\\n                this.setPage(null, null, []);\\n            }\\n        };\\n\\n        this.onChange = (data = {}) => {\\n            console.log('Table changed: ', data);\\n            let { pagination, sorter, filters } = data;\\n            this.setPage(pagination.currentPage, sorter, filters);\\n        };\\n\\n        this.onExpandedRowsChange = rows => {\\n            console.log('Expanded rows changed to: ', rows);\\n\\n            const expandedRowKeys = (Array.isArray(rows) && rows.map(row => row.key)) || [];\\n\\n            this.setState({ expandedRowKeys });\\n        };\\n\\n        this.toggleExpandedRowKeys = checked => {\\n            let expandedRowKeys = [];\\n\\n            if (checked) {\\n                let dataSource = [...this.state.dataSource];\\n                expandedRowKeys.push(\\n                    ...dataSource.reduce((arr, data) => {\\n                        if (data.key) {\\n                            arr.push(data.key);\\n                        }\\n                        return arr;\\n                    }, [])\\n                );\\n                this.toggleExpandedRowRender(true);\\n            }\\n            this.setState({ expandedRowKeys });\\n        };\\n\\n        this.toggleBordered = checked => {\\n            let bordered = false;\\n\\n            if (checked) {\\n                bordered = true;\\n            }\\n\\n            this.setState({ bordered });\\n        };\\n\\n        this.toggleResizable = checked => {\\n            let resizable = !!checked || false;\\n\\n            this.setState({ resizable, bordered: resizable });\\n        };\\n\\n        this.toggleHideHeader = checked => {\\n            let showHeader = true;\\n\\n            if (checked) {\\n                showHeader = false;\\n            }\\n\\n            this.setState({ showHeader });\\n        };\\n\\n        this.toggleFooter = checked => {\\n            const footer = checked ? dataSource => <p style={{ margin: 0 }}>This is footer.</p> : null;\\n\\n            this.setState({ footer });\\n        };\\n\\n        this.toggleTitle = checked => {\\n            const title = checked ? 'This is title.' : null;\\n\\n            this.setState({ title });\\n        };\\n\\n        this.toggleHidePagination = checked => {\\n            let pagination = checked\\n                ? false\\n                : {\\n                    currentPage: 1,\\n                    pageSize: 8,\\n                    total: data.length,\\n                    onPageChange: page => this.setPage(page),\\n                };\\n\\n            this.setState({ pagination });\\n        };\\n\\n        this.toggleDataSource = checked => {\\n            if (checked) {\\n                this.setState({ dataSource: [] });\\n            } else {\\n                this.setPage();\\n            }\\n        };\\n\\n        this.switchPagination = position => {\\n            let pagination = this.state.pagination;\\n\\n            const defaultPagination = {\\n                currentPage: 1,\\n                pageSize: 8,\\n                total: data.length,\\n                onPageChange: page => this.setPage(page),\\n            };\\n\\n            const positions = ['bottom', 'top', 'both'];\\n\\n            if (position === true || position === false) {\\n                pagination = position ? { ...defaultPagination, ...pagination } : false;\\n            } else if (positions.includes(position)) {\\n                pagination = { ...defaultPagination, ...pagination, position };\\n            }\\n\\n            this.setState({ pagination });\\n        };\\n\\n        this.state = {\\n            loading: false,\\n            columns,\\n            scroll: {},\\n            rowSelection: null,\\n            expandedRowRender: null,\\n            expandCellFixed: false,\\n            defaultExpandedRowKeys: [],\\n            title: null,\\n            footer: null,\\n            expandedRowKeys: [],\\n            showHeader: true,\\n            resizable: false,\\n            pagination: {\\n                currentPage: 1,\\n                pageSize: 8,\\n                total: data.length,\\n                onPageChange: page => this.setPage(page),\\n            },\\n            dataSource: [],\\n        };\\n\\n        this.TableSwitch = function TableSwitch({\\n            text,\\n            children,\\n            checked,\\n            onChange,\\n            style = { display: 'inline-flex', alignItems: 'center', margin: 5 },\\n        }) {\\n            const switchProps = { onChange };\\n\\n            if (checked != null) {\\n                switchProps.checked = !!checked;\\n            }\\n            return (\\n                <span style={style}>\\n                    <span>{text}</span>\\n                    {children != null ? children : <Switch size=\\\"small\\\" {...switchProps} />}\\n                </span>\\n            );\\n        };\\n    }\\n\\n    componentDidMount() {\\n        this.setPage(1);\\n    }\\n\\n    render() {\\n        let {\\n            columns,\\n            dataSource,\\n            pagination,\\n            loading,\\n            scroll,\\n            rowSelection,\\n            expandedRowRender,\\n            expandCellFixed,\\n            expandedRowKeys,\\n            bordered,\\n            resizable,\\n            title,\\n            footer,\\n            showHeader,\\n            defaultExpandedRowKeys,\\n        } = this.state;\\n\\n        const wrapStyle = { marginBottom: 15, display: 'flex', justifyContent: 'space-around', flexWrap: 'wrap' };\\n\\n        const TableSwitch = this.TableSwitch;\\n\\n        return (\\n            <div>\\n                <div style={wrapStyle}>\\n                    <TableSwitch text=\\\"\\u56FA\\u5B9A\\u8868\\u5934\\uFF1A\\\" checked={scroll && scroll.y} onChange={this.toggleFixHeader} />\\n                    <TableSwitch text=\\\"\\u9690\\u85CF\\u8868\\u5934\\uFF1A\\\" onChange={this.toggleHideHeader} />\\n                    <TableSwitch text=\\\"\\u663E\\u793A\\u6807\\u9898\\uFF1A\\\" onChange={this.toggleTitle} />\\n                    <TableSwitch text=\\\"\\u663E\\u793A\\u5E95\\u90E8\\uFF1A\\\" onChange={this.toggleFooter} />\\n                    <TableSwitch text=\\\"\\u56FA\\u5B9A\\u5217\\uFF1A\\\" onChange={this.toggleFixColumns} />\\n                    <TableSwitch text=\\\"\\u663E\\u793A\\u9009\\u62E9\\u5217\\uFF1A\\\" onChange={this.toggleRowSelection} />\\n                    <TableSwitch text=\\\"\\u663E\\u793A\\u52A0\\u8F7D\\u72B6\\u6001\\uFF1A\\\" onChange={this.toggleLoading} checked={loading} />\\n                    <TableSwitch\\n                        text=\\\"\\u65E0\\u6570\\u636E\\uFF1A\\\"\\n                        onChange={this.toggleDataSource}\\n                        checked={!dataSource || !dataSource.length}\\n                    />\\n                    <TableSwitch text=\\\"\\u5F00\\u542F\\u6392\\u5E8F\\u529F\\u80FD\\uFF1A\\\" onChange={this.toggleShowSorter} />\\n                    <TableSwitch text=\\\"\\u5F00\\u542F\\u8FC7\\u6EE4\\u529F\\u80FD\\uFF1A\\\" onChange={this.toggleShowFilter} />\\n                    <TableSwitch\\n                        text=\\\"\\u5F00\\u542F\\u884C\\u5C55\\u5F00\\u529F\\u80FD\\uFF1A\\\"\\n                        onChange={this.toggleExpandedRowRender}\\n                        checked={typeof expandedRowRender === 'function'}\\n                    />\\n                    <TableSwitch text=\\\"\\u5C55\\u5F00\\u5F53\\u524D\\u6240\\u6709\\u884C\\uFF1A\\\" onChange={this.toggleExpandedRowKeys} />\\n                    <TableSwitch text=\\\"\\u663E\\u793A\\u8FB9\\u6846\\uFF1A\\\" onChange={this.toggleBordered} checked={bordered} />\\n                    <TableSwitch text=\\\"\\u5F00\\u542F\\u5217\\u4F38\\u7F29\\u529F\\u80FD\\uFF1A\\\" onChange={this.toggleResizable} />\\n                    <TableSwitch text=\\\"\\u5206\\u9875\\u63A7\\u4EF6\\uFF1A\\\">\\n                        <ButtonGroup>\\n                            <Button onClick={() => this.switchPagination('bottom')}>Bottom</Button>\\n                            <Button onClick={() => this.switchPagination('top')}>Top</Button>\\n                            <Button onClick={() => this.switchPagination('both')}>Both</Button>\\n                            <Button onClick={() => this.switchPagination(false)}>None</Button>\\n                        </ButtonGroup>\\n                    </TableSwitch>\\n                </div>\\n                <Table\\n                    defaultExpandedRowKeys={defaultExpandedRowKeys}\\n                    onExpandedRowsChange={this.onExpandedRowsChange}\\n                    title={title}\\n                    footer={footer}\\n                    showHeader={showHeader}\\n                    bordered={bordered}\\n                    onChange={this.onChange}\\n                    expandCellFixed={expandCellFixed}\\n                    expandedRowRender={expandedRowRender}\\n                    expandedRowKeys={expandedRowKeys}\\n                    rowSelection={rowSelection}\\n                    scroll={scroll}\\n                    columns={columns}\\n                    dataSource={dataSource}\\n                    pagination={pagination}\\n                    loading={loading}\\n                    resizable={resizable}\\n                />\\n            </div>\\n        );\\n    }\\n}\\n\\nrender(App);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5B8C\\u5168\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E00\\u822C\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Column.render\"), \" \\u5373\\u53EF\\uFF0C\\u4F46\\u662F\\u4F60\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7\\u4F20\\u9012 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Column.useFullRender=true\"), \" \\u6765\\u5F00\\u542F\\u5B8C\\u5168\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u6A21\\u5F0F\\uFF0C\\u6B64\\u65F6\\u590D\\u9009\\u6846\\u6309\\u94AE\\u3001\\u5C55\\u5F00\\u6309\\u94AE\\u3001\\u7F29\\u8FDB\\u7B49\\u7EC4\\u4EF6\\u5C06\\u4F1A\\u900F\\u4F20\\u81F3 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Column.title\"), \" \\u4E0E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Column.render\"), \" \\u65B9\\u6CD5\\u4E2D\\uFF0C\\u4F60\\u53EF\\u4EE5\\u8FDB\\u4E00\\u6B65\\u6765\\u5B9A\\u4E49\\u8868\\u5934\\u548C\\u5355\\u5143\\u683C\\u7684\\u5185\\u5BB9\\u6E32\\u67D3\\u65B9\\u5F0F\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5176\\u4E2D \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Column.title\"), \" \\u63A5\\u53D7\\u7684\\u5165\\u53C2\\u4E3A\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"{\\n    filter: ReactNode, // \\u7B5B\\u9009\\u6309\\u94AE\\n    sorter: ReactNode, // \\u6392\\u5E8F\\u6309\\u94AE\\n    selection: ReactNode, // \\u9009\\u62E9\\u6309\\u94AE\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Column.render\"), \" \\u7B2C\\u56DB\\u4E2A\\u5165\\u53C2\\u4E3A\\u4E00\\u4E2A object\\uFF0C\\u7ED3\\u6784\\u5982\\u4E0B\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"{\\n    expandIcon: ReactNode, // \\u5C55\\u5F00\\u6309\\u94AE\\n    selection: ReactNode, // \\u9009\\u62E9\\u6309\\u94AE\\n    indentTex: ReactNode, // \\u7F29\\u8FDB\\n}\\n\")), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u4E0B\\u65B9\\u7684\\u4F8B\\u5B50\\u5219\\u662F\\u5C06\\u590D\\u9009\\u6846\\u4E0E\\u5185\\u5BB9\\u6E32\\u67D3\\u81F3\\u540C\\u4E00\\u5355\\u5143\\u683C\\u548C\\u8868\\u5934\\u4E2D\\u3002\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState, useEffect, useMemo } from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\n\\nconst columns = [\\n    {\\n        title: ({ sorter, filter, selection }) => (\\n            <span style={{ display: 'inline-flex', alignItems: 'center', paddingLeft: 20 }}>\\n                {selection}\\n                <span style={{ marginLeft: 8 }}>Name</span>\\n                {sorter}\\n                {filter}\\n            </span>\\n        ),\\n        dataIndex: 'name',\\n        width: 400,\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n        filters: [\\n            {\\n                text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n            {\\n                text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n            },\\n        ],\\n        onFilter: (value, record) => record.name.includes(value),\\n        useFullRender: true,\\n        // \\u6B64\\u5904\\u4ECE render \\u7684\\u7B2C\\u56DB\\u4E2A\\u5F62\\u53C2\\u4E2D\\u89E3\\u6784\\u51FA \\u5C55\\u5F00\\u6309\\u94AE\\u3001\\u9009\\u62E9\\u6309\\u94AE\\u3001\\u6587\\u672C\\u7B49\\u5185\\u5BB9\\n        render: (text, record, index, { expandIcon, selection, indentText }) => {\\n            return (\\n                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>\\n                    {indentText}\\n                    {expandIcon}\\n                    {selection}\\n                    <span style={{ marginLeft: 8 }}>\\n                        <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                        {text}\\n                    </span>\\n                </span>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u5927\\u5C0F',\\n        dataIndex: 'size',\\n        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n        render: text => `${text} KB`,\\n    },\\n    {\\n        title: '\\u6240\\u6709\\u8005',\\n        dataIndex: 'owner',\\n        render: (text, record, index) => {\\n            return (\\n                <div>\\n                    <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                        {typeof text === 'string' && text.slice(0, 1)}\\n                    </Avatar>\\n                    {text}\\n                </div>\\n            );\\n        },\\n    },\\n    {\\n        title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n        dataIndex: 'updateTime',\\n        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n        render: value => {\\n            return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n        },\\n    },\\n];\\n\\nconst getData = total => {\\n    const data = [];\\n    for (let i = 0; i < total; i++) {\\n        const isSemiDesign = i % 2 === 0;\\n        const randomNumber = (i * 1000) % 199;\\n        data.push({\\n            key: '' + i,\\n            name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n            owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n            size: randomNumber,\\n            updateTime: new Date().valueOf() + randomNumber * DAY,\\n            avatarBg: isSemiDesign ? 'grey' : 'red',\\n        });\\n    }\\n    return data;\\n};\\n\\nfunction Demo() {\\n    const [dataSource, setDataSource] = useState([]);\\n    const total = 46;\\n    const pagination = useMemo(\\n        () => ({\\n            pageSize: 12,\\n        }),\\n        []\\n    );\\n\\n    const rowSelection = useMemo(() => {\\n        return {\\n            hidden: true,\\n            fixed: 'left',\\n        };\\n    }, []);\\n\\n    useEffect(() => {\\n        const data = getData(total);\\n        setDataSource(data);\\n    }, [total]);\\n\\n    return (\\n        <Table\\n            pagination={pagination}\\n            rowSelection={rowSelection}\\n            columns={columns}\\n            dataSource={dataSource}\\n            onChange={(...args) => console.log(...args)}\\n            expandedRowRender={record => <article>{record.name}</article>}\\n        />\\n    );\\n}\\n\\nrender(Demo);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8868\\u5934\\u5408\\u5E76\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u6237\\u53EF\\u4EE5\\u901A\\u8FC7\\u8868\\u5934\\u5408\\u5E76\\u529F\\u80FD\\u8FDB\\u884C\\u8868\\u5934\\u7684\\u5206\\u7EC4\\uFF0C\\u8868\\u5934\\u5408\\u5E76\\u652F\\u6301\\u4E0E\\u56FA\\u5B9A\\u5217\\u3001\\u865A\\u62DF\\u5316\\u3001\\u6570\\u636E\\u5206\\u7EC4\\u3001\\u5217\\u4F38\\u7F29\\u7B49\\u529F\\u80FD\\u590D\\u5408\\u4F7F\\u7528\\uFF0C\\u4E5F\\u540C\\u65F6\\u652F\\u6301 JSX \\u6216\\u8005\\u914D\\u7F6E\\u5F0F\\u5199\\u6CD5\\u3002\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u5408\\u5E76\\u8868\\u5934\\u914D\\u7F6E\\u5F0F\\u5199\\u6CD5\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useMemo } from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui';\\nimport { IconMore } from '@douyinfe/semi-icons';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\n\\nconst columns = [\\n    {\\n        title: '\\u57FA\\u672C\\u4FE1\\u606F',\\n        fixed: 'left',\\n        children: [\\n            {\\n                title: '\\u6807\\u9898',\\n                dataIndex: 'name',\\n                width: 300,\\n                fixed: true,\\n                render: (text, record, index) => {\\n                    return (\\n                        <span>\\n                            <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                            {text}\\n                        </span>\\n                    );\\n                },\\n                filters: [\\n                    {\\n                        text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                        value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n                    },\\n                    {\\n                        text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                        value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n                    },\\n                ],\\n                onFilter: (value, record) => record.name.includes(value),\\n            },\\n            {\\n                title: '\\u5927\\u5C0F',\\n                dataIndex: 'size',\\n                width: 100,\\n                fixed: true,\\n                sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),\\n                render: text => `${text} KB`,\\n            },\\n        ],\\n    },\\n    {\\n        title: '\\u5176\\u4ED6\\u4FE1\\u606F',\\n        children: [\\n            {\\n                title: '\\u6240\\u6709\\u8005',\\n                dataIndex: 'owner',\\n                render: (text, record, index) => {\\n                    return (\\n                        <div>\\n                            <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                                {typeof text === 'string' && text.slice(0, 1)}\\n                            </Avatar>\\n                            {text}\\n                        </div>\\n                    );\\n                },\\n            },\\n            {\\n                title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n                dataIndex: 'updateTime',\\n                sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n                render: value => {\\n                    return dateFns.format(new Date(value), 'yyyy-MM-dd');\\n                },\\n            },\\n        ],\\n    },\\n    {\\n        title: '\\u66F4\\u591A',\\n        fixed: 'right',\\n        width: 100,\\n        align: 'center',\\n        dataIndex: 'operate',\\n        render: () => {\\n            return <IconMore />;\\n        },\\n    },\\n];\\n\\nconst getData = total => {\\n    const data = [];\\n    for (let i = 0; i < total; i++) {\\n        const isSemiDesign = i % 2 === 0;\\n        const randomNumber = (i * 1000) % 199;\\n        data.push({\\n            key: '' + i,\\n            name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n            owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n            size: randomNumber,\\n            updateTime: new Date().valueOf() + randomNumber * DAY,\\n            avatarBg: isSemiDesign ? 'grey' : 'red',\\n        });\\n    }\\n    return data;\\n};\\n\\nfunction Demo() {\\n    const data = useMemo(() => {\\n        const _data = getData(46);\\n        return _data;\\n    }, []);\\n\\n    return (\\n        <Table\\n            rowSelection={{ fixed: true }}\\n            expandedRowRender={record => <article>{record.name}</article>}\\n            dataSource={data}\\n            scroll={{ y: 400 }}\\n            onChange={(...args) => console.log(...args)}\\n            columns={columns}\\n        />\\n    );\\n}\\n\\nrender(Demo);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u5408\\u5E76\\u8868\\u5934 JSX \\u5199\\u6CD5\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useMemo } from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui';\\nimport { IconMore } from '@douyinfe/semi-icons';\\nimport * as dateFns from 'date-fns';\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\nconst Column = Table.Column;\\n\\nconst getData = total => {\\n    const data = [];\\n    for (let i = 0; i < total; i++) {\\n        const isSemiDesign = i % 2 === 0;\\n        const randomNumber = (i * 1000) % 199;\\n        data.push({\\n            key: '' + i,\\n            name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n            owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n            size: randomNumber,\\n            updateTime: new Date().valueOf() + randomNumber * DAY,\\n            avatarBg: isSemiDesign ? 'grey' : 'red',\\n        });\\n    }\\n    return data;\\n};\\n\\nfunction Demo() {\\n    const data = useMemo(() => {\\n        const _data = getData(46);\\n        return _data;\\n    }, []);\\n\\n    const nameFilters = [\\n        {\\n            text: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n            value: 'Semi Design \\u8BBE\\u8BA1\\u7A3F',\\n        },\\n        {\\n            text: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n            value: 'Semi D2C \\u8BBE\\u8BA1\\u7A3F',\\n        },\\n    ];\\n\\n    const renderName = (text, record, index) => {\\n        return (\\n            <span>\\n                <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                {text}\\n            </span>\\n        );\\n    };\\n\\n    const renderOwner = (text, record, index) => {\\n        return (\\n            <div>\\n                <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                    {typeof text === 'string' && text.slice(0, 1)}\\n                </Avatar>\\n                {text}\\n            </div>\\n        );\\n    };\\n\\n    return (\\n        <Table\\n            rowSelection={{ fixed: true }}\\n            expandedRowRender={record => <article>{record.name}</article>}\\n            dataSource={data}\\n            scroll={{ y: 400 }}\\n            onChange={(...args) => console.log(...args)}\\n        >\\n            <Column title=\\\"\\u57FA\\u672C\\u4FE1\\u606F\\\" fixed=\\\"left\\\">\\n                <Column\\n                    title=\\\"\\u6807\\u9898\\\"\\n                    dataIndex=\\\"name\\\"\\n                    width={300}\\n                    fixed\\n                    render={renderName}\\n                    filters={nameFilters}\\n                    onFilter={(value, record) => record.name.includes(value)}\\n                />\\n                <Column\\n                    title=\\\"\\u5927\\u5C0F\\\"\\n                    dataIndex=\\\"size\\\"\\n                    width={100}\\n                    fixed\\n                    render={text => `${text} KB`}\\n                    sorter={(a, b) => (a.size - b.size > 0 ? 1 : -1)}\\n                ></Column>\\n            </Column>\\n            <Column title=\\\"\\u5176\\u4ED6\\u4FE1\\u606F\\\">\\n                <Column title=\\\"\\u6240\\u6709\\u8005\\\" dataIndex=\\\"owner\\\" render={renderOwner} />\\n                <Column\\n                    title=\\\"\\u66F4\\u65B0\\u65E5\\u671F\\\"\\n                    dataIndex=\\\"updateTime\\\"\\n                    sorter={(a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1)}\\n                    render={value => dateFns.format(new Date(value), 'yyyy-MM-dd')}\\n                ></Column>\\n            </Column>\\n            <Column\\n                title=\\\"\\u66F4\\u591A\\\"\\n                dataIndex=\\\"operate\\\"\\n                fixed=\\\"right\\\"\\n                width={100}\\n                align=\\\"center\\\"\\n                render={() => <IconMore />}\\n            />\\n        </Table>\\n    );\\n}\\n\\nrender(Demo);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u884C\\u5217\\u5408\\u5E76\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u5934\\u9664\\u4E86\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"children\"), \" \\u5199\\u6CD5\\u8FDB\\u884C\\u5408\\u5E76\\u5916\\uFF0C\\u53EF\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"column.colSpan\"), \" \\u8FDB\\u884C\\u8868\\u5934\\u7684\\u5217\\u5408\\u5E76\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u683C\\u652F\\u6301\\u884C/\\u5217\\u5408\\u5E76\\uFF0C\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"render\"), \" \\u91CC\\u7684\\u5355\\u5143\\u683C\\u5C5E\\u6027 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"colSpan\"), \" \\u6216\\u8005 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"rowSpan\"), \" \\u8BBE\\u503C\\u4E3A 0 \\u65F6\\uFF0C\\u8BBE\\u7F6E\\u7684\\u8868\\u683C\\u4E0D\\u4F1A\\u6E32\\u67D3\\u3002\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"type Render = (text: string, record: Object, index: number, options?: RenderOptions) => {\\n    children: React.ReactNode;\\n    props: {\\n        colSpan?: number,\\n        rowSpan?: number,\\n    },\\n    [x: string]: any;\\n}\\n\\ninterface RenderOptions {\\n    expandIcon?: React.ReactNode;\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState, useMemo } from 'react';\\nimport { Table, Avatar } from '@douyinfe/semi-ui';\\nimport * as dateFns from 'date-fns';\\n\\nconst figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';\\nconst columns = [\\n    {\\n        title: '\\u6807\\u9898',\\n        dataIndex: 'name',\\n        width: 400,\\n        render: (text, record, index) => {\\n            const renderObject = {};\\n            const children = (\\n                <div>\\n                    <Avatar size=\\\"small\\\" shape=\\\"square\\\" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>\\n                    {text}\\n                </div>\\n            );\\n            renderObject.children = children;\\n            if (index === 0) {\\n                renderObject.props = {\\n                    colSpan: 4,\\n                };\\n            }\\n            if (index === 1) {\\n                renderObject.props = {\\n                    rowSpan: 2,\\n                };\\n            }\\n            if (index === 2) {\\n                renderObject.props = {\\n                    rowSpan: 0,\\n                };\\n            }\\n            return renderObject;\\n        },\\n    },\\n    {\\n        title: '\\u5927\\u5C0F',\\n        dataIndex: 'size',\\n        render: (text, record, index) => {\\n            if (index === 0) {\\n                return {\\n                    children: `${text} KB`,\\n                    props: {\\n                        colSpan: 0,\\n                    },\\n                };\\n            }\\n            if (index === 1) {\\n                return {\\n                    children: `${text} KB`,\\n                    props: {\\n                        rowSpan: 2,\\n                    },\\n                };\\n            }\\n            if (index === 2) {\\n                return {\\n                    children: `${text} KB`,\\n                    props: {\\n                        rowSpan: 0,\\n                    },\\n                };\\n            }\\n            return `${text} KB`;\\n        },\\n    },\\n    {\\n        title: '\\u6240\\u6709\\u8005',\\n        dataIndex: 'owner',\\n        render: (text, record, index) => {\\n            const children = (\\n                <div>\\n                    <Avatar size=\\\"small\\\" color={record.avatarBg} style={{ marginRight: 4 }}>\\n                        {typeof text === 'string' && text.slice(0, 1)}\\n                    </Avatar>\\n                    {text}\\n                </div>\\n            );\\n            if (index === 0) {\\n                return {\\n                    children,\\n                    props: {\\n                        colSpan: 0,\\n                    },\\n                };\\n            }\\n            return children;\\n        },\\n    },\\n    {\\n        title: '\\u66F4\\u65B0\\u65E5\\u671F',\\n        dataIndex: 'updateTime',\\n        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),\\n        render: (value, record, index) => {\\n            const children = dateFns.format(new Date(value), 'yyyy-MM-dd');\\n            if (index === 0) {\\n                return {\\n                    children,\\n                    props: {\\n                        colSpan: 0,\\n                    },\\n                };\\n            }\\n            if (index === 1) {\\n                return {\\n                    children,\\n                    props: {\\n                        rowSpan: 2,\\n                    },\\n                };\\n            }\\n            if (index === 2) {\\n                return {\\n                    children,\\n                    props: {\\n                        rowSpan: 0,\\n                    },\\n                };\\n            }\\n            return children;\\n        },\\n    },\\n];\\n\\nconst DAY = 24 * 60 * 60 * 1000;\\n\\nfunction App() {\\n    const [dataSource, setData] = useState([]);\\n\\n    const getData = total => {\\n        const data = [];\\n        for (let i = 0; i < total; i++) {\\n            const isSemiDesign = i % 2 === 0;\\n            const randomNumber = (i * 1000) % 199;\\n            data.push({\\n                key: '' + i,\\n                name: isSemiDesign ? `Semi Design \\u8BBE\\u8BA1\\u7A3F${i}.fig` : `Semi D2C \\u8BBE\\u8BA1\\u7A3F${i}.fig`,\\n                owner: isSemiDesign ? '\\u59DC\\u9E4F\\u5FD7' : '\\u90DD\\u5BA3',\\n                size: randomNumber,\\n                updateTime: new Date().valueOf() + randomNumber * DAY,\\n                avatarBg: isSemiDesign ? 'grey' : 'red',\\n            });\\n        }\\n        return data;\\n    };\\n\\n    useEffect(() => {\\n        const data = getData(5);\\n        setData(data);\\n    }, []);\\n\\n    return <Table columns={columns} dataSource={dataSource} pagination={false} />;\\n}\\n\\nrender(App);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Table\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bordered\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u5916\\u8FB9\\u6846\\u548C\\u5217\\u8FB9\\u6846\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"childrenRecordName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6811\\u5F62\\u8868\\u683C dataSource \\u4E2D\\u6BCF\\u884C\\u5143\\u7D20\\u4E2D\\u8868\\u793A\\u5B50\\u7EA7\\u6570\\u636E\\u7684\\u5B57\\u6BB5\\uFF0C\\u9ED8\\u8BA4\\u4E3A children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'children'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6700\\u5916\\u5C42\\u6837\\u5F0F\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"clickGroupedRowToExpand\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u5206\\u7EC4\\u8868\\u5934\\u884C\\u65F6\\u5206\\u7EC4\\u5185\\u5BB9\\u5C55\\u5F00\\u6216\\u6536\\u8D77\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"columns\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u683C\\u5217\\u7684\\u914D\\u7F6E\\u63CF\\u8FF0\\uFF0C\\u8BE6\\u89C1\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Column\"\n  }, \"Column\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Column[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"components\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8986\\u76D6 Table \\u7684\\u7EC4\\u6210\\u5143\\u7D20\\uFF0C\\u5982 table, body\\uFF0Crow\\uFF0Ctd\\uFF0Cth \\u7B49\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    target: \"_blank\",\n    href: \"https://github.com/DouyinFE/semi-design/blob/340c93e4e1612a879be869c43ad7a9a85ab5a302/packages/semi-ui/table/interface.ts#L200\"\n  }, \"TableComponents\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dataSource\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6570\\u636E\\u3002\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u8BF7\\u4E3A\\u6BCF\\u4E00\\u6761\\u6570\\u636E\\u5206\\u914D\\u4E00\\u4E2A\\u72EC\\u7ACB\\u7684 key\\uFF0C\\u6216\\u4F7F\\u7528 rowKey \\u6307\\u5B9A\\u4E00\\u4E2A\\u4F5C\\u4E3A\\u4E3B\\u952E\\u7684\\u5C5E\\u6027\\u540D\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"RecordType[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultExpandAllRows\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u662F\\u5426\\u5C55\\u5F00\\u6240\\u6709\\u884C\\uFF0C\\u52A8\\u6001\\u52A0\\u8F7D\\u6570\\u636E\\u65F6\\u4E0D\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultExpandAllGroupRows\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u662F\\u5426\\u5C55\\u5F00\\u5206\\u7EC4\\u884C\\uFF0C\\u52A8\\u6001\\u52A0\\u8F7D\\u6570\\u636E\\u65F6\\u4E0D\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultExpandedRowKeys\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u5C55\\u5F00\\u7684\\u884C key \\u6570\\u7EC4\\uFF0C\\uFF0C\\u52A8\\u6001\\u52A0\\u8F7D\\u6570\\u636E\\u65F6\\u4E0D\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<\", \"*\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"direction\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"RTL\\u3001LTR \\u65B9\\u5411\\uFF0C\\u9ED8\\u8BA4\\u503C\\u7B49\\u4E8E ConfigProvider direction\\uFF0C\\u53EF\\u5728\\u6B64\\u5355\\u72EC\\u914D\\u7F6E Table \\u7684 direction\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'ltr' \", \"|\", \" 'rtl'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.31.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"empty\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\\u6570\\u636E\\u65F6\\u5C55\\u793A\\u7684\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'\\u6682\\u65E0\\u6570\\u636E'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"expandCellFixed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C55\\u5F00\\u56FE\\u6807\\u6240\\u5728\\u5217\\u662F\\u5426\\u56FA\\u5B9A\\uFF0C\\u4E0E Column \\u4E2D\\u7684 fixed \\u53D6\\u503C\\u76F8\\u540C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"expandIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5C55\\u5F00\\u6309\\u94AE\\uFF0C\\u4F20 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"false\"), \" \\u5173\\u95ED\\u9ED8\\u8BA4\\u7684\\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean \", \"|\", \" ReactNode\", mdx(\"br\", null), \" \", \"|\", \" (expanded: boolean) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"expandedRowKeys\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C55\\u5F00\\u7684\\u884C\\uFF0C\\u4F20\\u5165\\u6B64\\u53C2\\u6570\\u65F6\\u884C\\u5C55\\u5F00\\u529F\\u80FD\\u5C06\\u53D7\\u63A7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(string \", \"|\", \" number)[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"expandedRowRender\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u989D\\u5916\\u7684\\u5C55\\u5F00\\u884C\\u3002\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u8BF7\\u4E3A\\u6BCF\\u4E00\\u6761\\u6570\\u636E\\u5206\\u914D\\u4E00\\u4E2A\\u72EC\\u7ACB\\u7684 key\\uFF0C\\u6216\\u4F7F\\u7528 rowKey \\u6307\\u5B9A\\u4E00\\u4E2A\\u4F5C\\u4E3A\\u4E3B\\u952E\\u7684\\u5C5E\\u6027\\u540D\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(record: object, index: number, expanded: boolean) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"expandAllRows\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u5F00\\u6240\\u6709\\u884C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"expandAllGroupRows\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u5F00\\u5206\\u7EC4\\u884C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"expandRowByClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u884C\\u65F6\\u662F\\u5426\\u5C55\\u5F00\\u53EF\\u5C55\\u5F00\\u884C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"footer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u683C\\u5C3E\\u90E8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\", mdx(\"br\", null), \"|\", \"(pageData: object) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getVirtualizedListRef\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8FD4\\u56DE\\u865A\\u62DF\\u5316\\u8868\\u683C\\u6240\\u7528 VariableSizeList \\u7684 ref\\uFF0C\\u4EC5\\u5728\\u914D\\u7F6E virtualized \\u65F6\\u6709\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(ref: React.RefObject) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"groupBy\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5206\\u7EC4\\u4F9D\\u636E\\uFF0C\\u4E00\\u822C\\u4E3A dataSource \\u5143\\u7D20\\u4E2D\\u67D0\\u4E2A\\u952E\\u540D\\u6216\\u8005\\u8FD4\\u56DE\\u503C\\u4E3A\\u5B57\\u7B26\\u4E32\\u3001\\u6570\\u5B57\\u7684\\u4E00\\u4E2A\\u65B9\\u6CD5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"number\", mdx(\"br\", null), \"|\", \"(record: RecordType) => string\", \"|\", \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hideExpandedColumn\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u8868\\u683C\\u53EF\\u5C55\\u5F00\\u65F6\\uFF0C\\u5C55\\u5F00\\u6309\\u94AE\\u9ED8\\u8BA4\\u4F1A\\u4E0E\\u7B2C\\u4E00\\u5217\\u6587\\u6848\\u6E32\\u67D3\\u5728\\u540C\\u4E00\\u4E2A\\u5355\\u5143\\u683C\\u5185\\uFF0C\\u8BBE\\u4E3A false \\u65F6\\u9ED8\\u8BA4\\u5C06\\u5C55\\u5F00\\u6309\\u94AE\\u5355\\u72EC\\u4F5C\\u4E3A\\u4E00\\u5217\\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indentSize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6811\\u5F62\\u7ED3\\u6784 TableCell \\u7684\\u7F29\\u8FDB\\u5927\\u5C0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"keepDOM\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6298\\u53E0\\u884C\\u65F6\\u662F\\u5426\\u4E0D\\u9500\\u6BC1\\u88AB\\u6298\\u53E0\\u7684 DOM\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"loading\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9875\\u9762\\u662F\\u5426\\u52A0\\u8F7D\\u4E2D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"pagination\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5206\\u9875\\u7EC4\\u4EF6\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \"TablePaginationProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"prefixCls\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\u540D\\u524D\\u7F00\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderGroupSection\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u5934\\u6E32\\u67D3\\u65B9\\u6CD5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(groupKey?: string \", \"|\", \" number, group?: string[] \", \"|\", \" number[]) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderPagination\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5206\\u9875\\u5668\\u6E32\\u67D3\\u65B9\\u6CD5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(paginationProps?: TablePaginationProps) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"resizable\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5F00\\u542F\\u4F38\\u7F29\\u5217\\u529F\\u80FD\\uFF0C\\u9700\\u8981\\u8FDB\\u884C\\u4F38\\u7F29\\u7684\\u5217\\u5FC5\\u987B\\u8981\\u63D0\\u4F9B width \\u7684\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Resizable\"\n  }, \"Resizable\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"rowExpandable\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4F20\\u5165\\u8BE5\\u53C2\\u6570\\u65F6\\uFF0CTable \\u4F5C\\u884C\\u6E32\\u67D3\\u65F6\\u4F1A\\u8C03\\u7528\\u8BE5\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE\\u503C\\u7528\\u4E8E\\u5224\\u65AD\\u8BE5\\u884C\\u662F\\u5426\\u53EF\\u5C55\\u5F00\\uFF0C\\u8FD4\\u56DE\\u503C\\u4E3A false \\u65F6\\u5173\\u95ED\\u53EF\\u5C55\\u5F00\\u6309\\u94AE\\u7684\\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(record: object) => boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"rowKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u683C\\u884C key \\u7684\\u53D6\\u503C\\uFF0C\\u53EF\\u4EE5\\u662F\\u5B57\\u7B26\\u4E32\\u6216\\u4E00\\u4E2A\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", mdx(\"br\", null), \"|\", \"(record: RecordType) => string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'key'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"rowSelection\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u683C\\u884C\\u662F\\u5426\\u53EF\\u9009\\u62E9\\uFF0C\\u8BE6\\u89C1 \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#rowSelection\"\n  }, \"rowSelection\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"scroll\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u683C\\u662F\\u5426\\u53EF\\u6EDA\\u52A8\\uFF0C\\u914D\\u7F6E\\u6EDA\\u52A8\\u533A\\u57DF\\u7684\\u5BBD\\u6216\\u9AD8\\uFF0C\\u8BE6\\u89C1 \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#scroll\"\n  }, \"scroll\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showHeader\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u8868\\u5934\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u683C\\u5C3A\\u5BF8\\uFF0C\\u5F71\\u54CD\\u8868\\u683C\\u884C \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"padding\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"default\\\"\", \"|\", \"\\\"middle\\\"\", \"|\", \"\\\"small\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"default\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"sticky\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FA\\u5B9A\\u8868\\u5934\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean \", \"|\", \" { top: number }\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.21.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u683C\\u6807\\u9898\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\", mdx(\"br\", null), \"|\", \"(pageData: RecordType[]) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"virtualized\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u865A\\u62DF\\u5316\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Virtualized\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"virtualized.itemSize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6BCF\\u884C\\u7684\\u9AD8\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\", \"|\", \"(index: number) => number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"56\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"virtualized.onScroll\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u865A\\u62DF\\u5316\\u6EDA\\u52A8\\u56DE\\u8C03\\u65B9\\u6CD5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"( scrollDirection?: 'forward' \", \"|\", \" 'backward', scrollOffset?: number, scrollUpdateWasRequested?: boolean ) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5206\\u9875\\u3001\\u6392\\u5E8F\\u3001\\u7B5B\\u9009\\u53D8\\u5316\\u65F6\\u89E6\\u53D1\\u3002extra.changeType \\u81EA v2.72 \\u652F\\u6301\\u3002\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"({ pagination: TablePaginationProps, \", mdx(\"br\", null), \"filters: Array<\", \"*\", \">, sorter: object, extra: { changeType: 'sorter' \", \"|\", \" 'filter' \", \"|\", \" 'pagination' } }) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onExpand\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u884C\\u5C55\\u5F00\\u56FE\\u6807\\u65F6\\u8FDB\\u884C\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(expanded: boolean, record: RecordType, DOMEvent: MouseEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onExpandedRowsChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C55\\u5F00\\u7684\\u884C\\u53D8\\u5316\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(rows: RecordType[]) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onGroupedRow\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u4F3C\\u4E8E onRow\\uFF0C\\u4E0D\\u8FC7\\u8FD9\\u4E2A\\u53C2\\u6570\\u5355\\u72EC\\u7528\\u4E8E\\u5B9A\\u4E49\\u5206\\u7EC4\\u8868\\u5934\\u7684\\u884C\\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(record: RecordType, index: number) => object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onHeaderRow\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u5934\\u90E8\\u884C\\u5C5E\\u6027\\uFF0C\\u8FD4\\u56DE\\u7684\\u5BF9\\u8C61\\u4F1A\\u88AB\\u5408\\u5E76\\u4F20\\u7ED9\\u8868\\u5934\\u884C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(columns: Column[], index: number) => object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onRow\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u884C\\u5C5E\\u6027\\uFF0C\\u8FD4\\u56DE\\u7684\\u5BF9\\u8C61\\u4F1A\\u88AB\\u5408\\u5E76\\u4F20\\u7ED9\\u8868\\u683C\\u884C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(record: RecordType, index: number) => object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E00\\u4E9B\\u4E0A\\u9762\\u7528\\u5230\\u7684\\u7C7B\\u578B\\u5B9A\\u4E49\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"// PaginationProps \\u4E3A Pagination \\u7EC4\\u4EF6\\u652F\\u6301\\u7684 props\\ninterface TablePaginationProps extends PaginationProps {\\n    position?: PaginationPosition;\\n    formatPageText?: FormatPageText;\\n}\\n\\ntype VirtualizedItemSizeFn = (index?: number) => number;\\ntype VirtualizedOnScrollArgs = {\\n    scrollDirection?: 'forward' | 'backward';\\n    scrollOffset?: number;\\n    scrollUpdateWasRequested?: boolean;\\n};\\ntype VirtualizedOnScroll = (object: VirtualizedOnScrollArgs) => void;\\n\\ntype Virtualized =\\n    | boolean\\n    | {\\n          itemSize?: number | VirtualizedItemSizeFn;\\n          onScroll?: VirtualizedOnScroll;\\n      };\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"RecordType \\u4E3A Table \\u548C Column \\u7684\\u6CDB\\u578B\\u53C2\\u6570\\uFF0C\\u9ED8\\u8BA4\\u4E3A object \\u7C7B\\u578B\\u3002\\u4F60\\u53EF\\u4EE5\\u8FD9\\u6837\\u4F7F\\u7528 RecordType\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"import { ColumnProps } from 'table/interface';\\n\\ninterface Record {\\n    title?: string;\\n    dataIndex?: string;\\n    width?: number;\\n    render?: Function;\\n    key?: string;\\n    name?: string;\\n    age?: number;\\n    address?: string;\\n}\\n\\nfunction App() {\\n    const columns: ColumnProps<Record>[] = [\\n            {\\n                title: 'Name',\\n                dataIndex: 'name',\\n                width: 200,\\n            },\\n            // ...\\n    ];\\n\\n    const data: Record[] = [\\n        {\\n            key: '1',\\n            name: 'John Brown',\\n            age: 32,\\n            address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',\\n        },\\n        // ...\\n    ];\\n\\n    return (\\n        <Table<Record>\\n            columns={columns}\\n            dataSource={data}\\n            // ...\\n        >\\n    );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"onHeaderRow / onRow \\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onHeaderRow\"), \" \\u4E2D\\u53EF\\u4EE5\\u8FD4\\u56DE th \\u652F\\u6301\\u7684\\u5C5E\\u6027\\u6216\\u8005\\u4E8B\\u4EF6 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onRow\"), \" \\u4E2D\\u53EF\\u4EE5\\u8FD4\\u56DE tr \\u652F\\u6301\\u7684\\u5C5E\\u6027\\u6216\\u8005\\u4E8B\\u4EF6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nimport { Table } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Table\\n        onRow={(record, index) => {\\n            return {\\n                onClick: event => {}, // \\u70B9\\u51FB\\u884C\\n                onMouseEnter: event => {}, // \\u9F20\\u6807\\u79FB\\u5165\\u884C\\n                onMouseLeave: event => {}, // \\u9F20\\u6807\\u79FB\\u51FA\\u884C\\n                className: '',\\n                // ...\\n                // \\u5176\\u4ED6\\u53EF\\u4EE5\\u4F5C\\u7528\\u4E8E tr \\u7684\\u5C5E\\u6027\\u6216\\u4E8B\\u4EF6\\n            };\\n        }}\\n        onHeaderRow={(columns, index) => {\\n            return {\\n                onClick: event => {}, // \\u70B9\\u51FB\\u8868\\u5934\\u884C\\n                onMouseEnter: event => {}, // \\u9F20\\u6807\\u79FB\\u5165\\u8868\\u5934\\u884C\\n                onMouseLeave: event => {}, // \\u9F20\\u6807\\u79FB\\u51FA\\u8868\\u5934\\u884C\\n                className: '',\\n                // ...\\n                // \\u5176\\u4ED6\\u53EF\\u4EE5\\u4F5C\\u7528\\u4E8E th \\u7684\\u5C5E\\u6027\\u6216\\u4E8B\\u4EF6\\n            };\\n        }}\\n    />\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Column\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u5217\\u7684\\u5BF9\\u9F50\\u65B9\\u5F0F\\uFF0C\\u5728 RTL \\u65F6\\u4F1A\\u81EA\\u52A8\\u5207\\u6362\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'left' \", \"|\", \" 'right' \", \"|\", \" 'center'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'left'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5217\\u6837\\u5F0F\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u5934\\u5408\\u5E76\\u65F6\\u7528\\u4E8E\\u5B50\\u5217\\u7684\\u8BBE\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Column[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"colSpan\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u5934\\u5217\\u5408\\u5E76\\uFF0C\\u8BBE\\u7F6E\\u4E3A 0 \\u65F6\\uFF0C\\u4E0D\\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dataIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5217\\u6570\\u636E\\u5728\\u6570\\u636E\\u9879\\u4E2D\\u5BF9\\u5E94\\u7684 key\\uFF0C\\u4F7F\\u7528\\u6392\\u5E8F\\u6216\\u7B5B\\u9009\\u65F6\\u5FC5\\u4F20\\uFF0C\\u4E14\\u9700\\u8981\\u4FDD\\u6301\\u4E0D\\u91CD\\u590D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultFilteredValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7B5B\\u9009\\u7684\\u9ED8\\u8BA4\\u503C\\uFF0C\\u503C\\u4E3A\\u5DF2\\u7B5B\\u9009\\u7684 value \\u6570\\u7EC4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"any[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.5.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultSortOrder\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6392\\u5E8F\\u7684\\u9ED8\\u8BA4\\u503C\\uFF0C\\u53EF\\u8BBE\\u7F6E\\u4E3A 'ascend'\", \"|\", \"'descend'\", \"|\", \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \" string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ellipsis\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6587\\u672C\\u7F29\\u7565\\uFF0C\\u5F00\\u542F\\u540E table-layout \\u4F1A\\u81EA\\u52A8\\u5207\\u6362\\u4E3A fixed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \" { showTitle: boolean }\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.34.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"filterChildrenRecord\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u9700\\u8981\\u5BF9\\u5B50\\u7EA7\\u6570\\u636E\\u8FDB\\u884C\\u672C\\u5730\\u8FC7\\u6EE4\\uFF0C\\u5F00\\u542F\\u8BE5\\u529F\\u80FD\\u540E\\u5982\\u679C\\u5B50\\u7EA7\\u7B26\\u5408\\u8FC7\\u6EE4\\u6807\\u51C6\\uFF0C\\u7236\\u7EA7\\u5373\\u4F7F\\u4E0D\\u7B26\\u5408\\u4ECD\\u7136\\u4F1A\\u4FDD\\u7559\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"filterDropdown\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u7B5B\\u9009\\u83DC\\u5355\\uFF0C\\u6B64\\u51FD\\u6570\\u53EA\\u8D1F\\u8D23\\u6E32\\u67D3\\u56FE\\u5C42\\uFF0C\\u9700\\u8981\\u81EA\\u884C\\u7F16\\u5199\\u5404\\u79CD\\u4EA4\\u4E92\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"filterDropdownProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u900F\\u4F20\\u7ED9 Dropdown \\u7684\\u5C5E\\u6027\\uFF0C\\u8BE6\\u60C5\\u70B9\\u51FB\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/show/dropdown#Dropdown\"\n  }, \"Dropdown API\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"filterDropdownVisible\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63A7\\u5236 Dropdown \\u7684 visible\\uFF0C\\u8BE6\\u60C5\\u70B9\\u51FB\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/show/dropdown#Dropdown\"\n  }, \"Dropdown API\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"filterIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49 filter \\u56FE\\u6807\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \"ReactNode\", \"|\", \"(filtered: boolean) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"filterMultiple\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u591A\\u9009\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"filterConfirmMode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7B5B\\u9009\\u786E\\u8BA4\\u6A21\\u5F0F\\u3002\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"immediate\"), \" \\u4E3A\\u70B9\\u51FB\\u7B5B\\u9009\\u9879\\u7ACB\\u5373\\u751F\\u6548\\uFF1B\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"confirm\"), \" \\u4E3A\\u70B9\\u51FB\\u7B5B\\u9009\\u9879\\u540E\\u9700\\u70B9\\u51FB\\u786E\\u5B9A\\u6309\\u94AE\\u624D\\u751F\\u6548\\uFF0C\\u6B64\\u65F6\\u4E0B\\u62C9\\u9762\\u677F\\u5E95\\u90E8\\u4F1A\\u663E\\u793A\\u786E\\u5B9A\\u548C\\u91CD\\u7F6E\\u6309\\u94AE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'immediate' \", \"|\", \" 'confirm'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'immediate'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"filteredValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7B5B\\u9009\\u7684\\u53D7\\u63A7\\u5C5E\\u6027\\uFF0C\\u5916\\u754C\\u53EF\\u7528\\u6B64\\u63A7\\u5236\\u5217\\u7684\\u7B5B\\u9009\\u72B6\\u6001\\uFF0C\\u503C\\u4E3A\\u5DF2\\u7B5B\\u9009\\u7684 value \\u6570\\u7EC4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"any[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"filters\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u5934\\u7684\\u7B5B\\u9009\\u83DC\\u5355\\u9879\\u3002\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Filter[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fixed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5217\\u662F\\u5426\\u56FA\\u5B9A\\uFF0C\\u53EF\\u9009 true(\\u7B49\\u6548\\u4E8E left) 'left' 'right'\\uFF0C\\u5728 RTL \\u65F6\\u4F1A\\u81EA\\u52A8\\u5207\\u6362\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"key\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React \\u9700\\u8981\\u7684 key\\uFF0C\\u5982\\u679C\\u5DF2\\u7ECF\\u8BBE\\u7F6E\\u4E86\\u552F\\u4E00\\u7684 dataIndex\\uFF0C\\u53EF\\u4EE5\\u5FFD\\u7565\\u8FD9\\u4E2A\\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"render\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\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\\u884C\\u6570\\u636E\\uFF0C\\u884C\\u7D22\\u5F15\\uFF0C@return \\u91CC\\u9762\\u53EF\\u4EE5\\u8BBE\\u7F6E\\u8868\\u683C\\u884C/\\u5217\\u5408\\u5E76\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(text: any, record: RecordType, index: number, { expandIcon?: ReactNode, selection?: ReactNode, indentText?: ReactNode }) => object\", \"|\", \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderFilterDropdown\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7B5B\\u9009\\u5668 dropdown \\u9762\\u677F\\uFF0C\\u7528\\u6CD5\\u8BE6\\u89C1\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%AD%9B%E9%80%89%E5%99%A8\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7B5B\\u9009\\u5668\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props?: RenderFilterDropdownProps) => React.ReactNode;\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.52.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderFilterDropdownItem\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6BCF\\u4E2A\\u7B5B\\u9009\\u9879\\u6E32\\u67D3\\u65B9\\u5F0F\\uFF0C\\u7528\\u6CD5\\u8BE6\\u89C1\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%AD%9B%E9%80%89%E9%A1%B9%E6%B8%B2%E6%9F%93\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7B5B\\u9009\\u9879\\u6E32\\u67D3\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"({ value: any, text: any, onChange: Function, level: number, ...otherProps }) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"resize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5F00\\u542F resize \\u6A21\\u5F0F\\uFF0C\\u53EA\\u6709 Table resizable \\u5F00\\u542F\\u540E\\u6B64\\u5C5E\\u6027\\u624D\\u4F1A\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.42.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showSortTip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u6392\\u5E8F\\u63D0\\u793A\\uFF0C\\u5982\\u679C\\u8BBE\\u7F6E\\u4E86 sortOrder\\uFF0C\\u6392\\u5E8F\\u53D7\\u63A7\\uFF0C\\u5219\\u8BE5\\u53C2\\u6570\\u4E0D\\u4F1A\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.65.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"sortChildrenRecord\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5BF9\\u5B50\\u7EA7\\u6570\\u636E\\u8FDB\\u884C\\u672C\\u5730\\u6392\\u5E8F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"sortOrder\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6392\\u5E8F\\u7684\\u53D7\\u63A7\\u5C5E\\u6027\\uFF0C\\u5916\\u754C\\u53EF\\u7528\\u6B64\\u63A7\\u5236\\u5217\\u7684\\u6392\\u5E8F\\uFF0C\\u53EF\\u8BBE\\u7F6E\\u4E3A 'ascend'\", \"|\", \"'descend'\", \"|\", \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \" string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"sorter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6392\\u5E8F\\u51FD\\u6570\\uFF0C\\u672C\\u5730\\u6392\\u5E8F\\u4F7F\\u7528\\u4E00\\u4E2A\\u51FD\\u6570 (\\u53C2\\u8003 Array.sort \\u7684 compareFunction)\\uFF0C\\u9700\\u8981\\u670D\\u52A1\\u7AEF\\u6392\\u5E8F\\u53EF\\u8BBE\\u4E3A true\\u3002\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u5FC5\\u987B\\u7ED9\\u6392\\u5E8F\\u5217\\u8BBE\\u7F6E\\u4E00\\u4E2A\\u72EC\\u7ACB\\u7684 dataIndex\\uFF0C\\u5FC5\\u987B\\u4E3A dataSource \\u91CC\\u9762\\u7684\\u6BCF\\u6761\\u6570\\u636E\\u9879\\u8BBE\\u7F6E\\u72EC\\u7ACB\\u7684 key\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \"(r1: RecordType, r2: RecordType, sortOrder: 'ascend' \", \"|\", \" 'descend') => number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"sortIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49 sort \\u56FE\\u6807\\uFF0C\\u8FD4\\u56DE\\u7684\\u8282\\u70B9\\u63A7\\u5236\\u4E86\\u6574\\u4E2A\\u6392\\u5E8F\\u6309\\u94AE\\uFF0C\\u5305\\u542B\\u5347\\u5E8F\\u548C\\u964D\\u5E8F\\u3002\\u9700\\u6839\\u636E sortOrder \\u63A7\\u5236\\u9AD8\\u4EAE\\u884C\\u4E3A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props: { sortOrder }) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.50.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shouldCellUpdate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u63A7\\u5236\\u5355\\u5143\\u683C\\u662F\\u5426\\u6E32\\u67D3\\u3002\\u9ED8\\u8BA4 cell \\u4F1A\\u6DF1\\u5BF9\\u6BD4 props \\u548C nextProps \\u662F\\u5426\\u53D8\\u5316\\uFF0C\\u6765\\u51B3\\u5B9A\\u662F\\u5426\\u6E32\\u67D3\\u5355\\u5143\\u683C\\u3002\\u5982\\u679C\\u4F60\\u7684 props \\u4E2D\\u7684 record \\u6BD4\\u8F83\\u590D\\u6742\\uFF0C\\u5EFA\\u8BAE\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"shouldCellUpdate\"), \" \\u63A5\\u7BA1\\u5355\\u5143\\u683C\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props: TableCellProps, prevProps: TableCellProps) => boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.71.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5217\\u5934\\u663E\\u793A\\u6587\\u5B57\\u3002\\u4F20\\u5165 function \\u65F6\\uFF0Ctitle \\u5C06\\u4F7F\\u7528\\u51FD\\u6570\\u7684\\u8FD4\\u56DE\\u503C\\uFF1B\\u4F20\\u5165\\u5176\\u4ED6\\u7C7B\\u578B\\uFF0C\\u5C06\\u4F1A\\u548C sorter\\u3001filter \\u8FDB\\u884C\\u805A\\u5408\\u3002\\u9700\\u8981\\u642D\\u914D useFullRender \\u83B7\\u53D6\\u51FD\\u6570\\u7C7B\\u578B\\u4E2D\\u7684 filter \\u7B49\\u53C2\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\", \"|\", \"({ filter: ReactNode, sorter: ReactNode, selection: ReactNode }) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"useFullRender\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5B8C\\u5168\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\uFF0C\\u7528\\u6CD5\\u8BE6\\u89C1\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#%E5%AE%8C%E5%85%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%B8%B2%E6%9F%93\"\n  }, \"\\u5B8C\\u5168\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\"), \"\\uFF0C\\u5F00\\u542F\\u6B64\\u529F\\u80FD\\u4F1A\\u9020\\u6210\\u4E00\\u5B9A\\u7684\\u6027\\u80FD\\u635F\\u8017\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"width\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5217\\u5BBD\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onCell\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u5355\\u5143\\u683C\\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(record: RecordType, rowIndex: number) => object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onFilter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u672C\\u5730\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u786E\\u5B9A\\u7B5B\\u9009\\u7684\\u8FD0\\u884C\\u51FD\\u6570\\u3002\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u5FC5\\u987B\\u7ED9\\u7B5B\\u9009\\u5217\\u8BBE\\u7F6E\\u4E00\\u4E2A\\u72EC\\u7ACB\\u7684 dataIndex\\uFF0C\\u5FC5\\u987B\\u4E3A dataSource \\u91CC\\u9762\\u7684\\u6BCF\\u6761\\u6570\\u636E\\u9879\\u8BBE\\u7F6E\\u72EC\\u7ACB\\u7684 key\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(filteredValue: any, record: RecordType) => boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onFilterDropdownVisibleChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7B5B\\u9009\\u83DC\\u5355\\u53EF\\u89C1\\u53D8\\u5316\\u65F6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(visible: boolean) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onHeaderCell\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u5934\\u90E8\\u5355\\u5143\\u683C\\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(column: RecordType, columnIndex: number) => object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E00\\u4E9B\\u4E0A\\u9762\\u7528\\u5230\\u7684\\u7C7B\\u578B\\u5B9A\\u4E49\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"type Filter = {\\n    value: any;\\n    text: React.ReactNode;\\n    children?: Filter[];\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Column.onCell / onHeaderCell \\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E0E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onRow\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onHeaderRow\\u7C7B\\u4F3C\"), \"\\uFF0C\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"column.onCell\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"column.onHeaderCell\"), \" \\u4E2D\\u4E5F\\u80FD\\u8FD4\\u56DE td/th \\u652F\\u6301\\u7684\\u5C5E\\u6027\\u6216\\u4E8B\\u4EF6\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"rowSelection\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6240\\u5904\\u5217\\u6837\\u5F0F\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"clickRow\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u542F\\u7528\\u70B9\\u51FB\\u884C\\u9009\\u62E9\\u529F\\u80FD\\u3002\\u5F00\\u542F\\u540E\\uFF0C\\u70B9\\u51FB\\u884C\\u4EFB\\u610F\\u4F4D\\u7F6E\\uFF08\\u5305\\u62EC\\u56FA\\u5B9A\\u5217\\uFF09\\u90FD\\u4F1A\\u89E6\\u53D1\\u884C\\u9009\\u62E9/\\u53D6\\u6D88\\u9009\\u62E9\\u3002\\u88AB\\u7981\\u7528\\u7684\\u884C\\uFF08\\u901A\\u8FC7 getCheckboxProps \\u8BBE\\u7F6E\\uFF09\\u65E0\\u6CD5\\u901A\\u8FC7\\u70B9\\u51FB\\u9009\\u4E2D\\u3002\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.94.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u5934\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Checkbox\"), \" \\u662F\\u5426\\u7981\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fixed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u628A\\u9009\\u62E9\\u6846\\u5217\\u56FA\\u5B9A\\u5728\\u5DE6\\u8FB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getCheckboxProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u62E9\\u6846\\u7684\\u9ED8\\u8BA4\\u5C5E\\u6027\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(record: RecordType) => object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hidden\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u9690\\u85CF\\u9009\\u62E9\\u5217\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderCell\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u52FE\\u9009\\u6846\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"({ selected: boolean, record: RecordType, originNode: JSX.Element, inHeader: boolean, disabled: boolean, indeterminate: boolean, index?: number, selectRow?: (selected: boolean, e: Event) => void, selectAll?: (selected: boolean, e: Event) => void }) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.52.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"selectedRowKeys\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u9009\\u4E2D\\u9879\\u7684 key \\u6570\\u7EC4\\uFF0C\\u9700\\u8981\\u548C onChange \\u8FDB\\u884C\\u914D\\u5408\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shouldCellUpdate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u63A7\\u5236\\u5355\\u5143\\u683C\\u662F\\u5426\\u6E32\\u67D3\\u3002\\u9ED8\\u8BA4 cell \\u4F1A\\u6DF1\\u5BF9\\u6BD4 props \\u548C nextProps \\u662F\\u5426\\u53D8\\u5316\\uFF0C\\u6765\\u51B3\\u5B9A\\u662F\\u5426\\u6E32\\u67D3\\u5355\\u5143\\u683C\\u3002\\u5982\\u679C\\u4F60\\u7684 props \\u4E2D\\u7684 record \\u6BD4\\u8F83\\u590D\\u6742\\uFF0C\\u5EFA\\u8BAE\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"shouldCellUpdate\"), \" \\u63A5\\u7BA1\\u5355\\u5143\\u683C\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props: TableCellProps, prevProps: TableCellProps) => boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"2.71.0\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"width\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5217\\u8868\\u9009\\u62E9\\u6846\\u5BBD\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u4E2D\\u9879\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\u7684\\u56DE\\u8C03\\u3002\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u4F1A\\u4FDD\\u5B58\\u4E0A\\u6B21\\u9009\\u4E2D\\u7684 row keys\\uFF0C\\u5373\\u4F7F\\u4F60\\u505A\\u4E86\\u5206\\u9875\\u53D7\\u63A7\\u6216\\u66F4\\u65B0\\u4E86 dataSource \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#faq\"\n  }, \"FAQ\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(selectedRowKeys: number[]\", \"|\", \"string[], selectedRows: RecordType[]) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onHeaderCell\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u5934\\u90E8\\u5355\\u5143\\u683C\\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(column: RecordType, columnIndex: number) => object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSelect\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7528\\u6237\\u624B\\u52A8\\u70B9\\u51FB\\u67D0\\u884C\\u9009\\u62E9\\u6846\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(record: RecordType, selected: boolean, selectedRows: RecordType[], nativeEvent: MouseEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSelectAll\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7528\\u6237\\u624B\\u52A8\\u70B9\\u51FB\\u8868\\u5934\\u9009\\u62E9\\u6846\\u7684\\u56DE\\u8C03\\uFF0C\\u4F1A\\u9009\\u4E2D/\\u53D6\\u6D88\\u9009\\u4E2D dataSource \\u91CC\\u7684\\u6240\\u6709\\u53EF\\u9009\\u884C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(selected: boolean, selectedRows: RecordType[], changedRows: RecordType[]) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"scroll\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"scrollToFirstRowOnChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u5206\\u9875\\u3001\\u6392\\u5E8F\\u3001\\u7B5B\\u9009\\u53D8\\u5316\\u540E\\u662F\\u5426\\u81EA\\u52A8\\u6EDA\\u52A8\\u5230\\u8868\\u683C\\u9876\\u90E8\\u3002\\u5F53\\u8BBE\\u7F6E\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"scroll.y\"), \" \\u65F6\\uFF0C\\u4F1A\\u91CD\\u7F6E\\u8868\\u683C\\u5185\\u90E8\\u6EDA\\u52A8\\u4F4D\\u7F6E\\u5230\\u9876\\u90E8\\uFF1B\\u5F53\\u672A\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"scroll.y\"), \" \\u65F6\\uFF0C\\u4F1A\\u6EDA\\u52A8\\u9875\\u9762\\u5230\\u8868\\u683C\\u5934\\u90E8\\u4F4D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"x\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u6A2A\\u5411\\u6EDA\\u52A8\\u533A\\u57DF\\u7684\\u5BBD\\uFF0C\\u53EF\\u4EE5\\u4E3A\\u50CF\\u7D20\\u503C\\u3001\\u767E\\u5206\\u6BD4\\u6216 'max-content'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"y\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u7EB5\\u5411\\u6EDA\\u52A8\\u533A\\u57DF\\u7684\\u9AD8\\uFF0C\\u53EF\\u4EE5\\u4E3A\\u50CF\\u7D20\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"pagination\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7FFB\\u9875\\u7EC4\\u4EF6\\u914D\\u7F6E\\u3002\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pagination\"), \" \\u5EFA\\u8BAE\\u4E0D\\u8981\\u4F7F\\u7528\\u5B57\\u9762\\u91CF\\u5199\\u6CD5\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6CE8\\u610F\\uFF1Apagination.onChange \\u8BBE\\u7F6E\\u540E\\uFF0CTable onChange \\u4E0D\\u518D\\u54CD\\u5E94\\u5206\\u9875\\u5668\\u53D8\\u5316\\u3002\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"currentPage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u524D\\u9875\\u7801\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultCurrentPage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u7684\\u5F53\\u524D\\u9875\\u7801\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formatPageText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7FFB\\u9875\\u533A\\u57DF\\u6587\\u6848\\u81EA\\u5B9A\\u4E49\\u683C\\u5F0F\\u5316\\uFF0C\\u4F20 false \\u5173\\u95ED\\u6587\\u6848\\u663E\\u793A\\uFF1B\\u8BE5\\u9879\\u5F71\\u54CD\\u8868\\u683C\\u7FFB\\u9875\\u533A\\u57DF\\u5DE6\\u4FA7\\u6587\\u6848\\u663E\\u793A\\uFF0C\\u4E0D\\u540C\\u4E8E \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Pagination\"), \" \\u7EC4\\u4EF6\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"showTotal\"), \" \\u53C2\\u6570\\uFF0C\\u8BF7\\u6CE8\\u610F\\u7504\\u522B\\u3002\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean \", \"|\", \" ({ currentStart: number, currentEnd: number, total: number }) => string\", \"|\", \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"pageSize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6BCF\\u9875\\u6761\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"10\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4F4D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'bottom'\", \"|\", \"'top'\", \"|\", \"'both'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'bottom'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"total\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6570\\u636E\\u603B\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"preventPageChangeOnPageSizeChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5207\\u6362 pageSize \\u65F6\\u662F\\u5426\\u963B\\u6B62\\u81EA\\u52A8\\u8C03\\u6574 currentPage\\u3002\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5207\\u6362 pageSize \\u65F6\\u7EC4\\u4EF6\\u4F1A\\u81EA\\u52A8\\u8BA1\\u7B97\\u65B0\\u7684 currentPage \\u4EE5\\u4FDD\\u6301\\u5F53\\u524D\\u6570\\u636E\\u4F4D\\u7F6E\\uFF0C\\u8BBE\\u4E3A true \\u540E\\u7531\\u7528\\u6237\\u81EA\\u884C\\u63A7\\u5236\\u9875\\u7801\\u53D8\\u5316\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5176\\u4ED6\\u914D\\u7F6E\\u8BE6\\u89C1\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/navigation/pagination#API%E5%8F%82%E8%80%83\"\n  }, \"Pagination\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Resizable\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"resizable\"), \" \\u5BF9\\u8C61\\u578B\\u7684\\u53C2\\u6570\\uFF0C\\u4E3B\\u8981\\u5305\\u62EC\\u4E00\\u4E9B\\u8868\\u683C\\u5217\\u4F38\\u7F29\\u65F6\\u7684\\u4E8B\\u4EF6\\u65B9\\u6CD5\\u3002\\u8FD9\\u4E9B\\u4E8B\\u4EF6\\u65B9\\u6CD5\\u90FD\\u53EF\\u4EE5\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5BF9\\u8C61\\uFF0C\\u8BE5\\u5BF9\\u8C61\\u4F1A\\u548C\\u6700\\u7EC8\\u7684 column \\u5408\\u5E76\\u3002\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onResize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u683C\\u5217\\u6539\\u53D8\\u5BBD\\u5EA6\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(column: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Column\"\n  }, \"Column\"), \") => \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Column\"\n  }, \"Column\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onResizeStart\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u683C\\u5217\\u5F00\\u59CB\\u6539\\u53D8\\u5BBD\\u5EA6\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(column: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Column\"\n  }, \"Column\"), \") => \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Column\"\n  }, \"Column\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onResizeStop\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u683C\\u5217\\u505C\\u6B62\\u6539\\u53D8\\u5BBD\\u5EA6\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(column: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Column\"\n  }, \"Column\"), \") => \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Column\"\n  }, \"Column\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u65B9\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 ref \\u53EF\\u4EE5\\u8BBF\\u95EE\\u5230 Table \\u63D0\\u4F9B\\u7684\\u4E00\\u4E9B\\u5185\\u90E8\\u65B9\\u6CD5\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React, { useRef, useEffect } from 'react';\\nimport { Table } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const ref = useRef();\\n\\n    useEffect(() => {\\n        ref.getCurrentPageData(); // => { dataSource: [/*...*/], groups: /*...*/ }\\n    }, []);\\n\\n    return (\\n        <Table\\n            columns={\\n                [\\n                    /*...*/\\n                ]\\n            }\\n            dataSource={\\n                [\\n                    /*...*/\\n                ]\\n            }\\n            ref={ref}\\n        />\\n    );\\n}\\n\")), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u540D\\u79F0\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63CF\\u8FF0\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getCurrentPageData()\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8FD4\\u56DE\\u5F53\\u524D\\u9875\\u7684\\u6570\\u636E\\u5BF9\\u8C61\\uFF1A{ dataSource: RecordType[], groups: Map<{groupKey: string, recordKeys: Set<string\", \">\", \"}> }\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u683C\\u7684 role \\u4E3A grid\\uFF0C\\u6811\\u5F62\\u8868\\u683C\\u7684 role \\u4E3A treegrid\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u884C\\u7684 role \\u4E3A row\\uFF0C\\u5355\\u5143\\u683C\\u7684 role \\u4E3A gridcell\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u683C\\u65B0\\u589E\\u4E86 aria-rowcount \\u548C aria-colcount \\u5C5E\\u6027\\u8868\\u793A\\u884C\\u548C\\u5217\\u7684\\u6570\\u91CF\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u884C\\u65B0\\u589E\\u4E86 aria-rowindex \\u8868\\u793A\\u5F53\\u524D\\u5C5E\\u4E8E\\u7B2C\\u51E0\\u884C\\uFF0C\\u7B2C\\u4E00\\u884C\\u4E3A 1\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6811\\u5F62\\u8868\\u683C\\u7684\\u884C\\u5177\\u6709 aria-level \\u8868\\u793A\\u5F53\\u524D\\u884C\\u7684\\u6811\\u5F62\\u5C42\\u7EA7\\uFF0C\\u7B2C\\u4E00\\u5C42\\u4E3A 1\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53EF\\u5C55\\u5F00\\u8868\\u683C\\u884C\\u5177\\u6709 aria-expanded \\u5C5E\\u6027\\uFF0C\\u8868\\u793A\\u5F53\\u524D\\u884C\\u662F\\u5426\\u5C55\\u5F00\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5355\\u5143\\u683C\\u7684\\u65B0\\u589E\\u4E86 aria-colindex \\u8868\\u793A\\u5F53\\u524D\\u683C\\u5B50\\u5C5E\\u4E8E\\u7B2C\\u51E0\\u5217\\uFF0C\\u7B2C\\u4E00\\u5217\\u4E3A 1\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5217\\u7684\\u7B5B\\u9009\\u548C\\u6392\\u5E8F\\u6309\\u94AE\\u6DFB\\u52A0\\u4E86 aria-label\\uFF0C\\u884C\\u7684\\u9009\\u62E9\\u6309\\u94AE\\u6DFB\\u52A0\\u4E86 aria-label \\u5C5E\\u6027\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"RTL/LTR\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Table \\u7684 RTL \\u9ED8\\u8BA4\\u503C\\u4E3A \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/other/configprovider\"\n  }, \"ConfigProvider\"), \" direction\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 Table direction \\u8986\\u76D6\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Table \\u5217\\u7684 align \\u4E0E fixed \\u5C5E\\u6027\\u4F1A\\u5728 RTL \\u65F6\\u4F1A\\u81EA\\u52A8\\u5207\\u6362\\uFF0Cleft <-> right\\uFF0C\\u56FA\\u5B9A\\u5217\\u7684 RTL \\u529F\\u80FD\\u4E8E v2.31 \\u7248\\u672C\\u652F\\u6301\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Table \\u7684\\u6811\\u5F62\\u6570\\u636E\\u6682\\u4E0D\\u652F\\u6301 RTL\\uFF08\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://codesandbox.io/s/table-rtl-treedata-uy7gzl?file=/src/App.jsx\"\n  }, \"Chrome\\u3001Safari \\u6D4F\\u89C8\\u5668\\u8868\\u73B0\\u4E0E Firefox \\u8868\\u73B0\\u4E0D\\u540C\"), \"\\uFF09\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u683C\\u6807\\u9898\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u683C\\u6807\\u9898\\u5E94\\u6E05\\u6670\\u7684\\u8BA9\\u7528\\u6237\\u611F\\u77E5\\u5230\\u8868\\u683C\\u7684\\u76EE\\u7684\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E3A\\u590D\\u6742\\u8868\\u683C\\u6DFB\\u52A0\\u63CF\\u8FF0\\uFF0C\\u4E3A\\u7528\\u6237\\u63D0\\u4F9B\\u66F4\\u591A\\u5173\\u4E8E\\u8868\\u683C\\u7684\\u4E0A\\u4E0B\\u6587\\u4FE1\\u606F\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F7F\\u7528\\u53E5\\u5B50\\u5927\\u5C0F\\u5199\\uFF1B\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5217\\u6807\\u9898\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4FDD\\u6301\\u5217\\u6807\\u9898\\u7B80\\u6D01\\uFF0C\\u5EFA\\u8BAE\\u4F7F\\u7528 1-2 \\u4E2A\\u8BCD\\u4F5C\\u4E3A\\u5217\\u6807\\u9898\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53\\u5217\\u6807\\u9898\\u8F83\\u957F\\u65F6\\uFF0C\\u5EFA\\u8BAE 2 \\u884C\\u663E\\u793A\\uFF0C\\u5269\\u4F59\\u6587\\u5B57\\u7F29\\u7565\\u5E76\\u5728 Tooltip \\u4E2D\\u663E\\u793A\\u5B8C\\u5168\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u91C7\\u7528 Sentence case \\u7684\\u5927\\u5C0F\\u5199\\u89C4\\u5219\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5217\\u6807\\u9898\\u4F7F\\u7528\\u53E5\\u5B50\\u5927\\u5C0F\\u5199\\uFF1B\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u683C\\u64CD\\u4F5C\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53EF\\u4EE5\\u9075\\u5FAA \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/input/button#%E6%96%87%E6%A1%88%E8%A7%84%E8%8C%83\"\n  }, \"Button \\u7684\\u6587\\u6848\\u89C4\\u8303\")))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u70B9\\u51FB\\u7B2C\\u4E8C\\u9875\\u7684\\u884C\\u9009\\u62E9\\u6309\\u94AE\\uFF0C\\u4F1A\\u8DF3\\u8F6C\\u5230\\u7B2C\\u4E00\\u9875\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"  Table \\u7684 dataSource \\u66F4\\u65B0\\u540E\\uFF0C\\u4F1A\\u5C06\\u9875\\u7801\\u91CD\\u7F6E\\u5230\\u521D\\u59CB\\u6001\\u3002\\u8BF7\\u68C0\\u67E5\\u6570\\u636E\\u6E90\\u662F\\u5426\\u5728\\u7EC4\\u4EF6\\u6E32\\u67D3\\u65F6\\u53D1\\u751F\\u4E86\\u53D8\\u5316\\u3002\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"function App() {\\n    const [dataSource, setDataSource] = useState([]);\\n\\n    useEffect(() => {\\n        // \\u2705 \\u6B63\\u786E\\n        const getData = () => {\\n            // fetch data\\n            const newData = fetch(/**/);\\n            // set data\\n            setDataSource(dataSource);\\n        };\\n\\n        getData();\\n    }, []);\\n\\n    // \\u274C \\u9519\\u8BEF\\n    const data = [];\\n\\n    return <Table dataSource={data} columns={[/*...*/]} />;\\n}\\n\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u7B5B\\u9009\\u540E\\u7684\\u6570\\u636E\\u6761\\u6570\\u4E0D\\u5BF9\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u8BF7\\u68C0\\u67E5\\u4F60\\u7684\\u7B5B\\u9009\\u5217\\u548C\\u6570\\u636E\\u6E90\\u662F\\u5426\\u914D\\u7F6E\\u6B63\\u786E\\u3002\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u7B5B\\u9009\\u5217\\u9700\\u8BBE\\u7F6E\\u72EC\\u7ACB\\u7684 dataIndex\\uFF0C\\u540C\\u65F6 dataSource \\u9700\\u8981\\u8BBE\\u7F6E\\u72EC\\u7ACB\\u7684 key\\uFF0C\\u8BF7\\u53C2\\u8003 dataSource API\\u3002\\u5426\\u5219\\u7B5B\\u9009\\u529F\\u80FD\\u65E0\\u6CD5\\u6B63\\u5E38\\u5DE5\\u4F5C\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u8868\\u683C\\u6570\\u636E\\u4E3A\\u4F55\\u6CA1\\u6709\\u66F4\\u65B0\\uFF1F\"), \"  \"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \" Table \\u7EC4\\u4EF6\\u76EE\\u524D\\u6240\\u6709\\u53C2\\u6570\\u90FD\\u4E3A\\u6D45\\u5C42\\u5BF9\\u6BD4\\uFF0C\\u4E5F\\u5C31\\u662F\\u8BF4\\u5982\\u679C\\u8BE5\\u53C2\\u6570\\u503C\\u7C7B\\u578B\\u4E3A\\u4E00\\u4E2A Array \\u6216\\u8005 Object\\uFF0C\\u4F60\\u9700\\u8981\\u624B\\u52A8\\u6539\\u53D8\\u5176\\u5F15\\u7528\\u624D\\u80FD\\u89E6\\u53D1\\u66F4\\u65B0\\u3002\\u540C\\u7406\\uFF0C\\u5982\\u679C\\u4F60\\u4E0D\\u60F3\\u89E6\\u53D1\\u989D\\u5916\\u66F4\\u65B0\\uFF0C\\u5C3D\\u91CF\\u4E0D\\u8981\\u76F4\\u63A5\\u5728\\u4F20\\u53C2\\u7684\\u65F6\\u5019\\u4F7F\\u7528\\u5B57\\u9762\\u91CF\\u6216\\u662F\\u5728 render \\u8FC7\\u7A0B\\u4E2D\\u5B9A\\u4E49\\u5F15\\u7528\\u578B\\u53C2\\u6570\\u503C\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"// ...render() {\\n    <Table dataSource={[/*...*/]} columns={[/*...*/]} />}\\n\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u4E0A\\u8FF0\\u7684\\u5199\\u6CD5\\u5728\\u6BCF\\u6B21 render \\u65F6\\u90FD\\u4F1A\\u89E6\\u53D1\\u8868\\u683C\\u5185\\u90E8\\u5BF9\\u6570\\u636E\\u7684\\u66F4\\u65B0\\uFF08\\u4F1A\\u6E05\\u7A7A\\u5F53\\u524D\\u7684\\u9009\\u4E2D\\u884C\\u4EE5\\u53CA\\u5C55\\u5F00\\u884C key \\u6570\\u7EC4\\u7B49\\uFF09\\u3002\\u4E3A\\u4E86\\u6027\\u80FD\\u53CA\\u907F\\u514D\\u4E00\\u4E9B\\u5F02\\u5E38\\uFF0C\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u8BF7\\u5C3D\\u91CF\\u5C06\\u4E00\\u4E9B\\u5F15\\u7528\\u578B\\u53C2\\u6570\\u5B9A\\u4E49\\u5728 render \\u65B9\\u6CD5\\u4E4B\\u5916\\uFF08\\u5982\\u679C\\u4F7F\\u7528\\u4E86 hooks \\u8BF7\\u5229\\u7528 useMemo \\u6216\\u8005 useState \\u8FDB\\u884C\\u5B58\\u50A8\\uFF09\\u3002\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E3A\\u4F55\\u6211\\u7684\\u8868\\u683C\\u884C\\u4E0D\\u80FD\\u9009\\u4E2D\\u4EE5\\u53CA\\u5C55\\u5F00\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u8BF7\\u6307\\u5B9A rowKey \\u6216\\u8005\\u7ED9 dataSource \\u7684\\u6BCF\\u9879\\u8BBE\\u7F6E\\u4E00\\u4E2A\\u5404\\u4E0D\\u76F8\\u540C\\u7684 \\\"key\\\" \\u5C5E\\u6027\\u3002\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u8868\\u683C\\u5185\\u6240\\u6709\\u884C\\u76F8\\u5173\\u7684\\u64CD\\u4F5C\\u90FD\\u9700\\u8981\\u4F7F\\u7528\\u5230\\u3002\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5982\\u4F55\\u5B9E\\u73B0\\u70B9\\u51FB\\u6392\\u5E8F\\u6309\\u94AE\\u65F6\\u81EA\\u5B9A\\u4E49\\u6392\\u5E8F\\u6216\\u4F20\\u53C2\\u7ED9\\u670D\\u52A1\\u7AEF\\u6392\\u5E8F\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"onChange \\u65B9\\u6CD5\\u7684\\u5165\\u53C2\\u5305\\u62EC pagination\\u3001filters\\u3001sorter\\uFF0C\\u7528\\u6237\\u53EF\\u4EE5\\u6839\\u636E sorter \\u5BF9 dataSource \\u8FDB\\u884C\\u81EA\\u5B9A\\u4E49\\u6392\\u5E8F\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5982\\u4F55\\u7ED9\\u67D0\\u4E00\\u884C\\u6DFB\\u52A0 className\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u4F7F\\u7528 onRow \\u6216 onHeaderRow\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5982\\u4F55\\u7ED9 table cell \\u8BBE\\u7F6E\\u6837\\u5F0F\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u6D89\\u53CA\\u5230\\u5355\\u4E2A cell \\u9700\\u8981\\u63A7\\u5236\\u6837\\u5F0F\\u7684\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 column.onHeaderCell\\u3001column.onCell \\u63A7\\u5236\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E3A\\u4F55 rowSelection onChange \\u7684\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u7F13\\u5B58\\u4E86\\u4E4B\\u524D\\u9009\\u4E2D\\u7684 keys\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u8FD9\\u4E48\\u505A\\u4E3A\\u4E86\\u5728\\u5206\\u9875\\u53D7\\u63A7\\u65F6\\uFF0C\\u5728\\u7B2C\\u4E00\\u9875\\u9009\\u4E2D\\u6570\\u636E\\u540E\\uFF0C\\u53BB\\u7B2C\\u4E8C\\u9875\\u9009\\u62E9\\u6570\\u636E\\uFF0C\\u56DE\\u5230\\u7B2C\\u4E00\\u9875\\u540E\\u9009\\u62E9\\u7684 row keys \\u4E22\\u5931\\u7684\\u573A\\u666F\\u3002\\u5982\\u679C\\u4E0D\\u60F3\\u7528\\u7F13\\u5B58\\u7684 keys\\uFF0C\\u53EF\\u4EE5\\u4ECE\\u5F53\\u524D dataSource \\u8FC7\\u6EE4\\u4E00\\u904D\\uFF0C\\u6216\\u8005\\u4F7F\\u7528 rowSelection onChange \\u7684\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u652F\\u6301\\u5355\\u884C\\u9009\\u62E9\\u5417\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Table \\u6682\\u4E0D\\u652F\\u6301\\u5355\\u884C\\u9009\\u5219\\u529F\\u80FD\\uFF0C\\u7528\\u6237\\u53EF\\u4EE5\\u901A\\u8FC7\\u81EA\\u5B9A\\u4E49\\u65B9\\u5F0F\\u5B9E\\u73B0\\u5355\\u9009\\u3002\\u5B9E\\u73B0\\u65B9\\u5F0F\\u79FB\\u6B65 Table FAQ \\u6587\\u6863\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Table \\u662F\\u5982\\u4F55\\u5B9E\\u73B0\\u7684\\uFF0C\\u6211\\u60F3\\u4E86\\u89E3\\u66F4\\u591A\\u7EC6\\u8282\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u67E5\\u770B \", mdx(\"a\", {\n    href: \"https://bytedance.feishu.cn/docs/doccnqLgNefWGMZHFz7j70GKqpY\",\n    target: \"_blank\"\n  }, \"Semi Table \\u7EC4\\u4EF6\\u8BBE\\u8BA1\\u65B9\\u6848\"), \"\\u4E86\\u89E3\\u66F4\\u591A\\u3002\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u67E5\\u770B\\u66F4\\u591A Table FAQ \\u548C\\u7528\\u4F8B\\uFF0C\\u70B9\\u51FB \", mdx(\"a\", {\n    href: \"https://bytedance.feishu.cn/docs/doccnsYk1qUmsIDP1ihJ9zjG0Ch\",\n    target: \"_blank\"\n  }, \"Table FAQ\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/table","next":{"fields":{"slug":"en-US/show/tag"},"id":"ee15d4b0-de0e-5b32-94df-934a2801518d","frontmatter":{"title":"Tag","localeCode":"en-US","icon":"doc-tag","showNew":null}},"previous":{"fields":{"slug":"en-US/show/table"},"id":"f5678b56-222a-500f-a3a3-b449caa5a1ad","frontmatter":{"title":"Table","localeCode":"en-US","icon":"doc-table","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}