@mui/x-data-grid 8.3.0 → 8.3.1

package/CHANGELOG.md

@@ -5,6 +5,96 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.3.1
+
+_May 14, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Norwegian Bokmål (nb-NO) locale on the Data Grid
+- 🌍 Improve Korean (ko-KR) locale on the Data Grid and Pickers
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@100pearlcent, @htollefsen, @JanPretzel, @sai6855.
+Following are all team members who have contributed to this release:
+@bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @MBilalShafi, @oliviertassinari, @prakhargupta1.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.3.1`
+
+- [DataGrid] Add `reason` param for `onRowSelectionModelChange` callback (#17545) @sai6855
+- [DataGrid] Fix `renderContext` calculation loop (#17779) @cherniavskii
+- [DataGrid] Fix column spanning jump on scroll (#17759) @cherniavskii
+- [DataGrid] Fix material augmentation not working (#17761) @cherniavskii
+- [DataGrid] Use arguments selector for checkbox props (#17683) @MBilalShafi
+- [l10n] Improve Norwegian Bokmål (nb-NO) locale (#17766) @htollefsen
+- [l10n] Improve Korean (ko-KR) locale (#17484) @100pearlcent
+
+#### `@mui/x-data-grid-pro@8.3.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.3.1`.
+
+#### `@mui/x-data-grid-premium@8.3.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.3.1`, plus:
+
+- [DataGridPremium] Fix aggregation label not being used in pivot panel (#17760) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.3.1`
+
+- [fields] Add notch to the field outlined when the label is manually shrank (#17620) @flaviendelangle
+- [l10n] Improve Korean (ko-KR) locale (#17484) @100pearlcent
+
+#### `@mui/x-date-pickers-pro@8.3.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.3.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.3.1`
+
+- [charts] Fix infinite tick number when zoom range is zero (#17750) @bernardobelchior
+- [charts] Improve tick rendering performance (#17755) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.3.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.3.1`, plus:
+
+- [charts-pro] Fix ESM build issue with Vite (#17774) @bernardobelchior
+- [charts-pro] Add benchmark for zoomed in scatter chart (#17756) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.3.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.3.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.3.1`.
+
+### Docs
+
+- [docs] Fix 301 to Next.js docs for license @oliviertassinari
+- [docs] Fix AI assistant API URL (#17745) @oliviertassinari
+- [docs] Fix heading structure in README @oliviertassinari
+- [docs] Fix translation keys documentation (#17811) @JanPretzel
+- [docs] Improve CHANGELOG format @oliviertassinari
+
+### Core
+
+- [core] Apply YAML convention, blank line only at top level @oliviertassinari
+- [code-infra] Fix dynamic import missing extensions (#17767) @Janpot
+- [code-infra] Replace `mocha` with `vitest` for browser & jsdom tests (#14508) @JCQuintas
+- [scheduler] Create the package and setup a private doc page (#17239) @flaviendelangle
+
 ## 8.3.0
 
 _May 8, 2025_
@@ -15,10 +105,8 @@ We'd like to offer a big thanks to the 11 contributors who made this release pos
 - 📚 Documentation improvements
 - 🐞 Bugfixes
 
-Special thanks go out to this community member for a valuable contribution:
-@ptuukkan.
-Team members who have contributed to this release:
-@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @MBilalShafi, @rita-codes, @romgrk.
+Special thanks go out to this community member for a valuable contribution: @ptuukkan.
+Team members who have contributed to this release: @alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @MBilalShafi, @rita-codes, @romgrk.
 
 ### Data Grid
 
@@ -531,8 +619,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 - 📚 Documentation improvements
 - 🐞 Bugfixes
 
-Team members who have contributed to this release:
-@bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @noraleonte, @romgrk, @alexfauquette.
+Team members who have contributed to this release: @bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @noraleonte, @romgrk, @alexfauquette.
 
 <!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
 
@@ -845,7 +932,7 @@ We'd like to offer a big thanks to the 21 contributors who made this release pos
 - 🌍 Improve Chinese (zh-CN), (zh-HK), (zh-TW), Czech (cs-CZ), Korean (ko-KR) and Slovak (sk-Sk) locales on the Data Grid
 - 🌍 Improve Chinese (zh-CN), (zh-HK) and (zh-TW) locales on the Pickers
 
-## Breaking changes
+### Breaking changes
 
 - ℹ️ The peer dependency on `@mui/material` has been updated to accept only v7.
   This has been done to increase the adoption rate of ESM.
@@ -858,7 +945,7 @@ Following are all team members who have contributed to this release:
 
 <!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
 
-## Alpha release highlights
+### Alpha release highlights
 
 Below are the highlights of the alpha releases leading up to this beta release:
 
@@ -3152,8 +3239,7 @@ We'd like to offer a big thanks to the 4 contributors who made this release poss
 
 - 🐞 Bugfixes
 
-Team members who have contributed to this release:
-@arminmeh, @cherniavskii, @LukasTy, @michelengelen.
+Team members who have contributed to this release: @arminmeh, @cherniavskii, @LukasTy, @michelengelen.
 
 <!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
 

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -65,11 +65,13 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
     }
   }, []);
   const isSelectable = apiRef.current.isRowSelectable(id);
-  const checkboxPropsSelector = (0, _utils2.getCheckboxPropsSelector)(id, rootProps.rowSelectionPropagation?.parents ?? false);
   const {
     isIndeterminate,
     isChecked
-  } = (0, _useGridSelector.useGridSelector)(apiRef, checkboxPropsSelector, undefined, _useGridSelector.objectShallowCompare);
+  } = (0, _useGridSelector.useGridSelector)(apiRef, _utils2.checkboxPropsSelector, {
+    groupId: id,
+    autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
+  });
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }

package/esm/components/columnSelection/GridCellCheckboxRenderer.js

@@ -8,8 +8,8 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { objectShallowCompare, useGridSelector } from "../../hooks/utils/useGridSelector.js";
-import { getCheckboxPropsSelector } from "../../hooks/features/rowSelection/utils.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { checkboxPropsSelector } from "../../hooks/features/rowSelection/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -57,11 +57,13 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
     }
   }, []);
   const isSelectable = apiRef.current.isRowSelectable(id);
-  const checkboxPropsSelector = getCheckboxPropsSelector(id, rootProps.rowSelectionPropagation?.parents ?? false);
   const {
     isIndeterminate,
     isChecked
-  } = useGridSelector(apiRef, checkboxPropsSelector, undefined, objectShallowCompare);
+  } = useGridSelector(apiRef, checkboxPropsSelector, {
+    groupId: id,
+    autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
+  });
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }

package/esm/hooks/features/columns/gridColumnsUtils.js

@@ -302,13 +302,21 @@ export function getFirstNonSpannedColumnToRender({
   visibleRows
 }) {
   let firstNonSpannedColumnToRender = firstColumnToRender;
-  for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
-    const row = visibleRows[i];
-    if (row) {
-      const rowId = visibleRows[i].id;
-      const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstColumnToRender);
-      if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
-        firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+  let foundStableColumn = false;
+
+  // Keep checking columns until we find one that's not spanned in any visible row
+  while (!foundStableColumn && firstNonSpannedColumnToRender >= 0) {
+    foundStableColumn = true;
+    for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
+      const row = visibleRows[i];
+      if (row) {
+        const rowId = visibleRows[i].id;
+        const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstNonSpannedColumnToRender);
+        if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan && cellColSpanInfo.leftVisibleCellIndex < firstNonSpannedColumnToRender) {
+          firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+          foundStableColumn = false;
+          break; // Check the new column index against the visible rows, because it might be spanned
+        }
       }
     }
   }

