@cutting/material-react-table 4.0.0

package/src/utils/row.utils.ts

@@ -0,0 +1,261 @@
+import { type ChangeEvent, type MouseEvent } from 'react';
+
+import { rankGlobalFuzzy } from '../fns/sortingFns';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import { parseFromValuesOrFunc } from './utils';
+
+export const getMRT_Rows = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+  all?: boolean,
+): MRT_Row<TData>[] => {
+  const {
+    getCenterRows,
+    getPrePaginationRowModel,
+    getRowModel,
+    getState,
+    getTopRows,
+    options: {
+      createDisplayMode,
+      enablePagination,
+      enableRowPinning,
+      manualPagination,
+      positionCreatingRow,
+      rowPinningDisplayMode,
+    },
+  } = table;
+  const { creatingRow, pagination } = getState();
+
+  const isRankingRows = getIsRankingRows(table);
+
+  let rows: MRT_Row<TData>[] = [];
+  if (!isRankingRows) {
+    rows =
+      !enableRowPinning || rowPinningDisplayMode?.includes('sticky')
+        ? all
+          ? getPrePaginationRowModel().rows
+          : getRowModel().rows
+        : getCenterRows();
+  } else {
+    // fuzzy ranking adjustments
+    rows = getPrePaginationRowModel().rows.sort((a, b) =>
+      rankGlobalFuzzy(a, b),
+    );
+    if (enablePagination && !manualPagination && !all) {
+      const start = pagination.pageIndex * pagination.pageSize;
+      rows = rows.slice(start, start + pagination.pageSize);
+    }
+    if (enableRowPinning && !rowPinningDisplayMode?.includes('sticky')) {
+      // "re-center-ize" the rows (no top or bottom pinned rows unless sticky)
+      rows = rows.filter((row) => !row.getIsPinned());
+    }
+  }
+  // row pinning adjustments
+  if (enableRowPinning && rowPinningDisplayMode?.includes('sticky')) {
+    const centerPinnedRowIds = rows
+      .filter((row) => row.getIsPinned())
+      .map((r) => r.id);
+
+    rows = [
+      ...getTopRows().filter((row) => !centerPinnedRowIds.includes(row.id)),
+      ...rows,
+    ];
+  }
+  // blank inserted creating row adjustments
+  if (
+    positionCreatingRow !== undefined &&
+    creatingRow &&
+    createDisplayMode === 'row'
+  ) {
+    const creatingRowIndex = !isNaN(+positionCreatingRow)
+      ? +positionCreatingRow
+      : positionCreatingRow === 'top'
+        ? 0
+        : rows.length;
+    rows = [
+      ...rows.slice(0, creatingRowIndex),
+      creatingRow,
+      ...rows.slice(creatingRowIndex),
+    ];
+  }
+
+  return rows;
+};
+
+export const getCanRankRows = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+) => {
+  const {
+    getState,
+    options: {
+      enableGlobalFilterRankedResults,
+      manualExpanding,
+      manualFiltering,
+      manualGrouping,
+      manualSorting,
+    },
+  } = table;
+  const { expanded, globalFilterFn } = getState();
+
+  return (
+    !manualExpanding &&
+    !manualFiltering &&
+    !manualGrouping &&
+    !manualSorting &&
+    enableGlobalFilterRankedResults &&
+    globalFilterFn === 'fuzzy' &&
+    expanded !== true &&
+    !Object.values(expanded).some(Boolean)
+  );
+};
+
+export const getIsRankingRows = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+) => {
+  const { globalFilter, sorting } = table.getState();
+
+  return (
+    getCanRankRows(table) &&
+    globalFilter &&
+    !Object.values(sorting).some(Boolean)
+  );
+};
+
+export const getIsRowSelected = <TData extends MRT_RowData>({
+  row,
+  table,
+}: {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}) => {
+  const {
+    options: { enableRowSelection },
+  } = table;
+
+  return (
+    row.getIsSelected() ||
+    (parseFromValuesOrFunc(enableRowSelection, row) &&
+      row.getCanSelectSubRows() &&
+      row.getIsAllSubRowsSelected())
+  );
+};
+
+export const getMRT_RowSelectionHandler =
+  <TData extends MRT_RowData>({
+    row,
+    staticRowIndex = 0,
+    table,
+  }: {
+    row: MRT_Row<TData>;
+    staticRowIndex?: number;
+    table: MRT_TableInstance<TData>;
+  }) =>
+  (
+    event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLTableRowElement>,
+    value?: boolean,
+  ) => {
+    const {
+      getState,
+      options: {
+        enableBatchRowSelection,
+        enableMultiRowSelection,
+        enableRowPinning,
+        manualPagination,
+        rowPinningDisplayMode,
+      },
+      refs: { lastSelectedRowId: lastSelectedRowId },
+    } = table;
+    const {
+      pagination: { pageIndex, pageSize },
+    } = getState();
+
+    const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
+
+    const wasCurrentRowChecked = getIsRowSelected({ row, table });
+
+    // toggle selection of this row
+    row.toggleSelected(value ?? !wasCurrentRowChecked);
+
+    const changedRowIds = new Set<string>([row.id]);
+
+    // if shift key is pressed, select all rows between last selected and this one
+    if (
+      enableBatchRowSelection &&
+      enableMultiRowSelection &&
+      (event as any).nativeEvent.shiftKey &&
+      lastSelectedRowId.current !== null
+    ) {
+      const rows = getMRT_Rows(table, true);
+
+      const lastIndex = rows.findIndex(
+        (r) => r.id === lastSelectedRowId.current,
+      );
+
+      if (lastIndex !== -1) {
+        const isLastIndexChecked = getIsRowSelected({
+          row: rows?.[lastIndex],
+          table,
+        });
+
+        const currentIndex = staticRowIndex + paginationOffset;
+        const [start, end] =
+          lastIndex < currentIndex
+            ? [lastIndex, currentIndex]
+            : [currentIndex, lastIndex];
+
+        // toggle selection of all rows between last selected and this one
+        // but only if the last selected row is not the same as the current one
+        if (wasCurrentRowChecked !== isLastIndexChecked) {
+          for (let i = start; i <= end; i++) {
+            rows[i].toggleSelected(!wasCurrentRowChecked);
+            changedRowIds.add(rows[i].id);
+          }
+        }
+      }
+    }
+
+    // record the last selected row id
+    lastSelectedRowId.current = row.id;
+
+    // if all sub rows were selected, unselect them
+    if (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) {
+      row.subRows?.forEach((r) => r.toggleSelected(false));
+    }
+
+    if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {
+      changedRowIds.forEach((rowId) => {
+        const rowToTogglePin = table.getRow(rowId);
+        rowToTogglePin.pin(
+          !wasCurrentRowChecked //was not previously pinned or selected
+            ? rowPinningDisplayMode?.includes('bottom')
+              ? 'bottom'
+              : 'top'
+            : false,
+        );
+      });
+    }
+  };
+
+export const getMRT_SelectAllHandler =
+  <TData extends MRT_RowData>({ table }: { table: MRT_TableInstance<TData> }) =>
+  (
+    event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,
+    value?: boolean,
+    forceAll?: boolean,
+  ) => {
+    const {
+      options: { enableRowPinning, rowPinningDisplayMode, selectAllMode },
+      refs: { lastSelectedRowId },
+    } = table;
+
+    selectAllMode === 'all' || forceAll
+      ? table.toggleAllRowsSelected(value ?? (event as any).target.checked)
+      : table.toggleAllPageRowsSelected(value ?? (event as any).target.checked);
+    if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {
+      table.setRowPinning({ bottom: [], top: [] });
+    }
+    lastSelectedRowId.current = null;
+  };

