@cutting/material-react-table 4.0.0

package/src/components/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -0,0 +1,47 @@
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+
+export interface MRT_ToggleGlobalFilterButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToggleGlobalFilterButton = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: MRT_ToggleGlobalFilterButtonProps<TData>) => {
+  const {
+    getState,
+    options: {
+      icons: { SearchIcon, SearchOffIcon },
+
+      localization,
+    },
+    refs: { searchInputRef },
+    setShowGlobalFilter,
+  } = table;
+  const { globalFilter, showGlobalFilter } = getState();
+
+  const handleToggleSearch = () => {
+    setShowGlobalFilter(!showGlobalFilter);
+    queueMicrotask(() => searchInputRef.current?.focus());
+  };
+
+  return (
+    <Tooltip title={rest?.title ?? localization.showHideSearch}>
+      <span>
+        <IconButton
+          aria-label={rest?.title ?? localization.showHideSearch}
+          disabled={!!globalFilter && showGlobalFilter}
+          onClick={handleToggleSearch}
+          {...rest}
+          title={undefined}
+        >
+          {showGlobalFilter ? <SearchOffIcon /> : <SearchIcon />}
+        </IconButton>
+      </span>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -0,0 +1,127 @@
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { type MouseEvent, useState } from 'react';
+
+import {
+  type MRT_Cell,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
+import { MRT_EditActionButtons } from './MRT_EditActionButtons';
+
+const commonIconButtonStyles = {
+  '&:hover': {
+    opacity: 1,
+  },
+  height: '2rem',
+  ml: '10px',
+  opacity: 0.5,
+  transition: 'opacity 150ms',
+  width: '2rem',
+};
+
+export interface MRT_ToggleRowActionMenuButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  cell: MRT_Cell<TData>;
+  row: MRT_Row<TData>;
+  staticRowIndex?: number;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
+  cell,
+  row,
+  staticRowIndex,
+  table,
+  ...rest
+}: MRT_ToggleRowActionMenuButtonProps<TData>) => {
+  const {
+    getState,
+    options: {
+      createDisplayMode,
+      editDisplayMode,
+      enableEditing,
+      icons: { EditIcon, MoreHorizIcon },
+      localization,
+      renderRowActionMenuItems,
+      renderRowActions,
+    },
+    setEditingRow,
+  } = table;
+
+  const { creatingRow, editingRow } = getState();
+
+  const isCreating = creatingRow?.id === row.id;
+  const isEditing = editingRow?.id === row.id;
+
+  const showEditActionButtons =
+    (isCreating && createDisplayMode === 'row') ||
+    (isEditing && editDisplayMode === 'row');
+
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const handleOpenRowActionMenu = (event: MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleStartEditMode = (event: MouseEvent) => {
+    event.stopPropagation();
+    setEditingRow({ ...row });
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      {renderRowActions && !showEditActionButtons ? (
+        renderRowActions({ cell, row, staticRowIndex, table })
+      ) : showEditActionButtons ? (
+        <MRT_EditActionButtons row={row} table={table} />
+      ) : !renderRowActionMenuItems &&
+        parseFromValuesOrFunc(enableEditing, row) &&
+        ['modal', 'row'].includes(editDisplayMode!) ? (
+        <Tooltip placement="right" title={localization.edit}>
+          <IconButton
+            aria-label={localization.edit}
+            onClick={handleStartEditMode}
+            sx={commonIconButtonStyles}
+            {...rest}
+          >
+            <EditIcon />
+          </IconButton>
+        </Tooltip>
+      ) : renderRowActionMenuItems?.({
+          row,
+          staticRowIndex,
+          table,
+        } as any)?.length ? (
+        <>
+          <Tooltip {...getCommonTooltipProps()} title={localization.rowActions}>
+            <IconButton
+              aria-label={localization.rowActions}
+              onClick={handleOpenRowActionMenu}
+              size="small"
+              sx={commonIconButtonStyles}
+              {...rest}
+            >
+              <MoreHorizIcon />
+            </IconButton>
+          </Tooltip>
+          <MRT_RowActionMenu
+            anchorEl={anchorEl}
+            handleEdit={handleStartEditMode}
+            row={row}
+            setAnchorEl={setAnchorEl}
+            staticRowIndex={staticRowIndex}
+            table={table}
+          />
+        </>
+      ) : null}
+    </>
+  );
+};

package/src/components/footer/MRT_TableFooter.tsx

@@ -0,0 +1,89 @@
+import TableFooter, { type TableFooterProps } from '@mui/material/TableFooter';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_TableFooterRow } from './MRT_TableFooterRow';
+
+export interface MRT_TableFooterProps<TData extends MRT_RowData>
+  extends TableFooterProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableFooter = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  table,
+  ...rest
+}: MRT_TableFooterProps<TData>) => {
+  const {
+    getState,
+    options: { enableStickyFooter, layoutMode, muiTableFooterProps },
+    refs: { tableFooterRef },
+  } = table;
+  const { isFullScreen } = getState();
+
+  const tableFooterProps = {
+    ...parseFromValuesOrFunc(muiTableFooterProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const stickFooter =
+    (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
+
+  const footerGroups = table.getFooterGroups();
+
+  //if no footer cells at all, skip footer
+  if (
+    !footerGroups.some((footerGroup) =>
+      footerGroup.headers?.some(
+        (header) =>
+          (typeof header.column.columnDef.footer === 'string' &&
+            !!header.column.columnDef.footer) ||
+          header.column.columnDef.Footer,
+      ),
+    )
+  ) {
+    return null;
+  }
+
+  return (
+    <TableFooter
+      {...tableFooterProps}
+      ref={(ref: HTMLTableSectionElement) => {
+        tableFooterRef.current = ref;
+        if (tableFooterProps?.ref) {
+          // @ts-expect-error
+          tableFooterProps.ref.current = ref;
+        }
+      }}
+      sx={(theme) => ({
+        bottom: stickFooter ? 0 : undefined,
+        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+        opacity: stickFooter ? 0.97 : undefined,
+        outline: stickFooter
+          ? theme.palette.mode === 'light'
+            ? `1px solid ${theme.palette.grey[300]}`
+            : `1px solid ${theme.palette.grey[700]}`
+          : undefined,
+        position: stickFooter ? 'sticky' : 'relative',
+        zIndex: stickFooter ? 1 : undefined,
+        ...(parseFromValuesOrFunc(tableFooterProps?.sx, theme) as any),
+      })}
+    >
+      {footerGroups.map((footerGroup) => (
+        <MRT_TableFooterRow
+          columnVirtualizer={columnVirtualizer}
+          footerGroup={footerGroup as any}
+          key={footerGroup.id}
+          table={table}
+        />
+      ))}
+    </TableFooter>
+  );
+};

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -0,0 +1,108 @@
+import { useTheme } from '@mui/material/styles';
+import TableCell, { type TableCellProps } from '@mui/material/TableCell';
+
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { cellKeyboardShortcuts } from '../../utils/cell.utils';
+import { getCommonMRTCellStyles } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_TableFooterCellProps<TData extends MRT_RowData>
+  extends TableCellProps {
+  footer: MRT_Header<TData>;
+  staticColumnIndex?: number;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableFooterCell = <TData extends MRT_RowData>({
+  footer,
+  staticColumnIndex,
+  table,
+  ...rest
+}: MRT_TableFooterCellProps<TData>) => {
+  const theme = useTheme();
+  const {
+    getState,
+    options: {
+      enableColumnPinning,
+      enableKeyboardShortcuts,
+      muiTableFooterCellProps,
+    },
+  } = table;
+  const { density } = getState();
+  const { column } = footer;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const isColumnPinned =
+    enableColumnPinning &&
+    columnDef.columnDefType !== 'group' &&
+    column.getIsPinned();
+
+  const args = { column, table };
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(muiTableFooterCellProps, args),
+    ...parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args),
+    ...rest,
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onKeyDown?.(event);
+    cellKeyboardShortcuts({
+      cellValue: footer.column.columnDef.footer,
+      event,
+      table,
+    });
+  };
+
+  return (
+    <TableCell
+      align={
+        columnDefType === 'group'
+          ? 'center'
+          : theme.direction === 'rtl'
+            ? 'right'
+            : 'left'
+      }
+      colSpan={footer.colSpan}
+      data-index={staticColumnIndex}
+      data-pinned={!!isColumnPinned || undefined}
+      tabIndex={enableKeyboardShortcuts ? 0 : undefined}
+      variant="footer"
+      {...tableCellProps}
+      onKeyDown={handleKeyDown}
+      sx={(theme) => ({
+        fontWeight: 'bold',
+        p:
+          density === 'compact'
+            ? '0.5rem'
+            : density === 'comfortable'
+              ? '1rem'
+              : '1.5rem',
+        verticalAlign: 'top',
+        ...getCommonMRTCellStyles({
+          column,
+          header: footer,
+          table,
+          tableCellProps,
+          theme,
+        }),
+        ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
+      })}
+    >
+      {tableCellProps.children ??
+        (footer.isPlaceholder
+          ? null
+          : (parseFromValuesOrFunc(columnDef.Footer, {
+              column,
+              footer,
+              table,
+            }) ??
+            columnDef.footer ??
+            null))}
+    </TableCell>
+  );
+};

package/src/components/footer/MRT_TableFooterRow.tsx

@@ -0,0 +1,96 @@
+import TableRow, { type TableRowProps } from '@mui/material/TableRow';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_Header,
+  type MRT_HeaderGroup,
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_TableFooterCell } from './MRT_TableFooterCell';
+
+export interface MRT_TableFooterRowProps<TData extends MRT_RowData>
+  extends TableRowProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  footerGroup: MRT_HeaderGroup<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableFooterRow = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  footerGroup,
+  table,
+  ...rest
+}: MRT_TableFooterRowProps<TData>) => {
+  const {
+    options: {
+      layoutMode,
+      mrtTheme: { baseBackgroundColor },
+      muiTableFooterRowProps,
+    },
+  } = table;
+
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
+
+  // if no content in row, skip row
+  if (
+    !footerGroup.headers?.some(
+      (header) =>
+        (typeof header.column.columnDef.footer === 'string' &&
+          !!header.column.columnDef.footer) ||
+        header.column.columnDef.Footer,
+    )
+  ) {
+    return null;
+  }
+
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(muiTableFooterRowProps, {
+      footerGroup,
+      table,
+    }),
+    ...rest,
+  };
+
+  return (
+    <TableRow
+      {...tableRowProps}
+      sx={(theme) => ({
+        backgroundColor: baseBackgroundColor,
+        display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+        position: 'relative',
+        width: '100%',
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
+      })}
+    >
+      {virtualPaddingLeft ? (
+        <th style={{ display: 'flex', width: virtualPaddingLeft }} />
+      ) : null}
+      {(virtualColumns ?? footerGroup.headers).map(
+        (footerOrVirtualFooter, staticColumnIndex) => {
+          let footer = footerOrVirtualFooter as MRT_Header<TData>;
+          if (columnVirtualizer) {
+            staticColumnIndex = (footerOrVirtualFooter as MRT_VirtualItem)
+              .index;
+            footer = footerGroup.headers[staticColumnIndex];
+          }
+
+          return footer ? (
+            <MRT_TableFooterCell
+              footer={footer}
+              key={footer.id}
+              staticColumnIndex={staticColumnIndex}
+              table={table}
+            />
+          ) : null;
+        },
+      )}
+      {virtualPaddingRight ? (
+        <th style={{ display: 'flex', width: virtualPaddingRight }} />
+      ) : null}
+    </TableRow>
+  );
+};

