@cutting/material-react-table 4.0.0

package/src/components/table/MRT_TableContainer.tsx

@@ -0,0 +1,112 @@
+import TableContainer, {
+  type TableContainerProps,
+} from '@mui/material/TableContainer';
+import { useEffect, useLayoutEffect, useState } from 'react';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_CellActionMenu } from '../menus/MRT_CellActionMenu';
+import { MRT_EditRowModal } from '../modals/MRT_EditRowModal';
+import { MRT_Table } from './MRT_Table';
+import { MRT_TableLoadingOverlay } from './MRT_TableLoadingOverlay';
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export interface MRT_TableContainerProps<TData extends MRT_RowData>
+  extends TableContainerProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableContainer = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: MRT_TableContainerProps<TData>) => {
+  const {
+    getState,
+    options: {
+      createDisplayMode,
+      editDisplayMode,
+      enableCellActions,
+      enableStickyHeader,
+      muiTableContainerProps,
+    },
+    refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
+  } = table;
+  const {
+    actionCell,
+    creatingRow,
+    editingRow,
+    isFullScreen,
+    isLoading,
+    showLoadingOverlay,
+  } = getState();
+
+  const loading =
+    showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
+
+  const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
+
+  const tableContainerProps = {
+    ...parseFromValuesOrFunc(muiTableContainerProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    const topToolbarHeight =
+      typeof document !== 'undefined'
+        ? (topToolbarRef.current?.offsetHeight ?? 0)
+        : 0;
+
+    const bottomToolbarHeight =
+      typeof document !== 'undefined'
+        ? (bottomToolbarRef?.current?.offsetHeight ?? 0)
+        : 0;
+
+    setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
+  });
+
+  const createModalOpen = createDisplayMode === 'modal' && creatingRow;
+  const editModalOpen = editDisplayMode === 'modal' && editingRow;
+
+  return (
+    <TableContainer
+      aria-busy={loading}
+      aria-describedby={loading ? 'mrt-progress' : undefined}
+      {...tableContainerProps}
+      ref={(node: HTMLDivElement) => {
+        if (node) {
+          tableContainerRef.current = node;
+          if (tableContainerProps?.ref) {
+            //@ts-expect-error
+            tableContainerProps.ref.current = node;
+          }
+        }
+      }}
+      style={{
+        maxHeight: isFullScreen
+          ? `calc(100vh - ${totalToolbarHeight}px)`
+          : undefined,
+        ...tableContainerProps?.style,
+      }}
+      sx={(theme) => ({
+        maxHeight: enableStickyHeader
+          ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
+          : undefined,
+        maxWidth: '100%',
+        overflow: 'auto',
+        position: 'relative',
+        ...(parseFromValuesOrFunc(tableContainerProps?.sx, theme) as any),
+      })}
+    >
+      {loading ? <MRT_TableLoadingOverlay table={table} /> : null}
+      <MRT_Table table={table} />
+      {(createModalOpen || editModalOpen) && (
+        <MRT_EditRowModal open table={table} />
+      )}
+      {enableCellActions && actionCell && <MRT_CellActionMenu table={table} />}
+    </TableContainer>
+  );
+};

package/src/components/table/MRT_TableLoadingOverlay.tsx

@@ -0,0 +1,59 @@
+import Box from '@mui/material/Box';
+import CircularProgress, {
+  type CircularProgressProps,
+} from '@mui/material/CircularProgress';
+import { alpha } from '@mui/material/styles';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_TableLoadingOverlayProps<TData extends MRT_RowData>
+  extends CircularProgressProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: MRT_TableLoadingOverlayProps<TData>) => {
+  const {
+    options: {
+      id,
+      localization,
+      mrtTheme: { baseBackgroundColor },
+      muiCircularProgressProps,
+    },
+  } = table;
+
+  const circularProgressProps = {
+    ...parseFromValuesOrFunc(muiCircularProgressProps, { table }),
+    ...rest,
+  };
+
+  return (
+    <Box
+      sx={{
+        alignItems: 'center',
+        backgroundColor: alpha(baseBackgroundColor, 0.5),
+        bottom: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        left: 0,
+        maxHeight: '100vh',
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        width: '100%',
+        zIndex: 3,
+      }}
+    >
+      {circularProgressProps?.Component ?? (
+        <CircularProgress
+          aria-label={localization.noRecordsToDisplay}
+          id={`mrt-progress-${id}`}
+          {...circularProgressProps}
+        />
+      )}
+    </Box>
+  );
+};

