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 = { column: MRT_Column; row: MRT_Row; } & Omit, 'column' | 'row'>; export type MRT_AggregationOption = keyof typeof MRT_AggregationFns & string; export type MRT_AggregationFn = | AggregationFn | MRT_AggregationOption; export type MRT_SortingOption = LiteralUnion< keyof typeof MRT_SortingFns & string >; export type MRT_SortingFn = | MRT_SortingOption | SortingFn; export type MRT_FilterOption = LiteralUnion< keyof typeof MRT_FilterFns & string >; export type MRT_FilterFn = | FilterFn | MRT_FilterOption; export type MRT_FilterTooltipValueFn = (value: TValue) => string; export type MRT_InternalFilterOption = { divider: boolean; label: string; option: string; symbol: string; }; export type MRT_DisplayColumnIds = | 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row-expand' | 'mrt-row-numbers' | 'mrt-row-pin' | 'mrt-row-select' | 'mrt-row-spacer'; export type MRT_CreateTableFeature< TData extends MRT_RowData, TFeature = any, > = (table: MRT_TableInstance) => TFeature; /** * `columns` and `data` props are the only required props, but there are over 150 other optional props. * * See more info on creating columns and data on the official docs site: * @link https://www.mantine-react-table.com/docs/getting-started/usage * * See the full props list on the official docs site: * @link https://www.mantine-react-table.com/docs/api/table-options */ export type MRT_TableOptions = { columnFilterDisplayMode?: 'custom' | 'popover' | 'subheader'; columnFilterModeOptions?: Array< LiteralUnion > | null; /** * The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` prop. * * See more info on creating columns on the official docs site: * @link https://www.mantine-react-table.com/docs/guides/data-columns * @link https://www.mantine-react-table.com/docs/guides/display-columns * * See all Columns Options on the official docs site: * @link https://www.mantine-react-table.com/docs/api/column-options */ columns: MRT_ColumnDef[]; columnVirtualizerInstanceRef?: MutableRefObject>; columnVirtualizerOptions?: | ((props: { table: MRT_TableInstance; }) => Partial>) | Partial>; 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.mantine-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` prop to change a default option for all columns. */ defaultColumn?: Partial>; /** * Change the default options for display columns. */ defaultDisplayColumn?: Partial>; displayColumnDefOptions?: Partial<{ [key in MRT_DisplayColumnIds]: Partial>; }>; editDisplayMode?: 'cell' | 'custom' | 'modal' | 'row' | 'table'; enableBatchRowSelection?: boolean; enableBottomToolbar?: boolean; enableClickToCopy?: ((cell: MRT_Cell) => boolean) | boolean; enableColumnActions?: boolean; enableColumnDragging?: boolean; enableColumnFilterModes?: boolean; enableColumnOrdering?: boolean; enableColumnVirtualization?: boolean; enableDensityToggle?: boolean; enableEditing?: ((row: MRT_Row) => boolean) | boolean; enableExpandAll?: boolean; enableFacetedValues?: boolean; enableFilterMatchHighlighting?: boolean; enableFullScreenToggle?: boolean; enableGlobalFilterModes?: boolean; enableGlobalFilterRankedResults?: boolean; enableHeaderActionsHoverReveal?: boolean; enablePagination?: boolean; enableRowActions?: boolean; enableRowDragging?: boolean; enableRowNumbers?: boolean; enableRowOrdering?: boolean; enableRowSelection?: ((row: MRT_Row) => 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, ) => string | undefined; globalFilterFn?: MRT_FilterOption; globalFilterModeOptions?: MRT_FilterOption[] | null; icons?: Partial; initialState?: Partial>; /** * 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 `mantine-react-table/locales/*` or a custom locale object. * * See the localization (i18n) guide for more info: * @link https://www.mantine-react-table.com/docs/guides/localization */ localization?: Partial; mantineBottomToolbarProps?: | ((props: { table: MRT_TableInstance; }) => BoxProps & HTMLPropsRef) | (BoxProps & HTMLPropsRef); 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); mantineCreateRowModalProps?: | ((props: { row: MRT_Row; table: MRT_TableInstance; }) => HTMLPropsRef & Partial) | (HTMLPropsRef & Partial); mantineDetailPanelProps?: | ((props: { row: MRT_Row; table: MRT_TableInstance; }) => BoxProps & HTMLPropsRef) | (BoxProps & HTMLPropsRef); mantineEditRowModalProps?: | ((props: { 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); mantineExpandAllButtonProps?: | ((props: { table: MRT_TableInstance; }) => HTMLPropsRef & Partial) | (HTMLPropsRef & Partial); mantineExpandButtonProps?: | ((props: { renderedRowIndex?: number; 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); mantineHighlightProps?: | ((props: { cell: MRT_Cell; column: MRT_Column; row: MRT_Row; table: MRT_TableInstance; }) => HTMLPropsRef & Partial) | (HTMLPropsRef & Partial); mantineLoadingOverlayProps?: | ((props: { table: MRT_TableInstance; }) => HTMLPropsRef & Partial) | (HTMLPropsRef & Partial); mantinePaginationProps?: | ((props: { table: MRT_TableInstance; }) => Partial & MRT_PaginationProps>) | Partial & MRT_PaginationProps>; mantinePaperProps?: | ((props: { table: MRT_TableInstance; }) => HTMLPropsRef & PaperProps) | (HTMLPropsRef & PaperProps); mantineProgressProps?: | ((props: { isTopToolbar: boolean; table: MRT_TableInstance; }) => HTMLPropsRef & ProgressProps) | (HTMLPropsRef & ProgressProps); mantineRowDragHandleProps?: | ((props: { row: MRT_Row; table: MRT_TableInstance; }) => HTMLPropsRef & Partial) | (HTMLPropsRef & Partial); mantineSearchTextInputProps?: | ((props: { table: MRT_TableInstance; }) => HTMLPropsRef & Partial) | (HTMLPropsRef & Partial); mantineSelectAllCheckboxProps?: | ((CheckboxProps | RadioProps | SwitchProps) & HTMLPropsRef) | ((props: { table: MRT_TableInstance; }) => (CheckboxProps | RadioProps | SwitchProps) & HTMLPropsRef); mantineSelectCheckboxProps?: | ((CheckboxProps | RadioProps | SwitchProps) & HTMLPropsRef) | ((props: { renderedRowIndex?: number; row: MRT_Row; table: MRT_TableInstance; }) => (CheckboxProps | RadioProps | SwitchProps) & HTMLPropsRef); mantineSkeletonProps?: | ((props: { cell: MRT_Cell; column: MRT_Column; row: MRT_Row; table: MRT_TableInstance; }) => HTMLPropsRef & SkeletonProps) | (HTMLPropsRef & SkeletonProps); mantineTableBodyCellProps?: | ((props: { cell: MRT_Cell; column: MRT_Column; renderedColumnIndex?: number; renderedRowIndex?: number; row: MRT_Row; table: MRT_TableInstance; }) => HTMLPropsRef & TableTdProps) | (HTMLPropsRef & TableTdProps); mantineTableBodyProps?: | ((props: { table: MRT_TableInstance; }) => HTMLPropsRef & TableTbodyProps) | (HTMLPropsRef & TableTbodyProps); mantineTableBodyRowProps?: | ((props: { isDetailPanel?: boolean; renderedRowIndex?: number; row: MRT_Row; table: MRT_TableInstance; }) => HTMLPropsRef & TableTrProps) | (HTMLPropsRef & TableTrProps); mantineTableContainerProps?: | ((props: { table: MRT_TableInstance; }) => BoxProps & HTMLPropsRef) | (BoxProps & HTMLPropsRef); mantineTableFooterCellProps?: | ((props: { column: MRT_Column; table: MRT_TableInstance; }) => HTMLPropsRef & TableThProps) | (HTMLPropsRef & TableThProps); mantineTableFooterProps?: | ((props: { table: MRT_TableInstance; }) => HTMLPropsRef & TableTfootProps) | (HTMLPropsRef & TableTfootProps); mantineTableFooterRowProps?: | ((props: { footerGroup: MRT_HeaderGroup; table: MRT_TableInstance; }) => HTMLPropsRef & TableTrProps) | (HTMLPropsRef & TableTrProps); mantineTableHeadCellProps?: | ((props: { column: MRT_Column; table: MRT_TableInstance; }) => HTMLPropsRef & TableThProps) | (HTMLPropsRef & TableThProps); mantineTableHeadProps?: | ((props: { table: MRT_TableInstance; }) => HTMLPropsRef & TableTheadProps) | (HTMLPropsRef & TableTheadProps); mantineTableHeadRowProps?: | ((props: { headerGroup: MRT_HeaderGroup; table: MRT_TableInstance; }) => HTMLPropsRef & TableTrProps) | (HTMLPropsRef & TableTrProps); mantineTableProps?: | ((props: { table: MRT_TableInstance; }) => HTMLPropsRef & TableProps) | (HTMLPropsRef & TableProps); mantineToolbarAlertBannerBadgeProps?: | ((props: { table: MRT_TableInstance; }) => HTMLPropsRef & Partial) | (HTMLPropsRef & Partial); mantineToolbarAlertBannerProps?: | ((props: { table: MRT_TableInstance; }) => HTMLPropsRef & Partial) | (HTMLPropsRef & Partial); mantineTopToolbarProps?: | ((props: { table: MRT_TableInstance; }) => BoxProps & HTMLPropsRef) | (BoxProps & HTMLPropsRef); /** * 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.mantine-react-table.com/docs/guides/memoize-components */ memoMode?: 'cells' | 'rows' | 'table-body'; onColumnFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>; onCreatingRowCancel?: (props: { row: MRT_Row; table: MRT_TableInstance; }) => void; onCreatingRowChange?: OnChangeFn | null>; onCreatingRowSave?: (props: { exitCreatingMode: () => void; row: MRT_Row; table: MRT_TableInstance; values: Record & string>, any>; }) => void; onDensityChange?: OnChangeFn; onDraggingColumnChange?: OnChangeFn | null>; onDraggingRowChange?: OnChangeFn | null>; onEditingCellChange?: OnChangeFn | null>; onEditingRowCancel?: (props: { row: MRT_Row; table: MRT_TableInstance; }) => void; onEditingRowChange?: OnChangeFn | null>; onEditingRowSave?: (props: { exitEditingMode: () => void; row: MRT_Row; table: MRT_TableInstance; values: Record & string>, any>; }) => Promise | void; onGlobalFilterFnChange?: OnChangeFn; onHoveredColumnChange?: OnChangeFn>>; onHoveredRowChange?: OnChangeFn>>; onIsFullScreenChange?: OnChangeFn; onShowAlertBannerChange?: OnChangeFn; onShowColumnFiltersChange?: OnChangeFn; onShowGlobalFilterChange?: OnChangeFn; onShowToolbarDropZoneChange?: OnChangeFn; 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 }) => ReactNode) | ReactNode; renderBottomToolbarCustomActions?: (props: { 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; renderCreateRowModalContent?: (props: { internalEditComponents: ReactNode[]; row: MRT_Row; table: MRT_TableInstance; }) => ReactNode; renderDetailPanel?: (props: { internalEditComponents: ReactNode[]; row: MRT_Row; table: MRT_TableInstance; }) => ReactNode; renderEditRowModalContent?: (props: { internalEditComponents: ReactNode[]; row: MRT_Row; table: MRT_TableInstance; }) => ReactNode; renderEmptyRowsFallback?: (props: { table: MRT_TableInstance; }) => ReactNode; renderGlobalFilterModeMenuItems?: (props: { internalFilterOptions: MRT_InternalFilterOption[]; onSelectFilterMode: (filterMode: MRT_FilterOption) => void; table: MRT_TableInstance; }) => ReactNode; renderRowActionMenuItems?: (props: { renderedRowIndex?: number; row: MRT_Row; table: MRT_TableInstance; }) => ReactNode; renderRowActions?: (props: { cell: MRT_Cell; renderedRowIndex?: number; row: MRT_Row; table: MRT_TableInstance; }) => ReactNode; renderToolbarAlertBannerContent?: (props: { groupedAlert: null | ReactNode; selectedAlert: null | ReactNode; table: MRT_TableInstance; }) => ReactNode; renderToolbarInternalActions?: (props: { table: MRT_TableInstance; }) => ReactNode; renderTopToolbar?: | ((props: { table: MRT_TableInstance }) => ReactNode) | ReactNode; renderTopToolbarCustomActions?: (props: { table: MRT_TableInstance; }) => ReactNode; rowCount?: number; rowNumberDisplayMode?: 'original' | 'static'; rowPinningDisplayMode?: | 'bottom' | 'select-bottom' | 'select-sticky' | 'select-top' | 'sticky' | 'top' | 'top-and-bottom'; rowVirtualizerInstanceRef?: MutableRefObject>; rowVirtualizerOptions?: | ((props: { table: MRT_TableInstance; }) => Partial>) | Partial>; selectAllMode?: 'all' | 'page'; selectDisplayMode?: 'checkbox' | 'radio' | 'switch'; /** * Manage state externally any way you want, then pass it back into MRT. */ state?: Partial>; } & Omit< Partial>, | 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'getRowId' | 'globalFilterFn' | 'initialState' | 'onStateChange' | 'state' >;