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

package/src/toolbar/MRT_TablePagination.tsx

@@ -1,14 +1,22 @@
-import { type ChangeEvent } from 'react';
-import TablePagination from '@mui/material/TablePagination';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Pagination, { type PaginationProps } from '@mui/material/Pagination';
+import PaginationItem from '@mui/material/PaginationItem';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
+
+interface Props<TData extends Record<string, any> = {}> {
   position?: 'bottom' | 'top';
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TablePagination = <TData extends Record<string, any>>({
+export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
   position = 'bottom',
   table,
 }: Props<TData>) => {
@@ -17,8 +25,10 @@ export const MRT_TablePagination = <TData extends Record<string, any>>({
     getState,
     options: {
       enableToolbarInternalActions,
+      icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon },
       localization,
-      muiTablePaginationProps,
+      muiPaginationProps,
+      paginationDisplayMode,
       rowCount,
     },
     setPageIndex,
@@ -29,80 +39,137 @@ export const MRT_TablePagination = <TData extends Record<string, any>>({
     showGlobalFilter,
   } = getState();
 
-  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
-  const showFirstLastPageButtons = totalRowCount / pageSize > 2;
-
-  const tablePaginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
+  const paginationProps = parseFromValuesOrFunc(muiPaginationProps, {
     table,
   });
 
-  const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
-    setPageSize(+event.target.value);
-  };
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+  const numberOfPages = Math.ceil(totalRowCount / pageSize);
+  const showFirstLastPageButtons = numberOfPages > 2;
+  const firstRowIndex = pageIndex * pageSize;
+  const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
+
+  const {
+    showRowsPerPage = true,
+    rowsPerPageOptions = defaultRowsPerPage,
+    showFirstButton = showFirstLastPageButtons,
+    showLastButton = showFirstLastPageButtons,
+
+    ...rest
+  } = paginationProps ?? {};
 
   return (
-    <TablePagination
-      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={(_: any, newPage: number) => 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={{
-        MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } },
-        sx: { m: '0 1rem 0 1ch' },
-        ...tablePaginationProps?.SelectProps,
-      }}
-      sx={(theme) => ({
-        '& . 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',
-        },
+    <Box
+      sx={{
+        alignItems: 'center',
+        display: 'flex',
+        gap: '8px',
+        justifyContent: 'space-between',
+        justifySelf: 'flex-end',
         mt:
           position === 'top' &&
           enableToolbarInternalActions &&
           !showGlobalFilter
-            ? '3.5rem'
+            ? '3rem'
             : undefined,
         position: 'relative',
+        px: '4px',
+        py: '12px',
         zIndex: 2,
-        ...(parseFromValuesOrFunc(tablePaginationProps?.sx, theme) as any),
-      })}
-    />
+      }}
+    >
+      {showRowsPerPage && (
+        <Box sx={{ alignItems: 'center', display: 'flex', gap: '8px' }}>
+          <InputLabel htmlFor="mrt-rows-per-page" sx={{ mb: 0 }}>
+            {localization.rowsPerPage}
+          </InputLabel>
+          <Select
+            inputProps={{ 'aria-label': localization.rowsPerPage }}
+            id="mrt-rows-per-page"
+            label={localization.rowsPerPage}
+            onChange={(event) => setPageSize(+event.target.value)}
+            sx={{ '&::before': { border: 'none' }, mb: 0 }}
+            value={pageSize}
+            variant="standard"
+          >
+            {rowsPerPageOptions.map((value) => (
+              <MenuItem key={value} sx={{ m: 0 }} value={value}>
+                {value}
+              </MenuItem>
+            ))}
+          </Select>
+        </Box>
+      )}
+      {paginationDisplayMode === 'pages' ? (
+        <Pagination
+          count={numberOfPages}
+          onChange={(_e, newPageIndex) => setPageIndex(newPageIndex - 1)}
+          page={pageIndex + 1}
+          renderItem={(item) => (
+            <PaginationItem
+              slots={{
+                first: FirstPageIcon,
+                last: LastPageIcon,
+                next: ChevronRightIcon,
+                previous: ChevronLeftIcon,
+              }}
+              {...item}
+            />
+          )}
+          showFirstButton={showFirstButton}
+          showLastButton={showLastButton}
+          {...(rest as PaginationProps)}
+        />
+      ) : paginationDisplayMode === 'default' ? (
+        <>
+          <Typography
+            sx={{ mb: 0, mx: '4px', minWidth: '10ch' }}
+            variant="body2"
+          >{`${
+            lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
+          }-${lastRowIndex.toLocaleString()} ${
+            localization.of
+          } ${totalRowCount.toLocaleString()}`}</Typography>
+          <Box gap="xs">
+            {showFirstButton && (
+              <IconButton
+                aria-label={localization.goToFirstPage}
+                disabled={pageIndex <= 0}
+                onClick={() => setPageIndex(0)}
+                size="small"
+              >
+                <FirstPageIcon />
+              </IconButton>
+            )}
+            <IconButton
+              aria-label={localization.goToPreviousPage}
+              disabled={pageIndex <= 0}
+              onClick={() => setPageIndex(pageIndex - 1)}
+              size="small"
+            >
+              <ChevronLeftIcon />
+            </IconButton>
+            <IconButton
+              aria-label={localization.goToNextPage}
+              disabled={lastRowIndex >= totalRowCount}
+              onClick={() => setPageIndex(pageIndex + 1)}
+              size="small"
+            >
+              <ChevronRightIcon />
+            </IconButton>
+            {showLastButton && (
+              <IconButton
+                aria-label={localization.goToLastPage}
+                disabled={lastRowIndex >= totalRowCount}
+                onClick={() => setPageIndex(numberOfPages - 1)}
+                size="small"
+              >
+                <LastPageIcon />
+              </IconButton>
+            )}
+          </Box>
+        </>
+      ) : null}
+    </Box>
   );
 };

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -4,11 +4,13 @@ import AlertTitle from '@mui/material/AlertTitle';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Collapse from '@mui/material/Collapse';
+import Stack from '@mui/material/Stack';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { MRT_SelectCheckbox } from '../inputs';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
-  stackAlertBanner: boolean;
+  stackAlertBanner?: boolean;
   table: MRT_TableInstance<TData>;
 }
 
