material-react-table 2.0.0-beta.1 → 2.0.0-beta.10

package/src/buttons/MRT_RowPinButton.tsx

@@ -1,19 +1,25 @@
 import { type MouseEvent, useState } from 'react';
 import { type RowPinningPosition } from '@tanstack/react-table';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   pinningPosition: RowPinningPosition;
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_RowPinButton = <TData extends Record<string, any>>({
+export const MRT_RowPinButton = <TData extends MRT_RowData>({
   pinningPosition,
   row,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -35,7 +41,6 @@ export const MRT_RowPinButton = <TData extends Record<string, any>>({
 
   return (
     <Tooltip
-      arrow
       enterDelay={1000}
       enterNextDelay={1000}
       open={tooltipOpened}
@@ -47,10 +52,12 @@ export const MRT_RowPinButton = <TData extends Record<string, any>>({
         onMouseEnter={() => setTooltipOpened(true)}
         onMouseLeave={() => setTooltipOpened(false)}
         size="small"
-        sx={{
+        {...rest}
+        sx={(theme) => ({
           height: '24px',
           width: '24px',
-        }}
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        })}
       >
         {isPinned ? (
           <CloseIcon />

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -2,13 +2,13 @@ import { type MouseEvent, useState } from 'react';
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> extends IconButtonProps {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsButton = <TData extends Record<string, any>>({
+export const MRT_ShowHideColumnsButton = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {
@@ -27,7 +27,7 @@ export const MRT_ShowHideColumnsButton = <TData extends Record<string, any>>({
 
   return (
     <>
-      <Tooltip arrow title={rest?.title ?? localization.showHideColumns}>
+      <Tooltip title={rest?.title ?? localization.showHideColumns}>
         <IconButton
           aria-label={localization.showHideColumns}
           onClick={handleClick}

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,14 +1,12 @@
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> extends IconButtonProps {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleDensePaddingButton = <
-  TData extends Record<string, any>,
->({
+export const MRT_ToggleDensePaddingButton = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {
@@ -33,7 +31,7 @@ export const MRT_ToggleDensePaddingButton = <
   };
 
   return (
-    <Tooltip arrow title={rest?.title ?? localization.toggleDensity}>
+    <Tooltip title={rest?.title ?? localization.toggleDensity}>
       <IconButton
         aria-label={localization.toggleDensity}
         onClick={handleToggleDensePadding}

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,12 +1,12 @@
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> extends IconButtonProps {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleFiltersButton = <TData extends Record<string, any>>({
+export const MRT_ToggleFiltersButton = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {
@@ -25,7 +25,7 @@ export const MRT_ToggleFiltersButton = <TData extends Record<string, any>>({
   };
 
   return (
-    <Tooltip arrow title={rest?.title ?? localization.showHideFilters}>
+    <Tooltip title={rest?.title ?? localization.showHideFilters}>
       <IconButton
         aria-label={localization.showHideFilters}
         onClick={handleToggleShowFilters}

package/src/buttons/MRT_ToggleFullScreenButton.tsx

@@ -1,13 +1,13 @@
 import { useState } from 'react';
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> extends IconButtonProps {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleFullScreenButton = <TData extends Record<string, any>>({
+export const MRT_ToggleFullScreenButton = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {
@@ -30,7 +30,6 @@ export const MRT_ToggleFullScreenButton = <TData extends Record<string, any>>({
 
   return (
     <Tooltip
-      arrow
       open={tooltipOpened}
       title={rest?.title ?? localization.toggleFullScreen}
     >

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -1,14 +1,12 @@
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> extends IconButtonProps {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleGlobalFilterButton = <
-  TData extends Record<string, any>,
->({
+export const MRT_ToggleGlobalFilterButton = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {
@@ -30,7 +28,7 @@ export const MRT_ToggleGlobalFilterButton = <
   };
 
   return (
-    <Tooltip arrow title={rest?.title ?? localization.showHideSearch}>
+    <Tooltip title={rest?.title ?? localization.showHideSearch}>
       <IconButton
         aria-label={rest?.title ?? localization.showHideSearch}
         disabled={!!globalFilter}

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,10 +1,15 @@
 import { type MouseEvent, useState } from 'react';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
-import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Cell,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
 const commonIconButtonStyles = {
   '&:hover': {
@@ -17,18 +22,17 @@ const commonIconButtonStyles = {
   width: '2rem',
 };
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   cell: MRT_Cell<TData>;
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleRowActionMenuButton = <
-  TData extends Record<string, any>,
->({
+export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
   cell,
   row,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -74,12 +78,14 @@ export const MRT_ToggleRowActionMenuButton = <
       ) : showEditActionButtons ? (
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems &&
-        parseFromValuesOrFunc(enableEditing, row) ? (
-        <Tooltip arrow placement="right" title={localization.edit}>
+        parseFromValuesOrFunc(enableEditing, row) &&
+        ['modal', 'row'].includes(editDisplayMode!) ? (
+        <Tooltip placement="right" title={localization.edit}>
           <IconButton
             aria-label={localization.edit}
             onClick={handleStartEditMode}
             sx={commonIconButtonStyles}
+            {...rest}
           >
             <EditIcon />
           </IconButton>
@@ -87,7 +93,6 @@ export const MRT_ToggleRowActionMenuButton = <
       ) : renderRowActionMenuItems ? (
         <>
           <Tooltip
-            arrow
             enterDelay={1000}
             enterNextDelay={1000}
             title={localization.rowActions}
@@ -97,6 +102,7 @@ export const MRT_ToggleRowActionMenuButton = <
               onClick={handleOpenRowActionMenu}
               size="small"
               sx={commonIconButtonStyles}
+              {...rest}
             >
               <MoreHorizIcon />
             </IconButton>

package/src/column.utils.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import {
   createRow as _createRow,
   flexRender as _flexRender,
@@ -6,32 +6,32 @@ import {
   type Row,
 } from '@tanstack/react-table';
 import { type Range, defaultRangeExtractor } from '@tanstack/react-virtual';
-import { type TableCellProps } from '@mui/material/TableCell';
-import { alpha, lighten } from '@mui/material/styles';
-import { type Theme } from '@mui/material/styles';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
 import { type MRT_SortingFns } from './sortingFns';
 import {
   type MRT_Column,
   type MRT_ColumnDef,
+  type MRT_ColumnHelper,
   type MRT_ColumnOrderState,
   type MRT_DefinedColumnDef,
+  type MRT_DisplayColumnDef,
   type MRT_DisplayColumnIds,
   type MRT_FilterOption,
+  type MRT_GroupColumnDef,
   type MRT_GroupingState,
-  type MRT_Header,
   type MRT_Row,
+  type MRT_RowData,
   type MRT_TableInstance,
   type MRT_TableOptions,
 } from './types';
 
-export const getColumnId = <TData extends Record<string, any>>(
+export const getColumnId = <TData extends MRT_RowData>(
   columnDef: MRT_ColumnDef<TData>,
 ): string =>
   columnDef.id ?? columnDef.accessorKey?.toString?.() ?? columnDef.header;
 
-export const getAllLeafColumnDefs = <TData extends Record<string, any>>(
+export const getAllLeafColumnDefs = <TData extends MRT_RowData>(
   columns: MRT_ColumnDef<TData>[],
 ): MRT_ColumnDef<TData>[] => {
   const allLeafColumnDefs: MRT_ColumnDef<TData>[] = [];
@@ -48,7 +48,7 @@ export const getAllLeafColumnDefs = <TData extends Record<string, any>>(
   return allLeafColumnDefs;
 };
 
-export const prepareColumns = <TData extends Record<string, any>>({
+export const prepareColumns = <TData extends MRT_RowData>({
   aggregationFns,
   columnDefs,
   columnFilterFns,
@@ -122,7 +122,7 @@ export const prepareColumns = <TData extends Record<string, any>>({
     return columnDef;
   }) as MRT_DefinedColumnDef<TData>[];
 
-export const reorderColumn = <TData extends Record<string, any>>(
+export const reorderColumn = <TData extends MRT_RowData>(
   draggedColumn: MRT_Column<TData>,
   targetColumn: MRT_Column<TData>,
   columnOrder: MRT_ColumnOrderState,
@@ -139,7 +139,7 @@ export const reorderColumn = <TData extends Record<string, any>>(
   return newColumnOrder;
 };
 
-export const showExpandColumn = <TData extends Record<string, any>>(
+export const showExpandColumn = <TData extends MRT_RowData>(
   props: MRT_TableOptions<TData>,
   grouping?: MRT_GroupingState,
 ) =>
@@ -149,7 +149,7 @@ export const showExpandColumn = <TData extends Record<string, any>>(
     props.renderDetailPanel
   );
 
-export const getLeadingDisplayColumnIds = <TData extends Record<string, any>>(
+export const getLeadingDisplayColumnIds = <TData extends MRT_RowData>(
   props: MRT_TableOptions<TData>,
 ) =>
   [
@@ -167,10 +167,9 @@ export const getLeadingDisplayColumnIds = <TData extends Record<string, any>>(
       'mrt-row-expand',
     props.enableRowSelection && 'mrt-row-select',
     props.enableRowNumbers && 'mrt-row-numbers',
-    props.layoutMode === 'grid-no-grow' && 'mrt-row-spacer',
   ].filter(Boolean) as MRT_DisplayColumnIds[];
 
-export const getTrailingDisplayColumnIds = <TData extends Record<string, any>>(
+export const getTrailingDisplayColumnIds = <TData extends MRT_RowData>(
   props: MRT_TableOptions<TData>,
 ) =>
   [
@@ -182,9 +181,10 @@ export const getTrailingDisplayColumnIds = <TData extends Record<string, any>>(
     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 Record<string, any>>(
+export const getDefaultColumnOrderIds = <TData extends MRT_RowData>(
   props: MRT_TableOptions<TData>,
 ) => {
   const leadingDisplayCols: string[] = getLeadingDisplayColumnIds(props);
@@ -199,7 +199,7 @@ export const getDefaultColumnOrderIds = <TData extends Record<string, any>>(
   return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
 };
 
-export const getDefaultColumnFilterFn = <TData extends Record<string, any>>(
+export const getDefaultColumnFilterFn = <TData extends MRT_RowData>(
   columnDef: MRT_ColumnDef<TData>,
 ): MRT_FilterOption => {
   if (columnDef.filterVariant === 'multi-select') return 'arrIncludesSome';
@@ -212,7 +212,7 @@ export const getDefaultColumnFilterFn = <TData extends Record<string, any>>(
   return 'fuzzy';
 };
 
-export const getIsFirstColumn = <TData extends Record<string, any>>(
+export const getIsFirstColumn = <TData extends MRT_RowData>(
   column: MRT_Column<TData>,
   table: MRT_TableInstance<TData>,
 ) => {
@@ -222,7 +222,7 @@ export const getIsFirstColumn = <TData extends Record<string, any>>(
     : table.getVisibleLeafColumns()[0].id === column.id;
 };
 
-export const getIsLastColumn = <TData extends Record<string, any>>(
+export const getIsLastColumn = <TData extends MRT_RowData>(
   column: MRT_Column<TData>,
   table: MRT_TableInstance<TData>,
 ) => {
@@ -233,7 +233,7 @@ export const getIsLastColumn = <TData extends Record<string, any>>(
     : columns[columns.length - 1].id === column.id;
 };
 
-export const getIsLastLeftPinnedColumn = <TData extends Record<string, any>>(
+export const getIsLastLeftPinnedColumn = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
   column: MRT_Column<TData>,
 ) => {
@@ -243,13 +243,13 @@ export const getIsLastLeftPinnedColumn = <TData extends Record<string, any>>(
   );
 };
 
-export const getIsFirstRightPinnedColumn = <TData extends Record<string, any>>(
+export const getIsFirstRightPinnedColumn = <TData extends MRT_RowData>(
   column: MRT_Column<TData>,
 ) => {
   return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
 };
 
-export const getTotalRight = <TData extends Record<string, any>>(
+export const getTotalRight = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
   column: MRT_Column<TData>,
 ) => {
@@ -259,7 +259,7 @@ export const getTotalRight = <TData extends Record<string, any>>(
     .reduce((acc, col) => acc + col.getSize(), 0);
 };
 
-export const getCanRankRows = <TData extends Record<string, any>>(
+export const getCanRankRows = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
 ) => {
   const { getState, options } = table;
@@ -284,132 +284,17 @@ export const getCanRankRows = <TData extends Record<string, any>>(
   );
 };
 
-export const getCommonCellStyles = <TData extends Record<string, any>>({
-  column,
-  header,
-  table,
-  tableCellProps,
-  theme,
-}: {
-  column: MRT_Column<TData>;
-  header?: MRT_Header<TData>;
-  table: MRT_TableInstance<TData>;
-  tableCellProps: TableCellProps;
-  theme: Theme;
-}) => {
-  const {
-    options: { layoutMode },
-  } = table;
-  const widthStyles: CSSProperties = {
-    minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
-    width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) * 1px)`,
-  };
-
-  if (layoutMode === 'grid') {
-    widthStyles.flex = `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) 0 auto`;
-  } else if (layoutMode === 'grid-no-grow') {
-    widthStyles.flex = '0 0 auto';
-  }
-
-  return {
-    backgroundColor:
-      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-        ? alpha(lighten(theme.palette.background.default, 0.04), 0.97)
-        : 'inherit',
-    backgroundImage: 'inherit',
-    boxShadow: getIsLastLeftPinnedColumn(table, column)
-      ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-      : getIsFirstRightPinnedColumn(column)
-      ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-      : undefined,
-    display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-    left:
-      column.getIsPinned() === 'left'
-        ? `${column.getStart('left')}px`
-        : undefined,
-    ml:
-      table.options.enableColumnVirtualization &&
-      column.getIsPinned() === 'left' &&
-      column.getPinnedIndex() === 0
-        ? `-${
-            column.getSize() *
-            (table.getState().columnPinning.left?.length ?? 1)
-          }px`
-        : undefined,
-    mr:
-      table.options.enableColumnVirtualization &&
-      column.getIsPinned() === 'right' &&
-      column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
-        ? `-${
-            column.getSize() *
-            (table.getState().columnPinning.right?.length ?? 1) *
-            1.2
-          }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
-      ? 'none'
-      : `padding 150ms ease-in-out`,
-    ...widthStyles,
-    // ...(!table.options.enableColumnResizing && widthStyles), //let devs pass in width styles if column resizing is disabled
-    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
-    // ...(table.options.enableColumnResizing && widthStyles), //don't let devs pass in width styles if column resizing is enabled
-  };
-};
-
-export const MRT_DefaultColumn = {
-  filterVariant: 'text',
-  maxSize: 1000,
-  minSize: 40,
-  size: 180,
-} as const;
-
-export const MRT_DefaultDisplayColumn = {
-  columnDefType: 'display',
-  enableClickToCopy: false,
-  enableColumnActions: false,
-  enableColumnDragging: false,
-  enableColumnFilter: false,
-  enableColumnOrdering: false,
-  enableEditing: false,
-  enableGlobalFilter: false,
-  enableGrouping: false,
-  enableHiding: false,
-  enableResizing: false,
-  enableSorting: false,
-} as const;
-
 export const parseFromValuesOrFunc = <T, U>(
   fn: ((arg: U) => T) | T | undefined,
   arg: U,
 ): T | undefined => (fn instanceof Function ? fn(arg) : fn);
 
-export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
-
 export const flexRender = _flexRender as (
   Comp: Renderable<any>,
   props: any,
 ) => JSX.Element | ReactNode;
 
-export const createRow = <TData extends Record<string, any>>(
+export const createRow = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
   originalRow?: TData,
 ): MRT_Row<TData> =>
@@ -431,15 +316,35 @@ export const extraIndexRangeExtractor = (
   range: Range,
   draggingIndex: number,
 ) => {
-  const newIndexs = defaultRangeExtractor(range);
+  const newIndexes = defaultRangeExtractor(range);
   if (
     draggingIndex >= 0 &&
     draggingIndex < Math.max(range.startIndex - range.overscan, 0)
   ) {
-    newIndexs.unshift(draggingIndex);
+    newIndexes.unshift(draggingIndex);
   }
   if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
-    newIndexs.push(draggingIndex);
+    newIndexes.push(draggingIndex);
   }
-  return newIndexs;
+  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>,
+  };
+}