material-react-table 0.40.7 → 0.40.10

package/README.md

@@ -1,5 +1,9 @@
 # Material React Table
 
+__Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
+
+_Quickly Create React Data Tables with Material Design_
+
 <a href="https://npmjs.com/package/material-react-table" target="_blank">
   <img alt="" src="https://badgen.net/npm/v/material-react-table?color=blue" />
 </a>
@@ -19,8 +23,6 @@
   <img alt="" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" />
 </a>
 
----
-
 ## About
 
 > This project is still in alpha, but is expected to enter beta by August 2022, and a stable 1.0 release shortly thereafter.
@@ -36,12 +38,10 @@ View the [Docs Website](https://www.material-react-table.com/)
 
 See all [Props and Options](https://www.material-react-table.com/docs/api)
 
----
-
 ## Quick Examples
 
  - [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
- - [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features)
+ - [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
  - [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
  - [Aggregation/Grouping](https://www.material-react-table.com/docs/examples/aggregation-and-grouping/) (Aggregation features such as Sum, Average, Count, etc.)
  - [Data Export Table](https://www.material-react-table.com/docs/examples/data-export/) (Export to CSV, Excel, etc.)
@@ -53,8 +53,6 @@ See all [Props and Options](https://www.material-react-table.com/docs/api)
 
 View additional [storybook examples](https://www.material-react-table.dev/)
 
----
-
 ## Features (All Features work and are MVP, but are still being polished)
 
 _All features can easily be enabled/disabled_
@@ -91,8 +89,6 @@ _All features can easily be enabled/disabled_
 - [x] Tree Data / Expanding Sub-rows
 - [x] Virtualization (react-virtual)
 
----
-
 ## Getting Started
 
 ### Installation
@@ -113,13 +109,11 @@ npm install material-react-table
 
 > _`@tanstack/react-table`, `@tanstack/react-virtual`, and `@tanstack/match-sorter-utils`_ are internal dependencies, so you don't need to install them yourself.
 
----
-
 ### Usage
 
 > Read the full usage docs [here](https://www.material-react-table.com/docs/getting-started/usage/)
 
-```tsx
+```jsx
 import React, { useMemo, useState, useEffect } from 'react';
 import MaterialReactTable from 'material-react-table';
 
@@ -178,8 +172,6 @@ export default function App() {
 
 _Open in [Code Sandbox](https://codesandbox.io/s/simple-material-react-table-example-t5c3ji)_
 
----
-
 ## Contributors
 
 <a href="https://github.com/kevinvandy/material-react-table/graphs/contributors">

package/dist/cjs/MaterialReactTable.d.ts

@@ -130,7 +130,7 @@ export declare 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.
@@ -160,7 +160,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
     filterFn?: MRT_FilterFn<TData>;
     filterSelectOptions?: (string | {
         text: string;
-        value: string;
+        value: any;
     })[];
     filterVariant?: 'text' | 'select' | 'multi-select' | 'range';
     /**
@@ -181,9 +181,11 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
      * @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/dist/cjs/index.js

@@ -256,16 +256,17 @@ const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFil
     Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
 
 const MRT_ExpandAllButton = ({ table }) => {
+    var _a;
     const { getIsAllRowsExpanded, getIsSomeRowsExpanded, getCanSomeRowsExpand, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
     const { density } = getState();
     const iconButtonProps = muiExpandAllButtonProps instanceof Function
         ? muiExpandAllButtonProps({ table })
         : muiExpandAllButtonProps;
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.expandAll },
+    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.expandAll },
         React__default["default"].createElement("span", null,
             React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: !getCanSomeRowsExpand() && !renderDetailPanel, onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
+                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
                 React__default["default"].createElement(KeyboardDoubleArrowDownIcon, { style: {
                         transform: `rotate(${getIsAllRowsExpanded()
                             ? -180
@@ -277,6 +278,7 @@ const MRT_ExpandAllButton = ({ table }) => {
 };
 
 const MRT_ExpandButton = ({ row, table }) => {
+    var _a;
     const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = table;
     const { density } = getState();
     const iconButtonProps = muiExpandButtonProps instanceof Function
@@ -288,11 +290,11 @@ const MRT_ExpandButton = ({ row, table }) => {
         row.toggleExpanded();
         (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
     };
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.expand },
+    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.expand },
         React__default["default"].createElement("span", null,
             React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.expand, disabled: !row.getCanExpand() && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
+                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
                 React__default["default"].createElement(ExpandMoreIcon, { style: {
                         transform: `rotate(${!row.getCanExpand() && !renderDetailPanel
                             ? -90
@@ -472,8 +474,9 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
 };
 
 const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
+    var _a;
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: localization.move },
+    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move },
         React__default["default"].createElement(material.IconButton, Object.assign({ disableRipple: true, draggable: "true", onDragStart: onDragStart, onDragEnd: onDragEnd, size: "small" }, iconButtonProps, { onClick: (e) => {
                 var _a;
                 e.stopPropagation();
@@ -485,7 +488,7 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
                     cursor: 'grabbing',
                 } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                 ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
-                : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
+                : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
             React__default["default"].createElement(DragHandleIcon, null))));
 };
 
@@ -981,6 +984,7 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
 };
 
 const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
+    var _a;
     const { getState, options: { localization, muiSelectCheckboxProps, muiSelectAllCheckboxProps, selectAllMode, }, } = table;
     const { density } = getState();
     const checkboxProps = !row
@@ -990,7 +994,9 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
         : muiSelectCheckboxProps instanceof Function
             ? muiSelectCheckboxProps({ row, table })
             : muiSelectCheckboxProps;
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow },
+    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
+            ? localization.toggleSelectAll
+            : localization.toggleSelectRow) },
         React__default["default"].createElement(material.Checkbox, Object.assign({ checked: selectAll ? table.getIsAllRowsSelected() : row === null || row === void 0 ? void 0 : row.getIsSelected(), indeterminate: selectAll ? table.getIsSomeRowsSelected() : row === null || row === void 0 ? void 0 : row.getIsSomeSelected(), inputProps: {
                 'aria-label': selectAll
                     ? localization.toggleSelectAll
@@ -1005,7 +1011,7 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
                 (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
             }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
                 ? checkboxProps.sx(theme)
-                : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) }))));
+                : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))), title: undefined }))));
 };
 
 const MRT_GlobalFilterTextField = ({ table, }) => {
@@ -1123,17 +1129,19 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
 };
 
 const MRT_FullScreenToggleButton = (_a) => {
+    var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { getState, options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization, }, setIsFullScreen, } = table;
     const { isFullScreen } = getState();
     const handleToggleFullScreen = () => {
         setIsFullScreen(!isFullScreen);
     };
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.toggleFullScreen },
-        React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest), isFullScreen ? React__default["default"].createElement(FullscreenExitIcon, null) : React__default["default"].createElement(FullscreenIcon, null))));
+    return (React__default["default"].createElement(material.Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen },
+        React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined }), isFullScreen ? React__default["default"].createElement(FullscreenExitIcon, null) : React__default["default"].createElement(FullscreenIcon, null))));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
+    var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { options: { icons: { ViewColumnIcon }, localization, }, } = table;
     const [anchorEl, setAnchorEl] = React.useState(null);
@@ -1141,13 +1149,14 @@ const MRT_ShowHideColumnsButton = (_a) => {
         setAnchorEl(event.currentTarget);
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.showHideColumns },
-            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest),
+        React__default["default"].createElement(material.Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns },
+            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined }),
                 React__default["default"].createElement(ViewColumnIcon, null))),
         React__default["default"].createElement(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table })));
 };
 
 const MRT_ToggleDensePaddingButton = (_a) => {
+    var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { getState, options: { icons: { DensityLargeIcon, DensityMediumIcon, DensitySmallIcon }, localization, }, setDensity, } = table;
     const { density } = getState();
@@ -1159,22 +1168,24 @@ const MRT_ToggleDensePaddingButton = (_a) => {
                 : 'comfortable';
         setDensity(nextDensity);
     };
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.toggleDensity },
-        React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest), density === 'compact' ? (React__default["default"].createElement(DensitySmallIcon, null)) : density === 'comfortable' ? (React__default["default"].createElement(DensityMediumIcon, null)) : (React__default["default"].createElement(DensityLargeIcon, null)))));
+    return (React__default["default"].createElement(material.Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity },
+        React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined }), density === 'compact' ? (React__default["default"].createElement(DensitySmallIcon, null)) : density === 'comfortable' ? (React__default["default"].createElement(DensityMediumIcon, null)) : (React__default["default"].createElement(DensityLargeIcon, null)))));
 };
 
 const MRT_ToggleFiltersButton = (_a) => {
+    var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { getState, options: { icons: { FilterListIcon, FilterListOffIcon }, localization, }, setShowFilters, } = table;
     const { showColumnFilters } = getState();
     const handleToggleShowFilters = () => {
         setShowFilters(!showColumnFilters);
     };
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.showHideFilters },
-        React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest), showColumnFilters ? React__default["default"].createElement(FilterListOffIcon, null) : React__default["default"].createElement(FilterListIcon, null))));
+    return (React__default["default"].createElement(material.Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters },
+        React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined }), showColumnFilters ? React__default["default"].createElement(FilterListOffIcon, null) : React__default["default"].createElement(FilterListIcon, null))));
 };
 
 const MRT_ToggleGlobalFilterButton = (_a) => {
+    var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { getState, options: { icons: { SearchIcon, SearchOffIcon }, localization, }, refs: { searchInputRef }, setShowGlobalFilter, } = table;
     const { showGlobalFilter } = getState();
@@ -1182,8 +1193,8 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
         setShowGlobalFilter(!showGlobalFilter);
         queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.showHideSearch },
-        React__default["default"].createElement(material.IconButton, Object.assign({ onClick: handleToggleSearch }, rest), showGlobalFilter ? React__default["default"].createElement(SearchOffIcon, null) : React__default["default"].createElement(SearchIcon, null))));
+    return (React__default["default"].createElement(material.Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch },
+        React__default["default"].createElement(material.IconButton, Object.assign({ onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React__default["default"].createElement(SearchOffIcon, null) : React__default["default"].createElement(SearchIcon, null))));
 };
 
 const MRT_ToolbarInternalButtons = ({ table }) => {
@@ -1315,6 +1326,7 @@ const MRT_BottomToolbar = ({ table }) => {
 };
 
 const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
+    var _a;
     const { options: { icons: { MoreVertIcon }, localization, muiTableHeadCellColumnActionsButtonProps, }, } = table;
     const { column } = header;
     const { columnDef } = column;
@@ -1335,12 +1347,12 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
         : columnDef.muiTableHeadCellColumnActionsButtonProps;
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: localization.columnActions },
+        React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
             React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', mt: '-0.2rem', opacity: 0.5, transition: 'opacity 0.2s', width: '2rem', '&:hover': {
                         opacity: 1,
                     } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
+                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
                 React__default["default"].createElement(MoreVertIcon, null))),
         React__default["default"].createElement(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table })));
 };
@@ -1484,7 +1496,15 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 displayEmpty: true,
                 multiple: isMultiSelectFilter,
                 renderValue: isMultiSelectFilter
-                    ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (React__default["default"].createElement(material.Box, { sx: { opacity: 0.5 } }, filterPlaceholder)) : (React__default["default"].createElement(material.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' } }, selected === null || selected === void 0 ? void 0 : selected.map((value) => (React__default["default"].createElement(material.Chip, { key: value, label: value })))))
+                    ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (React__default["default"].createElement(material.Box, { sx: { opacity: 0.5 } }, filterPlaceholder)) : (React__default["default"].createElement(material.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' } }, selected === null || selected === void 0 ? void 0 : selected.map((value) => {
+                        var _a;
+                        const selectedValue = (_a = columnDef.filterSelectOptions) === null || _a === void 0 ? void 0 : _a.find((option) => option instanceof Object
+                            ? option.value === value
+                            : option === value);
+                        return (React__default["default"].createElement(material.Chip, { key: value, label: selectedValue instanceof Object
+                                ? selectedValue.text
+                                : selectedValue }));
+                    })))
                     : undefined,
             } }, textFieldProps, { inputRef: (inputRef) => {
                 filterInputRefs.current[`${column.id}-${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : 0}`] =
@@ -1875,6 +1895,7 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
 };
 
 const MRT_CopyButton = ({ cell, children, table, }) => {
+    var _a;
     const { options: { localization, muiTableBodyCellCopyButtonProps }, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
@@ -1891,14 +1912,16 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
     const mcTableBodyCellCopyButtonProps = columnDef.muiTableBodyCellCopyButtonProps instanceof Function
         ? columnDef.muiTableBodyCellCopyButtonProps({
             cell,
+            column,
+            row,
             table,
         })
         : columnDef.muiTableBodyCellCopyButtonProps;
     const buttonProps = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
-    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: copied ? localization.copiedToClipboard : localization.clickToCopy },
+    return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy) },
         React__default["default"].createElement(material.Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
                 ? buttonProps.sx(theme)
-                : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))) }), children)));
+                : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))), title: undefined }), children)));
 };
 
 const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
@@ -2162,7 +2185,8 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
             !Object.values(sorting).some(Boolean)) {
             const rankedRows = getPrePaginationRowModel().rows.sort((a, b) => 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;
         }
@@ -2175,6 +2199,8 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
             ? getPrePaginationRowModel().rows
             : getRowModel().rows,
         globalFilter,
+        pagination.pageIndex,
+        pagination.pageSize,
     ]);
     const virtualizer = enableRowVirtualization
         ? reactVirtual.useVirtual(Object.assign({ size: rows.length, parentRef: tableContainerRef, overscan: 15 }, vProps))