material-react-table 1.15.0 → 2.0.0-alpha.1

package/src/hooks/useMRT_TableOptions.ts

@@ -0,0 +1,173 @@
+import { useMemo } from 'react';
+import { MRT_AggregationFns } from '../aggregationFns';
+import { MRT_FilterFns } from '../filterFns';
+import { MRT_SortingFns } from '../sortingFns';
+import { MRT_DefaultColumn, MRT_DefaultDisplayColumn } from '../column.utils';
+import { MRT_Localization_EN } from '../locales/en';
+import { MRT_Default_Icons } from '../icons';
+import { type MRT_DefinedTableOptions, type MRT_TableOptions } from '../types';
+
+export const useMRT_TableOptions: <TData extends Record<string, any>>(
+  tableOptions: MRT_TableOptions<TData>,
+) => MRT_DefinedTableOptions<TData> = <TData extends Record<string, any>>({
+  aggregationFns,
+  autoResetExpanded = false,
+  columnFilterDisplayMode = 'subheader',
+  columnResizeMode = 'onChange',
+  createDisplayMode = 'modal',
+  defaultColumn,
+  defaultDisplayColumn,
+  editDisplayMode = 'modal',
+  enableBottomToolbar = true,
+  enableColumnActions = true,
+  enableColumnFilters = true,
+  enableColumnOrdering = false,
+  enableColumnPinning = false,
+  enableColumnResizing = false,
+  enableDensityToggle = true,
+  enableExpandAll = true,
+  enableExpanding,
+  enableFilterMatchHighlighting = true,
+  enableFilters = true,
+  enableFullScreenToggle = true,
+  enableGlobalFilter = true,
+  enableGlobalFilterRankedResults = true,
+  enableGrouping = false,
+  enableHiding = true,
+  enableMultiRowSelection = true,
+  enableMultiSort = true,
+  enablePagination = true,
+  enableRowPinning = false,
+  enableRowSelection = false,
+  enableSelectAll = true,
+  enableSorting = true,
+  enableStickyHeader = false,
+  enableTableFooter = true,
+  enableTableHead = true,
+  enableToolbarInternalActions = true,
+  enableTopToolbar = true,
+  filterFns,
+  icons,
+  layoutMode = 'semantic',
+  localization,
+  manualFiltering,
+  manualGrouping,
+  manualPagination,
+  manualSorting,
+  paginationDisplayMode = 'default',
+  positionActionsColumn = 'first',
+  positionExpandColumn = 'first',
+  positionGlobalFilter = 'right',
+  positionPagination = 'bottom',
+  positionToolbarAlertBanner = 'top',
+  positionToolbarDropZone = 'top',
+  rowNumberMode = 'static',
+  rowPinningDisplayMode = 'sticky',
+  selectAllMode = 'page',
+  sortingFns,
+  ...rest
+}: MRT_TableOptions<TData>) => {
+  const _icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), [icons]);
+  const _localization = useMemo(
+    () => ({
+      ...MRT_Localization_EN,
+      ...localization,
+    }),
+    [localization],
+  );
+  const _aggregationFns = useMemo(
+    () => ({ ...MRT_AggregationFns, ...aggregationFns }),
+    [],
+  );
+  const _filterFns = useMemo(() => ({ ...MRT_FilterFns, ...filterFns }), []);
+  const _sortingFns = useMemo(() => ({ ...MRT_SortingFns, ...sortingFns }), []);
+  const _defaultColumn = useMemo(
+    () => ({ ...MRT_DefaultColumn, ...defaultColumn }),
+    [defaultColumn],
+  );
+  const _defaultDisplayColumn = useMemo(
+    () => ({
+      ...MRT_DefaultDisplayColumn,
+      ...defaultDisplayColumn,
+    }),
+    [defaultDisplayColumn],
+  );
+
+  if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
+    layoutMode = 'grid';
+  }
+
+  if (rest.enableRowVirtualization) {
+    enableStickyHeader = true;
+  }
+
+  if (enablePagination === false && manualPagination === undefined) {
+    manualPagination = true;
+  }
+
+  if (!rest.data?.length) {
+    manualFiltering = true;
+    manualGrouping = true;
+    manualPagination = true;
+    manualSorting = true;
+  }
+
+  return {
+    aggregationFns: _aggregationFns,
+    autoResetExpanded,
+    columnFilterDisplayMode,
+    columnResizeMode,
+    createDisplayMode,
+    defaultColumn: _defaultColumn,
+    defaultDisplayColumn: _defaultDisplayColumn,
+    editDisplayMode,
+    enableBottomToolbar,
+    enableColumnActions,
+    enableColumnFilters,
+    enableColumnOrdering,
+    enableColumnPinning,
+    enableColumnResizing,
+    enableDensityToggle,
+    enableExpandAll,
+    enableExpanding,
+    enableFilterMatchHighlighting,
+    enableFilters,
+    enableFullScreenToggle,
+    enableGlobalFilter,
+    enableGlobalFilterRankedResults,
+    enableGrouping,
+    enableHiding,
+    enableMultiRowSelection,
+    enableMultiSort,
+    enablePagination,
+    enableRowPinning,
+    enableRowSelection,
+    enableSelectAll,
+    enableSorting,
+    enableStickyHeader,
+    enableTableFooter,
+    enableTableHead,
+    enableToolbarInternalActions,
+    enableTopToolbar,
+    filterFns: _filterFns,
+    icons: _icons,
+    layoutMode,
+    localization: _localization,
+    manualFiltering,
+    manualGrouping,
+    manualPagination,
+    manualSorting,
+    paginationDisplayMode,
+    positionActionsColumn,
+    positionExpandColumn,
+    positionGlobalFilter,
+    positionPagination,
+    positionToolbarAlertBanner,
+    positionToolbarDropZone,
+    rowNumberMode,
+    rowPinningDisplayMode,
+    selectAllMode,
+    sortingFns: _sortingFns,
+    ...rest,
+  };
+};

