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

…ould hide in autogrid
vaadin · Mar 31, 2024 · a8581a7 · a8581a7
1 parent 0961d0b
commit a8581a7
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 1 deletion.
diff --git a/packages/ts/react-crud/src/autogrid.tsx b/packages/ts/react-crud/src/autogrid.tsx
@@ -57,7 +57,8 @@ interface AutoGridOwnProps<TItem> {
    *
    * By default, the grid shows columns for all properties of the model which
    * have a type that is supported. Use the `visibleColumns` option to customize
-   * which columns to show and in which order.
+   * which columns to show and in which order. Use the `hiddenColumns` option to
+   * hide certain columns and to keep the default order.
    */
   model: DetachedModelConstructor<AbstractModel<TItem>>;
   /**
@@ -85,6 +86,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 +143,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 +266,17 @@ function useColumns(
 
   columns = addCustomColumns(columns, options, setColumnFilter);
 
+  // When using `hiddenColumns` option, remove columns to hide using their `key`
+  if (options.hiddenColumns) {
+    columns = columns.filter((column) => {
+      const { key } = column;
+      if (key) {
+        return !options.hiddenColumns?.includes(key);
+      }
+      return true;
+    });
+  }
+
   if (options.rowNumbers) {
     columns = [
       <GridColumn key="rownumbers" width="4em" flexGrow={0} renderer={AutoGridRowNumberRenderer}></GridColumn>,
@@ -292,6 +311,7 @@ function AutoGridInner<TItem>(
     itemIdProperty,
     experimentalFilter,
     visibleColumns,
+    hiddenColumns,
     noHeaderFilters,
     customColumns,
     columnOptions,
@@ -351,6 +371,7 @@ function AutoGridInner<TItem>(
   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
@@ -1103,6 +1103,27 @@ describe('@vaadin/hilla-react-crud', () => {
         await assertColumns(grid, 'email', 'firstName');
       });
 
+      it('should hide configured 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('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 +1341,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;