material-react-table 2.7.0 → 2.8.0

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, '_');
 
@@ -58,26 +58,32 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
   const {
     options: { layoutMode },
   } = table;
+  const { columnDef } = column;
+
   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${header && layoutMode === 'grid-no-grow' ? ` + ${header?.subHeaders?.length ?? 0}rem` : ''})`,
   };
 
   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`;
   }
 
   return {
     backgroundColor:
-      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+      column.getIsPinned() && columnDef.columnDefType !== 'group'
         ? alpha(
             darken(
               getMRTTheme(table, theme).baseBackgroundColor,
@@ -103,7 +109,7 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
         ? 0.5
         : 1,
     position:
-      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+      column.getIsPinned() && columnDef.columnDefType !== 'group'
         ? 'sticky'
         : undefined,
     right:

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;
+};

package/src/column.utils.ts

@@ -1,361 +0,0 @@
-import { type ReactNode } from 'react';
-import {
-  createRow as _createRow,
-  flexRender as _flexRender,
-  type Renderable,
-  type Row,
-} from '@tanstack/react-table';
-import { type Range, defaultRangeExtractor } from '@tanstack/react-virtual';
-import {
-  type MRT_Column,
-  type MRT_ColumnDef,
-  type MRT_ColumnHelper,
-  type MRT_ColumnOrderState,
-  type MRT_DefinedColumnDef,
-  type MRT_DefinedTableOptions,
-  type MRT_DisplayColumnDef,
-  type MRT_DisplayColumnIds,
-  type MRT_FilterOption,
-  type MRT_GroupColumnDef,
-  type MRT_GroupingState,
-  type MRT_Row,
-  type MRT_RowData,
-  type MRT_TableInstance,
-  type MRT_TableOptions,
-} from './types';
-
-export const getColumnId = <TData extends MRT_RowData>(
-  columnDef: MRT_ColumnDef<TData>,
-): string =>
-  columnDef.id ?? columnDef.accessorKey?.toString?.() ?? columnDef.header;
-
-export const getAllLeafColumnDefs = <TData extends MRT_RowData>(
-  columns: MRT_ColumnDef<TData>[],
-): MRT_ColumnDef<TData>[] => {
-  const allLeafColumnDefs: MRT_ColumnDef<TData>[] = [];
-  const getLeafColumns = (cols: MRT_ColumnDef<TData>[]) => {
-    cols.forEach((col) => {
-      if (col.columns) {
-        getLeafColumns(col.columns);
-      } else {
-        allLeafColumnDefs.push(col);
-      }
-    });
-  };
-  getLeafColumns(columns);
-  return allLeafColumnDefs;
-};
-
-export const prepareColumns = <TData extends MRT_RowData>({
-  columnDefs,
-  tableOptions,
-}: {
-  columnDefs: MRT_ColumnDef<TData>[];
-  tableOptions: MRT_DefinedTableOptions<TData>;
-}): MRT_DefinedColumnDef<TData>[] => {
-  const {
-    aggregationFns = {},
-    defaultDisplayColumn,
-    filterFns = {},
-    sortingFns = {},
-    state: { columnFilterFns = {} } = {},
-  } = tableOptions;
-  return columnDefs.map((columnDef) => {
-    //assign columnId
-    if (!columnDef.id) columnDef.id = getColumnId(columnDef);
-    //assign columnDefType
-    if (!columnDef.columnDefType) columnDef.columnDefType = 'data';
-    if (columnDef.columns?.length) {
-      columnDef.columnDefType = 'group';
-      //recursively prepare columns if this is a group column
-      columnDef.columns = prepareColumns({
-        columnDefs: columnDef.columns,
-        tableOptions,
-      });
-    } else if (columnDef.columnDefType === 'data') {
-      //assign aggregationFns if multiple aggregationFns are provided
-      if (Array.isArray(columnDef.aggregationFn)) {
-        const aggFns = columnDef.aggregationFn as string[];
-        columnDef.aggregationFn = (
-          columnId: string,
-          leafRows: Row<TData>[],
-          childRows: Row<TData>[],
-        ) =>
-          aggFns.map(
-            (fn) => aggregationFns[fn]?.(columnId, leafRows, childRows),
-          );
-      }
-
-      //assign filterFns
-      if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
-        columnDef.filterFn =
-          filterFns[columnFilterFns[columnDef.id]] ?? filterFns.fuzzy;
-        (columnDef as MRT_DefinedColumnDef<TData>)._filterFn =
-          columnFilterFns[columnDef.id];
-      }
-
-      //assign sortingFns
-      if (Object.keys(sortingFns).includes(columnDef.sortingFn as string)) {
-        // @ts-ignore
-        columnDef.sortingFn = sortingFns[columnDef.sortingFn];
-      }
-    } else if (columnDef.columnDefType === 'display') {
-      columnDef = {
-        ...(defaultDisplayColumn as MRT_ColumnDef<TData>),
-        ...columnDef,
-      };
-    }
-    return columnDef;
-  }) as MRT_DefinedColumnDef<TData>[];
-};
-
-export const reorderColumn = <TData extends MRT_RowData>(
-  draggedColumn: MRT_Column<TData>,
-  targetColumn: MRT_Column<TData>,
-  columnOrder: MRT_ColumnOrderState,
-): MRT_ColumnOrderState => {
-  if (draggedColumn.getCanPin()) {
-    draggedColumn.pin(targetColumn.getIsPinned());
-  }
-  const newColumnOrder = [...columnOrder];
-  newColumnOrder.splice(
-    newColumnOrder.indexOf(targetColumn.id),
-    0,
-    newColumnOrder.splice(newColumnOrder.indexOf(draggedColumn.id), 1)[0],
-  );
-  return newColumnOrder;
-};
-
-export const showExpandColumn = <TData extends MRT_RowData>(
-  props: MRT_TableOptions<TData>,
-  grouping?: MRT_GroupingState,
-) =>
-  !!(
-    props.enableExpanding ||
-    (props.enableGrouping && (grouping === undefined || grouping?.length)) ||
-    props.renderDetailPanel
-  );
-
-export const getLeadingDisplayColumnIds = <TData extends MRT_RowData>(
-  props: MRT_TableOptions<TData>,
-) =>
-  [
-    props.enableRowPinning &&
-      !props.rowPinningDisplayMode?.startsWith('select') &&
-      'mrt-row-pin',
-    (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
-    props.positionActionsColumn === 'first' &&
-      (props.enableRowActions ||
-        (props.enableEditing &&
-          ['modal', 'row'].includes(props.editDisplayMode ?? ''))) &&
-      'mrt-row-actions',
-    props.positionExpandColumn === 'first' &&
-      showExpandColumn(props) &&
-      'mrt-row-expand',
-    props.enableRowSelection && 'mrt-row-select',
-    props.enableRowNumbers && 'mrt-row-numbers',
-  ].filter(Boolean) as MRT_DisplayColumnIds[];
-
-export const getTrailingDisplayColumnIds = <TData extends MRT_RowData>(
-  props: MRT_TableOptions<TData>,
-) =>
-  [
-    props.positionActionsColumn === 'last' &&
-      (props.enableRowActions ||
-        (props.enableEditing &&
-          ['modal', 'row'].includes(props.editDisplayMode ?? ''))) &&
-      'mrt-row-actions',
-    props.positionExpandColumn === 'last' &&
-      showExpandColumn(props) &&
-      'mrt-row-expand',
-    props.layoutMode === 'grid-no-grow' && 'mrt-row-spacer',
-  ].filter(Boolean) as MRT_DisplayColumnIds[];
-
-export const getDefaultColumnOrderIds = <TData extends MRT_RowData>(
-  props: MRT_TableOptions<TData>,
-) => {
-  const leadingDisplayCols: string[] = getLeadingDisplayColumnIds(props);
-  const trailingDisplayCols: string[] = getTrailingDisplayColumnIds(props);
-  const allLeafColumnDefs = getAllLeafColumnDefs(props.columns)
-    .map((columnDef) => getColumnId(columnDef))
-    .filter(
-      (columnId) =>
-        !leadingDisplayCols.includes(columnId) &&
-        !trailingDisplayCols.includes(columnId),
-    );
-  return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
-};
-
-export const getDefaultColumnFilterFn = <TData extends MRT_RowData>(
-  columnDef: MRT_ColumnDef<TData>,
-): MRT_FilterOption => {
-  if (columnDef.filterVariant === 'multi-select') return 'arrIncludesSome';
-  if (columnDef.filterVariant?.includes('range')) return 'betweenInclusive';
-  if (
-    columnDef.filterVariant === 'select' ||
-    columnDef.filterVariant === 'checkbox'
-  )
-    return 'equals';
-  return 'fuzzy';
-};
-
-export const getIsFirstColumn = <TData extends MRT_RowData>(
-  column: MRT_Column<TData>,
-  table: MRT_TableInstance<TData>,
-) => {
-  const leftColumns = table.getLeftVisibleLeafColumns();
-  return leftColumns.length
-    ? leftColumns[0].id === column.id
-    : table.getVisibleLeafColumns()[0].id === column.id;
-};
-
-export const getIsLastColumn = <TData extends MRT_RowData>(
-  column: MRT_Column<TData>,
-  table: MRT_TableInstance<TData>,
-) => {
-  const rightColumns = table.getRightVisibleLeafColumns();
-  const columns = table.getVisibleLeafColumns();
-  return rightColumns.length
-    ? rightColumns[rightColumns.length - 1].id === column.id
-    : columns[columns.length - 1].id === column.id;
-};
-
-export const getIsLastLeftPinnedColumn = <TData extends MRT_RowData>(
-  table: MRT_TableInstance<TData>,
-  column: MRT_Column<TData>,
-) => {
-  return (
-    column.getIsPinned() === 'left' &&
-    table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
-  );
-};
-
-export const getIsFirstRightPinnedColumn = <TData extends MRT_RowData>(
-  column: MRT_Column<TData>,
-) => {
-  return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
-};
-
-export const getTotalRight = <TData extends MRT_RowData>(
-  table: MRT_TableInstance<TData>,
-  column: MRT_Column<TData>,
-) => {
-  return table
-    .getRightLeafHeaders()
-    .slice(column.getPinnedIndex() + 1)
-    .reduce((acc, col) => acc + col.getSize(), 0);
-};
-
-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)
-  );
-};
-
-export const parseFromValuesOrFunc = <T, U>(
-  fn: ((arg: U) => T) | T | undefined,
-  arg: U,
-): T | undefined => (fn instanceof Function ? fn(arg) : fn);
-
-export const flexRender = _flexRender as (
-  Comp: Renderable<any>,
-  props: any,
-) => JSX.Element | ReactNode;
-
-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>;
-
-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;
-};
-
-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 getValueAndLabel = (
-  option: { label?: string; text?: string; value: string } | string,
-): { 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 };
-};