[DataGridPro] Add column pinning

docs/pages/api-docs/data-grid/data-grid-pro.json

@@ -36,6 +36,7 @@
     "disableChildrenSorting": { "type": { "name": "bool" } },
     "disableColumnFilter": { "type": { "name": "bool" } },
     "disableColumnMenu": { "type": { "name": "bool" } },
+    "disableColumnPinning": { "type": { "name": "bool" } },
     "disableColumnReorder": { "type": { "name": "bool" } },
     "disableColumnResize": { "type": { "name": "bool" } },
     "disableColumnSelector": { "type": { "name": "bool" } },
@@ -122,6 +123,7 @@
     "onFilterModelChange": { "type": { "name": "func" } },
     "onPageChange": { "type": { "name": "func" } },
     "onPageSizeChange": { "type": { "name": "func" } },
+    "onPinnedColumnsChange": { "type": { "name": "func" } },
     "onResize": { "type": { "name": "func" } },
     "onRowClick": { "type": { "name": "func" } },
     "onRowDoubleClick": { "type": { "name": "func" } },
@@ -139,6 +141,12 @@
       "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
       "default": "\"client\""
     },
+    "pinnedColumns": {
+      "type": {
+        "name": "shape",
+        "description": "{ left?: Array&lt;string&gt;, right?: Array&lt;string&gt; }"
+      }
+    },
     "rowBuffer": { "type": { "name": "number" }, "default": "3" },
     "rowCount": { "type": { "name": "number" } },
     "rowHeight": { "type": { "name": "number" }, "default": "52" },
@@ -289,6 +297,9 @@
       "virtualScroller",
       "virtualScrollerContent",
       "virtualScrollerRenderZone",
+      "pinnedColumns",
+      "pinnedColumns--left",
+      "pinnedColumns--right",
       "root",
       "row--editable",
       "row--editing",

docs/pages/api-docs/data-grid/data-grid.json

@@ -257,6 +257,9 @@
       "virtualScroller",
       "virtualScrollerContent",
       "virtualScrollerRenderZone",
+      "pinnedColumns",
+      "pinnedColumns--left",
+      "pinnedColumns--right",
       "root",
       "row--editable",
       "row--editing",

docs/pages/api-docs/data-grid/grid-column-pinning-api.json

@@ -0,0 +1,27 @@
+{
+  "name": "GridColumnPinningApi",
+  "description": "The column pinning API interface that is available in the grid apiRef.",
+  "properties": [
+    {
+      "name": "getPinnedColumns",
+      "description": "Returns which columns are pinned.",
+      "type": "() => GridPinnedColumns"
+    },
+    {
+      "name": "isColumnPinned",
+      "description": "Returns which side a column is pinned to.",
+      "type": "(field: string) => false | GridPinnedPosition"
+    },
+    {
+      "name": "pinColumn",
+      "description": "Pins a column to the left or right side of the grid.",
+      "type": "(field: string, side: GridPinnedPosition) => void"
+    },
+    {
+      "name": "setPinnedColumns",
+      "description": "Changes the pinned columns.",
+      "type": "(pinnedColumns: GridPinnedColumns) => void"
+    },
+    { "name": "unpinColumn", "description": "Unpins a column.", "type": "(field: string) => void" }
+  ]
+}

docs/scripts/api/buildInterfacesDocumentation.ts

@@ -27,6 +27,7 @@ const INTERFACES_WITH_DEDICATED_PAGES = [
   'GridPrintExportOptions',
   'GridScrollApi',
   'GridEditRowApi',
+  'GridColumnPinningApi',
   'GridEvents',
 ];
 

docs/src/pages/components/data-grid/columns/BasicColumnPinning.js

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import { DataGridPro, GridActionsCellItem } from '@mui/x-data-grid-pro';
+import {
+  randomCreatedDate,
+  randomTraderName,
+  randomEmail,
+  randomUpdatedDate,
+} from '@mui/x-data-grid-generator';
+
+export default function BasicColumnPinning() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        rows={rows}
+        columns={columns}
+        initialState={{ pinnedColumns: { left: ['name'], right: ['actions'] } }}
+      />
+    </div>
+  );
+}
+
+const columns = [
+  { field: 'name', headerName: 'Name', width: 160, editable: true },
+  { field: 'email', headerName: 'Email', width: 200, editable: true },
+  { field: 'age', headerName: 'Age', type: 'number', editable: true },
+  {
+    field: 'dateCreated',
+    headerName: 'Date Created',
+    type: 'date',
+    width: 180,
+    editable: true,
+  },
+  {
+    field: 'lastLogin',
+    headerName: 'Last Login',
+    type: 'dateTime',
+    width: 220,
+    editable: true,
+  },
+  {
+    field: 'actions',
+    type: 'actions',
+    width: 100,
+    getActions: () => [
+      <GridActionsCellItem icon={<EditIcon />} label="Edit" />,
+      <GridActionsCellItem icon={<DeleteIcon />} label="Delete" />,
+    ],
+  },
+];
+
+const rows = [
+  {
+    id: 1,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 25,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 2,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 36,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 3,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 19,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 4,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 28,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 5,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 23,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 6,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 27,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 7,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 18,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 8,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 31,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 9,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 24,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 10,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 35,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+];

docs/src/pages/components/data-grid/columns/BasicColumnPinning.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import {
+  DataGridPro,
+  GridColumns,
+  GridRowsProp,
+  GridActionsCellItem,
+} from '@mui/x-data-grid-pro';
+import {
+  randomCreatedDate,
+  randomTraderName,
+  randomEmail,
+  randomUpdatedDate,
+} from '@mui/x-data-grid-generator';
+
+export default function BasicColumnPinning() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        rows={rows}
+        columns={columns}
+        initialState={{ pinnedColumns: { left: ['name'], right: ['actions'] } }}
+      />
+    </div>
+  );
+}
+
+const columns: GridColumns = [
+  { field: 'name', headerName: 'Name', width: 160, editable: true },
+  { field: 'email', headerName: 'Email', width: 200, editable: true },
+  { field: 'age', headerName: 'Age', type: 'number', editable: true },
+  {
+    field: 'dateCreated',
+    headerName: 'Date Created',
+    type: 'date',
+    width: 180,
+    editable: true,
+  },
+  {
+    field: 'lastLogin',
+    headerName: 'Last Login',
+    type: 'dateTime',
+    width: 220,
+    editable: true,
+  },
+  {
+    field: 'actions',
+    type: 'actions',
+    width: 100,
+    getActions: () => [
+      <GridActionsCellItem icon={<EditIcon />} label="Edit" />,
+      <GridActionsCellItem icon={<DeleteIcon />} label="Delete" />,
+    ],
+  },
+];
+
+const rows: GridRowsProp = [
+  {
+    id: 1,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 25,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 2,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 36,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 3,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 19,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 4,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 28,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 5,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 23,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 6,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 27,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 7,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 18,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 8,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 31,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 9,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 24,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+  {
+    id: 10,
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: 35,
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  },
+];

docs/src/pages/components/data-grid/columns/BasicColumnPinning.tsx.preview

@@ -0,0 +1,5 @@
+<DataGridPro
+  rows={rows}
+  columns={columns}
+  initialState={{ pinnedColumns: { left: ['name'], right: ['actions'] } }}
+/>

docs/src/pages/components/data-grid/columns/ColumnPinningApiNoSnap.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ApiDocs from 'docsx/src/modules/components/ApiDocs';
+import api from 'docsx/pages/api-docs/data-grid/grid-column-pinning-api.json';
+
+export default function ColumnPinningApiNoSnap() {
+  return <ApiDocs api={api} />;
+}