material-react-table
Version:
A fully featured Material UI V6 implementation of TanStack React Table V8, written from the ground up in TypeScript.
1,109 lines (1,104 loc) • 95.2 kB
TypeScript
import * as react from 'react';
import { RefObject, Dispatch, SetStateAction, ReactNode, JSX, ChangeEvent, MouseEvent, DragEventHandler } from 'react';
import * as _tanstack_react_table from '@tanstack/react-table';
import { Row, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingInfoState, ColumnSizingState, ExpandedState, GroupingState, PaginationState, RowSelectionState, SortingState, Updater, VisibilityState, AccessorFn, DeepKeys, DeepValue, Table, TableState, ColumnDef, Column, Header, HeaderGroup, Cell, AggregationFn, SortingFn, FilterFn, TableOptions, OnChangeFn, Renderable, RowPinningPosition } from '@tanstack/react-table';
import { VirtualItem, VirtualizerOptions, Virtualizer } from '@tanstack/react-virtual';
import { AlertProps } from '@mui/material/Alert';
import { AutocompleteProps } from '@mui/material/Autocomplete';
import { BoxProps } from '@mui/material/Box';
import { ButtonProps } from '@mui/material/Button';
import { CheckboxProps } from '@mui/material/Checkbox';
import { ChipProps } from '@mui/material/Chip';
import { CircularProgressProps } from '@mui/material/CircularProgress';
import { DialogProps } from '@mui/material/Dialog';
import { IconButtonProps } from '@mui/material/IconButton';
import { LinearProgressProps } from '@mui/material/LinearProgress';
import { PaginationProps } from '@mui/material/Pagination';
import { PaperProps } from '@mui/material/Paper';
import { RadioProps } from '@mui/material/Radio';
import { SelectProps } from '@mui/material/Select';
import { SkeletonProps } from '@mui/material/Skeleton';
import { SliderProps } from '@mui/material/Slider';
import { TableProps } from '@mui/material/Table';
import { TableBodyProps } from '@mui/material/TableBody';
import { TableCellProps } from '@mui/material/TableCell';
import { TableContainerProps } from '@mui/material/TableContainer';
import { TableFooterProps } from '@mui/material/TableFooter';
import { TableHeadProps } from '@mui/material/TableHead';
import { TableRowProps } from '@mui/material/TableRow';
import { TextFieldProps } from '@mui/material/TextField';
import { Theme } from '@mui/material/styles';
import * as _mui_x_date_pickers from '@mui/x-date-pickers';
import { DatePickerProps, DateTimePickerProps, TimePickerProps } from '@mui/x-date-pickers';
import { RankingInfo } from '@tanstack/match-sorter-utils';
import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
import * as _mui_material from '@mui/material';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { CollapseProps } from '@mui/material/Collapse';
import { DividerProps } from '@mui/material/Divider';
import { TableSortLabelProps } from '@mui/material/TableSortLabel';
import { MenuItemProps } from '@mui/material/MenuItem';
import { MenuProps } from '@mui/material/Menu';
declare const MRT_AggregationFns: {
sum: _tanstack_react_table.AggregationFn<any>;
min: _tanstack_react_table.AggregationFn<any>;
max: _tanstack_react_table.AggregationFn<any>;
extent: _tanstack_react_table.AggregationFn<any>;
mean: _tanstack_react_table.AggregationFn<any>;
median: _tanstack_react_table.AggregationFn<any>;
unique: _tanstack_react_table.AggregationFn<any>;
uniqueCount: _tanstack_react_table.AggregationFn<any>;
count: _tanstack_react_table.AggregationFn<any>;
};
declare const MRT_FilterFns: {
between: {
<TData extends MRT_RowData>(row: Row<TData>, id: string, filterValues: [number | string, number | string]): boolean;
autoRemove(val: any): boolean;
};
betweenInclusive: {
<TData extends MRT_RowData>(row: Row<TData>, id: string, filterValues: [number | string, number | string]): boolean;
autoRemove(val: any): boolean;
};
contains: {
<TData extends MRT_RowData>(row: Row<TData>, id: string, filterValue: number | string): boolean;
autoRemove(val: any): boolean;
};
empty: {
<TData extends MRT_RowData>(row: Row<TData>, id: string, _filterValue: number | string): boolean;
autoRemove(val: any): boolean;
};
endsWith: {
<TData extends MRT_RowData>(row: Row<TData>, id: string, filterValue: number | string): boolean;
autoRemove(val: any): boolean;
};
equals: {
<TData extends MRT_RowData>(row: Row<TData>, id: string, filterValue: number | string): boolean;
autoRemove(val: any): boolean;
};
fuzzy: {
<TData extends MRT_RowData>(row: Row<TData>, columnId: string, filterValue: number | string, addMeta: (item: RankingInfo) => void): boolean;
autoRemove(val: any): boolean;
};
greaterThan: {
<TData extends MRT_RowData>(row: Row<TData>, id: string, filterValue: number | string): boolean;
autoRemove(val: any): boolean;
};
greaterThanOrEqualTo: {
<TData extends MRT_RowData>(row: Row<TData>, id: string, filterValue: number | string): boolean;
autoRemove(val: any): boolean;
};
lessThan: {
<TData extends MRT_RowData>(row: Row<TData>, id: string, filterValue: number | string): boolean;
autoRemove(val: any): boolean;
};
lessThanOrEqualTo: {
<TData extends MRT_RowData>(row: Row<TData>, id: string, filterValue: number | string): boolean;
autoRemove(val: any): boolean;
};
notEmpty: {
<TData extends MRT_RowData>(row: Row<TData>, id: string, _filterValue: number | string): boolean;
autoRemove(val: any): boolean;
};
notEquals: {
<TData extends MRT_RowData>(row: Row<TData>, id: string, filterValue: number | string): boolean;
autoRemove(val: any): boolean;
};
startsWith: {
<TData extends MRT_RowData>(row: Row<TData>, id: string, filterValue: number | string): boolean;
autoRemove(val: any): boolean;
};
includesString: _tanstack_react_table.FilterFn<any>;
includesStringSensitive: _tanstack_react_table.FilterFn<any>;
equalsString: _tanstack_react_table.FilterFn<any>;
arrIncludes: _tanstack_react_table.FilterFn<any>;
arrIncludesAll: _tanstack_react_table.FilterFn<any>;
arrIncludesSome: _tanstack_react_table.FilterFn<any>;
weakEquals: _tanstack_react_table.FilterFn<any>;
inNumberRange: _tanstack_react_table.FilterFn<any>;
};
declare const MRT_SortingFns: {
fuzzy: <TData extends MRT_RowData>(rowA: Row<TData>, rowB: Row<TData>, columnId: string) => number;
alphanumeric: _tanstack_react_table.SortingFn<any>;
alphanumericCaseSensitive: _tanstack_react_table.SortingFn<any>;
text: _tanstack_react_table.SortingFn<any>;
textCaseSensitive: _tanstack_react_table.SortingFn<any>;
datetime: _tanstack_react_table.SortingFn<any>;
basic: _tanstack_react_table.SortingFn<any>;
};
declare const rankGlobalFuzzy: <TData extends MRT_RowData>(rowA: MRT_Row<TData>, rowB: MRT_Row<TData>) => number;
declare const MRT_Default_Icons: {
readonly ArrowDownwardIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly ArrowRightIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly CancelIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly ChevronLeftIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly ChevronRightIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly ClearAllIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly CloseIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly ContentCopy: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly DensityLargeIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly DensityMediumIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly DensitySmallIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly DragHandleIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly DynamicFeedIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly EditIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly ExpandMoreIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly FilterAltIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly FilterListIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly FilterListOffIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly FirstPageIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly FullscreenExitIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly FullscreenIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly KeyboardDoubleArrowDownIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly LastPageIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly MoreHorizIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly MoreVertIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly PushPinIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly RestartAltIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly SaveIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly SearchIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly SearchOffIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly SortIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly SyncAltIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly ViewColumnIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
readonly VisibilityOffIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
muiName: string;
};
};
type MRT_Icons = Record<keyof typeof MRT_Default_Icons, any>;
type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
type Prettify<T> = {
[K in keyof T]: T[K];
} & unknown;
type Xor<A, B> = Prettify<A & {
[k in keyof B]?: never;
}> | Prettify<B & {
[k in keyof A]?: never;
}>;
type DropdownOption = {
label?: string;
value: any;
} | string;
type MRT_DensityState = 'comfortable' | 'compact' | 'spacious';
type MRT_ColumnFilterFnsState = Record<string, MRT_FilterOption>;
type MRT_RowData = Record<string, any>;
type MRT_ColumnFiltersState = ColumnFiltersState;
type MRT_ColumnOrderState = ColumnOrderState;
type MRT_ColumnPinningState = ColumnPinningState;
type MRT_ColumnSizingInfoState = ColumnSizingInfoState;
type MRT_ColumnSizingState = ColumnSizingState;
type MRT_ExpandedState = ExpandedState;
type MRT_GroupingState = GroupingState;
type MRT_PaginationState = PaginationState;
type MRT_RowSelectionState = RowSelectionState;
type MRT_SortingState = SortingState;
type MRT_Updater<T> = Updater<T>;
type MRT_VirtualItem = VirtualItem;
type MRT_VisibilityState = VisibilityState;
type MRT_VirtualizerOptions<TScrollElement extends Element | Window = Element | Window, TItemElement extends Element = Element> = VirtualizerOptions<TScrollElement, TItemElement>;
type MRT_ColumnVirtualizer<TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableCellElement> = Virtualizer<TScrollElement, TItemElement> & {
virtualColumns: MRT_VirtualItem[];
virtualPaddingLeft?: number;
virtualPaddingRight?: number;
};
type MRT_RowVirtualizer<TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableRowElement> = Virtualizer<TScrollElement, TItemElement> & {
virtualRows: MRT_VirtualItem[];
};
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>;
};
interface MRT_Localization {
language: string;
actions: string;
and: string;
cancel: string;
changeFilterMode: string;
changeSearchMode: string;
clearFilter: string;
clearSearch: string;
clearSelection: string;
clearSort: string;
clickToCopy: string;
collapse: string;
collapseAll: string;
columnActions: string;
copiedToClipboard: string;
copy: string;
dropToGroupBy: string;
edit: string;
expand: string;
expandAll: string;
filterArrIncludes: string;
filterArrIncludesAll: string;
filterArrIncludesSome: string;
filterBetween: string;
filterBetweenInclusive: string;
filterByColumn: string;
filterContains: string;
filterEmpty: string;
filterEndsWith: string;
filterEquals: string;
filterEqualsString: string;
filterFuzzy: string;
filterGreaterThan: string;
filterGreaterThanOrEqualTo: string;
filterIncludesString: string;
filterIncludesStringSensitive: string;
filteringByColumn: string;
filterInNumberRange: string;
filterLessThan: string;
filterLessThanOrEqualTo: string;
filterMode: string;
filterNotEmpty: string;
filterNotEquals: string;
filterStartsWith: string;
filterWeakEquals: string;
goToFirstPage: string;
goToLastPage: string;
goToNextPage: string;
goToPreviousPage: string;
grab: string;
groupByColumn: string;
groupedBy: string;
hideAll: string;
hideColumn: string;
max: string;
min: string;
move: string;
noRecordsToDisplay: string;
noResultsFound: string;
of: string;
or: string;
pin: string;
pinToLeft: string;
pinToRight: string;
resetColumnSize: string;
resetOrder: string;
rowActions: string;
rowNumber: string;
rowNumbers: string;
rowsPerPage: string;
save: string;
search: string;
select: string;
selectedCountOfRowCountRowsSelected: string;
showAll: string;
showAllColumns: string;
showHideColumns: string;
showHideFilters: string;
showHideSearch: string;
sortByColumnAsc: string;
sortByColumnDesc: string;
sortedByColumnAsc: string;
sortedByColumnDesc: string;
thenBy: string;
toggleDensity: string;
toggleFullScreen: string;
toggleSelectAll: string;
toggleSelectRow: string;
toggleVisibility: string;
ungroupByColumn: string;
unpin: string;
unpinAll: string;
}
interface MRT_Theme {
baseBackgroundColor: string;
cellNavigationOutlineColor: string;
draggingBorderColor: string;
matchHighlightColor: string;
menuBackgroundColor: string;
pinnedRowBackgroundColor: string;
selectedRowBackgroundColor: string;
}
interface MRT_RowModel<TData extends MRT_RowData> {
flatRows: MRT_Row<TData>[];
rows: MRT_Row<TData>[];
rowsById: {
[key: string]: MRT_Row<TData>;
};
}
type MRT_TableInstance<TData extends MRT_RowData> = Omit<Table<TData>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getBottomRows' | 'getCenterLeafColumns' | 'getCenterRows' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getFooterGroups' | 'getHeaderGroups' | 'getLeafHeaders' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'getTopRows' | 'options'> & {
getAllColumns: () => MRT_Column<TData>[];
getAllFlatColumns: () => MRT_Column<TData>[];
getAllLeafColumns: () => MRT_Column<TData>[];
getBottomRows: () => MRT_Row<TData>[];
getCenterLeafColumns: () => MRT_Column<TData>[];
getCenterRows: () => MRT_Row<TData>[];
getColumn: (columnId: string) => MRT_Column<TData>;
getExpandedRowModel: () => MRT_RowModel<TData>;
getFlatHeaders: () => MRT_Header<TData>[];
getFooterGroups: () => MRT_HeaderGroup<TData>[];
getHeaderGroups: () => MRT_HeaderGroup<TData>[];
getLeafHeaders: () => MRT_Header<TData>[];
getLeftLeafColumns: () => MRT_Column<TData>[];
getPaginationRowModel: () => MRT_RowModel<TData>;
getPreFilteredRowModel: () => MRT_RowModel<TData>;
getPrePaginationRowModel: () => MRT_RowModel<TData>;
getRightLeafColumns: () => MRT_Column<TData>[];
getRowModel: () => MRT_RowModel<TData>;
getSelectedRowModel: () => MRT_RowModel<TData>;
getState: () => MRT_TableState<TData>;
getTopRows: () => MRT_Row<TData>[];
options: MRT_StatefulTableOptions<TData>;
refs: {
actionCellRef: RefObject<HTMLTableCellElement | null>;
bottomToolbarRef: RefObject<HTMLDivElement | null>;
editInputRefs: RefObject<Record<string, HTMLInputElement> | null>;
filterInputRefs: RefObject<Record<string, HTMLInputElement> | null>;
lastSelectedRowId: RefObject<null | string>;
searchInputRef: RefObject<HTMLInputElement | null>;
tableContainerRef: RefObject<HTMLDivElement | null>;
tableFooterRef: RefObject<HTMLTableSectionElement | null>;
tableHeadCellRefs: RefObject<Record<string, HTMLTableCellElement> | null>;
tableHeadRef: RefObject<HTMLTableSectionElement | null>;
tablePaperRef: RefObject<HTMLDivElement | null>;
topToolbarRef: RefObject<HTMLDivElement | null>;
};
setActionCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
setColumnFilterFns: Dispatch<SetStateAction<MRT_ColumnFilterFnsState>>;
setCreatingRow: Dispatch<SetStateAction<MRT_Row<TData> | null | true>>;
setDensity: Dispatch<SetStateAction<MRT_DensityState>>;
setDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
setEditingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
setHoveredColumn: Dispatch<SetStateAction<Partial<MRT_Column<TData>> | null>>;
setHoveredRow: Dispatch<SetStateAction<Partial<MRT_Row<TData>> | null>>;
setIsFullScreen: Dispatch<SetStateAction<boolean>>;
setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
};
type MRT_DefinedTableOptions<TData extends MRT_RowData> = Omit<MRT_TableOptions<TData>, 'icons' | 'localization' | 'mrtTheme'> & {
icons: MRT_Icons;
localization: MRT_Localization;
mrtTheme: Required<MRT_Theme>;
};
type MRT_StatefulTableOptions<TData extends MRT_RowData> = MRT_DefinedTableOptions<TData> & {
state: Pick<MRT_TableState<TData>, 'columnFilterFns' | 'columnOrder' | 'columnSizingInfo' | 'creatingRow' | 'density' | 'draggingColumn' | 'draggingRow' | 'editingCell' | 'editingRow' | 'globalFilterFn' | 'grouping' | 'hoveredColumn' | 'hoveredRow' | 'isFullScreen' | 'pagination' | 'showAlertBanner' | 'showColumnFilters' | 'showGlobalFilter' | 'showToolbarDropZone'>;
};
interface MRT_TableState<TData extends MRT_RowData> extends TableState {
actionCell?: MRT_Cell<TData> | null;
columnFilterFns: MRT_ColumnFilterFnsState;
creatingRow: MRT_Row<TData> | null;
density: MRT_DensityState;
draggingColumn: MRT_Column<TData> | null;
draggingRow: MRT_Row<TData> | null;
editingCell: MRT_Cell<TData> | null;
editingRow: MRT_Row<TData> | null;
globalFilterFn: MRT_FilterOption;
hoveredColumn: Partial<MRT_Column<TData>> | null;
hoveredRow: Partial<MRT_Row<TData>> | null;
isFullScreen: boolean;
isLoading: boolean;
isSaving: boolean;
showAlertBanner: boolean;
showColumnFilters: boolean;
showGlobalFilter: boolean;
showLoadingOverlay: boolean;
showProgressBars: boolean;
showSkeletons: boolean;
showToolbarDropZone: boolean;
}
interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> extends Omit<ColumnDef<TData, TValue>, 'accessorKey' | 'aggregatedCell' | 'aggregationFn' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> {
/**
* Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
* Specify a function here to point to the correct property in the data object.
*
* @example accessorFn: (row) => row.username
*/
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.
* Also supports Deep Key Dot Notation.
*
* @example accessorKey: 'username' //simple
* @example accessorKey: 'name.firstName' //deep key dot notation
*/
accessorKey?: DeepKeys<TData> | (string & {});
AggregatedCell?: (props: {
cell: MRT_Cell<TData, TValue>;
column: MRT_Column<TData, TValue>;
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
staticColumnIndex?: number;
staticRowIndex?: number;
}) => ReactNode;
aggregationFn?: Array<MRT_AggregationFn<TData>> | MRT_AggregationFn<TData>;
Cell?: (props: {
cell: MRT_Cell<TData, TValue>;
column: MRT_Column<TData, TValue>;
renderedCellValue: ReactNode;
row: MRT_Row<TData>;
rowRef?: RefObject<HTMLTableRowElement | null>;
staticColumnIndex?: number;
staticRowIndex?: number;
table: MRT_TableInstance<TData>;
}) => ReactNode;
/**
* Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
* Leave this blank if you are just creating a normal data column.
*
* @default 'data'
*
* @example columnDefType: 'display'
*/
columnDefType?: 'data' | 'display' | 'group';
columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
columns?: MRT_ColumnDef<TData, TValue>[];
Edit?: (props: {
cell: MRT_Cell<TData, TValue>;
column: MRT_Column<TData, TValue>;
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => ReactNode;
editSelectOptions?: ((props: {
cell: MRT_Cell<TData, TValue>;
column: MRT_Column<TData>;
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => DropdownOption[]) | DropdownOption[];
editVariant?: 'select' | 'text';
enableClickToCopy?: 'context-menu' | ((cell: MRT_Cell<TData>) => 'context-menu' | boolean) | boolean;
enableColumnActions?: boolean;
enableColumnDragging?: boolean;
enableColumnFilterModes?: boolean;
enableColumnOrdering?: boolean;
enableEditing?: ((row: MRT_Row<TData>) => boolean) | boolean;
enableFilterMatchHighlighting?: boolean;
Filter?: (props: {
column: MRT_Column<TData, TValue>;
header: MRT_Header<TData>;
rangeFilterIndex?: number;
table: MRT_TableInstance<TData>;
}) => ReactNode;
filterFn?: MRT_FilterFn<TData>;
filterSelectOptions?: DropdownOption[];
filterVariant?: 'autocomplete' | 'checkbox' | 'date' | 'date-range' | 'datetime' | 'datetime-range' | 'multi-select' | 'range' | 'range-slider' | 'select' | 'text' | 'time' | 'time-range';
/**
* footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
*/
footer?: string;
Footer?: ((props: {
column: MRT_Column<TData, TValue>;
footer: MRT_Header<TData>;
table: MRT_TableInstance<TData>;
}) => ReactNode) | ReactNode;
GroupedCell?: (props: {
cell: MRT_Cell<TData, TValue>;
column: MRT_Column<TData, TValue>;
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
staticColumnIndex?: number;
staticRowIndex?: number;
}) => ReactNode;
/**
* If `layoutMode` is `'grid'` or `'grid-no-grow'`, you can specify the flex grow value for individual columns to still grow and take up remaining space, or set to `false`/0 to not grow.
*/
grow?: boolean | number;
/**
* header must be a string. If you want custom JSX to render the header, you can also specify a `Header` option. (Capital H)
*/
header: string;
Header?: ((props: {
column: MRT_Column<TData, TValue>;
header: MRT_Header<TData>;
table: MRT_TableInstance<TData>;
}) => ReactNode) | ReactNode;
/**
* Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
*
* If you have also specified an `accessorFn`, MRT still needs to have a valid `id` to be able to identify the column uniquely.
*
* `id` defaults to the `accessorKey` or `header` if not specified.
*
* @default gets set to the same value as `accessorKey` by default
*/
id?: LiteralUnion<string & keyof TData>;
muiColumnActionsButtonProps?: ((props: {
column: MRT_Column<TData>;
table: MRT_TableInstance<TData>;
}) => IconButtonProps) | IconButtonProps;
muiColumnDragHandleProps?: ((props: {
column: MRT_Column<TData>;
table: MRT_TableInstance<TData>;
}) => IconButtonProps) | IconButtonProps;
muiCopyButtonProps?: ((props: {
cell: MRT_Cell<TData, TValue>;
column: MRT_Column<TData>;
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => ButtonProps) | ButtonProps;
muiEditTextFieldProps?: ((props: {
cell: MRT_Cell<TData, TValue>;
column: MRT_Column<TData>;
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => TextFieldProps) | TextFieldProps;
muiFilterAutocompleteProps?: ((props: {
column: MRT_Column<TData>;
table: MRT_TableInstance<TData>;
}) => AutocompleteProps<any, any, any, any>) | AutocompleteProps<any, any, any, any>;
muiFilterCheckboxProps?: ((props: {
column: MRT_Column<TData>;
table: MRT_TableInstance<TData>;
}) => CheckboxProps) | CheckboxProps;
muiFilterDatePickerProps?: ((props: {
column: MRT_Column<TData>;
rangeFilterIndex?: number;
table: MRT_TableInstance<TData>;
}) => DatePickerProps<never>) | DatePickerProps<never>;
muiFilterDateTimePickerProps?: ((props: {
column: MRT_Column<TData>;
rangeFilterIndex?: number;
table: MRT_TableInstance<TData>;
}) => DateTimePickerProps<never>) | DateTimePickerProps<never>;
muiFilterSliderProps?: ((props: {
column: MRT_Column<TData>;
table: MRT_TableInstance<TData>;
}) => SliderProps) | SliderProps;
muiFilterTextFieldProps?: ((props: {
column: MRT_Column<TData>;
rangeFilterIndex?: number;
table: MRT_TableInstance<TData>;
}) => TextFieldProps) | TextFieldProps;
muiFilterTimePickerProps?: ((props: {
column: MRT_Column<TData>;
rangeFilterIndex?: number;
table: MRT_TableInstance<TData>;
}) => TimePickerProps<never>) | TimePickerProps<never>;
muiTableBodyCellProps?: ((props: {
cell: MRT_Cell<TData, TValue>;
column: MRT_Column<TData>;
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => TableCellProps) | TableCellProps;
muiTableFooterCellProps?: ((props: {
column: MRT_Column<TData>;
table: MRT_TableInstance<TData>;
}) => TableCellProps) | TableCellProps;
muiTableHeadCellProps?: ((props: {
column: MRT_Column<TData>;
table: MRT_TableInstance<TData>;
}) => TableCellProps) | TableCellProps;
PlaceholderCell?: (props: {
cell: MRT_Cell<TData, TValue>;
column: MRT_Column<TData, TValue>;
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => ReactNode;
renderCellActionMenuItems?: (props: {
cell: MRT_Cell<TData>;
closeMenu: () => void;
column: MRT_Column<TData>;
internalMenuItems: ReactNode[];
row: MRT_Row<TData>;
staticColumnIndex?: number;
staticRowIndex?: number;
table: MRT_TableInstance<TData>;
}) => ReactNode[];
renderColumnActionsMenuItems?: (props: {
closeMenu: () => void;
column: MRT_Column<TData>;
internalColumnMenuItems: ReactNode[];
table: MRT_TableInstance<TData>;
}) => ReactNode[];
renderColumnFilterModeMenuItems?: (props: {
column: MRT_Column<TData>;
internalFilterOptions: MRT_InternalFilterOption[];
onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
table: MRT_TableInstance<TData>;
}) => ReactNode[];
sortingFn?: MRT_SortingFn<TData>;
visibleInShowHideMenu?: boolean;
}
type MRT_DisplayColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<MRT_ColumnDef<TData, TValue>, 'accessorFn' | 'accessorKey'>;
type MRT_GroupColumnDef<TData extends MRT_RowData> = MRT_DisplayColumnDef<TData, any> & {
columns: MRT_ColumnDef<TData>[];
};
type MRT_DefinedColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<MRT_ColumnDef<TData, TValue>, 'defaultDisplayColumn' | 'id'> & {
_filterFn: MRT_FilterOption;
defaultDisplayColumn: Partial<MRT_ColumnDef<TData, TValue>>;
id: string;
};
type MRT_Column<TData extends MRT_RowData, TValue = unknown> = Omit<Column<TData, TValue>, 'columnDef' | 'columns' | 'filterFn' | 'footer' | 'header'> & {
columnDef: MRT_DefinedColumnDef<TData, TValue>;
columns?: MRT_Column<TData, TValue>[];
filterFn?: MRT_FilterFn<TData>;
footer: string;
header: string;
};
type MRT_Header<TData extends MRT_RowData> = Omit<Header<TData, unknown>, 'column'> & {
column: MRT_Column<TData>;
};
type MRT_HeaderGroup<TData extends MRT_RowData> = Omit<HeaderGroup<TData>, 'headers'> & {
headers: MRT_Header<TData>[];
};
type MRT_Row<TData extends MRT_RowData> = Omit<Row<TData>, '_valuesCache' | 'getAllCells' | 'getParentRow' | 'getParentRows' | 'getRow' | 'getVisibleCells' | 'subRows'> & {
_valuesCache: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
getAllCells: () => MRT_Cell<TData>[];
getParentRow: () => MRT_Row<TData> | null;
getParentRows: () => MRT_Row<TData>[];
getRow: () => MRT_Row<TData>;
getVisibleCells: () => MRT_Cell<TData>[];
subRows?: MRT_Row<TData>[];
};
type MRT_Cell<TData extends MRT_RowData, TValue = unknown> = Omit<Cell<TData, TValue>, 'column' | 'row'> & {
column: MRT_Column<TData, TValue>;
row: MRT_Row<TData>;
};
type MRT_AggregationOption = string & keyof typeof MRT_AggregationFns;
type MRT_AggregationFn<TData extends MRT_RowData> = AggregationFn<TData> | MRT_AggregationOption;
type MRT_SortingOption = LiteralUnion<string & keyof typeof MRT_SortingFns>;
type MRT_SortingFn<TData extends MRT_RowData> = MRT_SortingOption | SortingFn<TData>;
type MRT_FilterOption = LiteralUnion<string & keyof typeof MRT_FilterFns>;
type MRT_FilterFn<TData extends MRT_RowData> = FilterFn<TData> | MRT_FilterOption;
type MRT_InternalFilterOption = {
divider: boolean;
label: string;
option: string;
symbol: string;
};
type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row-expand' | 'mrt-row-numbers' | 'mrt-row-pin' | 'mrt-row-select' | 'mrt-row-spacer';
/**
* `columns` and `data` props are the only required props, but there are over 170 other optional props.
*
* See more info on creating columns and data on the official docs site:
* @link https://www.material-react-table.com/docs/getting-started/usage
*
* See the full props list on the official docs site:
* @link https://www.material-react-table.com/docs/api/props
*/
interface MRT_TableOptions<TData extends MRT_RowData> extends Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'getRowId' | 'globalFilterFn' | 'initialState' | 'onStateChange' | 'state'> {
columnFilterDisplayMode?: 'custom' | 'popover' | 'subheader';
columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
/**
* The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` table option.
*
* See more info on creating columns on the official docs site:
* @link https://www.material-react-table.com/docs/guides/data-columns
* @link https://www.material-react-table.com/docs/guides/display-columns
*
* See all Columns Options on the official docs site:
* @link https://www.material-react-table.com/docs/api/column-options
*/
columns: MRT_ColumnDef<TData, any>[];
columnVirtualizerInstanceRef?: RefObject<MRT_ColumnVirtualizer | null>;
columnVirtualizerOptions?: ((props: {
table: MRT_TableInstance<TData>;
}) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>) | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>;
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.
*
* See the usage guide for more info on creating columns and data:
* @link https://www.material-react-table.com/docs/getting-started/usage
*/
data: TData[];
/**
* Instead of specifying a bunch of the same options for each column, you can just change an option in the `defaultColumn` table option to change a default option for all columns.
*/
defaultColumn?: Partial<MRT_ColumnDef<TData>>;
/**
* Change the default options for display columns.
*/
defaultDisplayColumn?: Partial<MRT_DisplayColumnDef<TData>>;
displayColumnDefOptions?: Partial<{
[key in MRT_DisplayColumnIds]: Partial<MRT_DisplayColumnDef<TData>>;
}>;
editDisplayMode?: 'cell' | 'custom' | 'modal' | 'row' | 'table';
enableBatchRowSelection?: boolean;
enableBottomToolbar?: boolean;
enableCellActions?: ((cell: MRT_Cell<TData>) => boolean) | boolean;
enableClickToCopy?: 'context-menu' | ((cell: MRT_Cell<TData>) => 'context-menu' | boolean) | boolean;
enableColumnActions?: boolean;
enableColumnDragging?: boolean;
enableColumnFilterModes?: boolean;
enableColumnOrdering?: boolean;
enableColumnVirtualization?: boolean;
enableDensityToggle?: boolean;
enableEditing?: ((row: MRT_Row<TData>) => boolean) | boolean;
enableExpandAll?: boolean;
enableFacetedValues?: boolean;
enableFilterMatchHighlighting?: boolean;
enableFullScreenToggle?: boolean;
enableGlobalFilterModes?: boolean;
enableGlobalFilterRankedResults?: boolean;
enableKeyboardShortcuts?: boolean;
enablePagination?: boolean;
enableRowActions?: boolean;
enableRowDragging?: boolean;
enableRowNumbers?: boolean;
enableRowOrdering?: boolean;
enableRowSelection?: ((row: MRT_Row<TData>) => boolean) | boolean;
enableRowVirtualization?: boolean;
enableSelectAll?: boolean;
enableStickyFooter?: boolean;
enableStickyHeader?: boolean;
enableTableFooter?: boolean;
enableTableHead?: boolean;
enableToolbarInternalActions?: boolean;
enableTopToolbar?: boolean;
expandRowsFn?: (dataRow: TData) => TData[];
getRowId?: (originalRow: TData, index: number, parentRow: MRT_Row<TData>) => string;
globalFilterFn?: MRT_FilterOption;
globalFilterModeOptions?: MRT_FilterOption[] | null;
icons?: Partial<MRT_Icons>;
id?: string;
initialState?: Partial<MRT_TableState<TData>>;
/**
* Changes which kind of CSS layout is used to render the table. `semantic` uses default semantic HTML elements, while `grid` adds CSS grid and flexbox styles
*/
layoutMode?: 'grid' | 'grid-no-grow' | 'semantic';
/**
* Pass in either a locale imported from `material-react-table/locales/*` or a custom locale object.
*
* See the localization (i18n) guide for more info:
* @link https://www.material-react-table.com/docs/guides/localization
*/
localization?: Partial<MRT_Localization>;
/**
* Memoize cells, rows, or the entire table body to potentially improve render performance.
*
* @warning This will break some dynamic rendering features. See the memoization guide for more info:
* @link https://www.material-react-table.com/docs/guides/memoize-components
*/
memoMode?: 'cells' | 'rows' | 'table-body';
mrtTheme?: ((theme: Theme) => Partial<MRT_Theme>) | Partial<MRT_Theme>;
muiBottomToolbarProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => BoxProps) | BoxProps;
muiCircularProgressProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => CircularProgressProps & {
Component?: ReactNode;
}) | (CircularProgressProps & {
Component?: ReactNode;
});
muiColumnActionsButtonProps?: ((props: {
column: MRT_Column<TData>;
table: MRT_TableInstance<TData>;
}) => IconButtonProps) | IconButtonProps;
muiColumnDragHandleProps?: ((props: {
column: MRT_Column<TData>;
table: MRT_TableInstance<TData>;
}) => IconButtonProps) | IconButtonProps;
muiCopyButtonProps?: ((props: {
cell: MRT_Cell<TData>;
column: MRT_Column<TData>;
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => ButtonProps) | ButtonProps;
muiCreateRowModalProps?: ((props: {
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => DialogProps) | DialogProps;
muiDetailPanelProps?: ((props: {
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => TableCellProps) | TableCellProps;
muiEditRowDialogProps?: ((props: {
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => DialogProps) | DialogProps;
muiEditTextFieldProps?: ((props: {
cell: MRT_Cell<TData>;
column: MRT_Column<TData>;
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => TextFieldProps) | TextFieldProps;
muiExpandAllButtonProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => IconButtonProps) | IconButtonProps;
muiExpandButtonProps?: ((props: {
row: MRT_Row<TData>;
staticRowIndex?: number;
table: MRT_TableInstance<TData>;
}) => IconButtonProps) | IconButtonProps;
muiFilterAutocompleteProps?: ((props: {
column: MRT_Column<TData>;
table: MRT_TableInstance<TData>;
}) => AutocompleteProps<any, any, any, any>) | AutocompleteProps<any, any, any, any>;
muiFilterCheckboxProps?: ((props: {
column: MRT_Column<TData>;
table: MRT_TableInstance<TData>;
}) => CheckboxProps) | CheckboxProps;
muiFilterDatePickerProps?: ((props: {
column: MRT_Column<TData>;
rangeFilterIndex?: number;
table: MRT_TableInstance<TData>;
}) => DatePickerProps<never>) | DatePickerProps<never>;
muiFilterDateTimePickerProps?: ((props: {
column: MRT_Column<TData>;
rangeFilterIndex?: number;
table: MRT_TableInstance<TData>;
}) => DateTimePickerProps<never>) | DateTimePickerProps<never>;
muiFilterSliderProps?: ((props: {
column: MRT_Column<TData>;
table: MRT_TableInstance<TData>;
}) => SliderProps) | SliderProps;
muiFilterTextFieldProps?: ((props: {
column: MRT_Column<TData>;
rangeFilterIndex?: number;
table: MRT_TableInstance<TData>;
}) => TextFieldProps) | TextFieldProps;
muiFilterTimePickerProps?: ((props: {
column: MRT_Column<TData>;
rangeFilterIndex?: number;
table: MRT_TableInstance<TData>;
}) => TimePickerProps<never>) | TimePickerProps<never>;
muiLinearProgressProps?: ((props: {
isTopToolbar: boolean;
table: MRT_TableInstance<TData>;
}) => LinearProgressProps) | LinearProgressProps;
muiPaginationProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => Partial<PaginationProps & {
SelectProps?: Partial<SelectProps>;
disabled?: boolean;
rowsPerPageOptions?: {
label: string;
value: number;
}[] | number[];
showRowsPerPage?: boolean;
}>) | Partial<PaginationProps & {
SelectProps?: Partial<SelectProps>;
disabled?: boolean;
rowsPerPageOptions?: {
label: string;
value: number;
}[] | number[];
showRowsPerPage?: boolean;
}>;
muiRowDragHandleProps?: ((props: {
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => IconButtonProps) | IconButtonProps;
muiSearchTextFieldProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => TextFieldProps) | TextFieldProps;
muiSelectAllCheckboxProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => CheckboxProps) | CheckboxProps;
muiSelectCheckboxProps?: ((props: {
row: MRT_Row<TData>;
staticRowIndex?: number;
table: MRT_TableInstance<TData>;
}) => CheckboxProps | RadioProps) | (CheckboxProps | RadioProps);
muiSkeletonProps?: ((props: {
cell: MRT_Cell<TData>;
column: MRT_Column<TData>;
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => SkeletonProps) | SkeletonProps;
muiTableBodyCellProps?: ((props: {
cell: MRT_Cell<TData>;
column: MRT_Column<TData>;
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => TableCellProps) | TableCellProps;
muiTableBodyProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => TableBodyProps) | TableBodyProps;
muiTableBodyRowProps?: ((props: {
isDetailPanel?: boolean;
row: MRT_Row<TData>;
staticRowIndex: number;
table: MRT_TableInstance<TData>;
}) => TableRowProps) | TableRowProps;
muiTableContainerProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => TableContainerProps) | TableContainerProps;
muiTableFooterCellProps?: ((props: {
column: MRT_Column<TData>;
table: MRT_TableInstance<TData>;
}) => TableCellProps) | TableCellProps;
muiTableFooterProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => TableFooterProps) | TableFooterProps;
muiTableFooterRowProps?: ((props: {
footerGroup: MRT_HeaderGroup<TData>;
table: MRT_TableInstance<TData>;
}) => TableRowProps) | TableRowProps;
muiTableHeadCellProps?: ((props: {
column: MRT_Column<TData>;
table: MRT_TableInstance<TData>;
}) => TableCellProps) | TableCellProps;
muiTableHeadProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => TableHeadProps) | TableHeadProps;
muiTableHeadRowProps?: ((props: {
headerGroup: MRT_HeaderGroup<TData>;
table: MRT_TableInstance<TData>;
}) => TableRowProps) | TableRowProps;
muiTablePaperProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => PaperProps) | PaperProps;
muiTableProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => TableProps) | TableProps;
muiToolbarAlertBannerChipProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => ChipProps) | ChipProps;
muiToolbarAlertBannerProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => AlertProps) | AlertProps;
muiTopToolbarProps?: ((props: {
table: MRT_TableInstance<TData>;
}) => BoxProps) | BoxProps;
onActionCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
onColumnFilterFnsChange?: OnChangeFn<{
[key: string]: MRT_FilterOption;
}>;
onCreatingRowCancel?: (props: {
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => void;
onCreatingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
onCreatingRowSave?: (props: {
exitCreatingMode: () => void;
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
}) => Promise<void> | void;
onDensityChange?: OnChangeFn<MRT_DensityState>;
onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
onEditingRowCancel?: (props: {
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => void;
onEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
onEditingRowSave?: (props: {
exitEditingMode: () => void;
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
}) => Promise<void> | void;
onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
onHoveredColumnChange?: OnChangeFn<Partial<MRT_Column<TData>> | null>;
onHoveredRowChange?: OnChangeFn<Partial<MRT_Row<TData>> | null>;
onIsFullScreenChange?: OnChangeFn<boolean>;
onShowAlertBannerChange?: OnChangeFn<boolean>;
onShowColumnFiltersChange?: OnChangeFn<boolean>;
onShowGlobalFilterChange?: OnChangeFn<boolean>;
onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
paginationDisplayMode?: 'custom' | 'default' | 'pages';
positionActionsColumn?: 'first' | 'last';
positionCreatingRow?: 'bottom' | 'top' | number;
positionExpandColumn?: 'first' | 'last';
positionGlobalFilter?: 'left' | 'none' | 'right';
positionPagination?: 'both' | 'bottom' | 'none' | 'top';
positionToolbarAlertBanner?: 'bottom' | 'head-overlay' | 'none' | 'top';
positionToolbarDropZone?: 'both' | 'bottom' | 'none' | 'top';
renderBottomToolbar?: ((props: {
table: MRT_TableInstance<TData>;
}) => ReactNode) | ReactNode;
renderBottomToolbarCustomActions?: (props: {
table: MRT_TableInstance<TData>;
}) => ReactNode;
renderCaption?: ((props: {
table: MRT_TableInstance<TData>;
}) => ReactNode) | ReactNode;
renderCellActionMenuItems?: (props: {
cell: MRT_Cell<TData>;
closeMenu: () => void;
column: MRT_Column<TData>;
internalMenuItems: ReactNode[];
row: MRT_Row<TData>;
staticColumnIndex?: number;
staticRowIndex?: number;
table: MRT_TableInstance<TData>;
}) => ReactNode[];
renderColumnActionsMenuItems?: (props: {
closeMenu: () => void;
column: MRT_Column<TData>;
internalColumnMenuItems: ReactNode[];
table: MRT_TableInstance<TData>;
}) => ReactNode[];
renderColumnFilterModeMenuItems?: (props: {
column: MRT_Column<TData>;
internalFilterOptions: MRT_InternalFilterOption[];
onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
table: MRT_TableInstance<TData>;
}) => ReactNode[];
renderCreateRowDialogContent?: (props: {
internalEditComponents: ReactNode[];
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => ReactNode;
renderDetailPanel?: (props: {
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => ReactN