diff --git a/src/hooks/useColumns.tsx b/src/hooks/useColumns.tsx index 457b7a8c8..ae1f0cee4 100644 --- a/src/hooks/useColumns.tsx +++ b/src/hooks/useColumns.tsx @@ -1,19 +1,19 @@ -import * as React from 'react'; -import warning from 'rc-util/lib/warning'; import toArray from 'rc-util/lib/Children/toArray'; +import warning from 'rc-util/lib/warning'; +import * as React from 'react'; +import { EXPAND_COLUMN } from '../constant'; import type { + ColumnGroupType, ColumnsType, ColumnType, + Direction, FixedType, - Key, GetRowKey, - TriggerEventHandler, + Key, RenderExpandIcon, - ColumnGroupType, - Direction, + TriggerEventHandler, } from '../interface'; import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil'; -import { EXPAND_COLUMN } from '../constant'; export function convertChildrenToColumns( children: React.ReactNode, @@ -36,30 +36,31 @@ export function convertChildrenToColumns( } function flatColumns(columns: ColumnsType): ColumnType[] { - return columns.reduce((list, column) => { - const { fixed } = column; - - // Convert `fixed='true'` to `fixed='left'` instead - const parsedFixed = fixed === true ? 'left' : fixed; + return columns + .filter(column => column && typeof column === 'object') + .reduce((list, column) => { + const { fixed } = column; + // Convert `fixed='true'` to `fixed='left'` instead + const parsedFixed = fixed === true ? 'left' : fixed; - const subColumns = (column as ColumnGroupType).children; - if (subColumns && subColumns.length > 0) { + const subColumns = (column as ColumnGroupType).children; + if (subColumns && subColumns.length > 0) { + return [ + ...list, + ...flatColumns(subColumns).map(subColum => ({ + fixed: parsedFixed, + ...subColum, + })), + ]; + } return [ ...list, - ...flatColumns(subColumns).map(subColum => ({ + { + ...column, fixed: parsedFixed, - ...subColum, - })), + }, ]; - } - return [ - ...list, - { - ...column, - fixed: parsedFixed, - }, - ]; - }, []); + }, []); } function warningFixed(flattenColumns: readonly { fixed?: FixedType }[]) { diff --git a/tests/Table.spec.js b/tests/Table.spec.js index 1a60f7f6c..cd1ca8fd3 100644 --- a/tests/Table.spec.js +++ b/tests/Table.spec.js @@ -1153,4 +1153,49 @@ describe('Table.Basic', () => { expect(wrapper.render()).toMatchSnapshot(); expect(wrapper.find('col')).toHaveLength(tColumns.length + 1); }); + it('columns support JSX condition', () => { + const Example = () => { + const [count, setCount] = React.useState(0); + const columns = [ + { + title: 'title', + dataIndex: 'a', + render: () => count, + }, + count === 1 && { + title: 'title2', + dataIndex: 'b', + render: () => count + 1, + }, + count === 2 + ? { + title: 'title3', + dataIndex: 'c', + render: () => count + 1, + } + : null, + ]; + return ( + <> + + + + ); + }; + const wrapper = mount(); + + wrapper.find('button').simulate('click'); + expect(wrapper.find('.rc-table-cell').at(1).text()).toEqual('title2'); + + wrapper.find('button').simulate('click'); + expect(wrapper.find('.rc-table-cell').at(1).text()).toEqual('title3'); + + expect(wrapper.render()).toMatchSnapshot(); + }); }); diff --git a/tests/__snapshots__/Table.spec.js.snap b/tests/__snapshots__/Table.spec.js.snap index 4df87d27e..13d03fd8c 100644 --- a/tests/__snapshots__/Table.spec.js.snap +++ b/tests/__snapshots__/Table.spec.js.snap @@ -1,5 +1,82 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Table.Basic columns support JSX condition 1`] = ` +[ + , +
+
+
+
+ + + + + + + + + + + + + + + + + +
+ title + + title3 +
+ 2 + + 3 +
+ 2 + + 3 +
+ + + , +] +`; + exports[`Table.Basic custom components renders correctly 1`] = `
Lucy - Jack -