feat: add new attribute 'hiddenColumns' to configure which columns sh… (

#2279)

Adding a new attribute hiddenColumns for AutoGrid component allowing to hide certain columns in the grid. The new attribute will be applied after visibleColumns and customColumns have been processed. This ensures a high flexibility when combining this attributes without being mutually exclusive.

packages/ts/react-crud/src/autogrid.tsx

@@ -85,6 +85,12 @@ interface AutoGridOwnProps<TItem> {
    * 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<TItem> = GridProps<TItem> & Readonly<AutoGridOwnProps<
 
 interface ColumnConfigurationOptions {
   visibleColumns?: string[];
+  hiddenColumns?: string[];
   noHeaderFilters?: boolean;
   customColumns?: JSX.Element[];
   columnOptions?: Record<string, ColumnOptions>;
@@ -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 = [
       <GridColumn key="rownumbers" width="4em" flexGrow={0} renderer={AutoGridRowNumberRenderer}></GridColumn>,
@@ -292,6 +304,7 @@ function AutoGridInner<TItem>(
     itemIdProperty,
     experimentalFilter,
     visibleColumns,
+    hiddenColumns,
     noHeaderFilters,
     customColumns,
     columnOptions,
@@ -351,6 +364,7 @@ function AutoGridInner<TItem>(
   const properties = visibleColumns ? modelInfo.getProperties(visibleColumns) : getDefaultProperties(modelInfo);
   const children = useColumns(properties, setHeaderFilter, {
     visibleColumns,
+    hiddenColumns,
     noHeaderFilters,
     customColumns,
     columnOptions,

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(
             <TestAutoGrid visibleColumns={['foo', 'email', 'bar', 'firstName', 'address.foo', 'department.foo']} />,
@@ -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(<TestAutoGrid hiddenColumns={['gender', 'birthDate', 'address.country']} />),
+          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(
+            <TestAutoGrid hiddenColumns={['foo', 'gender', 'bar', 'birthDate', 'address.foo', 'department.foo']} />,
+          ),
+          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 => <span>{item.firstName.toUpperCase()}</span>;
         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(
+            <TestAutoGrid
+              noHeaderFilters
+              hiddenColumns={[
+                'email',
+                'someInteger',
+                'someDecimal',
+                'vip',
+                'shiftStart',
+                'appointmentTime',
+                'address.street',
+                'address.city',
+                'address.country',
+                'department',
+                'secondFullName',
+              ]}
+              customColumns={[
+                <GridColumn key="fullName" header="Full name" autoWidth renderer={FullNameRenderer}></GridColumn>,
+                <GridColumn
+                  key="secondFullName"
+                  header="Second full name"
+                  autoWidth
+                  renderer={FullNameHyphenRenderer}
+                ></GridColumn>,
+              ]}
+            />,
+          ),
+          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;