@redsift/table 10.8.2 → 11.0.0-alpha.1

package/index.js

@@ -1,9 +1,9 @@
-import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridExpandedSortedRowIdsSelector, useGridApiRef, DataGridPro, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-pro';
+import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, GRID_CHECKBOX_SELECTION_COL_DEF, useGridApiRef, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
 export * from '@mui/x-data-grid-pro';
 export { getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
 import * as React from 'react';
 import React__default, { Children, isValidElement, cloneElement, useLayoutEffect, useEffect, useRef, forwardRef, useContext, useState, useCallback, createElement, useMemo } from 'react';
-import { Icon, baseContainer, Theme, AppContainerContext, useTheme as useTheme$4, useId as useId$2, partitionComponents, isComponent, Flexbox, TextField as TextField$2, Button, Switch, Text, ButtonsColorPalette, IconButton as IconButton$2, Checkbox, ThemeProvider as ThemeProvider$4, LinkButton, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, Shield } from '@redsift/design-system';
+import { Icon, baseContainer, Theme, AppContainerContext, useTheme as useTheme$4, useId as useId$2, partitionComponents, isComponent, Flexbox, TextField as TextField$2, Button, Switch, Text, ButtonsColorPalette, IconButton as IconButton$2, Checkbox, LinkButton, ThemeProvider as ThemeProvider$4, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, Shield } from '@redsift/design-system';
 import { mdiSync, mdiFilterVariant, mdiViewColumn, mdiChevronUp, mdiChevronDown, mdiViewHeadline, mdiViewSequential, mdiViewStream, mdiChevronRight, mdiTrayArrowDown } from '@redsift/icons';
 import emStyled from '@emotion/styled';
 import { Global, ThemeContext as ThemeContext$3, keyframes } from '@emotion/react';
@@ -3625,7 +3625,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$Q = ["values", "unit", "step"];
+const _excluded$R = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -3660,7 +3660,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$Q);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$R);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -4689,7 +4689,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$P = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$Q = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -4697,7 +4697,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$P);
+    other = _objectWithoutPropertiesLoose(options, _excluded$Q);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -4765,7 +4765,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$1.propTypes /* remove-propt
   themeId: PropTypes.string
 } : void 0;
 
-const _excluded$O = ["sx"];
+const _excluded$P = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -4786,7 +4786,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$O);
+    other = _objectWithoutPropertiesLoose(props, _excluded$P);
   const {
     systemProps,
     otherProps
@@ -4812,7 +4812,7 @@ function extendSxProp(props) {
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const _excluded$N = ["className", "component"];
+const _excluded$O = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -4830,7 +4830,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$N);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$O);
     return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends$1({
       as: component,
       ref: ref,
@@ -4841,7 +4841,7 @@ function createBox(options = {}) {
   return Box;
 }
 
-const _excluded$M = ["variant"];
+const _excluded$N = ["variant"];
 function isEmpty$3(string) {
   return string.length === 0;
 }
@@ -4855,7 +4855,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$M);
+    other = _objectWithoutPropertiesLoose(props, _excluded$N);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -4867,7 +4867,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$L = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded$M = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty$2(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -4962,7 +4962,7 @@ function createStyled(input = {}) {
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$L);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$M);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -5639,7 +5639,7 @@ const green = {
 };
 var green$1 = green;
 
-const _excluded$K = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$L = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -5808,7 +5808,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$K);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$L);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -5932,7 +5932,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$J = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$K = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round$2(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -5963,7 +5963,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$K);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -6030,7 +6030,7 @@ function createShadow(...px) {
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 var shadows$1 = shadows;
 
-const _excluded$I = ["duration", "easing", "delay"];
+const _excluded$J = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = {
@@ -6081,7 +6081,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$I);
+      other = _objectWithoutPropertiesLoose(options, _excluded$J);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -6128,7 +6128,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$H = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$I = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -6136,7 +6136,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$H);
+    other = _objectWithoutPropertiesLoose(options, _excluded$I);
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : formatMuiErrorMessage(18));
@@ -6227,12 +6227,12 @@ const styled = createStyled({
 });
 var styled$1 = styled;
 
-const _excluded$G = ["theme"];
+const _excluded$H = ["theme"];
 function ThemeProvider$1(_ref) {
   let {
       theme: themeInput
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   const scopedTheme = themeInput[THEME_ID];
   return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$2, _extends$1({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
@@ -6456,7 +6456,7 @@ function mergeSlotProps(parameters) {
   };
 }
 
-const _excluded$F = ["elementType", "externalSlotProps", "ownerState"];
+const _excluded$G = ["elementType", "externalSlotProps", "ownerState"];
 /**
  * @ignore - do not document.
  * Builds the props to be passed into the slot of an unstyled component.
@@ -6472,7 +6472,7 @@ function useSlotProps(parameters) {
       externalSlotProps,
       ownerState
     } = parameters,
-    rest = _objectWithoutPropertiesLoose(parameters, _excluded$F);
+    rest = _objectWithoutPropertiesLoose(parameters, _excluded$G);
   const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
   const {
     props: mergedProps,
@@ -8688,7 +8688,7 @@ function getPopperUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPopper', ['root']);
 
-const _excluded$E = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
+const _excluded$F = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
   _excluded2$3 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
 function flipPlacement(placement, direction) {
   if (direction === 'ltr') {
@@ -8741,7 +8741,7 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
       // @ts-ignore internal logic
       // prevent from spreading to DOM, it can come from the parent component e.g. Select.
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$E);
+    other = _objectWithoutPropertiesLoose(props, _excluded$F);
   const tooltipRef = React.useRef(null);
   const ownRef = useForkRef(tooltipRef, forwardedRef);
   const popperRef = React.useRef(null);
@@ -9268,7 +9268,7 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
 
-const _excluded$D = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
+const _excluded$E = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
 const useUtilityClasses$o = ownerState => {
   const {
     open,
@@ -9337,7 +9337,7 @@ const Modal$2 = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef
       slotProps = {},
       slots = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$D);
+    other = _objectWithoutPropertiesLoose(props, _excluded$E);
   // TODO: `modal`` must change its type in this file to match the type of methods
   // provided by `ModalManager`
   const manager = managerProp;
@@ -9627,7 +9627,7 @@ process.env.NODE_ENV !== "production" ? Modal$2.propTypes /* remove-proptypes */
 } : void 0;
 var ModalUnstyled = Modal$2;
 
-const _excluded$C = ["onChange", "maxRows", "minRows", "style", "value"];
+const _excluded$D = ["onChange", "maxRows", "minRows", "style", "value"];
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
 }
@@ -9669,7 +9669,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       style,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$C);
+    other = _objectWithoutPropertiesLoose(props, _excluded$D);
   const {
     current: isControlled
   } = React.useRef(value != null);
@@ -9963,7 +9963,7 @@ function getInputBaseUtilityClass(slot) {
 const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
 var inputBaseClasses$1 = inputBaseClasses;
 
-const _excluded$B = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
+const _excluded$C = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
 const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -10194,7 +10194,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       type = 'text',
       value: valueProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$B);
