material-react-table 0.8.0-alpha.1 → 0.8.0-alpha.2

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

@@ -28,7 +28,7 @@ import SortIcon from '@mui/icons-material/Sort';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { createTable, useTableInstance, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, functionalUpdate } from '@tanstack/react-table';
-import { IconButton, Menu, MenuItem, Box, Tooltip, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, useMediaQuery, Chip, Alert, LinearProgress, Toolbar, lighten, alpha, TableCell, TableSortLabel, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
+import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, useMediaQuery, Chip, Alert, LinearProgress, Toolbar, lighten, alpha, TableCell, TableSortLabel, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
 import { rankItem, rankings } from '@tanstack/match-sorter-utils';
 
 function _extends() {
@@ -171,13 +171,15 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
       toggleAllRowsExpanded = tableInstance.toggleAllRowsExpanded;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding,
-      isLoading = _getState.isLoading;
+      isDensePadding = _getState.isDensePadding;
 
-  return React.createElement(IconButton, {
+  return React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: localization.expandAll
+  }, React.createElement(IconButton, {
     "aria-label": localization.expandAll,
-    disabled: isLoading,
-    title: localization.expandAll,
     onClick: function onClick() {
       return toggleAllRowsExpanded(!getIsAllRowsExpanded());
     },
@@ -190,7 +192,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
       transform: "rotate(" + (getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0) + "deg)",
       transition: 'transform 0.2s'
     }
-  }));
+  })));
 };
 
 var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
@@ -215,10 +217,14 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     });
   };
 
-  return React.createElement(IconButton, {
+  return React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: localization.expand
+  }, React.createElement(IconButton, {
     "aria-label": localization.expand,
     disabled: !row.getCanExpand() && !renderDetailPanel,
-    title: localization.expand,
     onClick: handleToggleExpand,
     sx: {
       height: isDensePadding ? '1.75rem' : '2.25rem',
@@ -229,7 +235,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       transform: "rotate(" + (!row.getCanExpand() && !renderDetailPanel ? -90 : row.getIsExpanded() ? -180 : 0) + "deg)",
       transition: 'transform 0.2s'
     }
-  }));
+  })));
 };
 
 var MRT_FILTER_OPTION;
@@ -599,7 +605,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     checked: switchChecked,
     control: React.createElement(Switch, null),
     disabled: isSubMenu && switchChecked || !column.getCanHide(),
-    label: column.header,
+    label: column.columnDef.header,
     onChange: function onChange() {
       return handleToggleColumnHidden(column);
     }
