[DataGrid] Changed columns[] param to field[] (mui#11245)

DanailH · Dec 1, 2023 · 3e346d5 · 3e346d5
1 parent a48961b
commit 3e346d5
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 10 deletions.
diff --git a/docs/pages/x/api/data-grid/grid-api.md b/docs/pages/x/api/data-grid/grid-api.md
@@ -124,7 +124,7 @@ import { GridApi } from '@mui/x-data-grid';
 | <span class="prop-name">showFilterPanel</span>                                                                                                                | <span class="prop-type">(targetColumnField?: string, panelId?: string, labelId?: string) =&gt; void</span>                                                                                               | Shows the filter panel. If `targetColumnField` is given, a filter for this field is also added.                                                                                                                                 |
 | <span class="prop-name">showHeaderFilterMenu</span>                                                                                                           | <span class="prop-type">(field: GridColDef['field']) =&gt; void</span>                                                                                                                                   | Opens the header filter menu for the given field.                                                                                                                                                                               |
 | <span class="prop-name">showPreferences</span>                                                                                                                | <span class="prop-type">(newValue: GridPreferencePanelsValue, panelId?: string, labelId?: string) =&gt; void</span>                                                                                      | Displays the preferences panel. The `newValue` argument controls the content of the panel.                                                                                                                                      |
-| <span class="prop-name">sortColumn</span>                                                                                                                     | <span class="prop-type">(column: GridColDef, direction?: GridSortDirection, allowMultipleSorting?: boolean) =&gt; void</span>                                                                            | Sorts a column.                                                                                                                                                                                                                 |
+| <span class="prop-name">sortColumn</span>                                                                                                                     | <span class="prop-type">(field: GridColDef['field'], direction?: GridSortDirection, allowMultipleSorting?: boolean) =&gt; void</span>                                                                    | Sorts a column.                                                                                                                                                                                                                 |
 | <span class="prop-name">startCellEditMode</span>                                                                                                              | <span class="prop-type">(params: GridStartCellEditModeParams) =&gt; void</span>                                                                                                                          | Puts the cell corresponding to the given row id and field into edit mode.                                                                                                                                                       |
 | <span class="prop-name">startHeaderFilterEditMode</span>                                                                                                      | <span class="prop-type">(field: GridColDef['field']) =&gt; void</span>                                                                                                                                   | Puts the cell corresponding to the given row id and field into edit mode.                                                                                                                                                       |
 | <span class="prop-name">startRowEditMode</span>                                                                                                               | <span class="prop-type">(params: GridStartRowEditModeParams) =&gt; void</span>                                                                                                                           | Puts the row corresponding to the given id into edit mode.                                                                                                                                                                      |

diff --git a/docs/pages/x/api/data-grid/grid-sort-api.json b/docs/pages/x/api/data-grid/grid-sort-api.json
@@ -35,7 +35,7 @@
     {
       "name": "sortColumn",
       "description": "Sorts a column.",
-      "type": "(column: GridColDef, direction?: GridSortDirection, allowMultipleSorting?: boolean) => void"
+      "type": "(field: GridColDef['field'], direction?: GridSortDirection, allowMultipleSorting?: boolean) => void"
     }
   ]
 }
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
@@ -31,7 +31,7 @@ function GridColumnMenuSortItem(props: GridColumnMenuItemProps) {
       onClick(event);
       const direction = event.currentTarget.getAttribute('data-value') || null;
       apiRef.current.sortColumn(
-        colDef!,
+        colDef!.field,
         (direction === sortDirection ? null : direction) as GridSortDirection,
       );
     },

diff --git a/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts b/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts
@@ -186,7 +186,8 @@ export const useGridSorting = (
   );
 
   const sortColumn = React.useCallback<GridSortApi['sortColumn']>(
-    (column, direction, allowMultipleSorting) => {
+    (field, direction, allowMultipleSorting) => {
+      const column = apiRef.current.getColumn(field);
       if (!column.sortable) {
         return;
       }
@@ -307,18 +308,18 @@ export const useGridSorting = (
    * EVENTS
    */
   const handleColumnHeaderClick = React.useCallback<GridEventListener<'columnHeaderClick'>>(
-    ({ colDef }, event) => {
+    ({ field }, event) => {
       const allowMultipleSorting = event.shiftKey || event.metaKey || event.ctrlKey;
-      sortColumn(colDef, undefined, allowMultipleSorting);
+      sortColumn(field, undefined, allowMultipleSorting);
     },
     [sortColumn],
   );
 
   const handleColumnHeaderKeyDown = React.useCallback<GridEventListener<'columnHeaderKeyDown'>>(
-    ({ colDef }, event) => {
+    ({ field }, event) => {
       // Ctrl + Enter opens the column menu
       if (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
-        sortColumn(colDef, undefined, event.shiftKey);
+        sortColumn(field, undefined, event.shiftKey);
       }
     },
     [sortColumn],

diff --git a/packages/grid/x-data-grid/src/models/api/gridSortApi.ts b/packages/grid/x-data-grid/src/models/api/gridSortApi.ts
@@ -22,12 +22,12 @@ export interface GridSortApi {
   setSortModel: (model: GridSortModel) => void;
   /**
    * Sorts a column.
-   * @param {GridColDef} column The [[GridColDef]] of the column to be sorted.
+   * @param {GridColDef['field']} field The field identifier of the column to be sorted.
    * @param {GridSortDirection} direction The direction to be sorted. By default, the next in the `sortingOrder` prop.
    * @param {boolean} allowMultipleSorting Whether to keep the existing [[GridSortItem]]. Default is `false`.
    */
   sortColumn: (
-    column: GridColDef,
+    field: GridColDef['field'],
     direction?: GridSortDirection,
     allowMultipleSorting?: boolean,
   ) => void;