material-react-table 2.7.0 → 2.9.0

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

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -1,290 +0,0 @@
-import { type ReactNode, type RefObject, useMemo } from 'react';
-import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
-import { MRT_TableBodyRowGrabHandle } from '../body/MRT_TableBodyRowGrabHandle';
-import { MRT_TableBodyRowPinButton } from '../body/MRT_TableBodyRowPinButton';
-import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
-import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
-import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
-import { showExpandColumn } from '../column.utils';
-import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
-import { getCommonTooltipProps } from '../style.utils';
-import {
-  type MRT_ColumnDef,
-  type MRT_DefinedTableOptions,
-  type MRT_DisplayColumnIds,
-  type MRT_Localization,
-  type MRT_RowData,
-} from '../types';
-import { MRT_DefaultDisplayColumn } from './useMRT_TableOptions';
-
-export const useMRT_DisplayColumns = <TData extends MRT_RowData>(
-  tableOptions: MRT_DefinedTableOptions<TData>,
-): MRT_ColumnDef<TData>[] => {
-  const { columnOrder, creatingRow, grouping, pagination } =
-    tableOptions.state!;
-
-  return useMemo(
-    () =>
-      [
-        makeRowPinColumn,
-        makeRowDragColumn,
-        makeRowActionsColumn,
-        makeRowExpandColumn,
-        makeRowSelectColumn,
-        makeRowNumbersColumn,
-        makeSpacerColumn,
-      ]
-        .map((makeCol) => makeCol(tableOptions))
-        .filter(Boolean) as MRT_ColumnDef<TData>[],
-    [
-      columnOrder,
-      creatingRow,
-      grouping,
-      pagination,
-      tableOptions.displayColumnDefOptions,
-      tableOptions.editDisplayMode,
-      tableOptions.enableColumnDragging,
-      tableOptions.enableColumnFilterModes,
-      tableOptions.enableColumnOrdering,
-      tableOptions.enableEditing,
-      tableOptions.enableExpandAll,
-      tableOptions.enableExpanding,
-      tableOptions.enableGrouping,
-      tableOptions.enableRowActions,
-      tableOptions.enableRowDragging,
-      tableOptions.enableRowNumbers,
-      tableOptions.enableRowOrdering,
-      tableOptions.enableRowSelection,
-      tableOptions.enableSelectAll,
-      tableOptions.groupedColumnMode,
-      tableOptions.localization,
-      tableOptions.positionActionsColumn,
-      tableOptions.positionExpandColumn,
-      tableOptions.renderDetailPanel,
-      tableOptions.renderRowActionMenuItems,
-      tableOptions.renderRowActions,
-    ],
-  );
-};
-
-function defaultDisplayColumnProps<TData extends MRT_RowData>(
-  {
-    defaultDisplayColumn,
-    displayColumnDefOptions,
-    localization,
-  }: MRT_DefinedTableOptions<TData>,
-  id: MRT_DisplayColumnIds,
-  header?: keyof MRT_Localization,
-  size = 60,
-) {
-  return {
-    ...defaultDisplayColumn,
-    header: header ? localization[header]! : '',
-    size,
-    ...displayColumnDefOptions?.[id],
-    id,
-  } as const;
-}
-
-function makeRowPinColumn<TData extends MRT_RowData>(
-  tableOptions: MRT_DefinedTableOptions<TData>,
-): MRT_ColumnDef<TData> | null {
-  const id: MRT_DisplayColumnIds = 'mrt-row-pin';
-  const { columnOrder } = tableOptions.state!;
-  if (columnOrder?.includes(id)) {
-    return {
-      Cell: ({ row, table }) => (
-        <MRT_TableBodyRowPinButton row={row} table={table} />
-      ),
-      ...defaultDisplayColumnProps(tableOptions, id, 'pin'),
-    };
-  }
-  return null;
-}
-
-function makeRowDragColumn<TData extends MRT_RowData>(
-  tableOptions: MRT_DefinedTableOptions<TData>,
-): MRT_ColumnDef<TData> | null {
-  const id: MRT_DisplayColumnIds = 'mrt-row-drag';
-  const { columnOrder } = tableOptions.state!;
-  if (columnOrder?.includes(id)) {
-    return {
-      Cell: ({ row, rowRef, table }) => (
-        <MRT_TableBodyRowGrabHandle
-          row={row}
-          rowRef={rowRef as RefObject<HTMLTableRowElement>}
-          table={table}
-        />
-      ),
-      ...defaultDisplayColumnProps(tableOptions, id, 'move'),
-    };
-  }
-  return null;
-}
-
-function makeRowActionsColumn<TData extends MRT_RowData>(
-  tableOptions: MRT_DefinedTableOptions<TData>,
-): MRT_ColumnDef<TData> | null {
-  const id: MRT_DisplayColumnIds = 'mrt-row-actions';
-  const { columnOrder, creatingRow } = tableOptions.state!;
-  if (
-    columnOrder?.includes(id) ||
-    (creatingRow && tableOptions.createDisplayMode === 'row')
-  ) {
-    return {
-      Cell: ({ cell, row, staticRowIndex, table }) => (
-        <MRT_ToggleRowActionMenuButton
-          cell={cell}
-          row={row}
-          staticRowIndex={staticRowIndex}
-          table={table}
-        />
-      ),
-      ...defaultDisplayColumnProps(tableOptions, id, 'actions'),
-    };
-  }
-  return null;
-}
-
-function makeRowExpandColumn<TData extends MRT_RowData>(
-  tableOptions: MRT_DefinedTableOptions<TData>,
-): MRT_ColumnDef<TData> | null {
-  const id: MRT_DisplayColumnIds = 'mrt-row-expand';
-  const { columnOrder, grouping } = tableOptions.state!;
-  if (columnOrder?.includes(id) && showExpandColumn(tableOptions, grouping)) {
-    const alignProps =
-      tableOptions.positionExpandColumn === 'last'
-        ? ({
-            align: 'right',
-          } as const)
-        : undefined;
-
-    return {
-      Cell: ({ cell, column, row, staticRowIndex, table }) => {
-        const expandButtonProps = { row, staticRowIndex, table };
-        const subRowsLength = row.subRows?.length;
-        if (
-          tableOptions.groupedColumnMode === 'remove' &&
-          row.groupingColumnId
-        ) {
-          return (
-            <Stack alignItems="center" flexDirection="row" gap="0.25rem">
-              <MRT_ExpandButton {...expandButtonProps} />
-              <Tooltip
-                {...getCommonTooltipProps('right')}
-                title={table.getColumn(row.groupingColumnId).columnDef.header}
-              >
-                <span>{row.groupingValue as ReactNode}</span>
-              </Tooltip>
-              {!!subRowsLength && <span>({subRowsLength})</span>}
-            </Stack>
-          );
-        } else {
-          return (
-            <>
-              <MRT_ExpandButton {...expandButtonProps} />
-              {column.columnDef.GroupedCell?.({ cell, column, row, table })}
-            </>
-          );
-        }
-      },
-      Header: tableOptions.enableExpandAll
-        ? ({ table }) => {
-            return (
-              <>
-                <MRT_ExpandAllButton table={table} />
-                {tableOptions.groupedColumnMode === 'remove' &&
-                  grouping
-                    ?.map(
-                      (groupedColumnId) =>
-                        table.getColumn(groupedColumnId).columnDef.header,
-                    )
-                    ?.join(', ')}
-              </>
-            );
-          }
-        : undefined,
-      muiTableBodyCellProps: alignProps,
-      muiTableHeadCellProps: alignProps,
-      ...defaultDisplayColumnProps(
-        tableOptions,
-        id,
-        'expand',
-        tableOptions.groupedColumnMode === 'remove'
-          ? tableOptions?.defaultColumn?.size
-          : 60,
-      ),
-    };
-  }
-  return null;
-}
-
-function makeRowSelectColumn<TData extends MRT_RowData>(
-  tableOptions: MRT_DefinedTableOptions<TData>,
-): MRT_ColumnDef<TData> | null {
-  const id: MRT_DisplayColumnIds = 'mrt-row-select';
-  const { columnOrder } = tableOptions.state!;
-  if (columnOrder?.includes(id)) {
-    return {
-      Cell: ({ row, staticRowIndex, table }) => (
-        <MRT_SelectCheckbox
-          row={row}
-          staticRowIndex={staticRowIndex}
-          table={table}
-        />
-      ),
-      Header:
-        tableOptions.enableSelectAll && tableOptions.enableMultiRowSelection
-          ? ({ table }) => <MRT_SelectCheckbox selectAll table={table} />
-          : undefined,
-      ...defaultDisplayColumnProps(tableOptions, id, 'select'),
-    };
-  }
-  return null;
-}
-
-function makeRowNumbersColumn<TData extends MRT_RowData>(
-  tableOptions: MRT_DefinedTableOptions<TData>,
-): MRT_ColumnDef<TData> | null {
-  const id: MRT_DisplayColumnIds = 'mrt-row-numbers';
-  const { columnOrder, pagination } = tableOptions.state!;
-  if (columnOrder?.includes(id) || tableOptions.enableRowNumbers)
-    return {
-      Cell: ({ row, staticRowIndex }) =>
-        ((tableOptions.rowNumberDisplayMode === 'static'
-          ? (staticRowIndex || 0) +
-            (pagination?.pageSize || 0) * (pagination?.pageIndex || 0)
-          : row.index) ?? 0) + 1,
-      Header: () => tableOptions.localization.rowNumber,
-      ...defaultDisplayColumnProps(tableOptions, id, 'rowNumbers'),
-    };
-  return null;
-}
-
-const blankColProps = {
-  children: null,
-  sx: {
-    flex: '1 0 auto',
-    minWidth: 0,
-    p: 0,
-    width: 0,
-  },
-};
-
-function makeSpacerColumn<TData extends MRT_RowData>(
-  tableOptions: MRT_DefinedTableOptions<TData>,
-): MRT_ColumnDef<TData> | null {
-  const id: MRT_DisplayColumnIds = 'mrt-row-spacer';
-  const { columnOrder } = tableOptions.state!;
-  if (columnOrder?.includes(id)) {
-    return {
-      ...defaultDisplayColumnProps(tableOptions, id, undefined, 0),
-      ...MRT_DefaultDisplayColumn,
-      muiTableBodyCellProps: blankColProps,
-      muiTableFooterCellProps: blankColProps,
-      muiTableHeadCellProps: blankColProps,
-    };
-  }
-  return null;
-}