diff --git a/README.md b/README.md index 69649e2..04e2fcd 100644 --- a/README.md +++ b/README.md @@ -8,11 +8,6 @@ [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/tinper-bee/bee-table.svg)](http://isitmaintained.com/project/tinper-bee/bee-table "Average time to resolve an issue") [![Percentage of issues still open](http://isitmaintained.com/badge/open/tinper-bee/bee-table.svg)](http://isitmaintained.com/project/tinper-bee/bee-table "Percentage of issues still open") -## Browser Support - -|![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)| -| --- | --- | --- | --- | --- | -| IE 9+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ | react bee-table component for tinper-bee @@ -58,8 +53,49 @@ class Demo extends Component { ## API +### Table + |参数|说明|类型|默认值| -|:--|:---:|:--:|---:| +|:--|:---|:--|:---| +|data|传入的表格数据|array|[]| +|columns|列的配置表，具体配置见下表|array|-| +|defaultExpandAllRows|默认是否展开所有行|bool|false| +|expandedRowKeys|展开的行，控制属性|array|-| +|defaultExpandedRowKeys|初始扩展行键|array|[]| +|useFixedHeader|是否使用固定表头|bool|false| +|bodyStyle|添加到tablebody上的style|object|{}| +|style|添加到table上的style|object|{}| +|rowKey|如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record）'的返回值将被用作键。| string or Function(record):string|'key'| +|rowClassName|获取行的classname|Function(record, index, indent):string|() => ''| +|expandedRowClassName|获取展开行的className|Function(recode, index, indent):string|() => ''| +|onExpand|展开行时的钩子函数|Function(expanded, record)|() => ''| +|onExpandedRowsChange|函数在扩展行更改时调用|Function(expandedRows)|() => ''| +|indentSize|indentSize为每个级别的data.i.children，更好地使用column.width指定|number|15| +|onRowClick|行的点击事件钩子函数|Function(record, index)|() => ''| +|onRowDoubleClick|行的双击事件钩子函数|Function(record, index)|() => ''| +|expandIconAsCell|是否将expandIcon作为单元格|bool|false| +|expandIconColumnIndex|expandIcon的索引，当expandIconAsCell为false时，将插入哪个列|number|0| +|showHeader|是否显示表头|bool|true| +|title|表格标题|function|-| +|footer|表格尾部|function|-| +|emptyText|无数据时显示的内容|function|() => 'No Data'| +|scroll|横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{{ x: true, y: 300 }}|object|{}| +|rowRef|获取行的ref|Function(record, index, indent):string|() => null| +|getBodyWrapper|添加对table body的包装|Function(body)|body => body| + +### Column + +|参数|说明|类型|默认值| +|:--|:---|:--|:---| +|key|列的键|string|-| +|className|传入列的classname|String |-| +|colSpan|该列的colSpan|Number|-| +|title|列的标题|node|-| +|dataIndex| 显示数据记录的字段|String|-| +|width|宽度的特定比例根据列的宽度计算|String/Number|-| +|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-| +|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-| +|onCellClick|单击列的单元格时调用|Function(row, event)|-| #### 开发调试 diff --git a/demo/demolist/Demo3.js b/demo/demolist/Demo3.js new file mode 100644 index 0000000..ec00e8a --- /dev/null +++ b/demo/demolist/Demo3.js @@ -0,0 +1,53 @@ +/** +* +* @title 更灵活的表格 +* @description 手写表格的头组件来达到更灵活的配置表格 +* +*/ + +const { ColumnGroup, Column } = Table; + +const data3 = [ + { a: '北京', b: '北京', c: '250', d: 2, key: '1' }, +]; + +class Demo3 extends Component { + render () { + return ( + + + + + + + + { + return ( + + ); + }} + /> +
+ ) + } +} diff --git a/demo/index.js b/demo/index.js index 475d746..3d24f57 100644 --- a/demo/index.js +++ b/demo/index.js @@ -221,7 +221,60 @@ class Demo2 extends React.Component { ); } } -var DemoArray = [{"example":,"title":" 简单表格","code":"/**\n*\n* @title 简单表格\n* @description\n*\n*/\n\nconst columns = [\n { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },\n { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },\n { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },\n {\n title: '操作', dataIndex: '', key: 'd', render() {\n return 一些操作;\n },\n },\n];\n\nconst data = [\n { a: '令狐冲', b: '男', c: 41, key: '1' },\n { a: '杨过', b: '男', c: 67, key: '2' },\n { a: '郭靖', b: '男', c: 25, key: '3' },\n];\n\nclass Demo1 extends Component {\n render () {\n return (\n
标题: 这是一个标题
}\n footer={currentData =>
表尾: 我是小尾巴
}\n />\n )\n }\n}\n","desc":""},{"example":,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格\n*\n*/\n\nclass EditableCell extends React.Component {\n state = {\n value: this.props.value,\n editable: false,\n }\n handleChange = (e) => {\n const value = e.target.value;\n this.setState({ value });\n }\n check = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n }\n edit = () => {\n this.setState({ editable: true });\n }\n handleKeydown = (event) => {\n console.log(event.keyCode);\n if(event.keyCode == 13){\n this.check();\n }\n\n }\n render() {\n const { value, editable } = this.state;\n return (
\n {\n editable ?\n
\n \n \n
\n :\n
\n {value || ' '}\n \n
\n }\n
);\n }\n}\n\nclass Demo2 extends React.Component {\n constructor(props) {\n super(props);\n this.columns = [{\n title: '姓名',\n dataIndex: 'name',\n key:'name',\n width: '30%',\n render: (text, record, index) => (\n \n ),\n }, {\n title: '年龄',\n dataIndex: 'age',\n key:'age',\n }, {\n title: '你懂的',\n dataIndex: 'address',\n key:'address',\n }, {\n title: '操作',\n dataIndex: 'operation',\n key: 'operation',\n render: (text, record, index) => {\n return (\n this.state.dataSource.length > 1 ?\n (\n \n \n \n ) : null\n );\n },\n }];\n\n this.state = {\n dataSource: [{\n key: '0',\n name: '沉鱼',\n age: '18',\n address: '96, 77, 89',\n }, {\n key: '1',\n name: '落雁',\n age: '16',\n address: '90, 70, 80',\n }, {\n key: '2',\n name: '闭月',\n age: '17',\n address: '80, 60, 80',\n }, {\n key: '3',\n name: '羞花',\n age: '20',\n address: '120, 60, 90',\n }],\n count: 4,\n };\n }\n onCellChange = (index, key) => {\n return (value) => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n }\n onDelete = (index) => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n }\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: `100 100 100`,\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1,\n });\n }\n\n getBodyWrapper = (body) => {\n return (\n \n {body.props.children}\n \n );\n }\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (
\n \n \n );\n }\n}\n","desc":" 这是带有增删改功能的表格"}] +/** +* +* @title 更灵活的表格 +* @description 手写表格的头组件来达到更灵活的配置表格 +* +*/ + +const { ColumnGroup, Column } = Table; + +const data3 = [ + { a: '北京', b: '北京', c: '250', d: 2, key: '1' }, +]; + +class Demo3 extends Component { + render () { + return ( + +
+ + + + + + { + return ( + + ); + }} + /> +
+ ) + } +} +var DemoArray = [{"example":,"title":" 简单表格","code":"/**\n*\n* @title 简单表格\n* @description\n*\n*/\n\nconst columns = [\n { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },\n { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },\n { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },\n {\n title: '操作', dataIndex: '', key: 'd', render() {\n return 一些操作;\n },\n },\n];\n\nconst data = [\n { a: '令狐冲', b: '男', c: 41, key: '1' },\n { a: '杨过', b: '男', c: 67, key: '2' },\n { a: '郭靖', b: '男', c: 25, key: '3' },\n];\n\nclass Demo1 extends Component {\n render () {\n return (\n
标题: 这是一个标题
}\n footer={currentData =>
表尾: 我是小尾巴
}\n />\n )\n }\n}\n","desc":""},{"example":,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格\n*\n*/\n\nclass EditableCell extends React.Component {\n state = {\n value: this.props.value,\n editable: false,\n }\n handleChange = (e) => {\n const value = e.target.value;\n this.setState({ value });\n }\n check = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n }\n edit = () => {\n this.setState({ editable: true });\n }\n handleKeydown = (event) => {\n console.log(event.keyCode);\n if(event.keyCode == 13){\n this.check();\n }\n\n }\n render() {\n const { value, editable } = this.state;\n return (
\n {\n editable ?\n
\n \n \n
\n :\n
\n {value || ' '}\n \n
\n }\n
);\n }\n}\n\nclass Demo2 extends React.Component {\n constructor(props) {\n super(props);\n this.columns = [{\n title: '姓名',\n dataIndex: 'name',\n key:'name',\n width: '30%',\n render: (text, record, index) => (\n \n ),\n }, {\n title: '年龄',\n dataIndex: 'age',\n key:'age',\n }, {\n title: '你懂的',\n dataIndex: 'address',\n key:'address',\n }, {\n title: '操作',\n dataIndex: 'operation',\n key: 'operation',\n render: (text, record, index) => {\n return (\n this.state.dataSource.length > 1 ?\n (\n \n \n \n ) : null\n );\n },\n }];\n\n this.state = {\n dataSource: [{\n key: '0',\n name: '沉鱼',\n age: '18',\n address: '96, 77, 89',\n }, {\n key: '1',\n name: '落雁',\n age: '16',\n address: '90, 70, 80',\n }, {\n key: '2',\n name: '闭月',\n age: '17',\n address: '80, 60, 80',\n }, {\n key: '3',\n name: '羞花',\n age: '20',\n address: '120, 60, 90',\n }],\n count: 4,\n };\n }\n onCellChange = (index, key) => {\n return (value) => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n }\n onDelete = (index) => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n }\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: `100 100 100`,\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1,\n });\n }\n\n getBodyWrapper = (body) => {\n return (\n \n {body.props.children}\n \n );\n }\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (
\n \n \n );\n }\n}\n","desc":" 这是带有增删改功能的表格"},{"example":,"title":" 更灵活的表格","code":"/**\r\n*\r\n* @title 更灵活的表格\r\n* @description 手写表格的头组件来达到更灵活的配置表格\r\n*\r\n*/\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst data3 = [\r\n { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\r\n];\r\n\r\nclass Demo3 extends Component {\r\n render () {\r\n return (\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {\r\n return (\r\n \r\n );\r\n }}\r\n />\r\n
\r\n )\r\n }\r\n}\r\n","desc":" 手写表格的头组件来达到更灵活的配置表格"}] class Demo extends Component { diff --git a/docs/api.md b/docs/api.md index 2c5a03a..d771802 100644 --- a/docs/api.md +++ b/docs/api.md @@ -1,5 +1,52 @@ # Table + +表格是以结构化的方式来展示大量的信息最佳方法，使信息更易于阅读与理解。 +表格轻易就能用简洁和易读的方式来组织数据。它们可用于保存和展示大量的数据，小量的信息，静态数据以及不断地变动的数据。 + ## 代码演示 + ## API + +### Table + |参数|说明|类型|默认值| -|:---|:-----|:----|:------| \ No newline at end of file +|:--|:---|:--|:---| +|data|传入的表格数据|array|[]| +|columns|列的配置表，具体配置见下表|array|-| +|defaultExpandAllRows|默认是否展开所有行|bool|false| +|expandedRowKeys|展开的行，控制属性|array|-| +|defaultExpandedRowKeys|初始扩展行键|array|[]| +|useFixedHeader|是否使用固定表头|bool|false| +|bodyStyle|添加到tablebody上的style|object|{}| +|style|添加到table上的style|object|{}| +|rowKey|如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record）'的返回值将被用作键。| string or Function(record):string|'key'| +|rowClassName|获取行的classname|Function(record, index, indent):string|() => ''| +|expandedRowClassName|获取展开行的className|Function(recode, index, indent):string|() => ''| +|onExpand|展开行时的钩子函数|Function(expanded, record)|() => ''| +|onExpandedRowsChange|函数在扩展行更改时调用|Function(expandedRows)|() => ''| +|indentSize|indentSize为每个级别的data.i.children，更好地使用column.width指定|number|15| +|onRowClick|行的点击事件钩子函数|Function(record, index)|() => ''| +|onRowDoubleClick|行的双击事件钩子函数|Function(record, index)|() => ''| +|expandIconAsCell|是否将expandIcon作为单元格|bool|false| +|expandIconColumnIndex|expandIcon的索引，当expandIconAsCell为false时，将插入哪个列|number|0| +|showHeader|是否显示表头|bool|true| +|title|表格标题|function|-| +|footer|表格尾部|function|-| +|emptyText|无数据时显示的内容|function|() => 'No Data'| +|scroll|横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{{ x: true, y: 300 }}|object|{}| +|rowRef|获取行的ref|Function(record, index, indent):string|() => null| +|getBodyWrapper|添加对table body的包装|Function(body)|body => body| + +### Column + +|参数|说明|类型|默认值| +|:--|:---|:--|:---| +|key|列的键|string|-| +|className|传入列的classname|String |-| +|colSpan|该列的colSpan|Number|-| +|title|列的标题|node|-| +|dataIndex| 显示数据记录的字段|String|-| +|width|宽度的特定比例根据列的宽度计算|String/Number|-| +|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-| +|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-| +|onCellClick|单击列的单元格时调用|Function(row, event)|-| diff --git a/src/Table.js b/src/Table.js index e4e99c6..bc17058 100644 --- a/src/Table.js +++ b/src/Table.js @@ -221,7 +221,7 @@ class Table extends Component{ if (expandIconAsCell && fixed !== 'right') { rows[0].unshift({ - key: 'rc-table-expandIconAsCell', + key: 'u-table-expandIconAsCell', className: `${clsPrefix}-expand-icon-th`, title: '', rowSpan: rows.length, @@ -411,7 +411,7 @@ class Table extends Component{ cols.push( ); }