material-react-table 0.1.0-beta.1 → 0.3.1

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

@@ -1,7 +1,58 @@
-import React, { useContext, createContext } from 'react';
-import { useTable, useSortBy, useExpanded, usePagination } from 'react-table';
-import { TableCell as TableCell$1, TableSortLabel, TableRow, TablePagination, TableHead, Collapse, IconButton, TableBody, styled, TableFooter, Table, TableContainer, Paper } from '@mui/material';
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import React, { useMemo, useState, useContext, createContext } from 'react';
+import { useTable, useResizeColumns, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useFlexLayout, useAsyncDebounce } from 'react-table';
+import { TextField as TextField$1, InputAdornment, IconButton as IconButton$2, Menu, Divider as Divider$1, styled, MenuItem as MenuItem$2, TableCell as TableCell$1, TableSortLabel, Collapse, Checkbox, TableRow, TableHead, Tooltip, useTheme, alpha, CircularProgress, TableBody as TableBody$1, TableFooter, Table, FormControlLabel, Switch, Typography, TablePagination, Toolbar as Toolbar$2, TableContainer, Paper, LinearProgress } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import FilterIcon from '@mui/icons-material/FilterList';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import ClearAllIcon from '@mui/icons-material/ClearAll';
+import SortIcon from '@mui/icons-material/Sort';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
+import ArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import EditIcon from '@mui/icons-material/Edit';
+import SaveIcon from '@mui/icons-material/Save';
+import CancelIcon from '@mui/icons-material/Cancel';
+import SearchIcon from '@mui/icons-material/Search';
+import FilterListOffIcon from '@mui/icons-material/FilterListOff';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+        args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+      }
+
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+
+      _next(undefined);
+    });
+  };
+}
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -36,106 +87,439 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var defaultOptions = {
-  enableFilters: false,
-  enablePagination: 'bottom',
-  enableSearch: true,
-  enableSorting: true,
-  showFooter: true,
-  showHead: true,
-  showToolbar: true
-};
-
-var _excluded = ["children", "columns", "data", "options"];
-var MaterialReactTableContext = /*#__PURE__*/createContext({});
-var MaterialReactTableProvider = function MaterialReactTableProvider(_ref) {
-  var children = _ref.children,
-      columns = _ref.columns,
-      data = _ref.data,
-      options = _ref.options,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+var useMRTCalcs = function useMRTCalcs(_ref) {
+  var tableInstance = _ref.tableInstance;
+  var anyRowsCanExpand = useMemo(function () {
+    return tableInstance.rows.some(function (row) {
+      return row.canExpand;
+    });
+  }, [tableInstance.rows]);
+  var anyRowsExpanded = useMemo(function () {
+    return tableInstance.rows.some(function (row) {
+      return row.isExpanded;
+    });
+  }, [tableInstance.rows]);
+  var maxColumnDepth = useMemo(function () {
+    var maxDepth = 1;
+    tableInstance.columns.forEach(function (column) {
+      var _column$columns;
+
+      if ((_column$columns = column.columns) != null && _column$columns.length) {
+        maxDepth = Math.max(maxDepth, column.columns.length);
+      }
+    });
+    return maxDepth - 1;
+  }, [tableInstance.columns]);
+  return {
+    anyRowsCanExpand: anyRowsCanExpand,
+    anyRowsExpanded: anyRowsExpanded,
+    maxColumnDepth: maxColumnDepth
+  };
+};
+
+var MaterialReactTableContext = /*#__PURE__*/function () {
+  return createContext({});
+}();
+
+var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
+  var _props$defaultShowFil, _props$defaultDensePa;
+
+  var hooks = [useResizeColumns, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect];
+  if (props.enableColumnResizing) hooks.unshift(useFlexLayout);
+  var tableInstance = useTable.apply(void 0, [props].concat(hooks));
+  var mrtCalcs = useMRTCalcs({
+    tableInstance: tableInstance
+  });
+
+  var _useState = useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
+      showFilters = _useState[0],
+      setShowFilters = _useState[1];
+
+  var _useState2 = useState((_props$defaultDensePa = props.defaultDensePadding) != null ? _props$defaultDensePa : false),
+      densePadding = _useState2[0],
+      setDensePadding = _useState2[1];
+
+  var _useState3 = useState(null),
+      currentEditingRowId = _useState3[0],
+      setCurrentEditingRowId = _useState3[1];
 
-  var tableInstance = useTable({
-    columns: columns,
-    data: data
-  }, useSortBy, useExpanded, usePagination);
   return React.createElement(MaterialReactTableContext.Provider, {
-    value: _extends({
-      options: _extends({}, defaultOptions, options),
+    value: _extends({}, mrtCalcs, props, {
+      densePadding: densePadding,
+      setDensePadding: setDensePadding,
+      setShowFilters: setShowFilters,
+      currentEditingRowId: currentEditingRowId,
+      setCurrentEditingRowId: setCurrentEditingRowId,
+      showFilters: showFilters,
+      // @ts-ignore
       tableInstance: tableInstance
-    }, rest)
-  }, children);
+    })
+  }, props.children);
 };
 var useMaterialReactTable = function useMaterialReactTable() {
-  return useContext(MaterialReactTableContext);
+  return (//@ts-ignore
+    useContext(MaterialReactTableContext)
+  );
+};
+
+var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
+  var column = _ref.column;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      localization = _useMaterialReactTabl.localization;
+
+  var _useState = useState(''),
+      filterValue = _useState[0],
+      setFilterValue = _useState[1];
+
+  var handleChange = useAsyncDebounce(function (value) {
+    column.setFilter(value != null ? value : undefined);
+  }, 150);
+
+  var handleClear = function handleClear() {
+    setFilterValue('');
+    column.setFilter(undefined);
+  };
+
+  if (column.Filter) {
+    //@ts-ignore
+    return React.createElement(React.Fragment, null, column.Filter({
+      column: column
+    }));
+  }
+
+  return React.createElement(TextField$1, {
+    margin: "dense",
+    placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
+    onChange: function onChange(e) {
+      setFilterValue(e.target.value);
+      handleChange(e.target.value);
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    value: filterValue != null ? filterValue : '',
+    variant: "standard",
+    InputProps: {
+      startAdornment: React.createElement(InputAdornment, {
+        position: "start"
+      }, React.createElement(FilterIcon, null)),
+      endAdornment: React.createElement(InputAdornment, {
+        position: "end"
+      }, React.createElement(IconButton$2, {
+        "aria-label": localization == null ? void 0 : localization.filterTextFieldClearButtonTitle,
+        disabled: (filterValue == null ? void 0 : filterValue.length) === 0,
+        onClick: handleClear,
+        size: "small",
+        title: localization == null ? void 0 : localization.filterTextFieldClearButtonTitle
+      }, React.createElement(CloseIcon, {
+        fontSize: "small"
+      })))
+    }
+  });
+};
+
+var MenuItem = /*#__PURE__*/styled(MenuItem$2)({
+  display: 'flex',
+  gap: '0.75rem'
+});
+var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
+  var anchorEl = _ref.anchorEl,
+      column = _ref.column,
+      setAnchorEl = _ref.setAnchorEl;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
+      enableColumnGrouping = _useMaterialReactTabl.enableColumnGrouping,
+      disableSortBy = _useMaterialReactTabl.disableSortBy,
+      localization = _useMaterialReactTabl.localization;
+
+  var handleClearSort = function handleClearSort() {
+    column.clearSortBy();
+    setAnchorEl(null);
+  };
+
+  var handleSortAsc = function handleSortAsc() {
+    column.toggleSortBy(false);
+    setAnchorEl(null);
+  };
+
+  var handleSortDesc = function handleSortDesc() {
+    column.toggleSortBy(true);
+    setAnchorEl(null);
+  };
+
+  var handleHideColumn = function handleHideColumn() {
+    column.toggleHidden();
+    setAnchorEl(null);
+  };
+
+  var handleGroupByColumn = function handleGroupByColumn() {
+    column.toggleGroupBy();
+    setAnchorEl(null);
+  };
+
+  return React.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    }
+  }, !disableSortBy && column.canSort && [React.createElement(MenuItem, {
+    key: 1,
+    disabled: !column.isSorted,
+    onClick: handleClearSort
+  }, React.createElement(ClearAllIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemClearSort), React.createElement(MenuItem, {
+    key: 2,
+    disabled: column.isSorted && !column.isSortedDesc,
+    onClick: handleSortAsc
+  }, React.createElement(SortIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemSortAsc), React.createElement(MenuItem, {
+    key: 3,
+    disabled: column.isSorted && column.isSortedDesc,
+    onClick: handleSortDesc
+  }, React.createElement(SortIcon, {
+    style: {
+      transform: 'rotate(180deg) scaleX(-1)'
+    }
+  }), ' ', localization == null ? void 0 : localization.columnActionMenuItemSortDesc), React.createElement(Divider$1, {
+    key: 4
+  })], !disableColumnHiding && React.createElement(MenuItem, {
+    onClick: handleHideColumn
+  }, React.createElement(VisibilityOffIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemHideColumn), enableColumnGrouping && column.canGroupBy && React.createElement(MenuItem, {
+    disabled: column.isGrouped,
+    onClick: handleGroupByColumn
+  }, React.createElement(DynamicFeedIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemGroupBy), enableColumnGrouping && column.canGroupBy && React.createElement(MenuItem, {
+    disabled: !column.isGrouped,
+    onClick: handleGroupByColumn
+  }, React.createElement(DynamicFeedIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemUnGroupBy));
+};
+
+var IconButton = /*#__PURE__*/styled(IconButton$2)({
+  opacity: 0.5,
+  transition: 'opacity 0.2s',
+  marginRight: '2px',
+  height: '2rem',
+  width: '2rem',
+  '&:hover': {
+    opacity: 1
+  }
+});
+var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
+  var column = _ref.column;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      localization = _useMaterialReactTabl.localization;
+
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var handleClick = function handleClick(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+
+  return React.createElement(React.Fragment, null, React.createElement(IconButton, {
+    "aria-label": localization == null ? void 0 : localization.columnActionMenuButtonTitle,
+    title: localization == null ? void 0 : localization.columnActionMenuButtonTitle,
+    onClick: handleClick,
+    size: "small"
+  }, React.createElement(MoreVertIcon, null)), React.createElement(MRT_ColumnActionMenu, {
+    anchorEl: anchorEl,
+    column: column,
+    setAnchorEl: setAnchorEl
+  }));
 };
 
+var StyledTableHeadCell = /*#__PURE__*/styled(TableCell$1)({
+  fontWeight: 'bold',
+  verticalAlign: 'text-top'
+});
+var TableCellContents = /*#__PURE__*/styled('div')({
+  display: 'grid'
+});
+var TableCellText = /*#__PURE__*/styled('div')({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'space-between'
+});
+var CellFlexItem = /*#__PURE__*/styled('span')({
+  display: 'flex',
+  flexWrap: 'nowrap',
+  alignItems: 'center'
+});
+var Divider = /*#__PURE__*/styled(Divider$1)({
+  borderRightWidth: '2px',
+  borderRadius: '2px',
+  maxHeight: '2rem'
+});
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _column$columns$lengt, _column$columns;
+  var _column$columns$lengt, _column$columns, _mTableHeadCellProps$;
 
   var column = _ref.column;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      densePadding = _useMaterialReactTabl.densePadding,
+      disableColumnActions = _useMaterialReactTabl.disableColumnActions,
+      disableFilters = _useMaterialReactTabl.disableFilters,
+      enableColumnResizing = _useMaterialReactTabl.enableColumnResizing,
+      localization = _useMaterialReactTabl.localization,
+      muiTableHeadCellProps = _useMaterialReactTabl.muiTableHeadCellProps,
+      showFilters = _useMaterialReactTabl.showFilters,
+      tableInstance = _useMaterialReactTabl.tableInstance;
+
   var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
-  return React.createElement(TableCell$1, Object.assign({
-    align: isParentHeader ? 'center' : 'left',
+  var mTableHeadCellProps = muiTableHeadCellProps instanceof Function ? muiTableHeadCellProps(column) : muiTableHeadCellProps;
+
+  var tableCellProps = _extends({}, mTableHeadCellProps, column.getHeaderProps(), {
+    style: _extends({
+      padding: densePadding ? '0.5rem' : '1rem',
+      transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out"
+    }, column.getHeaderProps().style, (_mTableHeadCellProps$ = mTableHeadCellProps == null ? void 0 : mTableHeadCellProps.style) != null ? _mTableHeadCellProps$ : {})
+  });
+
+  return React.createElement(StyledTableHeadCell, Object.assign({
+    align: isParentHeader ? 'center' : 'left'
+  }, tableCellProps), React.createElement(TableCellContents, null, React.createElement(TableCellText, {
     style: {
-      fontWeight: 'bold !important'
-    },
-    variant: "head"
-  }, column.getHeaderProps(column.getSortByToggleProps())), React.createElement(TableSortLabel, {
+      justifyContent: isParentHeader ? 'center' : undefined
+    }
+  }, React.createElement(CellFlexItem, Object.assign({}, column.getSortByToggleProps()), column.render('Header'), !isParentHeader && column.canSort && React.createElement(TableSortLabel, {
+    "aria-label": column.isSorted ? column.sortDescFirst ? localization == null ? void 0 : localization.columnActionMenuItemClearSort : localization == null ? void 0 : localization.columnActionMenuItemSortDesc : localization == null ? void 0 : localization.columnActionMenuItemSortAsc,
     active: column.isSorted,
-    direction: column.isSortedDesc && column.isSortedDesc ? 'desc' : 'asc'
-  }, column.render('Header')));
+    direction: column.isSortedDesc ? 'desc' : 'asc',
+    style: {
+      margin: 0
+    }
+  })), React.createElement(CellFlexItem, null, !disableColumnActions && !isParentHeader && React.createElement(MRT_ToggleColumnActionMenuButton, {
+    column: column
+  }), enableColumnResizing && !isParentHeader && React.createElement(Divider, Object.assign({
+    flexItem: true,
+    orientation: "vertical",
+    onDoubleClick: function onDoubleClick() {
+      return tableInstance.resetResizing();
+    }
+  }, column.getResizerProps())))), !disableFilters && column.canFilter && React.createElement(Collapse, {
+    "in": showFilters
+  }, React.createElement(MRT_FilterTextfield, {
+    column: column
+  }))));
 };
 
-var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
-  var headerGroup = _ref.headerGroup;
+var MRT_SelectAllCheckbox = function MRT_SelectAllCheckbox() {
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      disableSelectAll = _useMaterialReactTabl.disableSelectAll,
+      densePadding = _useMaterialReactTabl.densePadding;
+
+  return React.createElement(TableCell$1, {
+    style: {
+      width: '2rem',
+      padding: densePadding ? '0' : '0.6rem',
+      transition: 'all 0.2s ease-in-out'
+    },
+    variant: "head"
+  }, !disableSelectAll ? React.createElement(Checkbox, Object.assign({
+    "aria-label": ""
+  }, tableInstance.getToggleAllPageRowsSelectedProps())) : null);
+};
 
+var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
   var _useMaterialReactTabl = useMaterialReactTable(),
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      localization = _useMaterialReactTabl.localization,
+      anyRowsExpanded = _useMaterialReactTabl.anyRowsExpanded,
+      densePadding = _useMaterialReactTabl.densePadding,
       renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
 
-  return React.createElement(TableRow, Object.assign({}, headerGroup.getHeaderGroupProps()), renderDetailPanel && React.createElement(TableCell$1, {
+  return React.createElement(TableCell$1, Object.assign({
+    size: "small"
+  }, tableInstance.getToggleAllRowsExpandedProps(), {
     style: {
-      width: '2rem'
+      padding: densePadding ? '0' : '0.5rem 0.5rem',
+      transition: 'all 0.2s ease-in-out',
+      width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 2) + "rem"
     }
-  }), headerGroup.headers.map(function (column, index) {
-    return React.createElement(MRT_TableHeadCell, {
-      key: index + "-" + column.id,
-      column: column
-    });
-  }));
+  }), React.createElement(IconButton$2, {
+    "aria-label": localization == null ? void 0 : localization.expandAllButtonTitle,
+    title: localization == null ? void 0 : localization.expandAllButtonTitle
+  }, React.createElement(ArrowRightIcon, {
+    fontSize: "small",
+    style: {
+      transform: tableInstance.isAllRowsExpanded ? 'rotate(-180deg)' : anyRowsExpanded ? 'rotate(-90deg)' : 'rotate(0)',
+      transition: 'transform 0.2s'
+    }
+  })));
 };
 
