material-react-table 1.7.3 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/README.md +5 -13
  2. package/dist/cjs/index.js +110 -72
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/types/MaterialReactTable.d.ts +22 -8
  5. package/dist/cjs/types/body/MRT_TableBody.d.ts +3 -4
  6. package/dist/cjs/types/body/MRT_TableBodyCell.d.ts +2 -3
  7. package/dist/cjs/types/body/MRT_TableBodyRow.d.ts +4 -5
  8. package/dist/cjs/types/body/MRT_TableDetailPanel.d.ts +2 -3
  9. package/dist/cjs/types/column.utils.d.ts +3 -2
  10. package/dist/cjs/types/footer/MRT_TableFooter.d.ts +2 -3
  11. package/dist/cjs/types/footer/MRT_TableFooterRow.d.ts +2 -3
  12. package/dist/cjs/types/head/MRT_TableHead.d.ts +2 -3
  13. package/dist/cjs/types/head/MRT_TableHeadRow.d.ts +2 -3
  14. package/dist/cjs/types/icons.d.ts +0 -1
  15. package/dist/cjs/types/table/MRT_TableRoot.d.ts +1 -272
  16. package/dist/esm/material-react-table.esm.js +108 -72
  17. package/dist/esm/material-react-table.esm.js.map +1 -1
  18. package/dist/esm/types/MaterialReactTable.d.ts +22 -8
  19. package/dist/esm/types/body/MRT_TableBody.d.ts +3 -4
  20. package/dist/esm/types/body/MRT_TableBodyCell.d.ts +2 -3
  21. package/dist/esm/types/body/MRT_TableBodyRow.d.ts +4 -5
  22. package/dist/esm/types/body/MRT_TableDetailPanel.d.ts +2 -3
  23. package/dist/esm/types/column.utils.d.ts +3 -2
  24. package/dist/esm/types/footer/MRT_TableFooter.d.ts +2 -3
  25. package/dist/esm/types/footer/MRT_TableFooterRow.d.ts +2 -3
  26. package/dist/esm/types/head/MRT_TableHead.d.ts +2 -3
  27. package/dist/esm/types/head/MRT_TableHeadRow.d.ts +2 -3
  28. package/dist/esm/types/icons.d.ts +0 -1
  29. package/dist/esm/types/table/MRT_TableRoot.d.ts +1 -272
  30. package/dist/index.d.ts +22 -8
  31. package/package.json +13 -14
  32. package/src/MaterialReactTable.tsx +50 -7
  33. package/src/body/MRT_TableBody.tsx +11 -10
  34. package/src/body/MRT_TableBodyCell.tsx +11 -13
  35. package/src/body/MRT_TableBodyCellValue.tsx +1 -0
  36. package/src/body/MRT_TableBodyRow.tsx +14 -7
  37. package/src/body/MRT_TableDetailPanel.tsx +2 -3
  38. package/src/buttons/MRT_ExpandAllButton.tsx +10 -8
  39. package/src/buttons/MRT_ExpandButton.tsx +10 -8
  40. package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +4 -1
  41. package/src/column.utils.ts +16 -6
  42. package/src/footer/MRT_TableFooter.tsx +2 -3
  43. package/src/footer/MRT_TableFooterRow.tsx +7 -3
  44. package/src/head/MRT_TableHead.tsx +2 -3
  45. package/src/head/MRT_TableHeadCell.tsx +1 -0
  46. package/src/head/MRT_TableHeadCellColumnActionsButton.tsx +1 -1
  47. package/src/head/MRT_TableHeadCellResizeHandle.tsx +2 -5
  48. package/src/head/MRT_TableHeadRow.tsx +7 -3
  49. package/src/icons.ts +0 -3
  50. package/src/inputs/MRT_EditCellTextField.tsx +38 -2
  51. package/src/menus/MRT_FilterOptionMenu.tsx +14 -5
  52. package/src/menus/MRT_RowActionMenu.tsx +12 -10
  53. package/src/table/MRT_Table.tsx +6 -5
  54. package/src/table/MRT_TableRoot.tsx +33 -19
@@ -18,16 +18,18 @@ import type { TablePaginationProps } from '@mui/material/TablePagination';
18
18
  import type { TableRowProps } from '@mui/material/TableRow';
19
19
  import type { TextFieldProps } from '@mui/material/TextField';
20
20
  import type { ToolbarProps } from '@mui/material/Toolbar';
