material-react-table 0.1.0 → 0.2.0

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

@@ -1,7 +1,16 @@
-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, useContext, createContext, useState } from 'react';
+import { useTable, useFlexLayout, useResizeColumns, useFilters, useGlobalFilter, useSortBy, useExpanded, usePagination, useRowSelect, useAsyncDebounce } from 'react-table';
+import { TextField as TextField$1, InputAdornment, IconButton as IconButton$1, Menu, Divider, styled, MenuItem as MenuItem$1, TableSortLabel, Collapse, TableCell as TableCell$2, Checkbox, FormControlLabel, Switch, Typography, TableRow, TablePagination, TableHead, LinearProgress, CircularProgress, TableBody as TableBody$1, TableFooter, Table, Toolbar as Toolbar$1, TableContainer, Paper } 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 ArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import SearchIcon from '@mui/icons-material/Search';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -36,85 +45,506 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var defaultOptions = {
-  enableFilters: false,
-  enablePagination: 'bottom',
-  enableSearch: true,
-  enableSorting: true,
-  showFooter: true,
-  showHead: true,
-  showToolbar: true
+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 _excluded = ["children", "columns", "data", "options"];
-var MaterialReactTableContext = /*#__PURE__*/createContext({});
+var showOverrideWarnings = function showOverrideWarnings(props) {
+  if (props.OverrideTableBodyCellComponent) {
+    showWarning('TableCell', 'props');
+  }
+
+  if (props.OverrideTableBodyComponent) {
+    showWarning('TableBody', 'tableBodyProps');
+  }
+
+  if (props.OverrideTableBodyRowComponent) {
+    showWarning('TableRow', 'props');
+  }
+
+  if (props.OverrideTableDetailPanelComponent) {
+    showWarning('Detail Panel', 'tableDetailPanelProps');
+  }
+
+  if (props.OverrideTableFooterComponent) {
+    showWarning('TableFooter', 'tableFooterProps');
+  }
+
+  if (props.OverrideTableFooterCellComponent) {
+    showWarning('TableCell', 'props');
+  }
+
+  if (props.OverrideTableFooterRowComponent) {
+    showWarning('TableRow', 'props');
+  }
+
+  if (props.OverrideTableHeadComponent) {
+    showWarning('TableHead', 'tableHeadProps');
+  }
+
+  if (props.OverrideTableHeadRowComponent) {
+    showWarning('TableRow', 'props');
+  }
+
+  if (props.OverrideTablePaginationComponent) {
+    showWarning('', 'props');
+  }
+
+  if (props.OverrideTableToolbarComponent) {
+    showWarning('TableBodyCell', 'props');
+  }
+};
+
+var showWarning = function showWarning(componentName, propsName) {
+  console.warn("Caution.\nYou are overriding the built-in Mui " + componentName + " Component in material-react-table.\n\nYou should only use this as a last resort!\n\nConsider customizing the Mui " + componentName + " Component instead with " + propsName + ".");
+};
+
+var _excluded = ["children", "columns", "data", "surpressOverrideWarnings"];
+
+var MaterialReactTableContext = /*#__PURE__*/function () {
+  return createContext({});
+}();
+
 var MaterialReactTableProvider = function MaterialReactTableProvider(_ref) {
   var children = _ref.children,
       columns = _ref.columns,
       data = _ref.data,
-      options = _ref.options,
+      surpressOverrideWarnings = _ref.surpressOverrideWarnings,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var tableInstance = useTable({
     columns: columns,
     data: data
-  }, useSortBy, useExpanded, usePagination);
-  return React.createElement(MaterialReactTableContext.Provider, {
+  }, useFlexLayout, useResizeColumns, useFilters, useGlobalFilter, useSortBy, useExpanded, usePagination, useRowSelect);
+  var mrtCalcs = useMRTCalcs({
+    tableInstance: tableInstance
+  });
+
+  if (process.env.NODE_ENV !== 'production' && !surpressOverrideWarnings) {
+    showOverrideWarnings(rest);
+  }
+
+  return React.createElement(MaterialReactTableContext.Provider //@ts-ignore
+  , {
+    //@ts-ignore
     value: _extends({
-      options: _extends({}, defaultOptions, options),
+      columns: columns,
+      data: data,
       tableInstance: tableInstance
-    }, rest)
+    }, mrtCalcs, rest)
   }, 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);
