Allow pinning DataGrid columns using the column config (#2452)

When using `DataGridPro` or `DataGridPremium` with the
`usePersistentColumnState` hook.

```tsx
const columns: GridColDef[] = [
    {
        field: "title",
        pinned: "left",
    },
    // ... other columns
    {
        field: "actions",
        pinned: "right",
    },
];
```

.changeset/cold-hats-return.md

@@ -0,0 +1,19 @@
+---
+"@comet/admin": minor
+---
+
+Allow pinning DataGrid columns using the column config when using `DataGridPro` or `DataGridPremium` with the `usePersistentColumnState` hook
+
+```tsx
+const columns: GridColDef[] = [
+    {
+        field: "title",
+        pinned: "left",
+    },
+    // ... other columns
+    {
+        field: "actions",
+        pinned: "right",
+    },
+];
+```

demo/admin/src/products/ProductsGrid.tsx

@@ -216,6 +216,7 @@ export function ProductsGrid() {
             sortable: false,
             filterable: false,
             width: 106,
+            pinned: "right",
             renderCell: (params) => {
                 return (
                     <>

packages/admin/admin/src/dataGrid/GridColDef.ts

@@ -4,6 +4,8 @@ import {
     GridValidRowModel,
 } from "@mui/x-data-grid";
 
+import { GridPinnedColumns } from "./usePersistentColumnState";
+
 export interface GridColDef<R extends GridValidRowModel = any, V = any, F = V> extends MuiGridColDef<R, V, F> {
     /**
      * Media query to define when the column is visible.
@@ -14,4 +16,8 @@ export interface GridColDef<R extends GridValidRowModel = any, V = any, F = V> e
      * Requires DataGridPro or DataGridPremium.
      */
     sortBy?: string | string[];
+    /**
+     * Requires DataGridPro or DataGridPremium.
+     */
+    pinned?: keyof GridPinnedColumns;
 }

packages/admin/admin/src/dataGrid/usePersistentColumnState.tsx

@@ -4,6 +4,11 @@ import * as React from "react";
 import { useStoredState } from "../hooks/useStoredState";
 import { GridColDef } from "./GridColDef";
 
+export type GridPinnedColumns = {
+    left?: string[];
+    right?: string[];
+};
+
 const useGridColumns = (apiRef: ReturnType<typeof useGridApiRef>) => {
     const [columns, setColumns] = React.useState<GridColDef[] | undefined>();
 
@@ -75,14 +80,28 @@ export function usePersistentColumnState(stateKey: string): GridProps {
         [mediaQueryColumnVisibilityModel, setStoredColumnVisibilityModel],
     );
 
-    const [pinnedColumns, setPinnedColumns] = useStoredState<GridColumnVisibilityModel>(`${stateKey}PinnedColumns`, {});
+    const [pinnedColumns, setPinnedColumns] = useStoredState<GridPinnedColumns>(`${stateKey}PinnedColumns`, {});
     const handlePinnedColumnsChange = React.useCallback(
-        (newModel: GridColumnVisibilityModel) => {
+        (newModel: GridPinnedColumns) => {
             setPinnedColumns(newModel);
         },
         [setPinnedColumns],
     );
 
+    React.useEffect(() => {
+        // During the first render, `columns` is `undefined`, so we cannot set this as the initial values of the `pinnedColumns` state.
+        // We have to wait until the columns are loaded from the `useGridColumns` hook.
+        const pinnedColumnsHaveNotYetBeenSet = Object.keys(pinnedColumns).length === 0;
+        const columnsHaveBeenLoaded = Boolean(columns);
+
+        if (pinnedColumnsHaveNotYetBeenSet && columnsHaveBeenLoaded) {
+            setPinnedColumns({
+                left: columns?.filter((column) => column.pinned === "left")?.map((column) => column.field),
+                right: columns?.filter((column) => column.pinned === "right")?.map((column) => column.field),
+            });
+        }
+    }, [columns, setPinnedColumns, pinnedColumns]);
+
     //no API for column dimensions as controlled state, export on change instead
     const columnDimensionsKey = `${stateKey}ColumnDimensions`;
     const initialColumnDimensions = React.useMemo(() => {