package/esm/hooks/features/rowSelection/useGridRowSelection.js

@@ -92,7 +92,7 @@ export const useGridRowSelection = (apiRef, props) => {
   /*
    * API METHODS
    */
-  const setRowSelectionModel = React.useCallback(model => {
+  const setRowSelectionModel = React.useCallback((model, reason) => {
     if (props.signature === GridSignature.DataGrid && !canHaveMultipleSelection && (model.type !== 'include' || model.ids.size > 1)) {
       throw new Error(['MUI X: `rowSelectionModel` can only contain 1 item in DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
     }
@@ -101,7 +101,7 @@ export const useGridRowSelection = (apiRef, props) => {
       logger.debug(`Setting selection model`);
       apiRef.current.setState(state => _extends({}, state, {
         rowSelection: props.rowSelection ? model : emptyModel
-      }));
+      }), reason);
     }
   }, [apiRef, logger, props.rowSelection, props.signature, canHaveMultipleSelection]);
   const isRowSelected = React.useCallback(id => {
@@ -142,7 +142,7 @@ export const useGridRowSelection = (apiRef, props) => {
           findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
         }
       }
-      apiRef.current.setRowSelectionModel(newSelectionModel);
+      apiRef.current.setRowSelectionModel(newSelectionModel, 'singleRowSelection');
     } else {
       logger.debug(`Toggling selection for row ${id}`);
       const selectionModel = gridRowSelectionStateSelector(apiRef);
@@ -168,7 +168,7 @@ export const useGridRowSelection = (apiRef, props) => {
       }
       const isSelectionValid = newSelectionModel.type === 'include' && newSelectionModel.ids.size < 2 || canHaveMultipleSelection;
       if (isSelectionValid) {
-        apiRef.current.setRowSelectionModel(newSelectionModel);
+        apiRef.current.setRowSelectionModel(newSelectionModel, 'singleRowSelection');
       }
     }
   }, [apiRef, logger, applyAutoSelection, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, canHaveMultipleSelection]);
