AG-grid improvements

src/components/data-grid/DataGrid.tsx

@@ -141,9 +141,9 @@ export const DataGrid = ({
   exportFileName,
 }: DataGridProps) => {
   const [gridApi, setGridApi] = useState<GridApi>(new GridApi());
-  const [gridColumns, setGridColumns] = useState<DataGridColumn[]>(columns);
+  const [gridColumns, setGridColumns] = useState<DataGridColumn[]>(columns || []);
   const selectedGroupOption = useMemo(
-    () => gridColumns.filter((x) => x.groupable).find((column) => column.rowGroup),
+    () => gridColumns?.filter((x) => x?.groupable)?.find((column) => column?.rowGroup),
     [gridColumns],
   );
 
@@ -164,6 +164,8 @@ export const DataGrid = ({
       minWidth: 200,
       cellRenderer: 'agGroupCellRenderer',
       headerCheckboxSelection: true,
+      pinned: true,
+      resizable: false,
       cellRendererParams: {
         checkbox: true,
       } as IGroupCellRendererParams,
@@ -207,10 +209,15 @@ export const DataGrid = ({
     };
   }, [rowActionItems]);
 
-  const columnDefs: ColDef[] = useMemo(
-    () => [checkboxColumn, ...columns, rowActionColumn],
-    [checkboxColumn, rowActionColumn],
-  );
+  const columnDefs: ColDef[] = useMemo(() => {
+    const updatedColumns = gridColumns?.map((column) => {
+      const newColumn = { ...column };
+      delete newColumn?.groupable;
+      return newColumn;
+    });
+
+    return [checkboxColumn, ...updatedColumns, rowActionColumn];
+  }, [checkboxColumn, rowActionColumn, gridColumns]);
 
   const [allViews, setAllViews] = useState<DataGridView[]>(views ?? []);
   const [selectedFilterIds, setSelectedFilterIds] = useState<SelectedFilterIds>({});
@@ -549,12 +556,13 @@ export const DataGrid = ({
   };
 
   const onGrouping = (rowGroups: string[]) => {
-    const columns = [...gridColumns];
-    columns.forEach((c) => {
-      c.rowGroup = rowGroups.includes(c.field);
+    const groupColumns = [...gridColumns];
+    groupColumns?.forEach((c) => {
+      c.rowGroup = rowGroups?.includes(c?.field);
+      c.hide = rowGroups?.includes(c?.field);
       c.sort = null;
     });
-    setGridColumns(columns);
+    setGridColumns(groupColumns);
     gridApi?.deselectAll();
   };
 
@@ -925,17 +933,18 @@ export const DataGrid = ({
                   <FlexItem width="auto">
                     <ParagraphSmall marginRight={scale500}>{translations.groupBy}</ParagraphSmall>
                     <Dropdown items={[noneOption, ...options]}>
-                      <Button kind={ButtonKind.tertiary}>
-                        {selectedGroupOption?.headerName ?? noneOption.label}
-                        <FlexItem marg4={scale500}>
-                          <CaretDown color={dark1} />
-                        </FlexItem>
+                      <Button kind={ButtonKind.tertiary} endEnhancer={() => <CaretDown color={dark1} />}>
+                        <ParagraphSmall color={dark1}>
+                          {selectedGroupOption?.headerName ?? noneOption.label}
+                        </ParagraphSmall>
                       </Button>
                     </Dropdown>
                   </FlexItem>
                 </>
               )}
-              {isGridColumnApiLoaded && columnToggling && <HeaderColumnToggle api={gridApi} />}
+              {isGridColumnApiLoaded && columnToggling && (
+                <HeaderColumnToggle api={gridApi} selectedGroupOption={selectedGroupOption} />
+              )}
               {!!settings?.length && <HeaderColumnSettings settings={settings} />}
             </FlexItem>
           </StyledDataGridHeader>
@@ -1007,6 +1016,7 @@ export const DataGrid = ({
           statusBar={statusBar}
           tooltipShowDelay={0}
           colResizeDefault="shift"
+          reactiveCustomComponents
         ></StyledAgGridReact>
       </StyledDataGrid>
     </>

src/components/data-grid/footer-page-size/FooterPageSize.tsx

@@ -30,7 +30,9 @@ export const FooterPageSize = ({ api: gridApi, translations }: FooterRowCountPro
     gridApi?.addEventListener(EVENT_LISTENER, onPaginationChanged);
 
     return () => {
-      gridApi?.removeEventListener(EVENT_LISTENER, onPaginationChanged);
+      if (!gridApi?.isDestroyed()) {
+        gridApi?.removeEventListener(EVENT_LISTENER, onPaginationChanged);
+      }
     };
   }, [gridApi]);
 

src/components/data-grid/footer-pagination/FooterPagination.tsx

@@ -21,7 +21,9 @@ export const FooterPagination = ({ api: gridApi, translations }: FooterRowCountP
     gridApi?.addEventListener(EVENT_LISTENER, onPaginationChanged);
 
     return () => {
-      gridApi?.removeEventListener(EVENT_LISTENER, onPaginationChanged);
+      if (!gridApi?.isDestroyed()) {
+        gridApi?.removeEventListener(EVENT_LISTENER, onPaginationChanged);
+      }
     };
   }, [gridApi, currentPage]);
 

src/components/data-grid/footer-row-count/FooterRowCount.tsx

@@ -40,9 +40,11 @@ export const FooterRowCount = ({
     gridApi?.addEventListener(ROW_SELECTED_EVENT, onRowSelection);
 
     return () => {
-      gridApi?.removeEventListener(MODEL_UPDATED_EVENT, onModelUpdated);
-      gridApi?.removeEventListener(PAGINATION_CHANGED_EVENT, onModelUpdated);
-      gridApi?.removeEventListener(ROW_SELECTED_EVENT, onModelUpdated);
+      if (!gridApi?.isDestroyed()) {
+        gridApi?.removeEventListener(MODEL_UPDATED_EVENT, onModelUpdated);
+        gridApi?.removeEventListener(PAGINATION_CHANGED_EVENT, onModelUpdated);
+        gridApi?.removeEventListener(ROW_SELECTED_EVENT, onModelUpdated);
+      }
     };
   }, [gridApi]);
 

src/components/data-grid/group-row-inner-renderer/GroupRowInnerRenderer.tsx

@@ -22,9 +22,11 @@ export const GroupRowInnerRenderer = ({ node, value, api, totalCounts }: any) =>
     api.addEventListener(MODEL_UPDATED_EVENT, dataChangedListener);
 
     return () => {
-      api.removeEventListener(CELL_VALUE_CHANGED_EVENT, dataChangedListener);
-      api.removeEventListener(FILTER_CHANGED_EVENT, dataChangedListener);
-      api.removeEventListener(MODEL_UPDATED_EVENT, dataChangedListener);
+      if (!api?.isDestroyed()) {
+        api.removeEventListener(CELL_VALUE_CHANGED_EVENT, dataChangedListener);
+        api.removeEventListener(FILTER_CHANGED_EVENT, dataChangedListener);
+        api.removeEventListener(MODEL_UPDATED_EVENT, dataChangedListener);
+      }
     };
   }, [api, dataChangedListener]);
 

src/components/data-grid/header-checkbox/HeaderCheckbox.tsx

@@ -70,9 +70,11 @@ export const HeaderCheckbox = ({ api: gridApi, displayName }: HeaderCheckboxProp
     gridApi.addEventListener(PAGINATION_CHANGED_EVENT, onPaginationChanged);
 
     return () => {
-      gridApi.removeEventListener(MODEL_UPDATED_EVENT, handleChangeEvent);
-      gridApi.removeEventListener(SELECTION_CHANGED_EVENT, handleChangeEvent);
-      gridApi.removeEventListener(PAGINATION_CHANGED_EVENT, onPaginationChanged);
+      if (!gridApi?.isDestroyed()) {
+        gridApi.removeEventListener(MODEL_UPDATED_EVENT, handleChangeEvent);
+        gridApi.removeEventListener(SELECTION_CHANGED_EVENT, handleChangeEvent);
+        gridApi.removeEventListener(PAGINATION_CHANGED_EVENT, onPaginationChanged);
+      }
     };
   }, [gridApi, checked, getPageIndices, allAreSelected]);
 

src/components/data-grid/header-column-toggle/HeaderColumnToggle.tsx

@@ -7,7 +7,7 @@ import { Column } from '@ag-grid-community/core';
 import { DATA_TEST_ID, ButtonKind } from '../../../models';
 import { CaretDown, Table } from '@phosphor-icons/react';
 
-export const HeaderColumnToggle = ({ api: gridApi }: HeaderColumnToggleProps) => {
+export const HeaderColumnToggle = ({ api: gridApi, selectedGroupOption }: HeaderColumnToggleProps) => {
   const [active, setActive] = useState(false);
   const [dropdownItems, setDropdownItems] = useState<DropdownItem[]>([]);
   const [visibleColumnIds, setVisibleColumnIds] = useState<string[]>([]);
@@ -35,7 +35,9 @@ export const HeaderColumnToggle = ({ api: gridApi }: HeaderColumnToggleProps) =>
     gridApi?.addEventListener(MODEL_UPDATED_EVENT, onModelUpdated);
 
     return () => {
-      gridApi?.removeEventListener(MODEL_UPDATED_EVENT, onModelUpdated);
+      if (!gridApi?.isDestroyed()) {
+        gridApi?.removeEventListener(MODEL_UPDATED_EVENT, onModelUpdated);
+      }
     };
   }, [gridApi]);
 
@@ -55,7 +57,7 @@ export const HeaderColumnToggle = ({ api: gridApi }: HeaderColumnToggleProps) =>
     const items = gridApi
       .getAllGridColumns()
       // skip the first three columns (checkbox, rowActionItems and first column, which is always visible)
-      ?.filter((column, index) => index > 2 && column.getColDef().headerName)
+      ?.filter((column, index) => index > 2 && column?.getColDef()?.field !== selectedGroupOption?.field)
       .map(
         (column) =>
           ({
@@ -67,7 +69,7 @@ export const HeaderColumnToggle = ({ api: gridApi }: HeaderColumnToggleProps) =>
 
     setVisibleColumns();
     setDropdownItems(items || []);
-  }, [gridApi, setVisibleColumns, toggleColumn]);
+  }, [gridApi, setVisibleColumns, toggleColumn, selectedGroupOption]);
 
   return (
     <Dropdown

src/components/data-grid/types.ts

@@ -356,6 +356,7 @@ export interface HeaderCheckboxProps {
 
 export interface HeaderColumnToggleProps {
   api: GridApi;
+  selectedGroupOption?: DataGridColumn;
 }
 export interface HeaderColumnSettingsProps {
   settings: DataGridSetting[];