material-react-table 0.40.9 → 0.40.12

package/dist/index.d.ts

@@ -373,9 +373,11 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
      * @default gets set to the same value as `accessorKey` by default
      */
     id?: LiteralUnion<string & keyof TData>;
-    muiTableBodyCellCopyButtonProps?: ButtonProps | (({ cell, table, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellCopyButtonProps?: ButtonProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => ButtonProps);
     muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
@@ -421,7 +423,8 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
     }) => ReactNode[];
     sortingFn?: MRT_SortingFn;
 };
-declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
+declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id' | 'defaultDisplayColumn'> & {
+    defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
     id: string;
     _filterFn: MRT_FilterOption;
 };
@@ -473,6 +476,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
     defaultColumn?: Partial<MRT_ColumnDef<TData>>;
+    defaultDisplayColumn?: Partial<MRT_ColumnDef<TData>>;
     displayColumnDefOptions?: Partial<{
         [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
     }>;
@@ -722,7 +726,7 @@ declare type Virtualizer = {
     scrollToIndex: (index: number, options?: any | undefined) => void;
     measure: () => void;
 };
-declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
+declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 
 interface Props$6<TData extends Record<string, any> = {}> {
     cell: MRT_Cell<TData>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.40.9",
+  "version": "0.40.12",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -53,9 +53,9 @@
     "@babel/preset-react": "^7.18.6",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@faker-js/faker": "^7.4.0",
-    "@mui/icons-material": "^5.10.2",
-    "@mui/material": "^5.10.2",
+    "@faker-js/faker": "^7.5.0",
+    "@mui/icons-material": "^5.10.3",
+    "@mui/material": "^5.10.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.4.0",

package/src/MaterialReactTable.tsx

@@ -288,10 +288,14 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
     | ButtonProps
     | (({
         cell,
+        column,
+        row,
         table,
       }: {
-        table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
       }) => ButtonProps);
   muiTableBodyCellEditTextFieldProps?:
     | TextFieldProps
@@ -387,8 +391,9 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
 
 export type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<
   MRT_ColumnDef<TData>,
-  'id'
+  'id' | 'defaultDisplayColumn'
 > & {
+  defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
   id: string;
   _filterFn: MRT_FilterOption;
 };
@@ -491,6 +496,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
     defaultColumn?: Partial<MRT_ColumnDef<TData>>;
+    defaultDisplayColumn?: Partial<MRT_ColumnDef<TData>>;
     displayColumnDefOptions?: Partial<{
       [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
     }>;
@@ -894,6 +900,7 @@ export default <TData extends Record<string, any> = {}>({
   autoResetExpanded = false,
   columnResizeMode = 'onEnd',
   defaultColumn = { minSize: 40, maxSize: 1000, size: 180 },
+  defaultDisplayColumn,
   editingMode = 'modal',
   enableBottomToolbar = true,
   enableColumnActions = true,
@@ -939,6 +946,21 @@ export default <TData extends Record<string, any> = {}>({
     autoResetExpanded={autoResetExpanded}
     columnResizeMode={columnResizeMode}
     defaultColumn={defaultColumn}
+    defaultDisplayColumn={{
+      columnDefType: 'display',
+      enableClickToCopy: false,
+      enableColumnActions: false,
+      enableColumnDragging: false,
+      enableColumnFilter: false,
+      enableColumnOrdering: false,
+      enableEditing: false,
+      enableGlobalFilter: false,
+      enableGrouping: false,
+      enableHiding: false,
+      enableResizing: false,
+      enableSorting: false,
+      ...defaultDisplayColumn,
+    }}
     editingMode={editingMode}
     enableBottomToolbar={enableBottomToolbar}
     enableColumnActions={enableColumnActions}

package/src/buttons/MRT_CopyButton.tsx

@@ -37,6 +37,8 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
     columnDef.muiTableBodyCellCopyButtonProps instanceof Function
       ? columnDef.muiTableBodyCellCopyButtonProps({
           cell,
+          column,
+          row,
           table,
         })
       : columnDef.muiTableBodyCellCopyButtonProps;
@@ -52,7 +54,10 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
       enterDelay={1000}
       enterNextDelay={1000}
       placement="top"
-      title={copied ? localization.copiedToClipboard : localization.clickToCopy}
+      title={
+        buttonProps?.title ??
+        (copied ? localization.copiedToClipboard : localization.clickToCopy)
+      }
     >
       <Button
         onClick={(e) => handleCopy(e, cell.getValue())}
@@ -76,6 +81,7 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
             ? buttonProps.sx(theme)
             : (buttonProps?.sx as any)),
         })}
+        title={undefined}
       >
         {children}
       </Button>

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -32,7 +32,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
       arrow
       enterDelay={1000}
       enterNextDelay={1000}
-      title={localization.expandAll}
+      title={iconButtonProps?.title ?? localization.expandAll}
     >
       <span>
         <IconButton
@@ -48,6 +48,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
               ? iconButtonProps?.sx(theme)
               : (iconButtonProps?.sx as any)),
           })}
