diff --git a/.changeset/violet-goats-study.md b/.changeset/violet-goats-study.md new file mode 100644 index 0000000000..efc5e25c86 --- /dev/null +++ b/.changeset/violet-goats-study.md @@ -0,0 +1,5 @@ +--- +"@comet/admin": patch +--- + +`usePersistentColumnState`: Prevent Data Grids with the same name to overwrite each others pinned and column-visibility states diff --git a/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx b/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx index 012d27944e..0b46830150 100644 --- a/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx +++ b/packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx @@ -1,5 +1,6 @@ import { DataGridProps, GridColumnVisibilityModel, useGridApiRef } from "@mui/x-data-grid"; import { MutableRefObject, useCallback, useEffect, useMemo, useState } from "react"; +import { useRouteMatch } from "react-router"; import { useStoredState } from "../hooks/useStoredState"; import { GridColDef } from "./GridColDef"; @@ -55,10 +56,13 @@ type GridProps = Omit & { export function usePersistentColumnState(stateKey: string): GridProps { const apiRef = useGridApiRef(); const columns = useGridColumns(apiRef); + const match = useRouteMatch(); + + const storageKeyPrefix = `${match.path}${stateKey}`; const mediaQueryColumnVisibilityModel = useVisibilityModelFromColumnMediaQueries(columns); const [storedColumnVisibilityModel, setStoredColumnVisibilityModel] = useStoredState( - `${stateKey}ColumnVisibility`, + `${storageKeyPrefix}ColumnVisibility`, {}, ); @@ -80,7 +84,8 @@ export function usePersistentColumnState(stateKey: string): GridProps { [mediaQueryColumnVisibilityModel, setStoredColumnVisibilityModel], ); - const [pinnedColumns, setPinnedColumns] = useStoredState(`${stateKey}PinnedColumns`, {}); + const [pinnedColumns, setPinnedColumns] = useStoredState(`${storageKeyPrefix}PinnedColumns`, {}); + const handlePinnedColumnsChange = useCallback( (newModel: GridPinnedColumns) => { setPinnedColumns(newModel); @@ -103,7 +108,7 @@ export function usePersistentColumnState(stateKey: string): GridProps { }, [columns, setPinnedColumns, pinnedColumns]); //no API for column dimensions as controlled state, export on change instead - const columnDimensionsKey = `${stateKey}ColumnDimensions`; + const columnDimensionsKey = `${storageKeyPrefix}ColumnDimensions`; const initialColumnDimensions = useMemo(() => { const serializedState = window.localStorage.getItem(columnDimensionsKey); return serializedState ? JSON.parse(serializedState) : undefined; @@ -115,7 +120,7 @@ export function usePersistentColumnState(stateKey: string): GridProps { }, [columnDimensionsKey, apiRef]); //no API for column order as controlled state, export on change instead - const columnOrderKey = `${stateKey}ColumnOrder`; + const columnOrderKey = `${storageKeyPrefix}ColumnOrder`; const initialColumnOrder = useMemo(() => { const serializedState = window.localStorage.getItem(columnOrderKey); return serializedState ? JSON.parse(serializedState) : undefined;