diff --git a/README.md b/README.md index e068329fe..88ef771b6 100644 --- a/README.md +++ b/README.md @@ -109,6 +109,7 @@ React.render(, mountNode); | onRow | Function(record, index) | | Set custom props per each row. | | onHeaderRow | Function(record, index) | | Set custom props per each header row. | | showHeader | Boolean | true | whether table head is shown | +| hidden | Boolean | `false` | Hidden column. | | title | Function(currentData) | | table title render function | | footer | Function(currentData) | | table footer render function | | emptyText | React.Node or Function | `No Data` | Display text when data is empty | diff --git a/docs/demo/column-hidden.md b/docs/demo/column-hidden.md new file mode 100644 index 000000000..f59063a40 --- /dev/null +++ b/docs/demo/column-hidden.md @@ -0,0 +1,8 @@ +--- +title: column-hidden +nav: + title: Demo + path: /demo +--- + + diff --git a/docs/demo/grouping-columns-hidden.md b/docs/demo/grouping-columns-hidden.md new file mode 100644 index 000000000..39043299a --- /dev/null +++ b/docs/demo/grouping-columns-hidden.md @@ -0,0 +1,8 @@ +--- +title: grouping-columns-hidden +nav: + title: Demo + path: /demo +--- + + diff --git a/docs/examples/column-hidden.tsx b/docs/examples/column-hidden.tsx new file mode 100644 index 000000000..91abb6bfb --- /dev/null +++ b/docs/examples/column-hidden.tsx @@ -0,0 +1,38 @@ +import type { TableProps } from 'rc-table'; +import Table from 'rc-table'; +import React from 'react'; +import '../../assets/index.less'; + +interface RecordType { + a?: string; + b?: string; + c?: string; +} + +const data = [ + { a: '123', key: '1' }, + { a: 'cdd', b: '2', key: '2' }, + { a: '1333', c: 'eee', d: 2, key: '3' }, +]; + +const Demo = () => { + const columns: TableProps['columns'] = [ + { + title: 'title1', + dataIndex: 'a', + }, + { + title: 'title12', + dataIndex: 'b', + hidden: true, + }, + { + title: 'title13', + dataIndex: 'c', + }, + ]; + + return columns={columns} data={data} />; +}; + +export default Demo; diff --git a/docs/examples/grouping-columns-hidden.tsx b/docs/examples/grouping-columns-hidden.tsx new file mode 100644 index 000000000..81046811c --- /dev/null +++ b/docs/examples/grouping-columns-hidden.tsx @@ -0,0 +1,103 @@ +import React from 'react'; +import Table from 'rc-table'; +import '../../assets/index.less'; + +const columns = [ + { + title: '姓名', + dataIndex: 'name', + key: 'name', + }, + { + title: '其它', + children: [ + { + title: '年龄', + dataIndex: 'age', + key: 'age', + }, + { + title: '住址', + children: [ + { + title: '街道', + dataIndex: 'street', + key: 'street', + hidden: true, + }, + { + title: '小区', + children: [ + { + title: '单元', + dataIndex: 'building', + key: 'building', + }, + { + title: '门牌', + dataIndex: 'number', + key: 'number', + hidden: true, + }, + ], + }, + ], + }, + ], + }, + { + title: '公司', + children: [ + { + title: '地址', + dataIndex: 'companyAddress', + key: 'companyAddress', + hidden: true, + }, + { + title: '名称', + dataIndex: 'companyName', + key: 'companyName', + }, + ], + }, + { + title: '性别', + dataIndex: 'gender', + key: 'gender', + }, +]; + +const data = [ + { + key: '1', + name: '胡彦斌', + age: 32, + street: '拱墅区和睦街道', + building: 1, + number: 2033, + companyAddress: '西湖区湖底公园', + companyName: '湖底有限公司', + gender: '男', + }, + { + key: '2', + name: '胡彦祖', + age: 42, + street: '拱墅区和睦街道', + building: 3, + number: 2035, + companyAddress: '西湖区湖底公园', + companyName: '湖底有限公司', + gender: '男', + }, +]; + +const Demo = () => ( +
+

grouping columns hidden

+
+ +); + +export default Demo; diff --git a/src/hooks/useColumns/index.tsx b/src/hooks/useColumns/index.tsx index 52cc445fd..345f98a4b 100644 --- a/src/hooks/useColumns/index.tsx +++ b/src/hooks/useColumns/index.tsx @@ -36,6 +36,25 @@ export function convertChildrenToColumns( }); } +function filterHiddenColumns( + columns: ColumnsType, +): ColumnsType { + return columns + .filter(column => column && typeof column === 'object' && !column.hidden) + .map(column => { + const subColumns = (column as ColumnGroupType).children; + + if (subColumns && subColumns.length > 0) { + return { + ...column, + children: filterHiddenColumns(subColumns), + }; + } + + return column; + }); +} + function flatColumns( columns: ColumnsType, parentKey = 'key', @@ -158,10 +177,11 @@ function useColumns( flattenColumns: readonly ColumnType[], realScrollWidth: undefined | number, ] { - const baseColumns = React.useMemo>( - () => columns || convertChildrenToColumns(children), - [columns, children], - ); + const baseColumns = React.useMemo>(() => { + const newColumns = columns || convertChildrenToColumns(children) || []; + + return filterHiddenColumns(newColumns.slice()); + }, [columns, children]); // ========================== Expand ========================== const withExpandColumns = React.useMemo>(() => { diff --git a/src/interface.ts b/src/interface.ts index f589862fb..9513d3ce4 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -80,6 +80,7 @@ interface ColumnSharedType { title?: React.ReactNode; key?: Key; className?: string; + hidden?: boolean; fixed?: FixedType; onHeaderCell?: GetComponentProps[number]>; ellipsis?: CellEllipsisType; diff --git a/tests/GroupingColumns.spec.jsx b/tests/GroupingColumns.spec.jsx index 7300265f7..822fb4e7f 100644 --- a/tests/GroupingColumns.spec.jsx +++ b/tests/GroupingColumns.spec.jsx @@ -154,4 +154,37 @@ describe('Table with grouping columns', () => { const titleA = wrapper.find('th.title-a'); expect(titleA.prop('rowSpan')).toBe(3); }); + + it('hidden column', () => { + const columns = [ + { + title: 'A', + }, + { + title: 'B', + hidden: true, + children: [ + { + title: 'C', + }, + ], + }, + { + title: 'D', + children: [ + { + title: 'E', + hidden: true, + }, + { + title: 'F', + }, + ], + }, + ]; + const wrapper = mount(
); + + expect(wrapper.find('thead tr').at(0).find('th').at(1).text()).toEqual('D'); + expect(wrapper.find('thead tr').at(1).find('th').at(0).text()).toEqual('F'); + }); }); diff --git a/tests/Table.spec.jsx b/tests/Table.spec.jsx index 1c62fe31f..05b9d53aa 100644 --- a/tests/Table.spec.jsx +++ b/tests/Table.spec.jsx @@ -756,6 +756,28 @@ describe('Table.Basic', () => { }); }); + it('hidden columns', () => { + const wrapper = mount( + createTable({ + columns: [ + { + title: '姓名', + dataIndex: 'name', + key: 'name', + }, + { + title: '年龄', + dataIndex: 'age', + key: 'age', + hidden: true, + }, + ], + }), + ); + expect(wrapper.find('th').at(0).text()).toEqual('姓名'); + expect(wrapper.find('th').at(1)).toHaveLength(0); + }); + describe('row events', () => { let spy;