-var MRT_TablePagination = function MRT_TablePagination() {
+var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
+  var _mTableBodyRowProps$s;
+
+  var width = _ref.width;
+
   var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      tablePaginationProps = _useMaterialReactTabl.tablePaginationProps;
+      muiTableBodyCellProps = _useMaterialReactTabl.muiTableBodyCellProps;
 
-  var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
-    tableInstance.setPageSize(+event.target.value);
-    tableInstance.gotoPage(0);
-  };
+  var mTableBodyRowProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
 
-  return React.createElement(TableRow, null, React.createElement(TablePagination, Object.assign({
-    colSpan: tableInstance.visibleColumns.length + 10,
-    count: tableInstance.rows.length,
-    onPageChange: function onPageChange(_, newPage) {
-      return tableInstance.gotoPage(newPage);
-    },
-    onRowsPerPageChange: handleChangeRowsPerPage,
-    page: tableInstance.state.pageIndex,
-    rowsPerPage: tableInstance.state.pageSize,
-    showFirstButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
-    showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2
-  }, tablePaginationProps)));
+  var tableCellProps = _extends({}, mTableBodyRowProps, {
+    style: _extends({
+      width: width
+    }, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
+  });
+
+  return React.createElement(TableCell$1, Object.assign({}, tableCellProps));
+};
+
+var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
+  var _mTableHeadRowProps$s;
+
+  var headerGroup = _ref.headerGroup;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
+      disableExpandAll = _useMaterialReactTabl.disableExpandAll,
+      enableRowActions = _useMaterialReactTabl.enableRowActions,
+      enableSelection = _useMaterialReactTabl.enableSelection,
+      localization = _useMaterialReactTabl.localization,
+      muiTableHeadRowProps = _useMaterialReactTabl.muiTableHeadRowProps,
+      positionActionsColumn = _useMaterialReactTabl.positionActionsColumn,
+      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
+      tableInstance = _useMaterialReactTabl.tableInstance;
+
+  var isParentHeader = useMemo(function () {
+    return headerGroup.headers.some(function (h) {
+      var _h$columns$length, _h$columns;
+
+      return ((_h$columns$length = (_h$columns = h.columns) == null ? void 0 : _h$columns.length) != null ? _h$columns$length : 0) > 0;
+    });
+  }, [headerGroup.headers]);
+  var mTableHeadRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps(headerGroup) : muiTableHeadRowProps;
+
+  var tableRowProps = _extends({}, mTableHeadRowProps, headerGroup.getHeaderGroupProps(), {
+    style: _extends({}, headerGroup.getHeaderGroupProps().style, (_mTableHeadRowProps$s = mTableHeadRowProps == null ? void 0 : mTableHeadRowProps.style) != null ? _mTableHeadRowProps$s : {})
+  });
+
+  return React.createElement(TableRow, Object.assign({}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(StyledTableHeadCell, null, localization == null ? void 0 : localization.actionsHeadColumnTitle)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React.createElement(MRT_ExpandAllButton, null) : React.createElement(MRT_TableSpacerCell, {
+    width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
+  }) : null, enableSelection ? !isParentHeader ? React.createElement(MRT_SelectAllCheckbox, null) : React.createElement(MRT_TableSpacerCell, {
+    width: "1rem"
+  }) : null, headerGroup.headers.map(function (column) {
+    return React.createElement(MRT_TableHeadCell, {
+      key: column.getHeaderProps().key,
+      column: column
+    });
+  }), enableRowActions && positionActionsColumn === 'last' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(StyledTableHeadCell, null, localization == null ? void 0 : localization.actionsHeadColumnTitle)));
 };
 
 var MRT_TableHead = function MRT_TableHead() {
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
-      tableHeadProps = _useMaterialReactTabl.tableHeadProps,
-      options = _useMaterialReactTabl.options;
+      muiTableHeadProps = _useMaterialReactTabl.muiTableHeadProps;
 
-  return React.createElement(TableHead, Object.assign({}, tableHeadProps), ['top', 'both'].includes(options.enablePagination.toString()) && React.createElement(MRT_TablePagination, null), tableInstance.headerGroups.map(function (headerGroup, index) {
+  var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps(tableInstance) : muiTableHeadProps;
+  return React.createElement(TableHead, Object.assign({}, tableHeadProps), tableInstance.headerGroups.map(function (headerGroup, index) {
     return React.createElement(MRT_TableHeadRow, {
       key: index + "-" + headerGroup.id,
       headerGroup: headerGroup
@@ -144,163 +528,1542 @@ var MRT_TableHead = function MRT_TableHead() {
 };
 
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
+  var _mTableCellBodyProps$;
+
   var cell = _ref.cell;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      onCellClick = _useMaterialReactTabl.onCellClick,
+      muiTableBodyCellProps = _useMaterialReactTabl.muiTableBodyCellProps,
+      densePadding = _useMaterialReactTabl.densePadding;
+
+  var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
+
+  var tableCellProps = _extends({}, mTableCellBodyProps, cell.getCellProps(), {
+    style: _extends({
+      padding: densePadding ? '0.5rem' : '1rem',
+      transition: 'all 0.2s ease-in-out'
+    }, cell.getCellProps().style, (_mTableCellBodyProps$ = mTableCellBodyProps == null ? void 0 : mTableCellBodyProps.style) != null ? _mTableCellBodyProps$ : {})
+  });
+
   return React.createElement(TableCell$1, Object.assign({
-    variant: "body"
-  }, cell.getCellProps()), cell.render('Cell'));
+    onClick: function onClick(event) {
+      return onCellClick == null ? void 0 : onCellClick(event, cell);
+    }
+  }, tableCellProps), cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
 };
 
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
+  var _mTableBodyRowProps$s;
+
   var row = _ref.row;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
+      muiTableDetailPanelProps = _useMaterialReactTabl.muiTableDetailPanelProps,
+      muiTableBodyRowProps = _useMaterialReactTabl.muiTableBodyRowProps,
+      onDetailPanelClick = _useMaterialReactTabl.onDetailPanelClick;
 
-  return React.createElement(TableRow, Object.assign({}, row.getToggleRowExpandedProps()), React.createElement(TableCell$1, {
-    colSpan: tableInstance.visibleColumns.length + 10,
-    style: {
+  var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
+
+  var tableRowProps = _extends({}, mTableBodyRowProps, row.getToggleRowExpandedProps(), {
+    style: _extends({}, row.getToggleRowExpandedProps().style, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
+  });
+
+  var mTableDetailPanelProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps(row) : muiTableDetailPanelProps;
+
+  var tableCellProps = _extends({}, mTableDetailPanelProps, {
+    style: _extends({
+      borderBottom: !row.isExpanded ? 'none' : undefined,
       paddingBottom: row.isExpanded ? '1rem' : 0,
       paddingTop: row.isExpanded ? '1rem' : 0,
-      transition: 'padding 0.2s'
+      transition: 'all 0.2s ease-in-out'
+    }, (mTableDetailPanelProps == null ? void 0 : mTableDetailPanelProps.style) || {})
+  });
+
+  return React.createElement(TableRow, Object.assign({
+    hover: true
+  }, tableRowProps), React.createElement(TableCell$1, Object.assign({
+    colSpan: tableInstance.visibleColumns.length + 10,
+    onClick: function onClick(event) {
+      return onDetailPanelClick == null ? void 0 : onDetailPanelClick(event, row);
     }
-  }, React.createElement(Collapse, {
+  }, tableCellProps), React.createElement(Collapse, {
     "in": row.isExpanded
   }, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
 };
 
-var MRT_TableExpandButton = function MRT_TableExpandButton(_ref) {
+var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   var row = _ref.row;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      localization = _useMaterialReactTabl.localization,
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      densePadding = _useMaterialReactTabl.densePadding,
+      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+
   return React.createElement(TableCell$1, {
-    style: {
-      width: '2rem'
-    },
     size: "small",
-    variant: "head"
-  }, React.createElement(IconButton, {
-    onClick: function onClick() {
-      return row.toggleRowExpanded();
-    },
-    size: "small"
-  }, React.createElement(ArrowForwardIosIcon, {
-    fontSize: "small",
     style: {
-      transform: row.isExpanded ? 'rotate(90deg)' : 'rotate(0)',
+      padding: densePadding ? '0' : '0.6rem 0',
+      paddingLeft: row.depth + 0.5 + "rem",
+      transition: 'all 0.2s ease-in-out',
+      width: (renderDetailPanel ? 2 : tableInstance.expandedDepth - row.depth + 2) + "rem"
+    }
+  }, React.createElement(IconButton$2, Object.assign({
+    disabled: !row.canExpand && !renderDetailPanel,
+    "aria-label": localization == null ? void 0 : localization.expandButtonTitle,
+    title: localization == null ? void 0 : localization.expandButtonTitle
+  }, row.getToggleRowExpandedProps()), React.createElement(ExpandMoreIcon, {
+    fontSize: row.canExpand || renderDetailPanel ? 'medium' : 'small',
+    style: {
+      transform: !row.canExpand && !renderDetailPanel ? 'rotate(-90deg)' : row.isExpanded ? 'rotate(-180deg)' : 'rotate(0)',
       transition: 'transform 0.2s'
     }
   })));
 };
 
-var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
+var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var row = _ref.row;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      onRowSelectChange = _useMaterialReactTabl.onRowSelectChange,
+      densePadding = _useMaterialReactTabl.densePadding;
 
-  return React.createElement(React.Fragment, null, React.createElement(TableRow, Object.assign({}, row.getRowProps()), renderDetailPanel && React.createElement(MRT_TableExpandButton, {
-    row: row
-  }), row.cells.map(function (cell, index) {
-    return React.createElement(MRT_TableBodyCell, {
-      key: index + "-" + cell.value,
-      cell: cell
-    });
-  })), renderDetailPanel && React.createElement(MRT_TableDetailPanel, {
-    row: row
-  }));
-};
+  var onSelectChange = function onSelectChange(event) {
+    var _row$getToggleRowSele;
 
-var MRT_TableBody = function MRT_TableBody() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance;
+    (_row$getToggleRowSele = row.getToggleRowSelectedProps()) == null ? void 0 : _row$getToggleRowSele.onChange == null ? void 0 : _row$getToggleRowSele.onChange(event);
+    onRowSelectChange == null ? void 0 : onRowSelectChange(event, row, tableInstance.selectedFlatRows);
+  };
 
-  return React.createElement(TableBody, Object.assign({}, tableInstance.getTableBodyProps()), tableInstance.page.map(function (row, index) {
-    tableInstance.prepareRow(row);
-    return React.createElement(MRT_TableBodyRow, {
-      key: index + "-" + row.id,
-      row: row
-    });
-  }));
+  return React.createElement(TableCell$1, {
+    style: {
+      width: '2rem',
+      padding: densePadding ? '0' : '0.6rem',
+      transition: 'all 0.2s ease-in-out'
+    }
+  }, React.createElement(Checkbox, Object.assign({}, row.getToggleRowSelectedProps(), {
+    onChange: onSelectChange
+  })));
 };
 
-var TableCell = /*#__PURE__*/styled(TableCell$1)({
-  fontWeight: 'bold'
+var MenuItem$1 = /*#__PURE__*/styled(MenuItem$2)({
+  display: 'flex',
+  gap: '0.75rem'
 });
-var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
-  var _column$columns$lengt, _column$columns;
-
-  var column = _ref.column;
-  var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
-  return React.createElement(TableCell, Object.assign({
-    align: isParentHeader ? 'center' : 'left',
-    variant: "head"
-  }, column.getFooterProps()), column.render('Footer'));
-};
+var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
+  var _renderRowActionMenuI;
 
-var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
-  var footerGroup = _ref.footerGroup;
+  var anchorEl = _ref.anchorEl,
+      row = _ref.row,
+      setAnchorEl = _ref.setAnchorEl;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+      enableRowEditing = _useMaterialReactTabl.enableRowEditing,
+      localization = _useMaterialReactTabl.localization,
+      renderRowActionMenuItems = _useMaterialReactTabl.renderRowActionMenuItems,
+      setCurrentEditingRowId = _useMaterialReactTabl.setCurrentEditingRowId,
+      tableInstance = _useMaterialReactTabl.tableInstance;
 
-  return React.createElement(TableRow, Object.assign({}, footerGroup.getFooterGroupProps()), renderDetailPanel && React.createElement(TableCell$1, {
-    style: {
-      width: '2rem'
+  var handleEdit = function handleEdit() {
+    setCurrentEditingRowId(row.id);
+    setAnchorEl(null);
+  };
+
+  return React.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
     }
-  }), footerGroup.headers.map(function (column, index) {
-    return React.createElement(MRT_TableFooterCell, {
-      key: index + "-" + column.id,
-      column: column
-    });
-  }));
+  }, enableRowEditing && React.createElement(MenuItem$1, {
+    onClick: handleEdit
+  }, React.createElement(EditIcon, null), " ", localization == null ? void 0 : localization.rowActionMenuItemEdit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
+    return setAnchorEl(null);
+  })) != null ? _renderRowActionMenuI : null);
 };
 
-var MRT_TableFooter = function MRT_TableFooter() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      tableFooterProps = _useMaterialReactTabl.tableFooterProps,
-      options = _useMaterialReactTabl.options;
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
 
-  var hasFooterGroups = tableInstance.columns.some(function (c) {
-    return c.depth === 0 && !!c.Footer;
-  });
-  return React.createElement(TableFooter, Object.assign({}, tableFooterProps), hasFooterGroups && tableInstance.footerGroups.map(function (footerGroup, index) {
-    return React.createElement(MRT_TableFooterRow, {
-      key: index + "-" + footerGroup.id,
-      footerGroup: footerGroup
-    });
-  }), options.enablePagination === true || ['bottom', 'both'].includes(options.enablePagination.toString()) && React.createElement(MRT_TablePagination, null));
-};
+var runtime_1 = createCommonjsModule(function (module) {
+/**
+ * Copyright (c) 2014-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
-var MRT_Table = function MRT_Table() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
-      tableProps = _useMaterialReactTabl.tableProps,
-      options = _useMaterialReactTabl.options;
+var runtime = (function (exports) {
 
-  return React.createElement(Table, Object.assign({
-    stickyHeader: true
-  }, tableProps, tableInstance.getTableProps()), options.showHead && React.createElement(MRT_TableHead, null), React.createElement(MRT_TableBody, null), options.showFooter && React.createElement(MRT_TableFooter, null));
-};
+  var Op = Object.prototype;
+  var hasOwn = Op.hasOwnProperty;
+  var undefined$1; // More compressible than void 0.
+  var $Symbol = typeof Symbol === "function" ? Symbol : {};
+  var iteratorSymbol = $Symbol.iterator || "@@iterator";
+  var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
+  var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
 
-var MRT_TableContainer = function MRT_TableContainer() {
-  var _useMaterialReactTabl = useMaterialReactTable(),
-      tableContainerProps = _useMaterialReactTabl.tableContainerProps;
+  function define(obj, key, value) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+    return obj[key];
+  }
+  try {
+    // IE 8 has a broken Object.defineProperty that only works on DOM objects.
+    define({}, "");
+  } catch (err) {
+    define = function(obj, key, value) {
+      return obj[key] = value;
+    };
+  }
+
+  function wrap(innerFn, outerFn, self, tryLocsList) {
+    // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
+    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
+    var generator = Object.create(protoGenerator.prototype);
+    var context = new Context(tryLocsList || []);
+
+    // The ._invoke method unifies the implementations of the .next,
+    // .throw, and .return methods.
+    generator._invoke = makeInvokeMethod(innerFn, self, context);
+
+    return generator;
+  }
+  exports.wrap = wrap;
+
+  // Try/catch helper to minimize deoptimizations. Returns a completion
+  // record like context.tryEntries[i].completion. This interface could
+  // have been (and was previously) designed to take a closure to be
+  // invoked without arguments, but in all the cases we care about we
+  // already have an existing method we want to call, so there's no need
+  // to create a new function object. We can even get away with assuming
+  // the method takes exactly one argument, since that happens to be true
+  // in every case, so we don't have to touch the arguments object. The
+  // only additional allocation required is the completion record, which
+  // has a stable shape and so hopefully should be cheap to allocate.
+  function tryCatch(fn, obj, arg) {
+    try {
+      return { type: "normal", arg: fn.call(obj, arg) };
+    } catch (err) {
+      return { type: "throw", arg: err };
+    }
+  }
+
+  var GenStateSuspendedStart = "suspendedStart";
+  var GenStateSuspendedYield = "suspendedYield";
+  var GenStateExecuting = "executing";
+  var GenStateCompleted = "completed";
+
+  // Returning this object from the innerFn has the same effect as
+  // breaking out of the dispatch switch statement.
+  var ContinueSentinel = {};
+
+  // Dummy constructor functions that we use as the .constructor and
+  // .constructor.prototype properties for functions that return Generator
+  // objects. For full spec compliance, you may wish to configure your
+  // minifier not to mangle the names of these two functions.
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+
+  // This is a polyfill for %IteratorPrototype% for environments that
+  // don't natively support it.
+  var IteratorPrototype = {};
+  define(IteratorPrototype, iteratorSymbol, function () {
+    return this;
+  });
+
+  var getProto = Object.getPrototypeOf;
+  var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
+  if (NativeIteratorPrototype &&
+      NativeIteratorPrototype !== Op &&
+      hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
+    // This environment has a native %IteratorPrototype%; use it instead
+    // of the polyfill.
+    IteratorPrototype = NativeIteratorPrototype;
+  }
+
+  var Gp = GeneratorFunctionPrototype.prototype =
+    Generator.prototype = Object.create(IteratorPrototype);
+  GeneratorFunction.prototype = GeneratorFunctionPrototype;
+  define(Gp, "constructor", GeneratorFunctionPrototype);
+  define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
+  GeneratorFunction.displayName = define(
+    GeneratorFunctionPrototype,
+    toStringTagSymbol,
+    "GeneratorFunction"
+  );
+
+  // Helper for defining the .next, .throw, and .return methods of the
+  // Iterator interface in terms of a single ._invoke method.
+  function defineIteratorMethods(prototype) {
+    ["next", "throw", "return"].forEach(function(method) {
+      define(prototype, method, function(arg) {
+        return this._invoke(method, arg);
+      });
+    });
+  }
+
+  exports.isGeneratorFunction = function(genFun) {
+    var ctor = typeof genFun === "function" && genFun.constructor;
+    return ctor
+      ? ctor === GeneratorFunction ||
+        // For the native GeneratorFunction constructor, the best we can
+        // do is to check its .name property.
+        (ctor.displayName || ctor.name) === "GeneratorFunction"
+      : false;
+  };
+
+  exports.mark = function(genFun) {
+    if (Object.setPrototypeOf) {
+      Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
+    } else {
+      genFun.__proto__ = GeneratorFunctionPrototype;
+      define(genFun, toStringTagSymbol, "GeneratorFunction");
+    }
+    genFun.prototype = Object.create(Gp);
+    return genFun;
+  };
+
+  // Within the body of any async function, `await x` is transformed to
+  // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
+  // `hasOwn.call(value, "__await")` to determine if the yielded value is
+  // meant to be awaited.
+  exports.awrap = function(arg) {
+    return { __await: arg };
+  };
+
+  function AsyncIterator(generator, PromiseImpl) {
+    function invoke(method, arg, resolve, reject) {
+      var record = tryCatch(generator[method], generator, arg);
+      if (record.type === "throw") {
+        reject(record.arg);
+      } else {
+        var result = record.arg;
+        var value = result.value;
+        if (value &&
+            typeof value === "object" &&
+            hasOwn.call(value, "__await")) {
+          return PromiseImpl.resolve(value.__await).then(function(value) {
+            invoke("next", value, resolve, reject);
+          }, function(err) {
+            invoke("throw", err, resolve, reject);
+          });
+        }
+
+        return PromiseImpl.resolve(value).then(function(unwrapped) {
+          // When a yielded Promise is resolved, its final value becomes
+          // the .value of the Promise<{value,done}> result for the
+          // current iteration.
+          result.value = unwrapped;
+          resolve(result);
+        }, function(error) {
+          // If a rejected Promise was yielded, throw the rejection back
+          // into the async generator function so it can be handled there.
+          return invoke("throw", error, resolve, reject);
+        });
+      }
+    }
+
+    var previousPromise;
+
+    function enqueue(method, arg) {
+      function callInvokeWithMethodAndArg() {
+        return new PromiseImpl(function(resolve, reject) {
+          invoke(method, arg, resolve, reject);
+        });
+      }
+
+      return previousPromise =
+        // If enqueue has been called before, then we want to wait until
+        // all previous Promises have been resolved before calling invoke,
+        // so that results are always delivered in the correct order. If
+        // enqueue has not been called before, then it is important to
+        // call invoke immediately, without waiting on a callback to fire,
+        // so that the async generator function has the opportunity to do
+        // any necessary setup in a predictable way. This predictability
+        // is why the Promise constructor synchronously invokes its
+        // executor callback, and why async functions synchronously
+        // execute code before the first await. Since we implement simple
+        // async functions in terms of async generators, it is especially
+        // important to get this right, even though it requires care.
+        previousPromise ? previousPromise.then(
+          callInvokeWithMethodAndArg,
+          // Avoid propagating failures to Promises returned by later
+          // invocations of the iterator.
+          callInvokeWithMethodAndArg
+        ) : callInvokeWithMethodAndArg();
+    }
+
+    // Define the unified helper method that is used to implement .next,
+    // .throw, and .return (see defineIteratorMethods).
+    this._invoke = enqueue;
+  }
+
+  defineIteratorMethods(AsyncIterator.prototype);
+  define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+    return this;
+  });
+  exports.AsyncIterator = AsyncIterator;
+
+  // Note that simple async functions are implemented on top of
+  // AsyncIterator objects; they just return a Promise for the value of
+  // the final result produced by the iterator.
+  exports.async = function(innerFn, outerFn, self, tryLocsList, PromiseImpl) {
+    if (PromiseImpl === void 0) PromiseImpl = Promise;
+
+    var iter = new AsyncIterator(
+      wrap(innerFn, outerFn, self, tryLocsList),
+      PromiseImpl
+    );
+
+    return exports.isGeneratorFunction(outerFn)
+      ? iter // If outerFn is a generator, return the full iterator.
+      : iter.next().then(function(result) {
+          return result.done ? result.value : iter.next();
+        });
+  };
+
+  function makeInvokeMethod(innerFn, self, context) {
+    var state = GenStateSuspendedStart;
+
+    return function invoke(method, arg) {
+      if (state === GenStateExecuting) {
+        throw new Error("Generator is already running");
+      }
+
+      if (state === GenStateCompleted) {
+        if (method === "throw") {
+          throw arg;
+        }
+
+        // Be forgiving, per 25.3.3.3.3 of the spec:
+        // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
+        return doneResult();
+      }
+
+      context.method = method;
+      context.arg = arg;
+
+      while (true) {
+        var delegate = context.delegate;
+        if (delegate) {
+          var delegateResult = maybeInvokeDelegate(delegate, context);
+          if (delegateResult) {
+            if (delegateResult === ContinueSentinel) continue;
+            return delegateResult;
+          }
+        }
+
+        if (context.method === "next") {
+          // Setting context._sent for legacy support of Babel's
+          // function.sent implementation.
+          context.sent = context._sent = context.arg;
+
+        } else if (context.method === "throw") {
+          if (state === GenStateSuspendedStart) {
+            state = GenStateCompleted;
+            throw context.arg;
+          }
+
+          context.dispatchException(context.arg);
+
+        } else if (context.method === "return") {
+          context.abrupt("return", context.arg);
+        }
+
+        state = GenStateExecuting;
+
+        var record = tryCatch(innerFn, self, context);
+        if (record.type === "normal") {
+          // If an exception is thrown from innerFn, we leave state ===
+          // GenStateExecuting and loop back for another invocation.
+          state = context.done
+            ? GenStateCompleted
+            : GenStateSuspendedYield;
+
+          if (record.arg === ContinueSentinel) {
+            continue;
+          }
+
+          return {
+            value: record.arg,
+            done: context.done
+          };
+
+        } else if (record.type === "throw") {
+          state = GenStateCompleted;
+          // Dispatch the exception by looping back around to the
+          // context.dispatchException(context.arg) call above.
+          context.method = "throw";
+          context.arg = record.arg;
+        }
+      }
+    };
+  }
+
+  // Call delegate.iterator[context.method](context.arg) and handle the
+  // result, either by returning a { value, done } result from the
+  // delegate iterator, or by modifying context.method and context.arg,
+  // setting context.delegate to null, and returning the ContinueSentinel.
+  function maybeInvokeDelegate(delegate, context) {
+    var method = delegate.iterator[context.method];
+    if (method === undefined$1) {
+      // A .throw or .return when the delegate iterator has no .throw
+      // method always terminates the yield* loop.
+      context.delegate = null;
+
+      if (context.method === "throw") {
+        // Note: ["return"] must be used for ES3 parsing compatibility.
+        if (delegate.iterator["return"]) {
+          // If the delegate iterator has a return method, give it a
+          // chance to clean up.
+          context.method = "return";
+          context.arg = undefined$1;
+          maybeInvokeDelegate(delegate, context);
+
+          if (context.method === "throw") {
+            // If maybeInvokeDelegate(context) changed context.method from
+            // "return" to "throw", let that override the TypeError below.
+            return ContinueSentinel;
+          }
+        }
+
+        context.method = "throw";
+        context.arg = new TypeError(
+          "The iterator does not provide a 'throw' method");
+      }
+
+      return ContinueSentinel;
+    }
+
+    var record = tryCatch(method, delegate.iterator, context.arg);
+
+    if (record.type === "throw") {
+      context.method = "throw";
+      context.arg = record.arg;
+      context.delegate = null;
+      return ContinueSentinel;
+    }
+
+    var info = record.arg;
+
+    if (! info) {
+      context.method = "throw";
+      context.arg = new TypeError("iterator result is not an object");
+      context.delegate = null;
+      return ContinueSentinel;
+    }
+
+    if (info.done) {
+      // Assign the result of the finished delegate to the temporary
+      // variable specified by delegate.resultName (see delegateYield).
+      context[delegate.resultName] = info.value;
+
+      // Resume execution at the desired location (see delegateYield).
+      context.next = delegate.nextLoc;
+
+      // If context.method was "throw" but the delegate handled the
+      // exception, let the outer generator proceed normally. If
+      // context.method was "next", forget context.arg since it has been
+      // "consumed" by the delegate iterator. If context.method was
+      // "return", allow the original .return call to continue in the
+      // outer generator.
+      if (context.method !== "return") {
+        context.method = "next";
+        context.arg = undefined$1;
+      }
+
+    } else {
+      // Re-yield the result returned by the delegate method.
+      return info;
+    }
+
+    // The delegate iterator is finished, so forget it and continue with
+    // the outer generator.
+    context.delegate = null;
+    return ContinueSentinel;
+  }
+
+  // Define Generator.prototype.{next,throw,return} in terms of the
+  // unified ._invoke helper method.
+  defineIteratorMethods(Gp);
+
+  define(Gp, toStringTagSymbol, "Generator");
+
+  // A Generator should always return itself as the iterator object when the
+  // @@iterator function is called on it. Some browsers' implementations of the
+  // iterator prototype chain incorrectly implement this, causing the Generator
+  // object to not be returned from this call. This ensures that doesn't happen.
+  // See https://github.com/facebook/regenerator/issues/274 for more details.
+  define(Gp, iteratorSymbol, function() {
+    return this;
+  });
+
+  define(Gp, "toString", function() {
+    return "[object Generator]";
+  });
+
+  function pushTryEntry(locs) {
+    var entry = { tryLoc: locs[0] };
+
+    if (1 in locs) {
+      entry.catchLoc = locs[1];
+    }
+
+    if (2 in locs) {
+      entry.finallyLoc = locs[2];
+      entry.afterLoc = locs[3];
+    }
+
+    this.tryEntries.push(entry);
+  }
+
+  function resetTryEntry(entry) {
+    var record = entry.completion || {};
+    record.type = "normal";
+    delete record.arg;
+    entry.completion = record;
+  }
+
+  function Context(tryLocsList) {
+    // The root entry object (effectively a try statement without a catch
+    // or a finally block) gives us a place to store values thrown from
+    // locations where there is no enclosing try statement.
+    this.tryEntries = [{ tryLoc: "root" }];
+    tryLocsList.forEach(pushTryEntry, this);
+    this.reset(true);
+  }
+
+  exports.keys = function(object) {
+    var keys = [];
+    for (var key in object) {
+      keys.push(key);
+    }
+    keys.reverse();
+
+    // Rather than returning an object with a next method, we keep
+    // things simple and return the next function itself.
+    return function next() {
+      while (keys.length) {
+        var key = keys.pop();
+        if (key in object) {
+          next.value = key;
+          next.done = false;
+          return next;
+        }
+      }
+
+      // To avoid creating an additional object, we just hang the .value
+      // and .done properties off the next function object itself. This
+      // also ensures that the minifier will not anonymize the function.
+      next.done = true;
+      return next;
+    };
+  };
+
+  function values(iterable) {
+    if (iterable) {
+      var iteratorMethod = iterable[iteratorSymbol];
+      if (iteratorMethod) {
+        return iteratorMethod.call(iterable);
+      }
+
+      if (typeof iterable.next === "function") {
+        return iterable;
+      }
+
+      if (!isNaN(iterable.length)) {
+        var i = -1, next = function next() {
+          while (++i < iterable.length) {
+            if (hasOwn.call(iterable, i)) {
+              next.value = iterable[i];
+              next.done = false;
+              return next;
+            }
+          }
+
+          next.value = undefined$1;
+          next.done = true;
+
+          return next;
+        };
+
+        return next.next = next;
+      }
+    }
+
+    // Return an iterator with no values.
+    return { next: doneResult };
+  }
+  exports.values = values;
+
+  function doneResult() {
+    return { value: undefined$1, done: true };
+  }
+
+  Context.prototype = {
+    constructor: Context,
+
+    reset: function(skipTempReset) {
+      this.prev = 0;
+      this.next = 0;
+      // Resetting context._sent for legacy support of Babel's
+      // function.sent implementation.
+      this.sent = this._sent = undefined$1;
+      this.done = false;
+      this.delegate = null;
+
+      this.method = "next";
+      this.arg = undefined$1;
+
+      this.tryEntries.forEach(resetTryEntry);
+
+      if (!skipTempReset) {
+        for (var name in this) {
+          // Not sure about the optimal order of these conditions:
+          if (name.charAt(0) === "t" &&
+              hasOwn.call(this, name) &&
+              !isNaN(+name.slice(1))) {
+            this[name] = undefined$1;
+          }
+        }
+      }
+    },
+
+    stop: function() {
+      this.done = true;
+
+      var rootEntry = this.tryEntries[0];
+      var rootRecord = rootEntry.completion;
+      if (rootRecord.type === "throw") {
+        throw rootRecord.arg;
+      }
+
+      return this.rval;
+    },
+
+    dispatchException: function(exception) {
+      if (this.done) {
+        throw exception;
+      }
+
+      var context = this;
+      function handle(loc, caught) {
+        record.type = "throw";
+        record.arg = exception;
+        context.next = loc;
+
+        if (caught) {
+          // If the dispatched exception was caught by a catch block,
+          // then let that catch block handle the exception normally.
+          context.method = "next";
+          context.arg = undefined$1;
+        }
+
+        return !! caught;
+      }
+
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        var record = entry.completion;
+
+        if (entry.tryLoc === "root") {
+          // Exception thrown outside of any try block that could handle
+          // it, so set the completion value of the entire function to
+          // throw the exception.
+          return handle("end");
+        }
+
+        if (entry.tryLoc <= this.prev) {
+          var hasCatch = hasOwn.call(entry, "catchLoc");
+          var hasFinally = hasOwn.call(entry, "finallyLoc");
+
+          if (hasCatch && hasFinally) {
+            if (this.prev < entry.catchLoc) {
+              return handle(entry.catchLoc, true);
+            } else if (this.prev < entry.finallyLoc) {
+              return handle(entry.finallyLoc);
+            }
+
+          } else if (hasCatch) {
+            if (this.prev < entry.catchLoc) {
+              return handle(entry.catchLoc, true);
+            }
+
+          } else if (hasFinally) {
+            if (this.prev < entry.finallyLoc) {
+              return handle(entry.finallyLoc);
+            }
+
+          } else {
+            throw new Error("try statement without catch or finally");
+          }
+        }
+      }
+    },
+
+    abrupt: function(type, arg) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.tryLoc <= this.prev &&
+            hasOwn.call(entry, "finallyLoc") &&
+            this.prev < entry.finallyLoc) {
+          var finallyEntry = entry;
+          break;
+        }
+      }
+
+      if (finallyEntry &&
+          (type === "break" ||
+           type === "continue") &&
+          finallyEntry.tryLoc <= arg &&
+          arg <= finallyEntry.finallyLoc) {
+        // Ignore the finally entry if control is not jumping to a
+        // location outside the try/catch block.
+        finallyEntry = null;
+      }
+
+      var record = finallyEntry ? finallyEntry.completion : {};
+      record.type = type;
+      record.arg = arg;
+
+      if (finallyEntry) {
+        this.method = "next";
+        this.next = finallyEntry.finallyLoc;
+        return ContinueSentinel;
+      }
+
+      return this.complete(record);
+    },
+
+    complete: function(record, afterLoc) {
+      if (record.type === "throw") {
+        throw record.arg;
+      }
+
+      if (record.type === "break" ||
+          record.type === "continue") {
+        this.next = record.arg;
+      } else if (record.type === "return") {
+        this.rval = this.arg = record.arg;
+        this.method = "return";
+        this.next = "end";
+      } else if (record.type === "normal" && afterLoc) {
+        this.next = afterLoc;
+      }
+
+      return ContinueSentinel;
+    },
+
+    finish: function(finallyLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.finallyLoc === finallyLoc) {
+          this.complete(entry.completion, entry.afterLoc);
+          resetTryEntry(entry);
+          return ContinueSentinel;
+        }
+      }
+    },
+
+    "catch": function(tryLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.tryLoc === tryLoc) {
+          var record = entry.completion;
+          if (record.type === "throw") {
+            var thrown = record.arg;
+            resetTryEntry(entry);
+          }
+          return thrown;
+        }
+      }
+
+      // The context.catch method must only be called with a location
+      // argument that corresponds to a known catch block.
+      throw new Error("illegal catch attempt");
+    },
+
+    delegateYield: function(iterable, resultName, nextLoc) {
+      this.delegate = {
+        iterator: values(iterable),
+        resultName: resultName,
+        nextLoc: nextLoc
+      };
+
+      if (this.method === "next") {
+        // Deliberately forget the last sent value so that we don't
+        // accidentally pass it on to the delegate.
+        this.arg = undefined$1;
+      }
+
+      return ContinueSentinel;
+    }
+  };
+
+  // Regardless of whether this script is executing as a CommonJS module
+  // or not, return the runtime object so that we can declare the variable
+  // regeneratorRuntime in the outer scope, which allows this module to be
+  // injected easily by `bin/regenerator --include-runtime script.js`.
+  return exports;
+
+}(
+  // If this script is executing as a CommonJS module, use module.exports
+  // as the regeneratorRuntime namespace. Otherwise create a new empty
+  // object. Either way, the resulting object will be used to initialize
+  // the regeneratorRuntime variable at the top of this file.
+   module.exports 
+));
+
+try {
+  regeneratorRuntime = runtime;
+} catch (accidentalStrictMode) {
+  // This module should not be running in strict mode, so the above
+  // assignment should always work unless something is misconfigured. Just
+  // in case runtime.js accidentally runs in strict mode, in modern engines
+  // we can explicitly access globalThis. In older engines we can escape
+  // strict mode using a global Function call. This could conceivably fail
+  // if a Content Security Policy forbids using Function, but in that case
+  // the proper solution is to fix the accidental strict mode problem. If
+  // you've misconfigured your bundler to force strict mode and applied a
+  // CSP to forbid Function, and you're not willing to fix either of those
+  // problems, please detail your unique predicament in a GitHub issue.
+  if (typeof globalThis === "object") {
+    globalThis.regeneratorRuntime = runtime;
+  } else {
+    Function("r", "regeneratorRuntime = r")(runtime);
+  }
+}
+});
+
+var EditActionButtonWrappers = /*#__PURE__*/styled('div')({
+  display: 'flex',
+  gap: '0.75rem'
+});
+var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
+  var _localization$rowActi, _localization$rowActi2;
+
+  var row = _ref.row;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      localization = _useMaterialReactTabl.localization,
+      setCurrentEditingRowId = _useMaterialReactTabl.setCurrentEditingRowId,
+      onRowEditSubmit = _useMaterialReactTabl.onRowEditSubmit;
+
+  var handleCancel = function handleCancel() {
+    setCurrentEditingRowId(null);
+  };
+
+  var handleSave = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setCurrentEditingRowId(null);
+              _context.next = 3;
+              return onRowEditSubmit == null ? void 0 : onRowEditSubmit(row);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleSave() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return React.createElement(EditActionButtonWrappers, null, React.createElement(Tooltip, {
+    arrow: true,
+    title: (_localization$rowActi = localization == null ? void 0 : localization.rowActionButtonCancel) != null ? _localization$rowActi : ''
+  }, React.createElement(IconButton$2, {
+    "aria-label": localization == null ? void 0 : localization.rowActionButtonCancel,
+    onClick: handleCancel
+  }, React.createElement(CancelIcon, null))), React.createElement(Tooltip, {
+    arrow: true,
+    title: (_localization$rowActi2 = localization == null ? void 0 : localization.rowActionButtonSave) != null ? _localization$rowActi2 : ''
+  }, React.createElement(IconButton$2, {
+    "aria-label": localization == null ? void 0 : localization.rowActionButtonSave,
+    color: "info",
+    onClick: handleSave
+  }, React.createElement(SaveIcon, null))));
+};
+
+var IconButton$1 = /*#__PURE__*/styled(IconButton$2)({
+  opacity: 0.5,
+  transition: 'opacity 0.2s',
+  marginRight: '2px',
+  height: '2rem',
+  width: '2rem',
+  '&:hover': {
+    opacity: 1
+  }
+});
+var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
+  var row = _ref.row;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      localization = _useMaterialReactTabl.localization,
+      currentEditingRowId = _useMaterialReactTabl.currentEditingRowId,
+      renderRowActions = _useMaterialReactTabl.renderRowActions,
+      tableInstance = _useMaterialReactTabl.tableInstance;
+
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var handleOpenRowActionMenu = function handleOpenRowActionMenu(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+
+  if (renderRowActions) {
+    return React.createElement(React.Fragment, null, renderRowActions(row, tableInstance));
+  }
+
+  if (row.id === currentEditingRowId) {
+    return React.createElement(MRT_EditActionButtons, {
+      row: row
+    });
+  }
+
+  return React.createElement(React.Fragment, null, React.createElement(IconButton$1, {
+    "aria-label": localization == null ? void 0 : localization.rowActionMenuButtonTitle,
+    title: localization == null ? void 0 : localization.rowActionMenuButtonTitle,
+    onClick: handleOpenRowActionMenu,
+    size: "small"
+  }, React.createElement(MoreHorizIcon, null)), React.createElement(MRT_RowActionMenu, {
+    anchorEl: anchorEl,
+    row: row,
+    setAnchorEl: setAnchorEl
+  }));
+};
+
+var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
+  var _mTableBodyRowProps$s;
+
+  var row = _ref.row;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
+      enableRowActions = _useMaterialReactTabl.enableRowActions,
+      enableSelection = _useMaterialReactTabl.enableSelection,
+      muiTableBodyRowProps = _useMaterialReactTabl.muiTableBodyRowProps,
+      onRowClick = _useMaterialReactTabl.onRowClick,
+      positionActionsColumn = _useMaterialReactTabl.positionActionsColumn,
+      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+
+  var theme = useTheme();
+  var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
+
+  var tableRowProps = _extends({}, mTableBodyRowProps, row.getRowProps(), {
+    style: _extends({
+      backgroundColor: row.isSelected ? alpha(theme.palette.primary.light, 0.1) : 'transparent'
+    }, row.getRowProps().style, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
+  });
+
+  return React.createElement(React.Fragment, null, React.createElement(TableRow, Object.assign({
+    hover: true,
+    onClick: function onClick(event) {
+      return onRowClick == null ? void 0 : onRowClick(event, row);
+    }
+  }, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React.createElement(TableCell$1, null, React.createElement(MRT_ToggleRowActionMenuButton, {
+    row: row
+  })), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_ExpandButton, {
+    row: row
+  }), enableSelection && React.createElement(MRT_SelectCheckbox, {
+    row: row
+  }), row.cells.map(function (cell) {
+    return React.createElement(MRT_TableBodyCell, {
+      key: cell.getCellProps().key,
+      cell: cell
+    });
+  }), enableRowActions && positionActionsColumn === 'last' && React.createElement(TableCell$1, null, React.createElement(MRT_ToggleRowActionMenuButton, {
+    row: row
+  }))), renderDetailPanel && React.createElement(MRT_TableDetailPanel, {
+    row: row
+  }));
+};
+
+var TableBody = /*#__PURE__*/styled(TableBody$1)({
+  overflowY: 'hidden'
+});
+var CircularProgressWrapper = /*#__PURE__*/styled('div')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    backgroundColor: alpha(theme.palette.background.paper, 0.5),
+    display: 'grid',
+    height: '100%',
+    justifyContent: 'center',
+    margin: 'auto',
+    paddingTop: '5rem',
+    position: 'fixed',
+    width: 'calc(100% - 2rem)'
+  };
+});
+var MRT_TableBody = function MRT_TableBody() {
+  var _muiTableBodyProps$st;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      muiTableBodyProps = _useMaterialReactTabl.muiTableBodyProps,
+      isLoading = _useMaterialReactTabl.isLoading,
+      manualPagination = _useMaterialReactTabl.manualPagination;
+
+  var rows = manualPagination ? tableInstance.rows : tableInstance.page;
+
+  var tableBodyProps = _extends({}, muiTableBodyProps, tableInstance.getTableBodyProps(), {
+    style: _extends({}, tableInstance.getTableBodyProps().style, (_muiTableBodyProps$st = muiTableBodyProps == null ? void 0 : muiTableBodyProps.style) != null ? _muiTableBodyProps$st : {})
+  });
+
+  return React.createElement(TableBody, Object.assign({}, tableBodyProps), isLoading && React.createElement(CircularProgressWrapper, null, React.createElement(CircularProgress, null)), rows.map(function (row) {
+    tableInstance.prepareRow(row);
+    return React.createElement(MRT_TableBodyRow, {
+      key: row.getRowProps().key,
+      row: row
+    });
+  }));
+};
+
+var TableCell = /*#__PURE__*/styled(TableCell$1)({
+  fontWeight: 'bold'
+});
+var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
+  var _column$columns$lengt, _column$columns, _mTableFooterCellProp;
+
+  var column = _ref.column;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      muiTableFooterCellProps = _useMaterialReactTabl.muiTableFooterCellProps,
+      densePadding = _useMaterialReactTabl.densePadding;
+
+  var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
+  var mTableFooterCellProps = muiTableFooterCellProps instanceof Function ? muiTableFooterCellProps(column) : muiTableFooterCellProps;
+
+  var tableCellProps = _extends({}, mTableFooterCellProps, column.getFooterProps(), {
+    style: _extends({
+      padding: densePadding ? '0.5rem' : '1rem',
+      transition: 'all 0.2s ease-in-out'
+    }, column.getFooterProps().style, (_mTableFooterCellProp = mTableFooterCellProps == null ? void 0 : mTableFooterCellProps.style) != null ? _mTableFooterCellProp : {})
+  });
+
+  return React.createElement(TableCell, Object.assign({
+    align: isParentHeader ? 'center' : 'left',
+    variant: "head"
+  }, tableCellProps), column.render('Footer'));
+};
+
+var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
+  var _mTableFooterRowProps;
+
+  var footerGroup = _ref.footerGroup;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
+      columns = _useMaterialReactTabl.columns,
+      anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
+      enableSelection = _useMaterialReactTabl.enableSelection,
+      enableRowActions = _useMaterialReactTabl.enableRowActions,
+      positionActionsColumn = _useMaterialReactTabl.positionActionsColumn,
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      muiTableFooterRowProps = _useMaterialReactTabl.muiTableFooterRowProps; //if no content in row, skip row
+
+
+  if (!(columns != null && columns.some(function (c) {
+    return c.Footer;
+  }))) return null;
+  var mTableFooterRowProps = muiTableFooterRowProps instanceof Function ? muiTableFooterRowProps(footerGroup) : muiTableFooterRowProps;
+
+  var tableRowProps = _extends({}, mTableFooterRowProps, footerGroup.getFooterGroupProps(), {
+    style: _extends({}, footerGroup.getFooterGroupProps().style, (_mTableFooterRowProps = mTableFooterRowProps == null ? void 0 : mTableFooterRowProps.style) != null ? _mTableFooterRowProps : {})
+  });
+
+  return React.createElement(TableRow, Object.assign({}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React.createElement(MRT_TableSpacerCell, null), (anyRowsCanExpand || renderDetailPanel) && React.createElement(MRT_TableSpacerCell, {
+    width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
+  }), enableSelection && React.createElement(MRT_TableSpacerCell, {
+    width: "1rem"
+  }), footerGroup.headers.map(function (column, index) {
+    return React.createElement(MRT_TableFooterCell, {
+      key: index + "-" + column.id,
+      column: column
+    });
+  }), enableRowActions && positionActionsColumn === 'last' && React.createElement(MRT_TableSpacerCell, null));
+};
+
+var MRT_TableFooter = function MRT_TableFooter() {
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      muiTableFooterProps = _useMaterialReactTabl.muiTableFooterProps,
+      tableInstance = _useMaterialReactTabl.tableInstance;
+
+  return React.createElement(TableFooter, Object.assign({}, muiTableFooterProps), tableInstance.footerGroups.map(function (footerGroup, index) {
+    return React.createElement(MRT_TableFooterRow, {
+      key: index + "-" + footerGroup.id,
+      footerGroup: footerGroup
+    });
+  }));
+};
+
+var MRT_Table = function MRT_Table() {
+  var _muiTableProps$style;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      muiTableProps = _useMaterialReactTabl.muiTableProps,
+      hideTableHead = _useMaterialReactTabl.hideTableHead,
+      hideTableFooter = _useMaterialReactTabl.hideTableFooter;
+
+  var tableProps = _extends({}, muiTableProps, tableInstance.getTableProps(), {
+    style: _extends({}, tableInstance.getTableProps().style, (_muiTableProps$style = muiTableProps == null ? void 0 : muiTableProps.style) != null ? _muiTableProps$style : {})
+  });
+
+  return React.createElement(Table, Object.assign({}, tableProps), !hideTableHead && React.createElement(MRT_TableHead, null), React.createElement(MRT_TableBody, null), !hideTableFooter && React.createElement(MRT_TableFooter, null));
+};
+
+var TextField = /*#__PURE__*/styled(TextField$1)({
+  justifySelf: 'end'
+});
+var MRT_SearchTextField = function MRT_SearchTextField() {
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps,
+      localization = _useMaterialReactTabl.localization,
+      onGlobalFilterChange = _useMaterialReactTabl.onGlobalFilterChange;
+
+  var _useState = useState(''),
+      searchValue = _useState[0],
+      setSearchValue = _useState[1];
+
+  var handleChange = useAsyncDebounce(function (event) {
+    var _event$target$value;
+
+    tableInstance.setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
+    onGlobalFilterChange == null ? void 0 : onGlobalFilterChange(event);
+  }, 200);
+
+  var handleClear = function handleClear() {
+    setSearchValue('');
+    tableInstance.setGlobalFilter(undefined);
+  };
+
+  return React.createElement(TextField, Object.assign({
+    placeholder: localization == null ? void 0 : localization.searchTextFieldPlaceholder,
+    onChange: function onChange(event) {
+      setSearchValue(event.target.value);
+      handleChange(event);
+    },
+    value: searchValue != null ? searchValue : '',
+    variant: "standard",
+    InputProps: {
+      startAdornment: React.createElement(InputAdornment, {
+        position: "start"
+      }, React.createElement(SearchIcon, {
+        fontSize: "small"
+      })),
+      endAdornment: React.createElement(InputAdornment, {
+        position: "end"
+      }, React.createElement(IconButton$2, {
+        "aria-label": localization == null ? void 0 : localization.searchTextFieldClearButtonTitle,
+        disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
+        onClick: handleClear,
+        size: "small",
+        title: localization == null ? void 0 : localization.searchTextFieldClearButtonTitle
+      }, React.createElement(CloseIcon, {
+        fontSize: "small"
+      })))
+    }
+  }, muiSearchTextFieldProps));
+};
+
+var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton() {
+  var _localization$toggleF;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      localization = _useMaterialReactTabl.localization,
+      setShowFilters = _useMaterialReactTabl.setShowFilters,
+      showFilters = _useMaterialReactTabl.showFilters;
+
+  return React.createElement(Tooltip, {
+    arrow: true,
+    title: (_localization$toggleF = localization == null ? void 0 : localization.toggleFilterButtonTitle) != null ? _localization$toggleF : ''
+  }, React.createElement(IconButton$2, {
+    "aria-label": localization == null ? void 0 : localization.toggleFilterButtonTitle,
+    onClick: function onClick() {
+      return setShowFilters(!showFilters);
+    },
+    size: "small"
+  }, showFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterIcon, null)));
+};
+
+var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
+  var _column$columns;
+
+  var column = _ref.column;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      maxColumnDepth = _useMaterialReactTabl.maxColumnDepth;
+
+  var isMaxDepth = column.depth === maxColumnDepth;
+  return React.createElement(React.Fragment, null, React.createElement(MenuItem$2, {
+    style: {
+      paddingLeft: column.depth + 1 + "rem"
+    }
+  }, isMaxDepth ? React.createElement(FormControlLabel, {
+    checked: column.isVisible,
+    control: React.createElement(Switch, null),
+    label: column.Header,
+    onChange: function onChange() {
+      return isMaxDepth && column.toggleHidden();
+    }
+  }) : React.createElement(Typography, null, column.Header)), (_column$columns = column.columns) == null ? void 0 : _column$columns.map(function (c, i) {
+    return React.createElement(MRT_ShowHideColumnsMenu, {
+      key: i + "-" + c.id,
+      column: c
+    });
+  }));
+};
+
+var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
+  var _localization$showHid;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      localization = _useMaterialReactTabl.localization;
+
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
+    arrow: true,
+    title: (_localization$showHid = localization == null ? void 0 : localization.showHideColumnsButtonTitle) != null ? _localization$showHid : ''
+  }, React.createElement(IconButton$2, {
+    "aria-label": localization == null ? void 0 : localization.showHideColumnsButtonTitle,
+    onClick: handleClick,
+    size: "small"
+  }, React.createElement(ViewColumnIcon, null))), React.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    }
+  }, tableInstance.columns.map(function (column, index) {
+    return React.createElement(MRT_ShowHideColumnsMenu, {
+      key: index + "-" + column.id,
+      column: column
+    });
+  })));
+};
+
+var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
+  var _localization$toggleD;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      densePadding = _useMaterialReactTabl.densePadding,
+      setDensePadding = _useMaterialReactTabl.setDensePadding,
+      localization = _useMaterialReactTabl.localization;
+
+  return React.createElement(Tooltip, {
+    arrow: true,
+    title: (_localization$toggleD = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD : ''
+  }, React.createElement(Switch, {
+    color: "default",
+    checked: densePadding,
+    size: "small",
+    onChange: function onChange() {
+      return setDensePadding(!densePadding);
+    }
+  }));
+};
+
+var ToolbarButtonsContainer = /*#__PURE__*/styled('div')({
+  display: 'flex',
+  gap: '0.5rem',
+  alignItems: 'center'
+});
+var MRT_ToolbarButtons = function MRT_ToolbarButtons() {
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      disableFilters = _useMaterialReactTabl.disableFilters,
+      disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
+      disableDensePaddingToggle = _useMaterialReactTabl.disableDensePaddingToggle;
+
+  return React.createElement(ToolbarButtonsContainer, null, !disableFilters && React.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React.createElement(MRT_DensePaddingSwitch, null));
+};
+
+var MRT_TablePagination = function MRT_TablePagination() {
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      muiTablePaginationProps = _useMaterialReactTabl.muiTablePaginationProps;
+
+  var tablePaginationProps = muiTablePaginationProps instanceof Function ? muiTablePaginationProps(tableInstance) : muiTablePaginationProps;
+
+  var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
+    tableInstance.setPageSize(+event.target.value);
+    tableInstance.gotoPage(0);
+  };
+
+  return React.createElement(TablePagination, Object.assign({
+    component: 'div',
+    count: tableInstance.rows.length,
+    onPageChange: function onPageChange(_, newPage) {
+      return tableInstance.gotoPage(newPage);
+    },
+    onRowsPerPageChange: handleChangeRowsPerPage,
+    page: tableInstance.state.pageIndex,
+    rowsPerPage: tableInstance.state.pageSize,
+    showFirstButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
+    showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2
+  }, tablePaginationProps));
+};
+
+var Toolbar = /*#__PURE__*/styled(Toolbar$2)({
+  display: 'grid'
+});
+var ToolbarTopRow = /*#__PURE__*/styled('div')({
+  padding: '0.5rem',
+  display: 'flex',
+  justifyContent: 'space-between'
+});
+var ToolbarActionsContainer = /*#__PURE__*/styled('div')({
+  display: 'flex',
+  gap: '0.5rem'
+});
+var MRT_ToolbarTop = function MRT_ToolbarTop() {
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter,
+      disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
+      muiTableTitleProps = _useMaterialReactTabl.muiTableTitleProps,
+      disableFilters = _useMaterialReactTabl.disableFilters,
+      manualPagination = _useMaterialReactTabl.manualPagination,
+      positionPagination = _useMaterialReactTabl.positionPagination,
+      muiTableToolbarTopProps = _useMaterialReactTabl.muiTableToolbarTopProps,
+      hideToolbarActions = _useMaterialReactTabl.hideToolbarActions,
+      positionToolbarActions = _useMaterialReactTabl.positionToolbarActions,
+      title = _useMaterialReactTabl.title,
+      tableInstance = _useMaterialReactTabl.tableInstance; // if no features in the toolbar are enabled, don't render anything
+
+
+  if (!muiTableToolbarTopProps && !title && disableColumnHiding && disableFilters && disableGlobalFilter) {
+    return null;
+  }
+
+  var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
+  return React.createElement(Toolbar, Object.assign({
+    variant: "dense"
+  }, toolbarProps), React.createElement(ToolbarTopRow, null, title ? React.createElement(Typography, Object.assign({
+    variant: "h5"
+  }, muiTableTitleProps), title) : React.createElement("span", null), React.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarButtons, null))), React.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)));
+};
+
+var Toolbar$1 = /*#__PURE__*/styled(Toolbar$2)({
+  padding: 0,
+  display: 'flex',
+  justifyContent: 'space-between'
+});
+var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter,
+      disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
+      manualPagination = _useMaterialReactTabl.manualPagination,
+      positionPagination = _useMaterialReactTabl.positionPagination,
+      disableFilters = _useMaterialReactTabl.disableFilters,
+      hideToolbarActions = _useMaterialReactTabl.hideToolbarActions,
+      positionToolbarActions = _useMaterialReactTabl.positionToolbarActions,
+      muiTableToolbarBottomProps = _useMaterialReactTabl.muiTableToolbarBottomProps,
+      title = _useMaterialReactTabl.title,
+      tableInstance = _useMaterialReactTabl.tableInstance; // if no features in the toolbar are enabled, don't render anything
+
+
+  if (!muiTableToolbarBottomProps && !title && disableColumnHiding && disableFilters && disableGlobalFilter) {
+    return null;
+  }
+
+  var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
+  return React.createElement(Toolbar$1, Object.assign({
+    variant: "dense"
+  }, toolbarProps), !hideToolbarActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarButtons, null) : React.createElement("span", null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null));
+};
+
+var MRT_TableContainer = function MRT_TableContainer() {
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      muiTableContainerProps = _useMaterialReactTabl.muiTableContainerProps,
+      hideToolbarTop = _useMaterialReactTabl.hideToolbarTop,
+      hideToolbarBottom = _useMaterialReactTabl.hideToolbarBottom,
+      isFetching = _useMaterialReactTabl.isFetching;
 
   return React.createElement(TableContainer, Object.assign({
     component: Paper
-  }, tableContainerProps), React.createElement(MRT_Table, null));
+  }, muiTableContainerProps), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), isFetching && React.createElement(LinearProgress, null), React.createElement(MRT_Table, null), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, null));
+};
+
+var defaultLocalization = {
+  actionsHeadColumnTitle: 'Actions',
+  columnActionMenuButtonTitle: 'Column Actions',
+  columnActionMenuItemClearSort: 'Clear sorting',
+  columnActionMenuItemGroupBy: 'Group by column',
+  columnActionMenuItemHideColumn: 'Hide column',
+  columnActionMenuItemSortAsc: 'Sort ascending',
+  columnActionMenuItemSortDesc: 'Sort descending',
+  columnActionMenuItemUnGroupBy: 'Ungroup column',
+  expandAllButtonTitle: 'Expand all',
+  expandButtonTitle: 'Expand',
+  filterTextFieldClearButtonTitle: 'Clear filter',
+  filterTextFieldPlaceholder: 'Filter',
+  rowActionMenuButtonTitle: 'Row Actions',
+  rowActionsColumnTitle: 'Actions',
+  rowActionMenuItemEdit: 'Edit',
+  rowActionButtonSave: 'Save',
+  rowActionButtonCancel: 'Cancel',
+  searchTextFieldClearButtonTitle: 'Clear search',
+  searchTextFieldPlaceholder: 'Search',
+  showHideColumnsButtonTitle: 'Show/Hide columns',
+  toggleDensePaddingSwitchTitle: 'Toggle dense padding',
+  toggleFilterButtonTitle: 'Toggle filters'
 };
 
