From b03cd4687016472f6e8f05de6d13ad4894a9a366 Mon Sep 17 00:00:00 2001 From: simonguo Date: Fri, 24 Nov 2023 13:21:53 +0800 Subject: [PATCH] fix(Table): fix missing ColumnGroup parameter in children --- README.md | 86 ++++++++++++++++++++++----------------------- src/Table.tsx | 5 ++- test/Table.test.tsx | 13 ++++++- test/TableSpec.js | 17 ++++++--- 4 files changed, 72 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index d300dba..04c53ab 100644 --- a/README.md +++ b/README.md @@ -99,49 +99,49 @@ const App = () => ( ### `` -| Property | Type `(Default)` | Description | -| ------------------------ | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | -| affixHeader | boolean,number | Affix the table header to the specified position on the page | -| affixHorizontalScrollbar | boolean,number | Affix the table horizontal scrollbar to the specified position on the page | -| autoHeight | boolean | The height of the table will be automatically expanded according to the number of data rows, and no vertical scroll bar will appear | -| bordered | boolean | Show border | -| cellBordered | boolean | Show cell border | -| children | (components: { Cell, HeaderCell, ColumnGroup }) => React.ReactNode | Render props that receives parameterized Cell, HeaderCell, ColumnGroup components - making typescript usage more convenient | -| data \* | object[] | Table data | -| defaultExpandAllRows | boolean | Expand all nodes By default | -| defaultExpandedRowKeys | string[] | Specify the default expanded row by `rowkey` | -| defaultSortType | enum: 'desc', 'asc' | Sort type | -| expandedRowKeys | string[] | Specify the default expanded row by `rowkey` (Controlled) | -| fillHeight | boolean | Force the height of the table to be equal to the height of its parent container. Cannot be used together with autoHeight. | -| headerHeight | number`(40)` | Table Header Height | -| height | number`(200)` | Table height | -| hover | boolean `(true)` | The row of the table has a mouseover effect | -| isTree | boolean | Show as Tree table | -| loading | boolean | Show loading | -| locale | object: { emptyMessage: `('No data')`, loading: `('Loading...')` } | Messages for empty data and loading states | -| minHeight | number `(0)` | Minimum height | -| onExpandChange | (expanded:boolean,rowData:object)=>void | Tree table, the callback function in the expanded node | -| onRowClick | (rowData:object, event: SyntheticEvent)=>void | Click the callback function after the row and return to `rowDate` | -| onRowContextMenu | (rowData:object, event: SyntheticEvent)=>void | Invoke the callback function on contextMenu and pass the `rowData` | -| onScroll | (scrollX:object, scrollY:object)=>void | Callback function for scroll bar scrolling | -| onSortColumn | (dataKey:string, sortType:string)=>void | Click the callback function of the sort sequence to return the value `sortColumn`, `sortType` | -| renderEmpty | (info: React.ReactNode) => React.ReactNode | Customized data is empty display content | -| renderLoading | (loading: React.ReactNode) => React.ReactNode | Customize the display content in the data load | -| renderRow | (children?: ReactNode, rowData?: RowDataType) => ReactNode | Custom row element | -| renderRowExpanded | (rowDate?: Object) => React.ReactNode | Customize what you can do to expand a zone | -| renderTreeToggle | (icon:node,rowData:object,expanded:boolean)=> node | Tree table, the callback function in the expanded node | -| rowClassName | string , (rowData:object, rowIndex:number)=>string | Add an optional extra class name to row | -| rowExpandedHeight | number `(100)`, (rowDate?: Object) => number | Set the height of an expandable area | -| rowHeight | number`(46)`, (rowData: object) => number | Row height | -| rowKey | string `('key')` | Each row corresponds to the unique `key` in `data` | -| rtl | boolean | Right to left | -| shouldUpdateScroll | boolean,(event)=>({x,y}) `(true)` | Use the return value of `shouldUpdateScroll` to determine whether to update the scroll after the table size is updated. | -| showHeader | boolean `(true)` | Display header | -| sortColumn | string | Sort column name ˝ | -| sortType | enum: 'desc', 'asc' | Sort type (Controlled) | -| virtualized | boolean | Effectively render large tabular data | -| width | number | Table width | -| wordWrap | boolean,'break-all','break-word','keep-all' | Whether to appear line breaks where text overflows its content box. | +| Property | Type `(Default)` | Description | +| ------------------------ | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | +| affixHeader | boolean,number | Affix the table header to the specified position on the page | +| affixHorizontalScrollbar | boolean,number | Affix the table horizontal scrollbar to the specified position on the page | +| autoHeight | boolean | The height of the table will be automatically expanded according to the number of data rows, and no vertical scroll bar will appear | +| bordered | boolean | Show border | +| cellBordered | boolean | Show cell border | +| children | (components: { Cell, HeaderCell, Column, ColumnGroup }) => React.ReactNode | React.ReactNode | Render props that receives parameterized Cell, HeaderCell, Column, ColumnGroup components - making typescript usage more convenient | +| data \* | object[] | Table data | +| defaultExpandAllRows | boolean | Expand all nodes By default | +| defaultExpandedRowKeys | string[] | Specify the default expanded row by `rowkey` | +| defaultSortType | enum: 'desc', 'asc' | Sort type | +| expandedRowKeys | string[] | Specify the default expanded row by `rowkey` (Controlled) | +| fillHeight | boolean | Force the height of the table to be equal to the height of its parent container. Cannot be used together with autoHeight. | +| headerHeight | number`(40)` | Table Header Height | +| height | number`(200)` | Table height | +| hover | boolean `(true)` | The row of the table has a mouseover effect | +| isTree | boolean | Show as Tree table | +| loading | boolean | Show loading | +| locale | object: { emptyMessage: `('No data')`, loading: `('Loading...')` } | Messages for empty data and loading states | +| minHeight | number `(0)` | Minimum height | +| onExpandChange | (expanded:boolean,rowData:object)=>void | Tree table, the callback function in the expanded node | +| onRowClick | (rowData:object, event: SyntheticEvent)=>void | Click the callback function after the row and return to `rowDate` | +| onRowContextMenu | (rowData:object, event: SyntheticEvent)=>void | Invoke the callback function on contextMenu and pass the `rowData` | +| onScroll | (scrollX:object, scrollY:object)=>void | Callback function for scroll bar scrolling | +| onSortColumn | (dataKey:string, sortType:string)=>void | Click the callback function of the sort sequence to return the value `sortColumn`, `sortType` | +| renderEmpty | (info: React.ReactNode) => React.ReactNode | Customized data is empty display content | +| renderLoading | (loading: React.ReactNode) => React.ReactNode | Customize the display content in the data load | +| renderRow | (children?: ReactNode, rowData?: RowDataType) => ReactNode | Custom row element | +| renderRowExpanded | (rowDate?: Object) => React.ReactNode | Customize what you can do to expand a zone | +| renderTreeToggle | (icon:node,rowData:object,expanded:boolean)=> node | Tree table, the callback function in the expanded node | +| rowClassName | string , (rowData:object, rowIndex:number)=>string | Add an optional extra class name to row | +| rowExpandedHeight | number `(100)`, (rowDate?: Object) => number | Set the height of an expandable area | +| rowHeight | number`(46)`, (rowData: object) => number | Row height | +| rowKey | string `('key')` | Each row corresponds to the unique `key` in `data` | +| rtl | boolean | Right to left | +| shouldUpdateScroll | boolean,(event)=>({x,y}) `(true)` | Use the return value of `shouldUpdateScroll` to determine whether to update the scroll after the table size is updated. | +| showHeader | boolean `(true)` | Display header | +| sortColumn | string | Sort column name ˝ | +| sortType | enum: 'desc', 'asc' | Sort type (Controlled) | +| virtualized | boolean | Effectively render large tabular data | +| width | number | Table width | +| wordWrap | boolean,'break-all','break-word','keep-all' | Whether to appear line breaks where text overflows its content box. | ### `` diff --git a/src/Table.tsx b/src/Table.tsx index 58624f8..15815ff 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -21,6 +21,7 @@ import TableContext from './TableContext'; import Cell, { InnerCellProps } from './Cell'; import HeaderCell, { HeaderCellProps } from './HeaderCell'; import Column, { ColumnProps } from './Column'; +import ColumnGroup from './ColumnGroup'; import { SCROLLBAR_WIDTH, CELL_PADDING_HEIGHT, @@ -267,6 +268,7 @@ export interface TableProps props: InnerCellProps & React.RefAttributes ) => React.ReactElement; Column: (props: ColumnProps) => React.ReactElement; + ColumnGroup: typeof ColumnGroup; HeaderCell: ( props: HeaderCellProps & React.RefAttributes ) => React.ReactElement; @@ -284,7 +286,8 @@ const DATA_PLACEHOLDER = []; const getChildrenProps = { Cell, HeaderCell, - Column + Column, + ColumnGroup }; const Table = React.forwardRef( diff --git a/test/Table.test.tsx b/test/Table.test.tsx index 96ac764..6d383a3 100644 --- a/test/Table.test.tsx +++ b/test/Table.test.tsx @@ -86,7 +86,7 @@ interface InventoryItem { const table = React.createRef>(); ref={table}> - {({ Column, HeaderCell, Cell }) => ( + {({ Column, HeaderCell, Cell, ColumnGroup }) => ( <> Name @@ -97,6 +97,17 @@ const table = React.createRef>(); {/** @ts-expect-error Property 'type' does not exist on type 'InventoryItem' */} {row => row.type} + + + + Id + {row => row.id} + + + Name + {row => row.name} + + )}
; diff --git a/test/TableSpec.js b/test/TableSpec.js index 7858131..43d7faf 100644 --- a/test/TableSpec.js +++ b/test/TableSpec.js @@ -33,9 +33,9 @@ describe('Table', () => { }); it('Should accept render prop', () => { - const instance = getDOMNode( + render( - {({ Column, HeaderCell, Cell }) => ( + {({ Column, HeaderCell, Cell, ColumnGroup }) => ( <> 11 @@ -45,12 +45,21 @@ describe('Table', () => { 11 12 + + + 11 + 12 + + + 11 + 12 + + )}
); - - expect(instance.querySelectorAll('.rs-table-cell')).to.be.length(2); + expect(screen.queryAllByRole('columnheader')).to.be.length(5); }); it('Should be disabled scroll', () => {