material-react-table 2.0.0-alpha.3 → 2.0.0-alpha.4

package/dist/cjs/types/icons.d.ts

@@ -2,6 +2,8 @@ export interface MRT_Icons {
     ArrowDownwardIcon: any;
     ArrowRightIcon: any;
     CancelIcon: any;
+    ChevronLefIcon: any;
+    ChevronRightIcon: any;
     ClearAllIcon: any;
     CloseIcon: any;
     DensityLargeIcon: any;
@@ -14,9 +16,11 @@ export interface MRT_Icons {
     FilterAltIcon: any;
     FilterListIcon: any;
     FilterListOffIcon: any;
+    FirstPageIcon?: any;
     FullscreenExitIcon: any;
     FullscreenIcon: any;
     KeyboardDoubleArrowDownIcon: any;
+    LastPageIcon?: any;
     MoreHorizIcon: any;
     MoreVertIcon: any;
     PushPinIcon: any;

package/dist/cjs/types/toolbar/MRT_TablePagination.d.ts

@@ -1,7 +1,7 @@
 import { type MRT_TableInstance } from '../types';
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends Record<string, any> = {}> {
     position?: 'bottom' | 'top';
     table: MRT_TableInstance<TData>;
 }
-export declare const MRT_TablePagination: <TData extends Record<string, any>>({ position, table, }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const MRT_TablePagination: <TData extends Record<string, any> = {}>({ position, table, }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/types.d.ts

@@ -1,14 +1,15 @@
 import { type Dispatch, type MutableRefObject, type ReactNode, type RefObject, type SetStateAction } from 'react';
 import { type AggregationFn, type Cell, type Column, type ColumnDef, type ColumnFiltersState, type ColumnOrderState, type ColumnPinningState, type ColumnSizingInfoState, type ColumnSizingState, type DeepKeys, type ExpandedState, type FilterFn, type GroupingState, type Header, type HeaderGroup, type OnChangeFn, type PaginationState, type Row, type RowSelectionState, type SortingFn, type SortingState, type Table, type TableOptions, type TableState, type Updater, type VisibilityState } from '@tanstack/react-table';
 import { type VirtualItem, type Virtualizer, type VirtualizerOptions } from '@tanstack/react-virtual';
-import { type AutocompleteProps } from '@mui/material';
 import { type AlertProps } from '@mui/material/Alert';
+import { type AutocompleteProps } from '@mui/material/Autocomplete';
 import { type ButtonProps } from '@mui/material/Button';
 import { type CheckboxProps } from '@mui/material/Checkbox';
 import { type ChipProps } from '@mui/material/Chip';
 import { type DialogProps } from '@mui/material/Dialog';
 import { type IconButtonProps } from '@mui/material/IconButton';
 import { type LinearProgressProps } from '@mui/material/LinearProgress';
+import { type PaginationProps } from '@mui/material/Pagination';
 import { type PaperProps } from '@mui/material/Paper';
 import { type RadioProps } from '@mui/material/Radio';
 import { type SkeletonProps } from '@mui/material/Skeleton';
@@ -19,7 +20,6 @@ import { type TableCellProps } from '@mui/material/TableCell';
 import { type TableContainerProps } from '@mui/material/TableContainer';
 import { type TableFooterProps } from '@mui/material/TableFooter';
 import { type TableHeadProps } from '@mui/material/TableHead';
-import { type TablePaginationProps } from '@mui/material/TablePagination';
 import { type TableRowProps } from '@mui/material/TableRow';
 import { type TextFieldProps } from '@mui/material/TextField';
 import { type ToolbarProps } from '@mui/material/Toolbar';
@@ -675,7 +675,13 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
     }) => TableRowProps) | TableRowProps;
     muiTablePaginationProps?: ((props: {
         table: MRT_TableInstance<TData>;
-    }) => Partial<Omit<TablePaginationProps, 'rowsPerPage'>>) | Partial<Omit<TablePaginationProps, 'rowsPerPage'>>;
+    }) => Partial<PaginationProps & {
+        rowsPerPageOptions?: number[];
+        showRowsPerPage?: boolean;
+    }>) | Partial<PaginationProps & {
+        rowsPerPageOptions?: number[];
+        showRowsPerPage?: boolean;
+    }>;
     muiTablePaperProps?: ((props: {
         table: MRT_TableInstance<TData>;
     }) => PaperProps) | PaperProps;

package/dist/esm/material-react-table.esm.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import Paper from '@mui/material/Paper';
-import { useState, memo, useEffect, useMemo, useRef, useCallback, useLayoutEffect, Fragment as Fragment$1 } from 'react';
+import { useState, memo, useEffect, useMemo, useRef, useCallback, useLayoutEffect, Fragment as Fragment$1, useReducer } from 'react';
 import TableContainer from '@mui/material/TableContainer';
 import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
@@ -47,7 +47,10 @@ import CircularProgress from '@mui/material/CircularProgress';
 import Toolbar from '@mui/material/Toolbar';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import LinearProgress from '@mui/material/LinearProgress';
-import TablePagination from '@mui/material/TablePagination';
+import InputLabel from '@mui/material/InputLabel';
+import Pagination from '@mui/material/Pagination';
+import PaginationItem from '@mui/material/PaginationItem';
+import Select from '@mui/material/Select';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import Fade from '@mui/material/Fade';
@@ -56,6 +59,8 @@ import Radio from '@mui/material/Radio';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
+import ChevronLefIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
 import DensityLargeIcon from '@mui/icons-material/DensityLarge';
