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

package/src/types.ts

@@ -1,4 +1,5 @@
 import {
+  type CSSProperties,
   type Dispatch,
   type MutableRefObject,
   type ReactNode,
@@ -6,6 +7,7 @@ import {
   type SetStateAction,
 } from 'react';
 import {
+  type AccessorFn,
   type AggregationFn,
   type Cell,
   type Column,
@@ -16,6 +18,7 @@ import {
   type ColumnSizingInfoState,
   type ColumnSizingState,
   type DeepKeys,
+  type DeepValue,
   type ExpandedState,
   type FilterFn,
   type GroupingState,
@@ -40,6 +43,7 @@ import {
 } from '@tanstack/react-virtual';
 import { type AlertProps } from '@mui/material/Alert';
 import { type AutocompleteProps } from '@mui/material/Autocomplete';
+import { type BoxProps } from '@mui/material/Box';
 import { type ButtonProps } from '@mui/material/Button';
 import { type CheckboxProps } from '@mui/material/Checkbox';
 import { type ChipProps } from '@mui/material/Chip';
@@ -60,7 +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 ToolbarProps } from '@mui/material/Toolbar';
+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';
@@ -82,6 +86,8 @@ export type MRT_DensityState = 'comfortable' | 'compact' | 'spacious';
 
 export type MRT_ColumnFilterFnsState = Record<string, MRT_FilterOption>;
 
+export type MRT_RowData = Record<string, any>;
+
 export type {
   ColumnFiltersState as MRT_ColumnFiltersState,
   ColumnOrderState as MRT_ColumnOrderState,
@@ -100,6 +106,22 @@ export type {
   VisibilityState as MRT_VisibilityState,
 };
 
+export type MRT_ColumnHelper<TData extends MRT_RowData> = {
+  accessor: <
+    TAccessor extends AccessorFn<TData> | DeepKeys<TData>,
+    TValue extends TAccessor extends AccessorFn<TData, infer TReturn>
+      ? TReturn
+      : TAccessor extends DeepKeys<TData>
+      ? DeepValue<TData, TAccessor>
+      : never,
+  >(
+    accessor: TAccessor,
+    column: MRT_DisplayColumnDef<TData, TValue>,
+  ) => MRT_ColumnDef<TData, TValue>;
+  display: (column: MRT_DisplayColumnDef<TData>) => MRT_ColumnDef<TData>;
+  group: (column: MRT_GroupColumnDef<TData>) => MRT_ColumnDef<TData>;
+};
+
 export interface MRT_Localization {
   actions: string;
   and: string;
@@ -192,13 +214,21 @@ export interface MRT_Localization {
   unpinAll: string;
 }
 
-export interface MRT_RowModel<TData extends Record<string, any>> {
+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>[];
   rowsById: { [key: string]: MRT_Row<TData> };
 }
 
-export type MRT_TableInstance<TData extends Record<string, any>> = Omit<
+export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   Table<TData>,
   | 'getAllColumns'
   | 'getAllFlatColumns'
@@ -270,13 +300,13 @@ export type MRT_TableInstance<TData extends Record<string, any>> = Omit<
   setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
 };
 
-export type MRT_DefinedTableOptions<TData extends Record<string, any>> =
+export type MRT_DefinedTableOptions<TData extends MRT_RowData> =
   MRT_TableOptions<TData> & {
     icons: MRT_Icons;
     localization: MRT_Localization;
   };
 
-export type MRT_TableState<TData extends Record<string, any>> = TableState & {
+export type MRT_TableState<TData extends MRT_RowData> = TableState & {
   columnFilterFns: MRT_ColumnFilterFnsState;
   creatingRow: MRT_Row<TData> | null;
   density: MRT_DensityState;
@@ -299,8 +329,8 @@ export type MRT_TableState<TData extends Record<string, any>> = TableState & {
   showToolbarDropZone: boolean;
 };
 
-export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<
-  ColumnDef<TData, unknown>,
+export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
+  ColumnDef<TData, TValue>,
   | 'accessorKey'
   | 'aggregatedCell'
   | 'aggregationFn'
@@ -313,54 +343,54 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<
   | 'sortingFn'
 > & {
   AggregatedCell?: (props: {
-    cell: MRT_Cell<TData>;
-    column: MRT_Column<TData>;
+    cell: MRT_Cell<TData, TValue>;
+    column: MRT_Column<TData, TValue>;
     row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Cell?: (props: {
-    cell: MRT_Cell<TData>;
-    column: MRT_Column<TData>;
-    renderedCellValue: ReactNode | number | string;
+    cell: MRT_Cell<TData, TValue>;
+    column: MRT_Column<TData, TValue>;
+    renderedCellValue: ReactNode;
     row: MRT_Row<TData>;
     rowRef?: RefObject<HTMLTableRowElement>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Edit?: (props: {
-    cell: MRT_Cell<TData>;
-    column: MRT_Column<TData>;
+    cell: MRT_Cell<TData, TValue>;
+    column: MRT_Column<TData, TValue>;
     row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Filter?: (props: {
-    column: MRT_Column<TData>;
+    column: MRT_Column<TData, TValue>;
     header: MRT_Header<TData>;
     rangeFilterIndex?: number;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Footer?:
     | ((props: {
-        column: MRT_Column<TData>;
+        column: MRT_Column<TData, TValue>;
         footer: MRT_Header<TData>;
         table: MRT_TableInstance<TData>;
       }) => ReactNode)
     | ReactNode;
   GroupedCell?: (props: {
-    cell: MRT_Cell<TData>;
-    column: MRT_Column<TData>;
+    cell: MRT_Cell<TData, TValue>;
+    column: MRT_Column<TData, TValue>;
     row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Header?:
     | ((props: {
-        column: MRT_Column<TData>;
+        column: MRT_Column<TData, TValue>;
         header: MRT_Header<TData>;
         table: MRT_TableInstance<TData>;
       }) => ReactNode)
     | ReactNode;
   PlaceholderCell?: (props: {
-    cell: MRT_Cell<TData>;
-    column: MRT_Column<TData>;
+    cell: MRT_Cell<TData, TValue>;
+    column: MRT_Column<TData, TValue>;
     row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
@@ -370,7 +400,7 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<
    *
    * @example accessorFn: (row) => row.username
    */
-  accessorFn?: (originalRow: TData) => any;
+  accessorFn?: (originalRow: TData) => TValue;
   /**
    * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
    * Specify which key in the row this column should use to access the correct data.
@@ -393,7 +423,7 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<
   columnFilterModeOptions?: Array<
     LiteralUnion<string & MRT_FilterOption>
   > | null;
-  columns?: MRT_ColumnDef<TData>[];
+  columns?: MRT_ColumnDef<TData, TValue>[];
   editSelectOptions?: ({ text: string; value: any } | string)[];
   editVariant?: 'select' | 'text';
   enableClickToCopy?: boolean;
@@ -447,7 +477,7 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<
     | IconButtonProps;
   muiCopyButtonProps?:
     | ((props: {
-        cell: MRT_Cell<TData>;
+        cell: MRT_Cell<TData, TValue>;
         column: MRT_Column<TData>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
@@ -455,7 +485,7 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<
     | ButtonProps;
   muiEditTextFieldProps?:
     | ((props: {
-        cell: MRT_Cell<TData>;
+        cell: MRT_Cell<TData, TValue>;
         column: MRT_Column<TData>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
@@ -495,7 +525,7 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<
     | TextFieldProps;
   muiTableBodyCellProps?:
     | ((props: {
-        cell: MRT_Cell<TData>;
+        cell: MRT_Cell<TData, TValue>;
         column: MRT_Column<TData>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
@@ -528,41 +558,51 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<
   sortingFn?: MRT_SortingFn<TData>;
 };
 
-export type MRT_DefinedColumnDef<TData extends Record<string, any>> = Omit<
-  MRT_ColumnDef<TData>,
-  'defaultDisplayColumn' | 'id'
-> & {
+export type MRT_DisplayColumnDef<
+  TData extends MRT_RowData,
+  TValue = unknown,
+> = Omit<MRT_ColumnDef<TData, TValue>, 'accessorFn' | 'accessorKey'>;
+
+export type MRT_GroupColumnDef<TData extends MRT_RowData> =
+  MRT_DisplayColumnDef<TData, any> & {
+    columns: MRT_ColumnDef<TData>[];
+  };
+
+export type MRT_DefinedColumnDef<
+  TData extends MRT_RowData,
+  TValue = unknown,
+> = Omit<MRT_ColumnDef<TData, TValue>, 'defaultDisplayColumn' | 'id'> & {
   _filterFn: MRT_FilterOption;
-  defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
+  defaultDisplayColumn: Partial<MRT_ColumnDef<TData, TValue>>;
   id: string;
 };
 
-export type MRT_Column<TData extends Record<string, any>> = Omit<
-  Column<TData, unknown>,
+export type MRT_Column<TData extends MRT_RowData, TValue = unknown> = Omit<
+  Column<TData, TValue>,
   'columnDef' | 'columns' | 'filterFn' | 'footer' | 'header'
 > & {
-  columnDef: MRT_DefinedColumnDef<TData>;
-  columns?: MRT_Column<TData>[];
+  columnDef: MRT_DefinedColumnDef<TData, TValue>;
+  columns?: MRT_Column<TData, TValue>[];
   filterFn?: MRT_FilterFn<TData>;
   footer: string;
   header: string;
 };
 
-export type MRT_Header<TData extends Record<string, any>> = Omit<
+export type MRT_Header<TData extends MRT_RowData> = Omit<
   Header<TData, unknown>,
   'column'
 > & {
   column: MRT_Column<TData>;
 };
 
-export type MRT_HeaderGroup<TData extends Record<string, any>> = Omit<
+export type MRT_HeaderGroup<TData extends MRT_RowData> = Omit<
   HeaderGroup<TData>,
   'headers'
 > & {
   headers: MRT_Header<TData>[];
 };
 
-export type MRT_Row<TData extends Record<string, any>> = Omit<
+export type MRT_Row<TData extends MRT_RowData> = Omit<
   Row<TData>,
   '_valuesCache' | 'getAllCells' | 'getVisibleCells' | 'subRows'
 > & {
@@ -572,17 +612,17 @@ export type MRT_Row<TData extends Record<string, any>> = Omit<
   subRows?: MRT_Row<TData>[];
 };
 
-export type MRT_Cell<TData extends Record<string, any>> = Omit<
-  Cell<TData, unknown>,
+export type MRT_Cell<TData extends MRT_RowData, TValue = unknown> = Omit<
+  Cell<TData, TValue>,
   'column' | 'row'
 > & {
-  column: MRT_Column<TData>;
+  column: MRT_Column<TData, TValue>;
   row: MRT_Row<TData>;
 };
 
 export type MRT_AggregationOption = string & keyof typeof MRT_AggregationFns;
 
-export type MRT_AggregationFn<TData extends Record<string, any>> =
+export type MRT_AggregationFn<TData extends MRT_RowData> =
   | AggregationFn<TData>
   | MRT_AggregationOption;
 
@@ -590,7 +630,7 @@ export type MRT_SortingOption = LiteralUnion<
   string & keyof typeof MRT_SortingFns
 >;
 
-export type MRT_SortingFn<TData extends Record<string, any>> =
+export type MRT_SortingFn<TData extends MRT_RowData> =
   | MRT_SortingOption
   | SortingFn<TData>;
 
@@ -598,7 +638,7 @@ export type MRT_FilterOption = LiteralUnion<
   string & keyof typeof MRT_FilterFns
 >;
 
-export type MRT_FilterFn<TData extends Record<string, any>> =
+export type MRT_FilterFn<TData extends MRT_RowData> =
   | FilterFn<TData>
   | MRT_FilterOption;
 
@@ -615,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.
@@ -626,7 +667,7 @@ export type MRT_DisplayColumnIds =
  * See the full props list on the official docs site:
  * @link https://www.material-react-table.com/docs/api/props
  */
-export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
+export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   Partial<TableOptions<TData>>,
   | 'columns'
   | 'data'
@@ -662,7 +703,7 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
    * See all Columns Options on the official docs site:
    * @link https://www.material-react-table.com/docs/api/column-options
    */
-  columns: MRT_ColumnDef<TData>[];
+  columns: MRT_ColumnDef<TData, any>[];
   createDisplayMode?: 'custom' | 'modal' | 'row';
   /**
    * Pass your data as an array of objects. Objects can theoretically be any shape, but it's best to keep them consistent.
@@ -678,9 +719,9 @@ export type MRT_TableOptions<TData extends Record<string, any>> = 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;
@@ -740,9 +781,10 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
    * @link https://www.material-react-table.com/docs/guides/memoize-components
    */
   memoMode?: 'cells' | 'rows' | 'table-body';
+  mrtTheme?: ((theme: Theme) => MRT_Theme) | MRT_Theme;
   muiBottomToolbarProps?:
-    | ((props: { table: MRT_TableInstance<TData> }) => ToolbarProps)
-    | ToolbarProps;
+    | ((props: { table: MRT_TableInstance<TData> }) => BoxProps)
+    | BoxProps;
   muiCircularProgressProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => CircularProgressProps)
     | CircularProgressProps;
@@ -778,7 +820,7 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
         table: MRT_TableInstance<TData>;
       }) => TableCellProps)
     | TableCellProps;
-  muiEditRowModalProps?:
+  muiEditRowDialogProps?:
     | ((props: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
@@ -943,8 +985,8 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
     | ((props: { table: MRT_TableInstance<TData> }) => AlertProps)
     | AlertProps;
   muiTopToolbarProps?:
-    | ((props: { table: MRT_TableInstance<TData> }) => ToolbarProps)
-    | ToolbarProps;
+    | ((props: { table: MRT_TableInstance<TData> }) => BoxProps)
+    | BoxProps;
   onColumnFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
   onCreatingRowCancel?: (props: {
     row: MRT_Row<TData>;
@@ -1005,7 +1047,7 @@ export type MRT_TableOptions<TData extends Record<string, any>> = 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>;
@@ -1014,7 +1056,7 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
     row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
-  renderEditRowModalContent?: (props: {
+  renderEditRowDialogContent?: (props: {
     internalEditComponents: ReactNode[];
     row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;

package/src/useMaterialReactTable.ts

@@ -1,11 +1,12 @@
 import { useMRT_TableInstance } from './hooks/useMRT_TableInstance';
 import { useMRT_TableOptions } from './hooks/useMRT_TableOptions';
-import { type MRT_TableInstance, type MRT_TableOptions } from './types';
+import {
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_TableOptions,
+} from './types';
 
-export const useMaterialReactTable = <TData extends Record<string, any>>(
+export const useMaterialReactTable = <TData extends MRT_RowData>(
   tableOptions: MRT_TableOptions<TData>,
-): MRT_TableInstance<TData> => {
-  const parsedTableOptions = useMRT_TableOptions(tableOptions);
-  const tableInstance = useMRT_TableInstance(parsedTableOptions);
-  return tableInstance;
-};
+): MRT_TableInstance<TData> =>
+  useMRT_TableInstance(useMRT_TableOptions(tableOptions));