material-react-table 0.7.0-alpha.12 → 0.7.0-alpha.13

package/dist/MaterialReactTable.d.ts

@@ -282,7 +282,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
         row: MRT_Row<D>;
         tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onGlobalFilterChange?: ({ event, tableInstance, }: {
+    onGlobalSearchFilterChange?: ({ event, tableInstance, }: {
         event: ChangeEvent<HTMLInputElement>;
         tableInstance: MRT_TableInstance<D>;
     }) => void;

package/dist/localization.d.ts

@@ -46,6 +46,8 @@ export interface MRT_Localization {
     showHideSearch: string;
     sortByColumnAsc: string;
     sortByColumnDesc: string;
+    sortedByColumnAsc: string;
+    sortedByColumnDesc: string;
     thenBy: string;
     toggleDensePadding: string;
     toggleFullScreen: string;
@@ -53,5 +55,6 @@ export interface MRT_Localization {
     toggleSelectRow: string;
     ungroupByColumn: string;
     unpin: string;
+    unsorted: string;
 }
 export declare const MRT_DefaultLocalization_EN: MRT_Localization;

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

@@ -118,13 +118,16 @@ var MRT_DefaultLocalization_EN = {
   showHideSearch: 'Show/Hide search',
   sortByColumnAsc: 'Sort by {column} ascending',
   sortByColumnDesc: 'Sort by {column} descending',
+  sortedByColumnAsc: 'Sorted by {column} ascending',
+  sortedByColumnDesc: 'Sorted by {column} descending',
   thenBy: ', then by ',
   toggleDensePadding: 'Toggle dense padding',
   toggleFullScreen: 'Toggle full screen',
   toggleSelectAll: 'Toggle select all',
   toggleSelectRow: 'Toggle select row',
   ungroupByColumn: 'Ungroup by {column}',
-  unpin: 'Unpin'
+  unpin: 'Unpin',
+  unsorted: 'Unsorted'
 };
 
 var MRT_Default_Icons = {
@@ -1159,7 +1162,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
       idPrefix = _tableInstance$option.idPrefix,
       localization = _tableInstance$option.localization,
       muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
-      onGlobalFilterChange = _tableInstance$option.onGlobalFilterChange;
+      onGlobalSearchFilterChange = _tableInstance$option.onGlobalSearchFilterChange;
 
   var _getState = getState(),
       globalFilter = _getState.globalFilter,
@@ -1177,7 +1180,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
     var _event$target$value;
 
     setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
-    onGlobalFilterChange == null ? void 0 : onGlobalFilterChange({
+    onGlobalSearchFilterChange == null ? void 0 : onGlobalSearchFilterChange({
       event: event,
       tableInstance: tableInstance
     });
@@ -1221,9 +1224,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
           height: '1.75rem',
           width: '1.75rem'
         }
-      }, React__default.createElement(SearchIcon, {
-        fontSize: "small"
-      }))))),
+      }, React__default.createElement(SearchIcon, null))))),
       endAdornment: React__default.createElement(material.InputAdornment, {
         position: "end"
       }, React__default.createElement(material.IconButton, {
@@ -1232,9 +1233,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
         onClick: handleClear,
         size: "small",
         title: localization.clearSearch
-      }, React__default.createElement(CloseIcon, {
-        fontSize: "small"
-      })))
+      }, React__default.createElement(CloseIcon, null)))
     }
   }, textFieldProps, {
     sx: _extends({
@@ -1278,8 +1277,7 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
     title: localization.toggleFullScreen
   }, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.showHideFilters,
-    onClick: handleToggleFullScreen,
-    size: "small"
+    onClick: handleToggleFullScreen
   }, rest), isFullScreen ? React__default.createElement(FullscreenExitIcon, null) : React__default.createElement(FullscreenIcon, null)));
 };
 
@@ -1305,8 +1303,7 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
     title: localization.showHideColumns
   }, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.showHideColumns,
-    onClick: handleClick,
-    size: "small"
+    onClick: handleClick
   }, rest), React__default.createElement(ViewColumnIcon, null))), React__default.createElement(MRT_ShowHideColumnsMenu, {
     anchorEl: anchorEl,
     setAnchorEl: setAnchorEl,
@@ -1345,8 +1342,7 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
     title: localization.toggleDensePadding
   }, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.toggleDensePadding,
-    onClick: handleToggleDensePadding,
-    size: "small"
+    onClick: handleToggleDensePadding
   }, rest), isDensePadding ? React__default.createElement(DensitySmallIcon, null) : React__default.createElement(DensityMediumIcon, null)));
 };
 
@@ -1381,8 +1377,7 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
     title: localization.showHideFilters
   }, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.showHideFilters,
-    onClick: handleToggleShowFilters,
-    size: "small"
+    onClick: handleToggleShowFilters
   }, rest), showFilters ? React__default.createElement(FilterListOffIcon, null) : React__default.createElement(FilterListIcon, null)));
 };
 
@@ -1427,7 +1422,6 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
     arrow: true,
     title: localization.showHideSearch
   }, React__default.createElement(material.IconButton, Object.assign({
-    size: "small",
     onClick: handleToggleSearch
   }, rest), showGlobalFilter ? React__default.createElement(SearchOffIcon, null) : React__default.createElement(SearchIcon, null)));
 };
