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;