-var _excluded$1 = ["options"];
-var MaterialReactTable = function MaterialReactTable(_ref) {
-  var _ref$options = _ref.options,
-      options = _ref$options === void 0 ? defaultOptions : _ref$options,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+var _excluded = ["defaultColumn", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions"];
+var MaterialReactTable = (function (_ref) {
+  var _ref$defaultColumn = _ref.defaultColumn,
+      defaultColumn = _ref$defaultColumn === void 0 ? {
+    minWidth: 50,
+    maxWidth: 1000
+  } : _ref$defaultColumn,
+      _ref$localization = _ref.localization,
+      localization = _ref$localization === void 0 ? defaultLocalization : _ref$localization,
+      _ref$positionActionsC = _ref.positionActionsColumn,
+      positionActionsColumn = _ref$positionActionsC === void 0 ? 'first' : _ref$positionActionsC,
+      _ref$positionPaginati = _ref.positionPagination,
+      positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
+      _ref$positionToolbarA = _ref.positionToolbarActions,
+      positionToolbarActions = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return React.createElement(MaterialReactTableProvider, Object.assign({
-    options: options
+    defaultColumn: defaultColumn,
+    localization: _extends({}, defaultLocalization, localization),
+    positionPagination: positionPagination,
+    positionActionsColumn: positionActionsColumn,
+    positionToolbarActions: positionToolbarActions
   }, rest), React.createElement(MRT_TableContainer, null));
-};
+});
 
-export { MaterialReactTable };
+export default MaterialReactTable;
 //# sourceMappingURL=material-react-table.esm.js.map