material-react-table 0.7.0-alpha.7 → 0.7.0

package/dist/utils.d.ts

@@ -7,6 +7,6 @@ export declare const createGroup: <D extends Record<string, any> = {}>(table: Ta
 export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnInterface<D>, currentFilterTypes: {
     [key: string]: MRT_FilterType;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnInterface<D>, "footer" | "columns" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "defaultCanHide" | "defaultIsVisible" | "enablePinning" | "defaultCanPin" | "filterType" | "enableAllFilters" | "enableColumnFilter" | "enableGlobalFilter" | "defaultCanFilter" | "defaultCanColumnFilter" | "defaultCanGlobalFilter" | "sortType" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "defaultCanSort" | "invertSorting" | "sortUndefined" | "aggregationType" | "aggregateValue" | "aggregatedCell" | "enableGrouping" | "defaultCanGroup" | "enableResizing" | "defaultCanResize" | "width" | "minWidth" | "maxWidth" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledFilterTypes" | "filter" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditChange" | "onColumnFilterValueChange"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnInterface<D>, "footer" | "columns" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "defaultCanHide" | "defaultIsVisible" | "enablePinning" | "defaultCanPin" | "filterType" | "enableAllFilters" | "enableColumnFilter" | "enableGlobalFilter" | "defaultCanFilter" | "defaultCanColumnFilter" | "defaultCanGlobalFilter" | "sortType" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "defaultCanSort" | "invertSorting" | "sortUndefined" | "aggregationType" | "aggregateValue" | "aggregatedCell" | "enableGrouping" | "defaultCanGroup" | "enableResizing" | "defaultCanResize" | "width" | "minWidth" | "maxWidth" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledFilterTypes" | "filter" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.0-alpha.7",
+  "version": "0.7.0",
   "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.",
@@ -60,8 +60,8 @@
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.1",
     "@faker-js/faker": "^6.1.2",
-    "@mui/icons-material": "^5.6.1",
-    "@mui/material": "^5.6.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.6.2",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.4.22",
     "@storybook/addon-actions": "^6.4.22",
@@ -74,7 +74,7 @@
     "@storybook/react": "^6.4.22",
     "@types/react": "^17.0.41",
     "@types/react-dom": "^17.0.14",
-    "babel-loader": "^8.2.4",
+    "babel-loader": "^8.2.5",
     "eslint": "^8.13.0",
     "eslint-plugin-react-hooks": "^4.4.0",
     "husky": "^7.0.4",
@@ -97,7 +97,7 @@
     "react": ">=16.8"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.0.0-alpha.28",
+    "@tanstack/react-table": "^8.0.0-alpha.43",
     "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>,
@@ -103,18 +98,18 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
     idPrefix: string;
     filterTypes: { [key in MRT_FILTER_TYPE]: any };
     localization: MRT_Localization;
-    setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
-    setCurrentFilterTypes: Dispatch<
-      SetStateAction<{
-        [key: string]: MRT_FilterType;
-      }>
-    >;
-    setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
-    setIsDensePadding: Dispatch<SetStateAction<boolean>>;
-    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
-    setShowFilters: Dispatch<SetStateAction<boolean>>;
-    setShowSearch: Dispatch<SetStateAction<boolean>>;
   };
+  setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
+  setCurrentFilterTypes: Dispatch<
+    SetStateAction<{
+      [key: string]: MRT_FilterType;
+    }>
+  >;
+  setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
+  setIsDensePadding: Dispatch<SetStateAction<boolean>>;
+  setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+  setShowFilters: Dispatch<SetStateAction<boolean>>;
+  setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
 };
 
 export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
@@ -127,7 +122,7 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
   isDensePadding: boolean;
   isFullScreen: boolean;
   showFilters: boolean;
-  showSearch: boolean;
+  showGlobalFilter: boolean;
   pagination: Partial<PaginationState>;
 };
 