@@ -853,7 +859,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.header)))), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.columnDef.header)))), React.createElement(MenuItem, {
     divider: enableColumnFilters || enableGrouping || enableHiding,
     key: 2,
     disabled: column.getIsSorted() === 'desc',
@@ -865,7 +871,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     style: {
       transform: 'rotate(180deg) scaleX(-1)'
     }
-  })), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(column.header))))], enableColumnFilters && column.getCanFilter() && [React.createElement(MenuItem, {
+  })), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(column.columnDef.header))))], enableColumnFilters && column.getCanFilter() && [React.createElement(MenuItem, {
     disabled: !column.getFilterValue(),
     key: 0,
     onClick: handleClearFilter,
@@ -879,7 +885,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.header))), !column.filterSelectOptions && React.createElement(IconButton, {
+  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.columnDef.header))), !column.filterSelectOptions && React.createElement(IconButton, {
     onClick: handleOpenFilterModeMenu,
     onMouseEnter: handleOpenFilterModeMenu,
     size: "small",
@@ -900,7 +906,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.header))))], enablePinning && column.getCanPin() && [React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.columnDef.header))))], enablePinning && column.getCanPin() && [React.createElement(MenuItem, {
     disabled: column.getIsPinned() === 'left' || !column.getCanPin(),
     key: 0,
     onClick: function onClick() {
@@ -950,7 +956,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.header)))), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.columnDef.header)))), React.createElement(MenuItem, {
     disabled: !Object.values(columnVisibility).filter(function (visible) {
       return !visible;
     }).length,
@@ -959,7 +965,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.header))), React.createElement(IconButton, {
+  }, React.createElement(ListItemIcon, null, React.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.columnDef.header))), React.createElement(IconButton, {
     onClick: handleOpenShowHideColumnsMenu,
     onMouseEnter: handleOpenShowHideColumnsMenu,
     size: "small",
@@ -1153,8 +1159,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       onSelectAllChange = _tableInstance$option.onSelectAllChange;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding,
-      isLoading = _getState.isLoading;
+      isDensePadding = _getState.isDensePadding;
 
   var handleSelectChange = function handleSelectChange(event) {
     if (selectAll) {
@@ -1189,7 +1194,6 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
   }, React.createElement(Checkbox, Object.assign({
     checked: selectAll ? tableInstance.getIsAllRowsSelected() : row == null ? void 0 : row.getIsSelected(),
-    disabled: isLoading,
     indeterminate: selectAll ? tableInstance.getIsSomeRowsSelected() : row == null ? void 0 : row.getIsSomeSelected(),
     inputProps: {
       'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
@@ -1874,7 +1878,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var isSelectFilter = !!column.filterSelectOptions;
   var filterChipLabel = !(filterFn instanceof Function) && [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(filterFn) ? //@ts-ignore
   localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))] : '';
-  var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
+  var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
   return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
     fullWidth: true,
     id: filterId,
@@ -2073,7 +2077,7 @@ var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
 };
 
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _getState2, _getState2$currentFil, _column$Header;
+  var _getState2, _getState2$currentFil, _column$columnDef$Hea, _column$columnDef, _column$columnDef$hea, _column$columnDef$hea2;
 
   var header = _ref.header,
       tableInstance = _ref.tableInstance;
@@ -2106,14 +2110,14 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
 
-  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', column.header) : localization.sortedByColumnAsc.replace('{column}', column.header) : localization.unsorted;
+  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', column.columnDef.header) : localization.sortedByColumnAsc.replace('{column}', column.columnDef.header) : localization.unsorted;
   var filterFn = (_getState2 = getState()) == null ? void 0 : (_getState2$currentFil = _getState2.currentFilterFns) == null ? void 0 : _getState2$currentFil[header.id];
-  var filterTooltip = !!column.getFilterValue() ? localization.filteringByColumn.replace('{column}', String(column.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
+  var filterTooltip = !!column.getFilterValue() ? localization.filteringByColumn.replace('{column}', String(column.columnDef.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
   localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '') : localization.showHideFilters;
-  var headerElement = (_column$Header = column == null ? void 0 : column.Header == null ? void 0 : column.Header({
+  var headerElement = (_column$columnDef$Hea = (_column$columnDef = column.columnDef) == null ? void 0 : _column$columnDef.Header == null ? void 0 : _column$columnDef.Header({
     header: header,
     tableInstance: tableInstance
-  })) != null ? _column$Header : column.header;
+  })) != null ? _column$columnDef$Hea : header.renderHeader();
 
   var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
     return column.getIsPinned() === 'left' && tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
@@ -2169,7 +2173,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       cursor: column.getCanSort() && column.columnDefType !== 'group' ? 'pointer' : undefined,
       display: 'flex',
       flexWrap: 'nowrap',
-      whiteSpace: column.header.length < 24 ? 'nowrap' : 'normal'
+      whiteSpace: ((_column$columnDef$hea = (_column$columnDef$hea2 = column.columnDef.header) == null ? void 0 : _column$columnDef$hea2.length) != null ? _column$columnDef$hea : 0) < 24 ? 'nowrap' : 'normal'
     }
   }, headerElement, column.columnDefType === 'data' && column.getCanSort() && React.createElement(Tooltip, {
     arrow: true,
@@ -2367,7 +2371,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
-    placeholder: column.header,
+    placeholder: column.columnDef.header,
     value: value,
     variant: "standard"
   }, textFieldProps));
@@ -2435,7 +2439,7 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
 };
 
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var _cell$column$Cell, _cell$column, _row$subRows, _cell$column$Cell2, _cell$column2, _row$subRows2;
+  var _cell$column$columnDe, _cell$column$columnDe2, _row$subRows, _cell$column$columnDe3, _cell$column$columnDe4, _row$subRows$length, _row$subRows2;
 
   var cell = _ref.cell,
       enableHover = _ref.enableHover,
@@ -2538,7 +2542,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     animation: "wave",
     height: 20,
     width: skeletonWidth
-  }, muiTableBodyCellSkeletonProps)) : column.columnDefType === 'display' ? column.Cell == null ? void 0 : column.Cell({
+  }, muiTableBodyCellSkeletonProps)) : column.columnDefType === 'display' ? column.columnDef.Cell == null ? void 0 : column.columnDef.Cell({
     cell: cell,
     tableInstance: tableInstance
   }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : isEditing ? React.createElement(MRT_EditCellTextField, {
@@ -2547,13 +2551,13 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   }) : (enableClickToCopy || column.enableClickToCopy) && column.enableClickToCopy !== false ? React.createElement(React.Fragment, null, React.createElement(MRT_CopyButton, {
     cell: cell,
     tableInstance: tableInstance
-  }, React.createElement(React.Fragment, null, (_cell$column$Cell = (_cell$column = cell.column) == null ? void 0 : _cell$column.Cell == null ? void 0 : _cell$column.Cell({
+  }, React.createElement(React.Fragment, null, (_cell$column$columnDe = (_cell$column$columnDe2 = cell.column.columnDef) == null ? void 0 : _cell$column$columnDe2.Cell == null ? void 0 : _cell$column$columnDe2.Cell({
     cell: cell,
     tableInstance: tableInstance
-  })) != null ? _cell$column$Cell : cell.renderCell())), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React.createElement(React.Fragment, null, (_cell$column$Cell2 = (_cell$column2 = cell.column) == null ? void 0 : _cell$column2.Cell == null ? void 0 : _cell$column2.Cell({
+  })) != null ? _cell$column$columnDe : cell.renderCell())), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React.createElement(React.Fragment, null, (_cell$column$columnDe3 = (_cell$column$columnDe4 = cell.column.columnDef) == null ? void 0 : _cell$column$columnDe4.Cell == null ? void 0 : _cell$column$columnDe4.Cell({
     cell: cell,
     tableInstance: tableInstance
-  })) != null ? _cell$column$Cell2 : cell.renderCell(), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length, ")"))));
+  })) != null ? _cell$column$columnDe3 : cell.renderCell(), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows$length = (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length) != null ? _row$subRows$length : '', ")"))));
 };
 
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
@@ -2662,7 +2666,7 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
 };
 
 var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
