material-react-table 2.7.0 → 2.9.0

package/src/hooks/useMRT_TableOptions.ts

@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
-import { MRT_AggregationFns } from '../aggregationFns';
-import { MRT_FilterFns } from '../filterFns';
+import { MRT_AggregationFns } from '../fns/aggregationFns';
+import { MRT_FilterFns } from '../fns/filterFns';
+import { MRT_SortingFns } from '../fns/sortingFns';
 import { MRT_Default_Icons } from '../icons';
 import { MRT_Localization_EN } from '../locales/en';
-import { MRT_SortingFns } from '../sortingFns';
 import {
   type MRT_DefinedTableOptions,
   type MRT_RowData,
@@ -51,6 +51,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enableColumnOrdering = false,
   enableColumnPinning = false,
   enableColumnResizing = false,
+  enableColumnVirtualization,
   enableDensityToggle = true,
   enableExpandAll = true,
   enableExpanding,
@@ -66,6 +67,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enablePagination = true,
   enableRowPinning = false,
   enableRowSelection = false,
+  enableRowVirtualization,
   enableSelectAll = true,
   enableSorting = true,
   enableStickyHeader = false,
@@ -96,31 +98,37 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   ...rest
 }: MRT_TableOptions<TData>) => {
   const theme = useTheme();
-  const _icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), [icons]);
-  const _localization = useMemo(
+
+  icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), [icons]);
+  localization = useMemo(
     () => ({
       ...MRT_Localization_EN,
       ...localization,
     }),
     [localization],
   );
