[DataGrid] Improve column definition typing (#7224)

Closes #7188
mui · Dec 21, 2022 · fe389c3 · fe389c3
1 parent 5246c52
commit fe389c3
Show file tree

Hide file tree

Showing 99 changed files with 268 additions and 269 deletions.
diff --git a/docs/data/data-grid/accessibility/FocusManagement.tsx b/docs/data/data-grid/accessibility/FocusManagement.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   DataGrid,
-  GridColumns,
+  GridColDef,
   GridRenderCellParams,
   GridRowsProp,
 } from '@mui/x-data-grid';
@@ -22,10 +22,10 @@ function WrongRenderLink() {
   return <Link href="/#tab-sequence">more info</Link>;
 }
 
-const correctColumns: GridColumns = [
+const correctColumns: GridColDef[] = [
   { field: 'link', renderCell: CorrectRenderLink, width: 200 },
 ];
-const wrongColumns: GridColumns = [
+const wrongColumns: GridColDef[] = [
   { field: 'link', renderCell: WrongRenderLink, width: 200 },
 ];
 

diff --git a/docs/data/data-grid/aggregation/AggregationTreeData.tsx b/docs/data/data-grid/aggregation/AggregationTreeData.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   DataGridPremium,
-  GridColumns,
+  GridColDef,
   GridRowsProp,
   DataGridPremiumProps,
 } from '@mui/x-data-grid-premium';
@@ -95,7 +95,7 @@ const rows: GridRowsProp<File> = [
   },
 ];
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   {
     field: 'size',
     headerName: 'Size',

diff --git a/docs/data/data-grid/column-definition/ColumnTypesGrid.tsx b/docs/data/data-grid/column-definition/ColumnTypesGrid.tsx
@@ -3,7 +3,7 @@ import {
   DataGrid,
   GridActionsCellItem,
   GridRowId,
-  GridColumns,
+  GridColDef,
 } from '@mui/x-data-grid';
 import DeleteIcon from '@mui/icons-material/Delete';
 import SecurityIcon from '@mui/icons-material/Security';
@@ -78,7 +78,7 @@ export default function ColumnTypesGrid() {
     [],
   );
 
-  const columns = React.useMemo<GridColumns<Row>>(
+  const columns = React.useMemo<GridColDef<Row>[]>(
     () => [
       { field: 'name', type: 'string' },
       { field: 'age', type: 'number' },

diff --git a/docs/data/data-grid/column-pinning/BasicColumnPinning.tsx b/docs/data/data-grid/column-pinning/BasicColumnPinning.tsx
@@ -3,7 +3,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import {
   DataGridPro,
-  GridColumns,
+  GridColDef,
   GridRowsProp,
   GridActionsCellItem,
 } from '@mui/x-data-grid-pro';
@@ -26,7 +26,7 @@ export default function BasicColumnPinning() {
   );
 }
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'name', headerName: 'Name', width: 160, editable: true },
   { field: 'email', headerName: 'Email', width: 200, editable: true },
   { field: 'age', headerName: 'Age', type: 'number', editable: true },

diff --git a/docs/data/data-grid/column-pinning/ColumnPinningDynamicRowHeight.tsx b/docs/data/data-grid/column-pinning/ColumnPinningDynamicRowHeight.tsx
@@ -6,7 +6,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import {
   DataGridPro,
-  GridColumns,
+  GridColDef,
   GridRowsProp,
   useGridApiRef,
 } from '@mui/x-data-grid-pro';
@@ -21,7 +21,7 @@ export default function ColumnPinningDynamicRowHeight() {
   const apiRef = useGridApiRef();
   const [showEditDelete, setShowEditDelete] = React.useState(true);
 
-  const columns: GridColumns = React.useMemo(
+  const columns: GridColDef[] = React.useMemo(
     () => [
       { field: 'name', headerName: 'Name', width: 160, editable: true },
       { field: 'email', headerName: 'Email', width: 200, editable: true },

diff --git a/docs/data/data-grid/column-pinning/ColumnPinningWithCheckboxSelection.tsx b/docs/data/data-grid/column-pinning/ColumnPinningWithCheckboxSelection.tsx
@@ -3,7 +3,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import {
   DataGridPro,
-  GridColumns,
+  GridColDef,
   GridRowsProp,
   GridActionsCellItem,
   GRID_CHECKBOX_SELECTION_COL_DEF,
@@ -33,7 +33,7 @@ export default function ColumnPinningWithCheckboxSelection() {
   );
 }
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'name', headerName: 'Name', width: 160, editable: true },
   { field: 'email', headerName: 'Email', width: 200, editable: true },
   { field: 'age', headerName: 'Age', type: 'number', editable: true },

diff --git a/docs/data/data-grid/column-pinning/ControlPinnedColumns.tsx b/docs/data/data-grid/column-pinning/ControlPinnedColumns.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   DataGridPro,
-  GridColumns,
+  GridColDef,
   GridPinnedColumns,
   GridRowsProp,
 } from '@mui/x-data-grid-pro';
@@ -43,7 +43,7 @@ export default function ControlPinnedColumns() {
   );
 }
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'name', headerName: 'Name', width: 180, editable: true },
   { field: 'email', headerName: 'Email', width: 200, editable: true },
   { field: 'age', headerName: 'Age', type: 'number', editable: true },

diff --git a/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.tsx b/docs/data/data-grid/column-pinning/DisableColumnPinningButtons.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   DataGridPro,
-  GridColumns,
+  GridColDef,
   GridRowsProp,
   GridColumnMenuContainer,
   SortGridMenuItems,
@@ -47,7 +47,7 @@ export default function DisableColumnPinningButtons() {
   );
 }
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'name', headerName: 'Name', width: 160, editable: true },
   { field: 'email', headerName: 'Email', width: 200, editable: true },
   { field: 'age', headerName: 'Age', type: 'number', editable: true },