package/src/utils/slotProps.utils.ts

@@ -0,0 +1,25 @@
+import { type FormHelperTextProps } from '@mui/material/FormHelperText';
+import { type InputProps } from '@mui/material/Input';
+import { type InputBaseComponentProps } from '@mui/material/InputBase';
+import { type InputLabelProps } from '@mui/material/InputLabel';
+import { type SelectProps } from '@mui/material/Select';
+import { type TextFieldProps } from '@mui/material/TextField';
+
+export type TextFieldSlotProps = {
+  formHelperText?: Partial<FormHelperTextProps>;
+  htmlInput?: InputBaseComponentProps;
+  input?: Partial<InputProps>;
+  inputLabel?: Partial<InputLabelProps>;
+  select?: Partial<SelectProps>;
+};
+
+export const getTextFieldSlotProps = (
+  slotProps: TextFieldProps['slotProps'],
+): TextFieldSlotProps => ({
+  formHelperText: slotProps?.formHelperText as Partial<FormHelperTextProps>,
+  htmlInput: slotProps?.htmlInput as InputBaseComponentProps,
+  input: slotProps?.input as Partial<InputProps>,
+  inputLabel: slotProps?.inputLabel as Partial<InputLabelProps>,
+  select: slotProps?.select as Partial<SelectProps>,
+});
+

package/src/utils/style.utils.ts

