@opencorestack/opengridx 3.8.1 → 3.9.0

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}
                     />}

package/lib/components/Pagination/Pagination.tsx

@@ -3,6 +3,7 @@ import React, { useId } from 'react';
 import { Button } from '../ui/Button';
 import { normalizePageSize, getPageCount, clampPage } from '../../utils/pagination';
 import type { GridLocaleText } from '../../types';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export interface PaginationProps {
     page: number;
@@ -18,6 +19,7 @@ export interface PaginationProps {
 
 export function Pagination(props: PaginationProps) {
     const pageSizeId = useId();
+    const locale = useGridLocale();
     const {
         page,
         pageSize,
@@ -43,15 +45,10 @@ export function Pagination(props: PaginationProps) {
 
     const firstRowIndex = currentPage * safePageSize;
     const lastRowIndex = Math.min(firstRowIndex + safePageSize, rowCount);
-    const displayedRows = rowCount === 0 ? 0 : `${firstRowIndex + 1}–${lastRowIndex}`;
-
-    const rowsPerPageLabel = localeText?.paginationRowsPerPage ?? 'Rows per page:';
-    const ofLabel = localeText?.paginationOf
-        ? localeText.paginationOf(rowCount === 0 ? 0 : firstRowIndex + 1, lastRowIndex, rowCount)
-        : `${displayedRows} of ${rowCount}`;
-    const pageLabel = localeText?.paginationPage
-        ? localeText.paginationPage(currentPage + 1, pageCount)
-        : `Page ${currentPage + 1} of ${pageCount}`;
+    // An explicit `localeText` prop (standalone use) wins over the grid's strings.
+    const rowsPerPageLabel = localeText?.paginationRowsPerPage ?? locale.paginationRowsPerPage;
+    const ofLabel = (localeText?.paginationOf ?? locale.paginationOf)(rowCount === 0 ? 0 : firstRowIndex + 1, lastRowIndex, rowCount);
+    const pageLabel = (localeText?.paginationPage ?? locale.paginationPage)(currentPage + 1, pageCount);
 
     const handleFirstPage = () => {
         onPageChange(0);
@@ -79,7 +76,7 @@ export function Pagination(props: PaginationProps) {
     const isLastPage = currentPage >= pageCount - 1;
 
     return (
-        <div className="ogx-pagination" role="navigation" aria-label="Pagination">
+        <div className="ogx-pagination" role="navigation" aria-label={locale.paginationLabel}>
             { }
             <div className="ogx-pagination__page-size">
                 <label htmlFor={pageSizeId} className="ogx-pagination__label">
@@ -112,8 +109,8 @@ export function Pagination(props: PaginationProps) {
                         size="small"
                         onClick={handleFirstPage}
                         disabled={isFirstPage}
-                        aria-label="Go to first page"
-                        title="First page"
+                        aria-label={locale.paginationFirstPageLabel}
+                        title={locale.paginationFirstPageTooltip}
                     >
                         <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                             <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" />
@@ -126,8 +123,8 @@ export function Pagination(props: PaginationProps) {
                     size="small"
                     onClick={handlePreviousPage}
                     disabled={isFirstPage}
-                    aria-label="Go to previous page"
-                    title="Previous page"
+                    aria-label={locale.paginationPreviousPageLabel}
+                    title={locale.paginationPreviousPageTooltip}
                 >
                     <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                         <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
@@ -143,8 +140,8 @@ export function Pagination(props: PaginationProps) {
                     size="small"
                     onClick={handleNextPage}
                     disabled={isLastPage}
-                    aria-label="Go to next page"
-                    title="Next page"
+                    aria-label={locale.paginationNextPageLabel}
+                    title={locale.paginationNextPageTooltip}
                 >
                     <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                         <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
@@ -157,8 +154,8 @@ export function Pagination(props: PaginationProps) {
                         size="small"
                         onClick={handleLastPage}
                         disabled={isLastPage}
-                        aria-label="Go to last page"
-                        title="Last page"
+                        aria-label={locale.paginationLastPageLabel}
+                        title={locale.paginationLastPageTooltip}
                     >
                         <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                             <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z" />

package/lib/components/QuickFilter/QuickFilter.tsx

@@ -1,6 +1,7 @@
 
 import React, { useState, useCallback } from 'react';
 import { Input } from '../ui/Input';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export interface QuickFilterProps {
     value?: string;
@@ -13,9 +14,11 @@ export function QuickFilter(props: QuickFilterProps) {
     const {
         value = '',
         onChange,
-        placeholder = 'Search...',
+        placeholder: placeholderProp,
         debounceMs = 300
     } = props;
+    const locale = useGridLocale();
+    const placeholder = placeholderProp ?? locale.toolbarSearchPlaceholder;
 
     const [localValue, setLocalValue] = useState(value);
     const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
@@ -55,7 +58,7 @@ export function QuickFilter(props: QuickFilterProps) {
         <button
             className="ogx-quick-filter__clear"
             onClick={handleClear}
-            aria-label="Clear search"
+            aria-label={locale.toolbarSearchClear}
             type="button"
         >
             <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">

package/lib/components/Row/Row.tsx

@@ -5,6 +5,7 @@ import { Checkbox } from '../ui/Checkbox';
 import { ExpandIcon } from '../ui/ExpandIcon';
 import { DragHandleIcon } from '../ui/DragHandleIcon';
 import { DetailPanel } from '../DetailPanel/DetailPanel';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 import type { GridRowModel, GridColDef, GridRowId, GridColumnPinning, GridRowPinning, GridRowParams, GridCellParams, GridDetailPanelHeight, GridRowMeta } from '../../types';
 import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
 import { isColumnPinned, calculatePinnedPositions, getPinnedEdgeFields, isRowPinned } from '../../utils/pinning';
@@ -108,6 +109,7 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
 }
 
 function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
+    const locale = useGridLocale();
     const {
         row,
         skeleton = false,
@@ -297,7 +299,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                     <div
                         className={`ogx__cell ogx__cell--drag-handle ${focusedCellField === '__reorder_col__' ? 'ogx__cell--focused' : ''} ${(focusedCellField === '__reorder_col__' && isFocusVisible) ? 'ogx__cell--focus-visible' : ''}`}
                         role="gridcell"
-                        aria-label={onDragStart ? 'Drag to reorder row' : undefined}
+                        aria-label={onDragStart ? locale.rowReorderLabel : undefined}
                         aria-colindex={reorderColIndex}
                         data-field="__reorder_col__"
                         tabIndex={-1}
@@ -322,7 +324,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             } ${focusedCellField === '__expand_col__' ? 'ogx__cell--focused' : ''} ${(focusedCellField === '__expand_col__' && isFocusVisible) ? 'ogx__cell--focus-visible' : ''
                             }`}
                         role="gridcell"
-                        aria-label={showDetailPanel ? (isDetailPanelExpanded ? 'Collapse row details' : 'Expand row details') : undefined}
+                        aria-label={showDetailPanel ? (isDetailPanelExpanded ? locale.rowDetailPanelCollapseLabel : locale.rowDetailPanelExpandLabel) : undefined}
                         aria-expanded={showDetailPanel ? isDetailPanelExpanded : undefined}
                         aria-controls={showDetailPanel && isDetailPanelExpanded ? detailPanelId : undefined}
                         aria-colindex={expandColIndex}
@@ -390,7 +392,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                                 checked={isSelected}
                                 onChange={handleCheckboxChange}
                                 onClick={(e) => e.stopPropagation()}
-                                aria-label={isSelected ? `Deselect row ${id}` : `Select row ${id}`}
+                                aria-label={isSelected ? locale.rowDeselectLabel(id) : locale.rowSelectLabel(id)}
                                 tabIndex={-1}
                                 onMouseDown={(e) => e.preventDefault()}
                             />