21
- import type { AggregationFn, Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
22
- import type { VirtualizerOptions, Virtualizer } from '@tanstack/react-virtual';
21
+ import type { AggregationFn, Cell, Column, ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingInfoState, ColumnSizingState, DeepKeys, ExpandedState, FilterFn, GroupingState, Header, HeaderGroup, OnChangeFn, PaginationState, Row, RowSelectionState, SortingFn, SortingState, Table, TableOptions, TableState, VisibilityState } from '@tanstack/react-table';
22
+ import type { VirtualizerOptions, Virtualizer, VirtualItem } from '@tanstack/react-virtual';
23
23
  import { MRT_AggregationFns } from './aggregationFns';
24
24
  import { MRT_FilterFns } from './filterFns';
25
25
  import { MRT_Icons } from './icons';
26
26
  import { MRT_SortingFns } from './sortingFns';
27
+ export { MRT_AggregationFns, MRT_FilterFns, MRT_SortingFns };
27
28
  /**
28
29
  * Most of this file is just TypeScript types
29
30
  */
30
- export type DensityState = 'comfortable' | 'compact' | 'spacious';
31
+ export type MRT_DensityState = 'comfortable' | 'compact' | 'spacious';
32
+ export type { ColumnFiltersState as MRT_ColumnFiltersState, ColumnOrderState as MRT_ColumnOrderState, ColumnPinningState as MRT_ColumnPinningState, ColumnSizingInfoState as MRT_ColumnSizingInfoState, ColumnSizingState as MRT_ColumnSizingState, ExpandedState as MRT_ExpandedState, GroupingState as MRT_GroupingState, PaginationState as MRT_PaginationState, RowSelectionState as MRT_RowSelectionState, SortingState as MRT_SortingState, VirtualItem as MRT_VirtualItem, Virtualizer as MRT_Virtualizer, VirtualizerOptions as MRT_VirtualizerOptions, VisibilityState as MRT_VisibilityState, };
31
33
  type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
32
34
  export interface MRT_Localization {
33
35
  actions: string;
@@ -160,7 +162,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Tab
160
162
  setColumnFilterFns: Dispatch<SetStateAction<{
161
163
  [key: string]: MRT_FilterOption;
162
164
  }>>;
163
- setDensity: Dispatch<SetStateAction<DensityState>>;
165
+ setDensity: Dispatch<SetStateAction<MRT_DensityState>>;
164
166
  setDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
165
167
  setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
166
168
  setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
@@ -180,7 +182,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Tab
180
182
  };
181
183
  export type MRT_TableState<TData extends Record<string, any> = {}> = TableState & {
182
184
  columnFilterFns: Record<string, MRT_FilterOption>;
183
- density: DensityState;
185
+ density: MRT_DensityState;
184
186
  draggingColumn: MRT_Column<TData> | null;
185
187
  draggingRow: MRT_Row<TData> | null;
186
188
  editingCell: MRT_Cell<TData> | null;
@@ -243,6 +245,12 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnD
243
245
  header: MRT_Header<TData>;
244
246
  table: MRT_TableInstance<TData>;
245
247
  }) => ReactNode);