@@ -0,0 +1,210 @@
+import { alpha, darken, lighten, type Theme } from '@mui/material/styles';
+import { type TableCellProps } from '@mui/material/TableCell';
+import { type TooltipProps } from '@mui/material/Tooltip';
+import { type CSSProperties } from 'react';
+
+import {
+  type MRT_Column,
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_TableOptions,
+  type MRT_Theme,
+} from '../types';
+import { parseFromValuesOrFunc } from './utils';
+
+export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
+
+export const getMRTTheme = <TData extends MRT_RowData>(
+  mrtTheme: MRT_TableOptions<TData>['mrtTheme'],
+  muiTheme: Theme,
+): MRT_Theme => {
+  const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme);
+  const baseBackgroundColor =
+    mrtThemeOverrides?.baseBackgroundColor ??
+    (muiTheme.palette.mode === 'dark'
+      ? lighten(muiTheme.palette.background.default, 0.05)
+      : muiTheme.palette.background.default);
+  return {
+    baseBackgroundColor,
+    cellNavigationOutlineColor: muiTheme.palette.primary.main,
+    draggingBorderColor: muiTheme.palette.primary.main,
+    matchHighlightColor:
+      muiTheme.palette.mode === 'dark'
+        ? darken(muiTheme.palette.warning.dark, 0.25)
+        : lighten(muiTheme.palette.warning.light, 0.5),
+    menuBackgroundColor: lighten(baseBackgroundColor, 0.07),
+    pinnedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.1),
+    selectedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.2),
+    ...mrtThemeOverrides,
+  };
+};
+
+export const commonCellBeforeAfterStyles = {
+  content: '""',
+  height: '100%',
+  left: 0,
+  position: 'absolute',
+  top: 0,
+  width: '100%',
+  zIndex: -1,
+};
+
+export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
+  column,
+  table,
+  theme,
+}: {
+  column?: MRT_Column<TData>;
+  table: MRT_TableInstance<TData>;
+  theme: Theme;
+}) => {
+  const { baseBackgroundColor } = table.options.mrtTheme;
+  const isPinned = column?.getIsPinned();
+
+  return {
+    '&[data-pinned="true"]': {
+      '&:before': {
+        backgroundColor: alpha(
+          darken(baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01),
+          0.97
+        ),
+        boxShadow: column
+          ? isPinned === 'left' && column.getIsLastColumn(isPinned)
+            ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+            : isPinned === 'right' && column.getIsFirstColumn(isPinned)
+              ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+              : undefined
+          : undefined,
+        ...commonCellBeforeAfterStyles,
+      },
+    },
+  };
+};
+
+export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
+  column,
+  header,
+  table,
+  tableCellProps,
+  theme,
+}: {
+  column: MRT_Column<TData>;
+  header?: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+  tableCellProps: TableCellProps;
+  theme: Theme;
+}) => {
+  const {
+    getState,
+    options: { enableColumnVirtualization, layoutMode },
+  } = table;
+  const { draggingColumn } = getState();
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const isColumnPinned =
+    columnDef.columnDefType !== 'group' && column.getIsPinned();
+
+  const widthStyles: CSSProperties = {
+    minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
+    width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) * 1px)`,
+  };
+
+  if (layoutMode === 'grid') {
+    widthStyles.flex = `${
+      [0, false].includes(columnDef.grow!)
+        ? 0
+        : `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+            header?.id ?? column.id,
+          )}-size)`
+    } 0 auto`;
+  } else if (layoutMode === 'grid-no-grow') {
+    widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
+  }
+
+  const pinnedStyles = isColumnPinned
+    ? {
+        ...getCommonPinnedCellStyles({ column, table, theme }),
+        left:
+          isColumnPinned === 'left'
+            ? `${column.getStart('left')}px`
+            : undefined,
+        opacity: 0.97,
+        position: 'sticky',
+        right:
+          isColumnPinned === 'right'
+            ? `${column.getAfter('right')}px`
+            : undefined,
+      }
+    : {};
+
+  return {
+    '&:focus-visible': {
+      outline: `2px solid ${table.options.mrtTheme.cellNavigationOutlineColor}`,
+      outlineOffset: '-2px',
+    },
+    backgroundColor: 'inherit',
+    backgroundImage: 'inherit',
+    display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+    justifyContent:
+      columnDefType === 'group'
+        ? 'center'
+        : layoutMode?.startsWith('grid')
+          ? tableCellProps.align
+          : undefined,
+    opacity:
+      table.getState().draggingColumn?.id === column.id ||
+      table.getState().hoveredColumn?.id === column.id
+        ? 0.5
+        : 1,
+    position: 'relative',
+    transition: enableColumnVirtualization
+      ? 'none'
+      : `padding 150ms ease-in-out`,
+    zIndex:
+      column.getIsResizing() || draggingColumn?.id === column.id
+        ? 2
+        : columnDefType !== 'group' && isColumnPinned
+          ? 1
+          : 0,
+    ...pinnedStyles,
+    ...widthStyles,
+    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
+  };
+};
+
+export const getCommonToolbarStyles = <TData extends MRT_RowData>({
+  table,
+}: {
+  table: MRT_TableInstance<TData>;
+  theme: Theme;
+}) => ({
+  alignItems: 'flex-start',
+  backgroundColor: table.options.mrtTheme.baseBackgroundColor,
+  display: 'grid',
+  flexWrap: 'wrap-reverse',
+  minHeight: '3.5rem',
+  overflow: 'hidden',
+  position: 'relative',
+  transition: 'all 150ms ease-in-out',
+  zIndex: 1,
+});
+
+export const flipIconStyles = (theme: Theme) =>
+  theme.direction === 'rtl'
+    ? { style: { transform: 'scaleX(-1)' } }
+    : undefined;
+
+export const getCommonTooltipProps = (
+  placement?: TooltipProps['placement'],
+): Partial<TooltipProps> => ({
+  disableInteractive: true,
+  enterDelay: 1000,
+  enterNextDelay: 1000,
+  placement,
+});

package/src/utils/tanstack.helpers.ts

@@ -0,0 +1,65 @@
+import {
+  createRow as _createRow,
+  flexRender as _flexRender,
+  type Renderable,
+} from '@tanstack/react-table';
+import { type JSX, type ReactNode } from 'react';
+
+import {
+  type MRT_ColumnHelper,
+  type MRT_DisplayColumnDef,
+  type MRT_GroupColumnDef,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import { getAllLeafColumnDefs, getColumnId } from './column.utils';
+
+export const flexRender = _flexRender as (
+  Comp: Renderable<any>,
+  props: any,
+) => JSX.Element | ReactNode;
+
+export function createMRTColumnHelper<
+  TData extends MRT_RowData,
+>(): MRT_ColumnHelper<TData> {
+  return {
+    accessor: (accessor, column) => {
+      return typeof accessor === 'function'
+        ? ({
+            ...column,
+            accessorFn: accessor,
+          } as any)
+        : {
+            ...column,
+            accessorKey: accessor,
+          };
+    },
+    display: (column) => column as MRT_DisplayColumnDef<TData>,
+    group: (column) => column as MRT_GroupColumnDef<TData>,
+  };
+}
+
+export const createRow = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+  originalRow?: TData,
+  rowIndex = -1,
+  depth = 0,
+  subRows?: MRT_Row<TData>[],
+  parentId?: string,
+): MRT_Row<TData> =>
+  _createRow(
+    table as any,
+    'mrt-row-create',
+    originalRow ??
+      Object.assign(
+        {},
+        ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
+          [getColumnId(col)]: '',
+        })),
+      ),
+    rowIndex,
+    depth,
+    subRows as any,
+    parentId,
+  ) as MRT_Row<TData>;

package/src/utils/utils.ts

@@ -0,0 +1,23 @@
+import { type DropdownOption } from '../types';
+
+export const parseFromValuesOrFunc = <T, U>(
+  fn: ((arg: U) => T) | T | undefined,
+  arg: U,
+): T | undefined => (fn instanceof Function ? fn(arg) : fn);
+
+export const getValueAndLabel = (
+  option?: DropdownOption | null,
+): { label: string; value: string } => {
+  let label: string = '';
+  let value: string = '';
+  if (option) {
+    if (typeof option !== 'object') {
+      label = option;
+      value = option;
+    } else {
+      label = option.label ?? option.value;
+      value = option.value ?? label;
+    }
+  }
+  return { label, value };
+};

package/src/utils/virtualization.utils.ts

@@ -0,0 +1,24 @@
+import { defaultRangeExtractor, type Range } from '@tanstack/react-virtual';
+
+/**
+ * When scroll, the `draggingRow` or `draggingColumn` can be removed from document because of virtualization,
+ * then, the `dragEnd` event on `MRT_TableBodyRowGrabHandle` or `MRT_TableHeadCellGrabHandle` will not fire.
+ * We should keep the `draggingRow` or `draggingColumn` in `getVirtualItems()` to avoid this thing.
+ */
+export const extraIndexRangeExtractor = (
+  range: Range,
+  draggingIndex?: number,
+) => {
+  const newIndexes = defaultRangeExtractor(range);
+  if (draggingIndex === undefined) return newIndexes;
+  if (
+    draggingIndex >= 0 &&
+    draggingIndex < Math.max(range.startIndex - range.overscan, 0)
+  ) {
+    newIndexes.unshift(draggingIndex);
+  }
+  if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
+    newIndexes.push(draggingIndex);
+  }
+  return newIndexes;
+};

package/src/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';