-
-
Notifications
You must be signed in to change notification settings - Fork 115
/
6659.32d92089.chunk.js.map
1 lines (1 loc) · 33.9 KB
/
6659.32d92089.chunk.js.map
1
{"version":3,"file":"static/js/6659.32d92089.chunk.js","mappings":"gHAAA","sources":["../../packages/react-table/README.md"],"sourcesContent":["export default \"Table 表格\\n===\\n\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-table/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-table)\\n[](https://npmjs.com/@uiw/react-table)\\n\\n表示两种相互对立的状态间的切换，多用于触发「开/关」。选中时的内容支持响应式。\\n\\n```jsx\\nimport { Table } from 'uiw';\\n// or\\nimport Table from '@uiw/react-table';\\n```\\n\\n### 基本使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n {\\n // title: '姓名',\\n ellipsis: true, \\n title: ({ key }) => {\\n return (\\n <span>字段: {key}</span>\\n )\\n },\\n key: 'name', \\n }, {\\n title: '年龄',\\n style: { color: 'red' },\\n key: 'age',\\n }, {\\n title: '地址',\\n key: 'info',\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n <div>\\n <Table columns={columns} data={dataSource} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n### 表头分组\\n\\n表头分组通过 `columns` 数组中对象的 `children` 来实现，以渲染分组表头。。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n {\\n title: '姓名',\\n style: { color: 'red' },\\n key: 'name', \\n children: [\\n {\\n title: '中文名字',\\n key: 'cnname',\\n children:[\\n {\\n title: '姓名',\\n style: { color: 'red' },\\n key: 'firstname',\\n children:[\\n { title: '姓', key: 'name1', width: 80 },\\n { title: '名', key: 'name2', width: 80 },\\n ]\\n }, {\\n title: '拼音',\\n key: 'lastname',\\n children:[\\n { title: '姓', key: 'pinyin1', width: 80 },\\n { title: '名', key: 'pinyin2', width: 80 },\\n ],\\n },\\n ],\\n }, {\\n title: '英文名字',\\n width: 100,\\n key: 'name_en',\\n },\\n ]\\n }, {\\n title: '其它',\\n children:[\\n { title: '生日', key: 'birthday', width: 150 },\\n { title: '职业', key: 'job', width: 150 },\\n ],\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 150,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <span>{text} {key} - {rowNumber} - {columnNumber}</span>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name1: '邓', name2:'紫棋', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991年8月16日', job: '唱作歌手、作曲人', edit:'' },\\n { name1: '周', name2:'杰伦', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979年1月18日', job: '歌手、音乐人', edit:'' },\\n { name1: '邓', name2:'紫棋', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991年8月16日', job: '唱作歌手、作曲人', edit:'' },\\n { name1: '周', name2:'杰伦', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979年1月18日', job: '歌手、音乐人', edit:'' },\\n];\\nconst Demo = () => (\\n <div>\\n <Table bordered columns={columns} data={dataSource} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 表格行/列合并\\n\\n表头只支持列合并，使用 `columns` 里的 `colSpan` 进行设置。表格支持行/列合并，使用 `render` 里的单元格属性 `colSpan` 或者 `rowSpan` 设值为 0 时，设置的表格不会渲染。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> \\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n {\\n title: '姓名',\\n key: 'name', \\n }, {\\n title: '年龄',\\n style: { color: 'red' },\\n key: 'age',\\n colSpan: 2,\\n render: (text, key, rowData, rowNum, colNum) => {\\n const obj = {\\n children: text,\\n props: {}\\n }\\n if (rowNum === 0) {\\n obj.props.rowSpan = 2;\\n }\\n if (rowNum === 1) {\\n obj.props.rowSpan = 0;\\n }\\n return obj;\\n }\\n }, {\\n title: '地址',\\n key: 'info',\\n colSpan: 0,\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n { name: '李易峰', age: '12', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n];\\nconst Demo = () => (\\n <div>\\n <Table bordered columns={columns} data={dataSource} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 标题页脚\\n\\n添加表格边框线，页头和页脚的展现效果。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n {\\n title: '姓名',\\n style: { color: 'red' },\\n key: 'name', \\n }, {\\n title: '年龄',\\n key: 'age',\\n }, {\\n title: '地址',\\n key: 'info',\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n <div>\\n <Table\\n title={(\\n <div>\\n 这里是标题，有边框，<b>bordered=true</b>\\n </div>\\n )}\\n footer={(\\n <div>\\n 这里是页脚 Footer，有边框，<b>bordered=true</b>\\n </div>\\n )}\\n bordered columns={columns} data={dataSource} />\\n <Table title=\\\"这里是标题，没有边框\\\" footer=\\\"这里是页脚 Footer，没有边框\\\" columns={columns} data={dataSource} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 点击单元格\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Notify } from 'uiw';\\n\\nconst columns = [\\n {\\n title: '姓名',\\n style: { color: 'red' },\\n key: 'name', \\n }, {\\n title: '年龄',\\n key: 'age',\\n }, {\\n title: '地址',\\n key: 'info',\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n <div>\\n <Table\\n title=\\\"表内容 tbody 单元格点击回调事件\\\"\\n onCell={(rowData, { rowNum, colNum }) => {\\n console.log('-->3', rowData);\\n console.log('-->4', rowNum);\\n console.log('-->5', colNum);\\n Notify.info({ description: `你点击了\\\"${rowData.name}\\\"。` });\\n }}\\n columns={columns}\\n data={dataSource}\\n />\\n <Table\\n title=\\\"表头单元格点击回调事件\\\"\\n onCellHead={(rowData, rowNum, columnNumber) => {\\n console.log('-->3', rowData);\\n console.log('-->4', rowNum);\\n console.log('-->5', columnNumber);\\n Notify.info({ description: `你点击了\\\"${rowData.title}\\\"。` });\\n }}\\n onCell={(rowData, { rowNum, colNum }) => {\\n console.log('-->3', rowData);\\n console.log('-->4', rowNum);\\n console.log('-->5', colNum);\\n Notify.info({ description: `你点击了\\\"${rowData.name}\\\"。` });\\n }}\\n columns={columns}\\n data={dataSource}\\n />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 原始HTML\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst Demo = () => (\\n <div>\\n <Table bordered>\\n <thead>\\n <tr>\\n <th>名称</th>\\n <th>数量</th>\\n <th>详情</th>\\n <th>价格</th>\\n </tr>\\n </thead>\\n <tbody>\\n <tr>\\n <td>土豆</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n <tr>\\n <td>萝卜</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n <tr>\\n <td>香蕉</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n <tr>\\n <td>芝麻</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n </tbody>\\n </Table>\\n <Table>\\n <caption>没有边框</caption>\\n <thead>\\n <tr>\\n <th>名称</th>\\n <th>数量</th>\\n <th>详情</th>\\n <th>价格</th>\\n </tr>\\n </thead>\\n <tbody>\\n <tr>\\n <td>土豆</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n <tr>\\n <td>萝卜</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n <tr>\\n <td>香蕉</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n <tr>\\n <td>芝麻</td>\\n <td>18</td>\\n <td>2009/01/12</td>\\n <td>￥86,000</td>\\n </tr>\\n </tbody>\\n </Table>\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 选择和操作\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Checkbox, Pagination, Loader } from 'uiw';\\n\\nclass Demo extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {\\n // 选中的 key\\n checked: [],\\n loading: false,\\n dataSource: [\\n { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。' },\\n { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人' },\\n { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手' },\\n { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。' },\\n { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。' },\\n { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班' },\\n { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。' },\\n ],\\n columns: [\\n {\\n title: (data, rowNum, colNum) => {\\n const indeterminate = this.state.dataSource.length !== this.state.checked.length && this.state.checked.length > 0;\\n const checked = this.state.dataSource.length === this.state.checked.length;\\n return (\\n <Checkbox\\n checked={checked}\\n indeterminate={indeterminate}\\n onClick={(evn) => {\\n let checked = this.state.dataSource.map((item, idx) => idx);\\n if(!evn.target.checked) {\\n checked = [];\\n }\\n this.setState({ checked });\\n }}\\n />\\n );\\n },\\n key: 'checked',\\n render: (text, key, rowData, rowNumber, columnNumber) => {\\n return (\\n <Checkbox checked={rowData.checked} onClick={this.onClickCheckedItem.bind(this, rowNumber)} />\\n );\\n }\\n }, {\\n title: '名字',\\n key: 'name',\\n }, {\\n title: '年龄',\\n key: 'age',\\n }, {\\n title: '地址',\\n key: 'info',\\n },\\n ]\\n }\\n }\\n onClickCheckedItem(rowNumber, env) {\\n let { checked } = this.state;\\n const isChecked = env.target.checked;\\n if(isChecked) {\\n // 添加到选中数组中\\n checked.push(rowNumber)\\n checked = checked.sort((a, b) => a - b);\\n } else {\\n // 删除选中项\\n checked.splice(checked.indexOf(rowNumber), 1);\\n }\\n this.setState({ checked });\\n }\\n render() {\\n const { checked } = this.state;\\n const dataSource = this.state.dataSource.map((item, idx) => {\\n const isChecked = checked.indexOf(idx) > -1;\\n return { checked: isChecked, ...item };\\n });\\n return (\\n <div>\\n <Loader loading={this.state.loading} style={{ display: 'block' }}>\\n <Table\\n columns={this.state.columns}\\n data={dataSource}\\n footer={\\n <Pagination\\n current={2}\\n pageSize={10}\\n total={30}\\n divider\\n onChange={(current, total, pageSize) => {\\n this.setState({ loading: true });\\n const timer = setTimeout(() => {\\n // 模拟变更数据\\n const dataSource = this.state.dataSource.map(item => {\\n item.age = Number(item.age) + current;\\n return item;\\n });\\n // 翻页 API 获取数据\\n this.setState({ checked: [], dataSource, loading: false });\\n }, 2000);\\n }}\\n />\\n }\\n />\\n </Loader>\\n </div>\\n );\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 自定义单元格省略提示\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Notify, Tooltip } from 'uiw';\\n\\nconst columns = [\\n {\\n title: 'Name',\\n key: 'name',\\n render: text => <a>{text}</a>,\\n width: 150,\\n },\\n {\\n title: 'Age',\\n key: 'age',\\n width: 80,\\n },\\n {\\n title: 'Address',\\n key: 'address',\\n ellipsis: true,\\n render: address => (\\n <Tooltip placement=\\\"topLeft\\\" content={address}>\\n {address}\\n </Tooltip>\\n ),\\n },\\n {\\n title: 'Long Column Long Column Long Column',\\n key: 'address',\\n ellipsis: true,\\n render: address => (\\n <Tooltip placement=\\\"topLeft\\\" content={address}>\\n {address}\\n </Tooltip>\\n ),\\n },\\n {\\n title: 'Long Column Long Column',\\n key: 'address',\\n ellipsis: true,\\n render: address => (\\n <Tooltip placement=\\\"topLeft\\\" content={address}>\\n {address}\\n </Tooltip>\\n ),\\n },\\n {\\n title: 'Long Column',\\n key: 'address',\\n ellipsis: true,\\n render: address => {\\n return (\\n <Tooltip placement=\\\"topLeft\\\" content={address}>\\n {address}\\n </Tooltip>\\n )\\n },\\n },\\n];\\n\\nconst data = [\\n { name: '邓紫棋', age: '12', address: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。' },\\n { name: '李易峰', age: '32', address: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人' },\\n { name: '范冰冰', age: '23', address: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手' },\\n { name: '杨幂', age: '34', address: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。' },\\n { name: 'Angelababy', age: '54', address: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。' },\\n { name: '唐嫣', age: '12', address: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班' },\\n { name: '吴亦凡', age: '4', address: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。' },\\n];\\n\\nconst Demo = () => (\\n <div>\\n <Table\\n title=\\\"表内容 tbody 单元格点击回调事件\\\"\\n columns={columns}\\n data={data}\\n />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 无数据状态\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Empty } from 'uiw';\\n\\nconst columns = [\\n {\\n ellipsis: true, \\n title: '姓名',\\n key: 'name', \\n }, {\\n title: '年龄',\\n key: 'age',\\n }, {\\n title: '地址',\\n key: 'info',\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [];\\nconst Demo = () => (\\n <div>\\n <Table\\n columns={columns}\\n data={dataSource}\\n empty={<Empty />} \\n />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 可展开\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Icon } from 'uiw';\\n\\nconst columns = [\\n {\\n title: '姓名',\\n ellipsis: true, \\n key: 'name', \\n }, \\n {\\n title: '年龄',\\n style: { color: 'red' },\\n key: 'age',\\n }, \\n {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name: '邓紫棋', age: '10', id: '1'},\\n { name: '李易峰', age: '32', id: '2'},\\n { name: '范冰冰', age: '23', id: '3'},\\n];\\nconst Demo = () => (\\n <div>\\n <Table \\n rowKey=\\\"id\\\"\\n expandable={{\\n expandedRowRender: (record, index, expanded)=>{\\n return <div>{record.name}</div>\\n },\\n // defaultExpandAllRows: true,\\n rowExpandable: (r)=>r.name!=='李易峰',\\n expandIcon: (expanded) => expanded ? <Icon type=\\\"minus-circle-o\\\"/> : <Icon type=\\\"plus-circle-o\\\"/>,\\n defaultExpandedRowKeys: [\\\"1\\\"]\\n }}\\n columns={columns} \\n data={dataSource} \\n />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 树形数据展示\\n\\n表格支持树形数据的展示，当数据中有 children 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 childrenColumnName 进行配置。\\n\\n可以通过设置 indentSize 以控制每一层的缩进宽度\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport React from 'react';\\nimport { Table, Button, Icon } from 'uiw';\\n\\nconst columns = [\\n {\\n title: '姓名',\\n ellipsis: true, \\n key: 'name', \\n }, \\n {\\n title: '年龄',\\n style: { color: 'red' },\\n key: 'age',\\n }, \\n {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { \\n name: '邓紫棋', \\n age: '10', \\n id: '1', \\n children: [\\n {\\n name: '邓紫棋-0-1', \\n age: '10', \\n id: '1-1', \\n children: [\\n { \\n name: '邓紫棋-0-1-1', \\n age: '10', \\n id: '1-1-1',\\n children: [\\n {name: '邓紫棋-0-1-1-1', age: '10', id: '-0-1-1-1'},\\n {name: '邓紫棋-0-1-1-2', age: '10', id: '-0-1-1-2'},\\n {name: '邓紫棋-0-1-1-3', age: '10', id: '-0-1-1-3'},\\n ]\\n },\\n { name: '邓紫棋-0-1-2', age: '10', id: '1-1-2',}\\n ]\\n },\\n {name: '邓紫棋-0-2', age: '10', id: '1-1'},\\n {name: '邓紫棋-0-3', age: '10', id: '1-1'},\\n ]\\n },\\n { name: '李易峰', age: '32', id: '2',},\\n { name: '范冰冰', age: '23', id: '3', \\n children: [\\n {name: '范冰冰0-1', age: '23', id: '3-1'},\\n {name: '范冰冰0-2', age: '23', id: '3-2'},\\n {name: '范冰冰0-3', age: '23', id: '3-3'},\\n ]\\n },\\n];\\nconst Demo = () => {\\n const [expandedRowKeys, setExpandedRowKeys] = React.useState([])\\n return (\\n <div>\\n <Table \\n rowKey=\\\"id\\\"\\n columns={columns}\\n data={dataSource}\\n />\\n </div>\\n )\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 表格列过宽导致 footer 滑动出表格底部\\n\\n使用 scroll 属性给表格设置宽(x)或高(y)即可\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n {\\n // title: '姓名',\\n ellipsis: true, \\n width: 1000,\\n title: ({ key }) => {\\n return (\\n <span>字段: {key}</span>\\n )\\n },\\n key: 'name', \\n }, {\\n title: '年龄',\\n style: { color: 'red' },\\n key: 'age',\\n }, {\\n title: '地址',\\n key: 'info',\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n <div>\\n <Table \\n scroll={{x: 1800, y: 100}}\\n footer={<div style={{height: 20, }}>这个是footer</div>}\\n columns={columns} data={dataSource} \\n />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 固定列 \\n\\n通过使用 fixed 使其列固定\\n> ⚠️ 注意: 若并没有 scroll 滚动条，fixed 属性并不会有直观的效果\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n {\\n title: '姓名',\\n ellipsis: true, \\n // fixed: true,\\n width: 50,\\n key: 'name', \\n }, {\\n // fixed: true,\\n title: '年龄',\\n width: 50,\\n style: { color: 'red' },\\n key: 'age',\\n }, {\\n title: '地址',\\n width: 50,\\n key: 'info',\\n }, {\\n title: '操作',\\n key: 'edit',\\n width: 98,\\n fixed: 'right',\\n render: (text, key, rowData, rowNumber, columnNumber) => (\\n <div>\\n <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n </div>\\n ),\\n },\\n];\\nconst dataSource = [\\n { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n <div>\\n <Table scroll={{x: 1200}} bordered columns={columns} data={dataSource} />\\n </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n### Table\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| columns | 表格列的配置描述，可以内嵌 `children`，以渲染分组表头。| ColumnProps[] | `[]` |\\n| data | 数据数组。| Array[] | `[]` |\\n| title | 表格标题 | ~~Function(text, key, rowData, rowNumber, columnNumber)~~ /<br/> Function(data: IColumns, rowNum: Number, colNum: Number)`@3.0.0+` /<br/> String / ReactNode | - |\\n| footer | 表格尾部 | String/ReactNode | - |\\n| bordered | 是否展示外边框和列边框 | Boolean | - |\\n| empty | 无数据状态 | ReactNode | - |\\n| onCellHead | 表头单元格点击回调 | ~~`Function(text, key, rowData, rowNumber, columnNumber)`~~ /<br/> Function(data: IColumns, colNum: Number, rowNum: Number, evn: React.MouseEvent<HTMLTableCellElement\\\\>) `@3.0.0+` | - |\\n| onCell | 单元格点击回调 | ~~`Function(text, key, rowData, rowNumber, columnNumber)`~~ /<br/> Function(data: IColumns, options:{ colNum: Number, rowNum: Number, keyName: String }, evn: React.MouseEvent<HTMLTableCellElement\\\\>) `@3.1.0+` | - |\\n| expandable | 可展开配置 | ExpandableType | - |\\n| rowKey | 表格行 key 的取值 | String | - |\\n| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高 | { x?: React.CSSProperties['width'], y?: React.CSSProperties['height'] } | - |\\n\\n\\n### ColumnProps\\n\\n列描述数据对象，是 columns 中的一项，\\n\\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\\n|--------- |-------- |--------- |-------- |-------- |\\n| title | 列头显示文字。| ReactNode | - | - |\\n| key | 需要的 key，可以忽略这个属性，如果标题带有 `render` 函数，那么这个 `key` 为必须非常重要。| String | - | - |\\n| width | 列宽度。| Number | - | - |\\n| colSpan | 合并表头行。| Number | - | - |\\n| ellipsis | 超过宽度将自动省略。`v4.8.7+`| Boolean | `false` | - |\\n| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前值的 `key`，行索引数据，当前行号，当前列号。| `Function(text, key, rowData, rowNumber, columnNumber)` | - | - |\\n| align | 设置列的对齐方式 | \\\"left\\\"\\\\|\\\"center\\\"\\\\|\\\"right\\\" | - | - |\\n| className | 列样式类名 | String | - | - |\\n| fixed | 把选择框列固定\\t | Boolean \\\\|\\\"left\\\"\\\\|\\\"right\\\" | - | 4.15.1 |\\n\\n### expandable\\n\\n> ⚠️ 注意: expandedRowKeys 与 onExpandedRowsChange 必须同时出现或不出现\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| expandedRowRender | 自定义展开行| (record, index, expanded) => React.ReactNode | - |\\n| expandIcon | 自定义图标 | (expanded, record, index) => React.ReactNode; | - |\\n| rowExpandable | 是否允许展开| (record)=>Boolean | - |\\n| defaultExpandAllRows | 初始时，是否展开所有行| Boolean | false |\\n| defaultExpandedRowKeys | 初始时，默认展开的行\\trowKey数组 | Array | - |\\n| expandedRowKeys | 控制展开的行\\trowKey数组 | Array | - |\\n| onExpandedRowsChange | 展开的行变化触发 | (expandedRows)=>void | - |\\n| onExpand | 点击展开图标触发 | (expanded,record,index)=>void | - |\\n| indentSize | 控制树形结构每一层的缩进宽度 | Number | 16 |\\n| childrenColumnName | 指定树形结构的列名 | String | children |\\n\";"],"names":[],"sourceRoot":""}