material-react-table 2.0.0-beta.5 → 2.0.0-beta.7

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -14,6 +14,7 @@ import {
   type MRT_Row,
   type MRT_RowData,
 } from '../types';
+import { MRT_DefaultDisplayColumn } from './useMRT_TableOptions';
 
 const blankColProps = {
   children: null,
@@ -50,8 +51,8 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
             ),
             header: tableOptions.localization.pin,
             size: 60,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-pin'],
+            columnDefType: 'display',
             id: 'mrt-row-pin',
           },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -66,8 +67,8 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
             ),
             header: tableOptions.localization.move,
             size: 60,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-drag'],
+            columnDefType: 'display',
             id: 'mrt-row-drag',
           },
           ((tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -83,8 +84,8 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
             ),
             header: tableOptions.localization.actions,
             size: 70,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-actions'],
+            columnDefType: 'display',
             id: 'mrt-row-actions',
           },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -102,8 +103,8 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
                 : null,
               header: tableOptions.localization.expand,
               size: 60,
-              ...tableOptions.defaultDisplayColumn,
               ...tableOptions.displayColumnDefOptions?.['mrt-row-expand'],
+              columnDefType: 'display',
               id: 'mrt-row-expand',
             },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -119,8 +120,8 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
                 : null,
             header: tableOptions.localization.select,
             size: 60,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-select'],
+            columnDefType: 'display',
             id: 'mrt-row-select',
           },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -130,14 +131,15 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
             Header: () => tableOptions.localization.rowNumber,
             header: tableOptions.localization.rowNumbers,
             size: 60,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-numbers'],
+            columnDefType: 'display',
             id: 'mrt-row-numbers',
           },
-
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
             'mrt-row-spacer',
           ) && {
+            ...tableOptions.displayColumnDefOptions?.['mrt-row-spacer'],
+            ...MRT_DefaultDisplayColumn,
             columnDefType: 'display',
             header: '',
             id: 'mrt-row-spacer',

package/src/hooks/useMRT_TableOptions.ts

@@ -10,14 +10,14 @@ import {
   type MRT_TableOptions,
 } from '../types';
 
-const MRT_DefaultColumn = {
+export const MRT_DefaultColumn = {
   filterVariant: 'text',
   maxSize: 1000,
   minSize: 40,
   size: 180,
 } as const;
 
-const MRT_DefaultDisplayColumn = {
+export const MRT_DefaultDisplayColumn = {
   columnDefType: 'display',
   enableClickToCopy: false,
   enableColumnActions: false,

package/src/inputs/MRT_EditCellTextField.tsx

@@ -139,10 +139,6 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
       }}
       inputProps={{
         autoComplete: 'new-password', // disable autocomplete and autofill
-        sx: {
-          p: 0,
-          ...textFieldProps?.inputProps?.sx,
-        },
         ...textFieldProps.inputProps,
       }}
       onBlur={handleBlur}

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -89,6 +89,8 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
     }
   };
 