+          title={undefined}
         >
           <KeyboardDoubleArrowDownIcon
             style={{

package/src/buttons/MRT_ExpandButton.tsx

@@ -35,7 +35,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
       arrow
       enterDelay={1000}
       enterNextDelay={1000}
-      title={localization.expand}
+      title={iconButtonProps?.title ?? localization.expand}
     >
       <span>
         <IconButton
@@ -50,6 +50,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
               ? iconButtonProps.sx(theme)
               : (iconButtonProps?.sx as any)),
           })}
+          title={undefined}
         >
           <ExpandMoreIcon
             style={{

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -28,11 +28,12 @@ export const MRT_FullScreenToggleButton = <
   };
 
   return (
-    <Tooltip arrow title={localization.toggleFullScreen}>
+    <Tooltip arrow title={rest?.title ?? localization.toggleFullScreen}>
       <IconButton
         aria-label={localization.showHideFilters}
         onClick={handleToggleFullScreen}
         {...rest}
+        title={undefined}
       >
         {isFullScreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
       </IconButton>

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -28,7 +28,7 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
       enterDelay={1000}
       enterNextDelay={1000}
       placement="top"
-      title={localization.move}
+      title={iconButtonProps?.title ?? localization.move}
     >
       <IconButton
         disableRipple
@@ -58,6 +58,7 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
             ? iconButtonProps?.sx(theme)
             : (iconButtonProps?.sx as any)),
         })}