+    other = _objectWithoutPropertiesLoose(props, _excluded$C);
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -10656,7 +10656,7 @@ function getInputUtilityClass(slot) {
 const inputClasses = _extends$1({}, inputBaseClasses$1, generateUtilityClasses('MuiInput', ['root', 'underline', 'input']));
 var inputClasses$1 = inputClasses;
 
-const _excluded$A = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const _excluded$B = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
 const useUtilityClasses$m = ownerState => {
   const {
     classes,
@@ -10769,7 +10769,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$A);
+    other = _objectWithoutPropertiesLoose(props, _excluded$B);
   const classes = useUtilityClasses$m(props);
   const ownerState = {
     disableUnderline
@@ -10992,7 +10992,7 @@ function getFilledInputUtilityClass(slot) {
 const filledInputClasses = _extends$1({}, inputBaseClasses$1, generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']));
 var filledInputClasses$1 = filledInputClasses;
 
-const _excluded$z = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const _excluded$A = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
 const useUtilityClasses$l = ownerState => {
   const {
     classes,
@@ -11176,7 +11176,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$z);
+    other = _objectWithoutPropertiesLoose(props, _excluded$A);
   const ownerState = _extends$1({}, props, {
     fullWidth,
     inputComponent,
@@ -11407,7 +11407,7 @@ FilledInput.muiName = 'Input';
 var FilledInput$1 = FilledInput;
 
 var _span$2;
-const _excluded$y = ["children", "classes", "className", "label", "notched"];
+const _excluded$z = ["children", "classes", "className", "label", "notched"];
 const NotchedOutlineRoot$1 = styled$1('fieldset')({
   textAlign: 'left',
   position: 'absolute',
@@ -11480,7 +11480,7 @@ function NotchedOutline(props) {
       label,
       notched
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$y);
+    other = _objectWithoutPropertiesLoose(props, _excluded$z);
   const withLabel = label != null && label !== '';
   const ownerState = _extends$1({}, props, {
     notched,
@@ -11537,7 +11537,7 @@ function getOutlinedInputUtilityClass(slot) {
 const outlinedInputClasses = _extends$1({}, inputBaseClasses$1, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
 var outlinedInputClasses$1 = outlinedInputClasses;
 
-const _excluded$x = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
+const _excluded$y = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
 const useUtilityClasses$k = ownerState => {
   const {
     classes
@@ -11656,7 +11656,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$x);
+    other = _objectWithoutPropertiesLoose(props, _excluded$y);
   const classes = useUtilityClasses$k(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -11877,7 +11877,7 @@ function getFormLabelUtilityClasses(slot) {
 const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 var formLabelClasses$1 = formLabelClasses;
 
-const _excluded$w = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
+const _excluded$x = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
 const useUtilityClasses$j = ownerState => {
   const {
     classes,
@@ -11942,7 +11942,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
       className,
       component = 'label'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$w);
+    other = _objectWithoutPropertiesLoose(props, _excluded$x);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -12033,7 +12033,7 @@ function getInputLabelUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
 
-const _excluded$v = ["disableAnimation", "margin", "shrink", "variant", "className"];
+const _excluded$w = ["disableAnimation", "margin", "shrink", "variant", "className"];
 const useUtilityClasses$i = ownerState => {
   const {
     classes,
@@ -12135,7 +12135,7 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
       shrink: shrinkProp,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$v);
+    other = _objectWithoutPropertiesLoose(props, _excluded$w);
   const muiFormControl = useFormControl();
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
@@ -12238,7 +12238,7 @@ function getFormControlUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 
-const _excluded$u = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
+const _excluded$v = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
 const useUtilityClasses$h = ownerState => {
   const {
     classes,
@@ -12324,7 +12324,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       size = 'medium',
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$u);
+    other = _objectWithoutPropertiesLoose(props, _excluded$v);
   const ownerState = _extends$1({}, props, {
     color,
     component,
@@ -12520,7 +12520,7 @@ const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root
 var formHelperTextClasses$1 = formHelperTextClasses;
 
 var _span$1;
-const _excluded$t = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
+const _excluded$u = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
 const useUtilityClasses$g = ownerState => {
   const {
     classes,
@@ -12579,7 +12579,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
       className,
       component = 'p'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$t);
+    other = _objectWithoutPropertiesLoose(props, _excluded$u);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -12685,7 +12685,7 @@ function getListUtilityClass(slot) {
 }
 generateUtilityClasses('MuiList', ['root', 'padding', 'dense', 'subheader']);
 
-const _excluded$s = ["children", "className", "component", "dense", "disablePadding", "subheader"];
+const _excluded$t = ["children", "className", "component", "dense", "disablePadding", "subheader"];
 const useUtilityClasses$f = ownerState => {
   const {
     classes,
@@ -12733,7 +12733,7 @@ const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
       disablePadding = false,
       subheader
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$s);
+    other = _objectWithoutPropertiesLoose(props, _excluded$t);
   const context = React.useMemo(() => ({
     dense
   }), [dense]);
@@ -12800,7 +12800,7 @@ process.env.NODE_ENV !== "production" ? List.propTypes /* remove-proptypes */ =
 } : void 0;
 var List$1 = List;
 
-const _excluded$r = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
+const _excluded$s = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
 function nextItem(list, item, disableListWrap) {
   if (list === item) {
     return list.firstChild;
@@ -12882,7 +12882,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       onKeyDown,
       variant = 'selectedMenu'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$r);
+    other = _objectWithoutPropertiesLoose(props, _excluded$s);
   const listRef = React.useRef(null);
   const textCriteriaRef = React.useRef({
     keys: [],
@@ -14072,7 +14072,7 @@ function getTransitionProps(props, options) {
   };
 }
 
-const _excluded$q = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$r = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 function getScale$1(value) {
   return `scale(${value}, ${value ** 2})`;
 }
@@ -14116,7 +14116,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$q);
+    other = _objectWithoutPropertiesLoose(props, _excluded$r);
   const timer = React.useRef();
   const autoTimeout = React.useRef();
   const theme = useTheme();
@@ -14320,7 +14320,7 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
 Grow.muiSupportAuto = true;
 var Grow$1 = Grow;
 
-const _excluded$p = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$q = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 const styles = {
   entering: {
     opacity: 1
@@ -14357,7 +14357,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$p);
+    other = _objectWithoutPropertiesLoose(props, _excluded$q);
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -14518,7 +14518,7 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
-const _excluded$o = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+const _excluded$p = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 const useUtilityClasses$e = ownerState => {
   const {
     classes,
@@ -14573,7 +14573,7 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       TransitionComponent = Fade$1,
       transitionDuration
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$o);
+    other = _objectWithoutPropertiesLoose(props, _excluded$p);
   const ownerState = _extends$1({}, props, {
     component,
     invisible
@@ -14694,7 +14694,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
 } : void 0;
 var Backdrop$1 = Backdrop;
 
-const _excluded$n = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
+const _excluded$o = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
 const ModalRoot = styled$1('div', {
   name: 'MuiModal',
   slot: 'Root',
@@ -14773,7 +14773,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       // eslint-disable-next-line react/prop-types
       theme
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$n);
+    other = _objectWithoutPropertiesLoose(props, _excluded$o);
   const [exited, setExited] = React.useState(true);
   const commonProps = {
     container,
@@ -14997,7 +14997,7 @@ function getPaperUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
-const _excluded$m = ["className", "component", "elevation", "square", "variant"];
+const _excluded$n = ["className", "component", "elevation", "square", "variant"];
 const useUtilityClasses$d = ownerState => {
   const {
     square,
@@ -15052,7 +15052,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       square = false,
       variant = 'elevation'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$m);
+    other = _objectWithoutPropertiesLoose(props, _excluded$n);
   const ownerState = _extends$1({}, props, {
     component,
     elevation,
@@ -15133,7 +15133,7 @@ function getPopoverUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPopover', ['root', 'paper']);
 
-const _excluded$l = ["onEntering"],
+const _excluded$m = ["onEntering"],
   _excluded2$2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
   _excluded3 = ["slotProps"];
 function getOffsetTop(rect, vertical) {
@@ -15230,7 +15230,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
         onEntering
       } = {}
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$l),
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$m),
     other = _objectWithoutPropertiesLoose(props, _excluded2$2);
   const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
   const paperRef = React.useRef();
@@ -15636,7 +15636,7 @@ function getMenuUtilityClass(slot) {
 }
 generateUtilityClasses('MuiMenu', ['root', 'paper', 'list']);
 
-const _excluded$k = ["onEntering"],
+const _excluded$l = ["onEntering"],
   _excluded2$1 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
 const RTL_ORIGIN = {
   vertical: 'top',
@@ -15703,7 +15703,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       } = {},
       variant = 'selectedMenu'
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$k),
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$l),
     other = _objectWithoutPropertiesLoose(props, _excluded2$1);
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
@@ -15893,7 +15893,7 @@ function getNativeSelectUtilityClasses(slot) {
 const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 var nativeSelectClasses$1 = nativeSelectClasses;
 
-const _excluded$j = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
+const _excluded$k = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
 const useUtilityClasses$a = ownerState => {
   const {
     classes,
@@ -16022,7 +16022,7 @@ const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInp
       inputRef,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$j);
+    other = _objectWithoutPropertiesLoose(props, _excluded$k);
   const ownerState = _extends$1({}, props, {
     disabled,
     variant,
@@ -16107,7 +16107,7 @@ const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple',
 var selectClasses$1 = selectClasses;
 
 var _span;
-const _excluded$i = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
+const _excluded$j = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
 const SelectSelect = styled$1('div', {
   name: 'MuiSelect',
   slot: 'Select',
@@ -16229,7 +16229,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       value: valueProp,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$i);
+    other = _objectWithoutPropertiesLoose(props, _excluded$j);
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -16740,7 +16740,7 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded$h = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const _excluded$i = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 const useUtilityClasses$8 = ownerState => {
   const {
     color,
@@ -16806,7 +16806,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$h);
+    other = _objectWithoutPropertiesLoose(props, _excluded$i);
   const ownerState = _extends$1({}, props, {
     color,
     component,
@@ -16932,7 +16932,7 @@ var ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path"
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
-const _excluded$g = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
+const _excluded$h = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
 const useUtilityClasses$7 = ownerState => {
   const {
     classes
@@ -16976,7 +16976,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       SelectDisplayProps,
       variant: variantProp = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$g);
+    other = _objectWithoutPropertiesLoose(props, _excluded$h);
   const inputComponent = native ? NativeSelectInput$1 : SelectInput$1;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -17199,7 +17199,7 @@ function getTextFieldUtilityClass(slot) {
 }
 generateUtilityClasses('MuiTextField', ['root']);
 
-const _excluded$f = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
+const _excluded$g = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
 const variantComponent = {
   standard: Input$1,
   filled: FilledInput$1,
@@ -17292,7 +17292,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
       value,
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$f);
+    other = _objectWithoutPropertiesLoose(props, _excluded$g);
   const ownerState = _extends$1({}, props, {
     autoFocus,
     color,
@@ -17662,6 +17662,48 @@ const IS_BETWEEN = isBetweenOperator;
 
 const getGridNumericOperators = () => [...getGridNumericOperators$1(), IS_BETWEEN];
 
+const doesNotEqual = {
+  label: 'does not equal',
+  value: 'doesNotEqual',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.value) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (params.value === filterItem.value) {
+        return false;
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_EQUAL = doesNotEqual;
+
+const doesNotContain = {
+  label: 'does not contain',
+  value: 'doesNotContain',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (params.value.indexOf(filterItem.value) !== -1) {
+        return false;
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_CONTAIN = doesNotContain;
+
 const containsAnyOfOperator = {
   label: 'contains any of',
   value: 'containsAnyOf',
@@ -17816,7 +17858,40 @@ const STARTS_WITH_ANY_OF = startsWithAnyOfOperator;
 
 const getGridStringArrayOperators = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF];
 
-const getGridStringOperators = () => [...getGridStringOperators$1(), ...getGridStringArrayOperators()];
+const getGridStringOperators = () => [...getGridStringOperators$1().filter(operator => !['isAnyOf'].includes(operator.value)), DOES_NOT_CONTAIN, DOES_NOT_EQUAL, ...getGridStringArrayOperators()];
+
+// istanbul ignore file
+const operatorList = {
+  // Default types
+  string: getGridStringOperators$1(),
+  number: getGridNumericOperators$1(),
+  boolean: getGridBooleanOperators(),
+  date: getGridDateOperators(),
+  dateTime: getGridDateOperators(true),
+  singleSelect: getGridSingleSelectOperators(),
+  // Extended types
+  rsString: getGridStringOperators(),
+  rsNumber: getGridNumericOperators(),
+  // Custom types
+  rsStringArray: getGridStringArrayOperators()
+};
+
+const getRsStringColumnType = () => {
+  return {
+    type: 'string',
+    filterOperators: operatorList.rsString
+  };
+};
+const getRsNumberColumnType = () => {
+  return {
+    type: 'number',
+    filterOperators: operatorList.rsNumber
+  };
+};
+const customColumnTypes = {
+  rsString: getRsStringColumnType(),
+  rsNumber: getRsNumberColumnType()
+};
 
 const API_URL = 'https://api.openai.com/v1/chat/completions';
 async function getCompletion(text, role, openai_api_key) {
@@ -17849,6 +17924,699 @@ async function getCompletion(text, role, openai_api_key) {
   }
 }
 
+const PAGINATION_MODEL_KEY = 'paginationModel';
+const FILTER_MODEL_KEY = 'filterModel';
+const SORT_MODEL_KEY = 'sortModel';
+const VISIBILITY_MODEL_KEY = 'visibilityModel';
+const PINNED_COLUMNS = 'pinnedColumns';
+const DIMENSION_MODEL_KEY = 'dimension';
+const FILTER_SEARCH_KEY = 'searchModel';
+const CATEGORIES = [PAGINATION_MODEL_KEY, FILTER_MODEL_KEY, SORT_MODEL_KEY, VISIBILITY_MODEL_KEY, DIMENSION_MODEL_KEY, FILTER_SEARCH_KEY, PINNED_COLUMNS];
+const buildStorageKey = _ref => {
+  let {
+    id,
+    version,
+    category
+  } = _ref;
+  return `${id}:${version}:${category}`;
+};
+const clearPreviousVersionStorage = (id, currentVersion) => {
+  const previousVersion = currentVersion - 1;
+  if (previousVersion < 1) {
+    return;
+  }
+  const keysToDelete = [buildStorageKey({
+    id,
+    version: previousVersion,
+    category: PAGINATION_MODEL_KEY
+  }), buildStorageKey({
+    id,
+    version: previousVersion,
+    category: SORT_MODEL_KEY
+  }), buildStorageKey({
+    id,
+    version: previousVersion,
+    category: FILTER_MODEL_KEY
+  }), buildStorageKey({
+    id,
+    version: previousVersion,
+    category: VISIBILITY_MODEL_KEY
+  }), buildStorageKey({
+    id,
+    version: previousVersion,
+    category: PINNED_COLUMNS
+  }), buildStorageKey({
+    id,
+    version: previousVersion,
+    category: FILTER_SEARCH_KEY
+  }), buildStorageKey({
+    id,
+    version: previousVersion,
+    category: DIMENSION_MODEL_KEY
+  })];
+  for (const keyToDelete of keysToDelete) {
+    try {
+      window.localStorage.removeItem(keyToDelete);
+    } catch (e) {
+      // Ignore
+    }
+  }
+};
+
+// reference value: https://www.w3schools.com/tags/ref_urlencode.ASP
+const DECODER = {
+  '%20': ' ',
+  '%26': '&',
+  '%3D': '=',
+  '%3F': '?',
+  '%5B': '[',
+  '%5D': ']',
+  '%2C': ',',
+  '%3C': '<',
+  '%3E': '>',
+  '%21': '!',
+  '%22': '"'
+};
+const ENCODER = {
+  ' ': '%20',
+  '&': '%26',
+  '=': '%3D',
+  '?': '%3F',
+  '[': '%5B',
+  ']': '%5D',
+  ',': '%2C',
+  '<': '%3C',
+  '>': '%3E',
+  '!': '%21',
+  '"': '%22'
+};
+const decodeValue = value => {
+  if (value === '') {
+    return '';
+  }
+  const re = new RegExp(Object.keys(DECODER).reduce((acc, curr) => `${acc}|${curr}`), 'g');
+  // decodeValue for lists:
+  if (value.startsWith('list[')) {
+    const arrayValues = value.split('[')[1].split(']')[0];
+    const arrayList = arrayValues.split(',').map(v => v.replace(re, encoded => DECODER[encoded])).filter(item => item);
+    return arrayList.length > 0 ? arrayList : [];
+  }
+  return value.replace(re, encoded => DECODER[encoded]);
+};
+const encodeValue = value => {
+  if (!value) {
+    return '';
+  }
+
+  // Array encoding for value:
+  // we are representing it as list[encoded], where encoded is the list comma separated
+  if (Array.isArray(value)) {
+    const encodedArray = value.map(entry => {
+      return String(entry).replace(/\s|&|=|\?|\[|\]/g, encoded => ENCODER[encoded]);
+    }).join(',');
+    return `list[${encodedArray}]`;
+  }
+
+  // we might also pass integers
+  const castedValue = String(value);
+  return castedValue.replace(/\s|&|=|\?|\[|\]/g, encoded => ENCODER[encoded]);
+};
+const urlSearchParamsToString = searchParams => {
+  let searchString = '';
+  for (const [key, value] of searchParams) {
+    searchString = searchString + `${key}=${value}&`;
+  }
+  return searchString.slice(0, searchString.length - 1);
+};
+const numberOperatorEncoder = {
+  '=': 'eq',
+  '!=': 'ne',
+  '>': 'gt',
+  '>=': 'gte',
+  '<': 'lt',
+  '<=': 'lte'
+};
+const numberOperatorDecoder = {
+  eq: '=',
+  ne: '!=',
+  gt: '>',
+  gte: '>=',
+  lt: '<',
+  lte: '<='
+};
+const isOperatorValueValid = (field, operator, columns) => {
+  const column = columns.find(column => column.field === field);
+  if (!column) {
+    return false;
+  }
+  const columnType = (column === null || column === void 0 ? void 0 : column.type) || 'string';
+  const operators = column.filterOperators || operatorList[columnType];
+  if (!operators) {
+    return false;
+  }
+  return !!operators.find(op => columnType === 'number' && Object.keys(numberOperatorEncoder).includes(op.value) ? numberOperatorEncoder[op.value] === operator : op.value === operator);
+};
+const listOperators = ['containsAnyOf', 'endsWithAnyOf', 'isAnyOf', 'isNotAnyOf', 'startsWithAnyOf'];
+
+// Check if the value doesn't break
+const isValueValid = (value, field, columns, operator) => {
+  var _column$type;
+  // every field accepts undefined as value for default
+  if (value === undefined) {
+    return true;
+  }
+
+  // xxxAnyOf accepts as value only lists, and we are declaring them in the
+  // URL as `list=[...]`
+  if (listOperators.includes(operator)) {
+    return Array.isArray(value) || value === '';
+  }
+
+  // We are accepting arrays only if they are of the 'xxxAnyOf' type
+  if (Array.isArray(value) && !listOperators.includes(operator)) {
+    return false;
+  }
+  const column = columns.find(column => column.field === field);
+  if (!column) {
+    return false;
+  }
+  const type = (_column$type = column['type']) !== null && _column$type !== void 0 ? _column$type : 'string';
+
+  // Only date and rating fail with 500s, other set themselves as undefined
+  if (type !== 'date' && type !== 'rating') {
+    return true;
+  }
+
+  // just checking that rating is a number.
+  if (type === 'rating') {
+    return !isNaN(Number(value));
+  }
+
+  // format: YYYY-MM-DD
+  // just verifying that the 3 values are numbers to avoid 500s,
+  // If the value is invalid the form will appear as undefined
+  if (type === 'date') {
+    const dateSplitted = value.split('-');
+    if (dateSplitted.length !== 3) {
+      return false;
+    }
+    const [YYYY, MM, DD] = dateSplitted;
+    return !isNaN(parseInt(YYYY)) && !isNaN(parseInt(MM)) && !isNaN(parseInt(DD));
+  }
+  return false;
+};
+
+// example:
+// unicodeDomain[contains]=a&unicodeDomain[contains]=dsa&logicOperator=and&tab=ignored
+const getFilterModelFromString = (searchString, columns) => {
+  if (!searchString) {
+    return {
+      items: [],
+      logicOperator: GridLogicOperator.And
+    };
+  }
+  let logicOperator = GridLogicOperator.And;
+  const searchParams = new URLSearchParams();
+  for (const [key, value] of new URLSearchParams(searchString)) {
+    if (key.startsWith('_') && !['_logicOperator', '_sortColumn', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_columnVisibility'].includes(key)) {
+      searchParams.set(key, value);
+    }
+    if (key === '_logicOperator') {
+      logicOperator = value;
+    }
+  }
+  let id = 5000;
+  const fields = columns.map(column => column.field);
+  let isInvalid = false;
+  const items = [];
+  searchParams.forEach((value, key) => {
+    var _columns$find;
+    if (isInvalid) {
+      return;
+    }
+    const field = key.split('[')[0].slice(1); // Slice to remove the _ at the beginning
+    if (!fields.includes(field)) {
+      return;
+    }
+    const columnType = (_columns$find = columns.find(column => column.field === field)) === null || _columns$find === void 0 ? void 0 : _columns$find.type;
+    const left = key.split(']')[0];
+    if (left.split('[').length < 2) {
+      isInvalid = true;
+      return;
+    }
+    const operator = decodeValue(key.split('[')[1].split(']')[0]);
+    // if the operator is not part of the valid operators invalidate the URL
+    if (!isOperatorValueValid(field, operator, columns) || Array.isArray(operator)) {
+      isInvalid = true;
+      return;
+    }
+    id += 1;
+    const decodedValue = decodeValue(value);
+    if (!isValueValid(decodedValue, field, columns, operator)) {
+      isInvalid = true;
+      return;
+    }
+    items.push({
+      field,
+      operator: columnType === 'number' && Object.keys(numberOperatorDecoder).includes(operator) ? numberOperatorDecoder[operator] : operator,
+      id,
+      value: listOperators.includes(operator) && decodedValue === '' ? [] : decodedValue
+    });
+  });
+
+  // If we found some condition that results in an invalid URL,
+  // return the empty filterModel (this will trigger the localStorage)
+  // and will pick up the last valid search
+  if (isInvalid) {
+    return {
+      items: [],
+      logicOperator: GridLogicOperator.And
+    };
+  }
+  return {
+    items,
+    logicOperator
+  };
+};
+const getSearchParamsFromFilterModel = filterModel => {
+  const searchParams = new URLSearchParams();
+  searchParams.set('_logicOperator', filterModel['logicOperator'] || '');
+  filterModel['items'].forEach(item => {
+    const {
+      field,
+      operator,
+      value
+    } = item;
+    if (Object.keys(numberOperatorEncoder).includes(operator)) {
+      searchParams.set(`_${field}[${numberOperatorEncoder[operator]}]`, encodeValue(value));
+    } else {
+      searchParams.set(`_${field}[${encodeValue(operator)}]`, encodeValue(value));
+    }
+  });
+  return searchParams;
+};
+
+// Rules:
+// - if we have something in the URL, use that info
+// - if we don't have that, use the localStorage and update the URL
+// - if we don't have that, return an empty FilterModel
+const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFilters) => {
+  const filterModelFromSearch = getFilterModelFromString(search, columns);
+  if (filterModelFromSearch.items.length > 0) {
+    const searchFromFilterModel = getSearchParamsFromFilterModel(filterModelFromSearch);
+    const searchString = urlSearchParamsToString(searchFromFilterModel);
+    if (searchString !== localStorageFilters) {
+      setLocalStorageFilters(searchString);
+    }
+    return filterModelFromSearch;
+  }
+  const filterModelFromLocalStorage = getFilterModelFromString(localStorageFilters, columns);
+  if (filterModelFromLocalStorage) {
+    return filterModelFromLocalStorage;
+  }
+  return {
+    items: [],
+    logicOperator: GridLogicOperator.And
+  };
+};
+const getSortingFromString = (notParsed, columns) => {
+  // If the string is empty return the default model
+  if (!notParsed) {
+    return null;
+  }
+  // remove the initial ? if present
+  const parsed = notParsed[0] === '?' ? notParsed.slice(1) : notParsed;
+  for (const item of parsed.split('&')) {
+    const fieldURL = item.split('=')[0];
+    if (fieldURL !== '_sortColumn') {
+      continue;
+    }
+    const left = item.split(']')[0];
+    if (left.split('[').length < 2) {
+      continue;
+    }
+    const value = item.split('[')[1].split(']')[0];
+    if (value === '') {
+      return [];
+    }
+    const fields = columns.map(column => column.field);
+    const [column, order] = value.split(',');
+    if (fields.includes(column) && (order === 'asc' || order === 'desc')) {
+      return [{
+        field: column,
+        sort: order
+      }];
+    }
+    continue;
+  }
+
+  // No information was found about the sorting model in the URL
+  return null;
+};
+const getSearchParamsFromSorting = sorting => {
+  const searchParams = new URLSearchParams();
+  searchParams.set('_sortColumn', sorting.length > 0 && sorting[0].sort ? `[${encodeValue(sorting[0].field)},${encodeValue(sorting[0].sort)}]` : '[]');
+  return searchParams;
+};
+
+// Rules:
+// - if we have something in the URL, use that info
+// - if we don't have that, use the localStorage and update the URL
+// - if we don't have that, return an empty SortModel
+const getSortModel = (search, columns, localStorageSorting, setLocalStorageSorting) => {
+  const sorting = getSortingFromString(search, columns);
+  if (sorting) {
+    const searchFromSortModel = getSearchParamsFromSorting(sorting);
+    if (searchFromSortModel.toString() !== localStorageSorting) {
+      setLocalStorageSorting(searchFromSortModel.toString());
+    }
+    return sorting;
+  }
+  const sortModelFromLocalStorage = getSortingFromString(localStorageSorting, columns);
+  if (sortModelFromLocalStorage) {
+    return sortModelFromLocalStorage;
+  }
+  return [];
+};
+const getSearchParamsFromColumnVisibility = (columnVisibility, columns) => {
+  const searchParams = new URLSearchParams();
+  const fields = columns.map(column => column.field);
+
+  // if column visibility model is empty, show all columns
+  if (Object.keys(columnVisibility).length == 0) {
+    searchParams.set('_columnVisibility', `[${fields.join(',')}]`);
+    return searchParams;
+  }
+  const finalColumnVisibility = columns.filter(c => {
+    var _c$hideable;
+    return !((_c$hideable = c === null || c === void 0 ? void 0 : c.hideable) !== null && _c$hideable !== void 0 ? _c$hideable : true);
+  }).map(c => c.field).reduce((acc, colName) => {
+    return _objectSpread2(_objectSpread2({}, acc), {}, {
+      [colName]: true
+    });
+  }, columnVisibility);
+  const visibleColumns = Object.entries(finalColumnVisibility)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  .filter(_ref => {
+    let [_, visible] = _ref;
+    return visible;
+  })
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  .map(_ref2 => {
+    let [column, _] = _ref2;
+    return encodeValue(column);
+  });
+  searchParams.set('_columnVisibility', `[${visibleColumns.join(',')}]`);
+  return searchParams;
+};
+const getColumnVisibilityFromString = (notParsed, tableColumns) => {
+  if (!notParsed || notParsed.length === 1 && notParsed[0] === '?') {
+    return null;
+  }
+  // remove the initial ? if present
+  const parsed = notParsed[0] === '?' ? notParsed.slice(1) : notParsed;
+  const visibility = {};
+  let exist = false;
+  let visibleColumnsCount = 0;
+  for (const item of parsed.split('&')) {
+    // if it's not column visibility field, skip
+    const fieldURL = item.split('=')[0];
+    if (fieldURL !== '_columnVisibility') {
+      continue;
+    }
+    // e.g. item = _columnVisibility[abc,def]
+    const left = item.split(']')[0];
+    if (left.split('[').length < 2) {
+      continue;
+    }
+    const encodedValues = item.split('[')[1].split(']')[0];
+    if (typeof encodedValues !== 'string') {
+      continue;
+    }
+    exist = true;
+    const fields = tableColumns.map(column => column.field);
+    // TODO: Add validation that , is present
+    const columns = encodedValues.split(',').map(value => decodeValue(value));
+
+    // for each column, check if it's visible and add it to visibility model
+    for (const column of fields) {
+      const isColumnVisible = columns.includes(column);
+      visibility[column] = isColumnVisible;
+      if (isColumnVisible) {
+        visibleColumnsCount += 1;
+      }
+    }
+  }
+  if (visibleColumnsCount === 0 && !exist) {
+    return null;
+  }
+  return visibility;
+};
+
+// Rules:
+// - if we have something in the URL, use that info
+// - if we don't have that, use the localStorage and update the URL
+// - if we don't have that, return an empty ColumnVisibilityModel (which is all columns)
+// NOTE: the `defaultHidden` is a custom field and not standard DataGrid
+// The reason is the following bug: https://github.com/mui/mui-x/issues/8407
+const getColumnsVisibility = (search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility) => {
+  const columnVisibility = getColumnVisibilityFromString(search, columns);
+  if (columnVisibility) {
+    const searchColumnVisibility = getSearchParamsFromColumnVisibility(columnVisibility, columns);
+    if (searchColumnVisibility.toString() !== localStorageColumnsVisibility) {
+      setLocalStorageColumnsVisibility(searchColumnVisibility.toString());
+    }
+    return columnVisibility;
+  }
+  const columnVisibilityFromLocalStorage = getColumnVisibilityFromString(localStorageColumnsVisibility, columns);
+  if (columnVisibilityFromLocalStorage) {
+    return columnVisibilityFromLocalStorage;
+  }
+
+  // No columns in URL or localStorage, just show them all expect the hidden ones
+  const res = {};
+  for (const column of columns) {
+    const field = column.field;
+    res[field] = column.defaultHidden !== true; // undefined will be true
+  }
+
+  return res;
+};
+const getPinnedColumnsFromString = (notParsed, tableColumns) => {
+  if (!notParsed || notParsed.length === 1 && notParsed[0] === '?') {
+    return null;
+  }
+  // remove the initial ? if present
+  const parsed = notParsed[0] === '?' ? notParsed.slice(1) : notParsed;
+  const pinnedColumns = {};
+  for (const item of parsed.split('&')) {
+    const fieldURL = item.split('=')[0];
+    if (fieldURL !== '_pinnedColumnsLeft' && fieldURL !== '_pinnedColumnsRight') {
+      continue;
+    }
+    const left = item.split(']')[0];
+    if (left.split('[').length < 2) {
+      continue;
+    }
+    const encodedValues = item.split('[')[1].split(']')[0];
+    if (typeof encodedValues !== 'string') {
+      continue;
+    }
+    const fields = [...tableColumns.map(column => column.field), '__check__'];
+    const columns = encodedValues.split(',').map(value => decodeValue(value)).filter(val => typeof val === 'string' && fields.includes(val));
+    if (fieldURL === '_pinnedColumnsLeft') {
+      pinnedColumns['left'] = columns;
+    }
+    if (fieldURL === '_pinnedColumnsRight') {
+      pinnedColumns['right'] = columns;
+    }
+  }
+  if (pinnedColumns.left || pinnedColumns.right) {
+    return {
+      left: pinnedColumns['left'] || [],
+      right: pinnedColumns['right'] || []
+    };
+  }
+  return null;
+};
+const getSearchParamsFromPinnedColumns = pinnedColumns => {
+  var _pinnedColumns$left, _pinnedColumns$right;
+  const searchParams = new URLSearchParams();
+  const pinnedColumnLeft = ((_pinnedColumns$left = pinnedColumns.left) === null || _pinnedColumns$left === void 0 ? void 0 : _pinnedColumns$left.map(val => encodeValue(val))) || [];
+  const pinnedColumnRight = ((_pinnedColumns$right = pinnedColumns.right) === null || _pinnedColumns$right === void 0 ? void 0 : _pinnedColumns$right.map(val => encodeValue(val))) || [];
+  searchParams.set('_pinnedColumnsLeft', `[${pinnedColumnLeft.join(',')}]`);
+  searchParams.set('_pinnedColumnsRight', `[${pinnedColumnRight.join(',')}]`);
+  return searchParams;
+};
+
+// Rules:
+// - if we have something in the URL, use that info
+// - if we don't have that, use the localStorage and update the URL
+// - if we don't have that, return an empty ColumnVisibilityModel (which is all columns)
+const getPinnedColumns = (search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns) => {
+  const pinnedColumns = getPinnedColumnsFromString(search, columns);
+  if (pinnedColumns) {
+    const searchPinnedColumns = getSearchParamsFromPinnedColumns(pinnedColumns);
+    if (searchPinnedColumns.toString() !== localStoragePinnedColumns) {
+      setLocalStoragePinnedColumns(searchPinnedColumns.toString());
+    }
+    return pinnedColumns;
+  }
+  const pinnedColumnsFromLocalStorage = getPinnedColumnsFromString(localStoragePinnedColumns, columns);
+  if (pinnedColumnsFromLocalStorage) {
+    return pinnedColumnsFromLocalStorage;
+  }
+
+  // No pinnedColumn in URL or localStorage, TODO: decide what is the default state
+  const res = {
+    left: [],
+    right: []
+  };
+  return res;
+};
+const getSearchParamsFromTab = search => {
+  const searchParams = new URLSearchParams();
+  const openTab = new URLSearchParams(search).get('tab');
+  if (openTab) {
+    searchParams.set('tab', openTab);
+  }
+  return searchParams;
+};
+const getFinalSearch = _ref3 => {
+  let {
+    search,
+    filterModel,
+    sortModel,
+    columnsVisibilityModel,
+    pinnedColumnsModel,
+    columns
+  } = _ref3;
+  const filterModelSearch = getSearchParamsFromFilterModel(filterModel);
+  const sortModelSearch = getSearchParamsFromSorting(sortModel);
+  const columnVisibilityModelSearch = getSearchParamsFromColumnVisibility(columnsVisibilityModel, columns);
+  const pinnedColumnsModelSearch = getSearchParamsFromPinnedColumns(pinnedColumnsModel);
+  const tabSearch = getSearchParamsFromTab(search);
+  const searchParams = new URLSearchParams();
+  for (const [key, value] of new URLSearchParams(search)) {
+    if (!key.startsWith('_')) {
+      searchParams.set(key, value);
+    }
+  }
+  return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch]);
+};
+/** Return the state of the table given the URL and the local storage state */
+const getModelsParsedOrUpdateLocalStorage = (search, columns, historyReplace, localStorage) => {
+  const {
+    localStorageFilters,
+    setLocalStorageFilters,
+    localStorageSorting,
+    setLocalStorageSorting,
+    localStorageColumnsVisibility,
+    setLocalStorageColumnsVisibility,
+    localStoragePinnedColumns,
+    setLocalStoragePinnedColumns
+  } = localStorage;
+  const filterModel = getFilterModel(search, columns, localStorageFilters, setLocalStorageFilters);
+  const sortModel = getSortModel(search, columns, localStorageSorting, setLocalStorageSorting);
+  const columnVisibilityModel = getColumnsVisibility(search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility);
+  const pinnedColumnsModel = getPinnedColumns(search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns);
+  const finalSearch = getFinalSearch({
+    search,
+    filterModel,
+    sortModel,
+    columnsVisibilityModel: columnVisibilityModel,
+    pinnedColumnsModel,
+    columns
+  });
+  const searchString = urlSearchParamsToString(finalSearch);
+  if (searchString !== search) {
+    historyReplace(searchString);
+  }
+  return {
+    filterModel,
+    sortModel,
+    columnVisibilityModel,
+    pinnedColumnsModel
+  };
+};
+const updateUrl = (_ref4, search, historyReplace, columns) => {
+  let {
+    filterModel,
+    sortModel,
+    columnsModel: columnsVisibilityModel,
+    pinnedColumnsModel
+  } = _ref4;
+  const newSearch = getFinalSearch({
+    search,
+    filterModel,
+    sortModel,
+    columnsVisibilityModel,
+    pinnedColumnsModel,
+    columns
+  });
+  const searchString = urlSearchParamsToString(newSearch);
+  if (searchString !== search) {
+    historyReplace(searchString);
+  }
+};
+
+// Note: this is a comparator to sort the filters, not pure comparison
+// do not use it for equivalence (e.g. with value `3` and undefined we
+// will get 0).
+const compareFilters = (firstFilter, secondFilter) => {
+  if (firstFilter.field < secondFilter.field) {
+    return -1;
+  } else if (firstFilter.field > secondFilter.field) {
+    return 1;
+  }
+  if (firstFilter.operator === undefined || secondFilter.operator === undefined) {
+    return 0;
+  }
+  if (firstFilter.operator < secondFilter.operator) {
+    return -1;
+  } else if (firstFilter.operator > secondFilter.operator) {
+    return 1;
+  }
+  if (firstFilter.value < secondFilter.value) {
+    return -1;
+  } else if (firstFilter.value > secondFilter.value) {
+    return 1;
+  }
+  return 0;
+};
+const areFiltersEquivalent = (firstFilter, secondFilter) => {
+  return firstFilter.field === secondFilter.field && firstFilter.operator === secondFilter.operator && firstFilter.value === secondFilter.value;
+};
+const areFilterModelsEquivalent = (filterModel, filterModelToMatch) => {
+  const {
+    items,
+    logicOperator
+  } = filterModel;
+  const {
+    items: itemsToMatch,
+    logicOperator: logicOperatorToMatch
+  } = filterModelToMatch;
+  if (logicOperator !== logicOperatorToMatch) {
+    return false;
+  }
+  if (items.length !== itemsToMatch.length) {
+    return false;
+  }
+  items.sort(compareFilters);
+  itemsToMatch.sort(compareFilters);
+  for (let i = 0; i < items.length; i++) {
+    const filter = items[i];
+    const filterToCompare = itemsToMatch[i];
+
+    // compareFilters return 0 if and only if the filters have the same
+    // field, operator, and value
+    if (!areFiltersEquivalent(filter, filterToCompare)) {
+      return false;
+    }
+  }
+  return true;
+};
+
 // Store the license information in a global, so it can be shared
 // when module duplication occurs. The duplication of the modules can happen
 // if using multiple version of MUI X at the same time of the bundler
@@ -21921,7 +22689,7 @@ const StyledGridToolbarFilterSemanticField = styled$3.form`
   }
 `;
 
-const _excluded$e = ["className", "nlpFilterConfig", "onFilterModelChange", "dateFormat", "defaultModel", "defaultFilter", "disablePower", "localeText"];
+const _excluded$f = ["className", "nlpFilterConfig", "onFilterModelChange", "dateFormat", "defaultModel", "defaultFilter", "disablePower", "localeText"];
 const COMPONENT_NAME$2 = 'GridToolbarFilterSemanticField';
 const CLASSNAME$2 = 'redsift-datagrid-toolbar-nlp-filter-field';
 const DEFAULT_OPERATORS = {
@@ -22006,7 +22774,7 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
       disablePower = false,
       localeText
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$f);
   const {
     textLabel,
     textPlaceholder,
@@ -22101,7 +22869,7 @@ GridToolbarFilterSemanticField.displayName = COMPONENT_NAME$2;
 
 /** ------ */
 
-const Toolbar$3 = props => {
+const Toolbar$2 = props => {
   const {
     hasExportButton = true,
     exportButtonProps,
@@ -22154,7 +22922,7 @@ const Toolbar$3 = props => {
   }, semanticFilterProps ? /*#__PURE__*/React__default.createElement(GridToolbarFilterSemanticField, semanticFilterProps) : null)));
 };
 
-const _excluded$d = ["displayName"];
+const _excluded$e = ["displayName"];
 const muiIconToDSIcon = {
   ColumnFilteredIcon: mdiFilterVariant,
   ColumnSelectorIcon: mdiViewColumn,
@@ -22172,7 +22940,7 @@ const BaseIcon = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       displayName
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$e);
   return /*#__PURE__*/React__default.createElement(Icon, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
     ref: ref,
     size: forwardedProps.fontSize,
@@ -22180,7 +22948,7 @@ const BaseIcon = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 
-const _excluded$c = ["children", "color", "onClick", "startIcon"];
+const _excluded$d = ["children", "color", "onClick", "startIcon"];
 const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
   var _props$className;
   const {
@@ -22189,7 +22957,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
       onClick,
       startIcon
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
   const color = Object.keys(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
   if ((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes('redsift-condensed')) {
     return /*#__PURE__*/React__default.createElement(IconButton$2, _extends$2({}, forwardedProps, {
@@ -22215,7 +22983,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
   }), children);
 });
 
-const _excluded$b = ["checked", "indeterminate", "disabled", "onChange"];
+const _excluded$c = ["checked", "indeterminate", "disabled", "onChange"];
 const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       checked,
@@ -22223,7 +22991,7 @@ const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
       disabled,
       onChange
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
   return /*#__PURE__*/React__default.createElement(Checkbox, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
     isSelected: checked && !indeterminate,
     isDisabled: disabled,
@@ -22233,7 +23001,7 @@ const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 
-const _excluded$a = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
+const _excluded$b = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
 const PopperRoot = styled$1(BasePopper$1, {
   name: 'MuiPopper',
   slot: 'Root',
@@ -22276,7 +23044,7 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
       slots,
       slotProps
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$a);
+    other = _objectWithoutPropertiesLoose(props, _excluded$b);
   const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
   const otherProps = _extends$1({
     anchorEl,
@@ -22516,7 +23284,7 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
 const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 var touchRippleClasses$1 = touchRippleClasses;
 
-const _excluded$9 = ["center", "classes", "className"];
+const _excluded$a = ["center", "classes", "className"];
 let _ = t => t,
   _t,
   _t2,
@@ -22645,7 +23413,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       classes = {},
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$9);
+    other = _objectWithoutPropertiesLoose(props, _excluded$a);
   const [ripples, setRipples] = React.useState([]);
   const nextKey = React.useRef(0);
   const rippleCallback = React.useRef(null);
@@ -22846,7 +23614,7 @@ function getButtonBaseUtilityClass(slot) {
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 var buttonBaseClasses$1 = buttonBaseClasses;
 
-const _excluded$8 = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+const _excluded$9 = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 const useUtilityClasses$5 = ownerState => {
   const {
     disabled,
@@ -22948,7 +23716,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       touchRippleRef,
       type
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$8);
+    other = _objectWithoutPropertiesLoose(props, _excluded$9);
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -23321,7 +24089,7 @@ function getMenuItemUtilityClass(slot) {
 const menuItemClasses = generateUtilityClasses('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
 var menuItemClasses$1 = menuItemClasses;
 
-const _excluded$7 = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
+const _excluded$8 = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -23443,7 +24211,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       tabIndex: tabIndexProp,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$7);
+    other = _objectWithoutPropertiesLoose(props, _excluded$8);
   const context = React.useContext(ListContext$1);
   const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
@@ -23586,7 +24354,7 @@ function getTableCellUtilityClass(slot) {
 const tableCellClasses = generateUtilityClasses('MuiTableCell', ['root', 'head', 'body', 'footer', 'sizeSmall', 'sizeMedium', 'paddingCheckbox', 'paddingNone', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'stickyHeader']);
 var tableCellClasses$1 = tableCellClasses;
 
-const _excluded$6 = ["align", "className", "component", "padding", "scope", "size", "sortDirection", "variant"];
+const _excluded$7 = ["align", "className", "component", "padding", "scope", "size", "sortDirection", "variant"];
 const useUtilityClasses$3 = ownerState => {
   const {
     classes,
@@ -23683,7 +24451,7 @@ const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref)
       sortDirection,
       variant: variantProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$6);
+    other = _objectWithoutPropertiesLoose(props, _excluded$7);
   const table = React.useContext(TableContext$1);
   const tablelvl2 = React.useContext(Tablelvl2Context$1);
   const isHeadCell = tablelvl2 && tablelvl2.variant === 'head';
@@ -23790,7 +24558,7 @@ function getToolbarUtilityClass(slot) {
 }
 generateUtilityClasses('MuiToolbar', ['root', 'gutters', 'regular', 'dense']);
 
-const _excluded$5 = ["className", "component", "disableGutters", "variant"];
+const _excluded$6 = ["className", "component", "disableGutters", "variant"];
 const useUtilityClasses$2 = ownerState => {
   const {
     classes,
@@ -23831,7 +24599,7 @@ const ToolbarRoot = styled$1('div', {
   theme,
   ownerState
 }) => ownerState.variant === 'regular' && theme.mixins.toolbar);
-const Toolbar$1 = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
+const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiToolbar'
@@ -23842,7 +24610,7 @@ const Toolbar$1 = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
       disableGutters = false,
       variant = 'regular'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$5);
+    other = _objectWithoutPropertiesLoose(props, _excluded$6);
   const ownerState = _extends$1({}, props, {
     component,
     disableGutters,
@@ -23856,7 +24624,7 @@ const Toolbar$1 = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
     ownerState: ownerState
   }, other));
 });
-process.env.NODE_ENV !== "production" ? Toolbar$1.propTypes /* remove-proptypes */ = {
+process.env.NODE_ENV !== "production" ? Toolbar.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -23894,7 +24662,7 @@ process.env.NODE_ENV !== "production" ? Toolbar$1.propTypes /* remove-proptypes
    */
   variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['dense', 'regular']), PropTypes.string])
 } : void 0;
-var Toolbar$2 = Toolbar$1;
+var Toolbar$1 = Toolbar;
 
 var KeyboardArrowLeft = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
@@ -23910,7 +24678,7 @@ function getIconButtonUtilityClass(slot) {
 const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
 var iconButtonClasses$1 = iconButtonClasses;
 
-const _excluded$4 = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+const _excluded$5 = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 const useUtilityClasses$1 = ownerState => {
   const {
     classes,
@@ -24011,7 +24779,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
       disableFocusRipple = false,
       size = 'medium'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
   const ownerState = _extends$1({}, props, {
     edge,
     color,
@@ -24109,7 +24877,7 @@ var FirstPageIcon = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
 }), 'FirstPage');
 
 var _LastPageIcon, _FirstPageIcon, _KeyboardArrowRight, _KeyboardArrowLeft, _KeyboardArrowLeft2, _KeyboardArrowRight2, _FirstPageIcon2, _LastPageIcon2;
-const _excluded$3 = ["backIconButtonProps", "count", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton"];
+const _excluded$4 = ["backIconButtonProps", "count", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton"];
 const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
   const {
       backIconButtonProps,
@@ -24122,7 +24890,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       showFirstButton,
       showLastButton
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
   const theme = useTheme();
   const handleFirstPageButtonClick = event => {
     onPageChange(event, 0);
@@ -24226,7 +24994,7 @@ const tablePaginationClasses = generateUtilityClasses('MuiTablePagination', ['ro
 var tablePaginationClasses$1 = tablePaginationClasses;
 
 var _InputBase;
-const _excluded$2 = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton"];
+const _excluded$3 = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton"];
 const TablePaginationRoot = styled$1(TableCell$1, {
   name: 'MuiTablePagination',
   slot: 'Root',
@@ -24242,7 +25010,7 @@ const TablePaginationRoot = styled$1(TableCell$1, {
     padding: 0
   }
 }));
-const TablePaginationToolbar = styled$1(Toolbar$2, {
+const TablePaginationToolbar = styled$1(Toolbar$1, {
   name: 'MuiTablePagination',
   slot: 'Toolbar',
   overridesResolver: (props, styles) => _extends$1({
@@ -24373,7 +25141,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
       showFirstButton = false,
       showLastButton = false
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$2);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const MenuItemComponent = SelectProps.native ? 'option' : TablePaginationMenuItem;
@@ -24592,10 +25360,47 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
 } : void 0;
 var TablePagination$1 = TablePagination;
 
-const _excluded$1 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "ControlledPagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "paginationProps", "paginationMode", "rowCount"],
-  _excluded2 = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "rowSelectionModel", "paginationModel", "onPaginationModelChange", "onRowSelectionModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "paginationMode", "rowCount"];
-const COMPONENT_NAME$1 = 'DataGrid';
-const CLASSNAME$1 = 'redsift-datagrid';
+const ServerSideControlledPagination = _ref => {
+  let {
+    selectionStatus,
+    displaySelection,
+    displayPagination,
+    paginationModel,
+    onPaginationModelChange,
+    pageSizeOptions,
+    displayRowsPerPage,
+    paginationProps,
+    rowCount
+  } = _ref;
+  const totalNumberOfRowsInTable = rowCount;
+  const totalRowsLabel = `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`;
+  const pageRowsLabel = `All ${selectionStatus.numberOfSelectedRowsInPage} selectable rows on this page are selected${selectionStatus.numberOfSelectedRows != selectionStatus.numberOfSelectedRowsInPage ? ` (${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected in total)` : ''}.`;
+  return /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: "7px"
+  }, displaySelection ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, selectionStatus.type === 'page' && selectionStatus.numberOfSelectedRowsInPage != 0 ? /*#__PURE__*/React__default.createElement(Text, {
+    fontSize: "14px"
+  }, pageRowsLabel) : selectionStatus.type === 'other' ? /*#__PURE__*/React__default.createElement(Text, {
+    fontSize: "14px"
+  }, totalRowsLabel) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, _extends$2({
+    component: "div",
+    count: totalNumberOfRowsInTable,
+    page: paginationModel.page,
+    onPageChange: (event, page) => onPaginationModelChange({
+      page,
+      pageSize: paginationModel.pageSize
+    }),
+    rowsPerPage: paginationModel.pageSize,
+    onRowsPerPageChange: event => onPaginationModelChange({
+      page: paginationModel.page,
+      pageSize: parseInt(event.target.value, 10)
+    }),
+    rowsPerPageOptions: displayRowsPerPage ? pageSizeOptions : []
+  }, paginationProps)) : null);
+};
+
 const getSelectableRowsInTable = (apiRef, isRowSelectable) => {
   return isRowSelectable && typeof isRowSelectable === 'function' ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref => {
     let {
@@ -24663,54 +25468,15 @@ const ControlledPagination = _ref3 => {
     rowsPerPageOptions: displayRowsPerPage ? pageSizeOptions : []
   }, paginationProps)) : null);
 };
-const ServerSideControlledPagination = _ref4 => {
-  let {
-    selectionStatus,
-    displaySelection,
-    displayPagination,
-    paginationModel,
-    onPaginationModelChange,
-    pageSizeOptions,
-    displayRowsPerPage,
-    paginationProps,
-    rowCount
-  } = _ref4;
-  const totalNumberOfRowsInTable = rowCount;
-  const totalRowsLabel = `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`;
-  const pageRowsLabel = `All ${selectionStatus.numberOfSelectedRowsInPage} selectable rows on this page are selected${selectionStatus.numberOfSelectedRows != selectionStatus.numberOfSelectedRowsInPage ? ` (${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected in total)` : ''}.`;
-  return /*#__PURE__*/React__default.createElement(Flexbox, {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: "7px"
-  }, displaySelection ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, selectionStatus.type === 'page' && selectionStatus.numberOfSelectedRowsInPage != 0 ? /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: "14px"
-  }, pageRowsLabel) : selectionStatus.type === 'other' ? /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: "14px"
-  }, totalRowsLabel) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, _extends$2({
-    component: "div",
-    count: totalNumberOfRowsInTable,
-    page: paginationModel.page,
-    onPageChange: (event, page) => onPaginationModelChange({
-      page,
-      pageSize: paginationModel.pageSize
-    }),
-    rowsPerPage: paginationModel.pageSize,
-    onRowsPerPageChange: event => onPaginationModelChange({
-      page: paginationModel.page,
-      pageSize: parseInt(event.target.value, 10)
-    }),
-    rowsPerPageOptions: displayRowsPerPage ? pageSizeOptions : []
-  }, paginationProps)) : null);
-};
-const Toolbar = _ref5 => {
+
+const _excluded$2 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "paginationProps", "paginationMode", "rowCount"];
+const ToolbarWrapper = _ref => {
   let {
       hideToolbar,
       RenderedToolbar,
       filterModel,
       onFilterModelChange,
       pagination,
-      ControlledPagination,
       paginationPlacement,
       selectionStatus,
       apiRef,
@@ -24721,8 +25487,8 @@ const Toolbar = _ref5 => {
       paginationProps,
       paginationMode = 'client',
       rowCount
-    } = _ref5,
-    forwardedProps = _objectWithoutProperties(_ref5, _excluded$1);
+    } = _ref,
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$2);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !hideToolbar ? /*#__PURE__*/React__default.createElement(RenderedToolbar, _extends$2({}, forwardedProps, {
     filterModel: filterModel,
     onFilterModelChange: onFilterModelChange
@@ -24749,18 +25515,258 @@ const Toolbar = _ref5 => {
     paginationProps: paginationProps
   }) : null);
 };
+
+// Get and Set data from LocalStorage WITHOUT useState
+
+// triggering a state update and consecutive re-render
+const useFetchState = (defaultValue, key) => {
+  let stickyValue = null;
+  try {
+    stickyValue = window.localStorage.getItem(key);
+  } catch (e) {
+    console.error('StatefulDataGrid: error getting item from local storage: ', e);
+  }
+  let parsedValue = stickyValue !== null && stickyValue !== undefined && stickyValue !== 'undefined' ? JSON.parse(stickyValue) : defaultValue;
+
+  // TODO: temporary workaround to avoid clashes when someone had sorting on the now-removed screenshot field (renamed to num_annotations)
+  // Consider upgrading the Datagrid component library as the exception handling was added in this PR: https://github.com/mui-org/material-ui-x/pull/3224
+  if (parsedValue instanceof Array) {
+    const fields = (parsedValue || []).map(item => item.field);
+    if (fields.includes('screenshot') || fields.includes('diffs')) {
+      parsedValue = defaultValue;
+    }
+  }
+  const updateValue = useCallback(value => {
+    try {
+      window.localStorage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      console.error('StatefulDataGrid: error setting item into local storage: ', e);
+    }
+  }, [key]);
+  return [parsedValue, updateValue];
+};
+
+function useLocalStorage(key, defaultValue) {
+  const [value, setValue] = useState(() => {
+    let currentValue;
+    try {
+      currentValue = JSON.parse(localStorage.getItem(key) || String(defaultValue));
+    } catch (error) {
+      currentValue = defaultValue;
+    }
+    return currentValue;
+  });
+  useEffect(() => {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      console.error('local-storage: error setting item into local storage: ', e);
+    }
+  }, [value, key]);
+  return [value, setValue];
+}
+
+const useTableStates = (id, version, customDefaults) => {
+  const [paginationModel, setPaginationModel] = useLocalStorage(buildStorageKey({
+    id,
+    version,
+    category: PAGINATION_MODEL_KEY
+  }), {
+    page: 0,
+    pageSize: 10
+  });
+  const [sortModel, setSortModel] = useFetchState(customDefaults && customDefaults[SORT_MODEL_KEY] ? customDefaults[SORT_MODEL_KEY] : '', buildStorageKey({
+    id,
+    version,
+    category: SORT_MODEL_KEY
+  }));
+  const [localStorageFilters, setLocalStorageFilters] = useFetchState('', buildStorageKey({
+    id,
+    version,
+    category: FILTER_SEARCH_KEY
+  }));
+  const [visibilityModelLocalStorage, setVisibilityModelLocalStorage] = useFetchState('', buildStorageKey({
+    id,
+    version,
+    category: VISIBILITY_MODEL_KEY
+  }));
+  const [pinnedColumns, setPinnedColumns] = useFetchState(customDefaults ? customDefaults[PINNED_COLUMNS] : '_pinnedColumnsLeft=[]&_pinnedColumnsRight=[]', buildStorageKey({
+    id,
+    version,
+    category: PINNED_COLUMNS
+  }));
+  const [dimensionModel, setDimensionModel] = useFetchState({}, buildStorageKey({
+    id,
+    version,
+    category: DIMENSION_MODEL_KEY
+  }));
+  return {
+    paginationModel,
+    setPaginationModel,
+    sortModel,
+    setSortModel,
+    localStorageFilters,
+    setLocalStorageFilters,
+    visibilityModelLocalStorage,
+    setVisibilityModelLocalStorage,
+    pinnedColumns,
+    setPinnedColumns,
+    dimensionModel,
+    setDimensionModel
+  };
+};
+
+const DATAGRID_VERSION = 1;
+const useStatefulTable = props => {
+  const {
+    // density = 'standard',
+    apiRef,
+    columns: propsColumns,
+    onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
+    onColumnWidthChange: propsOnColumnWidthChange,
+    onFilterModelChange: propsOnFilterModelChange,
+    onPaginationModelChange: propsOnPaginationModelChange,
+    onPinnedColumnsChange: propsOnPinnedColumnsChange,
+    onSortModelChange: propsOnSortModelChange,
+    pinnedCustomColumns = {
+      left: [],
+      right: []
+    },
+    useRouter,
+    version = DATAGRID_VERSION
+  } = props;
+  const {
+    search,
+    pathname,
+    historyReplace
+  } = useRouter();
+  const id = pathname;
+  const customDefaults = useMemo(() => {
+    return {
+      pinnedColumns: `_pinnedColumnsLeft=[${[GRID_CHECKBOX_SELECTION_COL_DEF.field, ...pinnedCustomColumns.left].join(',')}]&_pinnedColumnsRight=[${pinnedCustomColumns.right.join(',')}]`
+    };
+  }, [pinnedCustomColumns]);
+
+  // States and setters persisted in the local storage for this table
+  const {
+    paginationModel,
+    setPaginationModel,
+    sortModel,
+    setSortModel,
+    localStorageFilters,
+    setLocalStorageFilters,
+    visibilityModelLocalStorage,
+    setVisibilityModelLocalStorage,
+    pinnedColumns,
+    setPinnedColumns,
+    dimensionModel,
+    setDimensionModel
+  } = useTableStates(id, version, customDefaults);
+
+  // clearing up old version keys, triggering only on first render
+  useEffect(() => clearPreviousVersionStorage(id, version), [id, version]);
+  const onColumnDimensionChange = useCallback(_ref => {
+    let {
+      newWidth,
+      field
+    } = _ref;
+    setDimensionModel(_objectSpread2(_objectSpread2({}, dimensionModel), {}, {
+      [field]: newWidth
+    }));
+  }, [dimensionModel, setDimensionModel]);
+  const {
+    filterModel: filterParsed,
+    sortModel: sortModelParsed,
+    columnVisibilityModel: visibilityModel,
+    pinnedColumnsModel
+  } = getModelsParsedOrUpdateLocalStorage(search || '', propsColumns, historyReplace, {
+    localStorageFilters,
+    setLocalStorageFilters,
+    localStorageSorting: sortModel,
+    setLocalStorageSorting: setSortModel,
+    localStorageColumnsVisibility: visibilityModelLocalStorage,
+    setLocalStorageColumnsVisibility: setVisibilityModelLocalStorage,
+    localStoragePinnedColumns: pinnedColumns,
+    setLocalStoragePinnedColumns: setPinnedColumns
+  });
+  const columns = useMemo(() => propsColumns.map(column => {
+    column.width = dimensionModel[column.field] || column.width || 100;
+    return column;
+  }), [propsColumns, dimensionModel]);
+  return {
+    apiRef,
+    columns,
+    onFilterModelChange: (model, details) => {
+      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(model, details);
+      updateUrl({
+        filterModel: model,
+        sortModel: sortModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, historyReplace, columns);
+    },
+    filterModel: filterParsed,
+    onSortModelChange: (model, details) => {
+      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: model,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, historyReplace, columns);
+    },
+    sortModel: sortModelParsed,
+    onPinnedColumnsChange: (pinnedColumns, details) => {
+      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumns
+      }, search, historyReplace, columns);
+    },
+    pinnedColumns: pinnedColumnsModel,
+    paginationModel,
+    onPaginationModelChange: (model, details) => {
+      propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(model, details);
+      setPaginationModel(model);
+    },
+    columnVisibilityModel: visibilityModel,
+    onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
+      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        columnsModel: columnsVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, historyReplace, columns);
+    },
+    onColumnWidthChange: (params, event, details) => {
+      propsOnColumnWidthChange === null || propsOnColumnWidthChange === void 0 ? void 0 : propsOnColumnWidthChange(params, event, details);
+      onColumnDimensionChange({
+        newWidth: params.width,
+        field: params.colDef.field
+      });
+    }
+  };
+};
+
+const _excluded$1 = ["apiRef", "columns", "onColumnVisibilityModelChange", "onColumnWidthChange", "onFilterModelChange", "onPaginationModelChange", "onPinnedColumnsChange", "onSortModelChange", "pinnedCustomColumns", "rows", "useRouter"],
+  _excluded2 = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "height", "hideToolbar", "initialState", "isRowSelectable", "isStateful", "license", "onFilterModelChange", "rowSelectionModel", "paginationModel", "onPaginationModelChange", "onRowSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "pagination", "paginationPlacement", "paginationProps", "pinnedCustomColumns", "rows", "pageSizeOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount"];
+const COMPONENT_NAME$1 = 'DataGrid';
+const CLASSNAME$1 = 'redsift-datagrid';
 const onServerSideSelectionStatusChange = (newSelectionModel, apiRef, selectionStatus, isRowSelectable, page, pageSize) => {
-  const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref6 => {
+  const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
     let {
       model
-    } = _ref6;
+    } = _ref;
     return isRowSelectable({
       row: model
     });
-  }).map(_ref7 => {
+  }).map(_ref2 => {
     let {
       id
-    } = _ref7;
+    } = _ref2;
     return id;
   }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
   const numberOfSelectableRowsInPage = selectableRowsInPage.length;
@@ -24804,8 +25810,41 @@ const onServerSideSelectionStatusChange = (newSelectionModel, apiRef, selectionS
     };
   }
 };
+const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      // density = 'standard',
+      apiRef,
+      columns,
+      onColumnVisibilityModelChange,
+      onColumnWidthChange,
+      onFilterModelChange,
+      onPaginationModelChange,
+      onPinnedColumnsChange,
+      onSortModelChange,
+      pinnedCustomColumns,
+      rows,
+      useRouter
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  const statefulTableProps = useStatefulTable({
+    apiRef: apiRef,
+    columns,
+    onFilterModelChange,
+    onPinnedColumnsChange,
+    onSortModelChange,
+    onPaginationModelChange,
+    onColumnVisibilityModelChange,
+    onColumnWidthChange,
+    pinnedCustomColumns,
+    useRouter: useRouter
+  });
+  return /*#__PURE__*/React__default.createElement(DataGridPro, _extends$2({
+    ref: ref,
+    rows: rows
+  }, forwardedProps, statefulTableProps));
+});
 const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
-  var _ref8, _ref9, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _pageSizeOptions$, _ref10, _initialState$paginat4, _initialState$paginat5, _initialState$paginat6;
+  var _ref3, _ref4, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _pageSizeOptions$, _ref5, _initialState$paginat4, _initialState$paginat5, _initialState$paginat6;
   const datagridRef = ref || useRef();
   const {
       apiRef: propsApiRef,
@@ -24814,23 +25853,32 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       slots,
       slotProps,
       filterModel: propsFilterModel,
+      columnVisibilityModel: propsColumnVisibilityModel,
+      pinnedColumns: propsPinnedColumns,
+      sortModel: propsSortModel,
       height: propsHeight,
       hideToolbar,
       initialState,
       isRowSelectable,
+      isStateful: propsIsStateful,
       license = process.env.MUI_LICENSE_KEY,
       onFilterModelChange: propsOnFilterModelChange,
       rowSelectionModel: propsSelectionModel,
       paginationModel: propsPaginationModel,
       onPaginationModelChange: propsOnPaginationModelChange,
       onRowSelectionModelChange,
+      onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
+      onPinnedColumnsChange: propsOnPinnedColumnsChange,
+      onSortModelChange: propsOnSortModelChange,
       pagination,
       paginationPlacement = 'both',
       paginationProps,
+      pinnedCustomColumns,
       rows,
       pageSizeOptions,
       sx,
       theme: propsTheme,
+      useRouter,
       paginationMode = 'client',
       rowCount
     } = props,
@@ -24838,7 +25886,7 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme$4(propsTheme);
   const _apiRef = useGridApiRef();
   const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
-  const RenderedToolbar = slots !== null && slots !== void 0 && slots.toolbar ? slots.toolbar : Toolbar$3;
+  const RenderedToolbar = slots !== null && slots !== void 0 && slots.toolbar ? slots.toolbar : Toolbar$2;
   LicenseInfo.setLicenseKey(license);
   const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
   const [filterModel, setFilterModel] = useState(propsFilterModel);
@@ -24852,13 +25900,46 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       setFilterModel(model);
     }
   };
+  const [columnVisibilityModel, setColumnVisibilityModel] = useState(propsColumnVisibilityModel);
+  useEffect(() => {
+    setColumnVisibilityModel(propsColumnVisibilityModel);
+  }, [propsColumnVisibilityModel]);
+  const onColumnVisibilityModelChange = (model, details) => {
+    if (propsOnColumnVisibilityModelChange) {
+      propsOnColumnVisibilityModelChange(model, details);
+    } else {
+      setColumnVisibilityModel(model);
+    }
+  };
+  const [pinnedColumns, setPinnedColumns] = useState(propsPinnedColumns);
+  useEffect(() => {
+    setPinnedColumns(propsPinnedColumns);
+  }, [propsPinnedColumns]);
+  const onPinnedColumnsChange = (model, details) => {
+    if (propsOnPinnedColumnsChange) {
+      propsOnPinnedColumnsChange(model, details);
+    } else {
+      setPinnedColumns(model);
+    }
+  };
+  const [sortModel, setSortModel] = useState(propsSortModel);
+  useEffect(() => {
+    setSortModel(propsSortModel);
+  }, [propsSortModel]);
+  const onSortModelChange = (model, details) => {
+    if (propsOnSortModelChange) {
+      propsOnSortModelChange(model, details);
+    } else {
+      setSortModel(model);
+    }
+  };
   const [rowSelectionModel, setRowSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
   useEffect(() => {
     setRowSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
   }, [propsSelectionModel]);
   const [paginationModel, setPaginationModel] = useState({
-    pageSize: (_ref8 = (_ref9 = (_initialState$paginat = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : (_initialState$paginat3 = _initialState$paginat2.paginationModel) === null || _initialState$paginat3 === void 0 ? void 0 : _initialState$paginat3.pageSize) !== null && _initialState$paginat !== void 0 ? _initialState$paginat : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.pageSize) !== null && _ref9 !== void 0 ? _ref9 : typeof (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) === 'number' ? pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0] : pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : (_pageSizeOptions$ = pageSizeOptions[0]) === null || _pageSizeOptions$ === void 0 ? void 0 : _pageSizeOptions$.value) !== null && _ref8 !== void 0 ? _ref8 : 100,
-    page: (_ref10 = (_initialState$paginat4 = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat5 = initialState.pagination) === null || _initialState$paginat5 === void 0 ? void 0 : (_initialState$paginat6 = _initialState$paginat5.paginationModel) === null || _initialState$paginat6 === void 0 ? void 0 : _initialState$paginat6.page) !== null && _initialState$paginat4 !== void 0 ? _initialState$paginat4 : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.page) !== null && _ref10 !== void 0 ? _ref10 : 0
+    pageSize: (_ref3 = (_ref4 = (_initialState$paginat = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : (_initialState$paginat3 = _initialState$paginat2.paginationModel) === null || _initialState$paginat3 === void 0 ? void 0 : _initialState$paginat3.pageSize) !== null && _initialState$paginat !== void 0 ? _initialState$paginat : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.pageSize) !== null && _ref4 !== void 0 ? _ref4 : typeof (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) === 'number' ? pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0] : pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : (_pageSizeOptions$ = pageSizeOptions[0]) === null || _pageSizeOptions$ === void 0 ? void 0 : _pageSizeOptions$.value) !== null && _ref3 !== void 0 ? _ref3 : 100,
+    page: (_ref5 = (_initialState$paginat4 = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat5 = initialState.pagination) === null || _initialState$paginat5 === void 0 ? void 0 : (_initialState$paginat6 = _initialState$paginat5.paginationModel) === null || _initialState$paginat6 === void 0 ? void 0 : _initialState$paginat6.page) !== null && _initialState$paginat4 !== void 0 ? _initialState$paginat4 : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.page) !== null && _ref5 !== void 0 ? _ref5 : 0
   });
   const onPaginationModelChange = model => {
     if (propsOnPaginationModelChange) {
@@ -24902,6 +25983,8 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   }), [theme]);
+  const isStateful = propsIsStateful && useRouter;
+  const RenderedDataGrid = isStateful ? StatefulDataGrid : DataGridPro;
   return /*#__PURE__*/React__default.createElement(ThemeProvider$4, {
     value: {
       theme
@@ -24912,7 +25995,10 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     ref: datagridRef,
     className: classNames(DataGrid.className, className),
     $height: height
-  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends$2({}, forwardedProps, {
+  }, /*#__PURE__*/React__default.createElement(RenderedDataGrid, _extends$2({}, isStateful ? {
+    pinnedCustomColumns,
+    useRouter
+  } : {}, forwardedProps, {
     rowCount: rowCount,
     apiRef: apiRef,
     autoHeight: autoHeight,
@@ -24956,7 +26042,7 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
         displayName: "OpenFilterButtonIcon"
       }, props))
     }, slots), {}, {
-      toolbar: Toolbar,
+      toolbar: ToolbarWrapper,
       pagination: props => pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$2({}, props, {
         displaySelection: false,
         displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
@@ -24989,7 +26075,6 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
         filterModel,
         onFilterModelChange,
         pagination,
-        ControlledPagination: paginationMode == 'server' ? ServerSideControlledPagination : ControlledPagination,
         paginationPlacement,
         selectionStatus,
         apiRef,
@@ -25003,9 +26088,17 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar)
     }),
     filterModel: filterModel,
+    columnVisibilityModel: columnVisibilityModel,
+    pinnedColumns: pinnedColumns,
+    sortModel: sortModel,
     initialState: initialState,
     isRowSelectable: isRowSelectable,
     onFilterModelChange: onFilterModelChange,
+    onColumnVisibilityModelChange: onColumnVisibilityModelChange
+    // onColumnWidthChange={onColumnWidthChange}
+    ,
+    onPinnedColumnsChange: onPinnedColumnsChange,
+    onSortModelChange: onSortModelChange,
     pagination: pagination,
     paginationMode: paginationMode,
     keepNonExistentRowsSelected: paginationMode == 'server',
@@ -25016,31 +26109,31 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     rowSelectionModel: rowSelectionModel,
     onRowSelectionModelChange: (newSelectionModel, details) => {
       if (pagination && paginationMode != 'server') {
-        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref11 => {
+        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref6 => {
           let {
             model
-          } = _ref11;
+          } = _ref6;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref12 => {
+        }).map(_ref7 => {
           let {
             id
-          } = _ref12;
+          } = _ref7;
           return id;
         }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
         const numberOfSelectableRowsInPage = selectableRowsInPage.length;
-        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref13 => {
+        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref8 => {
           let {
             model
-          } = _ref13;
+          } = _ref8;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref14 => {
+        }).map(_ref9 => {
           let {
             id
-          } = _ref14;
+          } = _ref9;
           return id;
         }) : gridFilteredSortedRowIdsSelector(apiRef);
         const numberOfSelectableRowsInTable = selectableRowsInTable.length;
@@ -25146,5 +26239,5 @@ const TextCell = /*#__PURE__*/forwardRef((props, ref) => {
 TextCell.className = CLASSNAME;
 TextCell.displayName = COMPONENT_NAME;
 
-export { CONTAINS_ANY_OF, CONTAINS_ANY_OF_I, DEFAULT_OPERATORS, DETAIL_PANEL_TOGGLE_COL_DEF, DataGrid, ENDS_WITH_ANY_OF, GridToolbarFilterSemanticField, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF, TextCell, Toolbar$3 as Toolbar, getCompletion, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators };
+export { CATEGORIES, CONTAINS_ANY_OF, CONTAINS_ANY_OF_I, DEFAULT_OPERATORS, DETAIL_PANEL_TOGGLE_COL_DEF, DIMENSION_MODEL_KEY, DOES_NOT_CONTAIN, DOES_NOT_EQUAL, DataGrid, ENDS_WITH_ANY_OF, FILTER_MODEL_KEY, FILTER_SEARCH_KEY, GridToolbarFilterSemanticField, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, PAGINATION_MODEL_KEY, PINNED_COLUMNS, SORT_MODEL_KEY, STARTS_WITH_ANY_OF, TextCell, Toolbar$2 as Toolbar, VISIBILITY_MODEL_KEY, areFilterModelsEquivalent, buildStorageKey, clearPreviousVersionStorage, customColumnTypes, decodeValue, encodeValue, getColumnVisibilityFromString, getCompletion, getFilterModelFromString, getFinalSearch, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators, getModelsParsedOrUpdateLocalStorage, getPinnedColumnsFromString, getRsNumberColumnType, getRsStringColumnType, getSearchParamsFromColumnVisibility, getSearchParamsFromFilterModel, getSearchParamsFromPinnedColumns, getSearchParamsFromSorting, getSearchParamsFromTab, getSortingFromString, isOperatorValueValid, isValueValid, numberOperatorDecoder, numberOperatorEncoder, operatorList, updateUrl, urlSearchParamsToString };
 //# sourceMappingURL=index.js.map