@@ -21,14 +23,18 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
     getSelectedRowModel,
     getState,
     options: {
+      enableRowSelection,
+      enableSelectAll,
       localization,
       muiToolbarAlertBannerChipProps,
       muiToolbarAlertBannerProps,
       positionToolbarAlertBanner,
+      renderToolbarAlertBannerContent,
       rowCount,
     },
+    refs: { tablePaperRef },
   } = table;
-  const { grouping, showAlertBanner } = getState();
+  const { density, grouping, showAlertBanner } = getState();
 
   const alertProps = parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
     table,
@@ -38,7 +44,7 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
     table,
   });
 
-  const selectMessage =
+  const selectedAlert =
     getSelectedRowModel().rows.length > 0
       ? localization.selectedCountOfRowCountRowsSelected
           ?.replace(
@@ -51,7 +57,7 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
           )
       : null;
 
-  const groupedByMessage =
+  const groupedAlert =
     grouping.length > 0 ? (
       <span>
         {localization.groupedBy}{' '}
@@ -70,7 +76,7 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
 
   return (
     <Collapse
-      in={showAlertBanner || !!selectMessage || !!groupedByMessage}
+      in={showAlertBanner || !!selectedAlert || !!groupedAlert}
       timeout={stackAlertBanner ? 200 : 0}
     >
       <Alert
@@ -78,6 +84,12 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
         icon={false}
         {...alertProps}
         sx={(theme) => ({
+          '& .MuiAlert-message': {
+            maxWidth: `calc(${
+              tablePaperRef.current?.clientWidth ?? 360
+            }px - 1rem)`,
+            width: '100%',
+          },
           borderRadius: 0,
           fontSize: '1rem',
           left: 0,
@@ -95,16 +107,42 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
           ...(parseFromValuesOrFunc(alertProps?.sx, theme) as any),
         })}
       >
-        {alertProps?.title && <AlertTitle>{alertProps.title}</AlertTitle>}
-        <Box sx={{ p: '0.5rem 1rem' }}>
-          {alertProps?.children}
-          {alertProps?.children && (selectMessage || groupedByMessage) && (
-            <br />
-          )}
-          {selectMessage}
-          {selectMessage && groupedByMessage && <br />}
-          {groupedByMessage}
-        </Box>
+        {renderToolbarAlertBannerContent?.({
+          groupedAlert,
+          selectedAlert,
+          table,
+        }) ?? (
+          <>
+            {alertProps?.title && <AlertTitle>{alertProps.title}</AlertTitle>}
+            <Stack
+              sx={{
+                p:
+                  positionToolbarAlertBanner !== 'head-overlay'
+                    ? '0.5rem 1rem'
+                    : density === 'spacious'
+                    ? '0.75rem 1.25rem'
+                    : density === 'comfortable'
+                    ? '0.5rem 0.75rem'
+                    : '0.25rem 0.5rem',
+              }}
+            >
+              {alertProps?.children}
+              {alertProps?.children && (selectedAlert || groupedAlert) && (
+                <br />
+              )}
+              <Box sx={{ display: 'flex' }}>
+                {enableRowSelection &&
+                  enableSelectAll &&
+                  positionToolbarAlertBanner === 'head-overlay' && (
+                    <MRT_SelectCheckbox selectAll table={table} />
+                  )}{' '}
+                {selectedAlert}
+              </Box>
+              {selectedAlert && groupedAlert && <br />}
+              {groupedAlert}
+            </Stack>
+          </>
+        )}
       </Alert>
     </Collapse>
   );

package/src/toolbar/MRT_TopToolbar.tsx

@@ -14,7 +14,7 @@ import { type MRT_TableInstance } from '../types';
 
 export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   alignItems: 'flex-start',
-  backgroundColor: lighten(theme.palette.background.default, 0.04),
+  backgroundColor: lighten(theme.palette.background.default, 0.05),
   backgroundImage: 'none',
   display: 'grid',
   flexWrap: 'wrap-reverse',

package/src/types.ts

@@ -38,14 +38,15 @@ import {
   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';
@@ -56,7 +57,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';
@@ -727,7 +727,7 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
   /**
    * 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
    */
-  layoutMode?: 'grid' | 'semantic';
+  layoutMode?: 'grid' | 'grid-no-grow' | 'semantic';
   /**
    * Pass in either a locale imported from `material-react-table/locales/*` or a custom locale object.
    *
@@ -838,6 +838,19 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
         table: MRT_TableInstance<TData>;
       }) => LinearProgressProps)
     | LinearProgressProps;
+  muiPaginationProps?:
+    | ((props: { table: MRT_TableInstance<TData> }) => Partial<
+        PaginationProps & {
+          rowsPerPageOptions?: number[];
+          showRowsPerPage?: boolean;
+        }
+      >)
+    | Partial<
+        PaginationProps & {
+          rowsPerPageOptions?: number[];
+          showRowsPerPage?: boolean;
+        }
+      >;
   muiRowDragHandleProps?:
     | ((props: {
         row: MRT_Row<TData>;
@@ -916,11 +929,6 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
         table: MRT_TableInstance<TData>;
       }) => TableRowProps)
     | TableRowProps;
-  muiTablePaginationProps?:
-    | ((props: {
-        table: MRT_TableInstance<TData>;
-      }) => Partial<Omit<TablePaginationProps, 'rowsPerPage'>>)
-    | Partial<Omit<TablePaginationProps, 'rowsPerPage'>>;
   muiTablePaperProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => PaperProps)
     | PaperProps;
@@ -976,7 +984,7 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
   positionExpandColumn?: 'first' | 'last';
   positionGlobalFilter?: 'left' | 'none' | 'right';
   positionPagination?: 'both' | 'bottom' | 'none' | 'top';
-  positionToolbarAlertBanner?: 'bottom' | 'none' | 'top';
+  positionToolbarAlertBanner?: 'bottom' | 'head-overlay' | 'none' | 'top';
   positionToolbarDropZone?: 'both' | 'bottom' | 'none' | 'top';
   renderBottomToolbar?:
     | ((props: { table: MRT_TableInstance<TData> }) => ReactNode)
@@ -1028,6 +1036,11 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
     row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
+  renderToolbarAlertBannerContent?: (props: {
+    groupedAlert: ReactNode | null;
+    selectedAlert: ReactNode | null;
+    table: MRT_TableInstance<TData>;
+  }) => ReactNode;
   renderToolbarInternalActions?: (props: {
     table: MRT_TableInstance<TData>;
   }) => ReactNode;