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

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -1,18 +1,24 @@
 import Badge from '@mui/material/Badge';
-import { type TableCellProps } from '@mui/material/TableCell';
-import TableSortLabel from '@mui/material/TableSortLabel';
+import TableSortLabel, {
+  type TableSortLabelProps,
+} from '@mui/material/TableSortLabel';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableSortLabelProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
-  tableCellProps?: TableCellProps;
 }
 
-export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
+export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -23,20 +29,23 @@ export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
   } = table;
   const { column } = header;
   const { columnDef } = column;
-  const { sorting } = getState();
+  const { isLoading, showSkeletons, sorting } = getState();
 
   const isSorted = !!column.getIsSorted();
 
-  const sortTooltip = column.getIsSorted()
-    ? column.getIsSorted() === 'desc'
-      ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
-      : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
-    : column.getNextSortingOrder() === 'desc'
-    ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
-    : localization.sortByColumnAsc.replace('{column}', columnDef.header);
+  const sortTooltip =
+    isLoading || showSkeletons
+      ? ''
+      : column.getIsSorted()
+      ? column.getIsSorted() === 'desc'
+        ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
+        : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
+      : column.getNextSortingOrder() === 'desc'
+      ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
+      : localization.sortByColumnAsc.replace('{column}', columnDef.header);
 
   return (
-    <Tooltip arrow placement="top" title={sortTooltip}>
+    <Tooltip placement="top" title={sortTooltip}>
       <Badge
         badgeContent={sorting.length > 1 ? column.getSortIndex() + 1 : 0}
         overlap="circular"
@@ -47,7 +56,9 @@ export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
               ? (props) => (
                   <SyncAltIcon
                     {...props}
-                    style={{ transform: 'rotate(-90deg) scaleX(0.8)' }}
+                    style={{
+                      transform: 'rotate(-90deg) scaleX(0.9) translateX(-1px)',
+                    }}
                   />
                 )
               : ArrowDownwardIcon
@@ -61,12 +72,21 @@ export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
             e.stopPropagation();
             header.column.getToggleSortingHandler()?.(e);
           }}
-          sx={{
+          {...rest}
+          sx={(theme) => ({
+            '.MuiTableSortLabel-icon': {
+              color: `${
+                theme.palette.mode === 'dark'
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary
+              } !important`,
+            },
             flex: '0 0',
             opacity: isSorted ? 1 : 0.3,
             transition: 'all 150ms ease-in-out',
             width: '3ch',
-          }}
+            ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+          })}
         />
       </Badge>
     </Tooltip>

package/src/head/MRT_TableHeadRow.tsx

@@ -1,15 +1,17 @@
 import { type VirtualItem } from '@tanstack/react-virtual';
-import TableRow from '@mui/material/TableRow';
-import { alpha, lighten } from '@mui/material/styles';
+import { alpha } from '@mui/material';
+import TableRow, { type TableRowProps } from '@mui/material/TableRow';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Header,
   type MRT_HeaderGroup,