package/src/index.ts

@@ -0,0 +1,16 @@
+export * from './MaterialReactTable';
+export * from './aggregationFns';
+export * from './body';
+export * from './buttons';
+export * from './column.utils';
+export * from './filterFns';
+export * from './footer';
+export * from './head';
+export * from './inputs';
+export * from './menus';
+export * from './modals';
+export * from './sortingFns';
+export * from './table';
+export * from './toolbar';
+export * from './types';
+export * from './useMaterialReactTable';

package/src/inputs/MRT_EditCellTextField.tsx

@@ -7,60 +7,58 @@ import {
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import { type TextFieldProps } from '@mui/material/TextField';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
-  showLabel?: boolean;
 }
 
-export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
+export const MRT_EditCellTextField = <TData extends Record<string, any>>({
   cell,
-  showLabel,
   table,
 }: Props<TData>) => {
   const {
     getState,
-    options: { muiTableBodyCellEditTextFieldProps },
+    options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps },
     refs: { editInputRefs },
     setEditingCell,
     setEditingRow,
+    setCreatingRow,
   } = table;
   const { column, row } = cell;
   const { columnDef } = column;
-  const { editingRow } = getState();
+  const { creatingRow, editingRow } = getState();
 
-  const [value, setValue] = useState(() => cell.getValue<string>());
-
-  const mTableBodyCellEditTextFieldProps =
-    muiTableBodyCellEditTextFieldProps instanceof Function
-      ? muiTableBodyCellEditTextFieldProps({ cell, column, row, table })
-      : muiTableBodyCellEditTextFieldProps;
+  const isCreating = creatingRow?.id === row.id;
+  const isEditing = editingRow?.id === row.id;
+  const isSelectEdit = columnDef.editVariant === 'select';
 