+  if (!columnDef.header) return null;
+
   return (
     <>
       <MenuItem

package/src/modals/MRT_EditRowModal.tsx

@@ -27,11 +27,11 @@ export const MRT_EditRowModal = <TData extends MRT_RowData>({
     options: {
       localization,
       muiCreateRowModalProps,
-      muiEditRowModalProps,
+      muiEditRowDialogProps,
       onCreatingRowCancel,
       onEditingRowCancel,
-      renderCreateRowModalContent,
-      renderEditRowModalContent,
+      renderCreateRowDialogContent,
+      renderEditRowDialogContent,
     },
     setCreatingRow,
     setEditingRow,
@@ -40,7 +40,7 @@ export const MRT_EditRowModal = <TData extends MRT_RowData>({
   const row = (creatingRow ?? editingRow) as MRT_Row<TData>;
 
   const dialogProps = {
-    ...parseFromValuesOrFunc(muiEditRowModalProps, { row, table }),
+    ...parseFromValuesOrFunc(muiEditRowDialogProps, { row, table }),
     ...(creatingRow &&
       parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })),
     ...rest,
@@ -76,12 +76,12 @@ export const MRT_EditRowModal = <TData extends MRT_RowData>({
       {...dialogProps}
     >
       {((creatingRow &&
-        renderCreateRowModalContent?.({
+        renderCreateRowDialogContent?.({
           internalEditComponents,
           row,
           table,
         })) ||
-        renderEditRowModalContent?.({
+        renderEditRowDialogContent?.({
           internalEditComponents,
           row,
           table,

package/src/style.utils.ts

@@ -32,7 +32,7 @@ export const getMRTTheme = <TData extends MRT_RowData>(
       : lighten(theme.palette.warning.light, 0.5),
   pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1),
   selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2),
-  ...table.options.mrtTheme,
+  ...parseFromValuesOrFunc(table.options.mrtTheme, theme),
 });
 
 export const getCommonMRTCellStyles = <TData extends MRT_RowData>({

package/src/table/MRT_TablePaper.tsx

@@ -1,6 +1,7 @@
 import Paper, { type PaperProps } from '@mui/material/Paper';
 import { MRT_TableContainer } from './MRT_TableContainer';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
@@ -62,6 +63,7 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
         ...tablePaperProps?.style,
       }}
       sx={(theme) => ({
+        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
         overflow: 'hidden',
         transition: 'all 100ms ease-in-out',
         ...(parseFromValuesOrFunc(tablePaperProps?.sx, theme) as any),

package/src/types.ts

@@ -64,6 +64,7 @@ import { type TableFooterProps } from '@mui/material/TableFooter';
 import { type TableHeadProps } from '@mui/material/TableHead';
 import { type TableRowProps } from '@mui/material/TableRow';
 import { type TextFieldProps } from '@mui/material/TextField';
+import { type Theme } from '@mui/material/styles';
 import { type DatePickerProps } from '@mui/x-date-pickers';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
@@ -213,6 +214,14 @@ export interface MRT_Localization {
   unpinAll: string;
 }
 
+export interface MRT_Theme {
+  baseBackgroundColor?: CSSProperties['backgroundColor'];
+  draggingBorderColor?: CSSProperties['borderColor'];
+  matchHighlightColor?: CSSProperties['backgroundColor'];
+  pinnedRowBackgroundColor?: CSSProperties['backgroundColor'];
+  selectedRowBackgroundColor?: CSSProperties['backgroundColor'];
+}
+
 export interface MRT_RowModel<TData extends MRT_RowData> {
   flatRows: MRT_Row<TData>[];
   rows: MRT_Row<TData>[];
@@ -646,7 +655,8 @@ export type MRT_DisplayColumnIds =
   | 'mrt-row-expand'
   | 'mrt-row-numbers'
   | 'mrt-row-pin'
-  | 'mrt-row-select';
+  | 'mrt-row-select'
+  | 'mrt-row-spacer';
 
 /**
  * `columns` and `data` props are the only required props, but there are over 170 other optional props.
@@ -709,9 +719,9 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   /**
    * Change the default options for display columns.
    */
-  defaultDisplayColumn?: Partial<MRT_ColumnDef<TData>>;
+  defaultDisplayColumn?: Partial<MRT_DisplayColumnDef<TData>>;
   displayColumnDefOptions?: Partial<{
-    [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef<TData>>;
+    [key in MRT_DisplayColumnIds]: Partial<MRT_DisplayColumnDef<TData>>;
   }>;
   editDisplayMode?: 'cell' | 'custom' | 'modal' | 'row' | 'table';
   enableBottomToolbar?: boolean;
@@ -771,13 +781,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
    * @link https://www.material-react-table.com/docs/guides/memoize-components
    */
   memoMode?: 'cells' | 'rows' | 'table-body';
-  mrtTheme?: {
-    baseBackgroundColor?: CSSProperties['backgroundColor'];
-    draggingBorderColor?: CSSProperties['borderColor'];
-    matchHighlightColor?: CSSProperties['backgroundColor'];
-    pinnedRowBackgroundColor?: CSSProperties['backgroundColor'];
-    selectedRowBackgroundColor?: CSSProperties['backgroundColor'];
-  };
+  mrtTheme?: ((theme: Theme) => MRT_Theme) | MRT_Theme;
   muiBottomToolbarProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => BoxProps)
     | BoxProps;
@@ -816,7 +820,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
         table: MRT_TableInstance<TData>;
       }) => TableCellProps)
     | TableCellProps;
-  muiEditRowModalProps?:
+  muiEditRowDialogProps?:
     | ((props: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
@@ -1043,7 +1047,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
     onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
     table: MRT_TableInstance<TData>;
   }) => ReactNode[];
-  renderCreateRowModalContent?: (props: {
+  renderCreateRowDialogContent?: (props: {
     internalEditComponents: ReactNode[];
     row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
@@ -1052,7 +1056,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
     row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
-  renderEditRowModalContent?: (props: {
+  renderEditRowDialogContent?: (props: {
     internalEditComponents: ReactNode[];
     row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;