[DataGrid] Allow passing readonly arrays to columns and `sortingOrd…

…er` props (#10686)
mui · Oct 19, 2023 · 391351c · 391351c
1 parent 7d2ecd9
commit 391351c
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 8 deletions.
diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx
@@ -192,7 +192,7 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
     />
   );
 
-  const sortingOrder: GridSortDirection[] = colDef.sortingOrder ?? rootProps.sortingOrder;
+  const sortingOrder: readonly GridSortDirection[] = colDef.sortingOrder ?? rootProps.sortingOrder;
 
   const columnTitleIconButtons = (
     <React.Fragment>

diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx
@@ -13,7 +13,7 @@ import { GridIconButtonContainer } from './GridIconButtonContainer';
 export interface GridColumnHeaderSortIconProps {
   direction: GridSortDirection;
   index: number | undefined;
-  sortingOrder: GridSortDirection[];
+  sortingOrder: readonly GridSortDirection[];
 }
 
 type OwnerState = GridColumnHeaderSortIconProps & {
@@ -34,7 +34,7 @@ function getIcon(
   icons: UncapitalizedGridSlotsComponent,
   direction: GridSortDirection,
   className: string,
-  sortingOrder: GridSortDirection[],
+  sortingOrder: readonly GridSortDirection[],
 ) {
   let Icon;
   const iconProps: any = {};

diff --git a/...ages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx b/...ages/grid/x-data-grid/src/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.tsx
@@ -24,7 +24,7 @@ function GridColumnMenuSortItem(props: GridColumnMenuItemProps) {
     return sortItem?.sort;
   }, [colDef, sortModel]);
 
-  const sortingOrder: GridSortDirection[] = colDef.sortingOrder ?? rootProps.sortingOrder;
+  const sortingOrder: readonly GridSortDirection[] = colDef.sortingOrder ?? rootProps.sortingOrder;
 
   const onSortMenuItemClick = React.useCallback(
     (event: React.MouseEvent<HTMLElement>) => {

diff --git a/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts b/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts
@@ -292,7 +292,7 @@ export const createColumnsState = ({
   columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
   keepOnlyColumnsToUpsert = false,
 }: {
-  columnsToUpsert: GridColDef[];
+  columnsToUpsert: readonly GridColDef[];
   initialState: GridColumnsInitialState | undefined;
   columnTypes: GridColumnTypesRecord;
   columnVisibilityModel?: GridColumnVisibilityModel;

diff --git a/packages/grid/x-data-grid/src/hooks/features/sorting/gridSortingUtils.ts b/packages/grid/x-data-grid/src/hooks/features/sorting/gridSortingUtils.ts
@@ -146,7 +146,7 @@ export const buildAggregatedSortingApplier = (
 };
 
 export const getNextGridSortDirection = (
-  sortingOrder: GridSortDirection[],
+  sortingOrder: readonly GridSortDirection[],
   current?: GridSortDirection,
 ) => {
   const currentIdx = sortingOrder.indexOf(current);

diff --git a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts
@@ -325,7 +325,7 @@ export interface DataGridPropsWithDefaultValues {
    * The order of the sorting sequence.
    * @default ['asc', 'desc', null]
    */
-  sortingOrder: GridSortDirection[];
+  sortingOrder: readonly GridSortDirection[];
   /**
    * Sorting can be processed on the server or client-side.
    * Set it to 'client' if you would like to handle sorting on the client-side.
@@ -705,7 +705,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
   /**
    * Set of columns of type [[GridColDef[]]].
    */
-  columns: GridColDef<R>[];
+  columns: readonly GridColDef<R>[];
   /**
    * Return the id of a given [[GridRowModel]].
    */

diff --git a/packages/grid/x-data-grid/src/tests/columns.spec.tsx b/packages/grid/x-data-grid/src/tests/columns.spec.tsx
@@ -149,3 +149,10 @@ function CellParamsFormattedValue() {
     />
   );
 }
+
+const constBrandColumns = [{ field: 'brand' }] as const;
+const constEmptyRows = [] as const;
+
+function ConstProps() {
+  return <DataGrid rows={constEmptyRows} columns={constBrandColumns} />;
+}