@cutting/material-react-table 4.0.0

package/src/components/buttons/MRT_EditActionButtons.tsx

@@ -0,0 +1,135 @@
+import Box, { type BoxProps } from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_EditActionButtonsProps<TData extends MRT_RowData>
+  extends BoxProps {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+  variant?: 'icon' | 'text';
+}
+
+export const MRT_EditActionButtons = <TData extends MRT_RowData>({
+  row,
+  table,
+  variant = 'icon',
+  ...rest
+}: MRT_EditActionButtonsProps<TData>) => {
+  const {
+    getState,
+    options: {
+      icons: { CancelIcon, SaveIcon },
+      localization,
+      onCreatingRowCancel,
+      onCreatingRowSave,
+      onEditingRowCancel,
+      onEditingRowSave,
+    },
+    refs: { editInputRefs },
+    setCreatingRow,
+    setEditingRow,
+  } = table;
+  const { creatingRow, editingRow, isSaving } = getState();
+
+  const isCreating = creatingRow?.id === row.id;
+  const isEditing = editingRow?.id === row.id;
+
+  const handleCancel = () => {
+    if (isCreating) {
+      onCreatingRowCancel?.({ row, table });
+      setCreatingRow(null);
+    } else if (isEditing) {
+      onEditingRowCancel?.({ row, table });
+      setEditingRow(null);
+    }
+    row._valuesCache = {} as any; //reset values cache
+  };
+
+  const handleSubmitRow = () => {
+    //look for auto-filled input values
+    Object.values(editInputRefs.current ?? {})
+      .filter((inputRef) => row.id === inputRef?.name?.split('_')?.[0])
+      ?.forEach((input) => {
+        if (
+          input.value !== undefined &&
+          Object.hasOwn(row?._valuesCache as object, input.name)
+        ) {
+          // @ts-expect-error
+          row._valuesCache[input.name] = input.value;
+        }
+      });
+    if (isCreating)
+      onCreatingRowSave?.({
+        exitCreatingMode: () => setCreatingRow(null),
+        row,
+        table,
+        values: row._valuesCache,
+      });
+    else if (isEditing) {
+      onEditingRowSave?.({
+        exitEditingMode: () => setEditingRow(null),
+        row,
+        table,
+        values: row?._valuesCache,
+      });
+    }
+  };
+
+  return (
+    <Box
+      onClick={(e) => e.stopPropagation()}
+      sx={(theme) => ({
+        display: 'flex',
+        gap: '0.75rem',
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+      })}
+    >
+      {variant === 'icon' ? (
+        <>
+          <Tooltip title={localization.cancel}>
+            <IconButton aria-label={localization.cancel} onClick={handleCancel}>
+              <CancelIcon />
+            </IconButton>
+          </Tooltip>
+          {((isCreating && onCreatingRowSave) ||
+            (isEditing && onEditingRowSave)) && (
+            <Tooltip title={localization.save}>
+              <IconButton
+                aria-label={localization.save}
+                color="info"
+                disabled={isSaving}
+                onClick={handleSubmitRow}
+              >
+                {isSaving ? <CircularProgress size={18} /> : <SaveIcon />}
+              </IconButton>
+            </Tooltip>
+          )}
+        </>
+      ) : (
+        <>
+          <Button onClick={handleCancel} sx={{ minWidth: '100px' }}>
+            {localization.cancel}
+          </Button>
+          <Button
+            disabled={isSaving}
+            onClick={handleSubmitRow}
+            sx={{ minWidth: '100px' }}
+            variant="contained"
+          >
+            {isSaving && <CircularProgress color="inherit" size={18} />}
+            {localization.save}
+          </Button>
+        </>
+      )}
+    </Box>
+  );
+};

package/src/components/buttons/MRT_ExpandAllButton.tsx