@@ -1457,9 +1451,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
   return React__default.createElement(material.Box, {
     sx: {
       display: 'flex',
-      gap: '0.5rem',
-      alignItems: 'center',
-      p: '0 0.5rem'
+      alignItems: 'center'
     }
   }, enableFilters && enableGlobalFilter && React__default.createElement(MRT_ToggleGlobalFilterButton, {
     tableInstance: tableInstance
@@ -1877,9 +1869,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
           height: '1.75rem',
           width: '1.75rem'
         }
-      }, React__default.createElement(CloseIcon, {
-        fontSize: "small"
-      })))))
+      }, React__default.createElement(CloseIcon, null)))))
     }
   }, textFieldProps, {
     sx: _extends({
@@ -2013,7 +2003,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var tableCellProps = _extends({}, header.getHeaderProps(), mTableHeadCellProps, mcTableHeadCellProps);
 
-  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.clearSort : localization.sortByColumnDesc.replace('{column}', column.header) : localization.sortByColumnAsc.replace('{column}', column.header);
+  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', column.header) : localization.sortedByColumnAsc.replace('{column}', column.header) : localization.unsorted;
   var filterType = (_getState2 = getState()) == null ? void 0 : (_getState2$currentFil = _getState2.currentFilterTypes) == null ? void 0 : _getState2$currentFil[header.id];
   var filterTooltip = !!column.getColumnFilterValue() ? localization.filteringByColumn.replace('{column}', String(column.header)).replace('{filterType}', filterType instanceof Function ? '' : // @ts-ignore
   localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))]).replace('{filterValue}', column.getColumnFilterValue()).replace('" "', '') : localization.showHideFilters;
@@ -2048,16 +2038,18 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       justifyContent: column.columnDefType === 'group' ? 'center' : 'space-between',
       width: '100%'
     }
-  }, React__default.createElement(material.Box, Object.assign({}, column.getToggleSortingProps(), {
+  }, React__default.createElement(material.Box, {
+    onClick: function onClick() {
+      return column.toggleSorting();
+    },
     sx: {
       alignItems: 'center',
       cursor: column.getCanSort() && column.columnDefType !== 'group' ? 'pointer' : undefined,
       display: 'flex',
       flexWrap: 'nowrap',
       whiteSpace: column.header.length < 15 ? 'nowrap' : 'normal'
-    },
-    title: undefined
-  }), headerElement, column.columnDefType !== 'group' && column.getCanSort() && React__default.createElement(material.Tooltip, {
+    }
+  }, headerElement, column.columnDefType !== 'group' && column.getCanSort() && React__default.createElement(material.Tooltip, {
     arrow: true,
     placement: "top",
     title: sortTooltip
@@ -2086,11 +2078,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         opacity: 0.8
       }
     }
-  }, showFilters && !column.getColumnFilterValue() ? React__default.createElement(FilterAltOff, {
-    fontSize: "small"
-  }) : React__default.createElement(FilterAltIcon, {
-    fontSize: "small"
-  })))), React__default.createElement(material.Box, {
+  }, showFilters && !column.getColumnFilterValue() ? React__default.createElement(FilterAltOff, null) : React__default.createElement(FilterAltIcon, null)))), React__default.createElement(material.Box, {
     sx: {
       alignItems: 'center',
       display: 'flex',
@@ -2864,7 +2852,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
       var _ref, _c$filter, _props$initialState8, _props$initialState8$, _c$filterSelectOption, _ref2;
 
-      return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState8 = props.initialState) == null ? void 0 : (_props$initialState8$ = _props$initialState8.columnFilters) == null ? void 0 : _props$initialState8$[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_TYPE.EQUALS : MRT_FILTER_TYPE.BEST_MATCH, _ref2;
+      return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState8 = props.initialState) == null ? void 0 : (_props$initialState8$ = _props$initialState8.columnFilters) == null ? void 0 : _props$initialState8$.find(function (cf) {
+        return cf.id === c.id;
+      })) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_TYPE.EQUALS : MRT_FILTER_TYPE.BEST_MATCH, _ref2;
     })));
   }),
       currentFilterTypes = _useState7[0],
@@ -2959,19 +2949,22 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     }) : props.data;
   }, [props.data, props.isLoading]); //@ts-ignore
 
-  var tableInstance = _extends({}, reactTable.useTable(table, _extends({}, props, {
-    columnFilterRowsFn: reactTable.columnFilterRowsFn,
+  var tableInstance = _extends({}, reactTable.useTableInstance(table, _extends({}, props, {
     columns: columns,
     data: data,
-    expandRowsFn: reactTable.expandRowsFn,
     //@ts-ignore
     filterTypes: defaultFilterFNs,
+    getColumnFilteredRowModel: reactTable.getColumnFilteredRowModelSync(),
+    getCoreRowModel: reactTable.getCoreRowModelSync(),
+    getExpandedRowModel: reactTable.getExpandedRowModel(),
+    getGlobalFilteredRowModel: reactTable.getGlobalFilteredRowModelSync(),
+    getGroupedRowModel: reactTable.getGroupedRowModelSync(),
+    getPaginationRowModel: reactTable.getPaginationRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModelSync(),
     getSubRows: (_props$getSubRows = props.getSubRows) != null ? _props$getSubRows : function (originalRow) {
       return originalRow.subRows;
     },
-    globalFilterRowsFn: reactTable.globalFilterRowsFn,
     globalFilterType: currentGlobalFilterType,
-    groupRowsFn: reactTable.groupRowsFn,
     idPrefix: idPrefix,
     //@ts-ignore
     initialState: props.initialState,
@@ -2980,8 +2973,6 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         return reactTable.functionalUpdate(updater, old);
       });
     },
-    paginateRowsFn: reactTable.paginateRowsFn,
-    sortRowsFn: reactTable.sortRowsFn,
     state: _extends({
       currentEditingRow: currentEditingRow,
       currentFilterTypes: currentFilterTypes,
@@ -3009,12 +3000,6 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 };
 
 var _excluded$5 = ["autoResetExpanded", "enableColumnActions", "enableColumnFilters", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
-
-global.performance = global.performance || {
-  now: function now() {
-    return new Date().getTime();
-  }
-};
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,