248
+ PlaceholderCell?: (props: {
249
+ cell: MRT_Cell<TData>;
250
+ column: MRT_Column<TData>;
251
+ row: MRT_Row<TData>;
252
+ table: MRT_TableInstance<TData>;
253
+ }) => ReactNode;
246
254
  /**
247
255
  * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
248
256
  * Specify a function here to point to the correct property in the data object.
@@ -271,12 +279,18 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnD
271
279
  columnDefType?: 'data' | 'display' | 'group';
272
280
  columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
273
281
  columns?: MRT_ColumnDef<TData>[];
282
+ editSelectOptions?: (string | {
283
+ text: string;
284
+ value: any;
285
+ })[];
286
+ editVariant?: 'text' | 'select';
274
287
  enableClickToCopy?: boolean;
275
288
  enableColumnActions?: boolean;
276
289
  enableColumnDragging?: boolean;
277
290
  enableColumnFilterModes?: boolean;
278
291
  enableColumnOrdering?: boolean;
279
- enableEditing?: boolean;
292
+ enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
293
+ enableFilterMatchHighlighting?: boolean;
280
294
  filterFn?: MRT_FilterFn<TData>;
281
295
  filterSelectOptions?: (string | {
282
296
  text: string;
@@ -447,7 +461,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Om
447
461
  enableColumnOrdering?: boolean;
448
462
  enableColumnVirtualization?: boolean;
449
463
  enableDensityToggle?: boolean;
450
- enableEditing?: boolean;
464
+ enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
451
465
  enableExpandAll?: boolean;
452
466
  enableFilterMatchHighlighting?: boolean;
453
467
  enableFullScreenToggle?: boolean;
@@ -615,7 +629,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Om
615
629
  muiTopToolbarProps?: ToolbarProps | ((props: {
616
630
  table: MRT_TableInstance<TData>;
617
631
  }) => ToolbarProps);
618
- onDensityChange?: OnChangeFn<DensityState>;
632
+ onDensityChange?: OnChangeFn<MRT_DensityState>;
619
633
  onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
620
634
  onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
621
635
  onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
@@ -1,10 +1,9 @@
1
1
  import React from 'react';
2
- import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
3
- import type { MRT_TableInstance } from '..';
2
+ import type { MRT_TableInstance, MRT_VirtualItem, MRT_Virtualizer } from '..';
4
3
  interface Props {
5
- columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
4
+ columnVirtualizer?: MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>;
6
5
  table: MRT_TableInstance;
7
- virtualColumns?: VirtualItem[];
6
+ virtualColumns?: MRT_VirtualItem[];
8
7
  virtualPaddingLeft?: number;
9
8
  virtualPaddingRight?: number;
10
9
  }
@@ -1,6 +1,5 @@
1
1
  import React, { RefObject } from 'react';
2
- import type { VirtualItem } from '@tanstack/react-virtual';
3
- import type { MRT_Cell, MRT_TableInstance } from '..';
2
+ import type { MRT_Cell, MRT_TableInstance, MRT_VirtualItem } from '..';
4
3
  interface Props {
5
4
  cell: MRT_Cell;
6
5
  enableHover?: boolean;
@@ -9,7 +8,7 @@ interface Props {
9
8
  rowIndex: number;
10
9
  rowRef: RefObject<HTMLTableRowElement>;
11
10
  table: MRT_TableInstance;
12
- virtualCell?: VirtualItem;
11
+ virtualCell?: MRT_VirtualItem;
13
12
  }
14
13
  export declare const MRT_TableBodyCell: ({ cell, enableHover, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }: Props) => JSX.Element;
15
14
  export declare const Memo_MRT_TableBodyCell: React.MemoExoticComponent<({ cell, enableHover, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }: Props) => JSX.Element>;
@@ -1,17 +1,16 @@
1
1
  import React from 'react';
2
- import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
3
- import type { MRT_Row, MRT_TableInstance } from '..';
2
+ import type { MRT_Row, MRT_TableInstance, MRT_VirtualItem, MRT_Virtualizer } from '..';
4
3
  interface Props {
5
- columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
4
+ columnVirtualizer?: MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>;
6
5
  measureElement?: (element: HTMLTableRowElement) => void;
7
6
  numRows: number;
8
7
  row: MRT_Row;
9
8
  rowIndex: number;
10
9
  table: MRT_TableInstance;
11
- virtualColumns?: VirtualItem[];
10
+ virtualColumns?: MRT_VirtualItem[];
12
11
  virtualPaddingLeft?: number;
13
12
  virtualPaddingRight?: number;
14
- virtualRow?: VirtualItem;
13
+ virtualRow?: MRT_VirtualItem;
15
14
  }
16
15
  export declare const MRT_TableBodyRow: ({ columnVirtualizer, measureElement, numRows, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }: Props) => JSX.Element;
17
16
  export declare const Memo_MRT_TableBodyRow: React.MemoExoticComponent<({ columnVirtualizer, measureElement, numRows, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }: Props) => JSX.Element>;
@@ -1,11 +1,10 @@
1
1
  import React from 'react';
2
- import type { VirtualItem } from '@tanstack/react-virtual';
3
- import type { MRT_Row, MRT_TableInstance } from '..';
2
+ import type { MRT_Row, MRT_TableInstance, MRT_VirtualItem } from '..';
4
3
  interface Props {
5
4
  parentRowRef: React.RefObject<HTMLTableRowElement>;
6
5
  row: MRT_Row;
7
6
  table: MRT_TableInstance;
8
- virtualRow?: VirtualItem;
7
+ virtualRow?: MRT_VirtualItem;
9
8
  }
10
9
  export declare const MRT_TableDetailPanel: ({ parentRowRef, row, table, virtualRow, }: Props) => JSX.Element;
11
10
  export {};
@@ -4,7 +4,7 @@ import { MRT_FilterFns } from './filterFns';
4
4
  import { MRT_SortingFns } from './sortingFns';
5
5
  import type { TableCellProps } from '@mui/material/TableCell';
6
6
  import type { Theme } from '@mui/material/styles';
7
- import type { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_TableInstance } from '.';
7
+ import type { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_Header, MRT_TableInstance } from '.';
8
8
  export declare const getColumnId: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => string;
9
9
  export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
10
10
  export declare const prepareColumns: <TData extends Record<string, any> = {}>({ aggregationFns, columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }: {
@@ -111,8 +111,9 @@ export declare const getIsLastColumn: (column: MRT_Column, table: MRT_TableInsta
111
111
  export declare const getIsLastLeftPinnedColumn: (table: MRT_TableInstance, column: MRT_Column) => boolean;
112
112
  export declare const getIsFirstRightPinnedColumn: (column: MRT_Column) => boolean;
113
113
  export declare const getTotalRight: (table: MRT_TableInstance, column: MRT_Column) => number;
114
- export declare const getCommonCellStyles: ({ column, table, tableCellProps, theme, }: {
114
+ export declare const getCommonCellStyles: ({ column, header, table, tableCellProps, theme, }: {
115
115
  column: MRT_Column;
116
+ header?: MRT_Header<{}> | undefined;
116
117
  table: MRT_TableInstance;
117
118
  tableCellProps: TableCellProps;
118
119
  theme: Theme;
@@ -1,9 +1,8 @@
1
1
  /// <reference types="react" />
2
- import type { VirtualItem } from '@tanstack/react-virtual';
3
- import type { MRT_TableInstance } from '..';
2
+ import type { MRT_TableInstance, MRT_VirtualItem } from '..';
4
3
  interface Props {
5
4
  table: MRT_TableInstance;
6
- virtualColumns?: VirtualItem[];
5
+ virtualColumns?: MRT_VirtualItem[];
7
6
  virtualPaddingLeft?: number;
8
7
  virtualPaddingRight?: number;
9
8
  }
@@ -1,10 +1,9 @@
1
1
  /// <reference types="react" />
2
- import { VirtualItem } from '@tanstack/react-virtual';
3
- import type { MRT_HeaderGroup, MRT_TableInstance } from '..';
2
+ import type { MRT_HeaderGroup, MRT_TableInstance, MRT_VirtualItem } from '..';
4
3
  interface Props {
5
4
  footerGroup: MRT_HeaderGroup;
6
5
  table: MRT_TableInstance;
7
- virtualColumns?: VirtualItem[];
6
+ virtualColumns?: MRT_VirtualItem[];
8
7
  virtualPaddingLeft?: number;
9
8
  virtualPaddingRight?: number;
10
9
  }
@@ -1,9 +1,8 @@
1
1
  /// <reference types="react" />
2
- import type { VirtualItem } from '@tanstack/react-virtual';
3
- import type { MRT_TableInstance } from '..';
2
+ import type { MRT_TableInstance, MRT_VirtualItem } from '..';
4
3
  interface Props {
5
4
  table: MRT_TableInstance;
6
- virtualColumns?: VirtualItem[];
5
+ virtualColumns?: MRT_VirtualItem[];
7
6
  virtualPaddingLeft?: number;
8
7
  virtualPaddingRight?: number;
9
8
  }
@@ -1,10 +1,9 @@
1
1
  /// <reference types="react" />
2
- import type { VirtualItem } from '@tanstack/react-virtual';
3
- import type { MRT_HeaderGroup, MRT_TableInstance } from '..';
2
+ import type { MRT_HeaderGroup, MRT_TableInstance, MRT_VirtualItem } from '..';
4
3
  interface Props {
5
4
  headerGroup: MRT_HeaderGroup;
6
5
  table: MRT_TableInstance;
7
- virtualColumns?: VirtualItem[];
6
+ virtualColumns?: MRT_VirtualItem[];
8
7
  virtualPaddingLeft?: number;
9
8
  virtualPaddingRight?: number;
10
9
  }
@@ -11,7 +11,6 @@ export interface MRT_Icons {
11
11
  DragHandleIcon: any;
12
12
  DynamicFeedIcon: any;
13
13
  EditIcon: any;
14
- ExpandLessIcon: any;
15
14
  ExpandMoreIcon: any;
16
15
  FilterAltIcon: any;
17
16
  FilterListIcon: any;
@@ -1,272 +1 @@
1
- import React from 'react';
2
- import type { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_FilterOption, MRT_Localization, MRT_Row, MRT_TableInstance, MRT_TableState, MaterialReactTableProps } from '..';
3
- export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: Omit<Partial<import("@tanstack/react-table").TableOptions<TData>>, "state" | "data" | "onStateChange" | "initialState" | "getRowId" | "columns" | "defaultColumn" | "globalFilterFn" | "enableRowSelection" | "expandRowsFn"> & {
4
- columnFilterModeOptions?: (string & MRT_FilterOption)[] | null | undefined;
5
- columns: MRT_ColumnDef<TData>[];
6
- data: TData[];
7
- defaultColumn?: Partial<MRT_ColumnDef<TData>> | undefined;
8
- defaultDisplayColumn?: Partial<MRT_ColumnDef<TData>> | undefined;
9
- displayColumnDefOptions?: Partial<{
10
- "mrt-row-drag": Partial<MRT_ColumnDef<{}>>;
11
- "mrt-row-actions": Partial<MRT_ColumnDef<{}>>;
12
- "mrt-row-expand": Partial<MRT_ColumnDef<{}>>;
13
- "mrt-row-select": Partial<MRT_ColumnDef<{}>>;
14
- "mrt-row-numbers": Partial<MRT_ColumnDef<{}>>;
15
- }> | undefined;
16
- editingMode?: "row" | "cell" | "table" | "modal" | undefined;
17
- enableBottomToolbar?: boolean | undefined;
18
- enableClickToCopy?: boolean | undefined;
19
- enableColumnActions?: boolean | undefined;
20
- enableColumnDragging?: boolean | undefined;
21
- enableColumnFilterModes?: boolean | undefined;
22
- enableColumnOrdering?: boolean | undefined;
23
- enableColumnVirtualization?: boolean | undefined;
24
- enableDensityToggle?: boolean | undefined;
25
- enableEditing?: boolean | undefined;
26
- enableExpandAll?: boolean | undefined;
27
- enableFilterMatchHighlighting?: boolean | undefined;
28
- enableFullScreenToggle?: boolean | undefined;
29
- enableGlobalFilterModes?: boolean | undefined;
30
- enableGlobalFilterRankedResults?: boolean | undefined;
31
- enablePagination?: boolean | undefined;
32
- enableRowActions?: boolean | undefined;
33
- enableRowDragging?: boolean | undefined;
34
- enableRowNumbers?: boolean | undefined;
35
- enableRowOrdering?: boolean | undefined;
36
- enableRowSelection?: boolean | ((row: MRT_Row<TData>) => boolean) | undefined;
37
- enableRowVirtualization?: boolean | undefined;
38
- enableSelectAll?: boolean | undefined;
39
- enableStickyFooter?: boolean | undefined;
40
- enableStickyHeader?: boolean | undefined;
41
- enableTableFooter?: boolean | undefined;
42
- enableTableHead?: boolean | undefined;
43
- enableToolbarInternalActions?: boolean | undefined;
44
- enableTopToolbar?: boolean | undefined;
45
- expandRowsFn?: ((dataRow: TData) => TData[]) | undefined;
46
- getRowId?: ((originalRow: TData, index: number, parentRow: MRT_Row<TData>) => string) | undefined;
47
- globalFilterFn?: MRT_FilterOption | undefined;
48
- globalFilterModeOptions?: MRT_FilterOption[] | null | undefined;
49
- icons?: Partial<import("..").MRT_Icons> | undefined;
50
- initialState?: Partial<MRT_TableState<TData>> | undefined;
51
- layoutMode?: "grid" | "semantic" | undefined;
52
- localization?: Partial<MRT_Localization> | undefined;
53
- memoMode?: "rows" | "cells" | "table-body" | undefined;
54
- muiBottomToolbarProps?: import("@mui/material").ToolbarProps<"div", {}> | ((props: {
55
- table: MRT_TableInstance<TData>;
56
- }) => import("@mui/material").ToolbarProps<"div", {}>) | undefined;
57
- muiExpandAllButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
58
- table: MRT_TableInstance<TData>;
59
- }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
60
- muiExpandButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
61
- table: MRT_TableInstance<TData>;
62
- row: MRT_Row<TData>;
63
- }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
64
- muiLinearProgressProps?: import("@mui/material").LinearProgressProps | ((props: {
65
- isTopToolbar: boolean;
66
- table: MRT_TableInstance<TData>;
67
- }) => import("@mui/material").LinearProgressProps) | undefined;
68
- muiSearchTextFieldProps?: import("@mui/material").TextFieldProps | ((props: {
69
- table: MRT_TableInstance<TData>;
70
- }) => import("@mui/material").TextFieldProps) | undefined;
71
- muiSelectAllCheckboxProps?: import("@mui/material").CheckboxProps | ((props: {
72
- table: MRT_TableInstance<TData>;
73
- }) => import("@mui/material").CheckboxProps) | undefined;
74
- muiSelectCheckboxProps?: import("@mui/material").CheckboxProps | import("@mui/material").RadioProps | ((props: {
75
- table: MRT_TableInstance<TData>;
76
- row: MRT_Row<TData>;
77
- }) => import("@mui/material").CheckboxProps | import("@mui/material").RadioProps) | undefined;
78
- muiTableBodyCellCopyButtonProps?: import("@mui/material").ButtonProps<"button", {}> | ((props: {
79
- cell: MRT_Cell<TData>;
80
- column: MRT_Column<TData>;
81
- row: MRT_Row<TData>;
82
- table: MRT_TableInstance<TData>;
83
- }) => import("@mui/material").ButtonProps<"button", {}>) | undefined;
84
- muiTableBodyCellEditTextFieldProps?: import("@mui/material").TextFieldProps | ((props: {
85
- cell: MRT_Cell<TData>;
86
- column: MRT_Column<TData>;
87
- row: MRT_Row<TData>;
88
- table: MRT_TableInstance<TData>;
89
- }) => import("@mui/material").TextFieldProps) | undefined;
90
- muiTableBodyCellProps?: import("@mui/material").TableCellProps | ((props: {
91
- cell: MRT_Cell<TData>;
92
- column: MRT_Column<TData>;
93
- row: MRT_Row<TData>;
94
- table: MRT_TableInstance<TData>;
95
- }) => import("@mui/material").TableCellProps) | undefined;
96
- muiTableBodyCellSkeletonProps?: import("@mui/material").SkeletonProps<"span", {}> | ((props: {
97
- cell: MRT_Cell<TData>;
98
- column: MRT_Column<TData>;
99
- row: MRT_Row<TData>;
100
- table: MRT_TableInstance<TData>;
101
- }) => import("@mui/material").SkeletonProps<"span", {}>) | undefined;
102
- muiTableBodyProps?: import("@mui/material").TableBodyProps<"tbody", {}> | ((props: {
103
- table: MRT_TableInstance<TData>;
104
- }) => import("@mui/material").TableBodyProps<"tbody", {}>) | undefined;
105
- muiTableBodyRowDragHandleProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
106
- table: MRT_TableInstance<TData>;
107
- row: MRT_Row<TData>;
108
- }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
109
- muiTableBodyRowProps?: import("@mui/material").TableRowProps<"tr", {}> | ((props: {
110
- isDetailPanel?: boolean | undefined;
111
- row: MRT_Row<TData>;
112
- table: MRT_TableInstance<TData>;
113
- }) => import("@mui/material").TableRowProps<"tr", {}>) | undefined;
114
- muiTableContainerProps?: import("@mui/material").TableContainerProps<"div", {}> | ((props: {
115
- table: MRT_TableInstance<TData>;
116
- }) => import("@mui/material").TableContainerProps<"div", {}>) | undefined;
117
- muiTableDetailPanelProps?: import("@mui/material").TableCellProps | ((props: {
118
- table: MRT_TableInstance<TData>;
119
- row: MRT_Row<TData>;
120
- }) => import("@mui/material").TableCellProps) | undefined;
121
- muiTableFooterCellProps?: import("@mui/material").TableCellProps | ((props: {
122
- table: MRT_TableInstance<TData>;
123
- column: MRT_Column<TData>;
124
- }) => import("@mui/material").TableCellProps) | undefined;
125
- muiTableFooterProps?: import("@mui/material").TableFooterProps<"tfoot", {}> | ((props: {
126
- table: MRT_TableInstance<TData>;
127
- }) => import("@mui/material").TableFooterProps<"tfoot", {}>) | undefined;
128
- muiTableFooterRowProps?: import("@mui/material").TableRowProps<"tr", {}> | ((props: {
129
- table: MRT_TableInstance<TData>;
130
- footerGroup: import("..").MRT_HeaderGroup<TData>;
131
- }) => import("@mui/material").TableRowProps<"tr", {}>) | undefined;
132
- muiTableHeadCellColumnActionsButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
133
- table: MRT_TableInstance<TData>;
134
- column: MRT_Column<TData>;
135
- }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
136
- muiTableHeadCellDragHandleProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
137
- table: MRT_TableInstance<TData>;
138
- column: MRT_Column<TData>;
139
- }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
140
- muiTableHeadCellFilterCheckboxProps?: import("@mui/material").CheckboxProps | ((props: {
141
- column: MRT_Column<TData>;
142
- table: MRT_TableInstance<TData>;
143
- }) => import("@mui/material").CheckboxProps) | undefined;
144
- muiTableHeadCellFilterTextFieldProps?: import("@mui/material").TextFieldProps | ((props: {
145
- table: MRT_TableInstance<TData>;
146
- column: MRT_Column<TData>;
147
- rangeFilterIndex?: number | undefined;
148
- }) => import("@mui/material").TextFieldProps) | undefined;
149
- muiTableHeadCellProps?: import("@mui/material").TableCellProps | ((props: {
150
- table: MRT_TableInstance<TData>;
151
- column: MRT_Column<TData>;
152
- }) => import("@mui/material").TableCellProps) | undefined;
153
- muiTableHeadProps?: import("@mui/material").TableHeadProps<"thead", {}> | ((props: {
154
- table: MRT_TableInstance<TData>;
155
- }) => import("@mui/material").TableHeadProps<"thead", {}>) | undefined;
156
- muiTableHeadRowProps?: import("@mui/material").TableRowProps<"tr", {}> | ((props: {
157
- table: MRT_TableInstance<TData>;
158
- headerGroup: import("..").MRT_HeaderGroup<TData>;
159
- }) => import("@mui/material").TableRowProps<"tr", {}>) | undefined;
160
- muiTablePaginationProps?: Partial<import("@mui/material").TablePaginationProps<React.JSXElementConstructor<import("@mui/material").TablePaginationBaseProps>, {}>> | ((props: {
161
- table: MRT_TableInstance<TData>;
162
- }) => Partial<import("@mui/material").TablePaginationProps<React.JSXElementConstructor<import("@mui/material").TablePaginationBaseProps>, {}>>) | undefined;
163
- muiTablePaperProps?: import("@mui/material").PaperProps<"div", {}> | ((props: {
164
- table: MRT_TableInstance<TData>;
165
- }) => import("@mui/material").PaperProps<"div", {}>) | undefined;
166
- muiTableProps?: import("@mui/material").TableProps<"table", {}> | ((props: {
167
- table: MRT_TableInstance<TData>;
168
- }) => import("@mui/material").TableProps<"table", {}>) | undefined;
169
- muiToolbarAlertBannerChipProps?: import("@mui/material").ChipProps<"div", {}> | ((props: {
170
- table: MRT_TableInstance<TData>;
171
- }) => import("@mui/material").ChipProps<"div", {}>) | undefined;
172
- muiToolbarAlertBannerProps?: import("@mui/material").AlertProps | ((props: {
173
- table: MRT_TableInstance<TData>;
174
- }) => import("@mui/material").AlertProps) | undefined;
175
- muiTopToolbarProps?: import("@mui/material").ToolbarProps<"div", {}> | ((props: {
176
- table: MRT_TableInstance<TData>;
177
- }) => import("@mui/material").ToolbarProps<"div", {}>) | undefined;
178
- onDensityChange?: import("@tanstack/react-table").OnChangeFn<import("..").DensityState> | undefined;
179
- onDraggingColumnChange?: import("@tanstack/react-table").OnChangeFn<MRT_Column<TData> | null> | undefined;
180
- onDraggingRowChange?: import("@tanstack/react-table").OnChangeFn<MRT_Row<TData> | null> | undefined;
181
- onEditingCellChange?: import("@tanstack/react-table").OnChangeFn<MRT_Cell<TData> | null> | undefined;
182
- onEditingRowCancel?: ((props: {
183
- row: MRT_Row<TData>;
184
- table: MRT_TableInstance<TData>;
185
- }) => void) | undefined;
186
- onEditingRowSave?: ((props: {
187
- exitEditingMode: () => void;
188
- row: MRT_Row<TData>;
189
- table: MRT_TableInstance<TData>;
190
- values: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
191
- }) => void | Promise<void>) | undefined;
192
- onEditingRowChange?: import("@tanstack/react-table").OnChangeFn<MRT_Row<TData> | null> | undefined;
193
- onColumnFilterFnsChange?: import("@tanstack/react-table").OnChangeFn<{
194
- [key: string]: MRT_FilterOption;
195
- }> | undefined;
196
- onGlobalFilterFnChange?: import("@tanstack/react-table").OnChangeFn<MRT_FilterOption> | undefined;
197
- onHoveredColumnChange?: import("@tanstack/react-table").OnChangeFn<MRT_Column<TData> | null> | undefined;
198
- onHoveredRowChange?: import("@tanstack/react-table").OnChangeFn<MRT_Row<TData> | null> | undefined;
199
- onIsFullScreenChange?: import("@tanstack/react-table").OnChangeFn<boolean> | undefined;
200
- onShowAlertBannerChange?: import("@tanstack/react-table").OnChangeFn<boolean> | undefined;
201
- onShowFiltersChange?: import("@tanstack/react-table").OnChangeFn<boolean> | undefined;
202
- onShowGlobalFilterChange?: import("@tanstack/react-table").OnChangeFn<boolean> | undefined;
203
- onShowToolbarDropZoneChange?: import("@tanstack/react-table").OnChangeFn<boolean> | undefined;
204
- positionActionsColumn?: "first" | "last" | undefined;
205
- positionExpandColumn?: "first" | "last" | undefined;
206
- positionGlobalFilter?: "left" | "right" | "none" | undefined;
207
- positionPagination?: "bottom" | "top" | "none" | "both" | undefined;
208
- positionToolbarAlertBanner?: "bottom" | "top" | "none" | undefined;
209
- positionToolbarDropZone?: "bottom" | "top" | "none" | "both" | undefined;
210
- renderBottomToolbar?: React.ReactNode | ((props: {
211
- table: MRT_TableInstance<TData>;
212
- }) => React.ReactNode);
213
- renderBottomToolbarCustomActions?: ((props: {
214
- table: MRT_TableInstance<TData>;
215
- }) => React.ReactNode) | undefined;
216
- renderColumnActionsMenuItems?: ((props: {
217
- column: MRT_Column<TData>;
218
- closeMenu: () => void;
219
- table: MRT_TableInstance<TData>;
220
- }) => React.ReactNode[]) | undefined;
221
- renderColumnFilterModeMenuItems?: ((props: {
222
- column: MRT_Column<TData>;
223
- internalFilterOptions: import("..").MRT_InternalFilterOption[];
224
- onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
225
- table: MRT_TableInstance<TData>;
226
- }) => React.ReactNode[]) | undefined;
227
- renderDetailPanel?: ((props: {
228
- row: MRT_Row<TData>;
229
- table: MRT_TableInstance<TData>;
230
- }) => React.ReactNode) | undefined;
231
- renderGlobalFilterModeMenuItems?: ((props: {
232
- internalFilterOptions: import("..").MRT_InternalFilterOption[];
233
- onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
234
- table: MRT_TableInstance<TData>;
235
- }) => React.ReactNode[]) | undefined;
236
- renderRowActionMenuItems?: ((props: {
237
- closeMenu: () => void;
238
- row: MRT_Row<TData>;
239
- table: MRT_TableInstance<TData>;
240
- }) => React.ReactNode[]) | undefined;
241
- renderRowActions?: ((props: {
242
- cell: MRT_Cell<TData>;
243
- row: MRT_Row<TData>;
244
- table: MRT_TableInstance<TData>;
245
- }) => React.ReactNode) | undefined;
246
- renderToolbarInternalActions?: ((props: {
247
- table: MRT_TableInstance<TData>;
248
- }) => React.ReactNode) | undefined;
249
- renderTopToolbar?: React.ReactNode | ((props: {
250
- table: MRT_TableInstance<TData>;
251
- }) => React.ReactNode);
252
- renderTopToolbarCustomActions?: ((props: {
253
- table: MRT_TableInstance<TData>;
254
- }) => React.ReactNode) | undefined;
255
- rowCount?: number | undefined;
256
- rowNumberMode?: "original" | "static" | undefined;
257
- selectAllMode?: "all" | "page" | undefined;
258
- state?: Partial<MRT_TableState<TData>> | undefined;
259
- columnVirtualizerInstanceRef?: React.MutableRefObject<import("@tanstack/react-virtual").Virtualizer<HTMLDivElement, HTMLTableCellElement> | null> | undefined;
260
- columnVirtualizerProps?: Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>> | ((props: {
261
- table: MRT_TableInstance<TData>;
262
- }) => Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>) | undefined;
263
- rowVirtualizerInstanceRef?: React.MutableRefObject<import("@tanstack/react-virtual").Virtualizer<HTMLDivElement, HTMLTableRowElement> | null> | undefined;
264
- rowVirtualizerProps?: Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | ((props: {
265
- table: MRT_TableInstance<TData>;
266
- }) => Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>) | undefined;
267
- tableInstanceRef?: React.MutableRefObject<MRT_TableInstance<TData> | null> | undefined;
268
- virtualizerInstanceRef?: any;
269
- virtualizerProps?: any;
270
- } & {
271
- localization: MRT_Localization;
272
- }) => JSX.Element;
1
+ export declare const MRT_TableRoot: any;
package/dist/index.d.ts CHANGED
@@ -21,7 +21,9 @@ import { TextFieldProps } from '@mui/material/TextField';
21
21
  import { ToolbarProps } from '@mui/material/Toolbar';
22
22
  import * as _tanstack_react_table from '@tanstack/react-table';
23
23
  import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, AggregationFn, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
24
+ export { ColumnFiltersState as MRT_ColumnFiltersState, ColumnOrderState as MRT_ColumnOrderState, ColumnPinningState as MRT_ColumnPinningState, ColumnSizingInfoState as MRT_ColumnSizingInfoState, ColumnSizingState as MRT_ColumnSizingState, ExpandedState as MRT_ExpandedState, GroupingState as MRT_GroupingState, PaginationState as MRT_PaginationState, RowSelectionState as MRT_RowSelectionState, SortingState as MRT_SortingState, VisibilityState as MRT_VisibilityState } from '@tanstack/react-table';
24
25
  import { Virtualizer, VirtualizerOptions } from '@tanstack/react-virtual';
26
+ export { VirtualItem as MRT_VirtualItem, Virtualizer as MRT_Virtualizer, VirtualizerOptions as MRT_VirtualizerOptions } from '@tanstack/react-virtual';
25
27
  import { RankingInfo } from '@tanstack/match-sorter-utils';
26
28
 
27
29
  declare const MRT_AggregationFns: {
@@ -116,7 +118,6 @@ interface MRT_Icons {
116
118
  DragHandleIcon: any;
117
119
  DynamicFeedIcon: any;
118
120
  EditIcon: any;
119
- ExpandLessIcon: any;
120
121
  ExpandMoreIcon: any;
121
122
  FilterAltIcon: any;
122
123
  FilterListIcon: any;
@@ -148,7 +149,8 @@ declare const MRT_SortingFns: {
148
149
  /**
149
150
  * Most of this file is just TypeScript types
150
151
  */