@@ -0,0 +1,79 @@
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_ExpandAllButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ExpandAllButton = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: MRT_ExpandAllButtonProps<TData>) => {
+  const {
+    getCanSomeRowsExpand,
+    getIsAllRowsExpanded,
+    getIsSomeRowsExpanded,
+    getState,
+    options: {
+      icons: { KeyboardDoubleArrowDownIcon },
+      localization,
+      muiExpandAllButtonProps,
+      renderDetailPanel,
+    },
+    toggleAllRowsExpanded,
+  } = table;
+  const { density, isLoading } = getState();
+
+  const iconButtonProps = {
+    ...parseFromValuesOrFunc(muiExpandAllButtonProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const isAllRowsExpanded = getIsAllRowsExpanded();
+
+  return (
+    <Tooltip
+      {...getCommonTooltipProps()}
+      title={
+        iconButtonProps?.title ??
+        (isAllRowsExpanded ? localization.collapseAll : localization.expandAll)
+      }
+    >
+      <span>
+        <IconButton
+          aria-label={localization.expandAll}
+          disabled={
+            isLoading || (!renderDetailPanel && !getCanSomeRowsExpand())
+          }
+          onClick={() => toggleAllRowsExpanded(!isAllRowsExpanded)}
+          {...iconButtonProps}
+          sx={(theme) => ({
+            height: density === 'compact' ? '1.75rem' : '2.25rem',
+            mt: density !== 'compact' ? '-0.25rem' : undefined,
+            width: density === 'compact' ? '1.75rem' : '2.25rem',
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
+          })}
+          title={undefined}
+        >
+          {iconButtonProps?.children ?? (
+            <KeyboardDoubleArrowDownIcon
+              style={{
+                transform: `rotate(${
+                  isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0
+                }deg)`,
+                transition: 'transform 150ms',
+              }}
+            />
+          )}
+        </IconButton>
+      </span>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_ExpandButton.tsx

@@ -0,0 +1,103 @@
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+import { type MouseEvent } from 'react';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_ExpandButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  row: MRT_Row<TData>;
+  staticRowIndex?: number;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ExpandButton = <TData extends MRT_RowData>({
+  row,
+  staticRowIndex,
+  table,
+}: MRT_ExpandButtonProps<TData>) => {
+  const theme = useTheme();
+  const {
+    getState,
+    options: {
+      icons: { ExpandMoreIcon },
+      localization,
+      muiExpandButtonProps,
+      positionExpandColumn,
+      renderDetailPanel,
+    },
+  } = table;
+  const { density } = getState();
+
+  const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
+    row,
+    staticRowIndex,
+    table,
+  });
+
+  const canExpand = row.getCanExpand();
+  const isExpanded = row.getIsExpanded();
+
+  const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    row.toggleExpanded();
+    iconButtonProps?.onClick?.(event);
+  };
+
+  const detailPanel = !!renderDetailPanel?.({ row, table });
+
+  return (
+    <Tooltip
+      disableHoverListener={!canExpand && !detailPanel}
+      {...getCommonTooltipProps()}
+      title={
+        iconButtonProps?.title ??
+        (isExpanded ? localization.collapse : localization.expand)
+      }
+    >
+      <span>
+        <IconButton
+          aria-label={localization.expand}
+          disabled={!canExpand && !detailPanel}
+          {...iconButtonProps}
+          onClick={handleToggleExpand}
+          sx={(theme) => ({
+            height: density === 'compact' ? '1.75rem' : '2.25rem',
+            opacity: !canExpand && !detailPanel ? 0.3 : 1,
+            [theme.direction === 'rtl' || positionExpandColumn === 'last'
+              ? 'mr'
+              : 'ml']: `${row.depth * 16}px`,
+            width: density === 'compact' ? '1.75rem' : '2.25rem',
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
+          })}
+          title={undefined}
+        >
+          {iconButtonProps?.children ?? (
+            <ExpandMoreIcon
+              style={{
+                transform: `rotate(${
+                  !canExpand && !renderDetailPanel
+                    ? positionExpandColumn === 'last' ||
+                      theme.direction === 'rtl'
+                      ? 90
+                      : -90
+                    : isExpanded
+                      ? -180
+                      : 0
+                }deg)`,
+                transition: 'transform 150ms',
+              }}
+            />
+          )}
+        </IconButton>
+      </span>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_GrabHandleButton.tsx

@@ -0,0 +1,66 @@
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { type DragEventHandler } from 'react';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_GrabHandleButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  iconButtonProps?: IconButtonProps;
+  location?: 'column' | 'row';
+  onDragEnd: DragEventHandler<HTMLButtonElement>;
+  onDragStart: DragEventHandler<HTMLButtonElement>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
+  location,
+  table,
+  ...rest
+}: MRT_GrabHandleButtonProps<TData>) => {
+  const {
+    options: {
+      icons: { DragHandleIcon },
+      localization,
+    },
+  } = table;
+
+  return (
+    <Tooltip
+      {...getCommonTooltipProps('top')}
+      title={rest?.title ?? localization.move}
+    >
+      <IconButton
+        aria-label={rest.title ?? localization.move}
+        disableRipple
+        draggable="true"
+        size="small"
+        {...rest}
+        onClick={(e) => {
+          e.stopPropagation();
+          rest?.onClick?.(e);
+        }}
+        sx={(theme) => ({
+          '&:active': {
+            cursor: 'grabbing',
+          },
+          '&:hover': {
+            backgroundColor: 'transparent',
+            opacity: 1,
+          },
+          cursor: 'grab',
+          m: '0 -0.1rem',
+          opacity: location === 'row' ? 1 : 0.5,
+          p: '2px',
+          transition: 'all 150ms ease-in-out',
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        })}
+        title={undefined}
+      >
+        <DragHandleIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_RowPinButton.tsx

@@ -0,0 +1,85 @@
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { type RowPinningPosition } from '@tanstack/react-table';
+import { type MouseEvent, useState } from 'react';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_RowPinButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  pinningPosition: RowPinningPosition;
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_RowPinButton = <TData extends MRT_RowData>({
+  pinningPosition,
+  row,
+  table,
+  ...rest
+}: MRT_RowPinButtonProps<TData>) => {
+  const {
+    options: {
+      icons: { CloseIcon, PushPinIcon },
+      localization,
+      rowPinningDisplayMode,
+    },
+  } = table;
+
+  const isPinned = row.getIsPinned();
+
+  const [tooltipOpened, setTooltipOpened] = useState(false);
+
+  const handleTogglePin = (event: MouseEvent<HTMLButtonElement>) => {
+    setTooltipOpened(false);
+    event.stopPropagation();
+    row.pin(isPinned ? false : pinningPosition);
+  };
+
+  return (
+    <Tooltip
+      {...getCommonTooltipProps()}
+      open={tooltipOpened}
+      title={isPinned ? localization.unpin : localization.pin}
+    >
+      <IconButton
+        aria-label={localization.pin}
+        onBlur={() => setTooltipOpened(false)}
+        onClick={handleTogglePin}
+        onFocus={() => setTooltipOpened(true)}
+        onMouseEnter={() => setTooltipOpened(true)}
+        onMouseLeave={() => setTooltipOpened(false)}
+        size="small"
+        {...rest}
+        sx={(theme) => ({
+          height: '24px',
+          width: '24px',
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        })}
+      >
+        {isPinned ? (
+          <CloseIcon />
+        ) : (
+          <PushPinIcon
+            fontSize="small"
+            style={{
+              transform: `rotate(${
+                rowPinningDisplayMode === 'sticky'
+                  ? 135
+                  : pinningPosition === 'top'
+                    ? 180
+                    : 0
+              }deg)`,
+            }}
+          />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_ShowHideColumnsButton.tsx

@@ -0,0 +1,51 @@
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { type MouseEvent, useState } from 'react';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
+
+export interface MRT_ShowHideColumnsButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ShowHideColumnsButton = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: MRT_ShowHideColumnsButtonProps<TData>) => {
+  const {
+    options: {
+      icons: { ViewColumnIcon },
+      localization,
+    },
+  } = table;
+
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  return (
+    <>
+      <Tooltip title={rest?.title ?? localization.showHideColumns}>
+        <IconButton
+          aria-label={localization.showHideColumns}
+          onClick={handleClick}
+          {...rest}
+          title={undefined}
+        >
+          <ViewColumnIcon />
+        </IconButton>
+      </Tooltip>
+      {anchorEl && (
+        <MRT_ShowHideColumnsMenu
+          anchorEl={anchorEl}
+          setAnchorEl={setAnchorEl}
+          table={table}
+        />
+      )}
+    </>
+  );
+};

package/src/components/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -0,0 +1,53 @@
+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_ToggleDensePaddingButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToggleDensePaddingButton = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: MRT_ToggleDensePaddingButtonProps<TData>) => {
+  const {
+    getState,
+    options: {
+      icons: { DensityLargeIcon, DensityMediumIcon, DensitySmallIcon },
+      localization,
+    },
+    setDensity,
+  } = table;
+  const { density } = getState();
+
+  const handleToggleDensePadding = () => {
+    const nextDensity =
+      density === 'comfortable'
+        ? 'compact'
+        : density === 'compact'
+          ? 'spacious'
+          : 'comfortable';
+    setDensity(nextDensity);
+  };
+
+  return (
+    <Tooltip title={rest?.title ?? localization.toggleDensity}>
+      <IconButton
+        aria-label={localization.toggleDensity}
+        onClick={handleToggleDensePadding}
+        {...rest}
+        title={undefined}
+      >
+        {density === 'compact' ? (
+          <DensitySmallIcon />
+        ) : density === 'comfortable' ? (
+          <DensityMediumIcon />
+        ) : (
+          <DensityLargeIcon />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_ToggleFiltersButton.tsx

@@ -0,0 +1,41 @@
+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_ToggleFiltersButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToggleFiltersButton = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: MRT_ToggleFiltersButtonProps<TData>) => {
+  const {
+    getState,
+    options: {
+      icons: { FilterListIcon, FilterListOffIcon },
+      localization,
+    },
+    setShowColumnFilters,
+  } = table;
+  const { showColumnFilters } = getState();
+
+  const handleToggleShowFilters = () => {
+    setShowColumnFilters(!showColumnFilters);
+  };
+
+  return (
+    <Tooltip title={rest?.title ?? localization.showHideFilters}>
+      <IconButton
+        aria-label={localization.showHideFilters}
+        onClick={handleToggleShowFilters}
+        {...rest}
+        title={undefined}
+      >
+        {showColumnFilters ? <FilterListOffIcon /> : <FilterListIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_ToggleFullScreenButton.tsx

@@ -0,0 +1,52 @@
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { useState } from 'react';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+
+export interface MRT_ToggleFullScreenButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToggleFullScreenButton = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: MRT_ToggleFullScreenButtonProps<TData>) => {
+  const {
+    getState,
+    options: {
+      icons: { FullscreenExitIcon, FullscreenIcon },
+      localization,
+    },
+    setIsFullScreen,
+  } = table;
+  const { isFullScreen } = getState();
+
+  const [tooltipOpened, setTooltipOpened] = useState(false);
+
+  const handleToggleFullScreen = () => {
+    setTooltipOpened(false);
+    setIsFullScreen(!isFullScreen);
+  };
+
+  return (
+    <Tooltip
+      open={tooltipOpened}
+      title={rest?.title ?? localization.toggleFullScreen}
+    >
+      <IconButton
+        aria-label={localization.toggleFullScreen}
+        onBlur={() => setTooltipOpened(false)}
+        onClick={handleToggleFullScreen}
+        onFocus={() => setTooltipOpened(true)}
+        onMouseEnter={() => setTooltipOpened(true)}
+        onMouseLeave={() => setTooltipOpened(false)}
+        {...rest}
+        title={undefined}
+      >
+        {isFullScreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};