material-react-table 0.35.0 → 0.36.0

package/dist/esm/material-react-table.esm.js

@@ -3,6 +3,7 @@ import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel,
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
 import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, alpha, useMediaQuery, Toolbar, lighten, ListItemText, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
+import { useVirtual } from 'react-virtual';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -873,7 +874,7 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) =
 };
 
 const MRT_EditActionButtons = ({ row, table }) => {
-    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onEditRowSubmit, }, setEditingRow, } = table;
+    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onEditingRowSave, }, setEditingRow, } = table;
     const { editingRow } = getState();
     const handleCancel = () => {
         row._valuesCache = Object.assign({}, row.original);
@@ -881,7 +882,7 @@ const MRT_EditActionButtons = ({ row, table }) => {
     };
     const handleSave = () => {
         var _a;
-        onEditRowSubmit === null || onEditRowSubmit === void 0 ? void 0 : onEditRowSubmit({
+        onEditingRowSave === null || onEditingRowSave === void 0 ? void 0 : onEditingRowSave({
             row: editingRow !== null && editingRow !== void 0 ? editingRow : row,
             table,
             values: (_a = editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache) !== null && _a !== void 0 ? _a : Object.assign({}, row.original),
@@ -1730,513 +1731,31 @@ const MRT_TableHead = ({ table }) => {
     return (React.createElement(TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map((headerGroup) => (React.createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
 };
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-var props = ['bottom', 'height', 'left', 'right', 'top', 'width'];
-
-var rectChanged = function rectChanged(a, b) {
-  if (a === void 0) {
-    a = {};
-  }
-
-  if (b === void 0) {
-    b = {};
-  }
-
-  return props.some(function (prop) {
-    return a[prop] !== b[prop];
-  });
-};
-
-var observedNodes = /*#__PURE__*/new Map();
-var rafId;
-
-var run = function run() {
-  var changedStates = [];
-  observedNodes.forEach(function (state, node) {
-    var newRect = node.getBoundingClientRect();
-
-    if (rectChanged(newRect, state.rect)) {
-      state.rect = newRect;
-      changedStates.push(state);
-    }
-  });
-  changedStates.forEach(function (state) {
-    state.callbacks.forEach(function (cb) {
-      return cb(state.rect);
-    });
-  });
-  rafId = window.requestAnimationFrame(run);
-};
-
-function observeRect(node, cb) {
-  return {
-    observe: function observe() {
-      var wasEmpty = observedNodes.size === 0;
-
-      if (observedNodes.has(node)) {
-        observedNodes.get(node).callbacks.push(cb);
-      } else {
-        observedNodes.set(node, {
-          rect: undefined,
-          hasRectChanged: false,
-          callbacks: [cb]
-        });
-      }
-
-      if (wasEmpty) run();
-    },
-    unobserve: function unobserve() {
-      var state = observedNodes.get(node);
-
-      if (state) {
-        // Remove the callback
-        var index = state.callbacks.indexOf(cb);
-        if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
-
-        if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
-
-        if (!observedNodes.size) cancelAnimationFrame(rafId);
-      }
-    }
-  };
-}
-
-var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
-function useRect(nodeRef, initialRect) {
-  if (initialRect === void 0) {
-    initialRect = {
-      width: 0,
-      height: 0
-    };
-  }
-
-  var _React$useState = React.useState(nodeRef.current),
-      element = _React$useState[0],
-      setElement = _React$useState[1];
-
-  var _React$useReducer = React.useReducer(rectReducer, initialRect),
-      rect = _React$useReducer[0],
-      dispatch = _React$useReducer[1];
-
-  var initialRectSet = React.useRef(false);
-  useIsomorphicLayoutEffect$1(function () {
-    if (nodeRef.current !== element) {
-      setElement(nodeRef.current);
-    }
-  });
-  useIsomorphicLayoutEffect$1(function () {
-    if (element && !initialRectSet.current) {
-      initialRectSet.current = true;
-
-      var _rect = element.getBoundingClientRect();
-
-      dispatch({
-        rect: _rect
-      });
-    }
-  }, [element]);
-  React.useEffect(function () {
-    if (!element) {
-      return;
-    }
-
-    var observer = observeRect(element, function (rect) {
-      dispatch({
-        rect: rect
-      });
-    });
-    observer.observe();
-    return function () {
-      observer.unobserve();
-    };
-  }, [element]);
-  return rect;
-}
-
-function rectReducer(state, action) {
-  var rect = action.rect;
-
-  if (state.height !== rect.height || state.width !== rect.width) {
-    return rect;
-  }
-
-  return state;
-}
-
-var defaultEstimateSize = function defaultEstimateSize() {
-  return 50;
-};
-
-var defaultKeyExtractor = function defaultKeyExtractor(index) {
-  return index;
-};
-
-var defaultMeasureSize = function defaultMeasureSize(el, horizontal) {
-  var key = horizontal ? 'offsetWidth' : 'offsetHeight';
-  return el[key];
-};
-
-var defaultRangeExtractor = function defaultRangeExtractor(range) {
-  var start = Math.max(range.start - range.overscan, 0);
-  var end = Math.min(range.end + range.overscan, range.size - 1);
-  var arr = [];
-
-  for (var i = start; i <= end; i++) {
-    arr.push(i);
-  }
-
-  return arr;
-};
-function useVirtual(_ref) {
-  var _measurements;
-
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 0 : _ref$size,
-      _ref$estimateSize = _ref.estimateSize,
-      estimateSize = _ref$estimateSize === void 0 ? defaultEstimateSize : _ref$estimateSize,
-      _ref$overscan = _ref.overscan,
-      overscan = _ref$overscan === void 0 ? 1 : _ref$overscan,
-      _ref$paddingStart = _ref.paddingStart,
-      paddingStart = _ref$paddingStart === void 0 ? 0 : _ref$paddingStart,
-      _ref$paddingEnd = _ref.paddingEnd,
-      paddingEnd = _ref$paddingEnd === void 0 ? 0 : _ref$paddingEnd,
-      parentRef = _ref.parentRef,
-      horizontal = _ref.horizontal,
-      scrollToFn = _ref.scrollToFn,
-      useObserver = _ref.useObserver,
-      initialRect = _ref.initialRect,
-      onScrollElement = _ref.onScrollElement,
-      scrollOffsetFn = _ref.scrollOffsetFn,
-      _ref$keyExtractor = _ref.keyExtractor,
-      keyExtractor = _ref$keyExtractor === void 0 ? defaultKeyExtractor : _ref$keyExtractor,
-      _ref$measureSize = _ref.measureSize,
-      measureSize = _ref$measureSize === void 0 ? defaultMeasureSize : _ref$measureSize,
-      _ref$rangeExtractor = _ref.rangeExtractor,
-      rangeExtractor = _ref$rangeExtractor === void 0 ? defaultRangeExtractor : _ref$rangeExtractor;
-  var sizeKey = horizontal ? 'width' : 'height';
-  var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
-  var latestRef = React.useRef({
-    scrollOffset: 0,
-    measurements: []
-  });
-
-  var _React$useState = React.useState(0),
-      scrollOffset = _React$useState[0],
-      setScrollOffset = _React$useState[1];
-
-  latestRef.current.scrollOffset = scrollOffset;
-  var useMeasureParent = useObserver || useRect;
-
-  var _useMeasureParent = useMeasureParent(parentRef, initialRect),
-      outerSize = _useMeasureParent[sizeKey];
-
-  latestRef.current.outerSize = outerSize;
-  var defaultScrollToFn = React.useCallback(function (offset) {
-    if (parentRef.current) {
-      parentRef.current[scrollKey] = offset;
-    }
-  }, [parentRef, scrollKey]);
-  var resolvedScrollToFn = scrollToFn || defaultScrollToFn;
-  scrollToFn = React.useCallback(function (offset) {
-    resolvedScrollToFn(offset, defaultScrollToFn);
-  }, [defaultScrollToFn, resolvedScrollToFn]);
-
-  var _React$useState2 = React.useState({}),
-      measuredCache = _React$useState2[0],
-      setMeasuredCache = _React$useState2[1];
-
-  var measure = React.useCallback(function () {
-    return setMeasuredCache({});
-  }, []);
-  var pendingMeasuredCacheIndexesRef = React.useRef([]);
-  var measurements = React.useMemo(function () {
-    var min = pendingMeasuredCacheIndexesRef.current.length > 0 ? Math.min.apply(Math, pendingMeasuredCacheIndexesRef.current) : 0;
-    pendingMeasuredCacheIndexesRef.current = [];
-    var measurements = latestRef.current.measurements.slice(0, min);
-
-    for (var i = min; i < size; i++) {
-      var key = keyExtractor(i);
-      var measuredSize = measuredCache[key];
-
-      var _start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
-
-      var _size = typeof measuredSize === 'number' ? measuredSize : estimateSize(i);
-
-      var _end = _start + _size;
-
-      measurements[i] = {
-        index: i,
-        start: _start,
-        size: _size,
-        end: _end,
-        key: key
-      };
-    }
-
-    return measurements;
-  }, [estimateSize, measuredCache, paddingStart, size, keyExtractor]);
-  var totalSize = (((_measurements = measurements[size - 1]) == null ? void 0 : _measurements.end) || paddingStart) + paddingEnd;
-  latestRef.current.measurements = measurements;
-  latestRef.current.totalSize = totalSize;
-  var element = onScrollElement ? onScrollElement.current : parentRef.current;
-  var scrollOffsetFnRef = React.useRef(scrollOffsetFn);
-  scrollOffsetFnRef.current = scrollOffsetFn;
-  useIsomorphicLayoutEffect$1(function () {
-    if (!element) {
-      setScrollOffset(0);
-      return;
-    }
-
-    var onScroll = function onScroll(event) {
-      var offset = scrollOffsetFnRef.current ? scrollOffsetFnRef.current(event) : element[scrollKey];
-      setScrollOffset(offset);
-    };
-
-    onScroll();
-    element.addEventListener('scroll', onScroll, {
-      capture: false,
-      passive: true
-    });
-    return function () {
-      element.removeEventListener('scroll', onScroll);
-    };
-  }, [element, scrollKey]);
-
-  var _calculateRange = calculateRange(latestRef.current),
-      start = _calculateRange.start,
-      end = _calculateRange.end;
-
-  var indexes = React.useMemo(function () {
-    return rangeExtractor({
-      start: start,
-      end: end,
-      overscan: overscan,
-      size: measurements.length
-    });
-  }, [start, end, overscan, measurements.length, rangeExtractor]);
-  var measureSizeRef = React.useRef(measureSize);
-  measureSizeRef.current = measureSize;
-  var virtualItems = React.useMemo(function () {
-    var virtualItems = [];
-
-    var _loop = function _loop(k, len) {
-      var i = indexes[k];
-      var measurement = measurements[i];
-
-      var item = _extends(_extends({}, measurement), {}, {
-        measureRef: function measureRef(el) {
-          if (el) {
-            var measuredSize = measureSizeRef.current(el, horizontal);
-
-            if (measuredSize !== item.size) {
-              var _scrollOffset = latestRef.current.scrollOffset;
-
-              if (item.start < _scrollOffset) {
-                defaultScrollToFn(_scrollOffset + (measuredSize - item.size));
-              }
-
-              pendingMeasuredCacheIndexesRef.current.push(i);
-              setMeasuredCache(function (old) {
-                var _extends2;
-
-                return _extends(_extends({}, old), {}, (_extends2 = {}, _extends2[item.key] = measuredSize, _extends2));
-              });
-            }
-          }
-        }
-      });
-
-      virtualItems.push(item);
-    };
-
-    for (var k = 0, len = indexes.length; k < len; k++) {
-      _loop(k);
-    }
-
-    return virtualItems;
-  }, [indexes, defaultScrollToFn, horizontal, measurements]);
-  var mountedRef = React.useRef(false);
-  useIsomorphicLayoutEffect$1(function () {
-    if (mountedRef.current) {
-      setMeasuredCache({});
-    }
-
-    mountedRef.current = true;
-  }, [estimateSize]);
-  var scrollToOffset = React.useCallback(function (toOffset, _temp) {
-    var _ref2 = _temp === void 0 ? {} : _temp,
-        _ref2$align = _ref2.align,
-        align = _ref2$align === void 0 ? 'start' : _ref2$align;
-
-    var _latestRef$current = latestRef.current,
-        scrollOffset = _latestRef$current.scrollOffset,
-        outerSize = _latestRef$current.outerSize;
-
-    if (align === 'auto') {
-      if (toOffset <= scrollOffset) {
-        align = 'start';
-      } else if (toOffset >= scrollOffset + outerSize) {
-        align = 'end';
-      } else {
-        align = 'start';
-      }
-    }
-
-    if (align === 'start') {
-      scrollToFn(toOffset);
-    } else if (align === 'end') {
-      scrollToFn(toOffset - outerSize);
-    } else if (align === 'center') {
-      scrollToFn(toOffset - outerSize / 2);
-    }
-  }, [scrollToFn]);
-  var tryScrollToIndex = React.useCallback(function (index, _temp2) {
-    var _ref3 = _temp2 === void 0 ? {} : _temp2,
-        _ref3$align = _ref3.align,
-        align = _ref3$align === void 0 ? 'auto' : _ref3$align,
-        rest = _objectWithoutPropertiesLoose(_ref3, ["align"]);
-
-    var _latestRef$current2 = latestRef.current,
-        measurements = _latestRef$current2.measurements,
-        scrollOffset = _latestRef$current2.scrollOffset,
-        outerSize = _latestRef$current2.outerSize;
-    var measurement = measurements[Math.max(0, Math.min(index, size - 1))];
-
-    if (!measurement) {
-      return;
-    }
-
-    if (align === 'auto') {
-      if (measurement.end >= scrollOffset + outerSize) {
-        align = 'end';
-      } else if (measurement.start <= scrollOffset) {
-        align = 'start';
-      } else {
-        return;
-      }
-    }
-
-    var toOffset = align === 'center' ? measurement.start + measurement.size / 2 : align === 'end' ? measurement.end : measurement.start;
-    scrollToOffset(toOffset, _extends({
-      align: align
-    }, rest));
-  }, [scrollToOffset, size]);
-  var scrollToIndex = React.useCallback(function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    // We do a double request here because of
-    // dynamic sizes which can cause offset shift
-    // and end up in the wrong spot. Unfortunately,
-    // we can't know about those dynamic sizes until
-    // we try and render them. So double down!
-    tryScrollToIndex.apply(void 0, args);
-    requestAnimationFrame(function () {
-      tryScrollToIndex.apply(void 0, args);
-    });
-  }, [tryScrollToIndex]);
-  return {
-    virtualItems: virtualItems,
-    totalSize: totalSize,
-    scrollToOffset: scrollToOffset,
-    scrollToIndex: scrollToIndex,
-    measure: measure
-  };
-}
-
-var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
-  while (low <= high) {
-    var middle = (low + high) / 2 | 0;
-    var currentValue = getCurrentValue(middle);
-
-    if (currentValue < value) {
-      low = middle + 1;
-    } else if (currentValue > value) {
-      high = middle - 1;
-    } else {
-      return middle;
-    }
-  }
-
-  if (low > 0) {
-    return low - 1;
-  } else {
-    return 0;
-  }
-};
-
-function calculateRange(_ref4) {
-  var measurements = _ref4.measurements,
-      outerSize = _ref4.outerSize,
-      scrollOffset = _ref4.scrollOffset;
-  var size = measurements.length - 1;
-
-  var getOffset = function getOffset(index) {
-    return measurements[index].start;
-  };
-
-  var start = findNearestBinarySearch(0, size, getOffset, scrollOffset);
-  var end = start;
-
-  while (end < size && measurements[end].end < scrollOffset + outerSize) {
-    end++;
-  }
-
-  return {
-    start: start,
-    end: end
-  };
-}
-
 const MRT_EditCellTextField = ({ cell, table }) => {
     var _a;
-    const { getState, options: { tableId, muiTableBodyCellEditTextFieldProps, onCellEditBlur, onCellEditChange, }, setEditingCell, setEditingRow, } = table;
+    const { getState, options: { tableId, muiTableBodyCellEditTextFieldProps }, setEditingCell, setEditingRow, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
     const { editingRow } = getState();
     const [value, setValue] = useState(() => cell.getValue());
+    const mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function
+        ? muiTableBodyCellEditTextFieldProps({ cell, table })
+        : muiTableBodyCellEditTextFieldProps;
+    const mcTableBodyCellEditTextFieldProps = columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
+        ? columnDef.muiTableBodyCellEditTextFieldProps({
+            cell,
+            table,
+        })
+        : columnDef.muiTableBodyCellEditTextFieldProps;
+    const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
     const handleChange = (event) => {
         var _a;
+        (_a = textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
         setValue(event.target.value);
-        (_a = columnDef.onCellEditChange) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table, value });
-        onCellEditChange === null || onCellEditChange === void 0 ? void 0 : onCellEditChange({ event, cell, table, value });
     };
     const handleBlur = (event) => {
         var _a;
+        (_a = textFieldProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
         if (editingRow) {
             if (!row._valuesCache)
                 row._valuesCache = {};
@@ -2244,23 +1763,11 @@ const MRT_EditCellTextField = ({ cell, table }) => {
             setEditingRow(Object.assign({}, editingRow));
         }
         setEditingCell(null);
-        (_a = columnDef.onCellEditBlur) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table, value });
-        onCellEditBlur === null || onCellEditBlur === void 0 ? void 0 : onCellEditBlur({ event, cell, table, value });
     };
-    const mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function
-        ? muiTableBodyCellEditTextFieldProps({ cell, table })
-        : muiTableBodyCellEditTextFieldProps;
-    const mcTableBodyCellEditTextFieldProps = columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
-        ? columnDef.muiTableBodyCellEditTextFieldProps({
-            cell,
-            table,
-        })
-        : columnDef.muiTableBodyCellEditTextFieldProps;
-    const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
     if (columnDef.Edit) {
         return React.createElement(React.Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, table }));
     }
-    return (React.createElement(TextField, Object.assign({ id: `mrt-${tableId}-edit-cell-text-field-${cell.id}`, margin: "none", onBlur: handleBlur, onChange: handleChange, onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps)));
+    return (React.createElement(TextField, Object.assign({ id: `mrt-${tableId}-edit-cell-text-field-${cell.id}`, margin: "none", onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onBlur: handleBlur, onChange: handleChange })));
 };
 
 const MRT_CopyButton = ({ cell, children, table }) => {
@@ -2422,7 +1929,10 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                     : column.getIsPinned()
                         ? 1
                         : undefined, '&:hover': {
-                    backgroundColor: enableHover && enableEditing && editingMode !== 'row'
+                    backgroundColor: enableHover &&
+                        enableEditing &&
+                        columnDef.enableEditing !== false &&
+                        editingMode !== 'row'
                         ? theme.palette.mode === 'dark'
                             ? `${lighten(theme.palette.background.default, 0.13)} !important`
                             : `${darken(theme.palette.background.default, 0.07)} !important`
@@ -2692,7 +2202,7 @@ const MRT_TablePaper = ({ table }) => {
 };
 
 const MRT_TableRoot = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
     const [tableId, setIdPrefix] = useState(props.tableId);
     useEffect(() => { var _a; return setIdPrefix((_a = props.tableId) !== null && _a !== void 0 ? _a : Math.random().toString(36).substring(2, 9)); }, [props.tableId]);
     const initialState = useMemo(() => {
@@ -2700,34 +2210,33 @@ const MRT_TableRoot = (props) => {
         const initState = (_a = props.initialState) !== null && _a !== void 0 ? _a : {};
         initState.columnOrder =
             (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(props);
-        initState.columnFilterFns = Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-            return ({
-                [(_d = (_b = (_a = col.id) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : (_c = col.accessorKey) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : '']: col.filterFn instanceof Function
-                    ? (_e = col.filterFn.name) !== null && _e !== void 0 ? _e : 'custom'
-                    : (_m = (_f = col.filterFn) !== null && _f !== void 0 ? _f : (_g = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _g === void 0 ? void 0 : _g[(_l = (_j = (_h = col.id) === null || _h === void 0 ? void 0 : _h.toString()) !== null && _j !== void 0 ? _j : (_k = col.accessorKey) === null || _k === void 0 ? void 0 : _k.toString()) !== null && _l !== void 0 ? _l : '']) !== null && _m !== void 0 ? _m : getDefaultColumnFilterFn(col),
-            });
-        }));
         initState.globalFilterFn =
             props.globalFilterFn instanceof String
                 ? props.globalFilterFn
                 : 'fuzzy';
         return initState;
     }, []);
-    const [columnFilterFns, setColumnFilterFns] = useState((_a = initialState.columnFilterFns) !== null && _a !== void 0 ? _a : {});
-    const [columnOrder, setColumnOrder] = useState((_b = initialState.columnOrder) !== null && _b !== void 0 ? _b : []);
-    const [density, setDensity] = useState((_c = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _c !== void 0 ? _c : 'comfortable');
-    const [draggingColumn, setDraggingColumn] = useState((_d = initialState.draggingColumn) !== null && _d !== void 0 ? _d : null);
-    const [draggingRow, setDraggingRow] = useState((_e = initialState.draggingRow) !== null && _e !== void 0 ? _e : null);
-    const [editingCell, setEditingCell] = useState((_f = initialState.editingCell) !== null && _f !== void 0 ? _f : null);
-    const [editingRow, setEditingRow] = useState((_g = initialState.editingRow) !== null && _g !== void 0 ? _g : null);
-    const [globalFilterFn, setGlobalFilterFn] = useState((_h = initialState.globalFilterFn) !== null && _h !== void 0 ? _h : 'fuzzy');
-    const [hoveredColumn, setHoveredColumn] = useState((_j = initialState.hoveredColumn) !== null && _j !== void 0 ? _j : null);
-    const [hoveredRow, setHoveredRow] = useState((_k = initialState.hoveredRow) !== null && _k !== void 0 ? _k : null);
-    const [isFullScreen, setIsFullScreen] = useState((_l = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _l !== void 0 ? _l : false);
-    const [showAlertBanner, setShowAlertBanner] = useState((_o = (_m = props.initialState) === null || _m === void 0 ? void 0 : _m.showAlertBanner) !== null && _o !== void 0 ? _o : false);
-    const [showColumnFilters, setShowFilters] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
-    const [showGlobalFilter, setShowGlobalFilter] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
+    const [columnFilterFns, setColumnFilterFns] = useState(() => Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        return ({
+            [(_d = (_b = (_a = col.id) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : (_c = col.accessorKey) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : '']: col.filterFn instanceof Function
+                ? (_e = col.filterFn.name) !== null && _e !== void 0 ? _e : 'custom'
+                : (_m = (_f = col.filterFn) !== null && _f !== void 0 ? _f : (_g = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _g === void 0 ? void 0 : _g[(_l = (_j = (_h = col.id) === null || _h === void 0 ? void 0 : _h.toString()) !== null && _j !== void 0 ? _j : (_k = col.accessorKey) === null || _k === void 0 ? void 0 : _k.toString()) !== null && _l !== void 0 ? _l : '']) !== null && _m !== void 0 ? _m : getDefaultColumnFilterFn(col),
+        });
+    })));
+    const [columnOrder, setColumnOrder] = useState((_a = initialState.columnOrder) !== null && _a !== void 0 ? _a : []);
+    const [density, setDensity] = useState((_b = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _b !== void 0 ? _b : 'comfortable');
+    const [draggingColumn, setDraggingColumn] = useState((_c = initialState.draggingColumn) !== null && _c !== void 0 ? _c : null);
+    const [draggingRow, setDraggingRow] = useState((_d = initialState.draggingRow) !== null && _d !== void 0 ? _d : null);
+    const [editingCell, setEditingCell] = useState((_e = initialState.editingCell) !== null && _e !== void 0 ? _e : null);
+    const [editingRow, setEditingRow] = useState((_f = initialState.editingRow) !== null && _f !== void 0 ? _f : null);
+    const [globalFilterFn, setGlobalFilterFn] = useState((_g = initialState.globalFilterFn) !== null && _g !== void 0 ? _g : 'fuzzy');
+    const [hoveredColumn, setHoveredColumn] = useState((_h = initialState.hoveredColumn) !== null && _h !== void 0 ? _h : null);
+    const [hoveredRow, setHoveredRow] = useState((_j = initialState.hoveredRow) !== null && _j !== void 0 ? _j : null);
+    const [isFullScreen, setIsFullScreen] = useState((_k = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _k !== void 0 ? _k : false);
+    const [showAlertBanner, setShowAlertBanner] = useState((_m = (_l = props.initialState) === null || _l === void 0 ? void 0 : _l.showAlertBanner) !== null && _m !== void 0 ? _m : false);
+    const [showColumnFilters, setShowFilters] = useState((_o = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _o !== void 0 ? _o : false);
+    const [showGlobalFilter, setShowGlobalFilter] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _p !== void 0 ? _p : false);
     const displayColumns = useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return [
@@ -2772,11 +2281,11 @@ const MRT_TableRoot = (props) => {
                 });
             })))
             : props.data;
-    }, [props.data, (_r = props.state) === null || _r === void 0 ? void 0 : _r.isLoading, (_s = props.state) === null || _s === void 0 ? void 0 : _s.showSkeletons]);
+    }, [props.data, (_q = props.state) === null || _q === void 0 ? void 0 : _q.isLoading, (_r = props.state) === null || _r === void 0 ? void 0 : _r.showSkeletons]);
     //@ts-ignore
     const table = Object.assign(Object.assign({}, useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFilteredRowModel: getFilteredRowModel(), getGroupedRowModel: getGroupedRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), onColumnOrderChange: setColumnOrder, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
         //@ts-ignore
-        columns: columnDefs, data, globalFilterFn: (_u = (_t = props.filterFns) === null || _t === void 0 ? void 0 : _t[globalFilterFn]) !== null && _u !== void 0 ? _u : (_v = props.filterFns) === null || _v === void 0 ? void 0 : _v.fuzzy, initialState, state: Object.assign({ columnFilterFns,
+        columns: columnDefs, data, globalFilterFn: (_t = (_s = props.filterFns) === null || _s === void 0 ? void 0 : _s[globalFilterFn]) !== null && _t !== void 0 ? _t : (_u = props.filterFns) === null || _u === void 0 ? void 0 : _u.fuzzy, initialState, state: Object.assign({ columnFilterFns,
             columnOrder,
             density,
             draggingColumn,
@@ -2789,7 +2298,7 @@ const MRT_TableRoot = (props) => {
             isFullScreen,
             showAlertBanner,
             showColumnFilters,
-            showGlobalFilter }, props.state), tableId }))), { setColumnFilterFns: (_w = props.onFilterFnsChange) !== null && _w !== void 0 ? _w : setColumnFilterFns, setDensity: (_x = props.onDensityChange) !== null && _x !== void 0 ? _x : setDensity, setDraggingColumn: (_y = props.onDraggingColumnChange) !== null && _y !== void 0 ? _y : setDraggingColumn, setDraggingRow: (_z = props.onDraggingRowChange) !== null && _z !== void 0 ? _z : setDraggingRow, setEditingCell: (_0 = props.onEditingCellChange) !== null && _0 !== void 0 ? _0 : setEditingCell, setEditingRow: (_1 = props.onEditingRowChange) !== null && _1 !== void 0 ? _1 : setEditingRow, setGlobalFilterFn: (_2 = props.onGlobalFilterFnChange) !== null && _2 !== void 0 ? _2 : setGlobalFilterFn, setHoveredColumn: (_3 = props.onHoveredColumnChange) !== null && _3 !== void 0 ? _3 : setHoveredColumn, setHoveredRow: (_4 = props.onHoveredRowChange) !== null && _4 !== void 0 ? _4 : setHoveredRow, setIsFullScreen: (_5 = props.onIsFullScreenChange) !== null && _5 !== void 0 ? _5 : setIsFullScreen, setShowAlertBanner: (_6 = props.onShowAlertBannerChange) !== null && _6 !== void 0 ? _6 : setShowAlertBanner, setShowFilters: (_7 = props.onShowFiltersChange) !== null && _7 !== void 0 ? _7 : setShowFilters, setShowGlobalFilter: (_8 = props.onShowGlobalFilterChange) !== null && _8 !== void 0 ? _8 : setShowGlobalFilter });
+            showGlobalFilter }, props.state), tableId }))), { setColumnFilterFns: (_v = props.onFilterFnsChange) !== null && _v !== void 0 ? _v : setColumnFilterFns, setDensity: (_w = props.onDensityChange) !== null && _w !== void 0 ? _w : setDensity, setDraggingColumn: (_x = props.onDraggingColumnChange) !== null && _x !== void 0 ? _x : setDraggingColumn, setDraggingRow: (_y = props.onDraggingRowChange) !== null && _y !== void 0 ? _y : setDraggingRow, setEditingCell: (_z = props.onEditingCellChange) !== null && _z !== void 0 ? _z : setEditingCell, setEditingRow: (_0 = props.onEditingRowChange) !== null && _0 !== void 0 ? _0 : setEditingRow, setGlobalFilterFn: (_1 = props.onGlobalFilterFnChange) !== null && _1 !== void 0 ? _1 : setGlobalFilterFn, setHoveredColumn: (_2 = props.onHoveredColumnChange) !== null && _2 !== void 0 ? _2 : setHoveredColumn, setHoveredRow: (_3 = props.onHoveredRowChange) !== null && _3 !== void 0 ? _3 : setHoveredRow, setIsFullScreen: (_4 = props.onIsFullScreenChange) !== null && _4 !== void 0 ? _4 : setIsFullScreen, setShowAlertBanner: (_5 = props.onShowAlertBannerChange) !== null && _5 !== void 0 ? _5 : setShowAlertBanner, setShowFilters: (_6 = props.onShowFiltersChange) !== null && _6 !== void 0 ? _6 : setShowFilters, setShowGlobalFilter: (_7 = props.onShowGlobalFilterChange) !== null && _7 !== void 0 ? _7 : setShowGlobalFilter });
     return (React.createElement(React.Fragment, null,
         React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => setIsFullScreen(false), open: isFullScreen, transitionDuration: 400 },
             React.createElement(MRT_TablePaper, { table: table })),