material-react-table 0.40.7 → 0.40.10

package/dist/index.d.ts

@@ -322,7 +322,7 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
      *
      * @example accessorFn: (row) => row.username
      */
-    accessorFn?: (row: TData) => any;
+    accessorFn?: (originalRow: TData) => any;
     /**
      * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
      * Specify which key in the row this column should use to access the correct data.
@@ -352,7 +352,7 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
     filterFn?: MRT_FilterFn<TData>;
     filterSelectOptions?: (string | {
         text: string;
-        value: string;
+        value: any;
     })[];
     filterVariant?: 'text' | 'select' | 'multi-select' | 'range';
     /**
@@ -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>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.40.7",
+  "version": "0.40.10",
   "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.",

package/src/MaterialReactTable.tsx

@@ -236,7 +236,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
    *
    * @example accessorFn: (row) => row.username
    */
-  accessorFn?: (row: TData) => any;
+  accessorFn?: (originalRow: TData) => any;
   /**
    * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
    * Specify which key in the row this column should use to access the correct data.
@@ -264,7 +264,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   enableColumnOrdering?: boolean;
   enableEditing?: boolean;
   filterFn?: MRT_FilterFn<TData>;
-  filterSelectOptions?: (string | { text: string; value: string })[];
+  filterSelectOptions?: (string | { text: string; value: any })[];
   filterVariant?: 'text' | 'select' | 'multi-select' | 'range';
   /**
    * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
@@ -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

package/src/body/MRT_TableBody.tsx

@@ -51,7 +51,8 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
         rankGlobalFuzzy(a, b),
       );
       if (enablePagination) {
-        return rankedRows.slice(pagination.pageIndex, pagination.pageSize);
+        const start = pagination.pageIndex * pagination.pageSize;
+        return rankedRows.slice(start, start + pagination.pageSize);
       }
       return rankedRows;
     }
@@ -65,6 +66,8 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
       ? getPrePaginationRowModel().rows
       : getRowModel().rows,
     globalFilter,
+    pagination.pageIndex,
+    pagination.pageSize,
   ]);
 
   const virtualizer = enableRowVirtualization

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/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>
   );