feat: Column add hidden (#1065)

* feat: Column add hidden

* test: add test

* docs: add demo

* docs: add hidden

* docs: update demo

Author: madocto

README.md

@@ -109,6 +109,7 @@ React.render(<Table columns={columns} data={data} />, 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 |

docs/demo/column-hidden.md

@@ -0,0 +1,8 @@
+---
+title: column-hidden
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/column-hidden.tsx"></code>

docs/demo/grouping-columns-hidden.md

@@ -0,0 +1,8 @@
+---
+title: grouping-columns-hidden
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/grouping-columns-hidden.tsx"></code>

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<any>['columns'] = [
+    {
+      title: 'title1',
+      dataIndex: 'a',
+    },
+    {
+      title: 'title12',
+      dataIndex: 'b',
+      hidden: true,
+    },
+    {
+      title: 'title13',
+      dataIndex: 'c',
+    },
+  ];
+
+  return <Table<RecordType> columns={columns} data={data} />;
+};
+
+export default Demo;

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 = () => (
+  <div>
+    <h2>grouping columns hidden</h2>
+    <Table columns={columns} data={data} className="bordered" />
+  </div>
+);
+
+export default Demo;

src/hooks/useColumns/index.tsx

@@ -36,6 +36,25 @@ export function convertChildrenToColumns<RecordType>(
     });
 }
 
+function filterHiddenColumns<RecordType>(
+  columns: ColumnsType<RecordType>,
+): ColumnsType<RecordType> {
+  return columns
+    .filter(column => column && typeof column === 'object' && !column.hidden)
+    .map(column => {
+      const subColumns = (column as ColumnGroupType<RecordType>).children;
+
+      if (subColumns && subColumns.length > 0) {
+        return {
+          ...column,
+          children: filterHiddenColumns(subColumns),
+        };
+      }
+
+      return column;
+    });
+}
+
 function flatColumns<RecordType>(
   columns: ColumnsType<RecordType>,
   parentKey = 'key',
@@ -158,10 +177,11 @@ function useColumns<RecordType>(
   flattenColumns: readonly ColumnType<RecordType>[],
   realScrollWidth: undefined | number,
 ] {
-  const baseColumns = React.useMemo<ColumnsType<RecordType>>(
-    () => columns || convertChildrenToColumns(children),
-    [columns, children],
-  );
+  const baseColumns = React.useMemo<ColumnsType<RecordType>>(() => {
+    const newColumns = columns || convertChildrenToColumns(children) || [];
+
+    return filterHiddenColumns(newColumns.slice());
+  }, [columns, children]);
 
   // ========================== Expand ==========================
   const withExpandColumns = React.useMemo<ColumnsType<RecordType>>(() => {

src/interface.ts

@@ -80,6 +80,7 @@ interface ColumnSharedType<RecordType> {
   title?: React.ReactNode;
   key?: Key;
   className?: string;
+  hidden?: boolean;
   fixed?: FixedType;
   onHeaderCell?: GetComponentProps<ColumnsType<RecordType>[number]>;
   ellipsis?: CellEllipsisType;

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(<Table columns={columns} data={[]} />);
+
+    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');
+  });
 });

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;