material-react-table 2.6.0 → 2.7.0

package/src/style.utils.ts

@@ -1,5 +1,6 @@
 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 {
@@ -20,20 +21,26 @@ 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,
@@ -133,3 +140,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/table/MRT_TableContainer.tsx

@@ -5,7 +5,7 @@ import TableContainer, {
 import { MRT_Table } from './MRT_Table';
 import { MRT_TableLoadingOverlay } from './MRT_TableLoadingOverlay';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { MRT_EditRowModal } from '../modals';
+import { MRT_EditRowModal } from '../modals/MRT_EditRowModal';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 const useIsomorphicLayoutEffect =

package/src/toolbar/MRT_TablePagination.tsx

@@ -9,7 +9,7 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { flipIconStyles } from '../style.utils';
+import { flipIconStyles, getCommonTooltipProps } from '../style.utils';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
@@ -79,6 +79,8 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   const disableBack = pageIndex <= 0 || disabled;
   const disableNext = lastRowIndex >= totalRowCount || disabled;
 
+  const tooltipProps = getCommonTooltipProps();
+
   return (
     <Box
       className="MuiTablePagination-root"
@@ -173,7 +175,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
           } ${totalRowCount.toLocaleString()}`}</Typography>
           <Box gap="xs">
             {showFirstButton && (
-              <Tooltip enterDelay={1000} title={localization.goToFirstPage}>
+              <Tooltip {...tooltipProps} title={localization.goToFirstPage}>
                 <span>
                   <IconButton
                     aria-label={localization.goToFirstPage}
@@ -186,7 +188,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
                 </span>
               </Tooltip>
             )}
-            <Tooltip enterDelay={1000} title={localization.goToPreviousPage}>
+            <Tooltip {...tooltipProps} title={localization.goToPreviousPage}>
               <span>
                 <IconButton
                   aria-label={localization.goToPreviousPage}
@@ -198,7 +200,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
                 </IconButton>
               </span>
             </Tooltip>
-            <Tooltip enterDelay={1000} title={localization.goToNextPage}>
+            <Tooltip {...tooltipProps} title={localization.goToNextPage}>
               <span>
                 <IconButton
                   aria-label={localization.goToNextPage}
@@ -211,7 +213,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
               </span>
             </Tooltip>
             {showLastButton && (
-              <Tooltip enterDelay={1000} title={localization.goToLastPage}>
+              <Tooltip {...tooltipProps} title={localization.goToLastPage}>
                 <span>
                   <IconButton
                     aria-label={localization.goToLastPage}

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -6,7 +6,7 @@ import Chip from '@mui/material/Chip';
 import Collapse from '@mui/material/Collapse';
 import Stack from '@mui/material/Stack';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { MRT_SelectCheckbox } from '../inputs';
+import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends MRT_RowData> extends AlertProps {

package/src/types.ts

@@ -247,6 +247,7 @@ export interface MRT_Theme {
   baseBackgroundColor?: CSSProperties['backgroundColor'];
   draggingBorderColor?: CSSProperties['borderColor'];
   matchHighlightColor?: CSSProperties['backgroundColor'];
+  menuBackgroundColor?: CSSProperties['backgroundColor'];
   pinnedRowBackgroundColor?: CSSProperties['backgroundColor'];
   selectedRowBackgroundColor?: CSSProperties['backgroundColor'];
 }
@@ -919,6 +920,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 +1124,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 +1173,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/body/index.ts

@@ -1,7 +0,0 @@
-export * from './MRT_TableBody';
-export * from './MRT_TableBodyCell';
-export * from './MRT_TableBodyCellValue';
-export * from './MRT_TableBodyRow';
-export * from './MRT_TableBodyRowGrabHandle';
-export * from './MRT_TableBodyRowPinButton';
-export * from './MRT_TableDetailPanel';

package/src/buttons/index.ts

@@ -1,13 +0,0 @@
-export * from './MRT_ColumnPinningButtons';
-export * from './MRT_CopyButton';
-export * from './MRT_EditActionButtons';
-export * from './MRT_ExpandAllButton';
-export * from './MRT_ExpandButton';
-export * from './MRT_GrabHandleButton';
-export * from './MRT_RowPinButton';
-export * from './MRT_ShowHideColumnsButton';
-export * from './MRT_ToggleDensePaddingButton';
-export * from './MRT_ToggleFiltersButton';
-export * from './MRT_ToggleFullScreenButton';
-export * from './MRT_ToggleGlobalFilterButton';
-export * from './MRT_ToggleRowActionMenuButton';

package/src/footer/index.ts

@@ -1,3 +0,0 @@
-export * from './MRT_TableFooter';
-export * from './MRT_TableFooterCell';
-export * from './MRT_TableFooterRow';

package/src/head/index.ts

@@ -1,9 +0,0 @@
-export * from './MRT_TableHead';
-export * from './MRT_TableHeadCell';
-export * from './MRT_TableHeadCellColumnActionsButton';
-export * from './MRT_TableHeadCellFilterContainer';
-export * from './MRT_TableHeadCellFilterLabel';
-export * from './MRT_TableHeadCellGrabHandle';
-export * from './MRT_TableHeadCellResizeHandle';
-export * from './MRT_TableHeadCellSortLabel';
-export * from './MRT_TableHeadRow';

package/src/hooks/index.ts

@@ -1,7 +0,0 @@
-export * from './useMRT_ColumnVirtualizer';
-export * from './useMRT_DisplayColumns';
-export * from './useMRT_Effects';
-export * from './useMRT_RowVirtualizer';
-export * from './useMRT_Rows';
-export * from './useMRT_TableInstance';
-export * from './useMRT_TableOptions';

package/src/inputs/index.ts

@@ -1,7 +0,0 @@
-export * from './MRT_EditCellTextField';
-export * from './MRT_FilterCheckbox';
-export * from './MRT_FilterRangeFields';
-export * from './MRT_FilterRangeSlider';
-export * from './MRT_FilterTextField';
-export * from './MRT_GlobalFilterTextField';
-export * from './MRT_SelectCheckbox';

package/src/menus/index.ts

@@ -1,5 +0,0 @@
-export * from './MRT_ColumnActionMenu';
-export * from './MRT_FilterOptionMenu';
-export * from './MRT_RowActionMenu';
-export * from './MRT_ShowHideColumnsMenu';
-export * from './MRT_ShowHideColumnsMenuItems';

package/src/modals/index.ts

@@ -1 +0,0 @@
-export * from './MRT_EditRowModal';

package/src/table/index.ts

@@ -1,5 +0,0 @@
-export * from '../modals/MRT_EditRowModal';
-export * from './MRT_Table';
-export * from './MRT_TableContainer';
-export * from './MRT_TableLoadingOverlay';
-export * from './MRT_TablePaper';

package/src/toolbar/index.ts

@@ -1,7 +0,0 @@
-export * from './MRT_BottomToolbar';
-export * from './MRT_LinearProgressBar';
-export * from './MRT_TablePagination';
-export * from './MRT_ToolbarAlertBanner';
-export * from './MRT_ToolbarDropZone';
-export * from './MRT_ToolbarInternalButtons';
-export * from './MRT_TopToolbar';