@mui/x-data-grid 8.2.0 → 8.3.1

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -101,7 +101,7 @@ const useGridRowSelection = (apiRef, props) => {
   /*
    * API METHODS
    */
-  const setRowSelectionModel = React.useCallback(model => {
+  const setRowSelectionModel = React.useCallback((model, reason) => {
     if (props.signature === _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'));
     }
@@ -110,7 +110,7 @@ const useGridRowSelection = (apiRef, props) => {
       logger.debug(`Setting selection model`);
       apiRef.current.setState(state => (0, _extends2.default)({}, state, {
         rowSelection: props.rowSelection ? model : emptyModel
-      }));
+      }), reason);
     }
   }, [apiRef, logger, props.rowSelection, props.signature, canHaveMultipleSelection]);
   const isRowSelected = React.useCallback(id => {
@@ -151,7 +151,7 @@ const useGridRowSelection = (apiRef, props) => {
           (0, _utils.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 = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef);
@@ -177,7 +177,7 @@ 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]);
@@ -244,7 +244,7 @@ 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 => {
@@ -369,7 +369,7 @@ 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/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/hooks/features/rowSelection/utils.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findRowsToSelect = exports.findRowsToDeselect = exports.ROW_SELECTION_PROPAGATION_DEFAULT = void 0;
-exports.getCheckboxPropsSelector = getCheckboxPropsSelector;
+exports.findRowsToSelect = exports.findRowsToDeselect = exports.checkboxPropsSelector = exports.ROW_SELECTION_PROPAGATION_DEFAULT = void 0;
 exports.isMultipleRowSelectionEnabled = isMultipleRowSelectionEnabled;
 var _signature = require("../../../constants/signature");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
@@ -35,41 +34,42 @@ function getGridRowGroupSelectableDescendants(apiRef, groupId) {
   }
   return descendants;
 }
-
-// TODO v8: Use `createSelectorV8`
-function getCheckboxPropsSelector(groupId, autoSelectParents) {
-  return (0, _createSelector.createSelector)(_gridRowsSelector.gridRowTreeSelector, _gridSortingSelector.gridSortedRowIdsSelector, _gridFilterSelector.gridFilteredRowsLookupSelector, _gridRowSelectionSelector.gridRowSelectionManagerSelector, (rowTree, sortedRowIds, filteredRowsLookup, rowSelectionManager) => {
-    const groupNode = rowTree[groupId];
-    if (!groupNode || groupNode.type !== 'group') {
-      return {
-        isIndeterminate: false,
-        isChecked: rowSelectionManager.has(groupId)
-      };
+const checkboxPropsSelector = exports.checkboxPropsSelector = (0, _createSelector.createSelector)(_gridRowsSelector.gridRowTreeSelector, _gridFilterSelector.gridFilteredRowsLookupSelector, _gridRowSelectionSelector.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
+  };
+});
 function isMultipleRowSelectionEnabled(props) {
   if (props.signature === _signature.GridSignature.DataGrid) {
     // DataGrid Community has multiple row selection enabled only if checkbox selection is enabled.
@@ -105,7 +105,7 @@ const getFilteredRowNodeSiblings = (tree, filteredRows, id) => {
 const findRowsToSelect = (apiRef, tree, selectedRow, autoSelectDescendants, autoSelectParents, addRow, rowSelectionManager = (0, _gridRowSelectionSelector.gridRowSelectionManagerSelector)(apiRef)) => {
   const filteredRows = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
   const selectedDescendants = new Set([]);
-  if (!autoSelectDescendants && !autoSelectParents) {
+  if (!autoSelectDescendants && !autoSelectParents || filteredRows[selectedRow] === false) {
     return;
   }
   if (autoSelectDescendants) {

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -229,12 +229,13 @@ 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/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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.2.0
+ * @mui/x-data-grid v8.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -61,6 +61,7 @@ Object.defineProperty(exports, "useGridRootProps", {
     return _useGridRootProps.useGridRootProps;
   }
 });
+require("./material");
 var _useGridApiContext = require("./hooks/utils/useGridApiContext");
 var _useGridApiRef = require("./hooks/utils/useGridApiRef");
 var _useGridRootProps = require("./hooks/utils/useGridRootProps");

package/locales/koKR.js

@@ -9,10 +9,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: '행 간격',
@@ -39,11 +38,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: '열이 없습니다.',
@@ -105,15 +102,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: '필터',
@@ -162,18 +158,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 '첫 번째 페이지로 이동';
@@ -197,61 +193,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}`;
@@ -264,13 +256,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})`
 };
 const koKR = exports.koKR = (0, _getGridLocalization.getGridLocalization)(koKRGrid);

package/locales/nbNO.js

@@ -9,8 +9,8 @@ const nbNOGrid = {
   // Root
   noRowsLabel: 'Ingen rader',
   noResultsOverlayLabel: 'Fant ingen resultat.',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
+  noColumnsOverlayLabel: 'Ingen kolonner',
+  noColumnsOverlayManageColumns: 'Velg kolonner',
   // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
 
   // Density selector toolbar button text
@@ -49,8 +49,7 @@ const nbNOGrid = {
   columnsManagementNoColumns: 'Ingen kolonner',
   columnsManagementShowHideAllText: 'Vis/skjul alle',
   columnsManagementReset: 'Nullstill',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'Tøm',
   // Filter panel text
   filterPanelAddFilter: 'Legg til filter',
   filterPanelRemoveAll: 'Fjern alle',
@@ -64,9 +63,9 @@ const nbNOGrid = {
   filterPanelInputPlaceholder: 'Filter verdi',
   // Filter operators text
   filterOperatorContains: 'inneholder',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'inneholder ikke',
   filterOperatorEquals: 'er lik',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'er ikke lik',
   filterOperatorStartsWith: 'starter med',
   filterOperatorEndsWith: 'slutter med',
   filterOperatorIs: 'er',
@@ -86,9 +85,9 @@ const nbNOGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Inneholder',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
-  headerFilterOperatorEquals: 'Lik',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotContain: 'Inneholder ikke',
+  headerFilterOperatorEquals: 'Er lik',
+  headerFilterOperatorDoesNotEqual: 'Er ikke lik',
   headerFilterOperatorStartsWith: 'Starter på',
   headerFilterOperatorEndsWith: 'Slutter på',
   headerFilterOperatorIs: 'Er',
@@ -106,15 +105,14 @@ const nbNOGrid = {
   'headerFilterOperator>=': 'Større enn eller lik',
   'headerFilterOperator<': 'Mindre enn',
   'headerFilterOperator<=': 'Mindre enn eller lik',
-  // headerFilterClear: 'Clear filter',
-
+  headerFilterClear: 'Tøm filter',
   // Filter values text
   filterValueAny: 'noen',
   filterValueTrue: 'sant',
   filterValueFalse: 'usant',
   // Column menu text
   columnMenuLabel: 'Meny',
-  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
+  columnMenuAriaLabel: columnName => `${columnName} kolonnemeny`,
   columnMenuShowColumns: 'Vis kolonner',
   columnMenuManageColumns: 'Administrer kolonner',
   columnMenuFilter: 'Filter',
@@ -163,18 +161,18 @@ const nbNOGrid = {
   collapseDetailPanel: 'Kollaps',
   // Pagination
   paginationRowsPerPage: 'Rader per side:',
-  // 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} av ${count !== -1 ? count : `mer enn ${to}`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `omtrent ${estimated}` : `mer enn ${to}`;
+    return `${from}–${to} av ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return 'Gå til første side';