import {
type Dispatch,
type HTMLProps,
type MutableRefObject,
type ReactNode,
type RefObject,
type SetStateAction,
} from 'react';
import {
type AccessorFn,
type AggregationFn,
type Cell,
type Column,
type ColumnDef,
type ColumnFiltersState,
type ColumnOrderState,
type ColumnPinningState,
type ColumnSizingInfoState,
type ColumnSizingState,
type DeepKeys,
type DeepValue,
type ExpandedState,
type FilterFn,
type GroupingState,
type Header,
type HeaderGroup,
type OnChangeFn,
type PaginationState,
type Row,
type RowSelectionState,
type SortingFn,
type SortingState,
type Table,
type TableOptions,
type TableState,
type Updater,
type VisibilityState,
} from '@tanstack/react-table';
import {
type VirtualItem,
type Virtualizer,
type VirtualizerOptions,
} from '@tanstack/react-virtual';
import {
type ActionIconProps,
type AlertProps,
type AutocompleteProps,
type BadgeProps,
type BoxProps,
type CheckboxProps,
type HighlightProps,
type LoadingOverlayProps,
type ModalProps,
type MultiSelectProps,
type PaginationProps,
type PaperProps,
type ProgressProps,
type RadioProps,
type RangeSliderProps,
type SelectProps,
type SkeletonProps,
type SwitchProps,
type TableProps,
type TableTbodyProps,
type TableTdProps,
type TableTfootProps,
type TableTheadProps,
type TableThProps,
type TableTrProps,
type TextInputProps,
type UnstyledButtonProps,
} from '@mantine/core';
import { type DateInputProps } from '@mantine/dates';
import { type MRT_AggregationFns } from './fns/aggregationFns';
import { type MRT_FilterFns } from './fns/filterFns';
import { type MRT_SortingFns } from './fns/sortingFns';
import { type MRT_Icons } from './icons';
export type { MRT_Icons };
export type LiteralUnion =
| (Record & U)
| T;
export type Prettify = { [K in keyof T]: T[K] } & unknown;
export type Xor =
| Prettify<{ [k in keyof A]?: never } & B>
| Prettify<{ [k in keyof B]?: never } & A>;
export type HTMLPropsRef = {
ref?: MutableRefObject | null;
} & Omit<
HTMLProps,
'color' | 'data' | 'label' | 'ref' | 'size' | 'style' | 'type'
>;
export type MantineShade = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
export type MRT_PaginationProps = {
rowsPerPageOptions?: string[];
showRowsPerPage?: boolean;
} & Partial;
export type MRT_DensityState = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
export type MRT_ColumnFilterFnsState = Record;
export type MRT_RowData = Record;
export type MRT_CellValue = unknown;
export type MRT_ColumnFiltersState = ColumnFiltersState;
export type MRT_ColumnOrderState = ColumnOrderState;
export type MRT_ColumnPinningState = ColumnPinningState;
export type MRT_ColumnSizingInfoState = ColumnSizingInfoState;
export type MRT_ColumnSizingState = ColumnSizingState;
export type MRT_ExpandedState = ExpandedState;
export type MRT_GroupingState = GroupingState;
export type MRT_PaginationState = PaginationState;
export type MRT_RowSelectionState = RowSelectionState;
export type MRT_SortingState = SortingState;
export type MRT_Updater = Updater;
export type MRT_VirtualItem = VirtualItem;
export type MRT_VisibilityState = VisibilityState;
export type MRT_VirtualizerOptions<
TScrollElement extends Element | Window = Element | Window,
TItemElement extends Element = Element,
> = VirtualizerOptions;
export type MRT_ColumnVirtualizer<
TScrollElement extends Element | Window = HTMLDivElement,
TItemElement extends Element = HTMLTableCellElement,
> = {
virtualColumns: MRT_VirtualItem[];
virtualPaddingLeft?: number;
virtualPaddingRight?: number;
} & Virtualizer;
export type MRT_RowVirtualizer<
TScrollElement extends Element | Window = HTMLDivElement,
TItemElement extends Element = HTMLTableRowElement,
> = {
virtualRows: MRT_VirtualItem[];
} & Virtualizer;
export type MRT_ColumnHelper = {
accessor: <
TAccessor extends AccessorFn | DeepKeys,
TValue extends TAccessor extends AccessorFn
? TReturn
: TAccessor extends DeepKeys
? DeepValue
: never,
>(
accessor: TAccessor,
column: MRT_DisplayColumnDef,
) => MRT_ColumnDef;
display: (column: MRT_DisplayColumnDef) => MRT_ColumnDef;
group: (column: MRT_GroupColumnDef) => MRT_ColumnDef;
};
export interface MRT_Localization {
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;
}
export interface MRT_RowModel {
flatRows: MRT_Row[];
rows: MRT_Row[];
rowsById: { [key: string]: MRT_Row };
}
export type MRT_TableInstance = {
getAllColumns: () => MRT_Column[];
getAllFlatColumns: () => MRT_Column[];
getAllLeafColumns: () => MRT_Column[];
getBottomRows: () => MRT_Row[];
getCenterLeafColumns: () => MRT_Column[];
getCenterRows: () => MRT_Row[];
getColumn: (columnId: string) => MRT_Column;
getExpandedRowModel: () => MRT_RowModel;
getFilteredSelectedRowModel: () => MRT_RowModel;
getFlatHeaders: () => MRT_Header[];
getHeaderGroups: () => MRT_HeaderGroup[];
getLeftLeafColumns: () => MRT_Column[];
getPaginationRowModel: () => MRT_RowModel;
getPreFilteredRowModel: () => MRT_RowModel;
getPrePaginationRowModel: () => MRT_RowModel;
getRightLeafColumns: () => MRT_Column[];
getRowModel: () => MRT_RowModel;
getSelectedRowModel: () => MRT_RowModel;
getState: () => MRT_TableState;
getTopRows: () => MRT_Row[];
options: MRT_StatefulTableOptions;
refs: {
bottomToolbarRef: RefObject;
editInputRefs: RefObject>;
filterInputRefs: RefObject>;
lastSelectedRowId: RefObject;
searchInputRef: RefObject;
tableContainerRef: RefObject;
tableFooterRef: RefObject;
tableHeadCellRefs: RefObject>;
tableHeadRef: RefObject;
tablePaperRef: RefObject;
topToolbarRef: RefObject;
};
setColumnFilterFns: Dispatch>;
setCreatingRow: Dispatch | null | true>>;
setDensity: Dispatch>;
setDraggingColumn: Dispatch | null>>;
setDraggingRow: Dispatch | null>>;
setEditingCell: Dispatch | null>>;
setEditingRow: Dispatch | null>>;
setGlobalFilterFn: Dispatch>;
setHoveredColumn: Dispatch>>>;
setHoveredRow: Dispatch>>>;
setIsFullScreen: Dispatch>;
setShowAlertBanner: Dispatch>;
setShowColumnFilters: Dispatch>;
setShowGlobalFilter: Dispatch>;
setShowToolbarDropZone: Dispatch>;
} & Omit<
Table,
| 'getAllColumns'
| 'getAllFlatColumns'
| 'getAllLeafColumns'
| 'getBottomRows'
| 'getCenterLeafColumns'
| 'getCenterRows'
| 'getColumn'
| 'getExpandedRowModel'
| 'getFlatHeaders'
| 'getHeaderGroups'
| 'getLeftLeafColumns'
| 'getPaginationRowModel'
| 'getPreFilteredRowModel'
| 'getPrePaginationRowModel'
| 'getRightLeafColumns'
| 'getRowModel'
| 'getSelectedRowModel'
| 'getState'
| 'getTopRows'
| 'options'
>;
export type MRT_DefinedTableOptions = {
icons: MRT_Icons;
localization: MRT_Localization;
} & Omit, 'icons' | 'localization'>;
export type MRT_StatefulTableOptions = {
state: Pick<
MRT_TableState,
| 'columnFilterFns'
| 'columnOrder'
| 'columnSizingInfo'
| 'creatingRow'
| 'density'
| 'draggingColumn'
| 'draggingRow'
| 'editingCell'
| 'editingRow'
| 'globalFilterFn'
| 'grouping'
| 'hoveredColumn'
| 'hoveredRow'
| 'isFullScreen'
| 'pagination'
| 'showAlertBanner'
| 'showColumnFilters'
| 'showGlobalFilter'
| 'showToolbarDropZone'
>;
} & MRT_DefinedTableOptions;
export type MRT_TableState = Prettify<
{
columnFilterFns: MRT_ColumnFilterFnsState;
creatingRow: MRT_Row | null;
density: MRT_DensityState;
draggingColumn: MRT_Column | null;
draggingRow: MRT_Row | null;
editingCell: MRT_Cell | null;
editingRow: MRT_Row | null;
globalFilterFn: MRT_FilterOption;
hoveredColumn: null | Partial>;
hoveredRow: null | Partial>;
isFullScreen: boolean;
isLoading: boolean;
isSaving: boolean;
showAlertBanner: boolean;
showColumnFilters: boolean;
showGlobalFilter: boolean;
showLoadingOverlay: boolean;
showProgressBars: boolean;
showSkeletons: boolean;
showToolbarDropZone: boolean;
} & TableState
>;
export type MRT_ColumnDef = {
/**
* 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) => any;
/**
* 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?: ({} & string) | DeepKeys;
AggregatedCell?: (props: {
cell: MRT_Cell;
column: MRT_Column;
row: MRT_Row;
table: MRT_TableInstance;
}) => ReactNode;
aggregationFn?: Array> | MRT_AggregationFn;
Cell?: (props: {
cell: MRT_Cell;
column: MRT_Column;
renderedCellValue: number | ReactNode | string;
renderedColumnIndex?: number;
renderedRowIndex?: number;
row: MRT_Row;
rowRef?: RefObject;
table: MRT_TableInstance;
}) => 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
> | null;
columns?: MRT_ColumnDef[];
Edit?: (props: {
cell: MRT_Cell;
column: MRT_Column;
row: MRT_Row;
table: MRT_TableInstance;
}) => ReactNode;
editVariant?: 'multi-select' | 'select' | 'text';
enableCellHoverReveal?: boolean;
enableClickToCopy?: ((cell: MRT_Cell) => boolean) | boolean;
enableColumnActions?: boolean;
enableColumnDragging?: boolean;
enableColumnFilterModes?: boolean;
enableColumnOrdering?: boolean;
enableEditing?: ((row: MRT_Row) => boolean) | boolean;
enableFilterMatchHighlighting?: boolean;
Filter?: (props: {
column: MRT_Column;
header: MRT_Header;
rangeFilterIndex?: number;
table: MRT_TableInstance;
}) => ReactNode;
filterFn?: MRT_FilterFn;
filterTooltipValueFn?: MRT_FilterTooltipValueFn;
filterVariant?:
| 'autocomplete'
| 'checkbox'
| 'date'
| 'date-range'
| 'multi-select'
| 'range'
| 'range-slider'
| 'select'
| 'text';
Footer?:
| ((props: {
column: MRT_Column;
footer: MRT_Header;
table: MRT_TableInstance;
}) => ReactNode)
| ReactNode;
/**
* 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;
GroupedCell?: (props: {
cell: MRT_Cell;
column: MRT_Column;
row: MRT_Row;
table: MRT_TableInstance;
}) => 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?:
| ((props: {
column: MRT_Column;
header: MRT_Header;
table: MRT_TableInstance;
}) => ReactNode)
| ReactNode;
/**
* 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;
/**
* 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;
mantineColumnActionsButtonProps?:
| ((props: {
column: MRT_Column;
table: MRT_TableInstance;
}) => HTMLPropsRef & Partial)
| (HTMLPropsRef & Partial);
mantineColumnDragHandleProps?:
| ((props: {
column: MRT_Column;
table: MRT_TableInstance;
}) => HTMLPropsRef & Partial)
| (HTMLPropsRef & Partial);
mantineCopyButtonProps?:
| ((props: {
cell: MRT_Cell;
column: MRT_Column;
row: MRT_Row;
table: MRT_TableInstance;
}) => HTMLPropsRef & Partial)
| (HTMLPropsRef & Partial);
mantineEditSelectProps?:
| ((props: {
cell: MRT_Cell;
column: MRT_Column;
row: MRT_Row;
table: MRT_TableInstance;
}) => HTMLPropsRef & Partial)
| (HTMLPropsRef & Partial);
mantineEditTextInputProps?:
| ((props: {
cell: MRT_Cell;
column: MRT_Column;
row: MRT_Row;
table: MRT_TableInstance;
}) => HTMLPropsRef & Partial)
| (HTMLPropsRef & Partial);
mantineFilterAutocompleteProps?:
| ((props: {
column: MRT_Column;
rangeFilterIndex?: number;
table: MRT_TableInstance;
}) => HTMLPropsRef & Partial)
| (HTMLPropsRef & Partial);
mantineFilterCheckboxProps?:
| ((props: {
column: MRT_Column;
table: MRT_TableInstance;
}) => HTMLPropsRef & Partial)
| (HTMLPropsRef & Partial);
mantineFilterDateInputProps?:
| ((props: {
column: MRT_Column;
rangeFilterIndex?: number;
table: MRT_TableInstance;
}) => HTMLPropsRef & Partial)
| (HTMLPropsRef & Partial);
mantineFilterMultiSelectProps?:
| ((props: {
column: MRT_Column;
rangeFilterIndex?: number;
table: MRT_TableInstance;
}) => HTMLPropsRef & Partial)
| (HTMLPropsRef & Partial);
mantineFilterRangeSliderProps?:
| ((props: {
column: MRT_Column;
rangeFilterIndex?: number;
table: MRT_TableInstance;
}) => HTMLPropsRef & Partial)
| (HTMLPropsRef & Partial);
mantineFilterSelectProps?:
| ((props: {
column: MRT_Column;
rangeFilterIndex?: number;
table: MRT_TableInstance;
}) => HTMLPropsRef & Partial)
| (HTMLPropsRef & Partial);
mantineFilterTextInputProps?:
| ((props: {
column: MRT_Column;
rangeFilterIndex?: number;
table: MRT_TableInstance;
}) => HTMLPropsRef & Partial)
| (HTMLPropsRef & Partial);
mantineTableBodyCellProps?:
| ((props: {
cell: MRT_Cell;
column: MRT_Column;
renderedRowIndex?: number;
row: MRT_Row;
table: MRT_TableInstance;
}) => HTMLPropsRef & TableTdProps)
| (HTMLPropsRef & TableTdProps);
mantineTableFooterCellProps?:
| ((props: {
column: MRT_Column;
table: MRT_TableInstance;
}) => HTMLPropsRef & TableThProps)
| (HTMLPropsRef & TableThProps);
mantineTableHeadCellProps?:
| ((props: {
column: MRT_Column;
table: MRT_TableInstance;
}) => HTMLPropsRef & TableThProps)
| (HTMLPropsRef & TableThProps);
PlaceholderCell?: (props: {
cell: MRT_Cell;
column: MRT_Column;
row: MRT_Row;
table: MRT_TableInstance;
}) => ReactNode;
renderColumnActionsMenuItems?: (props: {
column: MRT_Column;
internalColumnMenuItems: ReactNode;
table: MRT_TableInstance;
}) => ReactNode;
renderColumnFilterModeMenuItems?: (props: {
column: MRT_Column;
internalFilterOptions: MRT_InternalFilterOption[];
onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
table: MRT_TableInstance;
}) => ReactNode;
sortingFn?: MRT_SortingFn;
visibleInShowHideMenu?: boolean;
} & Omit<
ColumnDef,
| 'accessorKey'
| 'aggregatedCell'
| 'aggregationFn'
| 'cell'
| 'columns'
| 'filterFn'
| 'footer'
| 'header'
| 'id'
| 'sortingFn'
>;
export type MRT_DisplayColumnDef<
TData extends MRT_RowData,
TValue = unknown,
> = Omit, 'accessorFn' | 'accessorKey'>;
export type MRT_GroupColumnDef = {
columns: MRT_ColumnDef[];
} & MRT_DisplayColumnDef;
export type MRT_DefinedColumnDef<
TData extends MRT_RowData,
TValue = unknown,
> = {
_filterFn: MRT_FilterOption;
defaultDisplayColumn: Partial>;
id: string;
} & Omit, 'defaultDisplayColumn' | 'id'>;
export type MRT_Column = {
columnDef: MRT_DefinedColumnDef;
columns?: MRT_Column[];
filterFn?: MRT_FilterFn;
footer: string;
header: string;
} & Omit<
Column,
'columnDef' | 'columns' | 'filterFn' | 'footer' | 'header'
>;
export type MRT_Header = {
column: MRT_Column;
} & Omit, 'column'>;
export type MRT_HeaderGroup = {
headers: MRT_Header[];
} & Omit, 'headers'>;
export type MRT_Row = {
_valuesCache: Record & string>, any>;
getAllCells: () => MRT_Cell[];
getVisibleCells: () => MRT_Cell[];
subRows?: MRT_Row[];
} & Omit<
Row,
'_valuesCache' | 'getAllCells' | 'getVisibleCells' | 'subRows'
>;
export type MRT_Cell