[DataGrid][l10n] Allow to customize sorting label per column (mui#10839)

Co-authored-by: wuls <[email protected]>
DanailH · Oct 31, 2023 · b22e912 · b22e912
1 parent 2eae396
commit b22e912
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
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
@@ -42,22 +42,27 @@ function GridColumnMenuSortItem(props: GridColumnMenuItemProps) {
     return null;
   }
 
+  const getLabel = (key: 'columnMenuSortAsc' | 'columnMenuSortDesc') => {
+    const label = apiRef.current.getLocaleText(key);
+    return typeof label === 'function' ? label(colDef) : label;
+  };
+
   return (
     <React.Fragment>
       {sortingOrder.includes('asc') && sortDirection !== 'asc' ? (
         <MenuItem onClick={onSortMenuItemClick} data-value="asc">
           <ListItemIcon>
             <rootProps.slots.columnMenuSortAscendingIcon fontSize="small" />
           </ListItemIcon>
-          <ListItemText>{apiRef.current.getLocaleText('columnMenuSortAsc')}</ListItemText>
+          <ListItemText>{getLabel('columnMenuSortAsc')}</ListItemText>
         </MenuItem>
       ) : null}
       {sortingOrder.includes('desc') && sortDirection !== 'desc' ? (
         <MenuItem onClick={onSortMenuItemClick} data-value="desc">
           <ListItemIcon>
             <rootProps.slots.columnMenuSortDescendingIcon fontSize="small" />
           </ListItemIcon>
-          <ListItemText>{apiRef.current.getLocaleText('columnMenuSortDesc')}</ListItemText>
+          <ListItemText>{getLabel('columnMenuSortDesc')}</ListItemText>
         </MenuItem>
       ) : null}
       {sortingOrder.includes(null) && sortDirection != null ? (

diff --git a/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts b/packages/grid/x-data-grid/src/models/api/gridLocaleTextApi.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ComponentsPropsList } from '@mui/material/styles';
+import { GridColDef } from '../colDef';
 
 /**
  * Set the types of the texts in the grid.
@@ -112,8 +113,8 @@ export interface GridLocaleText {
   columnMenuFilter: React.ReactNode;
   columnMenuHideColumn: React.ReactNode;
   columnMenuUnsort: React.ReactNode;
-  columnMenuSortAsc: React.ReactNode;
-  columnMenuSortDesc: React.ReactNode;
+  columnMenuSortAsc: React.ReactNode | ((colDef: GridColDef) => React.ReactNode);
+  columnMenuSortDesc: React.ReactNode | ((colDef: GridColDef) => React.ReactNode);
 
   // Column header text
   columnHeaderFiltersTooltipActive: (count: number) => React.ReactNode;