feat: support row group

uxcore · Feb 28, 2018 · 51217fe · 51217fe
1 parent 6ac2f93
commit 51217fe
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -124,6 +124,7 @@ $ npm start
 |onColumnPick        |function(columns)   |optional  |noop        | 7.6.0     |勾选自定义列时触发，参数为勾选后的 columns |
 |addRowClassName     |function(rowData)   |optional  |noop        | -         |用于为特定的某几行添加特殊的 class，用于样式定制|
 |rowSelection        |object              |optional  |noop        | -         |选中复选框时触发的回调，rowSelection 是由回调函数组成的对象，包括 onSelect 和 onSelectAll，例子见此| 
+|rowGroupKey         |string              |optional  |            | 8.3.0     |用于行分组，可选值为 columns 设置中 dataKey，使用对应的列内容做行分组 |
 
 
 ### 折叠展开专用

diff --git a/demo/TableRowGroup.jsx b/demo/TableRowGroup.jsx
@@ -43,7 +43,7 @@ class Demo extends React.Component {
     const tableProps = {
       jsxcolumns: [
         { dataKey: 'company', title: '公司', width: 200 },
-        { dataKey: 'title', title: '标题', width: 200 },
+        { dataKey: 'title', title: '标题', width: 200, fixed: true },
         { dataKey: 'entity', title: '支付实体', width: 200 },
         { dataKey: 'institution', title: '金融机构', width: 200 },
         { dataKey: 'person', title: '申请人', width: 200 },
@@ -53,6 +53,8 @@ class Demo extends React.Component {
       },
       className: 'kuma-uxtable-split-line',
       rowGroupKey: 'company',
+      showColumnPicker: true,
+      width: 600,
     };
     return (
       <Table {...tableProps} />

diff --git a/src/Table.jsx b/src/Table.jsx
@@ -1040,6 +1040,8 @@ class Table extends React.Component {
       mask: state.showMask,
       expandedKeys: state.expandedKeys,
       currentHoverRow: state.currentHoverRow,
+      rowGroupActiveKey: state.rowGroupActiveKey,
+      onCollapseChange: (activeKey) => { this.setState({ rowGroupActiveKey: activeKey }); },
       data,
       bodyHeight,
       rowSelection: props.rowSelection,

diff --git a/src/Tbody.jsx b/src/Tbody.jsx
@@ -277,7 +277,7 @@ class Tbody extends React.Component {
         this.rowGroupMap[rowGroupName].push(item);
       }
       rows = (
-        <Collapse className={`${props.jsxprefixCls}-collapse`} onChange={(key) => { console.log(key); }}>
+        <Collapse activeKey={props.rowGroupActiveKey || '0'} className={`${props.jsxprefixCls}-collapse`} onChange={(key, activeKey) => { props.onCollapseChange(activeKey); }}>
           {this.rowGroupArr.map((rowGroupName, i) => (
             <Collapse.Panel header={rowGroupName} key={i}>
               {this.rowGroupMap[rowGroupName].map((item, j) => {