material-react-table 3.0.0-beta.2 → 3.0.0

package/dist/index.d.ts

@@ -818,6 +818,7 @@ interface MRT_TableOptions<TData extends MRT_RowData> extends Omit<Partial<Table
     globalFilterFn?: MRT_FilterOption;
     globalFilterModeOptions?: MRT_FilterOption[] | null;
     icons?: Partial<MRT_Icons>;
+    id?: string;
     initialState?: Partial<MRT_TableState<TData>>;
     /**
      * Changes which kind of CSS layout is used to render the table. `semantic` uses default semantic HTML elements, while `grid` adds CSS grid and flexbox styles
@@ -1018,6 +1019,9 @@ interface MRT_TableOptions<TData extends MRT_RowData> extends Omit<Partial<Table
     muiTableContainerProps?: ((props: {
         table: MRT_TableInstance<TData>;
     }) => TableContainerProps) | TableContainerProps;
+    /**
+     * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+     */
     muiTableFooterCellProps?: ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { flexRender as flexRender$1, createRow as createRow$1, sortingFns, aggregationFns, filterFns, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
-import { useMemo, useState, useReducer, useRef, useEffect, useCallback, memo, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import { useMemo, useState, useId, useReducer, useRef, useEffect, useCallback, memo, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import IconButton from '@mui/material/IconButton';
@@ -50,7 +50,7 @@ import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import Paper from '@mui/material/Paper';
-import { useTheme as useTheme$1 } from '@mui/material';
+import FocusTrap from '@mui/material/Unstable_TrapFocus/FocusTrap';
 import TableContainer from '@mui/material/TableContainer';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -1161,7 +1161,7 @@ const MRT_RowPinButton = (_a) => {
         event.stopPropagation();
         row.pin(isPinned ? false : pinningPosition);
     };
-    return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { open: tooltipOpened, title: isPinned ? localization.unpin : localization.pin, children: jsx(IconButton, Object.assign({ "aria-label": localization.pin, onClick: handleTogglePin, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '24px', width: '24px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: isPinned ? (jsx(CloseIcon, {})) : (jsx(PushPinIcon, { fontSize: "small", style: {
+    return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { open: tooltipOpened, title: isPinned ? localization.unpin : localization.pin, children: jsx(IconButton, Object.assign({ "aria-label": localization.pin, onBlur: () => setTooltipOpened(false), onClick: handleTogglePin, onFocus: () => setTooltipOpened(true), onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '24px', width: '24px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: isPinned ? (jsx(CloseIcon, {})) : (jsx(PushPinIcon, { fontSize: "small", style: {
                     transform: `rotate(${rowPinningDisplayMode === 'sticky'
                         ? 135
                         : pinningPosition === 'top'
@@ -1412,7 +1412,7 @@ const MRT_DefaultDisplayColumn = {
 };
 const useMRT_TableOptions = (_a) => {
     var _b;
-    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableKeyboardShortcuts = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, mrtTheme, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBatchRowSelection", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableKeyboardShortcuts", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "mrtTheme", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
+    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableKeyboardShortcuts = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, id = useId(), layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, mrtTheme, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBatchRowSelection", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableKeyboardShortcuts", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "id", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "mrtTheme", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
     const theme = useTheme();
     icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
@@ -1497,6 +1497,7 @@ const useMRT_TableOptions = (_a) => {
             : undefined, getGroupedRowModel: enableGrouping && !manualGrouping ? getGroupedRowModel() : undefined, getPaginationRowModel: enablePagination && !manualPagination
             ? getPaginationRowModel()
             : undefined, getSortedRowModel: enableSorting && !manualSorting ? getSortedRowModel() : undefined, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows, icons,
+        id,
         layoutMode,
         localization,
         manualFiltering,
@@ -3750,7 +3751,7 @@ const MRT_Table = (_a) => {
 const MRT_TableLoadingOverlay = (_a) => {
     var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
-    const { options: { localization, mrtTheme: { baseBackgroundColor }, muiCircularProgressProps, }, } = table;
+    const { options: { id, localization, mrtTheme: { baseBackgroundColor }, muiCircularProgressProps, }, } = table;
     const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
     return (jsx(Box, { sx: {
             alignItems: 'center',
@@ -3765,7 +3766,7 @@ const MRT_TableLoadingOverlay = (_a) => {
             top: 0,
             width: '100%',
             zIndex: 3,
-        }, children: (_b = circularProgressProps === null || circularProgressProps === void 0 ? void 0 : circularProgressProps.Component) !== null && _b !== void 0 ? _b : (jsx(CircularProgress, Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps))) }));
+        }, children: (_b = circularProgressProps === null || circularProgressProps === void 0 ? void 0 : circularProgressProps.Component) !== null && _b !== void 0 ? _b : (jsx(CircularProgress, Object.assign({ "aria-label": localization.noRecordsToDisplay, id: `mrt-progress-${id}` }, circularProgressProps))) }));
 };
 
 const MRT_CellActionMenu = (_a) => {
@@ -3911,8 +3912,8 @@ const MRT_TablePagination = (_a) => {
     var { position = 'bottom', table } = _a, rest = __rest(_a, ["position", "table"]);
     const theme = useTheme();
     const isMobile = useMediaQuery('(max-width: 720px)');
-    const { getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiPaginationProps, paginationDisplayMode, }, } = table;
-    const { pagination: { pageIndex = 0, pageSize = 10 }, showGlobalFilter, } = getState();
+    const { getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, id, localization, muiPaginationProps, paginationDisplayMode, }, } = table;
+    const { pagination: { pageIndex = 0, pageSize = 10 }, } = getState();
     const paginationProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiPaginationProps, {
         table,
     })), rest);
@@ -3935,18 +3936,16 @@ const MRT_TablePagination = (_a) => {
             gap: '8px',
             justifyContent: { md: 'space-between', sm: 'center' },
             justifySelf: 'flex-end',
-            mt: position === 'top' &&
-                enableToolbarInternalActions &&
-                !showGlobalFilter
+            mt: position === 'top' && enableToolbarInternalActions
                 ? '3rem'
                 : undefined,
             position: 'relative',
             px: '8px',
             py: '12px',
             zIndex: 2,
-        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, Object.assign({ MenuProps: { disableScrollLock: true }, disableUnderline: true, disabled: disabled, inputProps: {
+        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: `mrt-rows-per-page-${id}`, sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, Object.assign({ MenuProps: { disableScrollLock: true }, disableUnderline: true, disabled: disabled, inputProps: {
                             'aria-label': localization.rowsPerPage,
-                            id: 'mrt-rows-per-page',
+                            id: `mrt-rows-per-page-${id}`,
                         }, label: localization.rowsPerPage, onChange: (event) => table.setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
                             var _a;
                             const value = typeof option !== 'number' ? option.value : option;
@@ -4186,7 +4185,7 @@ const MRT_ToggleFullScreenButton = (_a) => {
         setTooltipOpened(false);
         setIsFullScreen(!isFullScreen);
     };
-    return (jsx(Tooltip, { open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsx(IconButton, Object.assign({ "aria-label": localization.toggleFullScreen, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
+    return (jsx(Tooltip, { open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsx(IconButton, Object.assign({ "aria-label": localization.toggleFullScreen, onBlur: () => setTooltipOpened(false), onClick: handleToggleFullScreen, onFocus: () => setTooltipOpened(true), onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
 };
 
 const MRT_ToggleGlobalFilterButton = (_a) => {
@@ -4314,31 +4313,31 @@ const MRT_TablePaper = (_a) => {
     const { getState, options: { enableBottomToolbar, enableTopToolbar, mrtTheme: { baseBackgroundColor }, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
     const paperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
-    const theme = useTheme$1();
-    return (jsxs(Paper, Object.assign({ elevation: 2 }, paperProps, { ref: (ref) => {
-            tablePaperRef.current = ref;
-            if (paperProps === null || paperProps === void 0 ? void 0 : paperProps.ref) {
-                //@ts-ignore
-                paperProps.ref.current = ref;
-            }
-        }, style: Object.assign(Object.assign({}, (isFullScreen
-            ? {
-                bottom: 0,
-                height: '100dvh',
-                left: 0,
-                margin: 0,
-                maxHeight: '100dvh',
-                maxWidth: '100dvw',
-                padding: 0,
-                position: 'fixed',
-                right: 0,
-                top: 0,
-                width: '100dvw',
-                zIndex: theme.zIndex.modal,
-            }
-            : {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx, theme))), children: [enableTopToolbar &&
-                ((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
-                ((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsx(MRT_BottomToolbar, { table: table })))] })));
+    const theme = useTheme();
+    return (jsx(FocusTrap, { disableEnforceFocus: true, open: isFullScreen, children: jsxs(Paper, Object.assign({ elevation: 2, onKeyDown: (e) => e.key === 'Escape' && table.setIsFullScreen(false) }, paperProps, { ref: (ref) => {
+                tablePaperRef.current = ref;
+                if (paperProps === null || paperProps === void 0 ? void 0 : paperProps.ref) {
+                    //@ts-ignore
+                    paperProps.ref.current = ref;
+                }
+            }, style: Object.assign(Object.assign({}, (isFullScreen
+                ? {
+                    bottom: 0,
+                    height: '100dvh',
+                    left: 0,
+                    margin: 0,
+                    maxHeight: '100dvh',
+                    maxWidth: '100dvw',
+                    padding: 0,
+                    position: 'fixed',
+                    right: 0,
+                    top: 0,
+                    width: '100dvw',
+                    zIndex: theme.zIndex.modal,
+                }
+                : {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx, theme))), children: [enableTopToolbar &&
+                    ((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
+                    ((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsx(MRT_BottomToolbar, { table: table })))] })) }));
 };
 
 const isTableInstanceProp = (props) => props.table !== undefined;