+  type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableRowProps {
   headerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
@@ -17,27 +19,31 @@ interface Props<TData extends Record<string, any>> {
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableHeadRow = <TData extends Record<string, any>>({
+export const MRT_TableHeadRow = <TData extends MRT_RowData>({
   headerGroup,
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     options: { layoutMode, muiTableHeadRowProps },
   } = table;
 
-  const tableRowProps = parseFromValuesOrFunc(muiTableHeadRowProps, {
-    headerGroup,
-    table,
-  });
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(muiTableHeadRowProps, {
+      headerGroup,
+      table,
+    }),
+    rest,
+  };
 
   return (
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        backgroundColor: lighten(theme.palette.background.default, 0.05),
+        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         top: 0,

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -12,9 +12,12 @@ import {
   type MRT_DefinedTableOptions,
   type MRT_GroupingState,
   type MRT_Row,
+  type MRT_RowData,
 } from '../types';
+import { MRT_DefaultDisplayColumn } from './useMRT_TableOptions';
 
 const blankColProps = {
+  children: null,
   sx: {
     flex: '1 0 auto',
     minWidth: 0,
@@ -23,14 +26,14 @@ const blankColProps = {
   },
 };
 
-interface Params<TData extends Record<string, any>> {
+interface Params<TData extends MRT_RowData> {
   columnOrder: MRT_ColumnOrderState;
   creatingRow: MRT_Row<TData> | null;
   grouping: MRT_GroupingState;
   tableOptions: MRT_DefinedTableOptions<TData>;
 }
 
-export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
+export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
   columnOrder,
   creatingRow,
   grouping,
@@ -48,8 +51,8 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
             ),
             header: tableOptions.localization.pin,
             size: 60,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-pin'],
+            columnDefType: 'display',
             id: 'mrt-row-pin',
           },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -64,8 +67,8 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
             ),
             header: tableOptions.localization.move,
             size: 60,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-drag'],
+            columnDefType: 'display',
             id: 'mrt-row-drag',
           },
           ((tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -81,8 +84,8 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
             ),
             header: tableOptions.localization.actions,
             size: 70,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-actions'],
+            columnDefType: 'display',
             id: 'mrt-row-actions',
           },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -100,8 +103,8 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
                 : 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(
@@ -117,8 +120,8 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
                 : 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(
@@ -128,17 +131,18 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
             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: 'spacer',
+            id: 'mrt-row-spacer',
             muiTableBodyCellProps: blankColProps,
             muiTableFooterCellProps: blankColProps,
             muiTableHeadCellProps: blankColProps,

package/src/hooks/useMRT_Effects.ts

@@ -1,8 +1,12 @@
 import { useEffect, useReducer, useRef } from 'react';
 import { getCanRankRows } from '../column.utils';
-import { type MRT_SortingState, type MRT_TableInstance } from '../types';
+import {
+  type MRT_RowData,
+  type MRT_SortingState,
+  type MRT_TableInstance,
+} from '../types';
 
-export const useMRT_Effects = <TData extends Record<string, any> = {}>(
+export const useMRT_Effects = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
 ) => {
   const {

package/src/hooks/useMRT_TableInstance.ts

@@ -30,6 +30,7 @@ import {
   type MRT_FilterOption,
   type MRT_GroupingState,
   type MRT_Row,
+  type MRT_RowData,
   type MRT_TableInstance,
   type MRT_TableState,
   type MRT_Updater,
@@ -37,9 +38,9 @@ import {
 import { useMRT_DisplayColumns } from './useMRT_DisplayColumns';
 import { useMRT_Effects } from './useMRT_Effects';
 
-export const useMRT_TableInstance: <TData extends Record<string, any>>(
+export const useMRT_TableInstance: <TData extends MRT_RowData>(
   tableOptions: MRT_DefinedTableOptions<TData>,
-) => MRT_TableInstance<TData> = <TData extends Record<string, any>>(
+) => MRT_TableInstance<TData> = <TData extends MRT_RowData>(
   tableOptions: MRT_DefinedTableOptions<TData>,
 ) => {
   const bottomToolbarRef = useRef<HTMLDivElement>(null);

package/src/hooks/useMRT_TableOptions.ts

@@ -1,15 +1,40 @@
 import { useMemo } from 'react';
 import { MRT_AggregationFns } from '../aggregationFns';
-import { MRT_DefaultColumn, MRT_DefaultDisplayColumn } from '../column.utils';
 import { MRT_FilterFns } from '../filterFns';
 import { MRT_Default_Icons } from '../icons';
 import { MRT_Localization_EN } from '../locales/en';
 import { MRT_SortingFns } from '../sortingFns';
-import { type MRT_DefinedTableOptions, type MRT_TableOptions } from '../types';
+import {
+  type MRT_DefinedTableOptions,
+  type MRT_RowData,
+  type MRT_TableOptions,
+} from '../types';
 
-export const useMRT_TableOptions: <TData extends Record<string, any>>(
+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 useMRT_TableOptions: <TData extends MRT_RowData>(
   tableOptions: MRT_TableOptions<TData>,
-) => MRT_DefinedTableOptions<TData> = <TData extends Record<string, any>>({
+) => MRT_DefinedTableOptions<TData> = <TData extends MRT_RowData>({
   aggregationFns,
   autoResetExpanded = false,
   columnFilterDisplayMode = 'subheader',

package/src/index.ts

@@ -10,6 +10,7 @@ export * from './inputs';
 export * from './menus';
 export * from './modals';
 export * from './sortingFns';
+export * from './style.utils';
 export * from './table';
 export * from './toolbar';
 export * from './types';

package/src/inputs/MRT_EditCellTextField.tsx

@@ -8,16 +8,21 @@ import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
 import { type TextFieldProps } from '@mui/material/TextField';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Cell, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_EditCellTextField = <TData extends Record<string, any>>({
+export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   cell,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -50,6 +55,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
       row,
       table,
     }),
+    ...rest,
   };
 
   const saveInputValueToRowCache = (newValue: string) => {
@@ -103,7 +109,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
         ['custom', 'modal'].includes(
           (isCreating ? createDisplayMode : editDisplayMode) as string,
         )
-          ? column.columnDef.header
+          ? columnDef.header
           : undefined
       }
       margin="none"
@@ -116,9 +122,25 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
           : undefined
       }
       select={isSelectEdit}
+      size="small"
       value={value}
       variant="standard"
       {...textFieldProps}
+      InputProps={{
+        disableUnderline: editDisplayMode === 'table',
+        ...textFieldProps.InputProps,
+        sx: (theme) => ({
+          mb: 0,
+          ...(parseFromValuesOrFunc(
+            textFieldProps?.InputProps?.sx,
+            theme,
+          ) as any),
+        }),
+      }}
+      inputProps={{
+        autoComplete: 'new-password', // disable autocomplete and autofill
+        ...textFieldProps.inputProps,
+      }}
       onBlur={handleBlur}
       onChange={handleChange}
       onClick={(e) => {

package/src/inputs/MRT_FilterCheckbox.tsx

@@ -1,17 +1,22 @@
-import Checkbox from '@mui/material/Checkbox';
+import Checkbox, { type CheckboxProps } from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Column, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends CheckboxProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
+export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
   column,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -29,6 +34,7 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
       column,
       table,
     }),
+    ...rest,
   };
 
   const filterLabel = localization.filterByColumn?.replace(
@@ -38,7 +44,6 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
 
   return (
     <Tooltip
-      arrow
       enterDelay={1000}
       enterNextDelay={1000}
       title={checkboxProps?.title ?? filterLabel}

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -1,18 +1,32 @@
-import Box from '@mui/material/Box';
+import Box, { type BoxProps } from '@mui/material/Box';
 import { MRT_FilterTextField } from './MRT_FilterTextField';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends BoxProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterRangeFields = <TData extends Record<string, any>>({
+export const MRT_FilterRangeFields = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   return (
-    <Box sx={{ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }}>
+    <Box
+      {...rest}
+      sx={(theme) => ({
+        display: 'grid',
+        gap: '1rem',
+        gridTemplateColumns: '1fr 1fr',
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+      })}
+    >
       <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />
       <MRT_FilterTextField header={header} rangeFilterIndex={1} table={table} />
     </Box>

package/src/inputs/MRT_FilterRangeSlider.tsx

@@ -1,18 +1,23 @@
 import { useEffect, useRef, useState } from 'react';
 import FormHelperText from '@mui/material/FormHelperText';
-import Slider from '@mui/material/Slider';
+import Slider, { type SliderProps } from '@mui/material/Slider';
 import Stack from '@mui/material/Stack';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends SliderProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
+export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: { enableColumnFilterModes, localization, muiFilterSliderProps },
@@ -29,6 +34,7 @@ export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
   const sliderProps = {
     ...parseFromValuesOrFunc(muiFilterSliderProps, { column, table }),
     ...parseFromValuesOrFunc(columnDef.muiFilterSliderProps, { column, table }),
+    ...rest,
   };
 
   let [min, max] =

package/src/inputs/MRT_FilterTextField.tsx

@@ -23,18 +23,23 @@ import {
 } from '@mui/x-date-pickers/DatePicker';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
   header: MRT_Header<TData>;
   rangeFilterIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterTextField = <TData extends Record<string, any>>({
+export const MRT_FilterTextField = <TData extends MRT_RowData>({
   header,
   rangeFilterIndex,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -60,6 +65,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
       column,
       table,
     }),
+    ...rest,
   };
 
   const autocompleteProps = {
@@ -236,7 +242,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
         position="end"
         sx={{ mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }}
       >
-        <Tooltip arrow placement="right" title={localization.clearFilter ?? ''}>
+        <Tooltip placement="right" title={localization.clearFilter ?? ''}>
           <span>
             <IconButton
               aria-label={localization.clearFilter}
@@ -258,7 +264,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
 
   const startAdornment = showChangeModeButton ? (
     <InputAdornment position="start">
-      <Tooltip arrow title={localization.changeFilterMode}>
+      <Tooltip title={localization.changeFilterMode}>
         <span>
           <IconButton
             aria-label={localization.changeFilterMode}
@@ -329,6 +335,8 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
     sx: (theme) => ({
       minWidth: isDateFilter
         ? '160px'
+        : enableColumnFilterModes && rangeFilterIndex === 0
+        ? '110px'
         : isRangeFilter
         ? '100px'
         : !filterChipLabel