material-react-table 2.7.0 → 2.9.0

package/src/utils/displayColumn.utils.ts

@@ -0,0 +1,134 @@
+import {
+  type MRT_DefinedTableOptions,
+  type MRT_DisplayColumnIds,
+  type MRT_Localization,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../types';
+import { getAllLeafColumnDefs, getColumnId } from './column.utils';
+
+export function defaultDisplayColumnProps<TData extends MRT_RowData>({
+  header,
+  id,
+  size,
+  tableOptions,
+}: {
+  header?: keyof MRT_Localization;
+  id: MRT_DisplayColumnIds;
+  size: number;
+  tableOptions: MRT_DefinedTableOptions<TData>;
+}) {
+  const { defaultDisplayColumn, displayColumnDefOptions, localization } =
+    tableOptions;
+  return {
+    ...defaultDisplayColumn,
+    header: header ? localization[header]! : '',
+    size,
+    ...displayColumnDefOptions?.[id],
+    id,
+  } as const;
+}
+
+export const showRowPinningColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+) => {
+  const { enableRowPinning, rowPinningDisplayMode } = tableOptions;
+  return enableRowPinning && !rowPinningDisplayMode?.startsWith('select');
+};
+
+export const showRowDragColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+) => {
+  const { enableRowDragging, enableRowOrdering } = tableOptions;
+  return enableRowDragging || enableRowOrdering;
+};
+
+export const showRowExpandColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+) => {
+  const {
+    enableExpanding,
+    enableGrouping,
+    renderDetailPanel,
+    state: { grouping },
+  } = tableOptions;
+  return !!(
+    enableExpanding ||
+    (enableGrouping && (grouping === undefined || grouping?.length)) ||
+    renderDetailPanel
+  );
+};
+
+export const showRowActionsColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+) => {
+  const {
+    createDisplayMode,
+    editDisplayMode,
+    enableEditing,
+    enableRowActions,
+    state: { creatingRow },
+  } = tableOptions;
+  return (
+    enableRowActions ||
+    (creatingRow && createDisplayMode === 'row') ||
+    (enableEditing && ['modal', 'row'].includes(editDisplayMode ?? ''))
+  );
+};
+
+export const showRowSelectionColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+) => tableOptions.enableRowSelection;
+
+export const showRowNumbersColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+) => tableOptions.enableRowNumbers;
+
+export const showRowSpacerColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+) => tableOptions.layoutMode === 'grid-no-grow';
+
+export const getLeadingDisplayColumnIds = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+) =>
+  [
+    showRowPinningColumn(tableOptions) && 'mrt-row-pin',
+    showRowDragColumn(tableOptions) && 'mrt-row-drag',
+    tableOptions.positionActionsColumn === 'first' &&
+      showRowActionsColumn(tableOptions) &&
+      'mrt-row-actions',
+    tableOptions.positionExpandColumn === 'first' &&
+      showRowExpandColumn(tableOptions) &&
+      'mrt-row-expand',
+    showRowSelectionColumn(tableOptions) && 'mrt-row-select',
+    showRowNumbersColumn(tableOptions) && 'mrt-row-numbers',
+  ].filter(Boolean) as MRT_DisplayColumnIds[];
+
+export const getTrailingDisplayColumnIds = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+) =>
+  [
+    tableOptions.positionActionsColumn === 'last' &&
+      showRowActionsColumn(tableOptions) &&
+      'mrt-row-actions',
+    tableOptions.positionExpandColumn === 'last' &&
+      showRowExpandColumn(tableOptions) &&
+      'mrt-row-expand',
+    showRowSpacerColumn(tableOptions) && 'mrt-row-spacer',
+  ].filter(Boolean) as MRT_DisplayColumnIds[];
+
+export const getDefaultColumnOrderIds = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+) => {
+  const leadingDisplayCols: string[] = getLeadingDisplayColumnIds(tableOptions);
+  const trailingDisplayCols: string[] =
+    getTrailingDisplayColumnIds(tableOptions);
+  const allLeafColumnDefs = getAllLeafColumnDefs(tableOptions.columns)
+    .map((columnDef) => getColumnId(columnDef))
+    .filter(
+      (columnId) =>
+        !leadingDisplayCols.includes(columnId) &&
+        !trailingDisplayCols.includes(columnId),
+    );
+  return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
+};

package/src/utils/row.utils.ts

@@ -0,0 +1,47 @@
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import { parseFromValuesOrFunc } from './utils';
+
+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 getCanRankRows = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+) => {
+  const { getState, options } = table;
+  const {
+    enableGlobalFilterRankedResults,
+    manualExpanding,
+    manualFiltering,
+    manualGrouping,
+    manualSorting,
+  } = options;
+  const { expanded, globalFilterFn } = getState();
+
+  return (
+    !manualExpanding &&
+    !manualFiltering &&
+    !manualGrouping &&
+    !manualSorting &&
+    enableGlobalFilterRankedResults &&
+    globalFilterFn === 'fuzzy' &&
+    expanded !== true &&
+    !Object.values(expanded).some(Boolean)
+  );
+};

