@mui/x-data-grid 7.18.0 → 7.20.0

package/hooks/features/scroll/useGridScroll.js

@@ -14,22 +14,22 @@ import { gridDimensionsSelector } from "../dimensions/index.js";
 // Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
 function scrollIntoView(dimensions) {
   const {
-    clientHeight,
-    scrollTop,
-    offsetHeight,
-    offsetTop
+    containerSize,
+    scrollPosition,
+    elementSize,
+    elementOffset
   } = dimensions;
-  const elementBottom = offsetTop + offsetHeight;
+  const elementEnd = elementOffset + elementSize;
   // Always scroll to top when cell is higher than viewport to avoid scroll jump
   // See https://github.com/mui/mui-x/issues/4513 and https://github.com/mui/mui-x/issues/4514
-  if (offsetHeight > clientHeight) {
-    return offsetTop;
+  if (elementSize > containerSize) {
+    return elementOffset;
   }
-  if (elementBottom - clientHeight > scrollTop) {
-    return elementBottom - clientHeight;
+  if (elementEnd - containerSize > scrollPosition) {
+    return elementEnd - containerSize;
   }
-  if (offsetTop < scrollTop) {
-    return offsetTop;
+  if (elementOffset < scrollPosition) {
+    return elementOffset;
   }
   return undefined;
 }
@@ -47,6 +47,8 @@ export const useGridScroll = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
+  const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
+  const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
   const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = gridDimensionsSelector(apiRef.current.state);
@@ -73,10 +75,10 @@ export const useGridScroll = (apiRef, props) => {
       }
       // When using RTL, `scrollLeft` becomes negative, so we must ensure that we only compare values.
       scrollCoordinates.left = scrollIntoView({
-        clientHeight: dimensions.viewportInnerSize.width,
-        scrollTop: Math.abs(virtualScrollerRef.current.scrollLeft),
-        offsetHeight: cellWidth,
-        offsetTop: columnPositions[params.colIndex]
+        containerSize: dimensions.viewportOuterSize.width,
+        scrollPosition: Math.abs(virtualScrollerRef.current.scrollLeft),
+        elementSize: cellWidth,
+        elementOffset: columnPositions[params.colIndex]
       });
     }
     if (params.rowIndex !== undefined) {
@@ -86,10 +88,10 @@ export const useGridScroll = (apiRef, props) => {
       const elementIndex = !props.pagination ? params.rowIndex : params.rowIndex - page * pageSize;
       const targetOffsetHeight = rowsMeta.positions[elementIndex + 1] ? rowsMeta.positions[elementIndex + 1] - rowsMeta.positions[elementIndex] : rowsMeta.currentPageTotalHeight - rowsMeta.positions[elementIndex];
       scrollCoordinates.top = scrollIntoView({
-        clientHeight: dimensions.viewportInnerSize.height,
-        scrollTop: virtualScrollerRef.current.scrollTop,
-        offsetHeight: targetOffsetHeight,
-        offsetTop: rowsMeta.positions[elementIndex]
+        containerSize: dimensions.viewportInnerSize.height,
+        scrollPosition: virtualScrollerRef.current.scrollTop,
+        elementSize: targetOffsetHeight,
+        elementOffset: rowsMeta.positions[elementIndex]
       });
     }
     scrollCoordinates = apiRef.current.unstable_applyPipeProcessors('scrollToIndexes', scrollCoordinates, params);
@@ -100,18 +102,20 @@ export const useGridScroll = (apiRef, props) => {
     return false;
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows]);
   const scroll = React.useCallback(params => {
-    if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
+    if (virtualScrollerRef.current && virtualScrollbarHorizontalRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
+      virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left;
       logger.debug(`Scrolling left: ${params.left}`);
     }
-    if (virtualScrollerRef.current && params.top !== undefined) {
+    if (virtualScrollerRef.current && virtualScrollbarVerticalRef.current && params.top !== undefined) {
       virtualScrollerRef.current.scrollTop = params.top;
+      virtualScrollbarVerticalRef.current.scrollTop = params.top;
       logger.debug(`Scrolling top: ${params.top}`);
     }
     logger.debug(`Scrolling, updating container, and viewport`);
-  }, [virtualScrollerRef, isRtl, colRef, logger]);
+  }, [virtualScrollerRef, virtualScrollbarHorizontalRef, virtualScrollbarVerticalRef, isRtl, colRef, logger]);
   const getScrollPosition = React.useCallback(() => {
     if (!virtualScrollerRef?.current) {
       return {

package/hooks/features/sorting/gridSortingSelector.d.ts

@@ -5,17 +5,17 @@ import type { GridValidRowModel, GridRowEntry } from '../../../models/gridRows';
  * Get the id of the rows after the sorting process.
  * @category Sorting
  */
-export declare const gridSortedRowIdsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../models/gridRows").GridRowId[]>;
+export declare const gridSortedRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowId[]>;
 /**
  * Get the id and the model of the rows after the sorting process.
  * @category Sorting
  */
-export declare const gridSortedRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridRowEntry<GridValidRowModel>[]>;
+export declare const gridSortedRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, GridRowEntry<GridValidRowModel>[]>;
 /**
  * Get the current sorting model.
  * @category Sorting
  */
-export declare const gridSortModelSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridSortModel>;
+export declare const gridSortModelSelector: import("../../..").OutputSelector<GridStateCommunity, GridSortModel>;
 export type GridSortColumnLookup = Record<string, {
     sortDirection: GridSortDirection;
     sortIndex?: number;
@@ -24,4 +24,4 @@ export type GridSortColumnLookup = Record<string, {
  * @category Sorting
  * @ignore - do not document.
  */
-export declare const gridSortColumnLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridSortColumnLookup>;
+export declare const gridSortColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridSortColumnLookup>;

package/hooks/features/sorting/gridSortingUtils.js

@@ -3,7 +3,7 @@ import { warnOnce } from '@mui/x-internals/warning';
 export const sanitizeSortModel = (model, disableMultipleColumnsSorting) => {
   if (disableMultipleColumnsSorting && model.length > 1) {
     if (process.env.NODE_ENV !== 'production') {
-      warnOnce(['MUI X: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
+      warnOnce(['MUI X: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
     }
     return [model[0]];
   }

package/hooks/features/virtualization/gridVirtualizationSelectors.d.ts

@@ -10,27 +10,27 @@ export declare const gridVirtualizationSelector: (state: GridStateCommunity) =>
  * @category Virtualization
  * @deprecated Use `gridVirtualizationColumnEnabledSelector` and `gridVirtualizationRowEnabledSelector`
  */
-export declare const gridVirtualizationEnabledSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, boolean>;
+export declare const gridVirtualizationEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, boolean>;
 /**
  * Get the enabled state for column virtualization
  * @category Virtualization
  */
-export declare const gridVirtualizationColumnEnabledSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, boolean>;
+export declare const gridVirtualizationColumnEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, boolean>;
 /**
  * Get the enabled state for row virtualization
  * @category Virtualization
  */
-export declare const gridVirtualizationRowEnabledSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, boolean>;
+export declare const gridVirtualizationRowEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, boolean>;
 /**
  * Get the render context
  * @category Virtualization
  * @ignore - do not document.
  */
-export declare const gridRenderContextSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../models/params/gridScrollParams").GridRenderContext>;
+export declare const gridRenderContextSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRenderContext>;
 /**
  * Get the render context, with only columns filled in.
  * This is cached, so it can be used to only re-render when the column interval changes.
  * @category Virtualization
  * @ignore - do not document.
  */
-export declare const gridRenderContextColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridColumnsRenderContext>;
+export declare const gridRenderContextColumnsSelector: import("../../..").OutputSelector<GridStateCommunity, GridColumnsRenderContext>;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -73,8 +73,8 @@ export const useGridVirtualScroller = () => {
   const gridRootRef = apiRef.current.rootElementRef;
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
-  const scrollbarVerticalRef = React.useRef(null);
-  const scrollbarHorizontalRef = React.useRef(null);
+  const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
+  const scrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);

package/hooks/utils/useGridApiContext.js

@@ -3,7 +3,7 @@ import { GridApiContext } from "../../components/GridApiContext.js";
 export function useGridApiContext() {
   const apiRef = React.useContext(GridApiContext);
   if (apiRef === undefined) {
-    throw new Error(['MUI X: Could not find the data grid context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+    throw new Error(['MUI X: Could not find the Data Grid context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the Data Grid.'].join('\n'));
   }
   return apiRef;
 }

package/hooks/utils/useGridApiEventHandler.d.ts

@@ -5,7 +5,7 @@ import { CleanupTracking } from '../../utils/cleanupTracking/CleanupTracking';
 import type { GridApiCommon } from '../../models';
 /**
  * Signal to the underlying logic what version of the public component API
- * of the data grid is exposed.
+ * of the Data Grid is exposed.
  */
 declare enum GridSignature {
     DataGrid = "DataGrid",

package/hooks/utils/useGridApiEventHandler.js

@@ -3,7 +3,7 @@ import { TimerBasedCleanupTracking } from "../../utils/cleanupTracking/TimerBase
 import { FinalizationRegistryBasedCleanupTracking } from "../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js";
 /**
  * Signal to the underlying logic what version of the public component API
- * of the data grid is exposed.
+ * of the Data Grid is exposed.
  */
 var GridSignature = /*#__PURE__*/function (GridSignature) {
   GridSignature["DataGrid"] = "DataGrid";

package/hooks/utils/useGridConfiguration.js

@@ -3,7 +3,7 @@ import { GridConfigurationContext } from "../../components/GridConfigurationCont
 export const useGridConfiguration = () => {
   const configuration = React.useContext(GridConfigurationContext);
   if (configuration === undefined) {
-    throw new Error(['MUI X: Could not find the data grid configuration context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+    throw new Error(['MUI X: Could not find the Data Grid configuration context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the Data Grid.'].join('\n'));
   }
   return configuration;
 };

package/hooks/utils/useGridPrivateApiContext.js

@@ -6,7 +6,7 @@ if (process.env.NODE_ENV !== 'production') {
 export function useGridPrivateApiContext() {
   const privateApiRef = React.useContext(GridPrivateApiContext);
   if (privateApiRef === undefined) {
-    throw new Error(['MUI X: Could not find the data grid private context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+    throw new Error(['MUI X: Could not find the Data Grid private context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the Data Grid.'].join('\n'));
   }
   return privateApiRef;
 }

package/hooks/utils/useGridVisibleRows.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import type { GridApiCommon, GridRowEntry } from '../../models';
 export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => {
-    rows: GridRowEntry<import("../../models").GridValidRowModel>[];
+    rows: GridRowEntry<import("../..").GridValidRowModel>[];
     range: {
         firstRowIndex: number;
         lastRowIndex: number;
@@ -16,7 +16,7 @@ export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.M
  * - If the row tree is flat, it only contains up to `state.pageSize` rows.
  */
 export declare const useGridVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => {
-    rows: GridRowEntry<import("../../models").GridValidRowModel>[];
+    rows: GridRowEntry<import("../..").GridValidRowModel>[];
     range: {
         firstRowIndex: number;
         lastRowIndex: number;

package/index.d.ts

@@ -27,10 +27,10 @@ export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS, }
  */
 export type GridApi = GridApiCommunity;
 /**
- * The state of `DataGrid`.
+ * The state of Data Grid.
  */
 export type GridState = GridStateCommunity;
 /**
- * The initial state of `DataGrid`.
+ * The initial state of Data Grid.
  */
 export type GridInitialState = GridInitialStateCommunity;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.18.0
+ * @mui/x-data-grid v7.20.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -29,9 +29,9 @@ export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } f
  */
 
 /**
- * The state of `DataGrid`.
+ * The state of Data Grid.
  */
 
 /**
- * The initial state of `DataGrid`.
+ * The initial state of Data Grid.
  */

package/internals/index.d.ts

@@ -65,6 +65,7 @@ export type { GridRestoreStatePreProcessingContext } from '../hooks/features/sta
 export { useGridVirtualScroller, EMPTY_DETAIL_PANELS, } from '../hooks/features/virtualization/useGridVirtualScroller';
 export * from '../hooks/features/virtualization';
 export { useGridColumnResize, columnResizeStateInitializer, } from '../hooks/features/columnResize/useGridColumnResize';
+export { ROW_SELECTION_PROPAGATION_DEFAULT } from '../hooks/features/rowSelection/utils';
 export { useTimeout } from '../hooks/utils/useTimeout';
 export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';

package/internals/index.js

@@ -53,6 +53,7 @@ export { useGridStatePersistence } from "../hooks/features/statePersistence/useG
 export { useGridVirtualScroller, EMPTY_DETAIL_PANELS } from "../hooks/features/virtualization/useGridVirtualScroller.js";
 export * from "../hooks/features/virtualization/index.js";
 export { useGridColumnResize, columnResizeStateInitializer } from "../hooks/features/columnResize/useGridColumnResize.js";
+export { ROW_SELECTION_PROPAGATION_DEFAULT } from "../hooks/features/rowSelection/utils.js";
 export { useTimeout } from "../hooks/utils/useTimeout.js";
 export { useGridVisibleRows, getVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
 export { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";

package/joy/icons.js

@@ -34,7 +34,6 @@ function createSvgIcon(path, displayName) {
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
     return /*#__PURE__*/_jsx(SvgIcon, _extends({
-      "data-testid": `${displayName}Icon`,
       ref: ref,
       fill: "none",
       stroke: "currentColor",

package/locales/bgBG.js

@@ -30,11 +30,10 @@ const bgBGGrid = {
   toolbarExportPrint: 'Принтиране',
   toolbarExportExcel: 'Изтегли като Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Търсене',
+  columnsManagementNoColumns: 'Няма колони',
+  columnsManagementShowHideAllText: 'Покажи/Скрий Всичко',
+  columnsManagementReset: 'Нулирай',
   // Filter panel text
   filterPanelAddFilter: 'Добави Филтър',
   filterPanelRemoveAll: 'Премахни всички',
@@ -48,9 +47,9 @@ const bgBGGrid = {
   filterPanelInputPlaceholder: 'Стойност на филтъра',
   // Filter operators text
   filterOperatorContains: 'съдържа',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'не съдържа',
   filterOperatorEquals: 'равно',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'не е равно',
   filterOperatorStartsWith: 'започва с',
   filterOperatorEndsWith: 'завършва с',
   filterOperatorIs: 'е',
@@ -70,9 +69,9 @@ const bgBGGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Съдържа',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Не съдържа',
   headerFilterOperatorEquals: 'Равнo',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Не е равно',
   headerFilterOperatorStartsWith: 'Започва с',
   headerFilterOperatorEndsWith: 'Завършва с',
   headerFilterOperatorIs: 'Равно е на',

package/locales/deDE.js

@@ -47,9 +47,9 @@ const deDEGrid = {
   filterPanelInputPlaceholder: 'Wert filtern',
   // Filter operators text
   filterOperatorContains: 'enthält',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'enthält nicht',
   filterOperatorEquals: 'ist gleich',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'ist ungleich',
   filterOperatorStartsWith: 'beginnt mit',
   filterOperatorEndsWith: 'endet mit',
   filterOperatorIs: 'ist',
@@ -69,9 +69,9 @@ const deDEGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Enthält',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Enthält nicht',
   headerFilterOperatorEquals: 'Gleich',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Ungleich',
   headerFilterOperatorStartsWith: 'Beginnt mit',
   headerFilterOperatorEndsWith: 'Endet mit',
   headerFilterOperatorIs: 'Ist',

package/locales/frFR.js

@@ -47,9 +47,9 @@ const frFRGrid = {
   filterPanelInputPlaceholder: 'Filtrer la valeur',
   // Filter operators text
   filterOperatorContains: 'contient',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'ne contient pas',
   filterOperatorEquals: 'est égal à',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: "n'est pas égal à",
   filterOperatorStartsWith: 'commence par',
   filterOperatorEndsWith: 'se termine par',
   filterOperatorIs: 'est',
@@ -69,9 +69,9 @@ const frFRGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Contient',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Ne contient pas',
   headerFilterOperatorEquals: 'Est égal à',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: "N'est pas égal à",
   headerFilterOperatorStartsWith: 'Commence par',
   headerFilterOperatorEndsWith: 'Se termine par',
   headerFilterOperatorIs: 'Est',

package/locales/hrHR.d.ts

@@ -1 +1 @@
-export declare const hrHR: import("../utils/getGridLocalization").Localization;
+export declare const hrHR: import("../internals").Localization;

package/locales/hrHR.js

@@ -7,50 +7,57 @@ const hrHRGrid = {
   // Density selector toolbar button text
   toolbarDensity: 'Gustoća',
   toolbarDensityLabel: 'Gustoća',
-  toolbarDensityCompact: 'Kompaktan',
-  toolbarDensityStandard: 'Standard',
+  toolbarDensityCompact: 'Kompaktno',
+  toolbarDensityStandard: 'Standardno',
   toolbarDensityComfortable: 'Udobno',
   // Columns selector toolbar button text
   toolbarColumns: 'Stupci',
   toolbarColumnsLabel: 'Odaberite stupce',
   // Filters toolbar button text
   toolbarFilters: 'Filteri',
-  toolbarFiltersLabel: 'Prikaži filtre',
-  toolbarFiltersTooltipHide: 'Sakrij filtre',
-  toolbarFiltersTooltipShow: 'Prikaži filtre',
-  toolbarFiltersTooltipActive: count => count !== 1 ? `${count} aktivnih filtara` : `${count} aktivni filter`,
+  toolbarFiltersLabel: 'Prikaži filtere',
+  toolbarFiltersTooltipHide: 'Sakrij filtere',
+  toolbarFiltersTooltipShow: 'Prikaži filtere',
+  toolbarFiltersTooltipActive: count => {
+    if (count === 1) {
+      return `${count} aktivan filter`;
+    }
+    if (count < 5) {
+      return `${count} aktivna filtera`;
+    }
+    return `${count} aktivnih filtera`;
+  },
   // Quick filter toolbar field
   toolbarQuickFilterPlaceholder: 'Traži…',
   toolbarQuickFilterLabel: 'traži',
-  toolbarQuickFilterDeleteIconLabel: 'Čisto',
+  toolbarQuickFilterDeleteIconLabel: 'Obriši',
   // Export selector toolbar button text
   toolbarExport: 'Izvoz',
   toolbarExportLabel: 'Izvoz',
   toolbarExportCSV: 'Preuzmi kao CSV',
-  toolbarExportPrint: 'Ispis',
-  toolbarExportExcel: 'Preuzmite kao Excel',
+  toolbarExportPrint: 'Štampaj',
+  toolbarExportExcel: 'Preuzmi kao Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Traži',
+  columnsManagementNoColumns: 'Nema stupaca',
+  columnsManagementShowHideAllText: 'Prikaži/Sakrij sve',
+  columnsManagementReset: 'Ponovno namjesti',
   // Filter panel text
-  filterPanelAddFilter: 'Dodajte filter',
-  filterPanelRemoveAll: 'Ukloniti sve',
-  filterPanelDeleteIconLabel: 'Izbrisati',
+  filterPanelAddFilter: 'Dodaj filter',
+  filterPanelRemoveAll: 'Ukloni sve',
+  filterPanelDeleteIconLabel: 'Obriši',
   filterPanelLogicOperator: 'Logički operator',
-  filterPanelOperator: 'Operater',
+  filterPanelOperator: 'Operator',
   filterPanelOperatorAnd: 'I',
   filterPanelOperatorOr: 'Ili',
-  filterPanelColumns: 'Stupci',
+  filterPanelColumns: 'Stupac',
   filterPanelInputLabel: 'Vrijednost',
-  filterPanelInputPlaceholder: 'Vrijednost filtra',
+  filterPanelInputPlaceholder: 'Vrijednost filtera',
   // Filter operators text
   filterOperatorContains: 'sadrži',
-  // filterOperatorDoesNotContain: 'does not contain',
-  filterOperatorEquals: 'jednaki',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotContain: 'ne sadrži',
+  filterOperatorEquals: 'je jednak',
+  filterOperatorDoesNotEqual: 'nije jednak',
   filterOperatorStartsWith: 'počinje sa',
   filterOperatorEndsWith: 'završava sa',
   filterOperatorIs: 'je',
@@ -59,8 +66,8 @@ const hrHRGrid = {
   filterOperatorOnOrAfter: 'je na ili poslije',
   filterOperatorBefore: 'je prije',
   filterOperatorOnOrBefore: 'je na ili prije',
-  filterOperatorIsEmpty: 'prazno je',
-  filterOperatorIsNotEmpty: 'nije prazna',
+  filterOperatorIsEmpty: 'je prazno',
+  filterOperatorIsNotEmpty: 'nije prazno',
   filterOperatorIsAnyOf: 'je bilo koji od',
   'filterOperator=': '=',
   'filterOperator!=': '!=',
@@ -70,20 +77,20 @@ const hrHRGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Sadrži',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Ne sadrži',
   headerFilterOperatorEquals: 'Jednako',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Nije jednako',
   headerFilterOperatorStartsWith: 'Počinje sa',
-  headerFilterOperatorEndsWith: 'Završava s',
+  headerFilterOperatorEndsWith: 'Završava sa',
   headerFilterOperatorIs: 'Je',
   headerFilterOperatorNot: 'Nije',
   headerFilterOperatorAfter: 'Je poslije',
   headerFilterOperatorOnOrAfter: 'Je uključeno ili poslije',
-  headerFilterOperatorBefore: 'Je li prije',
-  headerFilterOperatorOnOrBefore: 'Uključeno je ili prije',
-  headerFilterOperatorIsEmpty: 'Prazno je',
-  headerFilterOperatorIsNotEmpty: 'Nije prazna',
-  headerFilterOperatorIsAnyOf: 'Je li bilo koji od',
+  headerFilterOperatorBefore: 'Je prije',
+  headerFilterOperatorOnOrBefore: 'Je uključeno ili prije',
+  headerFilterOperatorIsEmpty: 'Je prazno',
+  headerFilterOperatorIsNotEmpty: 'Nije prazno',
+  headerFilterOperatorIsAnyOf: 'Je bilo koji od',
   'headerFilterOperator=': 'Jednako',
   'headerFilterOperator!=': 'Nije jednako',
   'headerFilterOperator>': 'Veći od',
@@ -92,32 +99,48 @@ const hrHRGrid = {
   'headerFilterOperator<=': 'Manje od ili jednako',
   // Filter values text
   filterValueAny: 'bilo koji',
-  filterValueTrue: 'pravi',
-  filterValueFalse: 'lažno',
+  filterValueTrue: 'tačno',
+  filterValueFalse: 'netačno',
   // Column menu text
-  columnMenuLabel: 'Jelovnik ',
+  columnMenuLabel: 'Izbornik',
   columnMenuShowColumns: 'Prikaži stupce',
   columnMenuManageColumns: 'Upravljanje stupcima',
-  columnMenuFilter: 'filtar',
+  columnMenuFilter: 'Filter',
   columnMenuHideColumn: 'Sakrij stupac',
   columnMenuUnsort: 'Poništi sortiranje',
   columnMenuSortAsc: 'Poredaj uzlazno',
-  columnMenuSortDesc: 'Poredaj silaznim redom',
+  columnMenuSortDesc: 'Poredaj silazno',
   // Column header text
-  columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} aktivnih filtara` : `${count} aktivni filter`,
-  columnHeaderFiltersLabel: 'Prikaži filtre',
-  columnHeaderSortIconLabel: 'Vrsta',
+  columnHeaderFiltersTooltipActive: count => {
+    if (count === 1) {
+      return `${count} aktivan filter`;
+    }
+    if (count < 5) {
+      return `${count} aktivna filtera`;
+    }
+    return `${count} aktivnih filtera`;
+  },
+  columnHeaderFiltersLabel: 'Prikaži filtere',
+  columnHeaderSortIconLabel: 'Poredaj',
   // Rows selected footer text
-  footerRowSelected: count => count !== 1 ? `Odabrano je ${count.toLocaleString()} redaka` : `${count.toLocaleString()} redak odabran`,
+  footerRowSelected: count => {
+    if (count === 1) {
+      return `Odabran je ${count.toLocaleString()} redak`;
+    }
+    if (count < 5) {
+      return `Odabrana su ${count.toLocaleString()} retka`;
+    }
+    return `Odabrano je ${count.toLocaleString()} redaka`;
+  },
   // Total row amount footer text
   footerTotalRows: 'Ukupno redaka:',
   // Total visible row amount footer text
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} od ${totalCount.toLocaleString()}`,
   // Checkbox selection text
-  checkboxSelectionHeaderName: 'Odabir potvrdnog okvira',
+  checkboxSelectionHeaderName: 'Odabir redaka',
   checkboxSelectionSelectAllRows: 'Odaberite sve retke',
   checkboxSelectionUnselectAllRows: 'Poništi odabir svih redaka',
-  checkboxSelectionSelectRow: 'Odaberite red',
+  checkboxSelectionSelectRow: 'Odaberite redak',
   checkboxSelectionUnselectRow: 'Poništi odabir retka',
   // Boolean cell text
   booleanCellTrueLabel: 'Da',
@@ -129,7 +152,7 @@ const hrHRGrid = {
   pinToRight: 'Prikvači desno',
   unpin: 'Otkvači',
   // Tree Data
-  treeDataGroupingHeaderName: 'Group',
+  treeDataGroupingHeaderName: 'Skupina',
   treeDataExpand: 'vidjeti djecu',
   treeDataCollapse: 'sakriti djecu',
   // Grouping columns
@@ -139,7 +162,7 @@ const hrHRGrid = {
   // Master/detail
   detailPanelToggle: 'Prebacivanje ploče s detaljima',
   expandDetailPanel: 'Proširiti',
-  collapseDetailPanel: 'Kolaps',
+  collapseDetailPanel: 'Skupiti',
   // Row reordering text
   rowReorderingHeaderName: 'Promjena redoslijeda',
   // Aggregation