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

package/dist/MaterialReactTable.d.ts

@@ -140,6 +140,9 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
 };
 export declare type MRT_Column<D extends Record<string, any> = {}> = Omit<Column<D>, 'header' | 'footer' | 'columns'> & MRT_ColumnDef<D> & {
     columns?: MRT_Column<D>[];
+    columnDef: MRT_ColumnDef<D>;
+    header: string;
+    footer: string;
 };
 export declare type MRT_Header<D extends Record<string, any> = {}> = Omit<Header<D>, 'column'> & {
     column: MRT_Column<D>;

package/dist/material-react-table.cjs.development.js

@@ -178,13 +178,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__default.createElement(material.IconButton, {
+  return React__default.createElement(material.Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: localization.expandAll
+  }, React__default.createElement(material.IconButton, {
     "aria-label": localization.expandAll,
-    disabled: isLoading,
-    title: localization.expandAll,
     onClick: function onClick() {
       return toggleAllRowsExpanded(!getIsAllRowsExpanded());
     },
@@ -197,7 +199,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) {
@@ -222,10 +224,14 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     });
   };
 
-  return React__default.createElement(material.IconButton, {
+  return React__default.createElement(material.Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: localization.expand
+  }, React__default.createElement(material.IconButton, {
     "aria-label": localization.expand,
     disabled: !row.getCanExpand() && !renderDetailPanel,
-    title: localization.expand,
     onClick: handleToggleExpand,
     sx: {
       height: isDensePadding ? '1.75rem' : '2.25rem',
@@ -236,7 +242,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;
@@ -606,7 +612,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     checked: switchChecked,
     control: React__default.createElement(material.Switch, null),
     disabled: isSubMenu && switchChecked || !column.getCanHide(),
-    label: column.header,
+    label: column.columnDef.header,
     onChange: function onChange() {
       return handleToggleColumnHidden(column);
     }
@@ -860,7 +866,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.header)))), React__default.createElement(material.MenuItem, {
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.columnDef.header)))), React__default.createElement(material.MenuItem, {
     divider: enableColumnFilters || enableGrouping || enableHiding,
     key: 2,
     disabled: column.getIsSorted() === 'desc',
@@ -872,7 +878,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__default.createElement(material.MenuItem, {
+  })), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(column.columnDef.header))))], enableColumnFilters && column.getCanFilter() && [React__default.createElement(material.MenuItem, {
     disabled: !column.getFilterValue(),
     key: 0,
     onClick: handleClearFilter,
@@ -886,7 +892,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.header))), !column.filterSelectOptions && React__default.createElement(material.IconButton, {
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.columnDef.header))), !column.filterSelectOptions && React__default.createElement(material.IconButton, {
     onClick: handleOpenFilterModeMenu,
     onMouseEnter: handleOpenFilterModeMenu,
     size: "small",
@@ -907,7 +913,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.header))))], enablePinning && column.getCanPin() && [React__default.createElement(material.MenuItem, {
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.columnDef.header))))], enablePinning && column.getCanPin() && [React__default.createElement(material.MenuItem, {
     disabled: column.getIsPinned() === 'left' || !column.getCanPin(),
     key: 0,
     onClick: function onClick() {
@@ -957,7 +963,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.header)))), React__default.createElement(material.MenuItem, {
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.columnDef.header)))), React__default.createElement(material.MenuItem, {
     disabled: !Object.values(columnVisibility).filter(function (visible) {
       return !visible;
     }).length,
@@ -966,7 +972,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.header))), React__default.createElement(material.IconButton, {
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.columnDef.header))), React__default.createElement(material.IconButton, {
     onClick: handleOpenShowHideColumnsMenu,
     onMouseEnter: handleOpenShowHideColumnsMenu,
     size: "small",
@@ -1160,8 +1166,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) {
@@ -1196,7 +1201,6 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
   }, React__default.createElement(material.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
@@ -1881,7 +1885,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__default.createElement(React__default.Fragment, null, React__default.createElement(material.TextField, Object.assign({
     fullWidth: true,
     id: filterId,
@@ -2080,7 +2084,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;
@@ -2113,14 +2117,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();
@@ -2176,7 +2180,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__default.createElement(material.Tooltip, {
     arrow: true,
@@ -2374,7 +2378,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));
@@ -2442,7 +2446,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,
@@ -2545,7 +2549,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__default.createElement(MRT_EditCellTextField, {
@@ -2554,13 +2558,13 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   }) : (enableClickToCopy || column.enableClickToCopy) && column.enableClickToCopy !== false ? React__default.createElement(React__default.Fragment, null, React__default.createElement(MRT_CopyButton, {
     cell: cell,
     tableInstance: tableInstance
-  }, React__default.createElement(React__default.Fragment, null, (_cell$column$Cell = (_cell$column = cell.column) == null ? void 0 : _cell$column.Cell == null ? void 0 : _cell$column.Cell({
+  }, React__default.createElement(React__default.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__default.createElement(React__default.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React__default.createElement(React__default.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__default.createElement(React__default.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React__default.createElement(React__default.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__default.createElement(React__default.Fragment, null, " (", (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length, ")"))));
+  })) != null ? _cell$column$columnDe3 : cell.renderCell(), row.getIsGrouped() && React__default.createElement(React__default.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) {
@@ -2669,7 +2673,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;
@@ -2711,10 +2715,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__default.createElement(React__default.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) {
@@ -2725,7 +2729,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,
@@ -3081,21 +3085,13 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
   var tableInstance = _extends({}, reactTable.useTableInstance(table, _extends({
     filterFns: defaultFilterFNs,
-    //@ts-ignore
     getCoreRowModel: reactTable.getCoreRowModel(),
-    //@ts-ignore
     getExpandedRowModel: reactTable.getExpandedRowModel(),
-    //@ts-ignore
     getFacetedRowModel: reactTable.getFacetedRowModel(),
-    //@ts-ignore
     getFilteredRowModel: reactTable.getFilteredRowModel(),
-    //@ts-ignore
     getGroupedRowModel: reactTable.getGroupedRowModel(),
-    //@ts-ignore
     getPaginationRowModel: reactTable.getPaginationRowModel(),
-    //@ts-ignore
     getSortedRowModel: reactTable.getSortedRowModel(),
-    //@ts-ignore
     getSubRows: function getSubRows(row) {
       return row == null ? void 0 : row.subRows;
     },