+        title={undefined}
       >
         <DragHandleIcon />
       </IconButton>

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -29,11 +29,12 @@ export const MRT_ShowHideColumnsButton = <
 
   return (
     <>
-      <Tooltip arrow title={localization.showHideColumns}>
+      <Tooltip arrow title={rest?.title ?? localization.showHideColumns}>
         <IconButton
           aria-label={localization.showHideColumns}
           onClick={handleClick}
           {...rest}
+          title={undefined}
         >
           <ViewColumnIcon />
         </IconButton>

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -34,11 +34,12 @@ export const MRT_ToggleDensePaddingButton = <
   };
 
   return (
-    <Tooltip arrow title={localization.toggleDensity}>
+    <Tooltip arrow title={rest?.title ?? localization.toggleDensity}>
       <IconButton
         aria-label={localization.toggleDensity}
         onClick={handleToggleDensePadding}
         {...rest}
+        title={undefined}
       >
         {density === 'compact' ? (
           <DensitySmallIcon />

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -28,11 +28,12 @@ export const MRT_ToggleFiltersButton = <
   };
 
   return (
-    <Tooltip arrow title={localization.showHideFilters}>
+    <Tooltip arrow title={rest?.title ?? localization.showHideFilters}>
       <IconButton
         aria-label={localization.showHideFilters}
         onClick={handleToggleShowFilters}
         {...rest}
+        title={undefined}
       >
         {showColumnFilters ? <FilterListOffIcon /> : <FilterListIcon />}
       </IconButton>

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -31,8 +31,8 @@ export const MRT_ToggleGlobalFilterButton = <
   };
 
   return (
-    <Tooltip arrow title={localization.showHideSearch}>
-      <IconButton onClick={handleToggleSearch} {...rest}>
+    <Tooltip arrow title={rest?.title ?? localization.showHideSearch}>
+      <IconButton onClick={handleToggleSearch} {...rest} title={undefined}>
         {showGlobalFilter ? <SearchOffIcon /> : <SearchIcon />}
       </IconButton>
     </Tooltip>

package/src/column.utils.ts

@@ -10,21 +10,6 @@ import {
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
 
-export const defaultDisplayColumnDefOptions = {
-  columnDefType: 'display',
-  enableClickToCopy: false,
-  enableColumnActions: false,
-  enableColumnDragging: false,
-  enableColumnFilter: false,
-  enableColumnOrdering: false,
-  enableEditing: false,
-  enableGlobalFilter: false,
-  enableGrouping: false,
-  enableHiding: false,
-  enableResizing: false,
-  enableSorting: false,
-} as Partial<MRT_ColumnDef>;
-
 export const getColumnId = <TData extends Record<string, any> = {}>(
   columnDef: MRT_ColumnDef<TData>,
 ): string =>
@@ -48,13 +33,20 @@ export const getAllLeafColumnDefs = <TData extends Record<string, any> = {}>(
   return lowestLevelColumns.filter((col) => !col.columns);
 };
 
-export const prepareColumns = <TData extends Record<string, any> = {}>(
-  columnDefs: MRT_ColumnDef<TData>[],
-  columnFilterFns: { [key: string]: MRT_FilterOption },
-  filterFns: typeof MRT_FilterFns & MaterialReactTableProps<TData>['filterFns'],
+export const prepareColumns = <TData extends Record<string, any> = {}>({
+  columnDefs,
+  columnFilterFns,
+  defaultDisplayColumn,
+  filterFns,
+  sortingFns,
+}: {
+  columnDefs: MRT_ColumnDef<TData>[];
+  columnFilterFns: { [key: string]: MRT_FilterOption };
+  defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
+  filterFns: typeof MRT_FilterFns & MaterialReactTableProps<TData>['filterFns'];
   sortingFns: typeof MRT_SortingFns &
-    MaterialReactTableProps<TData>['sortingFns'],
-): MRT_DefinedColumnDef<TData>[] =>
+    MaterialReactTableProps<TData>['sortingFns'];
+}): MRT_DefinedColumnDef<TData>[] =>
   columnDefs.map((columnDef) => {
     if (!columnDef.id) columnDef.id = getColumnId(columnDef);
     if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
@@ -65,12 +57,13 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
     if (!columnDef.columnDefType) columnDef.columnDefType = 'data';
     if (!!columnDef.columns?.length) {
       columnDef.columnDefType = 'group';
-      columnDef.columns = prepareColumns(
-        columnDef.columns,
+      columnDef.columns = prepareColumns({
+        columnDefs: columnDef.columns,
         columnFilterFns,
+        defaultDisplayColumn,
         filterFns,
         sortingFns,
-      );
+      });
     } else if (columnDef.columnDefType === 'data') {
       if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
         columnDef.filterFn =
@@ -84,7 +77,7 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
       }
     } else if (columnDef.columnDefType === 'display') {
       columnDef = {
-        ...(defaultDisplayColumnDefOptions as MRT_ColumnDef<TData>),
+        ...(defaultDisplayColumn as MRT_ColumnDef<TData>),
         ...columnDef,
       };
     }

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -55,7 +55,7 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
         enterDelay={1000}
         enterNextDelay={1000}
         placement="top"
-        title={localization.columnActions}
+        title={iconButtonProps?.title ?? localization.columnActions}
       >
         <IconButton
           aria-label={localization.columnActions}
@@ -75,6 +75,7 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
               ? iconButtonProps.sx(theme)
               : (iconButtonProps?.sx as any)),
           })}
+          title={undefined}
         >
           <MoreVertIcon />
         </IconButton>

package/src/inputs/MRT_FilterTextField.tsx

@@ -278,9 +278,24 @@ export const MRT_FilterTextField: FC<Props> = ({
                   <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
                 ) : (
                   <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
-                    {(selected as string[])?.map((value) => (
-                      <Chip key={value} label={value} />
-                    ))}
+                    {(selected as string[])?.map((value) => {
+                      const selectedValue = columnDef.filterSelectOptions?.find(
+                        (option) =>
+                          option instanceof Object
+                            ? option.value === value
+                            : option === value,
+                      );
+                      return (
+                        <Chip
+                          key={value}
+                          label={
+                            selectedValue instanceof Object
+                              ? selectedValue.text
+                              : selectedValue
+                          }
+                        />
+                      );
+                    })}
                   </Box>
                 )
             : undefined,

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -34,7 +34,10 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
       enterDelay={1000}
       enterNextDelay={1000}
       title={
-        selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
+        checkboxProps?.title ??
+        (selectAll
+          ? localization.toggleSelectAll
+          : localization.toggleSelectRow)
       }
     >
       <Checkbox
@@ -70,6 +73,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
             ? checkboxProps.sx(theme)
             : (checkboxProps?.sx as any)),
         })}