151
- type DensityState = 'comfortable' | 'compact' | 'spacious';
152
+ type MRT_DensityState = 'comfortable' | 'compact' | 'spacious';
153
+
152
154
  type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
153
155
  interface MRT_Localization {
154
156
  actions: string;
@@ -281,7 +283,7 @@ type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Table<TDat
281
283
  setColumnFilterFns: Dispatch<SetStateAction<{
282
284
  [key: string]: MRT_FilterOption;
283
285
  }>>;
284
- setDensity: Dispatch<SetStateAction<DensityState>>;
286
+ setDensity: Dispatch<SetStateAction<MRT_DensityState>>;
285
287
  setDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
286
288
  setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
287
289
  setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
@@ -301,7 +303,7 @@ type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Table<TDat
301
303
  };
302
304
  type MRT_TableState<TData extends Record<string, any> = {}> = TableState & {
303
305
  columnFilterFns: Record<string, MRT_FilterOption>;
304
- density: DensityState;
306
+ density: MRT_DensityState;
305
307
  draggingColumn: MRT_Column<TData> | null;
306
308
  draggingRow: MRT_Row<TData> | null;
307
309
  editingCell: MRT_Cell<TData> | null;
@@ -364,6 +366,12 @@ type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TDat
364
366
  header: MRT_Header<TData>;
365
367
  table: MRT_TableInstance<TData>;
366
368
  }) => ReactNode);
