material-react-table 2.6.1 → 2.8.0

package/src/types.ts

@@ -71,10 +71,10 @@ import {
   type DateTimePickerProps,
   type TimePickerProps,
 } from '@mui/x-date-pickers';
-import { type MRT_AggregationFns } from './aggregationFns';
-import { type MRT_FilterFns } from './filterFns';
+import { type MRT_AggregationFns } from './fns/aggregationFns';
+import { type MRT_FilterFns } from './fns/filterFns';
+import { type MRT_SortingFns } from './fns/sortingFns';
 import { type MRT_Icons } from './icons';
-import { type MRT_SortingFns } from './sortingFns';
 
 export type { MRT_Icons };
 export type LiteralUnion<T extends U, U = string> =
@@ -87,6 +87,17 @@ export type Xor<A, B> =
   | Prettify<A & { [k in keyof B]?: never }>
   | Prettify<B & { [k in keyof A]?: never }>;
 
+export type DropdownOption =
+  | {
+      label?: string;
+      /**
+       * @deprecated use `label` instead
+       */
+      text?: string;
+      value: any;
+    }
+  | string;
+
 export type MRT_DensityState = 'comfortable' | 'compact' | 'spacious';
 
 export type MRT_ColumnFilterFnsState = Record<string, MRT_FilterOption>;
@@ -247,6 +258,7 @@ export interface MRT_Theme {
   baseBackgroundColor?: CSSProperties['backgroundColor'];
   draggingBorderColor?: CSSProperties['borderColor'];
   matchHighlightColor?: CSSProperties['backgroundColor'];
+  menuBackgroundColor?: CSSProperties['backgroundColor'];
   pinnedRowBackgroundColor?: CSSProperties['backgroundColor'];
   selectedRowBackgroundColor?: CSSProperties['backgroundColor'];
 }
@@ -301,7 +313,7 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   getSelectedRowModel: () => MRT_RowModel<TData>;
   getState: () => MRT_TableState<TData>;
   getTopRows: () => MRT_Row<TData>[];
-  options: MRT_DefinedTableOptions<TData>;
+  options: MRT_StatefulTableOptions<TData>;
   refs: {
     bottomToolbarRef: MutableRefObject<HTMLDivElement>;
     editInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
@@ -337,6 +349,32 @@ export type MRT_DefinedTableOptions<TData extends MRT_RowData> =
     localization: MRT_Localization;
   };
 