package/src/components/head/MRT_TableHead.tsx

@@ -0,0 +1,92 @@
+import TableHead, { type TableHeadProps } from '@mui/material/TableHead';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_ToolbarAlertBanner } from '../toolbar/MRT_ToolbarAlertBanner';
+import { MRT_TableHeadRow } from './MRT_TableHeadRow';
+
+export interface MRT_TableHeadProps<TData extends MRT_RowData>
+  extends TableHeadProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHead = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  table,
+  ...rest
+}: MRT_TableHeadProps<TData>) => {
+  const {
+    getState,
+    options: {
+      enableStickyHeader,
+      layoutMode,
+      muiTableHeadProps,
+      positionToolbarAlertBanner,
+    },
+    refs: { tableHeadRef },
+  } = table;
+  const { isFullScreen, showAlertBanner } = getState();
+
+  const tableHeadProps = {
+    ...parseFromValuesOrFunc(muiTableHeadProps, { table }),
+    ...rest,
+  };
+
+  const stickyHeader = enableStickyHeader || isFullScreen;
+
+  return (
+    <TableHead
+      {...tableHeadProps}
+      ref={(ref: HTMLTableSectionElement) => {
+        tableHeadRef.current = ref;
+        if (tableHeadProps?.ref) {
+          // @ts-expect-error
+          tableHeadProps.ref.current = ref;
+        }
+      }}
+      sx={(theme) => ({
+        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+        opacity: 0.97,
+        position: stickyHeader ? 'sticky' : 'relative',
+        top: stickyHeader && layoutMode?.startsWith('grid') ? 0 : undefined,
+        zIndex: stickyHeader ? 2 : undefined,
+        ...(parseFromValuesOrFunc(tableHeadProps?.sx, theme) as any),
+      })}
+    >
+      {positionToolbarAlertBanner === 'head-overlay' &&
+      (showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? (
+        <tr
+          style={{
+            display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+          }}
+        >
+          <th
+            colSpan={table.getVisibleLeafColumns().length}
+            style={{
+              display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+              padding: 0,
+            }}
+          >
+            <MRT_ToolbarAlertBanner table={table} />
+          </th>
+        </tr>
+      ) : (
+        table
+          .getHeaderGroups()
+          .map((headerGroup) => (
+            <MRT_TableHeadRow
+              columnVirtualizer={columnVirtualizer}
+              headerGroup={headerGroup as any}
+              key={headerGroup.id}
+              table={table}
+            />
+          ))
+      )}
+    </TableHead>
+  );
+};