+        title={undefined}
       />
     </Tooltip>
   );

package/src/table/MRT_TableRoot.tsx

@@ -22,7 +22,6 @@ import {
   getAllLeafColumnDefs,
   getDefaultColumnOrderIds,
   getDefaultColumnFilterFn,
-  defaultDisplayColumnDefOptions,
   showExpandColumn,
   getColumnId,
 } from '../column.utils';
@@ -125,7 +124,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
           columnOrder.includes('mrt-row-drag') && {
             header: props.localization?.move,
             size: 60,
-            ...defaultDisplayColumnDefOptions,
+            ...props.defaultDisplayColumn,
             ...props.displayColumnDefOptions?.['mrt-row-drag'],
             id: 'mrt-row-drag',
           },
@@ -139,7 +138,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             ),
             header: props.localization?.actions,
             size: 70,
-            ...defaultDisplayColumnDefOptions,
+            ...props.defaultDisplayColumn,
             ...props.displayColumnDefOptions?.['mrt-row-actions'],
             id: 'mrt-row-actions',
           },
@@ -154,7 +153,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
                 ) : null,
               header: props.localization?.expand,
               size: 60,
-              ...defaultDisplayColumnDefOptions,
+              ...props.defaultDisplayColumn,
               ...props.displayColumnDefOptions?.['mrt-row-expand'],
               id: 'mrt-row-expand',
             },
@@ -168,7 +167,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
               ) : null,
             header: props.localization?.select,
             size: 60,
-            ...defaultDisplayColumnDefOptions,
+            ...props.defaultDisplayColumn,
             ...props.displayColumnDefOptions?.['mrt-row-select'],
             id: 'mrt-row-select',
           },
@@ -177,7 +176,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             Header: () => props.localization?.rowNumber,
             header: props.localization?.rowNumbers,
             size: 60,
-            ...defaultDisplayColumnDefOptions,
+            ...props.defaultDisplayColumn,
             ...props.displayColumnDefOptions?.['mrt-row-numbers'],
             id: 'mrt-row-numbers',
           },
@@ -209,13 +208,19 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
 
   const columnDefs = useMemo(
     () =>
-      prepareColumns(
-        [...displayColumns, ...props.columns],
-        columnFilterFns,
-        props.filterFns as any,
-        props.sortingFns as any,
-      ),
-    [columnFilterFns, displayColumns, props.columns],
+      prepareColumns({
+        columnDefs: [...displayColumns, ...props.columns],
+        columnFilterFns: props.state?.columnFilterFns ?? columnFilterFns,
+        defaultDisplayColumn: props.defaultDisplayColumn ?? {},
+        filterFns: props.filterFns as any,
+        sortingFns: props.sortingFns as any,
+      }),
+    [
+      columnFilterFns,
+      displayColumns,
+      props.columns,
+      props.state?.columnFilterFns,
+    ],
   );
 
   const data: TData[] = useMemo(