@@ -329,16 +324,15 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
   MRT_TableOptions<D> & {
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
-    enableColumnPinning?: boolean;
     enableDensePaddingToggle?: boolean;
+    enableEditing?: boolean;
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
     enablePagination?: boolean;
     enableRowActions?: boolean;
-    enableStickyHeader?: boolean;
-    enableEditing?: boolean;
     enableRowNumbers?: boolean;
     enableSelectAll?: boolean;
+    enableStickyHeader?: boolean;
     enabledGlobalFilterTypes?: (MRT_FILTER_TYPE | string)[];
     filterTypes?: { [key in MRT_FILTER_TYPE]: any };
     hideTableFooter?: boolean;
@@ -348,8 +342,8 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     hideToolbarTop?: boolean;
     icons?: Partial<MRT_Icons>;
     idPrefix?: string;
-    isReloading?: boolean;
     isLoading?: boolean;
+    isReloading?: boolean;
     localization?: Partial<MRT_Localization>;
     muiLinearProgressProps?:
       | LinearProgressProps
@@ -563,15 +557,6 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       tableInstance: MRT_TableInstance<D>;
       event: MouseEvent<HTMLTableCellElement>;
     }) => void;
-    onColumnHide?: ({
-      column,
-      columnVisibility,
-      tableInstance,
-    }: {
-      column: MRT_ColumnInstance<D>;
-      columnVisibility: VisibilityState;
-      tableInstance: MRT_TableInstance<D>;
-    }) => void;
     onDetailPanelClick?: ({
       event,
       row,
@@ -581,7 +566,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       row: MRT_Row<D>;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onGlobalFilterChange?: ({
+    onGlobalSearchFilterChange?: ({
       event,
       tableInstance,
     }: {
@@ -632,6 +617,51 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       selectedRows: MRT_Row<D>[];
       tableInstance: MRT_TableInstance<D>;
     }) => void;
+    onToggleColumnVisibility?: ({
+      column,
+      columnVisibility,
+      tableInstance,
+    }: {
+      column: MRT_ColumnInstance<D>;
+      columnVisibility: VisibilityState;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onToggleDensePadding?: ({
+      event,
+      isDensePadding,
+      tableInstance,
+    }: {
+      event: MouseEvent<HTMLButtonElement>;
+      isDensePadding: boolean;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onToggleFullScreen?: ({
+      event,
+      isFullScreen,
+      tableInstance,
+    }: {
+      event: MouseEvent<HTMLButtonElement>;
+      isFullScreen: boolean;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onToggleShowFilters?: ({
+      event,
+      showFilters,
+      tableInstance,
+    }: {
+      event: MouseEvent<HTMLButtonElement>;
+      showFilters: boolean;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onToggleShowGlobalFilter?: ({
+      event,
+      showGlobalFilter,
+      tableInstance,
+    }: {
+      event: MouseEvent<HTMLButtonElement>;
+      showGlobalFilter: boolean;
+      tableInstance: MRT_TableInstance<D>;
+    }) => void;
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
@@ -666,14 +696,14 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     }) => ReactNode;
     renderToolbarInternalActions?: ({
       tableInstance,
-      MRT_ToggleSearchButton,
+      MRT_ToggleGlobalFilterButton,
       MRT_ToggleFiltersButton,
       MRT_ShowHideColumnsButton,
       MRT_ToggleDensePaddingButton,
       MRT_FullScreenToggleButton,
     }: {
       tableInstance: MRT_TableInstance<D>;
-      MRT_ToggleSearchButton: FC<
+      MRT_ToggleGlobalFilterButton: FC<
         IconButtonProps & { tableInstance: MRT_TableInstance<D> }
       >;
       MRT_ToggleFiltersButton: FC<
@@ -692,13 +722,16 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
   };
 
 export default <D extends Record<string, any> = {}>({
+  autoResetExpanded = false,
   enableColumnActions = true,
   enableColumnFilters = true,
   enableDensePaddingToggle = true,
   enableExpandAll = true,
+  enableFilters = true,
   enableFullScreenToggle = true,
   enableGlobalFilter = true,
   enableHiding = true,
+  enableMultiRowSelection = true,
   enablePagination = true,
   enableSelectAll = true,
   enableSorting = true,
@@ -712,13 +745,16 @@ export default <D extends Record<string, any> = {}>({
   ...rest
 }: MaterialReactTableProps<D>) => (
   <MRT_TableRoot
+    autoResetExpanded={autoResetExpanded}
     enableColumnActions={enableColumnActions}
     enableColumnFilters={enableColumnFilters}
     enableDensePaddingToggle={enableDensePaddingToggle}
     enableExpandAll={enableExpandAll}
+    enableFilters={enableFilters}
     enableFullScreenToggle={enableFullScreenToggle}
     enableGlobalFilter={enableGlobalFilter}
     enableHiding={enableHiding}
+    enableMultiRowSelection={enableMultiRowSelection}
     enablePagination={enablePagination}
     enableSelectAll={enableSelectAll}
     enableSorting={enableSorting}

package/src/body/MRT_TableBodyCell.tsx

@@ -15,7 +15,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     getState,
     options: {
       enableClickToCopy,
-      enableColumnPinning,
+      enablePinning,
       enableEditing,
       isLoading,
       muiTableBodyCellProps,
@@ -73,7 +73,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
             : undefined,
         transition: 'all 0.2s ease-in-out',
         whiteSpace:
-          isDensePadding || (enableColumnPinning && getIsSomeColumnsPinned())
+          isDensePadding || (enablePinning && getIsSomeColumnsPinned())
             ? 'nowrap'
             : 'normal',
         //@ts-ignore
@@ -94,19 +94,21 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
           column.id !==
             row.groupingColumnId) ? null : cell.getIsAggregated() ? (
         cell.renderAggregatedCell()
-      ) : (enableEditing && column.enableEditing !== false) && currentEditingRow?.id === row.id ? (
+      ) : enableEditing &&
+        column.enableEditing !== false &&
+        currentEditingRow?.id === row.id ? (
         <MRT_EditCellTextField cell={cell} tableInstance={tableInstance} />
       ) : (enableClickToCopy || column.enableClickToCopy) &&
         column.enableClickToCopy !== false ? (
         <>
           <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
-            {cell.renderCell()}
+            {cell.column?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
           </MRT_CopyButton>
           {row.getIsGrouped() && <> ({row.subRows?.length})</>}
         </>
       ) : (
         <>
-          {cell.renderCell()}
+          {cell.column?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
           {row.getIsGrouped() && <> ({row.subRows?.length})</>}
         </>
       )}

package/src/buttons/MRT_EditActionButtons.tsx

@@ -15,8 +15,8 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, tableInstance }) => {
       icons: { CancelIcon, SaveIcon },
       localization,
       onEditSubmit,
-      setCurrentEditingRow,
     },
+    setCurrentEditingRow,
   } = tableInstance;
 
   const { currentEditingRow } = getState();

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -15,18 +15,27 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
     options: {
       icons: { FullscreenExitIcon, FullscreenIcon },
       localization,
-      setIsFullScreen,
+      onToggleFullScreen,
     },
+    setIsFullScreen,
   } = tableInstance;
 
   const { isFullScreen } = getState();
 
+  const handleToggleFullScreen = (event: MouseEvent<HTMLButtonElement>) => {
+    onToggleFullScreen?.({
+      event,
+      isFullScreen: !isFullScreen,
+      tableInstance,
+    });
+    setIsFullScreen(!isFullScreen);
+  };
+
   return (
     <Tooltip arrow title={localization.toggleFullScreen}>
       <IconButton
         aria-label={localization.showHideFilters}
-        onClick={() => setIsFullScreen(!isFullScreen)}
-        size="small"
+        onClick={handleToggleFullScreen}
         {...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

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -15,18 +15,27 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
     options: {
       icons: { DensityMediumIcon, DensitySmallIcon },
       localization,
-      setIsDensePadding,
+      onToggleDensePadding,
     },
+    setIsDensePadding,
   } = tableInstance;
 
   const { isDensePadding } = getState();
 
+  const handleToggleDensePadding = (event: MouseEvent<HTMLButtonElement>) => {
+    onToggleDensePadding?.({
+      event,
+      isDensePadding: !isDensePadding,
+      tableInstance,
+    });
+    setIsDensePadding(!isDensePadding);
+  };
+
   return (
     <Tooltip arrow title={localization.toggleDensePadding}>
       <IconButton
         aria-label={localization.toggleDensePadding}
-        onClick={() => setIsDensePadding(!isDensePadding)}
-        size="small"
+        onClick={handleToggleDensePadding}
         {...rest}
       >
         {isDensePadding ? <DensitySmallIcon /> : <DensityMediumIcon />}

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -15,18 +15,27 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({
     options: {
       icons: { FilterListIcon, FilterListOffIcon },
       localization,
-      setShowFilters,
+      onToggleShowFilters,
     },
+    setShowFilters,
   } = tableInstance;
 
   const { showFilters } = getState();
 
+  const handleToggleShowFilters = (event: MouseEvent<HTMLButtonElement>) => {
+    onToggleShowFilters?.({
+      event,
+      showFilters: !showFilters,
+      tableInstance,
+    });
+    setShowFilters(!showFilters);
+  };
+
   return (
     <Tooltip arrow title={localization.showHideFilters}>
       <IconButton
         aria-label={localization.showHideFilters}
-        onClick={() => setShowFilters(!showFilters)}
-        size="small"
+        onClick={handleToggleShowFilters}
         {...rest}
       >
         {showFilters ? <FilterListOffIcon /> : <FilterListIcon />}

package/src/buttons/{MRT_ToggleSearchButton.tsx → MRT_ToggleGlobalFilterButton.tsx}

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -6,7 +6,7 @@ interface Props extends IconButtonProps {
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_ToggleSearchButton: FC<Props> = ({
+export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
   tableInstance,
   ...rest
 }) => {
@@ -17,19 +17,25 @@ export const MRT_ToggleSearchButton: FC<Props> = ({
       idPrefix,
       localization,
       muiSearchTextFieldProps,
-      setShowSearch,
+      onToggleShowGlobalFilter,
     },
+    setShowGlobalFilter,
   } = tableInstance;
 
-  const { showSearch } = getState();
+  const { showGlobalFilter } = getState();
 
   const textFieldProps =
     muiSearchTextFieldProps instanceof Function
       ? muiSearchTextFieldProps({ tableInstance })
       : muiSearchTextFieldProps;
 
-  const handleToggleSearch = () => {
-    setShowSearch(!showSearch);
+  const handleToggleSearch = (event: MouseEvent<HTMLButtonElement>) => {
+    onToggleShowGlobalFilter?.({
+      event,
+      showGlobalFilter: !showGlobalFilter,
+      tableInstance,
+    });
+    setShowGlobalFilter(!showGlobalFilter);
     setTimeout(
       () =>
         document
@@ -43,8 +49,8 @@ export const MRT_ToggleSearchButton: FC<Props> = ({
 
   return (
     <Tooltip arrow title={localization.showHideSearch}>
-      <IconButton size="small" onClick={handleToggleSearch} {...rest}>
-        {showSearch ? <SearchOffIcon /> : <SearchIcon />}
+      <IconButton onClick={handleToggleSearch} {...rest}>
+        {showGlobalFilter ? <SearchOffIcon /> : <SearchIcon />}
       </IconButton>
     </Tooltip>
   );

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -32,8 +32,8 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
       localization,
       renderRowActionMenuItems,
       renderRowActions,
-      setCurrentEditingRow,
     },
+    setCurrentEditingRow,
   } = tableInstance;
 
   const { currentEditingRow } = getState();

package/src/head/MRT_TableHeadCell.tsx

@@ -30,8 +30,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
       icons: { FilterAltIcon, FilterAltOff },
       localization,
       muiTableHeadCellProps,
-      setShowFilters,
     },
+    setShowFilters,
   } = tableInstance;
 
   const { isDensePadding, showFilters } = getState();
@@ -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_EditCellTextField.tsx

@@ -16,11 +16,8 @@ interface Props {
 export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const {
     getState,
-    options: {
-      enableEditing,
-      muiTableBodyCellEditTextFieldProps,
-      setCurrentEditingRow,
-    },
+    options: { enableEditing, muiTableBodyCellEditTextFieldProps },
+    setCurrentEditingRow,
   } = tableInstance;
 
   const [value, setValue] = useState(cell.value);

package/src/inputs/MRT_FilterTextField.tsx

@@ -32,8 +32,8 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
       idPrefix,
       localization,
       muiTableHeadCellFilterTextFieldProps,
-      setCurrentFilterTypes,
     },
+    setCurrentFilterTypes,
   } = tableInstance;
 
   const { column } = header;
@@ -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,11 +29,11 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
       idPrefix,
       localization,
       muiSearchTextFieldProps,
-      onGlobalFilterChange,
+      onGlobalSearchFilterChange,
     },
   } = tableInstance;
 
-  const { globalFilter, showSearch } = getState();
+  const { globalFilter, showGlobalFilter } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [searchValue, setSearchValue] = useState(globalFilter ?? '');
@@ -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),
     [],
   );
@@ -61,7 +61,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
       : muiSearchTextFieldProps;
 
   return (
-    <Collapse in={showSearch} orientation="horizontal">
+    <Collapse in={showGlobalFilter} orientation="horizontal">
       <TextField
         id={`mrt-${idPrefix}-search-text-field`}
         placeholder={localization.search}
@@ -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',
 };