package/src/{style.utils.ts → utils/style.utils.ts}

@@ -3,18 +3,18 @@ import { type TableCellProps } from '@mui/material/TableCell';
 import { type TooltipProps } from '@mui/material/Tooltip';
 import { alpha, darken, lighten } from '@mui/material/styles';
 import { type Theme } from '@mui/material/styles';
-import {
-  getIsFirstRightPinnedColumn,
-  getIsLastLeftPinnedColumn,
-  getTotalRight,
-  parseFromValuesOrFunc,
-} from './column.utils';
 import {
   type MRT_Column,
   type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
-} from './types';
+} from '../types';
+import {
+  getIsFirstRightPinnedColumn,
+  getIsLastLeftPinnedColumn,
+  getTotalRight,
+} from '../utils/column.utils';
+import { parseFromValuesOrFunc } from './utils';
 
 export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
 
@@ -42,6 +42,49 @@ export const getMRTTheme = <TData extends MRT_RowData>(
   };
 };
 
+export const pinnedBeforeAfterStyles = {
+  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 } = getMRTTheme(table, theme);
+  return {
+    '&[data-pinned="true"]': {
+      '&:before': {
+        backgroundColor: alpha(
+          darken(
+            baseBackgroundColor,
+            theme.palette.mode === 'dark' ? 0.05 : 0.01,
+          ),
+          0.97,
+        ),
+        boxShadow: column
+          ? getIsLastLeftPinnedColumn(table, column)
+            ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+            : getIsFirstRightPinnedColumn(column)
+              ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+              : undefined
+          : undefined,
+        ...pinnedBeforeAfterStyles,
+      },
+    },
+  };
+};
+
 export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
   column,
   header,
@@ -56,63 +99,66 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
   theme: Theme;
 }) => {
   const {
-    options: { layoutMode },
+    options: { enableColumnVirtualization, layoutMode },
   } = table;
+  const { columnDef } = column;
+
+  const isColumnPinned =
+    columnDef.columnDefType !== 'group' && column.getIsPinned();
+
   const widthStyles: CSSProperties = {
     minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
       header?.id ?? column.id,
-    )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
+    )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
     width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
       header?.id ?? column.id,
-    )}-size) * 1px${header ? ` + ${header?.subHeaders?.length ?? 0}rem` : ''})`,
+    )}-size) * 1px)`,
   };
 
   if (layoutMode === 'grid') {
-    widthStyles.flex = `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) 0 auto`;
+    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 = '0 0 auto';
+    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'
+            ? `${getTotalRight(table, column)}px`
+            : undefined,
+        zIndex: 1,
+      }
+    : {};
+
   return {
-    backgroundColor:
-      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-        ? alpha(
-            darken(
-              getMRTTheme(table, theme).baseBackgroundColor,
-              theme.palette.mode === 'dark' ? 0.05 : 0.01,
-            ),
-            0.97,
-          )
-        : 'inherit',
+    backgroundColor: 'inherit',
     backgroundImage: 'inherit',
-    boxShadow: getIsLastLeftPinnedColumn(table, column)
-      ? `-4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
-      : getIsFirstRightPinnedColumn(column)
-        ? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
-        : undefined,
     display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-    left:
-      column.getIsPinned() === 'left'
-        ? `${column.getStart('left')}px`
-        : undefined,
     opacity:
       table.getState().draggingColumn?.id === column.id ||
       table.getState().hoveredColumn?.id === column.id
         ? 0.5
         : 1,
-    position:
-      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-        ? 'sticky'
-        : undefined,
-    right:
-      column.getIsPinned() === 'right'
-        ? `${getTotalRight(table, column)}px`
-        : undefined,
-    transition: table.options.enableColumnVirtualization
+    position: 'relative',
+    transition: enableColumnVirtualization
       ? 'none'
       : `padding 150ms ease-in-out`,
+    zIndex: 0,
+    ...pinnedStyles,
     ...widthStyles,
     ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
   };

package/src/utils/tanstack.helpers.ts

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react';
+import {
+  createRow as _createRow,
+  flexRender as _flexRender,
+  type Renderable,
+} from '@tanstack/react-table';
+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,
+): { 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.text ?? option.value;
+      value = option.value ?? label;
+    }
+  }
+  return { label, value };
+};

package/src/utils/virtualization.utils.ts

@@ -0,0 +1,19 @@
+import { type Range, defaultRangeExtractor } from '@tanstack/react-virtual';
+
+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;
+};