-  const _aggregationFns = useMemo(
+  aggregationFns = useMemo(
     () => ({ ...MRT_AggregationFns, ...aggregationFns }),
     [],
   );
-  const _filterFns = useMemo(() => ({ ...MRT_FilterFns, ...filterFns }), []);
-  const _sortingFns = useMemo(() => ({ ...MRT_SortingFns, ...sortingFns }), []);
-  const _defaultColumn = useMemo(
+  filterFns = useMemo(() => ({ ...MRT_FilterFns, ...filterFns }), []);
+  sortingFns = useMemo(() => ({ ...MRT_SortingFns, ...sortingFns }), []);
+  defaultColumn = useMemo(
     () => ({ ...MRT_DefaultColumn, ...defaultColumn }),
     [defaultColumn],
   );
-  const _defaultDisplayColumn = useMemo(
+  defaultDisplayColumn = useMemo(
     () => ({
       ...MRT_DefaultDisplayColumn,
       ...defaultDisplayColumn,
     }),
     [defaultDisplayColumn],
   );
+  //cannot be changed after initialization
+  [enableColumnVirtualization, enableRowVirtualization] = useMemo(
+    () => [enableColumnVirtualization, enableRowVirtualization],
+    [],
+  );
 
   if (!columnResizeDirection) {
     columnResizeDirection = theme.direction || 'ltr';
@@ -130,12 +138,12 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
   if (
     layoutMode === 'semantic' &&
-    (rest.enableRowVirtualization || rest.enableColumnVirtualization)
+    (enableRowVirtualization || enableColumnVirtualization)
   ) {
     layoutMode = 'grid';
   }
 
-  if (rest.enableRowVirtualization) {
+  if (enableRowVirtualization) {
     enableStickyHeader = true;
   }
 
@@ -151,14 +159,14 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   }
 
   return {
-    aggregationFns: _aggregationFns,
+    aggregationFns,
     autoResetExpanded,
     columnFilterDisplayMode,
     columnResizeDirection,
     columnResizeMode,
     createDisplayMode,
-    defaultColumn: _defaultColumn,
-    defaultDisplayColumn: _defaultDisplayColumn,
+    defaultColumn,
+    defaultDisplayColumn,
     editDisplayMode,
     enableBottomToolbar,
     enableColumnActions,
@@ -166,6 +174,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enableColumnOrdering,
     enableColumnPinning,
     enableColumnResizing,
+    enableColumnVirtualization,
     enableDensityToggle,
     enableExpandAll,
     enableExpanding,
@@ -181,6 +190,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enablePagination,
     enableRowPinning,
     enableRowSelection,
+    enableRowVirtualization,
     enableSelectAll,
     enableSorting,
     enableStickyHeader,
@@ -188,10 +198,10 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enableTableHead,
     enableToolbarInternalActions,
     enableTopToolbar,
-    filterFns: _filterFns,
-    icons: _icons,
+    filterFns,
+    icons,
     layoutMode,
-    localization: _localization,
+    localization,
     manualFiltering,
     manualGrouping,
     manualPagination,
@@ -207,7 +217,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     rowNumberDisplayMode,
     rowPinningDisplayMode,
     selectAllMode,
-    sortingFns: _sortingFns,
+    sortingFns,
     ...rest,
-  };
+  } as MRT_DefinedTableOptions<TData>;
 };

package/src/{useMaterialReactTable.ts → hooks/useMaterialReactTable.ts}

@@ -1,10 +1,10 @@
-import { useMRT_TableInstance } from './hooks/useMRT_TableInstance';
-import { useMRT_TableOptions } from './hooks/useMRT_TableOptions';
 import {
   type MRT_RowData,
   type MRT_TableInstance,
   type MRT_TableOptions,
-} from './types';
+} from '../types';
+import { useMRT_TableInstance } from './useMRT_TableInstance';
+import { useMRT_TableOptions } from './useMRT_TableOptions';
 
 export const useMaterialReactTable = <TData extends MRT_RowData>(
   tableOptions: MRT_TableOptions<TData>,

package/src/index.ts

@@ -1,92 +1,89 @@
-//root
-export * from './MaterialReactTable';
-export * from './aggregationFns';
-export * from './column.utils';
-export * from './filterFns';
-export * from './sortingFns';
-export * from './style.utils';
 export * from './types';
-export * from './useMaterialReactTable';
+
+//helpers
+export * from './utils/tanstack.helpers';
+export * from './utils/column.utils';
+export * from './utils/displayColumn.utils';
+export * from './utils/row.utils';
+
+//fns
+export * from './fns/aggregationFns';
+export * from './fns/filterFns';
+export * from './fns/sortingFns';
 
 //hooks
+export * from './hooks/useMaterialReactTable';
 export * from './hooks/useMRT_ColumnVirtualizer';
-export * from './hooks/useMRT_DisplayColumns';
 export * from './hooks/useMRT_Effects';
 export * from './hooks/useMRT_RowVirtualizer';
 export * from './hooks/useMRT_Rows';
 export * from './hooks/useMRT_TableInstance';
 export * from './hooks/useMRT_TableOptions';
 
-//body
-export * from './body/MRT_TableBody';
-export * from './body/MRT_TableBodyCell';
-export * from './body/MRT_TableBodyCellValue';
-export * from './body/MRT_TableBodyRow';
-export * from './body/MRT_TableBodyRowGrabHandle';
-export * from './body/MRT_TableBodyRowPinButton';
-export * from './body/MRT_TableDetailPanel';
-
-//buttons
-export * from './buttons/MRT_ColumnPinningButtons';
-export * from './buttons/MRT_CopyButton';
-export * from './buttons/MRT_EditActionButtons';
-export * from './buttons/MRT_ExpandAllButton';
-export * from './buttons/MRT_ExpandButton';
-export * from './buttons/MRT_GrabHandleButton';
-export * from './buttons/MRT_RowPinButton';
-export * from './buttons/MRT_ShowHideColumnsButton';
-export * from './buttons/MRT_ToggleDensePaddingButton';
-export * from './buttons/MRT_ToggleFiltersButton';
-export * from './buttons/MRT_ToggleFullScreenButton';
-export * from './buttons/MRT_ToggleGlobalFilterButton';
-export * from './buttons/MRT_ToggleRowActionMenuButton';
-
-//footer
-export * from './footer/MRT_TableFooter';
-export * from './footer/MRT_TableFooterCell';
-export * from './footer/MRT_TableFooterRow';
-
-//head
-export * from './head/MRT_TableHead';
-export * from './head/MRT_TableHeadCell';
-export * from './head/MRT_TableHeadCellColumnActionsButton';
-export * from './head/MRT_TableHeadCellFilterContainer';
-export * from './head/MRT_TableHeadCellFilterLabel';
-export * from './head/MRT_TableHeadCellGrabHandle';
-export * from './head/MRT_TableHeadCellResizeHandle';
-export * from './head/MRT_TableHeadCellSortLabel';
-export * from './head/MRT_TableHeadRow';
-
-//inputs
-export * from './inputs/MRT_EditCellTextField';
-export * from './inputs/MRT_FilterCheckbox';
-export * from './inputs/MRT_FilterRangeFields';
-export * from './inputs/MRT_FilterRangeSlider';
-export * from './inputs/MRT_FilterTextField';
-export * from './inputs/MRT_GlobalFilterTextField';
-export * from './inputs/MRT_SelectCheckbox';
-
-//menus
-export * from './menus/MRT_ColumnActionMenu';
-export * from './menus/MRT_FilterOptionMenu';
-export * from './menus/MRT_RowActionMenu';
-export * from './menus/MRT_ShowHideColumnsMenu';
-export * from './menus/MRT_ShowHideColumnsMenuItems';
-
-//modals
-export * from './modals/MRT_EditRowModal';
-
-//table
-export * from './table/MRT_Table';
-export * from './table/MRT_TableContainer';
-export * from './table/MRT_TableLoadingOverlay';
-export * from './table/MRT_TablePaper';
-
-//toolbar
-export * from './toolbar/MRT_BottomToolbar';
-export * from './toolbar/MRT_LinearProgressBar';
-export * from './toolbar/MRT_TablePagination';
-export * from './toolbar/MRT_ToolbarAlertBanner';
-export * from './toolbar/MRT_ToolbarDropZone';
-export * from './toolbar/MRT_ToolbarInternalButtons';
-export * from './toolbar/MRT_TopToolbar';
+//components
+export * from './components/MaterialReactTable';
+//body components
+export * from './components/body/MRT_TableBody';
+export * from './components/body/MRT_TableBodyCell';
+export * from './components/body/MRT_TableBodyCellValue';
+export * from './components/body/MRT_TableBodyRow';
+export * from './components/body/MRT_TableBodyRowGrabHandle';
+export * from './components/body/MRT_TableBodyRowPinButton';
+export * from './components/body/MRT_TableDetailPanel';
+//button components
+export * from './components/buttons/MRT_ColumnPinningButtons';
+export * from './components/buttons/MRT_CopyButton';
+export * from './components/buttons/MRT_EditActionButtons';
+export * from './components/buttons/MRT_ExpandAllButton';
+export * from './components/buttons/MRT_ExpandButton';
+export * from './components/buttons/MRT_GrabHandleButton';
+export * from './components/buttons/MRT_RowPinButton';
+export * from './components/buttons/MRT_ShowHideColumnsButton';
+export * from './components/buttons/MRT_ToggleDensePaddingButton';
+export * from './components/buttons/MRT_ToggleFiltersButton';
+export * from './components/buttons/MRT_ToggleFullScreenButton';
+export * from './components/buttons/MRT_ToggleGlobalFilterButton';
+export * from './components/buttons/MRT_ToggleRowActionMenuButton';
+//footer components
+export * from './components/footer/MRT_TableFooter';
+export * from './components/footer/MRT_TableFooterCell';
+export * from './components/footer/MRT_TableFooterRow';
+//head components
+export * from './components/head/MRT_TableHead';
+export * from './components/head/MRT_TableHeadCell';
+export * from './components/head/MRT_TableHeadCellColumnActionsButton';
+export * from './components/head/MRT_TableHeadCellFilterContainer';
+export * from './components/head/MRT_TableHeadCellFilterLabel';
+export * from './components/head/MRT_TableHeadCellGrabHandle';
+export * from './components/head/MRT_TableHeadCellResizeHandle';
+export * from './components/head/MRT_TableHeadCellSortLabel';
+export * from './components/head/MRT_TableHeadRow';
+//input components
+export * from './components/inputs/MRT_EditCellTextField';
+export * from './components/inputs/MRT_FilterCheckbox';
+export * from './components/inputs/MRT_FilterRangeFields';
+export * from './components/inputs/MRT_FilterRangeSlider';
+export * from './components/inputs/MRT_FilterTextField';
+export * from './components/inputs/MRT_GlobalFilterTextField';
+export * from './components/inputs/MRT_SelectCheckbox';
+//menu components
+export * from './components/menus/MRT_ColumnActionMenu';
+export * from './components/menus/MRT_FilterOptionMenu';
+export * from './components/menus/MRT_RowActionMenu';
+export * from './components/menus/MRT_ShowHideColumnsMenu';
+export * from './components/menus/MRT_ShowHideColumnsMenuItems';
+//modal components
+export * from './components/modals/MRT_EditRowModal';
+//table components
+export * from './components/table/MRT_Table';
+export * from './components/table/MRT_TableContainer';
+export * from './components/table/MRT_TableLoadingOverlay';
+export * from './components/table/MRT_TablePaper';
+//toolbar components
+export * from './components/toolbar/MRT_BottomToolbar';
+export * from './components/toolbar/MRT_LinearProgressBar';
+export * from './components/toolbar/MRT_TablePagination';
+export * from './components/toolbar/MRT_ToolbarAlertBanner';
+export * from './components/toolbar/MRT_ToolbarDropZone';
+export * from './components/toolbar/MRT_ToolbarInternalButtons';
+export * from './components/toolbar/MRT_TopToolbar';

package/src/locales/ja.ts

@@ -78,10 +78,10 @@ export const MRT_Localization_JA: MRT_Localization = {
   showHideColumns: '列の表示状態',
   showHideFilters: '検索バーを表示',
   showHideSearch: '検索',
-  sortByColumnAsc: '{column}を昇順でを並べ替え',
-  sortByColumnDesc: '{column}を降順でを並べ替え',
-  sortedByColumnAsc: '{column}を昇順でを並べ替え',
-  sortedByColumnDesc: '{column}を降順でを並べ替え',
+  sortByColumnAsc: '{column}を昇順で並べ替え',
+  sortByColumnDesc: '{column}を降順で並べ替え',
+  sortedByColumnAsc: '{column}を昇順で並べ替え',
+  sortedByColumnDesc: '{column}を降順で並べ替え',
   thenBy: 'さらに',
   toggleDensity: 'テーブルの高さを変更',
   toggleFullScreen: 'フルスクリーン切り替え',

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>;
@@ -302,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>>;
@@ -338,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;
@@ -457,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;
@@ -477,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'
@@ -506,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)
    */
@@ -1136,6 +1164,9 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   renderBottomToolbarCustomActions?: (props: {
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
+  renderCaption?:
+    | ((props: { table: MRT_TableInstance<TData> }) => ReactNode)
+    | ReactNode;
   renderColumnActionsMenuItems?: (props: {
     closeMenu: () => void;
     column: MRT_Column<TData>;

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