diff --git a/package.json b/package.json index a91670122..2235b9e1b 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "16.0.0", + "version": "16.0.3", "license": "MIT", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", diff --git a/src/components/data-grid/DataGrid.tsx b/src/components/data-grid/DataGrid.tsx index ef1c173e8..9a9ad97b1 100755 --- a/src/components/data-grid/DataGrid.tsx +++ b/src/components/data-grid/DataGrid.tsx @@ -141,9 +141,9 @@ export const DataGrid = ({ exportFileName, }: DataGridProps) => { const [gridApi, setGridApi] = useState(new GridApi()); - const [gridColumns, setGridColumns] = useState(columns); + const [gridColumns, setGridColumns] = useState(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,16 @@ 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; + delete newColumn?.rowGroupField; + return newColumn; + }); + + return [checkboxColumn, ...updatedColumns, rowActionColumn]; + }, [checkboxColumn, rowActionColumn, gridColumns]); const [allViews, setAllViews] = useState(views ?? []); const [selectedFilterIds, setSelectedFilterIds] = useState({}); @@ -292,10 +300,9 @@ export const DataGrid = ({ }; const refreshStore = (api: GridApi) => { - const rowCount = api?.getDisplayedRowCount(); // Deselect all rows when refreshing api?.deselectAll(); - return api?.refreshServerSide({ purge: rowCount === 0 }); + return api?.refreshServerSide({ purge: true }); }; const refreshCells = (api: GridApi) => api.refreshCells(); @@ -439,22 +446,18 @@ export const DataGrid = ({ ?.filter((x) => x?.rowGroup) ?.map((column) => { return { - id: column?.field, + id: column?.rowGroupField || column?.field, displayName: column?.headerName || '', - field: column?.field, + field: column?.rowGroupField || column?.field, }; }); const groupKeys = params?.parentNode?.data ? [params?.parentNode?.data[rowGroupCols[0]?.field]] : []; - const groupKeysCopy = - selectedGroupOption && groupKeys?.includes(translations?.emptyGroup[selectedGroupOption?.field]) - ? [EMPTY_GROUP] - : groupKeys; try { const body = { ...params.request, filterModel, rowGroupCols, - groupKeys: groupKeysCopy, + groupKeys, }; let headers: HeadersInit = { 'Content-Type': 'application/json', @@ -542,19 +545,20 @@ export const DataGrid = ({ const datasource = createServerSideDatasource(); gridApi?.setGridOption('serverSideDatasource', datasource); } - }, [isDataRendered, filterModel]); + }, [isDataRendered, filterModel, dataUrl]); const getRowId = (params: GetRowIdParams) => { return params.data.id; }; 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 +929,18 @@ export const DataGrid = ({ {translations.groupBy} - )} - {isGridColumnApiLoaded && columnToggling && } + {isGridColumnApiLoaded && columnToggling && ( + + )} {!!settings?.length && } @@ -1007,6 +1012,7 @@ export const DataGrid = ({ statusBar={statusBar} tooltipShowDelay={0} colResizeDefault="shift" + reactiveCustomComponents > diff --git a/src/components/data-grid/export/docDefinition.ts b/src/components/data-grid/export/docDefinition.ts index 4bd7619d4..0a856d950 100644 --- a/src/components/data-grid/export/docDefinition.ts +++ b/src/components/data-grid/export/docDefinition.ts @@ -152,7 +152,7 @@ export const getDocDefinition = (gridApi: GridApi, printParams: PrintParams, tra function getColumnsToExport() { const columnsToExport: PdfHeaderCell[] = []; - gridApi?.getAllDisplayedColumns().forEach((col) => { + gridApi?.getAllGridColumns().forEach((col) => { const colDef = col.getColDef(); if (!colDef.field) { diff --git a/src/components/data-grid/footer-page-size/FooterPageSize.tsx b/src/components/data-grid/footer-page-size/FooterPageSize.tsx index 4eca700d3..88d3cde64 100755 --- a/src/components/data-grid/footer-page-size/FooterPageSize.tsx +++ b/src/components/data-grid/footer-page-size/FooterPageSize.tsx @@ -30,12 +30,15 @@ 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]); const handlePageSizeChange = (pageSize: number) => { gridApi.setGridOption('paginationPageSize', pageSize); + gridApi.setGridOption('cacheBlockSize', pageSize); setPageSize(pageSize); }; diff --git a/src/components/data-grid/footer-pagination/FooterPagination.tsx b/src/components/data-grid/footer-pagination/FooterPagination.tsx index 1e9fab5cf..95c05ef32 100755 --- a/src/components/data-grid/footer-pagination/FooterPagination.tsx +++ b/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]); diff --git a/src/components/data-grid/footer-row-count/FooterRowCount.tsx b/src/components/data-grid/footer-row-count/FooterRowCount.tsx index 2b1bf1eb3..ab40c9313 100755 --- a/src/components/data-grid/footer-row-count/FooterRowCount.tsx +++ b/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]); diff --git a/src/components/data-grid/group-row-inner-renderer/GroupRowInnerRenderer.tsx b/src/components/data-grid/group-row-inner-renderer/GroupRowInnerRenderer.tsx index 5a88e0bbb..2be15e021 100644 --- a/src/components/data-grid/group-row-inner-renderer/GroupRowInnerRenderer.tsx +++ b/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]); diff --git a/src/components/data-grid/header-checkbox/HeaderCheckbox.tsx b/src/components/data-grid/header-checkbox/HeaderCheckbox.tsx index c839907fb..4abe02305 100755 --- a/src/components/data-grid/header-checkbox/HeaderCheckbox.tsx +++ b/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]); diff --git a/src/components/data-grid/header-column-toggle/HeaderColumnToggle.tsx b/src/components/data-grid/header-column-toggle/HeaderColumnToggle.tsx index 607c6ff95..889287bad 100755 --- a/src/components/data-grid/header-column-toggle/HeaderColumnToggle.tsx +++ b/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([]); const [visibleColumnIds, setVisibleColumnIds] = useState([]); @@ -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 ( { --ag-checkbox-unchecked-color: ${theme.customColors.dark4}; } + .ag-theme-alpine .ag-row, .ag-theme-alpine-dark .ag-row, .ag-theme-alpine-auto-dark .ag-row { + font-size: ${theme.typography.ParagraphSmall.fontSize}; + } + + .ag-theme-alpine .ag-checkbox-input-wrapper { width: ${theme.sizing.scale650}; height: ${theme.sizing.scale650}; diff --git a/src/components/data-grid/types.ts b/src/components/data-grid/types.ts index 1ccbdc5b5..7c4cbf435 100755 --- a/src/components/data-grid/types.ts +++ b/src/components/data-grid/types.ts @@ -49,6 +49,7 @@ export type DataGridAggFunc = 'sum'; export interface DataGridColumn extends ColDef { field: string; + rowGroupField?: string; groupable?: boolean; } @@ -356,6 +357,7 @@ export interface HeaderCheckboxProps { export interface HeaderColumnToggleProps { api: GridApi; + selectedGroupOption?: DataGridColumn; } export interface HeaderColumnSettingsProps { settings: DataGridSetting[];