package/src/components/table/MRT_TablePaper.tsx

@@ -0,0 +1,90 @@
+import Paper, { type PaperProps } from '@mui/material/Paper';
+import { useTheme } from '@mui/material/styles';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
+import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
+import { MRT_TableContainer } from './MRT_TableContainer';
+
+export interface MRT_TablePaperProps<TData extends MRT_RowData>
+  extends PaperProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TablePaper = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: MRT_TablePaperProps<TData>) => {
+  const {
+    getState,
+    options: {
+      enableBottomToolbar,
+      enableTopToolbar,
+      mrtTheme: { baseBackgroundColor },
+      muiTablePaperProps,
+      renderBottomToolbar,
+      renderTopToolbar,
+    },
+    refs: { tablePaperRef },
+  } = table;
+  const { isFullScreen } = getState();
+
+  const paperProps = {
+    ...parseFromValuesOrFunc(muiTablePaperProps, { table }),
+    ...rest,
+  };
+
+  const theme = useTheme();
+
+  return (
+    <Paper
+      elevation={2}
+      onKeyDown={(e) => e.key === 'Escape' && table.setIsFullScreen(false)}
+      {...paperProps}
+      ref={(ref: HTMLDivElement) => {
+        tablePaperRef.current = ref;
+        if (paperProps?.ref) {
+          //@ts-expect-error
+          paperProps.ref.current = ref;
+        }
+      }}
+      style={{
+        ...(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?.style,
+      }}
+      sx={(theme) => ({
+        backgroundColor: baseBackgroundColor,
+        backgroundImage: 'unset',
+        overflow: 'hidden',
+        transition: 'all 100ms ease-in-out',
+        ...(parseFromValuesOrFunc(paperProps?.sx, theme) as any),
+      })}
+    >
+      {enableTopToolbar &&
+        (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
+          <MRT_TopToolbar table={table} />
+        ))}
+      <MRT_TableContainer table={table} />
+      {enableBottomToolbar &&
+        (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
+          <MRT_BottomToolbar table={table} />
+        ))}
+    </Paper>
+  );
+};

package/src/components/toolbar/MRT_BottomToolbar.tsx

@@ -0,0 +1,109 @@
+import Box, { type BoxProps } from '@mui/material/Box';
+import { alpha } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getCommonToolbarStyles } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
+import { MRT_TablePagination } from './MRT_TablePagination';
+import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
+import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
+
+export interface MRT_BottomToolbarProps<TData extends MRT_RowData>
+  extends BoxProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_BottomToolbar = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: MRT_BottomToolbarProps<TData>) => {
+  const {
+    getState,
+    options: {
+      enablePagination,
+      muiBottomToolbarProps,
+      positionPagination,
+      positionToolbarAlertBanner,
+      positionToolbarDropZone,
+      renderBottomToolbarCustomActions,
+    },
+    refs: { bottomToolbarRef },
+  } = table;
+  const { isFullScreen } = getState();
+
+  const isMobile = useMediaQuery('(max-width:720px)');
+
+  const toolbarProps = {
+    ...parseFromValuesOrFunc(muiBottomToolbarProps, { table }),
+    ...rest,
+  };
+
+  const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
+
+  return (
+    <Box
+      {...toolbarProps}
+      ref={(node: HTMLDivElement) => {
+        if (node) {
+          bottomToolbarRef.current = node;
+          if (toolbarProps?.ref) {
+            // @ts-expect-error
+            toolbarProps.ref.current = node;
+          }
+        }
+      }}
+      sx={(theme) => ({
+        ...getCommonToolbarStyles({ table, theme }),
+        bottom: isFullScreen ? '0' : undefined,
+        boxShadow: `0 1px 2px -1px ${alpha(theme.palette.grey[700], 0.5)} inset`,
+        left: 0,
+        position: isFullScreen ? 'fixed' : 'relative',
+        right: 0,
+        ...(parseFromValuesOrFunc(toolbarProps?.sx, theme) as any),
+      })}
+    >
+      <MRT_LinearProgressBar isTopToolbar={false} table={table} />
+      {positionToolbarAlertBanner === 'bottom' && (
+        <MRT_ToolbarAlertBanner
+          stackAlertBanner={stackAlertBanner}
+          table={table}
+        />
+      )}
+      {['both', 'bottom'].includes(positionToolbarDropZone ?? '') && (
+        <MRT_ToolbarDropZone table={table} />
+      )}
+      <Box
+        sx={{
+          alignItems: 'center',
+          boxSizing: 'border-box',
+          display: 'flex',
+          justifyContent: 'space-between',
+          p: '0.5rem',
+          width: '100%',
+        }}
+      >
+        {renderBottomToolbarCustomActions ? (
+          renderBottomToolbarCustomActions({ table })
+        ) : (
+          <span />
+        )}
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            position: stackAlertBanner ? 'relative' : 'absolute',
+            right: 0,
+            top: 0,
+          }}
+        >
+          {enablePagination &&
+            ['both', 'bottom'].includes(positionPagination ?? '') && (
+              <MRT_TablePagination position="bottom" table={table} />
+            )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};

