UNPKG

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
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