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

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -4,13 +4,13 @@ import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingB
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleFullScreenButton } from '../buttons/MRT_ToggleFullScreenButton';
 import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarInternalButtons = <TData extends Record<string, any>>({
+export const MRT_ToolbarInternalButtons = <TData extends MRT_RowData>({
   table,
 }: Props<TData>) => {
   const {

package/src/toolbar/MRT_TopToolbar.tsx

@@ -10,7 +10,7 @@ import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
 export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   alignItems: 'flex-start',
@@ -25,11 +25,11 @@ export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   zIndex: 1,
 });
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TopToolbar = <TData extends Record<string, any>>({
+export const MRT_TopToolbar = <TData extends MRT_RowData>({
   table,
 }: Props<TData>) => {
   const {

package/src/types.ts

@@ -6,6 +6,7 @@ import {
   type SetStateAction,
 } from 'react';
 import {
+  type AccessorFn,
   type AggregationFn,
   type Cell,
   type Column,
@@ -16,6 +17,7 @@ import {
   type ColumnSizingInfoState,
   type ColumnSizingState,
   type DeepKeys,
+  type DeepValue,
   type ExpandedState,
   type FilterFn,
   type GroupingState,
@@ -82,6 +84,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 +104,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 +212,13 @@ export interface MRT_Localization {
   unpinAll: string;
 }
 
-export interface MRT_RowModel<TData extends Record<string, any>> {
+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 +290,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 +319,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 +333,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 +390,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 +413,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 +467,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 +475,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 +515,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 +548,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 +602,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 +620,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 +628,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;
 
@@ -626,7 +656,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 +692,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.

package/src/useMaterialReactTable.ts

@@ -1,8 +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);