package/src/components/toolbar/MRT_LinearProgressBar.tsx

@@ -0,0 +1,54 @@
+import Collapse from '@mui/material/Collapse';
+import LinearProgress, {
+  type LinearProgressProps,
+} from '@mui/material/LinearProgress';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_LinearProgressBarProps<TData extends MRT_RowData>
+  extends LinearProgressProps {
+  isTopToolbar: boolean;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_LinearProgressBar = <TData extends MRT_RowData>({
+  isTopToolbar,
+  table,
+  ...rest
+}: MRT_LinearProgressBarProps<TData>) => {
+  const {
+    getState,
+    options: { muiLinearProgressProps },
+  } = table;
+  const { isSaving, showProgressBars } = getState();
+
+  const linearProgressProps = {
+    ...parseFromValuesOrFunc(muiLinearProgressProps, {
+      isTopToolbar,
+      table,
+    }),
+    ...rest,
+  };
+
+  return (
+    <Collapse
+      in={showProgressBars !== false && (showProgressBars || isSaving)}
+      mountOnEnter
+      sx={{
+        bottom: isTopToolbar ? 0 : undefined,
+        position: 'absolute',
+        top: !isTopToolbar ? 0 : undefined,
+        width: '100%',
+      }}
+      unmountOnExit
+    >
+      <LinearProgress
+        aria-busy="true"
+        aria-label="Loading"
+        sx={{ position: 'relative' }}
+        {...linearProgressProps}
+      />
+    </Collapse>
+  );
+};

package/src/components/toolbar/MRT_TablePagination.tsx

@@ -0,0 +1,244 @@
+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, { type SelectProps } from '@mui/material/Select';
+import { useTheme } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { flipIconStyles, getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
+
+export interface MRT_TablePaginationProps<TData extends MRT_RowData>
+  extends Partial<
+    PaginationProps & {
+      disabled?: boolean;
+      rowsPerPageOptions?: number[] | { label: string; value: number }[];
+      SelectProps?: Partial<SelectProps>;
+      showRowsPerPage?: boolean;
+    }
+  > {
+  position?: 'bottom' | 'top';
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TablePagination = <TData extends MRT_RowData>({
+  position = 'bottom',
+  table,
+  ...rest
+}: MRT_TablePaginationProps<TData>) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery('(max-width: 720px)');
+
+  const {
+    getState,
+    options: {
+      enableToolbarInternalActions,
+      icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon },
+      id,
+      localization,
+      muiPaginationProps,
+      paginationDisplayMode,
+    },
+  } = table;
+  const {
+    pagination: { pageIndex = 0, pageSize = 10 },
+  } = getState();
+
+  const paginationProps = {
+    ...parseFromValuesOrFunc(muiPaginationProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const totalRowCount = table.getRowCount();
+  const numberOfPages = table.getPageCount();
+  const showFirstLastPageButtons = numberOfPages > 2;
+  const firstRowIndex = pageIndex * pageSize;
+  const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
+
+  const {
+    disabled = false,
+    rowsPerPageOptions = defaultRowsPerPage,
+    SelectProps = {},
+    showFirstButton = showFirstLastPageButtons,
+    showLastButton = showFirstLastPageButtons,
+    showRowsPerPage = true,
+    ...restPaginationProps
+  } = paginationProps ?? {};
+
+  const disableBack = pageIndex <= 0 || disabled;
+  const disableNext = lastRowIndex >= totalRowCount || disabled;
+
+  if (isMobile && SelectProps?.native !== false) {
+    SelectProps.native = true;
+  }
+
+  const tooltipProps = getCommonTooltipProps();
+
+  return (
+    <Box
+      className="MuiTablePagination-root"
+      sx={{
+        alignItems: 'center',
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '8px',
+        justifyContent: { md: 'space-between', sm: 'center' },
+        justifySelf: 'flex-end',
+        mt:
+          position === 'top' && enableToolbarInternalActions
+            ? '3rem'
+            : undefined,
+        position: 'relative',
+        px: '8px',
+        py: '12px',
+        zIndex: 2,
+      }}
+    >
+      {showRowsPerPage && (
+        <Box sx={{ alignItems: 'center', display: 'flex', gap: '8px' }}>
+          <InputLabel htmlFor={`mrt-rows-per-page-${id}`} sx={{ mb: 0 }}>
+            {localization.rowsPerPage}
+          </InputLabel>
+          <Select
+            disabled={disabled}
+            disableUnderline
+            inputProps={{
+              'aria-label': localization.rowsPerPage,
+              id: `mrt-rows-per-page-${id}`,
+            }}
+            label={localization.rowsPerPage}
+            MenuProps={{ disableScrollLock: true }}
+            onChange={(event) =>
+              table.setPageSize(+(event.target.value as any))
+            }
+            sx={{ mb: 0 }}
+            value={pageSize}
+            variant="standard"
+            {...SelectProps}
+          >
+            {rowsPerPageOptions.map((option) => {
+              const value = typeof option !== 'number' ? option.value : option;
+              const label =
+                typeof option !== 'number' ? option.label : `${option}`;
+              return (
+                SelectProps?.children ??
+                (SelectProps?.native ? (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ) : (
+                  <MenuItem key={value} sx={{ m: 0 }} value={value}>
+                    {label}
+                  </MenuItem>
+                ))
+              );
+            })}
+          </Select>
+        </Box>
+      )}
+      {paginationDisplayMode === 'pages' ? (
+        <Pagination
+          count={numberOfPages}
+          disabled={disabled}
+          onChange={(_e, newPageIndex) => table.setPageIndex(newPageIndex - 1)}
+          page={pageIndex + 1}
+          renderItem={(item) => (
+            <PaginationItem
+              slots={{
+                first: FirstPageIcon,
+                last: LastPageIcon,
+                next: ChevronRightIcon,
+                previous: ChevronLeftIcon,
+              }}
+              {...item}
+            />
+          )}
+          showFirstButton={showFirstButton}
+          showLastButton={showLastButton}
+          {...restPaginationProps}
+        />
+      ) : paginationDisplayMode === 'default' ? (
+        <>
+          <Typography
+            align="center"
+            component="span"
+            sx={{ m: '0 4px', minWidth: '8ch' }}
+            variant="body2"
+          >{`${
+            lastRowIndex === 0
+              ? 0
+              : (firstRowIndex + 1).toLocaleString(localization.language)
+          }-${lastRowIndex.toLocaleString(localization.language)} ${
+            localization.of
+          } ${totalRowCount.toLocaleString(localization.language)}`}</Typography>
+          <Box sx={{
+            gap: "xs"
+          }}>
+            {showFirstButton && (
+              <Tooltip {...tooltipProps} title={localization.goToFirstPage}>
+                <span>
+                  <IconButton
+                    aria-label={localization.goToFirstPage}
+                    disabled={disableBack}
+                    onClick={() => table.firstPage()}
+                    size="small"
+                  >
+                    <FirstPageIcon {...flipIconStyles(theme)} />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            )}
+            <Tooltip {...tooltipProps} title={localization.goToPreviousPage}>
+              <span>
+                <IconButton
+                  aria-label={localization.goToPreviousPage}
+                  disabled={disableBack}
+                  onClick={() => table.previousPage()}
+                  size="small"
+                >
+                  <ChevronLeftIcon {...flipIconStyles(theme)} />
+                </IconButton>
+              </span>
+            </Tooltip>
+            <Tooltip {...tooltipProps} title={localization.goToNextPage}>
+              <span>
+                <IconButton
+                  aria-label={localization.goToNextPage}
+                  disabled={disableNext}
+                  onClick={() => table.nextPage()}
+                  size="small"
+                >
+                  <ChevronRightIcon {...flipIconStyles(theme)} />
+                </IconButton>
+              </span>
+            </Tooltip>
+            {showLastButton && (
+              <Tooltip {...tooltipProps} title={localization.goToLastPage}>
+                <span>
+                  <IconButton
+                    aria-label={localization.goToLastPage}
+                    disabled={disableNext}
+                    onClick={() => table.lastPage()}
+                    size="small"
+                  >
+                    <LastPageIcon {...flipIconStyles(theme)} />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            )}
+          </Box>
+        </>
+      ) : null}
+    </Box>
+  );
+};