diff --git a/docs/data/data-grid/editing/AskConfirmationBeforeSave.tsx b/docs/data/data-grid/editing/AskConfirmationBeforeSave.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import {
   DataGrid,
   GridRowModel,
-  GridColumns,
+  GridColDef,
   GridRowId,
   GridRowsProp,
 } from '@mui/x-data-grid';
@@ -149,7 +149,7 @@ export default function AskConfirmationBeforeSave() {
   );
 }
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'name', headerName: 'Name', width: 180, editable: true },
   { field: 'age', headerName: 'Age', type: 'number', editable: true },
   {

diff --git a/docs/data/data-grid/editing/BasicEditingGrid.tsx b/docs/data/data-grid/editing/BasicEditingGrid.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGrid, GridColumns, GridRowsProp } from '@mui/x-data-grid';
+import { DataGrid, GridColDef, GridRowsProp } from '@mui/x-data-grid';
 import {
   randomCreatedDate,
   randomTraderName,
@@ -14,7 +14,7 @@ export default function BasicEditingGrid() {
   );
 }
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'name', headerName: 'Name', width: 180, editable: true },
   { field: 'age', headerName: 'Age', type: 'number', editable: true },
   {

diff --git a/docs/data/data-grid/editing/BasicRowEditingGrid.tsx b/docs/data/data-grid/editing/BasicRowEditingGrid.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGrid, GridColumns, GridRowsProp } from '@mui/x-data-grid';
+import { DataGrid, GridColDef, GridRowsProp } from '@mui/x-data-grid';
 import {
   randomCreatedDate,
   randomTraderName,
@@ -14,7 +14,7 @@ export default function BasicRowEditingGrid() {
   );
 }
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'name', headerName: 'Name', width: 180, editable: true },
   { field: 'age', headerName: 'Age', type: 'number', editable: true },
   {

diff --git a/docs/data/data-grid/editing/DisableStopEditModeOnFocusOut.tsx b/docs/data/data-grid/editing/DisableStopEditModeOnFocusOut.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  GridColumns,
+  GridColDef,
   GridRowsProp,
   DataGrid,
   GridCellEditStopParams,
@@ -29,7 +29,7 @@ export default function DisableStopEditModeOnFocusOut() {
   );
 }
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'name', headerName: 'Name', width: 180, editable: true },
   { field: 'age', headerName: 'Age', type: 'number', editable: true },
   {

diff --git a/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx b/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx
@@ -11,7 +11,7 @@ import {
   GridRowModesModel,
   GridRowModes,
   DataGridPro,
-  GridColumns,
+  GridColDef,
   GridRowParams,
   MuiEvent,
   GridToolbarContainer,
@@ -142,7 +142,7 @@ export default function FullFeaturedCrudGrid() {
     setRowModesModel(newRowModesModel);
   };
 
-  const columns: GridColumns = [
+  const columns: GridColDef[] = [
     { field: 'name', headerName: 'Name', width: 180, editable: true },
     { field: 'age', headerName: 'Age', type: 'number', editable: true },
     {

diff --git a/docs/data/data-grid/editing/IsCellEditableGrid.tsx b/docs/data/data-grid/editing/IsCellEditableGrid.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { DataGrid, GridColumns, GridRowsProp } from '@mui/x-data-grid';
+import { DataGrid, GridColDef, GridRowsProp } from '@mui/x-data-grid';
 import {
   randomCreatedDate,
   randomTraderName,
@@ -28,7 +28,7 @@ export default function IsCellEditableGrid() {
   );
 }
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'name', headerName: 'Name', width: 180, editable: true },
   { field: 'age', headerName: 'Age', type: 'number', editable: true },
   {

diff --git a/docs/data/data-grid/editing/ServerSidePersistence.tsx b/docs/data/data-grid/editing/ServerSidePersistence.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import {
   DataGrid,
   GridRowModel,
-  GridColumns,
+  GridColDef,
   GridRowId,
   GridRowsProp,
 } from '@mui/x-data-grid';
@@ -84,7 +84,7 @@ export default function ServerSidePersistence() {
   );
 }
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'name', headerName: 'Name', width: 180, editable: true },
   { field: 'age', headerName: 'Age', type: 'number', editable: true },
   {

diff --git a/docs/data/data-grid/editing/StartEditButtonGrid.tsx b/docs/data/data-grid/editing/StartEditButtonGrid.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import {
-  GridColumns,
+  GridColDef,
   GridRowsProp,
   DataGrid,
   GridRowId,
@@ -158,7 +158,7 @@ export default function StartEditButtonGrid() {
   );
 }
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'name', headerName: 'Name', width: 180, editable: true },
   { field: 'age', headerName: 'Age', type: 'number', editable: true },
   {

diff --git a/docs/data/data-grid/editing/ValidateServerNameGrid.tsx b/docs/data/data-grid/editing/ValidateServerNameGrid.tsx
@@ -3,7 +3,7 @@ import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Tooltip, { tooltipClasses, TooltipProps } from '@mui/material/Tooltip';
 import {
-  GridColumns,
+  GridColDef,
   GridRowsProp,
   DataGridPro,
   GridPreProcessEditCellProps,
@@ -67,7 +67,7 @@ export default function ValidateServerNameGrid() {
     return { ...params.props, error: errorMessage };
   };
 
-  const columns: GridColumns = [
+  const columns: GridColDef[] = [
     {
       field: 'name',
       headerName: 'MUI Contributor',

diff --git a/docs/data/data-grid/export/ExcelExport.tsx b/docs/data/data-grid/export/ExcelExport.tsx
@@ -3,7 +3,7 @@ import {
   DataGridPremium,
   GridToolbarContainer,
   GridToolbarExport,
-  GridColumns,
+  GridColDef,
   GridRowsProp,
 } from '@mui/x-data-grid-premium';
 
@@ -100,7 +100,7 @@ const rows: GridRowsProp = [
   },
 ];
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'jobTitle', headerName: 'Job Title', width: 200 },
   {
     field: 'recruitmentDate',

diff --git a/docs/data/data-grid/filtering/CustomSelectionOperator.tsx b/docs/data/data-grid/filtering/CustomSelectionOperator.tsx
@@ -3,10 +3,8 @@ import {
   DataGrid,
   GridRowSelectionModel,
   GridFilterModel,
-  GridFilterItem,
   GridRowId,
   GridFilterOperator,
-  GridStateColDef,
   GridCellParams,
   getGridDefaultColumnTypes,
   DEFAULT_GRID_COL_TYPE_KEY,
@@ -62,9 +60,9 @@ export default function CustomSelectionOperator() {
      * Function that takes an operator and wrap it to skip filtering for selected rows.
      */
     const wrapOperator = (operator: GridFilterOperator) => {
-      const getApplyFilterFn = (
-        filterItem: GridFilterItem,
-        column: GridStateColDef,
+      const getApplyFilterFn: GridFilterOperator['getApplyFilterFn'] = (
+        filterItem,
+        column,
       ) => {
         const innerFilterFn = operator.getApplyFilterFn(filterItem, column);
         if (!innerFilterFn) {

diff --git a/docs/data/data-grid/master-detail/BasicDetailPanels.tsx b/docs/data/data-grid/master-detail/BasicDetailPanels.tsx
@@ -4,7 +4,7 @@ import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
-import { DataGridPro, DataGridProProps, GridColumns } from '@mui/x-data-grid-pro';
+import { DataGridPro, DataGridProProps, GridColDef } from '@mui/x-data-grid-pro';
 import {
   randomCreatedDate,
   randomPrice,
@@ -75,7 +75,7 @@ function DetailPanelContent({ row: rowProp }: { row: Customer }) {
   );
 }
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'id', headerName: 'Order ID' },
   { field: 'customer', headerName: 'Customer', width: 200 },
   { field: 'date', type: 'date', headerName: 'Placed at' },

diff --git a/docs/data/data-grid/master-detail/ControlMasterDetail.tsx b/docs/data/data-grid/master-detail/ControlMasterDetail.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import {
   DataGridPro,
-  GridColumns,
+  GridColDef,
   GridRowsProp,
   GridRowId,
 } from '@mui/x-data-grid-pro';
@@ -50,7 +50,7 @@ export default function ControlMasterDetail() {
   );
 }
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'id', headerName: 'Order ID' },
   { field: 'customer', headerName: 'Customer', width: 200 },
   { field: 'date', type: 'date', headerName: 'Placed at' },

diff --git a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx
@@ -4,7 +4,7 @@ import IconButton from '@mui/material/IconButton';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
   DataGridPro,
-  GridColumns,
+  GridColDef,
   GridRowsProp,
   GridRenderCellParams,
   GridRowParams,
@@ -77,7 +77,7 @@ function CustomDetailPanelToggle(props: Pick<GridRenderCellParams, 'id' | 'value
   );
 }
 
-const columns: GridColumns = [
+const columns: GridColDef[] = [
   { field: 'id', headerName: 'Order ID' },
   { field: 'customer', headerName: 'Customer', width: 200 },
   { field: 'date', type: 'date', headerName: 'Placed at' },