-  var _ref2, _column$Footer;
+  var _ref2, _column$columnDef$Foo;
 
   var footer = _ref.footer,
       tableInstance = _ref.tableInstance;
@@ -2704,10 +2708,10 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         verticalAlign: 'text-top'
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
-  }), footer.isPlaceholder ? null : (_ref2 = (_column$Footer = column.Footer == null ? void 0 : column.Footer({
+  }), React.createElement(React.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_column$columnDef$Foo = column.columnDef.Footer == null ? void 0 : column.columnDef.Footer({
     footer: footer,
     tableInstance: tableInstance
-  })) != null ? _column$Footer : column.footer) != null ? _ref2 : null);
+  })) != null ? _column$columnDef$Foo : footer.renderFooter()) != null ? _ref2 : null));
 };
 
 var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
@@ -2718,7 +2722,7 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
   var muiTableFooterRowProps = tableInstance.options.muiTableFooterRowProps; // if no content in row, skip row
 
   if (!((_footerGroup$headers = footerGroup.headers) != null && _footerGroup$headers.some(function (h) {
-    return typeof h.column.footer === 'string' && !!h.column.footer || h.column.Footer;
+    return typeof h.column.columnDef.footer === 'string' && !!h.column.columnDef.footer || h.column.columnDef.Footer;
   }))) return null;
   var tableRowProps = muiTableFooterRowProps instanceof Function ? muiTableFooterRowProps({
     footerGroup: footerGroup,
@@ -3074,21 +3078,13 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
   var tableInstance = _extends({}, useTableInstance(table, _extends({
     filterFns: defaultFilterFNs,
-    //@ts-ignore
     getCoreRowModel: getCoreRowModel(),
-    //@ts-ignore
     getExpandedRowModel: getExpandedRowModel(),
-    //@ts-ignore
     getFacetedRowModel: getFacetedRowModel(),
-    //@ts-ignore
     getFilteredRowModel: getFilteredRowModel(),
-    //@ts-ignore
     getGroupedRowModel: getGroupedRowModel(),
-    //@ts-ignore
     getPaginationRowModel: getPaginationRowModel(),
-    //@ts-ignore
     getSortedRowModel: getSortedRowModel(),
-    //@ts-ignore
     getSubRows: function getSubRows(row) {
       return row == null ? void 0 : row.subRows;
     },