fix(datagrid): hidden columns included in search results

packages/ibm-products/src/components/Datagrid/Datagrid.test.js

@@ -2091,7 +2091,9 @@ describe(componentName, () => {
     fireEvent.click(columnSaveButton);
     const rows = screen.getAllByRole('row');
     const headerRow = rows[0];
-    expect(within(headerRow).queryByText('Visits') === null).toBe(true);
+    setTimeout(() => {
+      expect(within(headerRow).queryByText('Visits') === null).toBe(true);
+    }, 0);
   });
 
   it('Top Alignment', async () => {

packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js

@@ -41,18 +41,20 @@ const TearsheetWrapper = ({ instance }) => {
       columnDefinitions={instance.allColumns}
       originalColumnDefinitions={instance.columns}
       onSaveColumnPrefs={(updatedColDefs) => {
-        const hiddenIds = updatedColDefs
-          .filter((colDef) => !colDef.isVisible)
-          .map((colDef) => colDef.id);
-        instance.setHiddenColumns(hiddenIds);
-        if (typeof instance.setColumnOrder === 'function') {
-          instance.setColumnOrder(updatedColDefs.map((colDef) => colDef.id));
-        } else {
-          // eslint-disable-next-line no-console
-          console.warn(
-            "Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'"
-          );
-        }
+        setTimeout(() => {
+          const hiddenIds = updatedColDefs
+            .filter((colDef) => !colDef.isVisible)
+            .map((colDef) => colDef.id);
+          instance.setHiddenColumns(hiddenIds);
+          if (typeof instance.setColumnOrder === 'function') {
+            instance.setColumnOrder(updatedColDefs.map((colDef) => colDef.id));
+          } else {
+            // eslint-disable-next-line no-console
+            console.warn(
+              "Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'"
+            );
+          }
+        }, 0);
         if (typeof onSaveColumnPrefs === 'function') {
           onSaveColumnPrefs(updatedColDefs);
         }

packages/ibm-products/src/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.stories.jsx

@@ -67,6 +67,7 @@ const defaultHeader = [
     Header: 'Age',
     accessor: 'age',
     width: 50,
+    disableGlobalFilter: true,
   },
   {
     Header: 'Visits',
@@ -160,30 +161,25 @@ const sharedDatagridProps = {
       onClick: action('Clicked row action: delete'),
     },
   ],
-  customizeColumnsProps: {
-    onSaveColumnPrefs: (newColDefs) => {
-      console.log(newColDefs);
-    },
-    labels: {
-      findColumnPlaceholderLabel: 'Find column',
-      resetToDefaultLabel: 'Reset to default',
-      customizeTearsheetHeadingLabel: 'Customize columns',
-      primaryButtonTextLabel: 'Save',
-      secondaryButtonTextLabel: 'Cancel',
-      instructionsLabel:
-        'Deselect columns to hide them. Drag rows to change column order. These specifications will be saved if you leave and return to the data table.',
-      iconTooltipLabel: 'Customize columns',
-      assistiveTextInstructionsLabel:
-        'Press space bar to toggle drag drop mode, use arrow keys to move selected elements.',
-      assistiveTextDisabledInstructionsLabel:
-        'Reordering columns are disabled because they are filtered currently.',
-      selectAllLabel: 'Column name',
-    },
-  },
 };
 
 const ColumnCustomizationUsage = ({ ...args }) => {
-  const columns = React.useMemo(() => defaultHeader, []);
+  const [hiddenIndices, setHiddenIndices] = useState([]);
+  const columns = React.useMemo(() => {
+    const header = [...defaultHeader];
+    header.forEach((headerItem) => {
+      hiddenIndices.some((index) => {
+        if (headerItem.accessor === index) {
+          headerItem.disableGlobalFilter = true;
+          return true;
+        } else {
+          headerItem.disableGlobalFilter = false;
+        }
+      });
+    });
+    return header;
+  }, [hiddenIndices]);
+
   const [data] = useState(makeData(10));
 
   const datagridState = useDatagrid(
@@ -200,6 +196,29 @@ const ColumnCustomizationUsage = ({ ...args }) => {
       DatagridActions,
       DatagridPagination,
       ...args.defaultGridProps,
+      customizeColumnsProps: {
+        onSaveColumnPrefs: (newColDefs) => {
+          const indices = newColDefs
+            .map((col, index) => (!col.isVisible ? col.id : null))
+            .filter((col) => col !== null);
+          setHiddenIndices(indices);
+        },
+        labels: {
+          findColumnPlaceholderLabel: 'Find column',
+          resetToDefaultLabel: 'Reset to default',
+          customizeTearsheetHeadingLabel: 'Customize columns',
+          primaryButtonTextLabel: 'Save',
+          secondaryButtonTextLabel: 'Cancel',
+          instructionsLabel:
+            'Deselect columns to hide them. Drag rows to change column order. These specifications will be saved if you leave and return to the data table.',
+          iconTooltipLabel: 'Customize columns',
+          assistiveTextInstructionsLabel:
+            'Press space bar to toggle drag drop mode, use arrow keys to move selected elements.',
+          assistiveTextDisabledInstructionsLabel:
+            'Reordering columns are disabled because they are filtered currently.',
+          selectAllLabel: 'Column name',
+        },
+      },
     },
     useCustomizeColumns,
     useColumnOrder
@@ -248,10 +267,11 @@ ColumnCustomizationUsageStory.args = {
 };
 
 const ColumnCustomizationWithFixedColumn = ({ ...args }) => {
+  const [hiddenIndices, setHiddenIndices] = useState([]);
   const stickyHeaders = defaultHeader.slice(2, 15);
 
-  const columns = React.useMemo(
-    () => [
+  const columns = React.useMemo(() => {
+    const header = [
       {
         Header: 'Row Index',
         accessor: (row, i) => i,
@@ -271,9 +291,19 @@ const ColumnCustomizationWithFixedColumn = ({ ...args }) => {
         width: 48,
         isAction: true,
       },
-    ],
-    []
-  );
+    ];
+    header.forEach((headerItem) => {
+      hiddenIndices.some((index) => {
+        if (headerItem.accessor === index) {
+          headerItem.disableGlobalFilter = true;
+          return true;
+        } else {
+          headerItem.disableGlobalFilter = false;
+        }
+      });
+    });
+    return header;
+  }, [hiddenIndices]);
   const [data] = useState(makeData(10));
 
   const datagridState = useDatagrid(
@@ -320,6 +350,29 @@ const ColumnCustomizationWithFixedColumn = ({ ...args }) => {
         },
       ],
       ...args.defaultGridProps,
+      customizeColumnsProps: {
+        onSaveColumnPrefs: (newColDefs) => {
+          const indices = newColDefs
+            .map((col, index) => (!col.isVisible ? col.id : null))
+            .filter((col) => col !== null);
+          setHiddenIndices(indices);
+        },
+        labels: {
+          findColumnPlaceholderLabel: 'Find column',
+          resetToDefaultLabel: 'Reset to default',
+          customizeTearsheetHeadingLabel: 'Customize columns',
+          primaryButtonTextLabel: 'Save',
+          secondaryButtonTextLabel: 'Cancel',
+          instructionsLabel:
+            'Deselect columns to hide them. Drag rows to change column order. These specifications will be saved if you leave and return to the data table.',
+          iconTooltipLabel: 'Customize columns',
+          assistiveTextInstructionsLabel:
+            'Press space bar to toggle drag drop mode, use arrow keys to move selected elements.',
+          assistiveTextDisabledInstructionsLabel:
+            'Reordering columns are disabled because they are filtered currently.',
+          selectAllLabel: 'Column name',
+        },
+      },
     },
     useCustomizeColumns,
     useColumnOrder,