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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.0-alpha.12",
+  "version": "0.7.0-alpha.13",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -97,7 +97,7 @@
     "react": ">=16.8"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.0.0-alpha.30",
+    "@tanstack/react-table": "^8.0.0-alpha.42",
     "match-sorter": "^6.3.1"
   }
 }

package/src/MaterialReactTable.tsx

@@ -47,11 +47,6 @@ import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_FILTER_TYPE } from './enums';
 import { MRT_TableRoot } from './table/MRT_TableRoot';
 
-//@ts-ignore
-global.performance = global.performance || {
-  now: () => new Date().getTime(),
-};
-
 export type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<
   Omit<
     Options<D>,
@@ -571,7 +566,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       row: MRT_Row<D>;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onGlobalFilterChange?: ({
+    onGlobalSearchFilterChange?: ({
       event,
       tableInstance,
     }: {

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -36,7 +36,6 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
       <IconButton
         aria-label={localization.showHideFilters}
         onClick={handleToggleFullScreen}
-        size="small"
         {...rest}
       >
         {isFullScreen ? <FullscreenExitIcon /> : <FullscreenIcon />}

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -30,7 +30,6 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({
         <IconButton
           aria-label={localization.showHideColumns}
           onClick={handleClick}
-          size="small"
           {...rest}
         >
           <ViewColumnIcon />

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -36,7 +36,6 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
       <IconButton
         aria-label={localization.toggleDensePadding}
         onClick={handleToggleDensePadding}
-        size="small"
         {...rest}
       >
         {isDensePadding ? <DensitySmallIcon /> : <DensityMediumIcon />}

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -36,7 +36,6 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({
       <IconButton
         aria-label={localization.showHideFilters}
         onClick={handleToggleShowFilters}
-        size="small"
         {...rest}
       >
         {showFilters ? <FilterListOffIcon /> : <FilterListIcon />}

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -49,7 +49,7 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
 
   return (
     <Tooltip arrow title={localization.showHideSearch}>
-      <IconButton size="small" onClick={handleToggleSearch} {...rest}>
+      <IconButton onClick={handleToggleSearch} {...rest}>
         {showGlobalFilter ? <SearchOffIcon /> : <SearchIcon />}
       </IconButton>
     </Tooltip>

package/src/head/MRT_TableHeadCell.tsx

@@ -56,9 +56,9 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
 
   const sortTooltip = !!column.getIsSorted()
     ? column.getIsSorted() === 'desc'
-      ? localization.clearSort
-      : localization.sortByColumnDesc.replace('{column}', column.header)
-    : localization.sortByColumnAsc.replace('{column}', column.header);
+      ? localization.sortedByColumnDesc.replace('{column}', column.header)
+      : localization.sortedByColumnAsc.replace('{column}', column.header)
+    : localization.unsorted;
 
   const filterType = getState()?.currentFilterTypes?.[header.id];
 
@@ -135,7 +135,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           }}
         >
           <Box
-            {...column.getToggleSortingProps()}
+            onClick={() => column.toggleSorting()}
             sx={{
               alignItems: 'center',
               cursor:
@@ -146,7 +146,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
               flexWrap: 'nowrap',
               whiteSpace: column.header.length < 15 ? 'nowrap' : 'normal',
             }}
-            title={undefined}
           >
             {headerElement}
             {column.columnDefType !== 'group' && column.getCanSort() && (
@@ -185,9 +184,9 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                     }}
                   >
                     {showFilters && !column.getColumnFilterValue() ? (
-                      <FilterAltOff fontSize="small" />
+                      <FilterAltOff />
                     ) : (
-                      <FilterAltIcon fontSize="small" />
+                      <FilterAltIcon />
                     )}
                   </IconButton>
                 </Tooltip>

package/src/inputs/MRT_FilterTextField.tsx

@@ -206,7 +206,7 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
                       width: '1.75rem',
                     }}
                   >
-                    <CloseIcon fontSize="small" />
+                    <CloseIcon />
                   </IconButton>
                 </span>
               </Tooltip>

package/src/inputs/MRT_SearchTextField.tsx

@@ -29,7 +29,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
       idPrefix,
       localization,
       muiSearchTextFieldProps,
-      onGlobalFilterChange,
+      onGlobalSearchFilterChange,
     },
   } = tableInstance;
 
@@ -41,7 +41,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
   const handleChange = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
       setGlobalFilter(event.target.value ?? undefined);
-      onGlobalFilterChange?.({ event, tableInstance });
+      onGlobalSearchFilterChange?.({ event, tableInstance });
     }, 200),
     [],
   );
@@ -82,7 +82,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
                     size="small"
                     sx={{ height: '1.75rem', width: '1.75rem' }}
                   >