@@ -68,9 +73,11 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import LastPageIcon from '@mui/icons-material/LastPage';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import PushPinIcon from '@mui/icons-material/PushPin';
@@ -2230,41 +2237,40 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
         }, unmountOnExit: true, children: jsx(LinearProgress, Object.assign({ "aria-busy": "true", "aria-label": "Loading", sx: { position: 'relative' } }, linearProgressProps)) }));
 };
 
+const defaultPageSizeOptions = [5, 10, 15, 20, 25, 30, 50, 100];
 const MRT_TablePagination = ({ position = 'bottom', table, }) => {
-    const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, localization, muiTablePaginationProps, rowCount, }, setPageIndex, setPageSize, } = table;
+    const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, icons: { ChevronLefIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiTablePaginationProps, paginationDisplayMode, rowCount, }, setPageIndex, setPageSize, } = table;
     const { pagination: { pageIndex = 0, pageSize = 10 }, showGlobalFilter, } = getState();
-    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
-    const showFirstLastPageButtons = totalRowCount / pageSize > 2;
-    const tablePaginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
+    const paginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
         table,
     });
-    const handleChangeRowsPerPage = (event) => {
-        setPageSize(+event.target.value);
-    };
-    return (jsx(TablePagination, Object.assign({ component: "div", count: totalRowCount, getItemAriaLabel: (type) => type === 'first'
-            ? localization.goToFirstPage
-            : type === 'last'
-                ? localization.goToLastPage
-                : type === 'next'
-                    ? localization.goToNextPage
-                    : localization.goToPreviousPage, labelDisplayedRows: ({ count, from, to }) => `${from}-${to} ${localization.of} ${count}`, labelRowsPerPage: localization.rowsPerPage, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: Math.max(Math.min(pageIndex, Math.ceil(totalRowCount / pageSize) - 1), 0), rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { SelectProps: Object.assign({ MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } }, sx: { m: '0 1rem 0 1ch' } }, tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.SelectProps), sx: (theme) => (Object.assign({ '& . MuiTablePagination-select': {
-                m: '0 1px',
-            }, '& .MuiTablePagination-actions': {
-                m: '0 1px',
-            }, '& .MuiTablePagination-displayedRows': {
-                m: '0 1px',
-            }, '& .MuiTablePagination-selectLabel': {
-                m: '0 -1px',
-            }, '& .MuiTablePagination-toolbar': {
-                alignItems: 'center',
-                display: 'flex',
-            }, '&. MuiInputBase-root': {
-                m: '0 1px',
-            }, mt: position === 'top' &&
+    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
+    const numberOfPages = Math.ceil(totalRowCount / pageSize);
+    const showFirstLastPageButtons = numberOfPages > 2;
+    const showFirstButton = showFirstLastPageButtons && (paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.showFirstButton) !== false;
+    const showLastButton = showFirstLastPageButtons && (paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.showLastButton) !== false;
+    const firstRowIndex = pageIndex * pageSize;
+    const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
+    return (jsxs(Box, { sx: {
+            alignItems: 'center',
+            display: 'flex',
+            gap: '8px',
+            justifyContent: 'space-between',
+            mt: position === 'top' &&
                 enableToolbarInternalActions &&
                 !showGlobalFilter
-                ? '3.5rem'
-                : undefined, position: 'relative', zIndex: 2 }, parseFromValuesOrFunc(tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx, theme))) })));
+                ? '3rem'
+                : undefined,
+            position: 'relative',
+            px: '4px',
+            py: '12px',
+            zIndex: 2,
+        }, children: [(paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.showRowsPerPage) !== false && (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, { id: "mrt-rows-per-page", label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { '&::before': { border: 'none' }, mb: 0 }, value: pageSize, variant: "standard", children: defaultPageSizeOptions.map((value) => (jsx(MenuItem, { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
+                        first: FirstPageIcon,
+                        last: LastPageIcon,
+                        next: ChevronRightIcon,
+                        previous: ChevronLefIcon,
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, paginationProps))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { mb: "0", mx: "8px", variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) })), jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLefIcon, {}) }), jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }), showLastButton && (jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }))] })] })) : null] }));
 };
 
 const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
@@ -2912,8 +2918,9 @@ const useMRT_DisplayColumns = ({ columnOrder, creatingRow, grouping, tableOption
 };
 
 const useMRT_Effects = (table) => {
-    const { getState, options: { enablePagination, rowCount }, } = table;
-    const { globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
+    const { getIsSomeRowsPinned, getState, options: { enablePagination, enableRowPinning, rowCount }, } = table;
+    const { density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
+    const rerender = useReducer(() => ({}), {})[1];
     const isMounted = useRef(false);
     const initialBodyHeight = useRef();
     const previousTop = useRef();
@@ -2969,6 +2976,13 @@ const useMRT_Effects = (table) => {
             table.setSorting(() => appliedSort.current || []);
         }
     }, [globalFilter]);
+    useEffect(() => {
+        if (enableRowPinning && getIsSomeRowsPinned()) {
+            setTimeout(() => {
+                rerender();
+            }, 150);
+        }
+    }, [density]);
 };
 
 const useMRT_TableInstance = (tableOptions) => {
@@ -3237,6 +3251,8 @@ const MRT_Default_Icons = {
     ArrowDownwardIcon,
     ArrowRightIcon,
     CancelIcon,
+    ChevronLefIcon,
+    ChevronRightIcon,
     ClearAllIcon,
     CloseIcon,
     DensityLargeIcon,
@@ -3249,9 +3265,11 @@ const MRT_Default_Icons = {
     FilterAltIcon,
     FilterListIcon,
     FilterListOffIcon,
+    FirstPageIcon,
     FullscreenExitIcon,
     FullscreenIcon,
     KeyboardDoubleArrowDownIcon,
+    LastPageIcon,
     MoreHorizIcon,
     MoreVertIcon,
     PushPinIcon,