@mantine-vue/table 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +340 -0
- package/cjs/index.cjs +5345 -0
- package/cjs/index.cjs.map +1 -0
- package/esm/index.mjs +5214 -0
- package/esm/index.mjs.map +1 -0
- package/lib/components/MVT_TableSlots.d.ts +103 -0
- package/lib/components/MantineVueTable.d.ts +18 -0
- package/lib/components/body/MVT_TableBody.d.ts +64 -0
- package/lib/components/body/MVT_TableBodyCell.d.ts +136 -0
- package/lib/components/body/MVT_TableBodyCellValue.d.ts +40 -0
- package/lib/components/body/MVT_TableBodyEmptyRow.d.ts +42 -0
- package/lib/components/body/MVT_TableBodyRow.d.ts +170 -0
- package/lib/components/body/MVT_TableBodyRowGrabHandle.d.ts +31 -0
- package/lib/components/body/MVT_TableBodyRowPinButton.d.ts +23 -0
- package/lib/components/body/MVT_TableDetailPanel.d.ts +68 -0
- package/lib/components/buttons/MVT_ColumnPinningButtons.d.ts +23 -0
- package/lib/components/buttons/MVT_CopyButton.d.ts +23 -0
- package/lib/components/buttons/MVT_EditActionButtons.d.ts +33 -0
- package/lib/components/buttons/MVT_ExpandAllButton.d.ts +15 -0
- package/lib/components/buttons/MVT_ExpandButton.d.ts +23 -0
- package/lib/components/buttons/MVT_GrabHandleButton.d.ts +41 -0
- package/lib/components/buttons/MVT_RowPinButton.d.ts +31 -0
- package/lib/components/buttons/MVT_ShowHideColumnsButton.d.ts +15 -0
- package/lib/components/buttons/MVT_ToggleDensePaddingButton.d.ts +15 -0
- package/lib/components/buttons/MVT_ToggleFiltersButton.d.ts +15 -0
- package/lib/components/buttons/MVT_ToggleFullScreenButton.d.ts +15 -0
- package/lib/components/buttons/MVT_ToggleGlobalFilterButton.d.ts +15 -0
- package/lib/components/buttons/MVT_ToggleRowActionMenuButton.d.ts +31 -0
- package/lib/components/footer/MVT_TableFooter.d.ts +25 -0
- package/lib/components/footer/MVT_TableFooterCell.d.ts +33 -0
- package/lib/components/footer/MVT_TableFooterRow.d.ts +33 -0
- package/lib/components/head/MVT_TableHead.d.ts +25 -0
- package/lib/components/head/MVT_TableHeadCell.d.ts +42 -0
- package/lib/components/head/MVT_TableHeadCellFilterContainer.d.ts +23 -0
- package/lib/components/head/MVT_TableHeadCellFilterLabel.d.ts +23 -0
- package/lib/components/head/MVT_TableHeadCellGrabHandle.d.ts +31 -0
- package/lib/components/head/MVT_TableHeadCellResizeHandle.d.ts +23 -0
- package/lib/components/head/MVT_TableHeadCellSortLabel.d.ts +23 -0
- package/lib/components/head/MVT_TableHeadRow.d.ts +33 -0
- package/lib/components/inputs/MVT_EditCellTextInput.d.ts +23 -0
- package/lib/components/inputs/MVT_FilterCheckbox.d.ts +23 -0
- package/lib/components/inputs/MVT_FilterRangeFields.d.ts +23 -0
- package/lib/components/inputs/MVT_FilterRangeSlider.d.ts +23 -0
- package/lib/components/inputs/MVT_FilterTextInput.d.ts +33 -0
- package/lib/components/inputs/MVT_GlobalFilterTextInput.d.ts +15 -0
- package/lib/components/inputs/MVT_SelectCheckbox.d.ts +34 -0
- package/lib/components/menus/MVT_ColumnActionMenu.d.ts +42 -0
- package/lib/components/menus/MVT_FilterOptionMenu.d.ts +35 -0
- package/lib/components/menus/MVT_RowActionMenu.d.ts +31 -0
- package/lib/components/menus/MVT_ShowHideColumnsMenu.d.ts +15 -0
- package/lib/components/menus/MVT_ShowHideColumnsMenuItems.d.ts +54 -0
- package/lib/components/modals/MVT_EditRowModal.d.ts +29 -0
- package/lib/components/table/MVT_Table.d.ts +15 -0
- package/lib/components/table/MVT_TableContainer.d.ts +15 -0
- package/lib/components/table/MVT_TablePaper.d.ts +15 -0
- package/lib/components/toolbar/MVT_BottomToolbar.d.ts +15 -0
- package/lib/components/toolbar/MVT_ProgressBar.d.ts +23 -0
- package/lib/components/toolbar/MVT_TablePagination.d.ts +25 -0
- package/lib/components/toolbar/MVT_ToolbarAlertBanner.d.ts +25 -0
- package/lib/components/toolbar/MVT_ToolbarDropZone.d.ts +15 -0
- package/lib/components/toolbar/MVT_ToolbarInternalButtons.d.ts +15 -0
- package/lib/components/toolbar/MVT_TopToolbar.d.ts +15 -0
- package/lib/fns/aggregationFns.d.ts +11 -0
- package/lib/fns/filterFns.d.ts +70 -0
- package/lib/fns/sortingFns.d.ts +12 -0
- package/lib/hooks/display-columns/getMVT_RowActionsColumnDef.d.ts +2 -0
- package/lib/hooks/display-columns/getMVT_RowDragColumnDef.d.ts +2 -0
- package/lib/hooks/display-columns/getMVT_RowExpandColumnDef.d.ts +2 -0
- package/lib/hooks/display-columns/getMVT_RowNumbersColumnDef.d.ts +2 -0
- package/lib/hooks/display-columns/getMVT_RowPinningColumnDef.d.ts +2 -0
- package/lib/hooks/display-columns/getMVT_RowSelectColumnDef.d.ts +2 -0
- package/lib/hooks/display-columns/getMVT_RowSpacerColumnDef.d.ts +2 -0
- package/lib/hooks/useMVT_ColumnVirtualizer.d.ts +3 -0
- package/lib/hooks/useMVT_Effects.d.ts +5 -0
- package/lib/hooks/useMVT_RowVirtualizer.d.ts +3 -0
- package/lib/hooks/useMVT_Rows.d.ts +6 -0
- package/lib/hooks/useMVT_TableInstance.d.ts +10 -0
- package/lib/hooks/useMVT_TableOptions.d.ts +25 -0
- package/lib/hooks/useMantineVueTable.d.ts +2 -0
- package/lib/icons.d.ts +36 -0
- package/lib/index.d.mts +75 -0
- package/lib/index.d.ts +75 -0
- package/lib/locales/ar.d.ts +2 -0
- package/lib/locales/az.d.ts +2 -0
- package/lib/locales/bg.d.ts +2 -0
- package/lib/locales/cs.d.ts +2 -0
- package/lib/locales/da.d.ts +2 -0
- package/lib/locales/de.d.ts +2 -0
- package/lib/locales/el.d.ts +2 -0
- package/lib/locales/en.d.ts +2 -0
- package/lib/locales/es.d.ts +2 -0
- package/lib/locales/et.d.ts +2 -0
- package/lib/locales/fa.d.ts +2 -0
- package/lib/locales/fi.d.ts +2 -0
- package/lib/locales/fr.d.ts +2 -0
- package/lib/locales/he.d.ts +2 -0
- package/lib/locales/hr.d.ts +2 -0
- package/lib/locales/hu.d.ts +2 -0
- package/lib/locales/hy.d.ts +2 -0
- package/lib/locales/id.d.ts +2 -0
- package/lib/locales/it.d.ts +2 -0
- package/lib/locales/ja.d.ts +2 -0
- package/lib/locales/ko.d.ts +2 -0
- package/lib/locales/nl.d.ts +2 -0
- package/lib/locales/no.d.ts +2 -0
- package/lib/locales/np.d.ts +2 -0
- package/lib/locales/pl.d.ts +2 -0
- package/lib/locales/pt-BR.d.ts +2 -0
- package/lib/locales/pt.d.ts +2 -0
- package/lib/locales/ro.d.ts +2 -0
- package/lib/locales/ru.d.ts +2 -0
- package/lib/locales/sk.d.ts +2 -0
- package/lib/locales/sr-Cyrl-RS.d.ts +2 -0
- package/lib/locales/sr-Latn-RS.d.ts +2 -0
- package/lib/locales/sv.d.ts +2 -0
- package/lib/locales/th.d.ts +2 -0
- package/lib/locales/tr.d.ts +2 -0
- package/lib/locales/uk.d.ts +2 -0
- package/lib/locales/vi.d.ts +2 -0
- package/lib/locales/zh-Hans.d.ts +2 -0
- package/lib/locales/zh-Hant.d.ts +2 -0
- package/lib/mantine.types.d.ts +32 -0
- package/lib/types.d.ts +887 -0
- package/lib/utils/column.utils.d.ts +9 -0
- package/lib/utils/displayColumn.utils.d.ts +17 -0
- package/lib/utils/row.utils.d.ts +16 -0
- package/lib/utils/style.utils.d.ts +8 -0
- package/lib/utils/tanstack.helpers.d.ts +14 -0
- package/lib/utils/utils.d.ts +1 -0
- package/lib/utils/virtualization.utils.d.ts +2 -0
- package/locales/ar.cjs +97 -0
- package/locales/ar.mjs +96 -0
- package/locales/az.cjs +97 -0
- package/locales/az.mjs +96 -0
- package/locales/bg.cjs +97 -0
- package/locales/bg.mjs +96 -0
- package/locales/cs.cjs +97 -0
- package/locales/cs.mjs +96 -0
- package/locales/da.cjs +97 -0
- package/locales/da.mjs +96 -0
- package/locales/de.cjs +97 -0
- package/locales/de.mjs +96 -0
- package/locales/el.cjs +97 -0
- package/locales/el.mjs +96 -0
- package/locales/en.cjs +97 -0
- package/locales/en.mjs +96 -0
- package/locales/es.cjs +97 -0
- package/locales/es.mjs +96 -0
- package/locales/et.cjs +97 -0
- package/locales/et.mjs +96 -0
- package/locales/fa.cjs +97 -0
- package/locales/fa.mjs +96 -0
- package/locales/fi.cjs +97 -0
- package/locales/fi.mjs +96 -0
- package/locales/fr.cjs +97 -0
- package/locales/fr.mjs +96 -0
- package/locales/he.cjs +97 -0
- package/locales/he.mjs +96 -0
- package/locales/hr.cjs +97 -0
- package/locales/hr.mjs +96 -0
- package/locales/hu.cjs +97 -0
- package/locales/hu.mjs +96 -0
- package/locales/hy.cjs +97 -0
- package/locales/hy.mjs +96 -0
- package/locales/id.cjs +97 -0
- package/locales/id.mjs +96 -0
- package/locales/it.cjs +97 -0
- package/locales/it.mjs +96 -0
- package/locales/ja.cjs +97 -0
- package/locales/ja.mjs +96 -0
- package/locales/ko.cjs +97 -0
- package/locales/ko.mjs +96 -0
- package/locales/nl.cjs +97 -0
- package/locales/nl.mjs +96 -0
- package/locales/no.cjs +97 -0
- package/locales/no.mjs +96 -0
- package/locales/np.cjs +97 -0
- package/locales/np.mjs +96 -0
- package/locales/pl.cjs +97 -0
- package/locales/pl.mjs +96 -0
- package/locales/pt-BR.cjs +97 -0
- package/locales/pt-BR.mjs +96 -0
- package/locales/pt.cjs +97 -0
- package/locales/pt.mjs +96 -0
- package/locales/ro.cjs +97 -0
- package/locales/ro.mjs +96 -0
- package/locales/ru.cjs +97 -0
- package/locales/ru.mjs +96 -0
- package/locales/sk.cjs +97 -0
- package/locales/sk.mjs +96 -0
- package/locales/sr-Cyrl-RS.cjs +97 -0
- package/locales/sr-Cyrl-RS.mjs +96 -0
- package/locales/sr-Latn-RS.cjs +97 -0
- package/locales/sr-Latn-RS.mjs +96 -0
- package/locales/sv.cjs +97 -0
- package/locales/sv.mjs +96 -0
- package/locales/th.cjs +97 -0
- package/locales/th.mjs +96 -0
- package/locales/tr.cjs +97 -0
- package/locales/tr.mjs +96 -0
- package/locales/uk.cjs +97 -0
- package/locales/uk.mjs +96 -0
- package/locales/vi.cjs +97 -0
- package/locales/vi.mjs +96 -0
- package/locales/zh-Hans.cjs +97 -0
- package/locales/zh-Hans.mjs +96 -0
- package/locales/zh-Hant.cjs +97 -0
- package/locales/zh-Hant.mjs +96 -0
- package/package.json +79 -0
- package/styles.css +1118 -0
- package/styles.layer.css +1120 -0
package/lib/types.d.ts
ADDED
|
@@ -0,0 +1,887 @@
|
|
|
1
|
+
import { type CSSProperties, type HTMLAttributes, type Ref, type VNodeChild } from 'vue';
|
|
2
|
+
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/vue-table';
|
|
3
|
+
import { type VirtualItem, type Virtualizer, type VirtualizerOptions } from '@tanstack/vue-virtual';
|
|
4
|
+
import { type ActionIconProps, type AlertProps, type AutocompleteProps, type BadgeProps, type BoxProps, type CheckboxProps, type DateInputProps, 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.types';
|
|
5
|
+
import { type MVT_AggregationFns } from './fns/aggregationFns';
|
|
6
|
+
import { type MVT_FilterFns } from './fns/filterFns';
|
|
7
|
+
import { type MVT_SortingFns } from './fns/sortingFns';
|
|
8
|
+
import { type MVT_Icons } from './icons';
|
|
9
|
+
export type { MVT_Icons };
|
|
10
|
+
/**
|
|
11
|
+
* A Vue renderable node. Used for
|
|
12
|
+
* every prop-based render option so components/renderers can be passed through
|
|
13
|
+
* props (in addition to the 0 named slot supported by each component).
|
|
14
|
+
*/
|
|
15
|
+
export type MVT_Node = VNodeChild;
|
|
16
|
+
/**
|
|
17
|
+
* State setter. Accepts a
|
|
18
|
+
* next value or an updater function receiving the previous value.
|
|
19
|
+
*/
|
|
20
|
+
export type MVT_SetState<T> = (updaterOrValue: ((prev: T) => T) | T) => void;
|
|
21
|
+
export type LiteralUnion<T extends U, U = string> = (Record<never, never> & U) | T;
|
|
22
|
+
export type Prettify<T> = {
|
|
23
|
+
[K in keyof T]: T[K];
|
|
24
|
+
} & unknown;
|
|
25
|
+
export type Xor<A, B> = Prettify<{
|
|
26
|
+
[k in keyof A]?: never;
|
|
27
|
+
} & B> | Prettify<{
|
|
28
|
+
[k in keyof B]?: never;
|
|
29
|
+
} & A>;
|
|
30
|
+
/**
|
|
31
|
+
* Passthrough HTML attributes plus an optional Vue template ref.
|
|
32
|
+
*/
|
|
33
|
+
export type HTMLPropsRef<T extends HTMLElement> = {
|
|
34
|
+
ref?: Ref<null | T> | null;
|
|
35
|
+
style?: CSSProperties;
|
|
36
|
+
} & Omit<Partial<HTMLAttributes>, 'color' | 'label' | 'ref' | 'style' | 'title'>;
|
|
37
|
+
export type MantineShade = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
|
|
38
|
+
export type MVT_PaginationProps = {
|
|
39
|
+
rowsPerPageOptions?: string[];
|
|
40
|
+
showRowsPerPage?: boolean;
|
|
41
|
+
} & Partial<PaginationProps>;
|
|
42
|
+
export type MVT_DensityState = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
|
|
43
|
+
export type MVT_ColumnFilterFnsState = Record<string, MVT_FilterOption>;
|
|
44
|
+
export type MVT_RowData = Record<string, any>;
|
|
45
|
+
export type MVT_CellValue = unknown;
|
|
46
|
+
export type MVT_ColumnFiltersState = ColumnFiltersState;
|
|
47
|
+
export type MVT_ColumnOrderState = ColumnOrderState;
|
|
48
|
+
export type MVT_ColumnPinningState = ColumnPinningState;
|
|
49
|
+
export type MVT_ColumnSizingInfoState = ColumnSizingInfoState;
|
|
50
|
+
export type MVT_ColumnSizingState = ColumnSizingState;
|
|
51
|
+
export type MVT_ExpandedState = ExpandedState;
|
|
52
|
+
export type MVT_GroupingState = GroupingState;
|
|
53
|
+
export type MVT_PaginationState = PaginationState;
|
|
54
|
+
export type MVT_RowSelectionState = RowSelectionState;
|
|
55
|
+
export type MVT_SortingState = SortingState;
|
|
56
|
+
export type MVT_Updater<T> = Updater<T>;
|
|
57
|
+
export type MVT_VirtualItem = VirtualItem;
|
|
58
|
+
export type MVT_VisibilityState = VisibilityState;
|
|
59
|
+
export type MVT_VirtualizerOptions<TScrollElement extends Element | Window = Element | Window, TItemElement extends Element = Element> = VirtualizerOptions<TScrollElement, TItemElement>;
|
|
60
|
+
export type MVT_ColumnVirtualizer<TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableCellElement> = {
|
|
61
|
+
virtualColumns: MVT_VirtualItem[];
|
|
62
|
+
virtualPaddingLeft?: number;
|
|
63
|
+
virtualPaddingRight?: number;
|
|
64
|
+
} & Virtualizer<TScrollElement, TItemElement>;
|
|
65
|
+
export type MVT_RowVirtualizer<TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableRowElement> = {
|
|
66
|
+
virtualRows: MVT_VirtualItem[];
|
|
67
|
+
} & Virtualizer<TScrollElement, TItemElement>;
|
|
68
|
+
export type MVT_ColumnHelper<TData extends MVT_RowData> = {
|
|
69
|
+
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: MVT_DisplayColumnDef<TData, TValue>) => MVT_ColumnDef<TData, TValue>;
|
|
70
|
+
display: (column: MVT_DisplayColumnDef<TData>) => MVT_ColumnDef<TData>;
|
|
71
|
+
group: (column: MVT_GroupColumnDef<TData>) => MVT_ColumnDef<TData>;
|
|
72
|
+
};
|
|
73
|
+
export interface MVT_Localization {
|
|
74
|
+
actions: string;
|
|
75
|
+
and: string;
|
|
76
|
+
cancel: string;
|
|
77
|
+
changeFilterMode: string;
|
|
78
|
+
changeSearchMode: string;
|
|
79
|
+
clearFilter: string;
|
|
80
|
+
clearSearch: string;
|
|
81
|
+
clearSelection: string;
|
|
82
|
+
clearSort: string;
|
|
83
|
+
clickToCopy: string;
|
|
84
|
+
collapse: string;
|
|
85
|
+
collapseAll: string;
|
|
86
|
+
columnActions: string;
|
|
87
|
+
copiedToClipboard: string;
|
|
88
|
+
copy: string;
|
|
89
|
+
dropToGroupBy: string;
|
|
90
|
+
edit: string;
|
|
91
|
+
expand: string;
|
|
92
|
+
expandAll: string;
|
|
93
|
+
filterArrIncludes: string;
|
|
94
|
+
filterArrIncludesAll: string;
|
|
95
|
+
filterArrIncludesSome: string;
|
|
96
|
+
filterBetween: string;
|
|
97
|
+
filterBetweenInclusive: string;
|
|
98
|
+
filterByColumn: string;
|
|
99
|
+
filterContains: string;
|
|
100
|
+
filterEmpty: string;
|
|
101
|
+
filterEndsWith: string;
|
|
102
|
+
filterEquals: string;
|
|
103
|
+
filterEqualsString: string;
|
|
104
|
+
filterFuzzy: string;
|
|
105
|
+
filterGreaterThan: string;
|
|
106
|
+
filterGreaterThanOrEqualTo: string;
|
|
107
|
+
filterIncludesString: string;
|
|
108
|
+
filterIncludesStringSensitive: string;
|
|
109
|
+
filteringByColumn: string;
|
|
110
|
+
filterInNumberRange: string;
|
|
111
|
+
filterLessThan: string;
|
|
112
|
+
filterLessThanOrEqualTo: string;
|
|
113
|
+
filterMode: string;
|
|
114
|
+
filterNotEmpty: string;
|
|
115
|
+
filterNotEquals: string;
|
|
116
|
+
filterStartsWith: string;
|
|
117
|
+
filterWeakEquals: string;
|
|
118
|
+
goToFirstPage: string;
|
|
119
|
+
goToLastPage: string;
|
|
120
|
+
goToNextPage: string;
|
|
121
|
+
goToPreviousPage: string;
|
|
122
|
+
grab: string;
|
|
123
|
+
groupByColumn: string;
|
|
124
|
+
groupedBy: string;
|
|
125
|
+
hideAll: string;
|
|
126
|
+
hideColumn: string;
|
|
127
|
+
max: string;
|
|
128
|
+
min: string;
|
|
129
|
+
move: string;
|
|
130
|
+
noRecordsToDisplay: string;
|
|
131
|
+
noResultsFound: string;
|
|
132
|
+
of: string;
|
|
133
|
+
or: string;
|
|
134
|
+
pin: string;
|
|
135
|
+
pinToLeft: string;
|
|
136
|
+
pinToRight: string;
|
|
137
|
+
resetColumnSize: string;
|
|
138
|
+
resetOrder: string;
|
|
139
|
+
rowActions: string;
|
|
140
|
+
rowNumber: string;
|
|
141
|
+
rowNumbers: string;
|
|
142
|
+
rowsPerPage: string;
|
|
143
|
+
save: string;
|
|
144
|
+
search: string;
|
|
145
|
+
select: string;
|
|
146
|
+
selectedCountOfRowCountRowsSelected: string;
|
|
147
|
+
showAll: string;
|
|
148
|
+
showAllColumns: string;
|
|
149
|
+
showHideColumns: string;
|
|
150
|
+
showHideFilters: string;
|
|
151
|
+
showHideSearch: string;
|
|
152
|
+
sortByColumnAsc: string;
|
|
153
|
+
sortByColumnDesc: string;
|
|
154
|
+
sortedByColumnAsc: string;
|
|
155
|
+
sortedByColumnDesc: string;
|
|
156
|
+
thenBy: string;
|
|
157
|
+
toggleDensity: string;
|
|
158
|
+
toggleFullScreen: string;
|
|
159
|
+
toggleSelectAll: string;
|
|
160
|
+
toggleSelectRow: string;
|
|
161
|
+
toggleVisibility: string;
|
|
162
|
+
ungroupByColumn: string;
|
|
163
|
+
unpin: string;
|
|
164
|
+
unpinAll: string;
|
|
165
|
+
}
|
|
166
|
+
export interface MVT_RowModel<TData extends MVT_RowData> {
|
|
167
|
+
flatRows: MVT_Row<TData>[];
|
|
168
|
+
rows: MVT_Row<TData>[];
|
|
169
|
+
rowsById: {
|
|
170
|
+
[key: string]: MVT_Row<TData>;
|
|
171
|
+
};
|
|
172
|
+
}
|
|
173
|
+
export type MVT_TableInstance<TData extends MVT_RowData> = {
|
|
174
|
+
getAllColumns: () => MVT_Column<TData>[];
|
|
175
|
+
getAllFlatColumns: () => MVT_Column<TData>[];
|
|
176
|
+
getAllLeafColumns: () => MVT_Column<TData>[];
|
|
177
|
+
getBottomRows: () => MVT_Row<TData>[];
|
|
178
|
+
getCenterLeafColumns: () => MVT_Column<TData>[];
|
|
179
|
+
getCenterRows: () => MVT_Row<TData>[];
|
|
180
|
+
getColumn: (columnId: string) => MVT_Column<TData>;
|
|
181
|
+
getExpandedRowModel: () => MVT_RowModel<TData>;
|
|
182
|
+
getFilteredSelectedRowModel: () => MVT_RowModel<TData>;
|
|
183
|
+
getFlatHeaders: () => MVT_Header<TData>[];
|
|
184
|
+
getHeaderGroups: () => MVT_HeaderGroup<TData>[];
|
|
185
|
+
getLeftLeafColumns: () => MVT_Column<TData>[];
|
|
186
|
+
getPaginationRowModel: () => MVT_RowModel<TData>;
|
|
187
|
+
getPreFilteredRowModel: () => MVT_RowModel<TData>;
|
|
188
|
+
getPrePaginationRowModel: () => MVT_RowModel<TData>;
|
|
189
|
+
getRightLeafColumns: () => MVT_Column<TData>[];
|
|
190
|
+
getRowModel: () => MVT_RowModel<TData>;
|
|
191
|
+
getSelectedRowModel: () => MVT_RowModel<TData>;
|
|
192
|
+
getState: () => MVT_TableState<TData>;
|
|
193
|
+
getTopRows: () => MVT_Row<TData>[];
|
|
194
|
+
options: MVT_StatefulTableOptions<TData>;
|
|
195
|
+
refs: {
|
|
196
|
+
bottomToolbarRef: Ref<HTMLDivElement | null>;
|
|
197
|
+
editInputRefs: Ref<Record<string, HTMLInputElement>>;
|
|
198
|
+
filterInputRefs: Ref<Record<string, HTMLInputElement>>;
|
|
199
|
+
lastSelectedRowId: Ref<null | string>;
|
|
200
|
+
searchInputRef: Ref<HTMLInputElement | null>;
|
|
201
|
+
tableContainerRef: Ref<HTMLDivElement | null>;
|
|
202
|
+
tableFooterRef: Ref<HTMLTableSectionElement | null>;
|
|
203
|
+
tableHeadCellRefs: Ref<Record<string, HTMLTableCellElement>>;
|
|
204
|
+
tableHeadRef: Ref<HTMLTableSectionElement | null>;
|
|
205
|
+
tablePaperRef: Ref<HTMLDivElement | null>;
|
|
206
|
+
topToolbarRef: Ref<HTMLDivElement | null>;
|
|
207
|
+
};
|
|
208
|
+
setColumnFilterFns: MVT_SetState<MVT_ColumnFilterFnsState>;
|
|
209
|
+
setCreatingRow: MVT_SetState<MVT_Row<TData> | null | true>;
|
|
210
|
+
setDensity: MVT_SetState<MVT_DensityState>;
|
|
211
|
+
setDraggingColumn: MVT_SetState<MVT_Column<TData> | null>;
|
|
212
|
+
setDraggingRow: MVT_SetState<MVT_Row<TData> | null>;
|
|
213
|
+
setEditingCell: MVT_SetState<MVT_Cell<TData> | null>;
|
|
214
|
+
setEditingRow: MVT_SetState<MVT_Row<TData> | null>;
|
|
215
|
+
setGlobalFilterFn: MVT_SetState<MVT_FilterOption>;
|
|
216
|
+
setHoveredColumn: MVT_SetState<null | Partial<MVT_Column<TData>>>;
|
|
217
|
+
setHoveredRow: MVT_SetState<null | Partial<MVT_Row<TData>>>;
|
|
218
|
+
setIsFullScreen: MVT_SetState<boolean>;
|
|
219
|
+
setShowAlertBanner: MVT_SetState<boolean>;
|
|
220
|
+
setShowColumnFilters: MVT_SetState<boolean>;
|
|
221
|
+
setShowGlobalFilter: MVT_SetState<boolean>;
|
|
222
|
+
setShowToolbarDropZone: MVT_SetState<boolean>;
|
|
223
|
+
} & Omit<Table<TData>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getBottomRows' | 'getCenterLeafColumns' | 'getCenterRows' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getHeaderGroups' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'getTopRows' | 'options'>;
|
|
224
|
+
export type MVT_DefinedTableOptions<TData extends MVT_RowData> = {
|
|
225
|
+
icons: MVT_Icons;
|
|
226
|
+
localization: MVT_Localization;
|
|
227
|
+
} & Omit<MVT_TableOptions<TData>, 'icons' | 'localization'>;
|
|
228
|
+
export type MVT_StatefulTableOptions<TData extends MVT_RowData> = {
|
|
229
|
+
state: Pick<MVT_TableState<TData>, 'columnFilterFns' | 'columnOrder' | 'columnSizingInfo' | 'creatingRow' | 'density' | 'draggingColumn' | 'draggingRow' | 'editingCell' | 'editingRow' | 'globalFilterFn' | 'grouping' | 'hoveredColumn' | 'hoveredRow' | 'isFullScreen' | 'pagination' | 'showAlertBanner' | 'showColumnFilters' | 'showGlobalFilter' | 'showToolbarDropZone'>;
|
|
230
|
+
} & MVT_DefinedTableOptions<TData>;
|
|
231
|
+
export type MVT_TableState<TData extends MVT_RowData> = Prettify<{
|
|
232
|
+
columnFilterFns: MVT_ColumnFilterFnsState;
|
|
233
|
+
creatingRow: MVT_Row<TData> | null;
|
|
234
|
+
density: MVT_DensityState;
|
|
235
|
+
draggingColumn: MVT_Column<TData> | null;
|
|
236
|
+
draggingRow: MVT_Row<TData> | null;
|
|
237
|
+
editingCell: MVT_Cell<TData> | null;
|
|
238
|
+
editingRow: MVT_Row<TData> | null;
|
|
239
|
+
globalFilterFn: MVT_FilterOption;
|
|
240
|
+
hoveredColumn: null | Partial<MVT_Column<TData>>;
|
|
241
|
+
hoveredRow: null | Partial<MVT_Row<TData>>;
|
|
242
|
+
isFullScreen: boolean;
|
|
243
|
+
isLoading: boolean;
|
|
244
|
+
isSaving: boolean;
|
|
245
|
+
showAlertBanner: boolean;
|
|
246
|
+
showColumnFilters: boolean;
|
|
247
|
+
showGlobalFilter: boolean;
|
|
248
|
+
showLoadingOverlay: boolean;
|
|
249
|
+
showProgressBars: boolean;
|
|
250
|
+
showSkeletons: boolean;
|
|
251
|
+
showToolbarDropZone: boolean;
|
|
252
|
+
} & TableState>;
|
|
253
|
+
export type MVT_ColumnDef<TData extends MVT_RowData, TValue = unknown> = {
|
|
254
|
+
/**
|
|
255
|
+
* Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
|
|
256
|
+
* Specify a function here to point to the correct property in the data object.
|
|
257
|
+
*
|
|
258
|
+
* @example accessorFn: (row) => row.username
|
|
259
|
+
*/
|
|
260
|
+
accessorFn?: (originalRow: TData) => any;
|
|
261
|
+
/**
|
|
262
|
+
* Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
|
|
263
|
+
* Specify which key in the row this column should use to access the correct data.
|
|
264
|
+
* Also supports Deep Key Dot Notation.
|
|
265
|
+
*
|
|
266
|
+
* @example accessorKey: 'username' //simple
|
|
267
|
+
* @example accessorKey: 'name.firstName' //deep key dot notation
|
|
268
|
+
*/
|
|
269
|
+
accessorKey?: ({} & string) | DeepKeys<TData>;
|
|
270
|
+
AggregatedCell?: (props: {
|
|
271
|
+
cell: MVT_Cell<TData, TValue>;
|
|
272
|
+
column: MVT_Column<TData, TValue>;
|
|
273
|
+
row: MVT_Row<TData>;
|
|
274
|
+
table: MVT_TableInstance<TData>;
|
|
275
|
+
}) => MVT_Node;
|
|
276
|
+
aggregationFn?: Array<MVT_AggregationFn<TData>> | MVT_AggregationFn<TData>;
|
|
277
|
+
Cell?: (props: {
|
|
278
|
+
cell: MVT_Cell<TData, TValue>;
|
|
279
|
+
column: MVT_Column<TData, TValue>;
|
|
280
|
+
renderedCellValue: MVT_Node | number | string;
|
|
281
|
+
renderedColumnIndex?: number;
|
|
282
|
+
renderedRowIndex?: number;
|
|
283
|
+
row: MVT_Row<TData>;
|
|
284
|
+
rowRef?: Ref<HTMLTableRowElement | null>;
|
|
285
|
+
table: MVT_TableInstance<TData>;
|
|
286
|
+
}) => MVT_Node;
|
|
287
|
+
/**
|
|
288
|
+
* Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
|
|
289
|
+
* Leave this blank if you are just creating a normal data column.
|
|
290
|
+
*
|
|
291
|
+
* @default 'data'
|
|
292
|
+
*
|
|
293
|
+
* @example columnDefType: 'display'
|
|
294
|
+
*/
|
|
295
|
+
columnDefType?: 'data' | 'display' | 'group';
|
|
296
|
+
columnFilterModeOptions?: Array<LiteralUnion<MVT_FilterOption & string>> | null;
|
|
297
|
+
columns?: MVT_ColumnDef<TData>[];
|
|
298
|
+
Edit?: (props: {
|
|
299
|
+
cell: MVT_Cell<TData, TValue>;
|
|
300
|
+
column: MVT_Column<TData, TValue>;
|
|
301
|
+
row: MVT_Row<TData>;
|
|
302
|
+
table: MVT_TableInstance<TData>;
|
|
303
|
+
}) => MVT_Node;
|
|
304
|
+
editVariant?: 'multi-select' | 'select' | 'text';
|
|
305
|
+
enableCellHoverReveal?: boolean;
|
|
306
|
+
enableClickToCopy?: ((cell: MVT_Cell<TData>) => boolean) | boolean;
|
|
307
|
+
enableColumnActions?: boolean;
|
|
308
|
+
enableColumnDragging?: boolean;
|
|
309
|
+
enableColumnFilterModes?: boolean;
|
|
310
|
+
enableColumnOrdering?: boolean;
|
|
311
|
+
enableEditing?: ((row: MVT_Row<TData>) => boolean) | boolean;
|
|
312
|
+
enableFilterMatchHighlighting?: boolean;
|
|
313
|
+
Filter?: (props: {
|
|
314
|
+
column: MVT_Column<TData, TValue>;
|
|
315
|
+
header: MVT_Header<TData>;
|
|
316
|
+
rangeFilterIndex?: number;
|
|
317
|
+
table: MVT_TableInstance<TData>;
|
|
318
|
+
}) => MVT_Node;
|
|
319
|
+
filterFn?: MVT_FilterFn<TData>;
|
|
320
|
+
filterTooltipValueFn?: MVT_FilterTooltipValueFn;
|
|
321
|
+
filterVariant?: 'autocomplete' | 'checkbox' | 'date' | 'date-range' | 'multi-select' | 'range' | 'range-slider' | 'select' | 'text';
|
|
322
|
+
Footer?: ((props: {
|
|
323
|
+
column: MVT_Column<TData, TValue>;
|
|
324
|
+
footer: MVT_Header<TData>;
|
|
325
|
+
table: MVT_TableInstance<TData>;
|
|
326
|
+
}) => MVT_Node) | MVT_Node;
|
|
327
|
+
/**
|
|
328
|
+
* footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
|
|
329
|
+
*/
|
|
330
|
+
footer?: string;
|
|
331
|
+
GroupedCell?: (props: {
|
|
332
|
+
cell: MVT_Cell<TData, TValue>;
|
|
333
|
+
column: MVT_Column<TData, TValue>;
|
|
334
|
+
row: MVT_Row<TData>;
|
|
335
|
+
table: MVT_TableInstance<TData>;
|
|
336
|
+
}) => MVT_Node;
|
|
337
|
+
/**
|
|
338
|
+
* 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.
|
|
339
|
+
*/
|
|
340
|
+
grow?: boolean | number;
|
|
341
|
+
Header?: ((props: {
|
|
342
|
+
column: MVT_Column<TData, TValue>;
|
|
343
|
+
header: MVT_Header<TData>;
|
|
344
|
+
table: MVT_TableInstance<TData>;
|
|
345
|
+
}) => MVT_Node) | MVT_Node;
|
|
346
|
+
/**
|
|
347
|
+
* header must be a string. If you want custom JSX to render the header, you can also specify a `Header` option. (Capital H)
|
|
348
|
+
*/
|
|
349
|
+
header: string;
|
|
350
|
+
/**
|
|
351
|
+
* Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
|
|
352
|
+
*
|
|
353
|
+
* If you have also specified an `accessorFn`, MVT still needs to have a valid `id` to be able to identify the column uniquely.
|
|
354
|
+
*
|
|
355
|
+
* `id` defaults to the `accessorKey` or `header` if not specified.
|
|
356
|
+
*
|
|
357
|
+
* @default gets set to the same value as `accessorKey` by default
|
|
358
|
+
*/
|
|
359
|
+
id?: LiteralUnion<keyof TData & string>;
|
|
360
|
+
mantineColumnActionsButtonProps?: ((props: {
|
|
361
|
+
column: MVT_Column<TData, TValue>;
|
|
362
|
+
table: MVT_TableInstance<TData>;
|
|
363
|
+
}) => HTMLPropsRef<HTMLButtonElement> & Partial<ActionIconProps>) | (HTMLPropsRef<HTMLButtonElement> & Partial<ActionIconProps>);
|
|
364
|
+
mantineColumnDragHandleProps?: ((props: {
|
|
365
|
+
column: MVT_Column<TData, TValue>;
|
|
366
|
+
table: MVT_TableInstance<TData>;
|
|
367
|
+
}) => HTMLPropsRef<HTMLButtonElement> & Partial<ActionIconProps>) | (HTMLPropsRef<HTMLButtonElement> & Partial<ActionIconProps>);
|
|
368
|
+
mantineCopyButtonProps?: ((props: {
|
|
369
|
+
cell: MVT_Cell<TData, TValue>;
|
|
370
|
+
column: MVT_Column<TData, TValue>;
|
|
371
|
+
row: MVT_Row<TData>;
|
|
372
|
+
table: MVT_TableInstance<TData>;
|
|
373
|
+
}) => HTMLPropsRef<HTMLButtonElement> & Partial<UnstyledButtonProps>) | (HTMLPropsRef<HTMLButtonElement> & Partial<UnstyledButtonProps>);
|
|
374
|
+
mantineEditSelectProps?: ((props: {
|
|
375
|
+
cell: MVT_Cell<TData, TValue>;
|
|
376
|
+
column: MVT_Column<TData, TValue>;
|
|
377
|
+
row: MVT_Row<TData>;
|
|
378
|
+
table: MVT_TableInstance<TData>;
|
|
379
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<SelectProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<SelectProps>);
|
|
380
|
+
mantineEditTextInputProps?: ((props: {
|
|
381
|
+
cell: MVT_Cell<TData, TValue>;
|
|
382
|
+
column: MVT_Column<TData, TValue>;
|
|
383
|
+
row: MVT_Row<TData>;
|
|
384
|
+
table: MVT_TableInstance<TData>;
|
|
385
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<TextInputProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<TextInputProps>);
|
|
386
|
+
mantineFilterAutocompleteProps?: ((props: {
|
|
387
|
+
column: MVT_Column<TData, TValue>;
|
|
388
|
+
rangeFilterIndex?: number;
|
|
389
|
+
table: MVT_TableInstance<TData>;
|
|
390
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<AutocompleteProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<AutocompleteProps>);
|
|
391
|
+
mantineFilterCheckboxProps?: ((props: {
|
|
392
|
+
column: MVT_Column<TData, TValue>;
|
|
393
|
+
table: MVT_TableInstance<TData>;
|
|
394
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<CheckboxProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<CheckboxProps>);
|
|
395
|
+
mantineFilterDateInputProps?: ((props: {
|
|
396
|
+
column: MVT_Column<TData, TValue>;
|
|
397
|
+
rangeFilterIndex?: number;
|
|
398
|
+
table: MVT_TableInstance<TData>;
|
|
399
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<DateInputProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<DateInputProps>);
|
|
400
|
+
mantineFilterMultiSelectProps?: ((props: {
|
|
401
|
+
column: MVT_Column<TData, TValue>;
|
|
402
|
+
rangeFilterIndex?: number;
|
|
403
|
+
table: MVT_TableInstance<TData>;
|
|
404
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<MultiSelectProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<MultiSelectProps>);
|
|
405
|
+
mantineFilterRangeSliderProps?: ((props: {
|
|
406
|
+
column: MVT_Column<TData, TValue>;
|
|
407
|
+
rangeFilterIndex?: number;
|
|
408
|
+
table: MVT_TableInstance<TData>;
|
|
409
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<RangeSliderProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<RangeSliderProps>);
|
|
410
|
+
mantineFilterSelectProps?: ((props: {
|
|
411
|
+
column: MVT_Column<TData, TValue>;
|
|
412
|
+
rangeFilterIndex?: number;
|
|
413
|
+
table: MVT_TableInstance<TData>;
|
|
414
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<SelectProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<SelectProps>);
|
|
415
|
+
mantineFilterTextInputProps?: ((props: {
|
|
416
|
+
column: MVT_Column<TData, TValue>;
|
|
417
|
+
rangeFilterIndex?: number;
|
|
418
|
+
table: MVT_TableInstance<TData>;
|
|
419
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<TextInputProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<TextInputProps>);
|
|
420
|
+
mantineTableBodyCellProps?: ((props: {
|
|
421
|
+
cell: MVT_Cell<TData, TValue>;
|
|
422
|
+
column: MVT_Column<TData, TValue>;
|
|
423
|
+
renderedRowIndex?: number;
|
|
424
|
+
row: MVT_Row<TData>;
|
|
425
|
+
table: MVT_TableInstance<TData>;
|
|
426
|
+
}) => HTMLPropsRef<HTMLTableCellElement> & TableTdProps) | (HTMLPropsRef<HTMLTableCellElement> & TableTdProps);
|
|
427
|
+
mantineTableFooterCellProps?: ((props: {
|
|
428
|
+
column: MVT_Column<TData, TValue>;
|
|
429
|
+
table: MVT_TableInstance<TData>;
|
|
430
|
+
}) => HTMLPropsRef<HTMLTableCellElement> & TableThProps) | (HTMLPropsRef<HTMLTableCellElement> & TableThProps);
|
|
431
|
+
mantineTableHeadCellProps?: ((props: {
|
|
432
|
+
column: MVT_Column<TData, TValue>;
|
|
433
|
+
table: MVT_TableInstance<TData>;
|
|
434
|
+
}) => HTMLPropsRef<HTMLTableCellElement> & TableThProps) | (HTMLPropsRef<HTMLTableCellElement> & TableThProps);
|
|
435
|
+
PlaceholderCell?: (props: {
|
|
436
|
+
cell: MVT_Cell<TData, TValue>;
|
|
437
|
+
column: MVT_Column<TData, TValue>;
|
|
438
|
+
row: MVT_Row<TData>;
|
|
439
|
+
table: MVT_TableInstance<TData>;
|
|
440
|
+
}) => MVT_Node;
|
|
441
|
+
renderColumnActionsMenuItems?: (props: {
|
|
442
|
+
column: MVT_Column<TData, TValue>;
|
|
443
|
+
internalColumnMenuItems: MVT_Node;
|
|
444
|
+
table: MVT_TableInstance<TData>;
|
|
445
|
+
}) => MVT_Node;
|
|
446
|
+
renderColumnFilterModeMenuItems?: (props: {
|
|
447
|
+
column: MVT_Column<TData, TValue>;
|
|
448
|
+
internalFilterOptions: MVT_InternalFilterOption[];
|
|
449
|
+
onSelectFilterMode: (filterMode: MVT_FilterOption) => void;
|
|
450
|
+
table: MVT_TableInstance<TData>;
|
|
451
|
+
}) => MVT_Node;
|
|
452
|
+
sortingFn?: MVT_SortingFn<TData>;
|
|
453
|
+
visibleInShowHideMenu?: boolean;
|
|
454
|
+
} & Omit<ColumnDef<TData, TValue>, 'accessorKey' | 'aggregatedCell' | 'aggregationFn' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'>;
|
|
455
|
+
export type MVT_DisplayColumnDef<TData extends MVT_RowData, TValue = unknown> = Omit<MVT_ColumnDef<TData, TValue>, 'accessorFn' | 'accessorKey'>;
|
|
456
|
+
export type MVT_GroupColumnDef<TData extends MVT_RowData> = {
|
|
457
|
+
columns: MVT_ColumnDef<TData>[];
|
|
458
|
+
} & MVT_DisplayColumnDef<TData, any>;
|
|
459
|
+
export type MVT_DefinedColumnDef<TData extends MVT_RowData, TValue = unknown> = {
|
|
460
|
+
_filterFn: MVT_FilterOption;
|
|
461
|
+
defaultDisplayColumn: Partial<MVT_ColumnDef<TData, TValue>>;
|
|
462
|
+
id: string;
|
|
463
|
+
} & Omit<MVT_ColumnDef<TData, TValue>, 'defaultDisplayColumn' | 'id'>;
|
|
464
|
+
export type MVT_Column<TData extends MVT_RowData, TValue = unknown> = {
|
|
465
|
+
columnDef: MVT_DefinedColumnDef<TData, TValue>;
|
|
466
|
+
columns?: MVT_Column<TData>[];
|
|
467
|
+
filterFn?: MVT_FilterFn<TData>;
|
|
468
|
+
footer: string;
|
|
469
|
+
header: string;
|
|
470
|
+
} & Omit<Column<TData, MVT_CellValue>, 'columnDef' | 'columns' | 'filterFn' | 'footer' | 'header'>;
|
|
471
|
+
export type MVT_Header<TData extends MVT_RowData, TValue = unknown> = {
|
|
472
|
+
column: MVT_Column<TData, TValue>;
|
|
473
|
+
} & Omit<Header<TData, MVT_CellValue>, 'column'>;
|
|
474
|
+
export type MVT_HeaderGroup<TData extends MVT_RowData> = {
|
|
475
|
+
headers: MVT_Header<TData>[];
|
|
476
|
+
} & Omit<HeaderGroup<TData>, 'headers'>;
|
|
477
|
+
export type MVT_Row<TData extends MVT_RowData> = {
|
|
478
|
+
_valuesCache: Record<LiteralUnion<DeepKeys<TData> & string>, any>;
|
|
479
|
+
getAllCells: () => MVT_Cell<TData>[];
|
|
480
|
+
getVisibleCells: () => MVT_Cell<TData>[];
|
|
481
|
+
subRows?: MVT_Row<TData>[];
|
|
482
|
+
} & Omit<Row<TData>, '_valuesCache' | 'getAllCells' | 'getVisibleCells' | 'subRows'>;
|
|
483
|
+
export type MVT_Cell<TData extends MVT_RowData, TValue = unknown> = {
|
|
484
|
+
column: MVT_Column<TData, TValue>;
|
|
485
|
+
row: MVT_Row<TData>;
|
|
486
|
+
} & Omit<Cell<TData, TValue>, 'column' | 'row'>;
|
|
487
|
+
export type MVT_AggregationOption = keyof typeof MVT_AggregationFns & string;
|
|
488
|
+
export type MVT_AggregationFn<TData extends MVT_RowData> = AggregationFn<TData> | MVT_AggregationOption;
|
|
489
|
+
export type MVT_SortingOption = LiteralUnion<keyof typeof MVT_SortingFns & string>;
|
|
490
|
+
export type MVT_SortingFn<TData extends MVT_RowData> = MVT_SortingOption | SortingFn<TData>;
|
|
491
|
+
export type MVT_FilterOption = LiteralUnion<keyof typeof MVT_FilterFns & string>;
|
|
492
|
+
export type MVT_FilterFn<TData extends MVT_RowData> = FilterFn<TData> | MVT_FilterOption;
|
|
493
|
+
export type MVT_FilterTooltipValueFn<TValue = any> = (value: TValue) => string;
|
|
494
|
+
export type MVT_InternalFilterOption = {
|
|
495
|
+
divider: boolean;
|
|
496
|
+
label: string;
|
|
497
|
+
option: string;
|
|
498
|
+
symbol: string;
|
|
499
|
+
};
|
|
500
|
+
export type MVT_DisplayColumnIds = 'mvt-row-actions' | 'mvt-row-drag' | 'mvt-row-expand' | 'mvt-row-numbers' | 'mvt-row-pin' | 'mvt-row-select' | 'mvt-row-spacer';
|
|
501
|
+
export type MVT_CreateTableFeature<TData extends MVT_RowData, TFeature = any> = (table: MVT_TableInstance<TData>) => TFeature;
|
|
502
|
+
/**
|
|
503
|
+
* `columns` and `data` props are the only required props, but there are over 150 other optional props.
|
|
504
|
+
*
|
|
505
|
+
*/
|
|
506
|
+
export type MVT_TableOptions<TData extends MVT_RowData> = {
|
|
507
|
+
columnFilterDisplayMode?: 'custom' | 'popover' | 'subheader';
|
|
508
|
+
columnFilterModeOptions?: Array<LiteralUnion<MVT_FilterOption & string>> | null;
|
|
509
|
+
/**
|
|
510
|
+
* The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` prop.
|
|
511
|
+
*
|
|
512
|
+
*/
|
|
513
|
+
columns: MVT_ColumnDef<TData>[];
|
|
514
|
+
columnVirtualizerInstanceRef?: Ref<null | Virtualizer<HTMLDivElement, HTMLTableCellElement>>;
|
|
515
|
+
columnVirtualizerOptions?: ((props: {
|
|
516
|
+
table: MVT_TableInstance<TData>;
|
|
517
|
+
}) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>) | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>;
|
|
518
|
+
createDisplayMode?: 'custom' | 'modal' | 'row';
|
|
519
|
+
/**
|
|
520
|
+
* Pass your data as an array of objects. Objects can theoretically be any shape, but it's best to keep them consistent.
|
|
521
|
+
*
|
|
522
|
+
*/
|
|
523
|
+
data: TData[];
|
|
524
|
+
/**
|
|
525
|
+
* 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.
|
|
526
|
+
*/
|
|
527
|
+
defaultColumn?: Partial<MVT_ColumnDef<TData>>;
|
|
528
|
+
/**
|
|
529
|
+
* Change the default options for display columns.
|
|
530
|
+
*/
|
|
531
|
+
defaultDisplayColumn?: Partial<MVT_DisplayColumnDef<TData>>;
|
|
532
|
+
displayColumnDefOptions?: Partial<{
|
|
533
|
+
[key in MVT_DisplayColumnIds]: Partial<MVT_DisplayColumnDef<TData>>;
|
|
534
|
+
}>;
|
|
535
|
+
editDisplayMode?: 'cell' | 'custom' | 'modal' | 'row' | 'table';
|
|
536
|
+
enableBatchRowSelection?: boolean;
|
|
537
|
+
enableBottomToolbar?: boolean;
|
|
538
|
+
enableClickToCopy?: ((cell: MVT_Cell<TData>) => boolean) | boolean;
|
|
539
|
+
enableColumnActions?: boolean;
|
|
540
|
+
enableColumnDragging?: boolean;
|
|
541
|
+
enableColumnFilterModes?: boolean;
|
|
542
|
+
enableColumnOrdering?: boolean;
|
|
543
|
+
enableColumnVirtualization?: boolean;
|
|
544
|
+
enableDensityToggle?: boolean;
|
|
545
|
+
enableEditing?: ((row: MVT_Row<TData>) => boolean) | boolean;
|
|
546
|
+
enableExpandAll?: boolean;
|
|
547
|
+
enableFacetedValues?: boolean;
|
|
548
|
+
enableFilterMatchHighlighting?: boolean;
|
|
549
|
+
enableFullScreenToggle?: boolean;
|
|
550
|
+
enableGlobalFilterModes?: boolean;
|
|
551
|
+
enableGlobalFilterRankedResults?: boolean;
|
|
552
|
+
enableHeaderActionsHoverReveal?: boolean;
|
|
553
|
+
enablePagination?: boolean;
|
|
554
|
+
enableRowActions?: boolean;
|
|
555
|
+
enableRowDragging?: boolean;
|
|
556
|
+
enableRowNumbers?: boolean;
|
|
557
|
+
enableRowOrdering?: boolean;
|
|
558
|
+
enableRowSelection?: ((row: MVT_Row<TData>) => boolean) | boolean;
|
|
559
|
+
enableRowVirtualization?: boolean;
|
|
560
|
+
enableSelectAll?: boolean;
|
|
561
|
+
enableStickyFooter?: boolean;
|
|
562
|
+
enableStickyHeader?: boolean;
|
|
563
|
+
enableTableFooter?: boolean;
|
|
564
|
+
enableTableHead?: boolean;
|
|
565
|
+
enableToolbarInternalActions?: boolean;
|
|
566
|
+
enableTopToolbar?: boolean;
|
|
567
|
+
expandRowsFn?: (dataRow: TData) => TData[];
|
|
568
|
+
getRowId?: (originalRow: TData, index: number, parentRow: MVT_Row<TData>) => string | undefined;
|
|
569
|
+
globalFilterFn?: MVT_FilterOption;
|
|
570
|
+
globalFilterModeOptions?: MVT_FilterOption[] | null;
|
|
571
|
+
icons?: Partial<MVT_Icons>;
|
|
572
|
+
initialState?: Partial<MVT_TableState<TData>>;
|
|
573
|
+
/**
|
|
574
|
+
* 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
|
|
575
|
+
*/
|
|
576
|
+
layoutMode?: 'grid' | 'grid-no-grow' | 'semantic';
|
|
577
|
+
/**
|
|
578
|
+
* Pass in either a locale imported from `@mantine-vue/table/locales/*` or a custom locale object.
|
|
579
|
+
*
|
|
580
|
+
*/
|
|
581
|
+
localization?: Partial<MVT_Localization>;
|
|
582
|
+
mantineBottomToolbarProps?: ((props: {
|
|
583
|
+
table: MVT_TableInstance<TData>;
|
|
584
|
+
}) => BoxProps & HTMLPropsRef<HTMLDivElement>) | (BoxProps & HTMLPropsRef<HTMLDivElement>);
|
|
585
|
+
mantineColumnActionsButtonProps?: ((props: {
|
|
586
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
587
|
+
table: MVT_TableInstance<TData>;
|
|
588
|
+
}) => HTMLPropsRef<HTMLButtonElement> & Partial<ActionIconProps>) | (HTMLPropsRef<HTMLButtonElement> & Partial<ActionIconProps>);
|
|
589
|
+
mantineColumnDragHandleProps?: ((props: {
|
|
590
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
591
|
+
table: MVT_TableInstance<TData>;
|
|
592
|
+
}) => HTMLPropsRef<HTMLButtonElement> & Partial<ActionIconProps>) | (HTMLPropsRef<HTMLButtonElement> & Partial<ActionIconProps>);
|
|
593
|
+
mantineCopyButtonProps?: ((props: {
|
|
594
|
+
cell: MVT_Cell<TData, MVT_CellValue>;
|
|
595
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
596
|
+
row: MVT_Row<TData>;
|
|
597
|
+
table: MVT_TableInstance<TData>;
|
|
598
|
+
}) => HTMLPropsRef<HTMLButtonElement> & Partial<UnstyledButtonProps>) | (HTMLPropsRef<HTMLButtonElement> & Partial<UnstyledButtonProps>);
|
|
599
|
+
mantineCreateRowModalProps?: ((props: {
|
|
600
|
+
row: MVT_Row<TData>;
|
|
601
|
+
table: MVT_TableInstance<TData>;
|
|
602
|
+
}) => HTMLPropsRef<HTMLDivElement> & Partial<ModalProps>) | (HTMLPropsRef<HTMLDivElement> & Partial<ModalProps>);
|
|
603
|
+
mantineDetailPanelProps?: ((props: {
|
|
604
|
+
row: MVT_Row<TData>;
|
|
605
|
+
table: MVT_TableInstance<TData>;
|
|
606
|
+
}) => BoxProps & HTMLPropsRef<HTMLTableCellElement>) | (BoxProps & HTMLPropsRef<HTMLTableCellElement>);
|
|
607
|
+
mantineEditRowModalProps?: ((props: {
|
|
608
|
+
row: MVT_Row<TData>;
|
|
609
|
+
table: MVT_TableInstance<TData>;
|
|
610
|
+
}) => HTMLPropsRef<HTMLDivElement> & Partial<ModalProps>) | (HTMLPropsRef<HTMLDivElement> & Partial<ModalProps>);
|
|
611
|
+
mantineEditSelectProps?: ((props: {
|
|
612
|
+
cell: MVT_Cell<TData, MVT_CellValue>;
|
|
613
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
614
|
+
row: MVT_Row<TData>;
|
|
615
|
+
table: MVT_TableInstance<TData>;
|
|
616
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<SelectProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<SelectProps>);
|
|
617
|
+
mantineEditTextInputProps?: ((props: {
|
|
618
|
+
cell: MVT_Cell<TData, MVT_CellValue>;
|
|
619
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
620
|
+
row: MVT_Row<TData>;
|
|
621
|
+
table: MVT_TableInstance<TData>;
|
|
622
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<TextInputProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<TextInputProps>);
|
|
623
|
+
mantineExpandAllButtonProps?: ((props: {
|
|
624
|
+
table: MVT_TableInstance<TData>;
|
|
625
|
+
}) => HTMLPropsRef<HTMLButtonElement> & Partial<ActionIconProps>) | (HTMLPropsRef<HTMLButtonElement> & Partial<ActionIconProps>);
|
|
626
|
+
mantineExpandButtonProps?: ((props: {
|
|
627
|
+
renderedRowIndex?: number;
|
|
628
|
+
row: MVT_Row<TData>;
|
|
629
|
+
table: MVT_TableInstance<TData>;
|
|
630
|
+
}) => HTMLPropsRef<HTMLButtonElement> & Partial<ActionIconProps>) | (HTMLPropsRef<HTMLButtonElement> & Partial<ActionIconProps>);
|
|
631
|
+
mantineFilterAutocompleteProps?: ((props: {
|
|
632
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
633
|
+
rangeFilterIndex?: number;
|
|
634
|
+
table: MVT_TableInstance<TData>;
|
|
635
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<AutocompleteProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<AutocompleteProps>);
|
|
636
|
+
mantineFilterCheckboxProps?: ((props: {
|
|
637
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
638
|
+
table: MVT_TableInstance<TData>;
|
|
639
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<CheckboxProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<CheckboxProps>);
|
|
640
|
+
mantineFilterDateInputProps?: ((props: {
|
|
641
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
642
|
+
rangeFilterIndex?: number;
|
|
643
|
+
table: MVT_TableInstance<TData>;
|
|
644
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<DateInputProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<DateInputProps>);
|
|
645
|
+
mantineFilterMultiSelectProps?: ((props: {
|
|
646
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
647
|
+
rangeFilterIndex?: number;
|
|
648
|
+
table: MVT_TableInstance<TData>;
|
|
649
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<MultiSelectProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<MultiSelectProps>);
|
|
650
|
+
mantineFilterRangeSliderProps?: ((props: {
|
|
651
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
652
|
+
rangeFilterIndex?: number;
|
|
653
|
+
table: MVT_TableInstance<TData>;
|
|
654
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<RangeSliderProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<RangeSliderProps>);
|
|
655
|
+
mantineFilterSelectProps?: ((props: {
|
|
656
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
657
|
+
rangeFilterIndex?: number;
|
|
658
|
+
table: MVT_TableInstance<TData>;
|
|
659
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<SelectProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<SelectProps>);
|
|
660
|
+
mantineFilterTextInputProps?: ((props: {
|
|
661
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
662
|
+
rangeFilterIndex?: number;
|
|
663
|
+
table: MVT_TableInstance<TData>;
|
|
664
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<TextInputProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<TextInputProps>);
|
|
665
|
+
mantineHighlightProps?: ((props: {
|
|
666
|
+
cell: MVT_Cell<TData, MVT_CellValue>;
|
|
667
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
668
|
+
row: MVT_Row<TData>;
|
|
669
|
+
table: MVT_TableInstance<TData>;
|
|
670
|
+
}) => HTMLPropsRef<HTMLSpanElement> & Partial<HighlightProps>) | (HTMLPropsRef<HTMLSpanElement> & Partial<HighlightProps>);
|
|
671
|
+
mantineLoadingOverlayProps?: ((props: {
|
|
672
|
+
table: MVT_TableInstance<TData>;
|
|
673
|
+
}) => HTMLPropsRef<HTMLDivElement> & Partial<LoadingOverlayProps>) | (HTMLPropsRef<HTMLDivElement> & Partial<LoadingOverlayProps>);
|
|
674
|
+
mantinePaginationProps?: ((props: {
|
|
675
|
+
table: MVT_TableInstance<TData>;
|
|
676
|
+
}) => Partial<HTMLPropsRef<HTMLDivElement> & MVT_PaginationProps>) | Partial<HTMLPropsRef<HTMLDivElement> & MVT_PaginationProps>;
|
|
677
|
+
mantinePaperProps?: ((props: {
|
|
678
|
+
table: MVT_TableInstance<TData>;
|
|
679
|
+
}) => HTMLPropsRef<HTMLDivElement> & PaperProps) | (HTMLPropsRef<HTMLDivElement> & PaperProps);
|
|
680
|
+
mantineProgressProps?: ((props: {
|
|
681
|
+
isTopToolbar: boolean;
|
|
682
|
+
table: MVT_TableInstance<TData>;
|
|
683
|
+
}) => HTMLPropsRef<HTMLDivElement> & ProgressProps) | (HTMLPropsRef<HTMLDivElement> & ProgressProps);
|
|
684
|
+
mantineRowDragHandleProps?: ((props: {
|
|
685
|
+
row: MVT_Row<TData>;
|
|
686
|
+
table: MVT_TableInstance<TData>;
|
|
687
|
+
}) => HTMLPropsRef<HTMLButtonElement> & Partial<ActionIconProps>) | (HTMLPropsRef<HTMLButtonElement> & Partial<ActionIconProps>);
|
|
688
|
+
mantineSearchTextInputProps?: ((props: {
|
|
689
|
+
table: MVT_TableInstance<TData>;
|
|
690
|
+
}) => HTMLPropsRef<HTMLInputElement> & Partial<TextInputProps>) | (HTMLPropsRef<HTMLInputElement> & Partial<TextInputProps>);
|
|
691
|
+
mantineSelectAllCheckboxProps?: ((CheckboxProps | RadioProps | SwitchProps) & HTMLPropsRef<HTMLInputElement>) | ((props: {
|
|
692
|
+
table: MVT_TableInstance<TData>;
|
|
693
|
+
}) => (CheckboxProps | RadioProps | SwitchProps) & HTMLPropsRef<HTMLInputElement>);
|
|
694
|
+
mantineSelectCheckboxProps?: ((CheckboxProps | RadioProps | SwitchProps) & HTMLPropsRef<HTMLInputElement>) | ((props: {
|
|
695
|
+
renderedRowIndex?: number;
|
|
696
|
+
row: MVT_Row<TData>;
|
|
697
|
+
table: MVT_TableInstance<TData>;
|
|
698
|
+
}) => (CheckboxProps | RadioProps | SwitchProps) & HTMLPropsRef<HTMLInputElement>);
|
|
699
|
+
mantineSkeletonProps?: ((props: {
|
|
700
|
+
cell: MVT_Cell<TData, MVT_CellValue>;
|
|
701
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
702
|
+
row: MVT_Row<TData>;
|
|
703
|
+
table: MVT_TableInstance<TData>;
|
|
704
|
+
}) => HTMLPropsRef<HTMLDivElement> & SkeletonProps) | (HTMLPropsRef<HTMLDivElement> & SkeletonProps);
|
|
705
|
+
mantineTableBodyCellProps?: ((props: {
|
|
706
|
+
cell: MVT_Cell<TData, MVT_CellValue>;
|
|
707
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
708
|
+
renderedColumnIndex?: number;
|
|
709
|
+
renderedRowIndex?: number;
|
|
710
|
+
row: MVT_Row<TData>;
|
|
711
|
+
table: MVT_TableInstance<TData>;
|
|
712
|
+
}) => HTMLPropsRef<HTMLTableCellElement> & TableTdProps) | (HTMLPropsRef<HTMLTableCellElement> & TableTdProps);
|
|
713
|
+
mantineTableBodyProps?: ((props: {
|
|
714
|
+
table: MVT_TableInstance<TData>;
|
|
715
|
+
}) => HTMLPropsRef<HTMLTableSectionElement> & TableTbodyProps) | (HTMLPropsRef<HTMLTableSectionElement> & TableTbodyProps);
|
|
716
|
+
mantineTableBodyRowProps?: ((props: {
|
|
717
|
+
isDetailPanel?: boolean;
|
|
718
|
+
renderedRowIndex?: number;
|
|
719
|
+
row: MVT_Row<TData>;
|
|
720
|
+
table: MVT_TableInstance<TData>;
|
|
721
|
+
}) => HTMLPropsRef<HTMLTableRowElement> & TableTrProps) | (HTMLPropsRef<HTMLTableRowElement> & TableTrProps);
|
|
722
|
+
mantineTableContainerProps?: ((props: {
|
|
723
|
+
table: MVT_TableInstance<TData>;
|
|
724
|
+
}) => BoxProps & HTMLPropsRef<HTMLDivElement>) | (BoxProps & HTMLPropsRef<HTMLDivElement>);
|
|
725
|
+
mantineTableFooterCellProps?: ((props: {
|
|
726
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
727
|
+
table: MVT_TableInstance<TData>;
|
|
728
|
+
}) => HTMLPropsRef<HTMLTableCellElement> & TableThProps) | (HTMLPropsRef<HTMLTableCellElement> & TableThProps);
|
|
729
|
+
mantineTableFooterProps?: ((props: {
|
|
730
|
+
table: MVT_TableInstance<TData>;
|
|
731
|
+
}) => HTMLPropsRef<HTMLTableSectionElement> & TableTfootProps) | (HTMLPropsRef<HTMLTableSectionElement> & TableTfootProps);
|
|
732
|
+
mantineTableFooterRowProps?: ((props: {
|
|
733
|
+
footerGroup: MVT_HeaderGroup<TData>;
|
|
734
|
+
table: MVT_TableInstance<TData>;
|
|
735
|
+
}) => HTMLPropsRef<HTMLTableRowElement> & TableTrProps) | (HTMLPropsRef<HTMLTableRowElement> & TableTrProps);
|
|
736
|
+
mantineTableHeadCellProps?: ((props: {
|
|
737
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
738
|
+
table: MVT_TableInstance<TData>;
|
|
739
|
+
}) => HTMLPropsRef<HTMLTableCellElement> & TableThProps) | (HTMLPropsRef<HTMLTableCellElement> & TableThProps);
|
|
740
|
+
mantineTableHeadProps?: ((props: {
|
|
741
|
+
table: MVT_TableInstance<TData>;
|
|
742
|
+
}) => HTMLPropsRef<HTMLTableSectionElement> & TableTheadProps) | (HTMLPropsRef<HTMLTableSectionElement> & TableTheadProps);
|
|
743
|
+
mantineTableHeadRowProps?: ((props: {
|
|
744
|
+
headerGroup: MVT_HeaderGroup<TData>;
|
|
745
|
+
table: MVT_TableInstance<TData>;
|
|
746
|
+
}) => HTMLPropsRef<HTMLTableRowElement> & TableTrProps) | (HTMLPropsRef<HTMLTableRowElement> & TableTrProps);
|
|
747
|
+
mantineTableProps?: ((props: {
|
|
748
|
+
table: MVT_TableInstance<TData>;
|
|
749
|
+
}) => HTMLPropsRef<HTMLTableElement> & TableProps) | (HTMLPropsRef<HTMLTableElement> & TableProps);
|
|
750
|
+
mantineToolbarAlertBannerBadgeProps?: ((props: {
|
|
751
|
+
table: MVT_TableInstance<TData>;
|
|
752
|
+
}) => HTMLPropsRef<HTMLDivElement> & Partial<BadgeProps>) | (HTMLPropsRef<HTMLDivElement> & Partial<BadgeProps>);
|
|
753
|
+
mantineToolbarAlertBannerProps?: ((props: {
|
|
754
|
+
table: MVT_TableInstance<TData>;
|
|
755
|
+
}) => HTMLPropsRef<HTMLDivElement> & Partial<AlertProps>) | (HTMLPropsRef<HTMLDivElement> & Partial<AlertProps>);
|
|
756
|
+
mantineTopToolbarProps?: ((props: {
|
|
757
|
+
table: MVT_TableInstance<TData>;
|
|
758
|
+
}) => BoxProps & HTMLPropsRef<HTMLDivElement>) | (BoxProps & HTMLPropsRef<HTMLDivElement>);
|
|
759
|
+
/**
|
|
760
|
+
* Memoize cells, rows, or the entire table body to potentially improve render performance.
|
|
761
|
+
*
|
|
762
|
+
*/
|
|
763
|
+
memoMode?: 'cells' | 'rows' | 'table-body';
|
|
764
|
+
onColumnFilterFnsChange?: OnChangeFn<{
|
|
765
|
+
[key: string]: MVT_FilterOption;
|
|
766
|
+
}>;
|
|
767
|
+
onCreatingRowCancel?: (props: {
|
|
768
|
+
row: MVT_Row<TData>;
|
|
769
|
+
table: MVT_TableInstance<TData>;
|
|
770
|
+
}) => void;
|
|
771
|
+
onCreatingRowChange?: OnChangeFn<MVT_Row<TData> | null>;
|
|
772
|
+
onCreatingRowSave?: (props: {
|
|
773
|
+
exitCreatingMode: () => void;
|
|
774
|
+
row: MVT_Row<TData>;
|
|
775
|
+
table: MVT_TableInstance<TData>;
|
|
776
|
+
values: Record<LiteralUnion<DeepKeys<TData> & string>, any>;
|
|
777
|
+
}) => void;
|
|
778
|
+
onDensityChange?: OnChangeFn<MVT_DensityState>;
|
|
779
|
+
onDraggingColumnChange?: OnChangeFn<MVT_Column<TData> | null>;
|
|
780
|
+
onDraggingRowChange?: OnChangeFn<MVT_Row<TData> | null>;
|
|
781
|
+
onEditingCellChange?: OnChangeFn<MVT_Cell<TData> | null>;
|
|
782
|
+
onEditingRowCancel?: (props: {
|
|
783
|
+
row: MVT_Row<TData>;
|
|
784
|
+
table: MVT_TableInstance<TData>;
|
|
785
|
+
}) => void;
|
|
786
|
+
onEditingRowChange?: OnChangeFn<MVT_Row<TData> | null>;
|
|
787
|
+
onEditingRowSave?: (props: {
|
|
788
|
+
exitEditingMode: () => void;
|
|
789
|
+
row: MVT_Row<TData>;
|
|
790
|
+
table: MVT_TableInstance<TData>;
|
|
791
|
+
values: Record<LiteralUnion<DeepKeys<TData> & string>, any>;
|
|
792
|
+
}) => Promise<void> | void;
|
|
793
|
+
onGlobalFilterFnChange?: OnChangeFn<MVT_FilterOption>;
|
|
794
|
+
onHoveredColumnChange?: OnChangeFn<null | Partial<MVT_Column<TData>>>;
|
|
795
|
+
onHoveredRowChange?: OnChangeFn<null | Partial<MVT_Row<TData>>>;
|
|
796
|
+
onIsFullScreenChange?: OnChangeFn<boolean>;
|
|
797
|
+
onShowAlertBannerChange?: OnChangeFn<boolean>;
|
|
798
|
+
onShowColumnFiltersChange?: OnChangeFn<boolean>;
|
|
799
|
+
onShowGlobalFilterChange?: OnChangeFn<boolean>;
|
|
800
|
+
onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
|
|
801
|
+
paginationDisplayMode?: 'custom' | 'default' | 'pages';
|
|
802
|
+
positionActionsColumn?: 'first' | 'last';
|
|
803
|
+
positionCreatingRow?: 'bottom' | 'top' | number;
|
|
804
|
+
positionExpandColumn?: 'first' | 'last';
|
|
805
|
+
positionGlobalFilter?: 'left' | 'none' | 'right';
|
|
806
|
+
positionPagination?: 'both' | 'bottom' | 'none' | 'top';
|
|
807
|
+
positionToolbarAlertBanner?: 'bottom' | 'head-overlay' | 'none' | 'top';
|
|
808
|
+
positionToolbarDropZone?: 'both' | 'bottom' | 'none' | 'top';
|
|
809
|
+
renderBottomToolbar?: ((props: {
|
|
810
|
+
table: MVT_TableInstance<TData>;
|
|
811
|
+
}) => MVT_Node) | MVT_Node;
|
|
812
|
+
renderBottomToolbarCustomActions?: (props: {
|
|
813
|
+
table: MVT_TableInstance<TData>;
|
|
814
|
+
}) => MVT_Node;
|
|
815
|
+
renderColumnActionsMenuItems?: (props: {
|
|
816
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
817
|
+
internalColumnMenuItems: MVT_Node;
|
|
818
|
+
table: MVT_TableInstance<TData>;
|
|
819
|
+
}) => MVT_Node;
|
|
820
|
+
renderColumnFilterModeMenuItems?: (props: {
|
|
821
|
+
column: MVT_Column<TData, MVT_CellValue>;
|
|
822
|
+
internalFilterOptions: MVT_InternalFilterOption[];
|
|
823
|
+
onSelectFilterMode: (filterMode: MVT_FilterOption) => void;
|
|
824
|
+
table: MVT_TableInstance<TData>;
|
|
825
|
+
}) => MVT_Node;
|
|
826
|
+
renderCreateRowModalContent?: (props: {
|
|
827
|
+
internalEditComponents: MVT_Node[];
|
|
828
|
+
row: MVT_Row<TData>;
|
|
829
|
+
table: MVT_TableInstance<TData>;
|
|
830
|
+
}) => MVT_Node;
|
|
831
|
+
renderDetailPanel?: (props: {
|
|
832
|
+
internalEditComponents: MVT_Node[];
|
|
833
|
+
row: MVT_Row<TData>;
|
|
834
|
+
table: MVT_TableInstance<TData>;
|
|
835
|
+
}) => MVT_Node;
|
|
836
|
+
renderEditRowModalContent?: (props: {
|
|
837
|
+
internalEditComponents: MVT_Node[];
|
|
838
|
+
row: MVT_Row<TData>;
|
|
839
|
+
table: MVT_TableInstance<TData>;
|
|
840
|
+
}) => MVT_Node;
|
|
841
|
+
renderEmptyRowsFallback?: (props: {
|
|
842
|
+
table: MVT_TableInstance<TData>;
|
|
843
|
+
}) => MVT_Node;
|
|
844
|
+
renderGlobalFilterModeMenuItems?: (props: {
|
|
845
|
+
internalFilterOptions: MVT_InternalFilterOption[];
|
|
846
|
+
onSelectFilterMode: (filterMode: MVT_FilterOption) => void;
|
|
847
|
+
table: MVT_TableInstance<TData>;
|
|
848
|
+
}) => MVT_Node;
|
|
849
|
+
renderRowActionMenuItems?: (props: {
|
|
850
|
+
renderedRowIndex?: number;
|
|
851
|
+
row: MVT_Row<TData>;
|
|
852
|
+
table: MVT_TableInstance<TData>;
|
|
853
|
+
}) => MVT_Node;
|
|
854
|
+
renderRowActions?: (props: {
|
|
855
|
+
cell: MVT_Cell<TData, MVT_CellValue>;
|
|
856
|
+
renderedRowIndex?: number;
|
|
857
|
+
row: MVT_Row<TData>;
|
|
858
|
+
table: MVT_TableInstance<TData>;
|
|
859
|
+
}) => MVT_Node;
|
|
860
|
+
renderToolbarAlertBannerContent?: (props: {
|
|
861
|
+
groupedAlert: MVT_Node | null;
|
|
862
|
+
selectedAlert: MVT_Node | null;
|
|
863
|
+
table: MVT_TableInstance<TData>;
|
|
864
|
+
}) => MVT_Node;
|
|
865
|
+
renderToolbarInternalActions?: (props: {
|
|
866
|
+
table: MVT_TableInstance<TData>;
|
|
867
|
+
}) => MVT_Node;
|
|
868
|
+
renderTopToolbar?: ((props: {
|
|
869
|
+
table: MVT_TableInstance<TData>;
|
|
870
|
+
}) => MVT_Node) | MVT_Node;
|
|
871
|
+
renderTopToolbarCustomActions?: (props: {
|
|
872
|
+
table: MVT_TableInstance<TData>;
|
|
873
|
+
}) => MVT_Node;
|
|
874
|
+
rowCount?: number;
|
|
875
|
+
rowNumberDisplayMode?: 'original' | 'static';
|
|
876
|
+
rowPinningDisplayMode?: 'bottom' | 'select-bottom' | 'select-sticky' | 'select-top' | 'sticky' | 'top' | 'top-and-bottom';
|
|
877
|
+
rowVirtualizerInstanceRef?: Ref<null | Virtualizer<HTMLDivElement, HTMLTableRowElement>>;
|
|
878
|
+
rowVirtualizerOptions?: ((props: {
|
|
879
|
+
table: MVT_TableInstance<TData>;
|
|
880
|
+
}) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>) | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>;
|
|
881
|
+
selectAllMode?: 'all' | 'page';
|
|
882
|
+
selectDisplayMode?: 'checkbox' | 'radio' | 'switch';
|
|
883
|
+
/**
|
|
884
|
+
* Manage state externally any way you want, then pass it back into MVT.
|
|
885
|
+
*/
|
|
886
|
+
state?: Partial<MVT_TableState<TData>>;
|
|
887
|
+
} & Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'getRowId' | 'globalFilterFn' | 'initialState' | 'onStateChange' | 'state'>;
|