material-react-table 0.2.0 → 0.3.0

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

@@ -1,12 +1,13 @@
 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 { useTable, useFlexLayout, useResizeColumns, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useAsyncDebounce } from 'react-table';
+import { TextField as TextField$1, InputAdornment, IconButton as IconButton$1, Menu, Divider as Divider$1, 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 DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
 import ArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -75,48 +76,48 @@ var useMRTCalcs = function useMRTCalcs(_ref) {
   };
 };
 
-var showOverrideWarnings = function showOverrideWarnings(props) {
-  if (props.OverrideTableBodyCellComponent) {
+var showoverrideWarnings = function showoverrideWarnings(props) {
+  if (props.overrideTableBodyCellComponent) {
     showWarning('TableCell', 'props');
   }
 
-  if (props.OverrideTableBodyComponent) {
+  if (props.overrideTableBodyComponent) {
     showWarning('TableBody', 'tableBodyProps');
   }
 
-  if (props.OverrideTableBodyRowComponent) {
+  if (props.overrideTableBodyRowComponent) {
     showWarning('TableRow', 'props');
   }
 
-  if (props.OverrideTableDetailPanelComponent) {
+  if (props.overrideTableDetailPanelComponent) {
     showWarning('Detail Panel', 'tableDetailPanelProps');
   }
 
-  if (props.OverrideTableFooterComponent) {
+  if (props.overrideTableFooterComponent) {
     showWarning('TableFooter', 'tableFooterProps');
   }
 
-  if (props.OverrideTableFooterCellComponent) {
+  if (props.overrideTableFooterCellComponent) {
     showWarning('TableCell', 'props');
   }
 
-  if (props.OverrideTableFooterRowComponent) {
+  if (props.overrideTableFooterRowComponent) {
     showWarning('TableRow', 'props');
   }
 
-  if (props.OverrideTableHeadComponent) {
+  if (props.overrideTableHeadComponent) {
     showWarning('TableHead', 'tableHeadProps');
   }
 
-  if (props.OverrideTableHeadRowComponent) {
+  if (props.overrideTableHeadRowComponent) {
     showWarning('TableRow', 'props');
   }
 
-  if (props.OverrideTablePaginationComponent) {
+  if (props.overrideTablePaginationComponent) {
     showWarning('', 'props');
   }
 
-  if (props.OverrideTableToolbarComponent) {
+  if (props.overrideTableToolbarComponent) {
     showWarning('TableBodyCell', 'props');
   }
 };
@@ -125,7 +126,7 @@ 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 _excluded = ["children", "columns", "data", "defaultColumn", "getRowId", "getSubRows", "initialState", "stateReducer", "surpressoverrideWarnings"];
 
 var MaterialReactTableContext = /*#__PURE__*/function () {
   return createContext({});
@@ -135,27 +136,34 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(_ref) {
   var children = _ref.children,
       columns = _ref.columns,
       data = _ref.data,
-      surpressOverrideWarnings = _ref.surpressOverrideWarnings,
+      defaultColumn = _ref.defaultColumn,
+      getRowId = _ref.getRowId,
+      getSubRows = _ref.getSubRows,
+      initialState = _ref.initialState,
+      stateReducer = _ref.stateReducer,
+      surpressoverrideWarnings = _ref.surpressoverrideWarnings,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var tableInstance = useTable({
     columns: columns,
-    data: data
-  }, useFlexLayout, useResizeColumns, useFilters, useGlobalFilter, useSortBy, useExpanded, usePagination, useRowSelect);
+    data: data,
+    defaultColumn: defaultColumn,
+    getRowId: getRowId,
+    getSubRows: getSubRows,
+    initialState: initialState,
+    stateReducer: stateReducer
+  }, useFlexLayout, useResizeColumns, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect);
   var mrtCalcs = useMRTCalcs({
     tableInstance: tableInstance
   });
 
-  if (process.env.NODE_ENV !== 'production' && !surpressOverrideWarnings) {
-    showOverrideWarnings(rest);
+  if (process.env.NODE_ENV !== 'production' && !surpressoverrideWarnings) {
+    showoverrideWarnings(rest);
   }
 
-  return React.createElement(MaterialReactTableContext.Provider //@ts-ignore
-  , {
-    //@ts-ignore
+  return React.createElement(MaterialReactTableContext.Provider, {
     value: _extends({
-      columns: columns,
-      data: data,
+      //@ts-ignore
       tableInstance: tableInstance
     }, mrtCalcs, rest)
   }, children);
@@ -227,6 +235,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       enableColumnHiding = _useMaterialReactTabl.enableColumnHiding,
+      enableColumnGrouping = _useMaterialReactTabl.enableColumnGrouping,
       enableSorting = _useMaterialReactTabl.enableSorting,
       localization = _useMaterialReactTabl.localization;
 
@@ -250,34 +259,52 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     setAnchorEl(null);
   };
 
+  var handleGroupByColumn = function handleGroupByColumn() {
+    column.toggleGroupBy();
+    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, {
+  }, enableSorting && [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, null)), enableColumnHiding && React.createElement(MenuItem, {
+  }), ' ', localization == null ? void 0 : localization.columnActionMenuItemSortDesc), React.createElement(Divider$1, {
+    key: 4
+  })], enableColumnHiding && React.createElement(MenuItem, {
     onClick: handleHideColumn
-  }, React.createElement(VisibilityOffIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemHideColumn));
+  }, 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$1)({
   opacity: 0.2,
   transition: 'opacity 0.2s',
   marginRight: '2px',
+  height: '2rem',
+  width: '2rem',
   '&:hover': {
     opacity: 1
   }
@@ -319,51 +346,52 @@ var TableCellContents = /*#__PURE__*/styled('div')({
 var TableCellText = /*#__PURE__*/styled('div')({
   width: '100%',
   display: 'flex',
-  alignItems: 'center',
   justifyContent: 'space-between'
 });
+var CellFlexItem = /*#__PURE__*/styled('span')({
+  display: 'flex',
+  flexWrap: 'nowrap'
+});
+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 = _ref.column,
-      index = _ref.index;
+  var column = _ref.column;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      OverrideTableHeadCellComponent = _useMaterialReactTabl.OverrideTableHeadCellComponent,
+      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));
+  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;
-  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, {
+  }, React.createElement(CellFlexItem, Object.assign({}, column.getSortByToggleProps()), column.render('Header'), !isParentHeader && column.canSort && React.createElement(TableSortLabel, {
     active: column.isSorted,
-    direction: column.isSortedDesc ? 'desc' : 'asc'
-  })), React.createElement("span", {
+    direction: column.isSortedDesc ? 'desc' : 'asc',
     style: {
-      display: 'flex'
+      margin: 0
     }
-  }, enableColumnActions && !isParentHeader && React.createElement(MRT_ToggleColumnActionMenuButton, {
+  })), React.createElement(CellFlexItem, null, enableColumnActions && !isParentHeader && React.createElement(MRT_ToggleColumnActionMenuButton, {
     column: column
-  }), enableColumnResizing && !isLastColumn && React.createElement(Divider, Object.assign({
+  }), enableColumnResizing && !isParentHeader && React.createElement(Divider, Object.assign({
     flexItem: true,
     orientation: "vertical",
-    style: {
-      borderRightWidth: '2px',
-      borderRadius: '2px'
-    },
     onDoubleClick: function onDoubleClick() {
       return tableInstance.resetResizing();
     }
@@ -386,7 +414,7 @@ var MRT_SelectAllCheckbox = function MRT_SelectAllCheckbox() {
     },
     variant: "head"
   }, enableSelectAll ? React.createElement(Checkbox, Object.assign({
-    "aria-label": ''
+    "aria-label": ""
   }, tableInstance.getToggleAllPageRowsSelectedProps())) : null);
 };
 
@@ -394,7 +422,8 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
       localization = _useMaterialReactTabl.localization,
-      anyRowsExpanded = _useMaterialReactTabl.anyRowsExpanded;
+      anyRowsExpanded = _useMaterialReactTabl.anyRowsExpanded,
+      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
 
   return React.createElement(TableCell$2, Object.assign({
     size: "small"
@@ -402,7 +431,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
     style: {
       padding: '0.5rem',
       paddingRight: '0',
-      width: tableInstance.expandedDepth + 2 + "rem"
+      width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 2) + "rem"
     }
   }), React.createElement(IconButton$1, {
     "aria-label": localization == null ? void 0 : localization.expandAllButtonTitle,
@@ -498,7 +527,7 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
   var headerGroup = _ref.headerGroup;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      OverrideTableHeadRowComponent = _useMaterialReactTabl.OverrideTableHeadRowComponent,
+      overrideTableHeadRowComponent = _useMaterialReactTabl.overrideTableHeadRowComponent,
       anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
       enableColumnHiding = _useMaterialReactTabl.enableColumnHiding,
       enableExpandAll = _useMaterialReactTabl.enableExpandAll,
@@ -506,8 +535,8 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
       renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
       tableInstance = _useMaterialReactTabl.tableInstance;
 
-  if (OverrideTableHeadRowComponent) {
-    return React.createElement(React.Fragment, null, OverrideTableHeadRowComponent(headerGroup, tableInstance));
+  if (overrideTableHeadRowComponent) {
+    return React.createElement(React.Fragment, null, overrideTableHeadRowComponent(headerGroup, tableInstance));
   }
 
   var isParentHeader = useMemo(function () {
@@ -518,14 +547,13 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
     });
   }, [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"
+    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, index) {
     return React.createElement(MRT_TableHeadCell, {
       key: index + "-" + column.id,
-      column: column,
-      index: index
+      column: column
     });
   }), enableColumnHiding && !isParentHeader && React.createElement(MRT_ShowHideColumnsButton, null));
 };
@@ -534,15 +562,15 @@ var MRT_TablePagination = function MRT_TablePagination() {
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
       tablePaginationProps = _useMaterialReactTabl.tablePaginationProps,
-      OverrideTablePaginationComponent = _useMaterialReactTabl.OverrideTablePaginationComponent;
+      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));
+  if (overrideTablePaginationComponent) {
+    return React.createElement(React.Fragment, null, overrideTablePaginationComponent(tableInstance));
   }
 
   return React.createElement(TableRow, null, React.createElement(TablePagination, Object.assign({
@@ -561,18 +589,18 @@ var MRT_TablePagination = function MRT_TablePagination() {
 
 var MRT_TableHead = function MRT_TableHead() {
   var _useMaterialReactTabl = useMaterialReactTable(),
-      OverrideTableHeadComponent = _useMaterialReactTabl.OverrideTableHeadComponent,
+      overrideTableHeadComponent = _useMaterialReactTabl.overrideTableHeadComponent,
       tableInstance = _useMaterialReactTabl.tableInstance,
       tableHeadProps = _useMaterialReactTabl.tableHeadProps,
       enablePagination = _useMaterialReactTabl.enablePagination,
-      isReloading = _useMaterialReactTabl.isReloading,
+      isFetching = _useMaterialReactTabl.isFetching,
       positionPagination = _useMaterialReactTabl.positionPagination;
 
-  if (OverrideTableHeadComponent) {
-    return React.createElement(React.Fragment, null, OverrideTableHeadComponent(tableInstance));
+  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(TableHead, Object.assign({}, tableHeadProps), isFetching && 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
@@ -585,15 +613,19 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
-      OverrideTableBodyCellComponent = _useMaterialReactTabl.OverrideTableBodyCellComponent;
+      overrideTableBodyCellComponent = _useMaterialReactTabl.overrideTableBodyCellComponent,
+      onCellClick = _useMaterialReactTabl.onCellClick;
 
-  if (OverrideTableBodyCellComponent) {
-    return React.createElement(React.Fragment, null, OverrideTableBodyCellComponent(cell, tableInstance));
+  if (overrideTableBodyCellComponent) {
+    return React.createElement(React.Fragment, null, overrideTableBodyCellComponent(cell, tableInstance));
   }
 
   return React.createElement(TableCell$2, Object.assign({
+    onClick: function onClick(event) {
+      return onCellClick == null ? void 0 : onCellClick(event, cell);
+    },
     variant: "body"
-  }, cell.getCellProps()), cell.render('Cell'));
+  }, cell.getCellProps()), 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) {
@@ -602,11 +634,11 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
       renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
-      OverrideTableDetailPanelComponent = _useMaterialReactTabl.OverrideTableDetailPanelComponent,
+      overrideTableDetailPanelComponent = _useMaterialReactTabl.overrideTableDetailPanelComponent,
       tableDetailPanelProps = _useMaterialReactTabl.tableDetailPanelProps;
 
-  if (OverrideTableDetailPanelComponent) {
-    return React.createElement(React.Fragment, null, OverrideTableDetailPanelComponent(row, tableInstance));
+  if (overrideTableDetailPanelComponent) {
+    return React.createElement(React.Fragment, null, overrideTableDetailPanelComponent(row, tableInstance));
   }
 
   return React.createElement(TableRow, Object.assign({}, row.getToggleRowExpandedProps()), React.createElement(TableCell$2, Object.assign({
@@ -627,7 +659,8 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       localization = _useMaterialReactTabl.localization,
-      tableInstance = _useMaterialReactTabl.tableInstance;
+      tableInstance = _useMaterialReactTabl.tableInstance,
+      renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
 
   return React.createElement(TableCell$2, Object.assign({
     size: "small"
@@ -636,7 +669,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       padding: '0.5rem',
       paddingRight: '0',
       paddingLeft: row.depth + 0.5 + "rem",
-      width: tableInstance.expandedDepth - row.depth + 2 + "rem"
+      width: (renderDetailPanel ? 2 : tableInstance.expandedDepth - row.depth + 2) + "rem"
     }
   }), React.createElement(IconButton$1, {
     "aria-label": localization == null ? void 0 : localization.expandButtonTitle,
@@ -661,7 +694,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     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);
+    onRowSelectChange == null ? void 0 : onRowSelectChange(event, row, tableInstance.selectedFlatRows);
   };
 
   return React.createElement(TableCell$2, {
@@ -678,7 +711,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   var row = _ref.row;
 
   var _useMaterialReactTabl = useMaterialReactTable(),
-      OverrideTableBodyRowComponent = _useMaterialReactTabl.OverrideTableBodyRowComponent,
+      overrideTableBodyRowComponent = _useMaterialReactTabl.overrideTableBodyRowComponent,
       anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
       enableSelection = _useMaterialReactTabl.enableSelection,
       enableSubRowTree = _useMaterialReactTabl.enableSubRowTree,
@@ -687,8 +720,8 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
       tableInstance = _useMaterialReactTabl.tableInstance;
 
-  if (OverrideTableBodyRowComponent) {
-    return React.createElement(React.Fragment, null, OverrideTableBodyRowComponent(row, tableInstance));
+  if (overrideTableBodyRowComponent) {
+    return React.createElement(React.Fragment, null, overrideTableBodyRowComponent(row, tableInstance));
   }
 
   return React.createElement(React.Fragment, null, React.createElement(TableRow, Object.assign({
@@ -697,10 +730,8 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
     }
   }, 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"
-    }
+  }) : React.createElement(MRT_TableSpacerCell, {
+    width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
   })), enableSelection && React.createElement(MRT_SelectCheckbox, {
     row: row
   }), row.cells.map(function (cell, index) {
@@ -732,10 +763,10 @@ var MRT_TableBody = function MRT_TableBody() {
       tableBodyProps = _useMaterialReactTabl.tableBodyProps,
       isLoading = _useMaterialReactTabl.isLoading,
       enablePagination = _useMaterialReactTabl.enablePagination,
-      OverrideTableBodyComponent = _useMaterialReactTabl.OverrideTableBodyComponent;
+      overrideTableBodyComponent = _useMaterialReactTabl.overrideTableBodyComponent;
 
-  if (OverrideTableBodyComponent) {
-    return React.createElement(React.Fragment, null, OverrideTableBodyComponent(tableInstance));
+  if (overrideTableBodyComponent) {
+    return React.createElement(React.Fragment, null, overrideTableBodyComponent(tableInstance));
   }
 
   var rows = enablePagination ? tableInstance.page : tableInstance.rows;
@@ -758,10 +789,10 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
 
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
-      OverrideTableFooterCellComponent = _useMaterialReactTabl.OverrideTableFooterCellComponent;
+      overrideTableFooterCellComponent = _useMaterialReactTabl.overrideTableFooterCellComponent;
 
-  if (OverrideTableFooterCellComponent) {
-    return React.createElement(React.Fragment, null, OverrideTableFooterCellComponent(column, tableInstance));
+  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;
@@ -781,20 +812,20 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
       enableColumnHiding = _useMaterialReactTabl.enableColumnHiding,
       enableSelection = _useMaterialReactTabl.enableSelection,
       tableInstance = _useMaterialReactTabl.tableInstance,
-      OverrideTableFooterRowComponent = _useMaterialReactTabl.OverrideTableFooterRowComponent; //if no content in row, skip row
+      overrideTableFooterRowComponent = _useMaterialReactTabl.overrideTableFooterRowComponent; //if no content in row, skip row
 
 
-  if (!columns.some(function (c) {
+  if (!(columns != null && columns.some(function (c) {
     return c.Footer;
-  })) return null;
+  }))) return null;
 
-  if (OverrideTableFooterRowComponent) {
-    return React.createElement(React.Fragment, null, OverrideTableFooterRowComponent(footerGroup, tableInstance));
+  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: tableInstance.expandedDepth + 0.5 + "rem"
+      width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
     }
   }), enableSelection && React.createElement(MRT_TableSpacerCell, {
     width: "1rem"
@@ -808,14 +839,14 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
 
 var MRT_TableFooter = function MRT_TableFooter() {
   var _useMaterialReactTabl = useMaterialReactTable(),
-      OverrideTableFooterComponent = _useMaterialReactTabl.OverrideTableFooterComponent,
+      overrideTableFooterComponent = _useMaterialReactTabl.overrideTableFooterComponent,
       enablePagination = _useMaterialReactTabl.enablePagination,
       positionPagination = _useMaterialReactTabl.positionPagination,
       tableFooterProps = _useMaterialReactTabl.tableFooterProps,
       tableInstance = _useMaterialReactTabl.tableInstance;
 
-  if (OverrideTableFooterComponent) {
-    return React.createElement(React.Fragment, null, OverrideTableFooterComponent(tableInstance));
+  if (overrideTableFooterComponent) {
+    return React.createElement(React.Fragment, null, overrideTableFooterComponent(tableInstance));
   }
 
   return React.createElement(TableFooter, Object.assign({}, tableFooterProps), tableInstance.footerGroups.map(function (footerGroup, index) {
@@ -843,14 +874,18 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
   var _useMaterialReactTabl = useMaterialReactTable(),
       tableInstance = _useMaterialReactTabl.tableInstance,
       tableSearchTextfieldProps = _useMaterialReactTabl.tableSearchTextfieldProps,
-      localization = _useMaterialReactTabl.localization;
+      localization = _useMaterialReactTabl.localization,
+      onSearchChange = _useMaterialReactTabl.onSearchChange;
 
   var _useState = useState(''),
       searchValue = _useState[0],
       setSearchValue = _useState[1];
 
-  var handleChange = useAsyncDebounce(function (value) {
-    tableInstance.setGlobalFilter(value != null ? value : undefined);
+  var handleChange = useAsyncDebounce(function (event) {
+    var _event$target$value;
+
+    tableInstance.setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
+    onSearchChange == null ? void 0 : onSearchChange(event);
   }, 200);
 
   var handleClear = function handleClear() {
@@ -860,9 +895,9 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
 
   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);
+    onChange: function onChange(event) {
+      setSearchValue(event.target.value);
+      handleChange(event);
     },
     value: searchValue != null ? searchValue : '',
     variant: "standard",
@@ -894,15 +929,15 @@ var Toolbar = /*#__PURE__*/styled(Toolbar$1)({
 });
 var MRT_Toolbar = function MRT_Toolbar() {
   var _useMaterialReactTabl = useMaterialReactTable(),
-      OverrideTableToolbarComponent = _useMaterialReactTabl.OverrideTableToolbarComponent,
+      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 (overrideTableToolbarComponent) {
+    return React.createElement(React.Fragment, null, overrideTableToolbarComponent(tableInstance));
   } //if no features in the toolbar are enabled, don't render anything
 
 
@@ -931,6 +966,8 @@ var defaultLocalization = {
   columnActionMenuItemSortAsc: 'Sort ascending',
   columnActionMenuItemClearSort: 'Clear sorting',
   columnActionMenuItemSortDesc: 'Sort descending',
+  columnActionMenuItemGroupBy: 'Group by column',
+  columnActionMenuItemUnGroupBy: 'Ungroup column',
   expandAllButtonTitle: 'Expand all',
   expandButtonTitle: 'Expand',
   filterTextFieldClearButtonTitle: 'Clear filter',
@@ -940,9 +977,14 @@ var defaultLocalization = {
   showHideColumnsButtonTitle: 'Show/Hide columns'
 };
 
-var _excluded$1 = ["enablePagination", "enableSorting", "enableSubRowTree", "localization", "positionPagination", "showFiltersInColumnHead", "showFooter", "showHead", "showToolbar"];
+var _excluded$1 = ["defaultColumn", "enablePagination", "enableSorting", "enableSubRowTree", "localization", "positionPagination", "showFiltersInColumnHead", "showFooter", "showHead", "showToolbar"];
 var MaterialReactTable = function MaterialReactTable(_ref) {
-  var _ref$enablePagination = _ref.enablePagination,
+  var _ref$defaultColumn = _ref.defaultColumn,
+      defaultColumn = _ref$defaultColumn === void 0 ? {
+    minWidth: 50,
+    maxWidth: 1000
+  } : _ref$defaultColumn,
+      _ref$enablePagination = _ref.enablePagination,
       enablePagination = _ref$enablePagination === void 0 ? true : _ref$enablePagination,
       _ref$enableSorting = _ref.enableSorting,
       enableSorting = _ref$enableSorting === void 0 ? true : _ref$enableSorting,
@@ -963,6 +1005,7 @@ var MaterialReactTable = function MaterialReactTable(_ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   return React.createElement(MaterialReactTableProvider, Object.assign({
+    defaultColumn: defaultColumn,
     enablePagination: enablePagination,
     enableSorting: enableSorting,
     enableSubRowTree: enableSubRowTree,
@@ -975,5 +1018,5 @@ var MaterialReactTable = function MaterialReactTable(_ref) {
   }, rest), React.createElement(MRT_TableContainer, null));
 };
 
-export { MaterialReactTable };
+export default MaterialReactTable;
 //# sourceMappingURL=material-react-table.esm.js.map