369
+ PlaceholderCell?: (props: {
370
+ cell: MRT_Cell<TData>;
371
+ column: MRT_Column<TData>;
372
+ row: MRT_Row<TData>;
373
+ table: MRT_TableInstance<TData>;
374
+ }) => ReactNode;
367
375
  /**
368
376
  * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
369
377
  * Specify a function here to point to the correct property in the data object.
@@ -392,12 +400,18 @@ type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TDat
392
400
  columnDefType?: 'data' | 'display' | 'group';
393
401
  columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
394
402
  columns?: MRT_ColumnDef<TData>[];
403
+ editSelectOptions?: (string | {
404
+ text: string;
405
+ value: any;
406
+ })[];
407
+ editVariant?: 'text' | 'select';
395
408
  enableClickToCopy?: boolean;
396
409
  enableColumnActions?: boolean;
397
410
  enableColumnDragging?: boolean;
398
411
  enableColumnFilterModes?: boolean;
399
412
  enableColumnOrdering?: boolean;
400
- enableEditing?: boolean;
413
+ enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
414
+ enableFilterMatchHighlighting?: boolean;
401
415
  filterFn?: MRT_FilterFn<TData>;
402
416
  filterSelectOptions?: (string | {
403
417
  text: string;
@@ -568,7 +582,7 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Part
568
582
  enableColumnOrdering?: boolean;
569
583
  enableColumnVirtualization?: boolean;
570
584
  enableDensityToggle?: boolean;
571
- enableEditing?: boolean;
585
+ enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
572
586
  enableExpandAll?: boolean;
573
587
  enableFilterMatchHighlighting?: boolean;
574
588
  enableFullScreenToggle?: boolean;
@@ -736,7 +750,7 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Part
736
750
  muiTopToolbarProps?: ToolbarProps | ((props: {
737
751
  table: MRT_TableInstance<TData>;
738
752
  }) => ToolbarProps);
739
- onDensityChange?: OnChangeFn<DensityState>;
753
+ onDensityChange?: OnChangeFn<MRT_DensityState>;
740
754
  onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
741
755
  onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
742
756
  onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
@@ -930,4 +944,4 @@ interface Props<TData extends Record<string, any> = {}> {
930
944
  }
931
945
  declare const MRT_BottomToolbar: <TData extends Record<string, any> = {}>({ table, }: Props<TData>) => JSX.Element;
932
946
 
933
- export { DensityState, MRT_AggregationFn, MRT_AggregationOption, MRT_BottomToolbar, MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_EditActionButtons, MRT_FilterFn, MRT_FilterOption, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_InternalFilterOption, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TablePagination, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTableProps, MaterialReactTable as default };
947
+ export { MRT_AggregationFn, MRT_AggregationFns, MRT_AggregationOption, MRT_BottomToolbar, MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DensityState, MRT_DisplayColumnIds, MRT_EditActionButtons, MRT_FilterFn, MRT_FilterFns, MRT_FilterOption, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_InternalFilterOption, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingFns, MRT_SortingOption, MRT_TableInstance, MRT_TablePagination, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTableProps, MaterialReactTable as default };