@opencorestack/opengridx 3.8.1 → 3.9.1

package/lib/components/DataGrid/GridErrorOverlay.tsx

@@ -1,4 +1,5 @@
 import { getDataSourceErrorMessage } from '../../utils/dataSource';
+import { useGridLocale } from './gridLocaleContext';
 
 interface GridErrorOverlayProps {
     error: unknown;
@@ -7,6 +8,7 @@ interface GridErrorOverlayProps {
 }
 
 export function GridErrorOverlay({ error, onRetry }: GridErrorOverlayProps) {
+    const locale = useGridLocale();
     if (!error) return null;
     const message = getDataSourceErrorMessage(error);
     return (
@@ -17,7 +19,7 @@ export function GridErrorOverlay({ error, onRetry }: GridErrorOverlayProps) {
                 <line x1="12" y1="16" x2="12.01" y2="16" />
             </svg>
             <div className="ogx-error-overlay__title">
-                Oops! Something went wrong
+                {locale.errorOverlayTitle}
             </div>
             <div className="ogx-error-overlay__message">
                 {message}
@@ -28,7 +30,7 @@ export function GridErrorOverlay({ error, onRetry }: GridErrorOverlayProps) {
                     onClick={onRetry}
                     className="ogx-button ogx-button--primary"
                 >
-                    Retry
+                    {locale.errorOverlayRetry}
                 </button>
             )}
         </div>

package/lib/components/DataGrid/GridListView.tsx

@@ -4,6 +4,7 @@ import { Pagination } from '../Pagination/Pagination';
 import { ListViewRow } from '../ListView/ListViewRow';
 import { getPageCount, normalizePageSize } from '../../utils/pagination';
 import { useRowsScrollEndLatch } from '../../hooks/core/useRowsScrollEndLatch';
+import { useGridLocale } from './gridLocaleContext';
 import type {
     GridColDef,
     GridRowModel,
@@ -110,6 +111,7 @@ export function GridListView<R extends GridRowModel>({
     selectable = false,
     onToggleExpansion,
 }: GridListViewProps<R>) {
+    const locale = useGridLocale();
     const PaginationComponent = paginationSlot || Pagination;
 
     // Roving tab stop: the list is one Tab stop, on the last focused row (the first row until then,
@@ -192,15 +194,15 @@ export function GridListView<R extends GridRowModel>({
         <div
             className="ogx-list-view"
             role="grid"
-            aria-label={ariaLabel || 'Data grid list view'}
+            aria-label={ariaLabel || locale.listViewLabel}
             aria-rowcount={itemCount}
             aria-multiselectable={multiselectable}
         >
             <div className="ogx-list-view__toolbar">
                 <span>
-                    {itemCount} {itemCount === 1 ? 'item' : 'items'}
-                    {pagination ? ` · page ${currentPage + 1} of ${pageCount}` : ''}
-                    {selectedRowIds.size > 0 ? ` · ${selectedRowIds.size} selected` : ''}
+                    {locale.listViewItemCount(itemCount)}
+                    {pagination ? ` · ${locale.listViewPage(currentPage + 1, pageCount)}` : ''}
+                    {selectedRowIds.size > 0 ? ` · ${locale.listViewSelectedCount(selectedRowIds.size)}` : ''}
                 </span>
             </div>
 
@@ -209,7 +211,7 @@ export function GridListView<R extends GridRowModel>({
                 {allRenderableRows.length === 0 && loading ? (
                     // The grid's live region announces loading; the list shows no "No Data" meanwhile.
                     <div className="ogx-list-view__loading">
-                        {loadingOverlay ?? <div className="ogx__loading-bar" role="progressbar" aria-label="Loading data" />}
+                        {loadingOverlay ?? <div className="ogx__loading-bar" role="progressbar" aria-label={locale.loadingLabel} />}
                     </div>
                 ) : allRenderableRows.length === 0 && noRowsOverlay ? (
                     <div className="ogx-list-view__empty">{noRowsOverlay}</div>

package/lib/components/DataGrid/GridLiveRegion.tsx

@@ -1,5 +1,6 @@
 import { getDataSourceErrorMessage } from '../../utils/dataSource';
 import type { GridFilterModel } from '../../types';
+import { useGridLocale } from './gridLocaleContext';
 
 interface GridLiveRegionProps {
     loading: boolean;
@@ -22,15 +23,16 @@ interface GridLiveRegionProps {
  * the size of the selected cell range; and the AI assistant's status.
  */
 export function GridLiveRegion({ loading, error, noRowsLabel, filteredRowCount, dataRowCount, filterModel, cellSelectionAnnouncement, aiAssistantAnnouncement }: GridLiveRegionProps) {
+    const locale = useGridLocale();
     return (
         <div className="ogx-aria-live-status" role="status" aria-live="polite">
-            {loading ? 'Loading data...' : ''}
-            {error ? `Error: ${getDataSourceErrorMessage(error)}` : ''}
+            {loading ? locale.liveRegionLoading : ''}
+            {error ? locale.liveRegionError(getDataSourceErrorMessage(error)) : ''}
             {!loading && !error && (
                 filteredRowCount === 0
                     ? noRowsLabel
                     : (filterModel && ((filterModel.quickFilterValues?.length || 0) > 0 || (filterModel.items?.length || 0) > 0))
-                        ? `${dataRowCount} ${dataRowCount === 1 ? 'row' : 'rows'} found`
+                        ? locale.liveRegionRowsFound(dataRowCount)
                         : ''
             )}
             {cellSelectionAnnouncement ? <span className="ogx-aria-live-status__cells"> {cellSelectionAnnouncement}</span> : null}

package/lib/components/DataGrid/GridLoadingOverlay.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useGridLocale } from './gridLocaleContext';
 
 interface GridLoadingOverlayProps {
     /** `slots.loadingOverlay`, rendered centred over the rows on a dimmed backdrop. */
@@ -12,6 +13,7 @@ interface GridLoadingOverlayProps {
  * or the loading overlay in place of the rows, so this is not rendered.
  */
 export function GridLoadingOverlay({ overlay }: GridLoadingOverlayProps) {
+    const locale = useGridLocale();
     if (overlay) {
         return (
             <div className="ogx__loading-overlay ogx__loading-overlay--over-rows ogx__loading-overlay--custom">
@@ -21,7 +23,7 @@ export function GridLoadingOverlay({ overlay }: GridLoadingOverlayProps) {
     }
     return (
         <div className="ogx__loading-overlay ogx__loading-overlay--over-rows">
-            <div className="ogx__loading-bar" role="progressbar" aria-label="Loading data" />
+            <div className="ogx__loading-bar" role="progressbar" aria-label={locale.loadingLabel} />
         </div>
     );
 }

package/lib/components/DataGrid/GridPinnedRows.tsx

@@ -154,7 +154,7 @@ export function GridPinnedRows<R extends GridRowModel>({
                     rowSpanningCaches={rowSpanningCaches}
                     rowHeight={rowHeight}
                     rowMeta={rowMetaMap.get(id)}
-                    editingCell={editingHandlers?.editingCell}
+                    editingCell={editingHandlers?.editingCell?.id === id ? editingHandlers.editingCell : null}
                     onEditStart={editingHandlers?.startCellEdit}
                     onEditStop={editingHandlers?.stopCellEdit}
                     onEditCellValueChange={editingHandlers?.setEditCellValue}

package/lib/components/DataGrid/GridRoot.tsx

@@ -1,4 +1,7 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { GridLocaleContext } from './gridLocaleContext';
+import { resolveGridLocale } from '../../utils/gridLocale';
+import { useShallowStableValue } from '../../hooks/core/useShallowStableValue';
 import { GridToolbarHostContext } from '../../hooks/core/gridToolbarHostContext';
 import { GridToolbarSlot } from './GridToolbarSlot';
 import { GridAiAssistantArea } from '../AiAssistant/GridAiAssistantArea';
@@ -95,8 +98,11 @@ export function GridRoot<R extends GridRowModel>(props: GridRootProps<R>) {
     // body shows skeletons or the loading overlay instead, and infinite scroll appends skeleton rows.
     const showLoadingOverRows = effectiveLoading && allRenderableRows.length > 0 && paginationMode !== 'infinite';
     const ToolbarSlot = slots?.toolbar;
+    const stableLocaleText = useShallowStableValue(localeText);
+    const locale = useMemo(() => resolveGridLocale(stableLocaleText), [stableLocaleText]);
 
     return (
+        <GridLocaleContext.Provider value={locale}>
         <div
             ref={containerRef}
             className={['ogx', className, autoHeight && 'ogx--auto-height', !autoHeight && height === undefined && style?.height === undefined && 'ogx--fill', hasRowSpanning && 'ogx--row-spanning', listView && 'ogx--list-view'].filter(Boolean).join(' ')}
@@ -235,5 +241,6 @@ export function GridRoot<R extends GridRowModel>(props: GridRootProps<R>) {
 
             <GridErrorOverlay error={dataSourceError} onRetry={onRetry} />
         </div>
+        </GridLocaleContext.Provider>
     );
 }

package/lib/components/DataGrid/GridStandaloneColumnPanel.tsx

@@ -4,6 +4,7 @@ import { ColumnVisibilityPanel } from '../ColumnVisibilityPanel/ColumnVisibility
 import type { GridColDef, GridRowModel, GridColumnGroupingModel } from '../../types';
 import { canReorderWithinColumnGroups } from '../../utils/columnGroups';
 import { getViewportWidth } from '../../utils/viewport';
+import { useGridLocale } from './gridLocaleContext';
 
 export interface GridStandaloneColumnPanelProps<R extends GridRowModel> {
     isOpen: boolean;
@@ -42,6 +43,7 @@ export function GridStandaloneColumnPanel<R extends GridRowModel>({
     onColumnOrderReset,
     columnGroupingModel,
 }: GridStandaloneColumnPanelProps<R>) {
+    const locale = useGridLocale();
     // Resolved from the DOM after mount, never during render, so the grid renders on the server.
     const [placement, setPlacement] = useState<PanelPlacement | null>(null);
 
@@ -97,7 +99,7 @@ export function GridStandaloneColumnPanel<R extends GridRowModel>({
                     zIndex: 1,
                     boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
                 }}
-                aria-label="Close"
+                aria-label={locale.columnsPanelClose}
             >×</button>
             <ColumnVisibilityPanel<R>
                 columns={columns}

package/lib/components/DataGrid/GridViewport.tsx

@@ -4,6 +4,7 @@ import { GridPinnedRows, type GridPinnedRowsProps } from './GridPinnedRows';
 import { GridVirtualRows, type GridVirtualRowsProps } from './GridVirtualRows';
 import { GridEmptyState } from './GridEmptyState';
 import { GridAggregationFooter } from './GridAggregationFooter';
+import { useGridLocale } from './gridLocaleContext';
 import type { GridAggregationModel, GridAggregationResult, GridColDef, GridColumnPinning, GridRowId, GridRowModel } from '../../types';
 import type { GridAriaRowLayout } from '../../utils/aria';
 import type { UseGridCellSelectionReturn } from '../../hooks/core/useGridCellSelection';
@@ -120,6 +121,7 @@ export interface GridViewportProps<R extends GridRowModel> {
  * empty state, the virtual centre rows and the aggregation footer.
  */
 export function GridViewport<R extends GridRowModel>(props: GridViewportProps<R>) {
+    const locale = useGridLocale();
     const {
         setViewportElement, handleScroll, ariaLabel, ariaRows, navigationColumnCount, rowSelectionEnabled,
         disableMultipleRowSelection, cellSelection, effectiveLoading, viewportTabIndex, setKeyboardMode,
@@ -165,7 +167,7 @@ export function GridViewport<R extends GridRowModel>(props: GridViewportProps<R>
             className="ogx__viewport"
             onScroll={handleScroll}
             role="grid"
-            aria-label={ariaLabel || 'Data grid'}
+            aria-label={ariaLabel || locale.gridLabel}
             aria-rowcount={ariaRows.rowCount}
             aria-colcount={navigationColumnCount}
             aria-multiselectable={(rowSelectionEnabled && !disableMultipleRowSelection) || cellSelection.enabled}

package/lib/components/DataGrid/GridVirtualRows.tsx

@@ -208,7 +208,7 @@ export function GridVirtualRows<R extends GridRowModel>({
                             onDrop={rowReorderHandlers.onDrop}
                             isDragging={rowReorderHandlers.draggedRowId === id}
                             isDragOver={rowReorderHandlers.dragOverRowId === id}
-                            editingCell={editingHandlers.editingCell}
+                            editingCell={editingHandlers.editingCell?.id === id ? editingHandlers.editingCell : null}
                             onEditStart={editingHandlers.startCellEdit}
                             onEditStop={editingHandlers.stopCellEdit}
                             onEditCellValueChange={editingHandlers.setEditCellValue}

package/lib/components/DataGrid/gridLocaleContext.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+import { resolveGridLocale, type ResolvedGridLocale } from '../../utils/gridLocale';
+
+/**
+ * The grid's resolved `localeText`, provided once by `GridRoot`. Components rendered outside a grid
+ * (the exported `ColumnVisibilityPanel`, `GridToolbar`, `FilterPanel`, …) get the English default.
+ */
+export const GridLocaleContext = createContext<ResolvedGridLocale>(resolveGridLocale(undefined));
+
+/** The strings of the enclosing grid, English outside one. */
+export function useGridLocale(): ResolvedGridLocale {
+    return useContext(GridLocaleContext);
+}

package/lib/components/FilterPanel/FilterPanel.tsx

@@ -9,6 +9,7 @@ import type {
 import { filterValueToInputText, getOperatorsForType, NO_VALUE_OPERATORS } from '../../utils/filtering';
 import { filterValueFromInputText, getFilterValueOptions, isSameFilterValue, matchesFilterValueOption } from '../../utils/filtering/filterInput';
 import { Input } from '../ui/Input';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export interface FilterPanelProps {
     filterModel: GridFilterModel;
@@ -69,6 +70,7 @@ const FilterRow: React.FC<{
     onChange: (item: GridFilterItem | null) => void;
 }> = ({ col, item, resetToken, onChange }) => {
     const filterId = useId();
+    const locale = useGridLocale();
     // Memoized so React Compiler treats the list as frozen and can keep the callbacks below memoized.
     const typeOperators = useMemo(() => getOperatorsForType(col.type), [col.type]);
     const defaultOperator = typeOperators[0];
@@ -153,7 +155,7 @@ const FilterRow: React.FC<{
     const showValue = !NO_VALUE_OPERATORS.has(currentOperator);
     const valueOptions = getFilterValueOptions(col);
     const valueClassName = `ogx-filter__value-input${isActive ? ' ogx-filter__value-input--active' : ''}`;
-    const valueLabel = `Filter value for ${label}`;
+    const valueLabel = locale.filterPanelValueLabel(label);
 
     let valueControl: React.ReactNode = null;
     if (showValue && col.type === 'boolean') {
@@ -169,9 +171,9 @@ const FilterRow: React.FC<{
                 }}
                 aria-label={valueLabel}
             >
-                <option value="">Any</option>
-                <option value="true">true</option>
-                <option value="false">false</option>
+                <option value="">{locale.filterPanelAny}</option>
+                <option value="true">{locale.filterPanelTrue}</option>
+                <option value="false">{locale.filterPanelFalse}</option>
             </select>
         );
     } else if (showValue && col.type === 'singleSelect' && valueOptions.length > 0 && currentOperator === 'isAnyOf') {
@@ -207,7 +209,7 @@ const FilterRow: React.FC<{
                 }}
                 aria-label={valueLabel}
             >
-                <option value="">Any</option>
+                <option value="">{locale.filterPanelAny}</option>
                 {valueOptions.map(o => <option key={o.key} value={o.key}>{o.label}</option>)}
             </select>
         );
@@ -220,7 +222,7 @@ const FilterRow: React.FC<{
                 type={col.type === 'date' ? 'date' : 'text'}
                 value={draft ?? toInputText(item?.value, col)}
                 onChange={(e) => setDraft(e.target.value)}
-                placeholder={col.type === 'number' ? 'Number…' : 'Value…'}
+                placeholder={col.type === 'number' ? locale.filterPanelNumberPlaceholder : locale.filterPanelValuePlaceholder}
                 aria-label={valueLabel}
             />
         );
@@ -239,10 +241,10 @@ const FilterRow: React.FC<{
                     className={`ogx-filter__op-select${isActive ? ' ogx-filter__op-select--active' : ''}`}
                     value={currentOperator}
                     onChange={(e) => handleOperatorChange(e.target.value as GridFilterOperator)}
-                    aria-label={`Filter operator for ${label}`}
+                    aria-label={locale.filterPanelOperatorLabel(label)}
                 >
                     {operators.map(op => (
-                        <option key={op} value={op}>{op}</option>
+                        <option key={op} value={op}>{locale.filterPanelOperator(op)}</option>
                     ))}
                 </select>
 
@@ -254,8 +256,8 @@ const FilterRow: React.FC<{
                         type="button"
                         className="ogx-filter__row-clear"
                         onClick={handleClear}
-                        aria-label={`Clear filter for ${label}`}
-                        title="Clear"
+                        aria-label={locale.filterPanelClearLabel(label)}
+                        title={locale.filterPanelClearTooltip}
                     >
                         ×
                     </button>
@@ -268,6 +270,7 @@ const FilterRow: React.FC<{
 // ── Root panel ────────────────────────────────────────────────────────────────
 
 export const FilterPanel: React.FC<FilterPanelProps> = ({ filterModel, columns, onFilterModelChange }) => {
+    const locale = useGridLocale();
     const items = useMemo<FilterEntry[]>(() => filterModel.items ?? [], [filterModel.items]);
     const logicOperator = filterModel.logicOperator ?? 'and';
 
@@ -313,14 +316,14 @@ export const FilterPanel: React.FC<FilterPanelProps> = ({ filterModel, columns,
         <>
             {items.length > 1 && (
                 <div className="ogx-filter__logic-bar">
-                    <span className="ogx-filter__logic-label">Match:</span>
+                    <span className="ogx-filter__logic-label">{locale.filterPanelMatch}</span>
                     <button
                         type="button"
                         className={`ogx-filter__logic-pill${logicOperator === 'and' ? ' ogx-filter__logic-pill--active' : ''}`}
                         onClick={() => handleLogicChange('and')}
                         aria-pressed={logicOperator === 'and'}
                     >
-                        ALL (AND)
+                        {locale.filterPanelAnd}
                     </button>
                     <button
                         type="button"
@@ -328,21 +331,19 @@ export const FilterPanel: React.FC<FilterPanelProps> = ({ filterModel, columns,
                         onClick={() => handleLogicChange('or')}
                         aria-pressed={logicOperator === 'or'}
                     >
-                        ANY (OR)
+                        {locale.filterPanelOr}
                     </button>
                 </div>
             )}
 
             {notShownCount > 0 && (
                 <div className="ogx-filter__hidden-note" role="note">
-                    {notShownCount === 1
-                        ? '1 more condition (a filter group or a second condition on a column) is applied and not shown here.'
-                        : `${notShownCount} more conditions (filter groups or further conditions on a column) are applied and not shown here.`}
+                    {locale.filterPanelHiddenConditions(notShownCount)}
                 </div>
             )}
 
             {filterableColumns.length === 0 ? (
-                <div className="ogx-filter__empty">No filterable columns.</div>
+                <div className="ogx-filter__empty">{locale.filterPanelNoColumns}</div>
             ) : (
                 filterableColumns.map(col => (
                     <FilterRow

package/lib/components/Header/ColumnMenu.css

@@ -14,7 +14,7 @@
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    color: var(--ogx-color-gray-400, #94a3b8);
+    color: var(--ogx-overlay-section-label-text, var(--ogx-color-gray-400, #94a3b8));
     user-select: none;
 }
 .ogx-menu-item {
@@ -49,21 +49,21 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--ogx-overlay-item-selected-text, #1976d2);
+    color: var(--ogx-overlay-item-indicator, var(--ogx-overlay-item-selected-text, #1976d2));
 }
 .ogx-menu-item__icon {
     flex: 0 0 16px;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--ogx-color-gray-400, #94a3b8);
+    color: var(--ogx-overlay-icon, var(--ogx-color-gray-400, #94a3b8));
     transition: color 0.1s;
 }
 .ogx-menu-item--active .ogx-menu-item__icon {
-    color: var(--ogx-color-primary, #1976d2);
+    color: var(--ogx-overlay-item-selected-icon, var(--ogx-color-primary, #1976d2));
 }
 .ogx-menu-divider {
     height: 1px;
-    background: var(--ogx-overlay-border, #e2e8f0);
+    background: var(--ogx-overlay-divider, var(--ogx-overlay-border, #e2e8f0));
     margin: 4px 0;
 }

package/lib/components/Header/ColumnMenu.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import type { GridColDef, GridRowModel, GridSortDirection, GridColumnPinning } from '../../types';
 import { getViewportWidth, getViewportHeight } from '../../utils/viewport';
 import { isRtl } from '../../utils/direction';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 
 interface ColumnMenuProps {
@@ -123,6 +124,7 @@ const menuItemsOf = (menu: HTMLElement | null): HTMLElement[] =>
 
 export function ColumnMenu({ colDef, sortModel, onSort, onHide, onPin, pinnedColumns, onManageColumns, onClose, anchorEl }: ColumnMenuProps) {
     const menuRef = useRef<HTMLDivElement>(null);
+    const locale = useGridLocale();
 
     // Closes the menu; when it was left from the keyboard or by choosing an item, focus goes back
     // to the header cell that owns it (WAI-ARIA menu button pattern).
@@ -234,7 +236,7 @@ export function ColumnMenu({ colDef, sortModel, onSort, onHide, onPin, pinnedCol
     const colLabel = colDef.headerName || colDef.field;
 
     return ReactDOM.createPortal(
-        <div ref={menuRef} className="ogx-column-menu" style={style} role="menu" aria-label={`Column options for ${colLabel}`} onKeyDown={handleMenuKeyDown}>
+        <div ref={menuRef} className="ogx-column-menu" style={style} role="menu" aria-label={locale.columnMenuLabel(colLabel)} onKeyDown={handleMenuKeyDown}>
 
             { }
             {onSort && colDef.sortable !== false && (
@@ -243,19 +245,19 @@ export function ColumnMenu({ colDef, sortModel, onSort, onHide, onPin, pinnedCol
                         onClick={() => handleSort('asc')} role="menuitemradio" aria-checked={currentSort === 'asc'}>
                         <span className="ogx-menu-item__indicator" aria-hidden="true">{currentSort === 'asc' ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
                         <span className="ogx-menu-item__icon" aria-hidden="true"><AscIcon /></span>
-                        Sort Ascending
+                        {locale.columnMenuSortAscending}
                     </button>
                     <button type="button" className={`ogx-menu-item${currentSort === 'desc' ? ' ogx-menu-item--active' : ''}`}
                         onClick={() => handleSort('desc')} role="menuitemradio" aria-checked={currentSort === 'desc'}>
                         <span className="ogx-menu-item__indicator" aria-hidden="true">{currentSort === 'desc' ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
                         <span className="ogx-menu-item__icon" aria-hidden="true"><DescIcon /></span>
-                        Sort Descending
+                        {locale.columnMenuSortDescending}
                     </button>
                     <button type="button" className={`ogx-menu-item${isUnsorted ? ' ogx-menu-item--active' : ''}`}
                         onClick={() => handleSort(null)} role="menuitemradio" aria-checked={isUnsorted}>
                         <span className="ogx-menu-item__indicator" aria-hidden="true">{isUnsorted ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
                         <span className="ogx-menu-item__icon" aria-hidden="true"><UnsortIcon /></span>
-                        Unsort
+                        {locale.columnMenuUnsort}
                     </button>
                     <div className="ogx-menu-divider" />
                 </>
@@ -264,24 +266,24 @@ export function ColumnMenu({ colDef, sortModel, onSort, onHide, onPin, pinnedCol
             { }
             {canPin && (
                 <>
-                    <div className="ogx-menu-section-label" aria-hidden="true">Pin column</div>
+                    <div className="ogx-menu-section-label" aria-hidden="true">{locale.columnMenuPinColumn}</div>
                     <button type="button" className={`ogx-menu-item${isPinnedScreenLeft ? ' ogx-menu-item--active' : ''}`}
-                        onClick={() => handlePin(screenLeftSide)} role="menuitemradio" aria-checked={isPinnedScreenLeft} aria-label="Pin to left">
+                        onClick={() => handlePin(screenLeftSide)} role="menuitemradio" aria-checked={isPinnedScreenLeft} aria-label={locale.columnMenuPinLeftLabel}>
                         <span className="ogx-menu-item__indicator" aria-hidden="true">{isPinnedScreenLeft ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
                         <span className="ogx-menu-item__icon" aria-hidden="true"><PinLeftIcon /></span>
-                        Pin to Left
+                        {locale.columnMenuPinLeft}
                     </button>
                     <button type="button" className={`ogx-menu-item${isPinnedScreenRight ? ' ogx-menu-item--active' : ''}`}
-                        onClick={() => handlePin(screenRightSide)} role="menuitemradio" aria-checked={isPinnedScreenRight} aria-label="Pin to right">
+                        onClick={() => handlePin(screenRightSide)} role="menuitemradio" aria-checked={isPinnedScreenRight} aria-label={locale.columnMenuPinRightLabel}>
                         <span className="ogx-menu-item__indicator" aria-hidden="true">{isPinnedScreenRight ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
                         <span className="ogx-menu-item__icon" aria-hidden="true"><PinRightIcon /></span>
-                        Pin to Right
+                        {locale.columnMenuPinRight}
                     </button>
                     <button type="button" className={`ogx-menu-item${isUnpinned ? ' ogx-menu-item--active' : ''}`}
-                        onClick={() => handlePin(null)} role="menuitemradio" aria-checked={isUnpinned} aria-label="Unpin column">
+                        onClick={() => handlePin(null)} role="menuitemradio" aria-checked={isUnpinned} aria-label={locale.columnMenuUnpinLabel}>
                         <span className="ogx-menu-item__indicator" aria-hidden="true">{isUnpinned ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
                         <span className="ogx-menu-item__icon" aria-hidden="true"><UnpinIcon /></span>
-                        Unpin
+                        {locale.columnMenuUnpin}
                     </button>
                     <div className="ogx-menu-divider" />
                 </>
@@ -289,19 +291,19 @@ export function ColumnMenu({ colDef, sortModel, onSort, onHide, onPin, pinnedCol
 
             {canHide && (
                 <>
-                    <button type="button" className="ogx-menu-item" onClick={handleHide} role="menuitem" aria-label={`Hide ${colLabel} column`}>
+                    <button type="button" className="ogx-menu-item" onClick={handleHide} role="menuitem" aria-label={locale.columnMenuHideColumnLabel(colLabel)}>
                         <span className="ogx-menu-item__indicator" aria-hidden="true" />
                         <span className="ogx-menu-item__icon" aria-hidden="true"><HideIcon /></span>
-                        Hide Column
+                        {locale.columnMenuHideColumn}
                     </button>
                     <div className="ogx-menu-divider" />
                 </>
             )}
 
-            <button type="button" className="ogx-menu-item" onClick={() => { onManageColumns?.(); close(false); }} role="menuitem" aria-label="Manage all columns">
+            <button type="button" className="ogx-menu-item" onClick={() => { onManageColumns?.(); close(false); }} role="menuitem" aria-label={locale.columnMenuManageColumnsLabel}>
                 <span className="ogx-menu-item__indicator" aria-hidden="true" />
                 <span className="ogx-menu-item__icon" aria-hidden="true"><ManageColumnsIcon /></span>
-                Manage columns
+                {locale.columnMenuManageColumns}
             </button>
         </div>,
         (anchorEl?.closest('.ogx-theme-provider') || document.body)

package/lib/components/Header/Header.tsx

@@ -11,6 +11,7 @@ import { getHeaderLineClamp, shouldWrapHeaderText } from '../../utils/headerWrap
 import { getHeaderColumnStyle } from './headerColumnStyle';
 import { HeaderFilterRow } from '../HeaderFilter/HeaderFilterRow';
 import { isRtl, logicalArrowKey } from '../../utils/direction';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 
 function MenuIcon() {
@@ -93,6 +94,7 @@ export interface HeaderProps<R extends GridRowModel = GridRowModel> {
 }
 
 export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps<R>) {
+    const locale = useGridLocale();
     const {
         columns,
         allColumns,
@@ -348,11 +350,11 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                     <div
                         className={`ogx__header-cell ogx__header-cell--pinned ogx__header-cell--pinned-left ${isHeaderFocused('__reorder_col__') ? 'ogx__header-cell--focused' : ''}`}
                         role="columnheader"
-                        aria-label="Row reorder handle"
+                        aria-label={locale.headerRowReorderLabel}
                         aria-colindex={reorderColIndex}
                         data-field="__reorder_col__"
                         tabIndex={-1}
-                        title="Drag to reorder rows"
+                        title={locale.headerRowReorderTooltip}
                         style={{
                             minWidth: 48,
                             maxWidth: 48,
@@ -368,7 +370,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                         className={`ogx__header-cell ogx__header-cell--expand ${pinExpandColumn ? 'ogx__header-cell--pinned ogx__header-cell--pinned-left' : ''
                             } ${isHeaderFocused('__expand_col__') ? 'ogx__header-cell--focused' : ''}`}
                         role="columnheader"
-                        aria-label="Expand row details"
+                        aria-label={locale.headerDetailPanelLabel}
                         aria-colindex={expandColIndex}
                         data-field="__expand_col__"
                         tabIndex={-1}
@@ -405,7 +407,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                                 checked={allSelected}
                                 indeterminate={someSelected}
                                 onChange={(e) => onSelectAll(e.target.checked)}
-                                aria-label={allSelected ? 'Deselect all rows' : 'Select all rows'}
+                                aria-label={allSelected ? locale.headerDeselectAllLabel : locale.headerSelectAllLabel}
                                 tabIndex={-1}
                                 onMouseDown={(e) => e.preventDefault()}
                             />
@@ -434,7 +436,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                         : sortPosition === 0 ? (sortDirection === 'asc' ? 'ascending' : 'descending')
                         : 'none';
                     const sortDescription = isSorted && sortModel.length > 1
-                        ? `Sorted ${sortDirection === 'asc' ? 'ascending' : 'descending'}, sort priority ${sortPosition + 1} of ${sortModel.length}`
+                        ? locale.headerSortDescription(sortDirection === 'asc' ? 'asc' : 'desc', sortPosition + 1, sortModel.length)
                         : undefined;
                     const isResizable = colDef.resizable !== false;
                     const pinnedPosition = isColumnPinned(colDef.field, pinnedColumns);
@@ -531,7 +533,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                                         type="button"
                                         className="ogx__menu-icon-btn"
                                         onClick={handleMenuOpen(colDef)}
-                                        aria-label={`Open column menu for ${colDef.headerName || colDef.field}`}
+                                        aria-label={locale.headerColumnMenuButtonLabel(colDef.headerName || colDef.field)}
                                         aria-haspopup="menu"
                                         tabIndex={-1}
                                     >

package/lib/components/HeaderFilter/HeaderFilterRow.tsx

@@ -6,6 +6,7 @@ import { resolveHeaderFilterLocale } from '../../utils/headerFilterLocale';
 import { getHeaderFilterState, hasHeaderFilter, setHeaderFilterItem } from '../../utils/headerFilters';
 import { getHeaderColumnStyle } from '../Header/headerColumnStyle';
 import { HeaderFilterCell } from './HeaderFilterCell';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export interface HeaderFilterRowProps {
     /** The rendered columns of the column header row (render window with spacers), in render order. */
@@ -68,6 +69,7 @@ function SystemFilterCell({ field, ariaColIndex, sticky, left, focused }: {
  * through the root-level items it owns (`header:<field>`).
  */
 export function HeaderFilterRow(props: HeaderFilterRowProps) {
+    const gridLocale = useGridLocale();
     const {
         columns, columnWidths, pinnedColumns, pinnedPositions, pinnedEdges, rowReordering, hasDetailPanel,
         checkboxSelection, pinExpandColumn, pinCheckboxColumn, columnIndexMap, ariaRowIndex, filterModel,
@@ -137,7 +139,7 @@ export function HeaderFilterRow(props: HeaderFilterRowProps) {
                             className={`ogx__header-filter-cell ogx__header-filter-cell--empty ${className}`}
                             style={style}
                             role="columnheader"
-                            aria-label={`No filter for ${colDef.headerName || colDef.field}`}
+                            aria-label={gridLocale.headerFilterNoFilterLabel(colDef.headerName || colDef.field)}
                             aria-colindex={ariaColIndex}
                             data-field={colDef.field}
                             tabIndex={-1}

package/lib/components/ListView/ListViewRow.tsx

@@ -4,6 +4,7 @@ import { ExpandIcon } from '../ui/ExpandIcon';
 import { Checkbox } from '../ui/Checkbox';
 import { CellErrorBoundary } from '../Cell/CellErrorBoundary';
 import { isSyntheticRowId } from '../../utils/syntheticRows';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 import type { GridColDef, GridRowModel, GridRowId, GridRowMeta, GridListViewColDef, GridRenderCellParams } from '../../types';
 
 export interface ListViewRowProps<R extends GridRowModel = GridRowModel> {
@@ -71,6 +72,7 @@ export function ListViewRow<R extends GridRowModel = GridRowModel>({
         rowMeta,
     };
 
+    const locale = useGridLocale();
     const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         e.stopPropagation();
         onSelectionChange?.(id, e.target.checked);
@@ -96,7 +98,7 @@ export function ListViewRow<R extends GridRowModel = GridRowModel>({
                     {!isSyntheticRow && <Checkbox
                         checked={isSelected}
                         onChange={handleCheckboxChange}
-                        aria-label={`Select row ${id}`}
+                        aria-label={locale.rowSelectLabel(id)}
                         // Not a Tab stop of its own: the list is one Tab stop, Shift+Space selects the focused row.
                         tabIndex={-1}
                     />}