-                    <SearchIcon fontSize="small" />
+                    <SearchIcon />
                   </IconButton>
                 </span>
               </Tooltip>
@@ -97,7 +97,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
                 size="small"
                 title={localization.clearSearch}
               >
-                <CloseIcon fontSize="small" />
+                <CloseIcon />
               </IconButton>
             </InputAdornment>
           ),

package/src/localization.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,6 +55,7 @@ export interface MRT_Localization {
   toggleSelectRow: string;
   ungroupByColumn: string;
   unpin: string;
+  unsorted: string;
 }
 
 export const MRT_DefaultLocalization_EN: MRT_Localization = {
@@ -104,6 +107,8 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   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',
@@ -111,4 +116,5 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   toggleSelectRow: 'Toggle select row',
   ungroupByColumn: 'Ungroup by {column}',
   unpin: 'Unpin',
+  unsorted: 'Unsorted',
 };

package/src/table/MRT_TableRoot.tsx

@@ -1,17 +1,19 @@
+import React, { useMemo, useState } from 'react';
 import {
-  columnFilterRowsFn,
-  createTable,
-  expandRowsFn,
-  functionalUpdate,
-  globalFilterRowsFn,
-  groupRowsFn,
-  paginateRowsFn,
   PaginationState,
-  sortRowsFn,
   Table,
-  useTable,
+  createTable,
+  functionalUpdate,
+  getColumnFilteredRowModelSync,
+  getExpandedRowModel,
+  getGlobalFilteredRowModelSync,
+  getGroupedRowModelSync,
+  getPaginationRowModel,
+  getSortedRowModelSync,
+  useTableInstance,
+  getCoreRowModelSync,
+  ColumnDef,
 } from '@tanstack/react-table';
-import React, { useMemo, useState } from 'react';
 import {
   MRT_ColumnInterface,
   MRT_FilterType,
@@ -70,7 +72,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         (c) => ({
           [c.id as string]:
             c.filter ??
-            props?.initialState?.columnFilters?.[c.id as any] ??
+            props?.initialState?.columnFilters?.find((cf) => cf.id === c.id) ??
             (!!c.filterSelectOptions?.length
               ? MRT_FILTER_TYPE.EQUALS
               : MRT_FILTER_TYPE.BEST_MATCH),
@@ -95,7 +97,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ToggleRowActionMenuButton
-                row={cell.row as any}
+                row={cell.row as MRT_Row}
                 tableInstance={tableInstance}
               />
             ),
@@ -108,7 +110,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ExpandButton
-                row={cell.row as any}
+                row={cell.row as MRT_Row}
                 tableInstance={tableInstance}
               />
             ),
@@ -125,7 +127,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_SelectCheckbox
-                row={cell.row as any}
+                row={cell.row as MRT_Row}
                 tableInstance={tableInstance}
               />
             ),
@@ -172,7 +174,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             ? createGroup(table, column, currentFilterTypes)
             : createDataColumn(table, column, currentFilterTypes),
         ),
-      ] as any),
+      ] as ColumnDef<D>[]),
     [table, props.columns, currentFilterTypes],
   );
 
@@ -195,25 +197,26 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
 
   //@ts-ignore
   const tableInstance: MRT_TableInstance<{}> = {
-    ...useTable(table, {
+    ...useTableInstance(table, {
       ...props,
-      columnFilterRowsFn: columnFilterRowsFn,
       columns,
       data,
-      expandRowsFn: expandRowsFn,
       //@ts-ignore
       filterTypes: defaultFilterFNs,
+      getColumnFilteredRowModel: getColumnFilteredRowModelSync(),
+      getCoreRowModel: getCoreRowModelSync(),
+      getExpandedRowModel: getExpandedRowModel(),
+      getGlobalFilteredRowModel: getGlobalFilteredRowModelSync(),
+      getGroupedRowModel: getGroupedRowModelSync(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModelSync(),
       getSubRows: props.getSubRows ?? ((originalRow: D) => originalRow.subRows),
-      globalFilterRowsFn: globalFilterRowsFn,
       globalFilterType: currentGlobalFilterType,
-      groupRowsFn: groupRowsFn,
       idPrefix,
       //@ts-ignore
       initialState: props.initialState,
       onPaginationChange: (updater: any) =>
         setPagination((old) => functionalUpdate(updater, old)),
-      paginateRowsFn: paginateRowsFn,
-      sortRowsFn,
       state: {
         currentEditingRow,
         currentFilterTypes,

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -43,9 +43,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
     <Box
       sx={{
         display: 'flex',
-        gap: '0.5rem',
         alignItems: 'center',
-        p: '0 0.5rem',
       }}
     >
       {enableFilters && enableGlobalFilter && (