diff --git a/packages/ts/react-crud/src/autogrid.tsx b/packages/ts/react-crud/src/autogrid.tsx index 0108def65c..cf22644ecb 100644 --- a/packages/ts/react-crud/src/autogrid.tsx +++ b/packages/ts/react-crud/src/autogrid.tsx @@ -85,6 +85,12 @@ interface AutoGridOwnProps { * can be specified using dot notation, e.g. `address.street`. */ visibleColumns?: string[]; + /** + * Allows to customize which columns to hide. This must be an array of property + * names that are defined in the model. Nested properties can be specified using + * dot notation, e.g. `address.street`. + */ + hiddenColumns?: string[]; /** * Disables header filters, which are otherwise enabled by default. */ @@ -136,6 +142,7 @@ export type AutoGridProps = GridProps & Readonly; @@ -258,6 +265,11 @@ function useColumns( columns = addCustomColumns(columns, options, setColumnFilter); + // When using `hiddenColumns` option, remove columns to hide using their `key` + if (options.hiddenColumns) { + columns = columns.filter(({ key }) => !(key && options.hiddenColumns?.includes(key))); + } + if (options.rowNumbers) { columns = [ , @@ -292,6 +304,7 @@ function AutoGridInner( itemIdProperty, experimentalFilter, visibleColumns, + hiddenColumns, noHeaderFilters, customColumns, columnOptions, @@ -351,6 +364,7 @@ function AutoGridInner( const properties = visibleColumns ? modelInfo.getProperties(visibleColumns) : getDefaultProperties(modelInfo); const children = useColumns(properties, setHeaderFilter, { visibleColumns, + hiddenColumns, noHeaderFilters, customColumns, columnOptions, diff --git a/packages/ts/react-crud/test/autogrid.spec.tsx b/packages/ts/react-crud/test/autogrid.spec.tsx index a4adaa0f71..a81e70adff 100644 --- a/packages/ts/react-crud/test/autogrid.spec.tsx +++ b/packages/ts/react-crud/test/autogrid.spec.tsx @@ -1093,7 +1093,7 @@ describe('@vaadin/hilla-react-crud', () => { expect(grid.getBodyCellContent(0, 0)).to.have.rendered.text('IT'); }); - it('should ignore unknown columns', async () => { + it('should ignore unknown columns when using visibleColumns', async () => { const grid = await GridController.init( render( , @@ -1103,6 +1103,51 @@ describe('@vaadin/hilla-react-crud', () => { await assertColumns(grid, 'email', 'firstName'); }); + it('should hide columns and keep default order', async () => { + const grid = await GridController.init( + render(), + user, + ); + await assertColumns( + grid, + 'firstName', + 'lastName', + 'email', + 'someInteger', + 'someDecimal', + 'vip', + 'shiftStart', + 'appointmentTime', + 'address.street', + 'address.city', + 'department', + ); + }); + + it('should ignore unknown columns when using hiddenColumns', async () => { + const grid = await GridController.init( + render( + , + ), + user, + ); + await assertColumns( + grid, + 'firstName', + 'lastName', + 'email', + 'someInteger', + 'someDecimal', + 'vip', + 'shiftStart', + 'appointmentTime', + 'address.street', + 'address.city', + 'address.country', + 'department', + ); + }); + it('uses custom column options on top of the type defaults', async () => { const NameRenderer = ({ item }: { item: Person }): JSX.Element => {item.firstName.toUpperCase()}; const StreetRenderer = ({ item }: { item: Person }): JSX.Element => ( @@ -1320,6 +1365,41 @@ describe('@vaadin/hilla-react-crud', () => { expect(grid.getBodyCellContent(0, 0)).to.have.rendered.text('Jane Love'); }); + it('should hide configured columns and render remaining columns including custom columns at the end', async () => { + const grid = await GridController.init( + render( + , + , + ]} + />, + ), + user, + ); + await assertColumnsOrder(grid, 'firstName', 'lastName', 'gender', 'birthDate', 'fullName'); + expect(grid.getBodyCellContent(0, 4)).to.have.rendered.text('Jane Love'); + }); + describe('with header filters', () => { let clock: sinon.SinonFakeTimers;