+  };
+
+  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$1, {
+        "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$1)({
+  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(),
+      enableColumnHiding = _useMaterialReactTabl.enableColumnHiding,
+      enableSorting = _useMaterialReactTabl.enableSorting,
+      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);
+  };
+
+  return React.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    }
+  }, enableSorting && React.createElement(React.Fragment, null, React.createElement(MenuItem, {
+    disabled: !column.isSorted,
+    onClick: handleClearSort
+  }, React.createElement(ClearAllIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemClearSort), React.createElement(MenuItem, {
+    disabled: column.isSorted && !column.isSortedDesc,
+    onClick: handleSortAsc
+  }, React.createElement(SortIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemSortAsc), React.createElement(MenuItem, {
+    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, null)), enableColumnHiding && React.createElement(MenuItem, {
+    onClick: handleHideColumn
+  }, React.createElement(VisibilityOffIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemHideColumn));
+};
+
+var IconButton = /*#__PURE__*/styled(IconButton$1)({
+  opacity: 0.2,
+  transition: 'opacity 0.2s',
+  marginRight: '2px',
+  '&: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 TableCell = /*#__PURE__*/styled(TableCell$2)({
+  fontWeight: 'bold'
+});
+var TableCellContents = /*#__PURE__*/styled('div')({
+  display: 'grid'
+});
+var TableCellText = /*#__PURE__*/styled('div')({
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var _column$columns$lengt, _column$columns;
 
-  var column = _ref.column;
+  var column = _ref.column,
+      index = _ref.index;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      OverrideTableHeadCellComponent = _useMaterialReactTabl.OverrideTableHeadCellComponent,
+      enableColumnActions = _useMaterialReactTabl.enableColumnActions,
+      enableColumnResizing = _useMaterialReactTabl.enableColumnResizing,
+      enableFiltering = _useMaterialReactTabl.enableFiltering,
+      showFiltersInColumnHead = _useMaterialReactTabl.showFiltersInColumnHead,
+      tableInstance = _useMaterialReactTabl.tableInstance;
+
+  if (OverrideTableHeadCellComponent) {
+    return React.createElement(React.Fragment, null, OverrideTableHeadCellComponent(column, 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 isLastColumn = !isParentHeader && index === tableInstance.visibleColumns.length - 1 || isParentHeader && index === column.headers.length - 1;
+  return React.createElement(TableCell, Object.assign({
+    align: isParentHeader ? 'center' : 'left'
+  }, column.getHeaderProps()), React.createElement(TableCellContents, null, React.createElement(TableCellText, {
+    style: {
+      justifyContent: isParentHeader ? 'center' : undefined
+    }
+  }, React.createElement("span", Object.assign({}, column.getSortByToggleProps()), column.render('Header'), !isParentHeader && column.canSort && React.createElement(TableSortLabel, {
+    active: column.isSorted,
+    direction: column.isSortedDesc ? 'desc' : 'asc'
+  })), React.createElement("span", {
+    style: {
+      display: 'flex'
+    }
+  }, enableColumnActions && !isParentHeader && React.createElement(MRT_ToggleColumnActionMenuButton, {
+    column: column
+  }), enableColumnResizing && !isLastColumn && React.createElement(Divider, Object.assign({
+    flexItem: true,
+    orientation: "vertical",
     style: {
-      fontWeight: 'bold !important'
+      borderRightWidth: '2px',
+      borderRadius: '2px'
+    },
+    onDoubleClick: function onDoubleClick() {
+      return tableInstance.resetResizing();
+    }
+  }, column.getResizerProps())))), enableFiltering && column.canFilter && React.createElement(Collapse, {
+    "in": showFiltersInColumnHead
+  }, React.createElement(MRT_FilterTextfield, {
+    column: column
+  }))));
+};
+
+var MRT_SelectAllCheckbox = function MRT_SelectAllCheckbox() {
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      enableSelectAll = _useMaterialReactTabl.enableSelectAll;
+
+  return React.createElement(TableCell$2, {
+    style: {
+      width: '2rem',
+      padding: '0.5rem'
     },
     variant: "head"
-  }, column.getHeaderProps(column.getSortByToggleProps())), React.createElement(TableSortLabel, {
-    active: column.isSorted,
-    direction: column.isSortedDesc && column.isSortedDesc ? 'desc' : 'asc'
-  }, column.render('Header')));
+  }, enableSelectAll ? React.createElement(Checkbox, Object.assign({
+    "aria-label": ''
+  }, tableInstance.getToggleAllPageRowsSelectedProps())) : null);
 };
 
-var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
-  var headerGroup = _ref.headerGroup;
+var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      localization = _useMaterialReactTabl.localization,
+      anyRowsExpanded = _useMaterialReactTabl.anyRowsExpanded;
+
+  return React.createElement(TableCell$2, Object.assign({
+    size: "small"
+  }, tableInstance.getToggleAllRowsExpandedProps(), {
+    style: {
+      padding: '0.5rem',
+      paddingRight: '0',
+      width: tableInstance.expandedDepth + 2 + "rem"
+    }
+  }), React.createElement(IconButton$1, {
+    "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_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
+  var _column$columns;
+
+  var column = _ref.column;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+      maxColumnDepth = _useMaterialReactTabl.maxColumnDepth;
 
-  return React.createElement(TableRow, Object.assign({}, headerGroup.getHeaderGroupProps()), renderDetailPanel && React.createElement(TableCell$1, {
+  var isMaxDepth = column.depth === maxColumnDepth;
+  return React.createElement(React.Fragment, null, React.createElement(MenuItem$1, {
     style: {
-      width: '2rem'
+      paddingLeft: column.depth + 1 + "rem"
     }
-  }), headerGroup.headers.map(function (column, index) {
-    return React.createElement(MRT_TableHeadCell, {
+  }, isMaxDepth ? React.createElement(FormControlLabel, {
+    onChange: function onChange() {
+      return isMaxDepth && column.toggleHidden();
+    },
+    label: column.Header,
+    checked: column.isVisible,
+    control: React.createElement(Switch, null)
+  }) : 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 _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(TableCell$2, {
+    size: "small",
+    style: {
+      width: '2rem',
+      padding: '0.75rem 0'
+    }
+  }, React.createElement(IconButton$1, {
+    "aria-label": localization == null ? void 0 : localization.showHideColumnsButtonTitle,
+    title: localization == null ? void 0 : localization.showHideColumnsButtonTitle,
+    onClick: handleClick,
+    size: "small",
+    style: {
+      margin: '0 0 0 -0.75rem'
+    }
+  }, 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_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
+  var width = _ref.width;
+  return React.createElement(TableCell$2, {
+    style: {
+      width: width
+    }
+  });
+};
+
+var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
+  var headerGroup = _ref.headerGroup;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      OverrideTableHeadRowComponent = _useMaterialReactTabl.OverrideTableHeadRowComponent,
+      anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
+      enableColumnHiding = _useMaterialReactTabl.enableColumnHiding,
+      enableExpandAll = _useMaterialReactTabl.enableExpandAll,
+      enableSelection = _useMaterialReactTabl.enableSelection,
+      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
+      tableInstance = _useMaterialReactTabl.tableInstance;
+
+  if (OverrideTableHeadRowComponent) {
+    return React.createElement(React.Fragment, null, OverrideTableHeadRowComponent(headerGroup, 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]);
+  return React.createElement(TableRow, Object.assign({}, headerGroup.getHeaderGroupProps()), anyRowsCanExpand || renderDetailPanel ? enableExpandAll && !isParentHeader ? React.createElement(MRT_ExpandAllButton, null) : React.createElement(MRT_TableSpacerCell, {
+    width: 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, index) {
+    return React.createElement(MRT_TableHeadCell, {
+      key: index + "-" + column.id,
+      column: column,
+      index: index
+    });
+  }), enableColumnHiding && !isParentHeader && React.createElement(MRT_ShowHideColumnsButton, null));
 };
 
 var MRT_TablePagination = function MRT_TablePagination() {
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
-      tablePaginationProps = _useMaterialReactTabl.tablePaginationProps;
+      tablePaginationProps = _useMaterialReactTabl.tablePaginationProps,
+      OverrideTablePaginationComponent = _useMaterialReactTabl.OverrideTablePaginationComponent;
 
   var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
     tableInstance.setPageSize(+event.target.value);
     tableInstance.gotoPage(0);
   };
 
+  if (OverrideTablePaginationComponent) {
+    return React.createElement(React.Fragment, null, OverrideTablePaginationComponent(tableInstance));
+  }
+
   return React.createElement(TableRow, null, React.createElement(TablePagination, Object.assign({
     colSpan: tableInstance.visibleColumns.length + 10,
     count: tableInstance.rows.length,
@@ -131,11 +561,18 @@ var MRT_TablePagination = function MRT_TablePagination() {
 
 var MRT_TableHead = function MRT_TableHead() {
   var _useMaterialReactTabl = useMaterialReactTable(),
+      OverrideTableHeadComponent = _useMaterialReactTabl.OverrideTableHeadComponent,
       tableInstance = _useMaterialReactTabl.tableInstance,
       tableHeadProps = _useMaterialReactTabl.tableHeadProps,
-      options = _useMaterialReactTabl.options;
+      enablePagination = _useMaterialReactTabl.enablePagination,
+      isReloading = _useMaterialReactTabl.isReloading,
+      positionPagination = _useMaterialReactTabl.positionPagination;
 
-  return React.createElement(TableHead, Object.assign({}, tableHeadProps), ['top', 'both'].includes(options.enablePagination.toString()) && React.createElement(MRT_TablePagination, null), tableInstance.headerGroups.map(function (headerGroup, index) {
+  if (OverrideTableHeadComponent) {
+    return React.createElement(React.Fragment, null, OverrideTableHeadComponent(tableInstance));
+  }
+
+  return React.createElement(TableHead, Object.assign({}, tableHeadProps), isReloading && React.createElement(LinearProgress, null), enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null), tableInstance.headerGroups.map(function (headerGroup, index) {
     return React.createElement(MRT_TableHeadRow, {
       key: index + "-" + headerGroup.id,
       headerGroup: headerGroup
@@ -145,7 +582,16 @@ var MRT_TableHead = function MRT_TableHead() {
 
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var cell = _ref.cell;
-  return React.createElement(TableCell$1, Object.assign({
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      OverrideTableBodyCellComponent = _useMaterialReactTabl.OverrideTableBodyCellComponent;
+
+  if (OverrideTableBodyCellComponent) {
+    return React.createElement(React.Fragment, null, OverrideTableBodyCellComponent(cell, tableInstance));
+  }
+
+  return React.createElement(TableCell$2, Object.assign({
     variant: "body"
   }, cell.getCellProps()), cell.render('Cell'));
 };
@@ -155,82 +601,171 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
+      OverrideTableDetailPanelComponent = _useMaterialReactTabl.OverrideTableDetailPanelComponent,
+      tableDetailPanelProps = _useMaterialReactTabl.tableDetailPanelProps;
+
+  if (OverrideTableDetailPanelComponent) {
+    return React.createElement(React.Fragment, null, OverrideTableDetailPanelComponent(row, tableInstance));
+  }
 
-  return React.createElement(TableRow, Object.assign({}, row.getToggleRowExpandedProps()), React.createElement(TableCell$1, {
+  return React.createElement(TableRow, Object.assign({}, row.getToggleRowExpandedProps()), React.createElement(TableCell$2, Object.assign({
     colSpan: tableInstance.visibleColumns.length + 10,
     style: {
+      borderBottom: !row.isExpanded ? 'none' : undefined,
       paddingBottom: row.isExpanded ? '1rem' : 0,
       paddingTop: row.isExpanded ? '1rem' : 0,
-      transition: 'padding 0.2s'
+      transition: 'all 0.2s'
     }
-  }, React.createElement(Collapse, {
+  }, tableDetailPanelProps), 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;
-  return React.createElement(TableCell$1, {
-    style: {
-      width: '2rem'
-    },
-    size: "small",
-    variant: "head"
-  }, React.createElement(IconButton, {
-    onClick: function onClick() {
-      return row.toggleRowExpanded();
-    },
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      localization = _useMaterialReactTabl.localization,
+      tableInstance = _useMaterialReactTabl.tableInstance;
+
+  return React.createElement(TableCell$2, Object.assign({
     size: "small"
-  }, React.createElement(ArrowForwardIosIcon, {
+  }, row.getToggleRowExpandedProps(), {
+    style: {
+      padding: '0.5rem',
+      paddingRight: '0',
+      paddingLeft: row.depth + 0.5 + "rem",
+      width: tableInstance.expandedDepth - row.depth + 2 + "rem"
+    }
+  }), React.createElement(IconButton$1, {
+    "aria-label": localization == null ? void 0 : localization.expandButtonTitle,
+    title: localization == null ? void 0 : localization.expandButtonTitle
+  }, React.createElement(ExpandMoreIcon, {
     fontSize: "small",
     style: {
-      transform: row.isExpanded ? 'rotate(90deg)' : 'rotate(0)',
+      transform: row.isExpanded ? 'rotate(-180deg)' : 'rotate(0)',
       transition: 'transform 0.2s'
     }
   })));
 };
 
+var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
+  var row = _ref.row;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      onRowSelectChange = _useMaterialReactTabl.onRowSelectChange;
+
+  var onSelectChange = function onSelectChange(event) {
+    var _row$getToggleRowSele;
+
+    (_row$getToggleRowSele = row.getToggleRowSelectedProps()) == null ? void 0 : _row$getToggleRowSele.onChange == null ? void 0 : _row$getToggleRowSele.onChange(event);
+    onRowSelectChange == null ? void 0 : onRowSelectChange(event, row.state, tableInstance.selectedFlatRows);
+  };
+
+  return React.createElement(TableCell$2, {
+    style: {
+      width: '2rem',
+      padding: '0.5rem'
+    }
+  }, React.createElement(Checkbox, Object.assign({}, row.getToggleRowSelectedProps(), {
+    onChange: onSelectChange
+  })));
+};
+
 var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   var row = _ref.row;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+      OverrideTableBodyRowComponent = _useMaterialReactTabl.OverrideTableBodyRowComponent,
+      anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
+      enableSelection = _useMaterialReactTabl.enableSelection,
+      enableSubRowTree = _useMaterialReactTabl.enableSubRowTree,
+      enableColumnHiding = _useMaterialReactTabl.enableColumnHiding,
+      onRowClick = _useMaterialReactTabl.onRowClick,
+      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
+      tableInstance = _useMaterialReactTabl.tableInstance;
 
-  return React.createElement(React.Fragment, null, React.createElement(TableRow, Object.assign({}, row.getRowProps()), renderDetailPanel && React.createElement(MRT_TableExpandButton, {
+  if (OverrideTableBodyRowComponent) {
+    return React.createElement(React.Fragment, null, OverrideTableBodyRowComponent(row, tableInstance));
+  }
+
+  return React.createElement(React.Fragment, null, React.createElement(TableRow, Object.assign({
+    onClick: function onClick(event) {
+      return onRowClick == null ? void 0 : onRowClick(event, row);
+    }
+  }, row.getRowProps()), (enableSubRowTree && anyRowsCanExpand || renderDetailPanel) && (row.canExpand || renderDetailPanel ? React.createElement(MRT_ExpandButton, {
+    row: row
+  }) : React.createElement(TableCell$2, {
+    style: {
+      width: tableInstance.expandedDepth + 0.5 + "rem"
+    }
+  })), enableSelection && React.createElement(MRT_SelectCheckbox, {
     row: row
   }), row.cells.map(function (cell, index) {
     return React.createElement(MRT_TableBodyCell, {
       key: index + "-" + cell.value,
       cell: cell
     });
-  })), renderDetailPanel && React.createElement(MRT_TableDetailPanel, {
+  }), enableColumnHiding && React.createElement(MRT_TableSpacerCell, null)), renderDetailPanel && React.createElement(MRT_TableDetailPanel, {
     row: row
   }));
 };
 
+var TableBody = /*#__PURE__*/styled(TableBody$1)({
+  overflowY: 'hidden'
+});
+var CircularProgressWrapper = /*#__PURE__*/styled('div')({
+  backgroundColor: 'rgba(255, 255, 255, 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 _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance;
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      tableBodyProps = _useMaterialReactTabl.tableBodyProps,
+      isLoading = _useMaterialReactTabl.isLoading,
+      enablePagination = _useMaterialReactTabl.enablePagination,
+      OverrideTableBodyComponent = _useMaterialReactTabl.OverrideTableBodyComponent;
+
+  if (OverrideTableBodyComponent) {
+    return React.createElement(React.Fragment, null, OverrideTableBodyComponent(tableInstance));
+  }
 
-  return React.createElement(TableBody, Object.assign({}, tableInstance.getTableBodyProps()), tableInstance.page.map(function (row, index) {
+  var rows = enablePagination ? tableInstance.page : tableInstance.rows;
+  return React.createElement(React.Fragment, null, React.createElement(TableBody, Object.assign({}, tableBodyProps, tableInstance.getTableBodyProps()), isLoading && React.createElement(CircularProgressWrapper, null, React.createElement(CircularProgress, null)), rows.map(function (row, index) {
     tableInstance.prepareRow(row);
     return React.createElement(MRT_TableBodyRow, {
       key: index + "-" + row.id,
       row: row
     });
-  }));
+  })));
 };
 
-var TableCell = /*#__PURE__*/styled(TableCell$1)({
+var TableCell$1 = /*#__PURE__*/styled(TableCell$2)({
   fontWeight: 'bold'
 });
 var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
   var _column$columns$lengt, _column$columns;
 
   var column = _ref.column;
+
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      OverrideTableFooterCellComponent = _useMaterialReactTabl.OverrideTableFooterCellComponent;
+
+  if (OverrideTableFooterCellComponent) {
+    return React.createElement(React.Fragment, null, OverrideTableFooterCellComponent(column, 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, Object.assign({
+  return React.createElement(TableCell$1, Object.assign({
     align: isParentHeader ? 'center' : 'left',
     variant: "head"
   }, column.getFooterProps()), column.render('Footer'));
@@ -240,65 +775,203 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
   var footerGroup = _ref.footerGroup;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
+      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
+      columns = _useMaterialReactTabl.columns,
+      anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
+      enableColumnHiding = _useMaterialReactTabl.enableColumnHiding,
+      enableSelection = _useMaterialReactTabl.enableSelection,
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      OverrideTableFooterRowComponent = _useMaterialReactTabl.OverrideTableFooterRowComponent; //if no content in row, skip row
+
+
+  if (!columns.some(function (c) {
+    return c.Footer;
+  })) return null;
 
-  return React.createElement(TableRow, Object.assign({}, footerGroup.getFooterGroupProps()), renderDetailPanel && React.createElement(TableCell$1, {
+  if (OverrideTableFooterRowComponent) {
+    return React.createElement(React.Fragment, null, OverrideTableFooterRowComponent(footerGroup, tableInstance));
+  }
+
+  return React.createElement(TableRow, Object.assign({}, footerGroup.getFooterGroupProps()), (anyRowsCanExpand || renderDetailPanel) && React.createElement(TableCell$2, {
     style: {
-      width: '2rem'
+      width: 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
     });
-  }));
+  }), enableColumnHiding && React.createElement(MRT_TableSpacerCell, null));
 };
 
 var MRT_TableFooter = function MRT_TableFooter() {
   var _useMaterialReactTabl = useMaterialReactTable(),
-      tableInstance = _useMaterialReactTabl.tableInstance,
+      OverrideTableFooterComponent = _useMaterialReactTabl.OverrideTableFooterComponent,
+      enablePagination = _useMaterialReactTabl.enablePagination,
+      positionPagination = _useMaterialReactTabl.positionPagination,
       tableFooterProps = _useMaterialReactTabl.tableFooterProps,
-      options = _useMaterialReactTabl.options;
+      tableInstance = _useMaterialReactTabl.tableInstance;
 
-  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) {
+  if (OverrideTableFooterComponent) {
+    return React.createElement(React.Fragment, null, OverrideTableFooterComponent(tableInstance));
+  }
+
+  return React.createElement(TableFooter, Object.assign({}, tableFooterProps), 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));
+  }), enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null));
 };
 
 var MRT_Table = function MRT_Table() {
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
       tableProps = _useMaterialReactTabl.tableProps,
-      options = _useMaterialReactTabl.options;
+      showHead = _useMaterialReactTabl.showHead,
+      showFooter = _useMaterialReactTabl.showFooter;
+
+  return React.createElement(Table, Object.assign({}, tableProps, tableInstance.getTableProps()), showHead && React.createElement(MRT_TableHead, null), React.createElement(MRT_TableBody, null), showFooter && 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,
+      tableSearchTextfieldProps = _useMaterialReactTabl.tableSearchTextfieldProps,
+      localization = _useMaterialReactTabl.localization;
+
+  var _useState = useState(''),
+      searchValue = _useState[0],
+      setSearchValue = _useState[1];
+
+  var handleChange = useAsyncDebounce(function (value) {
+    tableInstance.setGlobalFilter(value != null ? value : undefined);
+  }, 200);
 
-  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 handleClear = function handleClear() {
+    setSearchValue('');
+    tableInstance.setGlobalFilter(undefined);
+  };
+
+  return React.createElement(TextField, Object.assign({
+    placeholder: localization == null ? void 0 : localization.searchTextFieldPlaceholder,
+    onChange: function onChange(e) {
+      setSearchValue(e.target.value);
+      handleChange(e.target.value);
+    },
+    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$1, {
+        "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"
+      })))
+    }
+  }, tableSearchTextfieldProps));
+};
+
+var Toolbar = /*#__PURE__*/styled(Toolbar$1)({
+  padding: '0.5rem',
+  display: 'flex',
+  justifyContent: 'space-between'
+});
+var MRT_Toolbar = function MRT_Toolbar() {
+  var _useMaterialReactTabl = useMaterialReactTable(),
+      OverrideTableToolbarComponent = _useMaterialReactTabl.OverrideTableToolbarComponent,
+      enableSearch = _useMaterialReactTabl.enableSearch,
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      tableTitleProps = _useMaterialReactTabl.tableTitleProps,
+      tableToolbarProps = _useMaterialReactTabl.tableToolbarProps,
+      title = _useMaterialReactTabl.title;
+
+  if (OverrideTableToolbarComponent) {
+    return React.createElement(React.Fragment, null, OverrideTableToolbarComponent(tableInstance));
+  } //if no features in the toolbar are enabled, don't render anything
+
+
+  if (!enableSearch && !title && !tableToolbarProps) {
+    return null;
+  }
+
+  return React.createElement(Toolbar, Object.assign({
+    variant: "dense"
+  }, tableToolbarProps), title ? React.createElement(Typography, Object.assign({}, tableTitleProps), title) : React.createElement("span", null), enableSearch && React.createElement(MRT_SearchTextField, null));
 };
 
 var MRT_TableContainer = function MRT_TableContainer() {
   var _useMaterialReactTabl = useMaterialReactTable(),
-      tableContainerProps = _useMaterialReactTabl.tableContainerProps;
+      tableContainerProps = _useMaterialReactTabl.tableContainerProps,
+      showToolbar = _useMaterialReactTabl.showToolbar;
 
   return React.createElement(TableContainer, Object.assign({
     component: Paper
-  }, tableContainerProps), React.createElement(MRT_Table, null));
+  }, tableContainerProps), showToolbar && React.createElement(MRT_Toolbar, null), React.createElement(MRT_Table, null));
+};
+
+var defaultLocalization = {
+  columnActionMenuButtonTitle: 'Column Actions',
+  columnActionMenuItemHideColumn: 'Hide column',
+  columnActionMenuItemSortAsc: 'Sort ascending',
+  columnActionMenuItemClearSort: 'Clear sorting',
+  columnActionMenuItemSortDesc: 'Sort descending',
+  expandAllButtonTitle: 'Expand all',
+  expandButtonTitle: 'Expand',
+  filterTextFieldClearButtonTitle: 'Clear filter',
+  filterTextFieldPlaceholder: 'Filter',
+  searchTextFieldClearButtonTitle: 'Clear search',
+  searchTextFieldPlaceholder: 'Search',
+  showHideColumnsButtonTitle: 'Show/Hide columns'
 };
 
-var _excluded$1 = ["options"];
+var _excluded$1 = ["enablePagination", "enableSorting", "enableSubRowTree", "localization", "positionPagination", "showFiltersInColumnHead", "showFooter", "showHead", "showToolbar"];
 var MaterialReactTable = function MaterialReactTable(_ref) {
-  var _ref$options = _ref.options,
-      options = _ref$options === void 0 ? defaultOptions : _ref$options,
+  var _ref$enablePagination = _ref.enablePagination,
+      enablePagination = _ref$enablePagination === void 0 ? true : _ref$enablePagination,
+      _ref$enableSorting = _ref.enableSorting,
+      enableSorting = _ref$enableSorting === void 0 ? true : _ref$enableSorting,
+      _ref$enableSubRowTree = _ref.enableSubRowTree,
+      enableSubRowTree = _ref$enableSubRowTree === void 0 ? true : _ref$enableSubRowTree,
+      _ref$localization = _ref.localization,
+      localization = _ref$localization === void 0 ? defaultLocalization : _ref$localization,
+      _ref$positionPaginati = _ref.positionPagination,
+      positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
+      _ref$showFiltersInCol = _ref.showFiltersInColumnHead,
+      showFiltersInColumnHead = _ref$showFiltersInCol === void 0 ? true : _ref$showFiltersInCol,
+      _ref$showFooter = _ref.showFooter,
+      showFooter = _ref$showFooter === void 0 ? true : _ref$showFooter,
+      _ref$showHead = _ref.showHead,
+      showHead = _ref$showHead === void 0 ? true : _ref$showHead,
+      _ref$showToolbar = _ref.showToolbar,
+      showToolbar = _ref$showToolbar === void 0 ? true : _ref$showToolbar,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   return React.createElement(MaterialReactTableProvider, Object.assign({
-    options: options
+    enablePagination: enablePagination,
+    enableSorting: enableSorting,
+    enableSubRowTree: enableSubRowTree,
+    localization: _extends({}, defaultLocalization, localization),
+    positionPagination: positionPagination,
+    showFiltersInColumnHead: showFiltersInColumnHead,
+    showFooter: showFooter,
+    showHead: showHead,
+    showToolbar: showToolbar
   }, rest), React.createElement(MRT_TableContainer, null));
 };