-  const mcTableBodyCellEditTextFieldProps =
-    columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
-      ? columnDef.muiTableBodyCellEditTextFieldProps({
-          cell,
-          column,
-          row,
-          table,
-        })
-      : columnDef.muiTableBodyCellEditTextFieldProps;
+  const [value, setValue] = useState(() => cell.getValue<string>());
 
   const textFieldProps: TextFieldProps = {
-    ...mTableBodyCellEditTextFieldProps,
-    ...mcTableBodyCellEditTextFieldProps,
+    ...parseFromValuesOrFunc(muiEditTextFieldProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiEditTextFieldProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
   };
 
-  const isSelectEdit = columnDef.editVariant === 'select';
-
-  const saveRow = (newValue: string) => {
-    if (editingRow) {
-      setEditingRow({
-        ...editingRow,
-        _valuesCache: { ...editingRow._valuesCache, [column.id]: newValue },
-      });
+  const saveInputValueToRowCache = (newValue: string) => {
+    //@ts-ignore
+    row._valuesCache[column.id] = newValue;
+    if (isCreating) {
+      setCreatingRow({ ...row });
+    } else if (isEditing) {
+      setEditingRow({ ...row });
     }
   };
 
@@ -68,19 +66,19 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
     textFieldProps.onChange?.(event);
     setValue(event.target.value);
     if (textFieldProps?.select) {
-      saveRow(event.target.value);
+      saveInputValueToRowCache(event.target.value);
     }
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
     textFieldProps.onBlur?.(event);
-    saveRow(value);
+    saveInputValueToRowCache(value);
     setEditingCell(null);
   };
 
   const handleEnterKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     textFieldProps.onKeyDown?.(event);
-    if (event.key === 'Enter') {
+    if (event.key === 'Enter' && !event.shiftKey) {
       editInputRefs.current[column.id]?.blur();
     }
   };
@@ -91,11 +89,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
 
   return (
     <TextField
-      disabled={
-        (columnDef.enableEditing instanceof Function
-          ? columnDef.enableEditing(row)
-          : columnDef.enableEditing) === false
-      }
+      disabled={parseFromValuesOrFunc(columnDef.enableEditing, row) === false}
       fullWidth
       inputRef={(inputRef) => {
         if (inputRef) {
@@ -105,10 +99,22 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
           }
         }
       }}
-      label={showLabel ? column.columnDef.header : undefined}
+      label={
+        ['modal', 'custom'].includes(
+          (isCreating ? createDisplayMode : editDisplayMode) as string,
+        )
+          ? column.columnDef.header
+          : undefined
+      }
       margin="none"
       name={column.id}
-      placeholder={columnDef.header}
+      placeholder={
+        !['modal', 'custom'].includes(
+          (isCreating ? createDisplayMode : editDisplayMode) as string,
+        )
+          ? columnDef.header
+          : undefined
+      }
       select={isSelectEdit}
       value={value}
       variant="standard"

package/src/inputs/MRT_FilterCheckbox.tsx

@@ -1,42 +1,35 @@
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Tooltip from '@mui/material/Tooltip';
-import { type CheckboxProps } from '@mui/material/Checkbox';
 import { type MRT_Column, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props {
-  column: MRT_Column;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  column: MRT_Column<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterCheckbox = ({ column, table }: Props) => {
+export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
+  column,
+  table,
+}: Props<TData>) => {
   const {
     getState,
-    options: { localization, muiTableHeadCellFilterCheckboxProps },
+    options: { localization, muiFilterCheckboxProps },
   } = table;
   const { density } = getState();
   const { columnDef } = column;
 
-  const mTableHeadCellFilterCheckboxProps =
-    muiTableHeadCellFilterCheckboxProps instanceof Function
-      ? muiTableHeadCellFilterCheckboxProps({
-          column,
-          table,
-        })
-      : muiTableHeadCellFilterCheckboxProps;
-
-  const mcTableHeadCellFilterCheckboxProps =
-    columnDef.muiTableHeadCellFilterCheckboxProps instanceof Function
-      ? columnDef.muiTableHeadCellFilterCheckboxProps({
-          column,
-          table,
-        })
-      : columnDef.muiTableHeadCellFilterCheckboxProps;
-
   const checkboxProps = {
-    ...mTableHeadCellFilterCheckboxProps,
-    ...mcTableHeadCellFilterCheckboxProps,
-  } as CheckboxProps;
+    ...parseFromValuesOrFunc(muiFilterCheckboxProps, {
+      column,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterCheckboxProps, {
+      column,
+      table,
+    }),
+  };
 
   const filterLabel = localization.filterByColumn?.replace(
     '{column}',
@@ -77,9 +70,7 @@ export const MRT_FilterCheckbox = ({ column, table }: Props) => {
             sx={(theme) => ({
               height: '2.5rem',
               width: '2.5rem',
-              ...(checkboxProps?.sx instanceof Function
-                ? checkboxProps.sx(theme)
-                : (checkboxProps?.sx as any)),
+              ...(parseFromValuesOrFunc(checkboxProps?.sx, theme) as any),
             })}
           />
         }

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -2,12 +2,15 @@ import Box from '@mui/material/Box';
 import { MRT_FilterTextField } from './MRT_FilterTextField';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
-interface Props {
-  header: MRT_Header;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterRangeFields = ({ header, table }: Props) => {
+export const MRT_FilterRangeFields = <TData extends Record<string, any>>({
+  header,
+  table,
+}: Props<TData>) => {
   return (
     <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
       <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />

package/src/inputs/MRT_FilterRangeSlider.tsx

@@ -1,21 +1,21 @@
-import Slider, { type SliderProps } from '@mui/material/Slider';
+import Slider from '@mui/material/Slider';
 import Stack from '@mui/material/Stack';
 import FormHelperText from '@mui/material/FormHelperText';
 import { type MRT_TableInstance, type MRT_Header } from '../types';
 import { useEffect, useRef, useState } from 'react';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props {
-  header: MRT_Header;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterRangeSlider = ({ header, table }: Props) => {
+export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
+  header,
+  table,
+}: Props<TData>) => {
   const {
-    options: {
-      localization,
-      muiTableHeadCellFilterSliderProps,
-      enableColumnFilterModes,
-    },
+    options: { localization, muiFilterSliderProps, enableColumnFilterModes },
     refs: { filterInputRefs },
   } = table;
   const { column } = header;
@@ -26,26 +26,10 @@ export const MRT_FilterRangeSlider = ({ header, table }: Props) => {
   const showChangeModeButton =
     enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
 
-  const mTableHeadCellFilterTextFieldProps =
-    muiTableHeadCellFilterSliderProps instanceof Function
-      ? muiTableHeadCellFilterSliderProps({
-          column,
-          table,
-        })
-      : muiTableHeadCellFilterSliderProps;
-
-  const mcTableHeadCellFilterTextFieldProps =
-    columnDef.muiTableHeadCellFilterSliderProps instanceof Function
-      ? columnDef.muiTableHeadCellFilterSliderProps({
-          column,
-          table,
-        })
-      : columnDef.muiTableHeadCellFilterSliderProps;
-
   const sliderProps = {
-    ...mTableHeadCellFilterTextFieldProps,
-    ...mcTableHeadCellFilterTextFieldProps,
-  } as SliderProps;
+    ...parseFromValuesOrFunc(muiFilterSliderProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterSliderProps, { column, table }),
+  };
 
   let [min, max] =
     sliderProps.min !== undefined && sliderProps.max !== undefined
@@ -115,9 +99,7 @@ export const MRT_FilterRangeSlider = ({ header, table }: Props) => {
           mt: !showChangeModeButton ? '10px' : '6px',
           px: '4px',
           width: 'calc(100% - 8px)',
-          ...(sliderProps?.sx instanceof Function
-            ? sliderProps.sx(theme)
-            : (sliderProps?.sx as any)),
+          ...(parseFromValuesOrFunc(sliderProps?.sx, theme) as any),
         })}
       />
       {showChangeModeButton ? (

package/src/inputs/MRT_FilterTextField.tsx

@@ -19,18 +19,19 @@ import { debounce } from '@mui/material/utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { type TextFieldProps } from '@mui/material/TextField';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props {
-  header: MRT_Header;
+interface Props<TData extends Record<string, any>> {
+  header: MRT_Header<TData>;
   rangeFilterIndex?: number;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterTextField = ({
+export const MRT_FilterTextField = <TData extends Record<string, any>>({
   header,
   rangeFilterIndex,
   table,
-}: Props) => {
+}: Props<TData>) => {
   const {
     options: {
       enableColumnFilterModes,
@@ -38,7 +39,7 @@ export const MRT_FilterTextField = ({
       icons: { FilterListIcon, CloseIcon },
       localization,
       manualFiltering,
-      muiTableHeadCellFilterTextFieldProps,
+      muiFilterTextFieldProps,
     },
     refs: { filterInputRefs },
     setColumnFilterFns,
@@ -46,28 +47,13 @@ export const MRT_FilterTextField = ({
   const { column } = header;
   const { columnDef } = column;
 
-  const mTableHeadCellFilterTextFieldProps =
-    muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? muiTableHeadCellFilterTextFieldProps({
-          column,
-          table,
-          rangeFilterIndex,
-        })
-      : muiTableHeadCellFilterTextFieldProps;
-
-  const mcTableHeadCellFilterTextFieldProps =
-    columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? columnDef.muiTableHeadCellFilterTextFieldProps({
-          column,
-          table,
-          rangeFilterIndex,
-        })
-      : columnDef.muiTableHeadCellFilterTextFieldProps;
-
-  const textFieldProps = {
-    ...mTableHeadCellFilterTextFieldProps,
-    ...mcTableHeadCellFilterTextFieldProps,
-  } as TextFieldProps;
+  const textFieldProps: TextFieldProps = {
+    ...parseFromValuesOrFunc(muiFilterTextFieldProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, {
+      column,
+      table,
+    }),
+  };
 
   const isRangeFilter =
     columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
@@ -109,9 +95,9 @@ export const MRT_FilterTextField = ({
     () =>
       columnDef.filterSelectOptions ??
       ((isSelectFilter || isMultiSelectFilter) && facetedUniqueValues
-        ? Array.from(facetedUniqueValues.keys()).sort((a, b) =>
-            a.localeCompare(b),
-          )
+        ? Array.from(facetedUniqueValues.keys())
+            .filter((value) => value !== null && value !== undefined)
+            .sort((a, b) => a.localeCompare(b))
         : undefined),
     [
       columnDef.filterSelectOptions,
@@ -358,9 +344,7 @@ export const MRT_FilterTextField = ({
           '& .MuiSelect-icon': {
             mr: '1.5rem',
           },
-          ...(textFieldProps?.sx instanceof Function
-            ? textFieldProps.sx(theme)
-            : (textFieldProps?.sx as any)),
+          ...(parseFromValuesOrFunc(textFieldProps?.sx, theme) as any),
         })}
       >
         {(isSelectFilter || isMultiSelectFilter) && (

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -14,14 +14,13 @@ import Tooltip from '@mui/material/Tooltip';
 import { debounce } from '@mui/material/utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_GlobalFilterTextField = <
-  TData extends Record<string, any> = {},
->({
+export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {
@@ -38,10 +37,9 @@ export const MRT_GlobalFilterTextField = <
   } = table;
   const { globalFilter, showGlobalFilter } = getState();
 
-  const textFieldProps =
-    muiSearchTextFieldProps instanceof Function
-      ? muiSearchTextFieldProps({ table })
-      : muiSearchTextFieldProps;
+  const textFieldProps = parseFromValuesOrFunc(muiSearchTextFieldProps, {
+    table,
+  });
 
   const isMounted = useRef(false);
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);