@@ -235,7 +235,7 @@ export const useGridRowSelection = (apiRef, props) => {
     }
     const isSelectionValid = newSelectionModel.type === 'include' && newSelectionModel.ids.size < 2 || canHaveMultipleSelection;
     if (isSelectionValid) {
-      apiRef.current.setRowSelectionModel(newSelectionModel);
+      apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
     }
   }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, props.rowSelection]);
   const getPropagatedRowSelectionModel = React.useCallback(inputSelectionModel => {
@@ -360,7 +360,7 @@ export const useGridRowSelection = (apiRef, props) => {
           apiRef.current.selectRows(Array.from(newSelectionModel.ids), true, true);
         }
       } else {
-        apiRef.current.setRowSelectionModel(newSelectionModel);
+        apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
       }
     }
   }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, props.filterMode, tree, getRowsToBeSelected]);

package/esm/hooks/features/rowSelection/utils.d.ts

@@ -5,7 +5,10 @@ import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommuni
 import { type GridRowSelectionPropagation } from "../../../models/gridRowSelectionModel.js";
 import { type RowSelectionManager } from "../../../models/gridRowSelectionManager.js";
 export declare const ROW_SELECTION_PROPAGATION_DEFAULT: GridRowSelectionPropagation;
-export declare function getCheckboxPropsSelector(groupId: GridRowId, autoSelectParents: boolean): import("@mui/x-data-grid").OutputSelector<import("../../../models/gridStateCommunity.js").GridStateCommunity, RowSelectionManager, {
+export declare const checkboxPropsSelector: import("@mui/x-data-grid").OutputSelector<import("../../../models/gridStateCommunity.js").GridStateCommunity, {
+  groupId: GridRowId;
+  autoSelectParents: boolean;
+}, {
   isIndeterminate: boolean;
   isChecked: boolean;
 }>;

package/esm/hooks/features/rowSelection/utils.js

@@ -27,41 +27,42 @@ function getGridRowGroupSelectableDescendants(apiRef, groupId) {
   }
   return descendants;
 }