+export type MRT_StatefulTableOptions<TData extends MRT_RowData> =
+  MRT_DefinedTableOptions<TData> & {
+    state: Pick<
+      MRT_TableState<TData>,
+      | 'columnFilterFns'
+      | 'columnOrder'
+      | 'columnSizingInfo'
+      | 'creatingRow'
+      | 'density'
+      | 'draggingColumn'
+      | 'draggingRow'
+      | 'editingCell'
+      | 'editingRow'
+      | 'globalFilterFn'
+      | 'grouping'
+      | 'hoveredColumn'
+      | 'hoveredRow'
+      | 'isFullScreen'
+      | 'pagination'
+      | 'showAlertBanner'
+      | 'showColumnFilters'
+      | 'showGlobalFilter'
+      | 'showToolbarDropZone'
+    >;
+  };
+
 export type MRT_TableState<TData extends MRT_RowData> = TableState & {
   columnFilterFns: MRT_ColumnFilterFnsState;
   creatingRow: MRT_Row<TData> | null;
@@ -456,17 +494,14 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
     LiteralUnion<string & MRT_FilterOption>
   > | null;
   columns?: MRT_ColumnDef<TData, TValue>[];
-  editSelectOptions?: (
-    | {
-        label?: string;
-        /**
-         * @deprecated use `label` instead
-         */
-        text?: string;
-        value: any;
-      }
-    | string
-  )[];
+  editSelectOptions?:
+    | ((props: {
+        cell: MRT_Cell<TData, TValue>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => DropdownOption[])
+    | DropdownOption[];
   editVariant?: 'select' | 'text';
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
@@ -476,17 +511,7 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
   enableEditing?: ((row: MRT_Row<TData>) => boolean) | boolean;
   enableFilterMatchHighlighting?: boolean;
   filterFn?: MRT_FilterFn<TData>;
-  filterSelectOptions?: (
-    | {
-        label?: string;
-        /**
-         * @deprecated use `label` instead
-         */
-        text?: string;
-        value: any;
-      }
-    | string
-  )[];
+  filterSelectOptions?: DropdownOption[];
   filterVariant?:
     | 'autocomplete'
     | 'checkbox'
@@ -505,6 +530,10 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
    * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
    */
   footer?: string;
+  /**
+   * If `layoutMode` is `'grid'` or `'grid-no-grow'`, you can specify the flex grow value for individual columns to still grow and take up remaining space, or set to `false`/0 to not grow.
+   */
+  grow?: boolean | number;
   /**
    * header must be a string. If you want custom JSX to render the header, you can also specify a `Header` option. (Capital H)
    */
@@ -919,6 +948,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   muiExpandButtonProps?:
     | ((props: {
         row: MRT_Row<TData>;
+        staticRowIndex?: number;
         table: MRT_TableInstance<TData>;
       }) => IconButtonProps)
     | IconButtonProps;
@@ -1122,6 +1152,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
   paginationDisplayMode?: 'custom' | 'default' | 'pages';
   positionActionsColumn?: 'first' | 'last';
+  positionCreatingRow?: 'bottom' | 'top' | number;
   positionExpandColumn?: 'first' | 'last';
   positionGlobalFilter?: 'left' | 'none' | 'right';
   positionPagination?: 'both' | 'bottom' | 'none' | 'top';
@@ -1170,11 +1201,13 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   renderRowActionMenuItems?: (props: {
     closeMenu: () => void;
     row: MRT_Row<TData>;
+    staticRowIndex?: number;
     table: MRT_TableInstance<TData>;
   }) => ReactNode[];
   renderRowActions?: (props: {
     cell: MRT_Cell<TData>;
     row: MRT_Row<TData>;
+    staticRowIndex?: number;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   renderToolbarAlertBannerContent?: (props: {

package/src/utils/column.utils.ts

@@ -0,0 +1,173 @@
+import { type Row } from '@tanstack/react-table';
+import {
+  type MRT_Column,
+  type MRT_ColumnDef,
+  type MRT_ColumnOrderState,
+  type MRT_DefinedColumnDef,
+  type MRT_DefinedTableOptions,
+  type MRT_FilterOption,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} 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 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);
+};

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 = 60,
+  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,26 @@
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
+
+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}

@@ -1,39 +1,46 @@
 import { type CSSProperties } from 'react';
 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, '_');
 
 export const getMRTTheme = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
   theme: Theme,
-) => ({
-  baseBackgroundColor:
-    theme.palette.mode === 'dark'
+) => {
+  const themeOverrides = parseFromValuesOrFunc(table.options.mrtTheme, theme);
+  const baseBackgroundColor =
+    themeOverrides?.baseBackgroundColor ??
+    (theme.palette.mode === 'dark'
       ? lighten(theme.palette.background.default, 0.05)
-      : theme.palette.background.default,
-  draggingBorderColor: theme.palette.primary.main,
-  matchHighlightColor:
-    theme.palette.mode === 'dark'
-      ? darken(theme.palette.warning.dark, 0.25)
-      : lighten(theme.palette.warning.light, 0.5),
-  pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1),
-  selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2),
-  ...parseFromValuesOrFunc(table.options.mrtTheme, theme),
-});
+      : theme.palette.background.default);
+  return {
+    baseBackgroundColor,
+    draggingBorderColor: theme.palette.primary.main,
+    matchHighlightColor:
+      theme.palette.mode === 'dark'
+        ? darken(theme.palette.warning.dark, 0.25)
+        : lighten(theme.palette.warning.light, 0.5),
+    menuBackgroundColor: lighten(baseBackgroundColor, 0.07),
+    pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1),
+    selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2),
+    ...themeOverrides,
+  };
+};
 
 export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
   column,
@@ -51,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,
@@ -96,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:
@@ -133,3 +146,12 @@ 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,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>;