-
-// TODO v8: Use `createSelectorV8`
-export function getCheckboxPropsSelector(groupId, autoSelectParents) {
-  return createSelector(gridRowTreeSelector, gridSortedRowIdsSelector, gridFilteredRowsLookupSelector, gridRowSelectionManagerSelector, (rowTree, sortedRowIds, filteredRowsLookup, rowSelectionManager) => {
-    const groupNode = rowTree[groupId];
-    if (!groupNode || groupNode.type !== 'group') {
-      return {
-        isIndeterminate: false,
-        isChecked: rowSelectionManager.has(groupId)
-      };
+export const checkboxPropsSelector = createSelector(gridRowTreeSelector, gridFilteredRowsLookupSelector, gridRowSelectionManagerSelector, (rowTree, filteredRowsLookup, rowSelectionManager, {
+  groupId,
+  autoSelectParents
+}) => {
+  const groupNode = rowTree[groupId];
+  if (!groupNode || groupNode.type !== 'group' || rowSelectionManager.has(groupId)) {
+    return {
+      isIndeterminate: false,
+      isChecked: rowSelectionManager.has(groupId)
+    };
+  }
+  let hasSelectedDescendant = false;
+  let hasUnSelectedDescendant = false;
+  const traverseDescendants = itemToTraverseId => {
+    if (filteredRowsLookup[itemToTraverseId] === false ||
+    // Perf: Skip checking the rest of the descendants if we already
+    // know that there is a selected and an unselected descendant
+    hasSelectedDescendant && hasUnSelectedDescendant) {
+      return;
     }
-    if (rowSelectionManager.has(groupId)) {
-      return {
-        isIndeterminate: false,
-        isChecked: true
-      };
+    const node = rowTree[itemToTraverseId];
+    if (node?.type === 'group') {
+      node.children.forEach(traverseDescendants);
     }
-    let selectableDescendantsCount = 0;
-    let selectedDescendantsCount = 0;
-    const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
-    for (let index = startIndex; index < sortedRowIds.length && rowTree[sortedRowIds[index]]?.depth > groupNode.depth; index += 1) {
-      const id = sortedRowIds[index];
-      if (filteredRowsLookup[id] !== false) {
-        selectableDescendantsCount += 1;
-        if (rowSelectionManager.has(id)) {
-          selectedDescendantsCount += 1;
-        }
-      }
+    if (rowSelectionManager.has(itemToTraverseId)) {
+      hasSelectedDescendant = true;
+    } else {
+      hasUnSelectedDescendant = true;
     }
-    return {
-      isIndeterminate: selectedDescendantsCount > 0 && (selectedDescendantsCount < selectableDescendantsCount || !rowSelectionManager.has(groupId)),
-      isChecked: autoSelectParents ? selectedDescendantsCount > 0 : rowSelectionManager.has(groupId)
-    };
-  });
-}
+  };
+  traverseDescendants(groupId);
+  return {
+    isIndeterminate: hasSelectedDescendant && hasUnSelectedDescendant,
+    isChecked: autoSelectParents ? hasSelectedDescendant && !hasUnSelectedDescendant : false
+  };
+});
 export function isMultipleRowSelectionEnabled(props) {
   if (props.signature === GridSignature.DataGrid) {
     // DataGrid Community has multiple row selection enabled only if checkbox selection is enabled.

package/esm/hooks/features/virtualization/useGridVirtualScroller.js

@@ -218,12 +218,13 @@ export const useGridVirtualScroller = () => {
     scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
-
-    // Prevents batching render context changes
-    ReactDOM.flushSync(() => {
-      updateRenderContext(nextRenderContext);
-    });
-    scrollTimeout.start(1000, triggerUpdateRenderContext);
+    if (!areRenderContextsEqual(nextRenderContext, renderContext)) {
+      // Prevents batching render context changes
+      ReactDOM.flushSync(() => {
+        updateRenderContext(nextRenderContext);
+      });
+      scrollTimeout.start(1000, triggerUpdateRenderContext);
+    }
     return nextRenderContext;
   });
   const forceUpdateRenderContext = () => {

package/esm/index.d.ts

@@ -1,5 +1,6 @@
 import { GridApiCommunity } from "./models/api/gridApiCommunity.js";
 import { GridInitialStateCommunity, GridStateCommunity } from "./models/gridStateCommunity.js";
+import "./material/index.js";
 export { useGridApiContext } from "./hooks/utils/useGridApiContext.js";
 export { useGridApiRef } from "./hooks/utils/useGridApiRef.js";
 export { useGridRootProps } from "./hooks/utils/useGridRootProps.js";

package/esm/index.js

@@ -1,10 +1,11 @@
 /**
- * @mui/x-data-grid v8.3.0
+ * @mui/x-data-grid v8.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import "./material/index.js";
 export { useGridApiContext } from "./hooks/utils/useGridApiContext.js";
 export { useGridApiRef } from "./hooks/utils/useGridApiRef.js";
 export { useGridRootProps } from "./hooks/utils/useGridRootProps.js";

package/esm/locales/koKR.js

@@ -3,10 +3,9 @@ const koKRGrid = {
   // Root
   noRowsLabel: '행이 없습니다.',
   noResultsOverlayLabel: '결과값이 없습니다.',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
-  // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
-
+  noColumnsOverlayLabel: '열이 없습니다',
+  noColumnsOverlayManageColumns: '열 관리하기',
+  emptyPivotOverlayLabel: '행, 열, 값을 추가하여 피벗 테이블을 만듭니다.',
   // Density selector toolbar button text
   toolbarDensity: '행 간격',
   toolbarDensityLabel: '행 간격',
@@ -33,11 +32,9 @@ const koKRGrid = {
   toolbarExportPrint: '프린트',
   toolbarExportExcel: 'Excel로 내보내기',
   // Toolbar pivot button
-  // toolbarPivot: 'Pivot',
-
+  toolbarPivot: '피벗',
   // Toolbar AI Assistant button
-  // toolbarAssistant: 'AI Assistant',
-
+  toolbarAssistant: 'AI 어시스턴트',
   // Columns management text
   columnsManagementSearchTitle: '검색',
   columnsManagementNoColumns: '열이 없습니다.',
@@ -99,15 +96,14 @@ const koKRGrid = {
   'headerFilterOperator>=': '같거나 더 큰',
   'headerFilterOperator<': '더 작은',
   'headerFilterOperator<=': '같거나 더 작은',
-  // headerFilterClear: 'Clear filter',
-
+  headerFilterClear: '필터 초기화',
   // Filter values text
   filterValueAny: '아무값',
   filterValueTrue: '참',
   filterValueFalse: '거짓',
   // Column menu text
   columnMenuLabel: '메뉴',
-  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
+  columnMenuAriaLabel: columnName => `${columnName} 열 메뉴`,
   columnMenuShowColumns: '열 표시',
   columnMenuManageColumns: '열 관리',
   columnMenuFilter: '필터',
@@ -156,18 +152,18 @@ const koKRGrid = {
   collapseDetailPanel: '접기',
   // Pagination
   paginationRowsPerPage: '페이지 당 행:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `${from}–${to} of ${count !== -1 ? count : `${to} 이상`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `약 ${estimated}` : `${to} 이상`;
+    return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return '첫 번째 페이지로 이동';
@@ -191,61 +187,57 @@ const koKRGrid = {
   aggregationFunctionLabelMax: '최대값',
   aggregationFunctionLabelSize: '크기',
   // Pivot panel
-  // pivotToggleLabel: 'Pivot',
-  // pivotRows: 'Rows',
-  // pivotColumns: 'Columns',
-  // pivotValues: 'Values',
-  // pivotCloseButton: 'Close pivot settings',
-  // pivotSearchButton: 'Search fields',
-  // pivotSearchControlPlaceholder: 'Search fields',
-  // pivotSearchControlLabel: 'Search fields',
-  // pivotSearchControlClear: 'Clear search',
-  // pivotNoFields: 'No fields',
-  // pivotMenuMoveUp: 'Move up',
-  // pivotMenuMoveDown: 'Move down',
-  // pivotMenuMoveToTop: 'Move to top',
-  // pivotMenuMoveToBottom: 'Move to bottom',
-  // pivotMenuRows: 'Rows',
-  // pivotMenuColumns: 'Columns',
-  // pivotMenuValues: 'Values',
-  // pivotMenuOptions: 'Field options',
-  // pivotMenuAddToRows: 'Add to Rows',
-  // pivotMenuAddToColumns: 'Add to Columns',
-  // pivotMenuAddToValues: 'Add to Values',
-  // pivotMenuRemove: 'Remove',
-  // pivotDragToRows: 'Drag here to create rows',
-  // pivotDragToColumns: 'Drag here to create columns',
-  // pivotDragToValues: 'Drag here to create values',
-  // pivotYearColumnHeaderName: '(Year)',
-  // pivotQuarterColumnHeaderName: '(Quarter)',
-
+  pivotToggleLabel: '피벗',
+  pivotRows: '행',
+  pivotColumns: '열',
+  pivotValues: '값',
+  pivotCloseButton: '피벗 설정 닫기',
+  pivotSearchButton: '필드 검색',
+  pivotSearchControlPlaceholder: '필드 검색',
+  pivotSearchControlLabel: '필드 검색',
+  pivotSearchControlClear: '검색 초기화',
+  pivotNoFields: '필드가 없습니다.',
+  pivotMenuMoveUp: '위로 이동',
+  pivotMenuMoveDown: '아래로 이동',
+  pivotMenuMoveToTop: '위로 이동',
+  pivotMenuMoveToBottom: '아래로 이동',
+  pivotMenuRows: '행',
+  pivotMenuColumns: '열',
+  pivotMenuValues: '값',
+  pivotMenuOptions: '필드 옵션',
+  pivotMenuAddToRows: '행에 추가',
+  pivotMenuAddToColumns: '열에 추가',
+  pivotMenuAddToValues: '값에 추가',
+  pivotMenuRemove: '제거',
+  pivotDragToRows: '행 생성',
+  pivotDragToColumns: '열 생성',
+  pivotDragToValues: '값 생성',
+  pivotYearColumnHeaderName: '(년)',
+  pivotQuarterColumnHeaderName: '(분기)',
   // AI Assistant panel
-  // aiAssistantPanelTitle: 'AI Assistant',
-  // aiAssistantPanelClose: 'Close AI Assistant',
-  // aiAssistantPanelNewConversation: 'New conversation',
-  // aiAssistantPanelConversationHistory: 'Conversation history',
-  // aiAssistantPanelEmptyConversation: 'No prompt history',
-  // aiAssistantSuggestions: 'Suggestions',
-
+  aiAssistantPanelTitle: 'AI 어시스턴트',
+  aiAssistantPanelClose: 'AI 어시스턴트 닫기',
+  aiAssistantPanelNewConversation: '새 대화',
+  aiAssistantPanelConversationHistory: '대화 기록',
+  aiAssistantPanelEmptyConversation: '프롬프트 내역이 없습니다.',
+  aiAssistantSuggestions: '제안',
   // Prompt field
   promptFieldLabel: '프롬프트 입력',
   promptFieldPlaceholder: '프롬프트 입력…',
   promptFieldPlaceholderWithRecording: '프롬프트 입력 또는 녹음…',
   promptFieldPlaceholderListening: '녹음 중…',
-  // promptFieldSpeechRecognitionNotSupported: 'Speech recognition is not supported in this browser',
+  promptFieldSpeechRecognitionNotSupported: '이 브라우저에서 음성 인식을 지원하지 않습니다.',
   promptFieldSend: '전송',
   promptFieldRecord: '녹음',
-  promptFieldStopRecording: '녹음 정지'
-
+  promptFieldStopRecording: '녹음 정지',
   // Prompt
-  // promptRerun: 'Run again',
-  // promptProcessing: 'Processing…',
-  // promptAppliedChanges: 'Applied changes',
-
+  promptRerun: '다시 실행',
+  promptProcessing: '처리 중…',
+  promptAppliedChanges: '변경사항 적용하기',
   // Prompt changes
-  // promptChangeGroupDescription: (column: string) => `Group by ${column}`,
-  // promptChangeAggregationLabel: (column: string, aggregation: string) => `${column} (${aggregation})`,
-  // promptChangeAggregationDescription: (column: string, aggregation: string) => `Aggregate ${column} (${aggregation})`,
+  promptChangeGroupDescription: column => `${column} 값으로 그룹 생성`,
+  promptChangeAggregationLabel: (column, aggregation) => `${column} (${aggregation})`,
+  promptChangeAggregationDescription: (column, aggregation) => `${column} (${aggregation}) 집계`,
   // promptChangeFilterLabel: (column: string, operator: string, value: string) => {
   //   if (operator === 'is any of') {
   //     return `${column} is any of: ${value}`;
@@ -258,13 +250,13 @@ const koKRGrid = {
   //   }
   //   return `Filter where ${column} ${operator} ${value}`;
   // },
-  // promptChangeSortDescription: (column: string, direction: string) => `Sort by ${column} (${direction})`,
-  // promptChangePivotEnableLabel: 'Pivot',
-  // promptChangePivotEnableDescription: 'Enable pivot',
-  // promptChangePivotColumnsLabel: (count: number) => `Columns (${count})`,
-  // promptChangePivotColumnsDescription: (column: string, direction: string) => `${column}${direction ? ` (${direction})` : ''}`,
-  // promptChangePivotRowsLabel: (count: number) => `Rows (${count})`,
-  // promptChangePivotValuesLabel: (count: number) => `Values (${count})`,
-  // promptChangePivotValuesDescription: (column: string, aggregation: string) => `${column} (${aggregation})`,
+  promptChangeSortDescription: (column, direction) => `${column} (${direction}) 기준으로 정렬`,
+  promptChangePivotEnableLabel: '피벗',
+  promptChangePivotEnableDescription: '피벗 활성화',
+  promptChangePivotColumnsLabel: count => `(${count}) 개의 열`,
+  promptChangePivotColumnsDescription: (column, direction) => `${column}${direction ? ` (${direction})` : ''}`,
+  promptChangePivotRowsLabel: count => `(${count}) 개의 행`,
+  promptChangePivotValuesLabel: count => `(${count}) 개의 값`,
+  promptChangePivotValuesDescription: (column, aggregation) => `${column} (${aggregation})`
 };
 export const koKR = getGridLocalization(koKRGrid);