@cutting/material-react-table 5.0.0-beta.2 → 5.1.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 +1 -4
- package/dist/index.d.ts +189 -524
- package/dist/index.js +329 -345
- package/dist/index.js.map +1 -1
- package/locales/ar/index.mjs +1 -2
- package/locales/az/index.mjs +1 -2
- package/locales/bg/index.mjs +1 -2
- package/locales/cs/index.mjs +1 -2
- package/locales/da/index.mjs +1 -2
- package/locales/de/index.mjs +1 -2
- package/locales/el/index.mjs +1 -2
- package/locales/en/index.mjs +1 -2
- package/locales/es/index.mjs +1 -2
- package/locales/et/index.mjs +1 -2
- package/locales/fa/index.mjs +1 -2
- package/locales/fi/index.mjs +1 -2
- package/locales/fr/index.mjs +1 -2
- package/locales/he/index.mjs +1 -2
- package/locales/hr/index.mjs +1 -2
- package/locales/hu/index.mjs +1 -2
- package/locales/hy/index.mjs +1 -2
- package/locales/id/index.mjs +1 -2
- package/locales/it/index.mjs +1 -2
- package/locales/ja/index.mjs +1 -2
- package/locales/ko/index.mjs +1 -2
- package/locales/nl/index.mjs +1 -2
- package/locales/no/index.mjs +1 -2
- package/locales/np/index.mjs +1 -2
- package/locales/pl/index.mjs +1 -2
- package/locales/pt/index.mjs +1 -2
- package/locales/pt-BR/index.mjs +1 -2
- package/locales/ro/index.mjs +1 -2
- package/locales/ru/index.mjs +1 -2
- package/locales/sk/index.mjs +1 -2
- package/locales/sr-Cyrl-RS/index.mjs +1 -2
- package/locales/sr-Latn-RS/index.mjs +1 -2
- package/locales/sv/index.mjs +1 -2
- package/locales/tr/index.mjs +1 -2
- package/locales/uk/index.mjs +1 -2
- package/locales/vi/index.mjs +1 -2
- package/locales/zh-Hans/index.mjs +1 -2
- package/locales/zh-Hant/index.mjs +1 -2
- package/package.json +32 -40
- package/src/MaterialReactTable.smoke.test.tsx +3 -9
- package/src/components/MaterialReactTable.tsx +13 -21
- package/src/components/body/MRT_TableBody.tsx +67 -82
- package/src/components/body/MRT_TableBodyCell.tsx +38 -80
- package/src/components/body/MRT_TableBodyCellValue.tsx +5 -14
- package/src/components/body/MRT_TableBodyRow.tsx +55 -102
- package/src/components/body/MRT_TableBodyRowGrabHandle.test.tsx +2 -6
- package/src/components/body/MRT_TableBodyRowGrabHandle.tsx +4 -9
- package/src/components/body/MRT_TableBodyRowPinButton.tsx +8 -14
- package/src/components/body/MRT_TableDetailPanel.test.tsx +3 -9
- package/src/components/body/MRT_TableDetailPanel.tsx +8 -14
- package/src/components/buttons/MRT_ColumnPinningButtons.test.tsx +6 -16
- package/src/components/buttons/MRT_ColumnPinningButtons.tsx +6 -12
- package/src/components/buttons/MRT_CopyButton.tsx +7 -15
- package/src/components/buttons/MRT_EditActionButtons.test.tsx +2 -6
- package/src/components/buttons/MRT_EditActionButtons.tsx +15 -37
- package/src/components/buttons/MRT_ExpandAllButton.tsx +8 -16
- package/src/components/buttons/MRT_ExpandButton.tsx +9 -21
- package/src/components/buttons/MRT_GrabHandleButton.tsx +6 -10
- package/src/components/buttons/MRT_RowPinButton.tsx +8 -23
- package/src/components/buttons/MRT_ShowHideColumnsButton.tsx +5 -18
- package/src/components/buttons/MRT_ToggleDensePaddingButton.test.tsx +4 -12
- package/src/components/buttons/MRT_ToggleDensePaddingButton.tsx +4 -11
- package/src/components/buttons/MRT_ToggleFiltersButton.test.tsx +4 -13
- package/src/components/buttons/MRT_ToggleFiltersButton.tsx +3 -5
- package/src/components/buttons/MRT_ToggleFullScreenButton.test.tsx +3 -11
- package/src/components/buttons/MRT_ToggleFullScreenButton.tsx +4 -9
- package/src/components/buttons/MRT_ToggleGlobalFilterButton.tsx +3 -5
- package/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx +7 -15
- package/src/components/footer/MRT_TableFooter.tsx +9 -16
- package/src/components/footer/MRT_TableFooterCell.tsx +9 -32
- package/src/components/footer/MRT_TableFooterRow.tsx +18 -32
- package/src/components/head/MRT_TableHead.tsx +8 -18
- package/src/components/head/MRT_TableHeadCell.tsx +46 -100
- package/src/components/head/MRT_TableHeadCellColumnActionsButton.tsx +10 -30
- package/src/components/head/MRT_TableHeadCellFilterContainer.tsx +4 -15
- package/src/components/head/MRT_TableHeadCellFilterLabel.tsx +20 -54
- package/src/components/head/MRT_TableHeadCellGrabHandle.test.tsx +5 -19
- package/src/components/head/MRT_TableHeadCellGrabHandle.tsx +9 -38
- package/src/components/head/MRT_TableHeadCellResizeHandle.test.tsx +3 -13
- package/src/components/head/MRT_TableHeadCellResizeHandle.tsx +10 -24
- package/src/components/head/MRT_TableHeadCellSortLabel.tsx +10 -26
- package/src/components/head/MRT_TableHeadRow.tsx +24 -36
- package/src/components/inputs/MRT_EditCellTextField.test.tsx +2 -9
- package/src/components/inputs/MRT_EditCellTextField.tsx +9 -28
- package/src/components/inputs/MRT_FilterCheckbox.tsx +9 -23
- package/src/components/inputs/MRT_FilterRangeFields.tsx +6 -15
- package/src/components/inputs/MRT_FilterRangeSlider.tsx +24 -32
- package/src/components/inputs/MRT_FilterTextField.test.tsx +72 -14
- package/src/components/inputs/MRT_FilterTextField.tsx +77 -138
- package/src/components/inputs/MRT_GlobalFilterTextField.tsx +10 -32
- package/src/components/inputs/MRT_SelectCheckbox.test.tsx +4 -11
- package/src/components/inputs/MRT_SelectCheckbox.tsx +17 -36
- package/src/components/menus/MRT_ActionMenuItem.tsx +6 -15
- package/src/components/menus/MRT_CellActionMenu.tsx +6 -9
- package/src/components/menus/MRT_ColumnActionMenu.tsx +22 -57
- package/src/components/menus/MRT_FilterOptionMenu.tsx +38 -65
- package/src/components/menus/MRT_RowActionMenu.tsx +33 -22
- package/src/components/menus/MRT_ShowHideColumnsMenu.tsx +29 -65
- package/src/components/menus/MRT_ShowHideColumnsMenuItems.test.tsx +43 -0
- package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx +14 -50
- package/src/components/modals/MRT_EditRowModal.test.tsx +5 -21
- package/src/components/modals/MRT_EditRowModal.tsx +8 -26
- package/src/components/table/MRT_Table.tsx +12 -20
- package/src/components/table/MRT_TableContainer.test.tsx +147 -0
- package/src/components/table/MRT_TableContainer.tsx +33 -37
- package/src/components/table/MRT_TableLoadingOverlay.tsx +3 -5
- package/src/components/table/MRT_TablePaper.tsx +7 -14
- package/src/components/toolbar/MRT_BottomToolbar.tsx +11 -23
- package/src/components/toolbar/MRT_LinearProgressBar.tsx +4 -11
- package/src/components/toolbar/MRT_TablePagination.tsx +33 -40
- package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx +21 -50
- package/src/components/toolbar/MRT_ToolbarDropZone.test.tsx +26 -10
- package/src/components/toolbar/MRT_ToolbarDropZone.tsx +23 -21
- package/src/components/toolbar/MRT_ToolbarInternalButtons.tsx +11 -21
- package/src/components/toolbar/MRT_TopToolbar.tsx +12 -28
- package/src/fns/aggregationFns.test.tsx +1 -3
- package/src/fns/filterFns.test.tsx +9 -37
- package/src/fns/filterFns.ts +73 -96
- package/src/fns/sortingFns.test.tsx +39 -0
- package/src/fns/sortingFns.ts +15 -15
- package/src/fns/tableFeatures.test.tsx +6 -29
- package/src/fns/tableFeatures.ts +5 -4
- package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx +2 -11
- package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx +2 -10
- package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx +8 -17
- package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx +3 -8
- package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx +2 -8
- package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx +3 -13
- package/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx +1 -5
- package/src/hooks/useMRT_ColumnVirtualizer.ts +28 -49
- package/src/hooks/useMRT_Effects.test.tsx +114 -0
- package/src/hooks/useMRT_Effects.ts +26 -27
- package/src/hooks/useMRT_RowVirtualizer.ts +18 -33
- package/src/hooks/useMRT_Rows.ts +3 -42
- package/src/hooks/useMRT_TableInstance.ts +63 -129
- package/src/hooks/useMRT_TableOptions.ts +15 -29
- package/src/hooks/useMaterialReactTable.ts +2 -7
- package/src/icons.ts +38 -1
- package/src/index.ts +0 -4
- package/src/locales/ar.ts +1 -2
- package/src/locales/az.ts +1 -2
- package/src/locales/bg.ts +1 -2
- package/src/locales/cs.ts +2 -4
- package/src/locales/da.ts +1 -2
- package/src/locales/de.ts +1 -2
- package/src/locales/el.ts +1 -2
- package/src/locales/en.ts +1 -2
- package/src/locales/es.ts +1 -2
- package/src/locales/et.ts +2 -4
- package/src/locales/fa.ts +1 -2
- package/src/locales/fi.ts +2 -4
- package/src/locales/fr.ts +1 -2
- package/src/locales/he.ts +1 -2
- package/src/locales/hr.ts +1 -2
- package/src/locales/hu.ts +1 -2
- package/src/locales/hy.ts +1 -2
- package/src/locales/id.ts +2 -4
- package/src/locales/it.ts +1 -2
- package/src/locales/ja.ts +1 -2
- package/src/locales/ko.ts +1 -2
- package/src/locales/nl.ts +1 -2
- package/src/locales/no.ts +2 -4
- package/src/locales/np.ts +2 -4
- package/src/locales/pl.ts +1 -2
- package/src/locales/pt-BR.ts +1 -2
- package/src/locales/pt.ts +1 -2
- package/src/locales/ro.ts +1 -2
- package/src/locales/ru.ts +1 -2
- package/src/locales/sk.ts +2 -4
- package/src/locales/sr-Cyrl-RS.ts +1 -2
- package/src/locales/sr-Latn-RS.ts +1 -2
- package/src/locales/sv.ts +1 -2
- package/src/locales/tr.ts +1 -2
- package/src/locales/uk.ts +1 -2
- package/src/locales/vi.ts +1 -2
- package/src/types.ts +156 -349
- package/src/utils/cell.utils.ts +30 -68
- package/src/utils/column.utils.ts +61 -49
- package/src/utils/displayColumn.utils.ts +16 -38
- package/src/utils/highlight.utils.ts +7 -11
- package/src/utils/row.utils.ts +40 -65
- package/src/utils/slotProps.utils.ts +1 -4
- package/src/utils/style.utils.ts +18 -46
- package/src/utils/tanstack.helpers.ts +10 -17
- package/src/utils/utils.ts +6 -10
- package/src/utils/virtualization.utils.ts +5 -9
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Alert, AlertTitle, Autocomplete, Badge, Box, Button, Checkbox, Chip, CircularProgress, Collapse, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Fade, FormControlLabel, FormHelperText, Grow, IconButton, InputAdornment, InputLabel, LinearProgress, ListItemIcon, Menu, MenuItem, Pagination, PaginationItem, Paper, Popover, Radio, Select, Skeleton, Slider, Stack, Switch, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TableRow, TableSortLabel, TextField, Tooltip, Typography, useMediaQuery } from "@mui/material";
|
|
2
2
|
import { Fragment, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
|
|
3
3
|
import { compareItems, rankItem, rankings } from "@tanstack/match-sorter-utils";
|
|
4
|
-
import { aggregationFns, cellSelectionFeature, cellSpanningFeature, columnFacetingFeature, columnFilteringFeature, columnGroupingFeature, columnOrderingFeature, columnPinningFeature, columnResizingFeature, columnSizingFeature, columnVisibilityFeature, constructRow, createExpandedRowModel, createFacetedMinMaxValues, createFacetedRowModel, createFacetedUniqueValues, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_arrIncludesAll, filterFn_arrIncludesSome, filterFn_equalsString, filterFn_equalsStringSensitive, filterFn_inNumberRange, filterFn_includesString, filterFn_includesStringSensitive, flexRender as flexRender$1, globalFilteringFeature, rowAggregationFeature, rowExpandingFeature, rowPaginationFeature, rowPinningFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures, useTable } from "@tanstack/react-table";
|
|
4
|
+
import { aggregationFns, cellSelectionFeature, cellSpanningFeature, columnFacetingFeature, columnFilteringFeature, columnGroupingFeature, columnOrderingFeature, columnPinningFeature, columnResizingFeature, columnSizingFeature, columnVisibilityFeature, constructRow, createExpandedRowModel, createFacetedMinMaxValues, createFacetedRowModel, createFacetedUniqueValues, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_arrIncludesAll, filterFn_arrIncludesSome, filterFn_equalsString, filterFn_equalsStringSensitive, filterFn_inNumberRange, filterFn_includesString, filterFn_includesStringSensitive, filterFn_weakEquals, flexRender as flexRender$1, globalFilteringFeature, rowAggregationFeature, rowExpandingFeature, rowPaginationFeature, rowPinningFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_alphanumericCaseSensitive, sortFn_basic, sortFn_datetime, sortFn_text, sortFn_textCaseSensitive, tableFeatures, useTable } from "@tanstack/react-table";
|
|
5
5
|
import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
|
|
6
6
|
import { alpha, darken, lighten, useTheme } from "@mui/material/styles";
|
|
7
7
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -10,22 +10,23 @@ import { DatePicker } from "@mui/x-date-pickers/DatePicker";
|
|
|
10
10
|
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
|
|
11
11
|
import { TimePicker } from "@mui/x-date-pickers/TimePicker";
|
|
12
12
|
import { ArrowDownward, ArrowRight, Cancel, ChevronLeft, ChevronRight, ClearAll, Close, ContentCopy, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandMore, FilterAlt, FilterList, FilterListOff, FirstPage, Fullscreen, FullscreenExit, KeyboardDoubleArrowDown, LastPage, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, SyncAlt, ViewColumn, VisibilityOff } from "@mui/icons-material";
|
|
13
|
-
|
|
13
|
+
// src/fns/sortingFns.ts
|
|
14
14
|
const fuzzy$1 = (rowA, rowB, columnId) => {
|
|
15
15
|
let dir = 0;
|
|
16
|
-
if (rowA.columnFiltersMeta[columnId]) dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
|
|
16
|
+
if ("columnFiltersMeta" in rowA && "columnFiltersMeta" in rowB && rowA.columnFiltersMeta[columnId]) dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
|
|
17
17
|
return dir === 0 ? sortFn_alphanumeric(rowA, rowB, columnId) : dir;
|
|
18
18
|
};
|
|
19
19
|
const MRT_SortingFns = {
|
|
20
20
|
alphanumeric: sortFn_alphanumeric,
|
|
21
|
+
alphanumericCaseSensitive: sortFn_alphanumericCaseSensitive,
|
|
21
22
|
basic: sortFn_basic,
|
|
22
23
|
datetime: sortFn_datetime,
|
|
23
24
|
fuzzy: fuzzy$1,
|
|
24
|
-
text: sortFn_text
|
|
25
|
+
text: sortFn_text,
|
|
26
|
+
textCaseSensitive: sortFn_textCaseSensitive
|
|
25
27
|
};
|
|
26
|
-
const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((
|
|
27
|
-
|
|
28
|
-
//#region src/utils/utils.ts
|
|
28
|
+
const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((meta) => meta.rank)) - Math.max(...Object.values(rowA.columnFiltersMeta).map((meta) => meta.rank));
|
|
29
|
+
// src/utils/utils.ts
|
|
29
30
|
const parseFromValuesOrFunc = (fn, arg) => fn instanceof Function ? fn(arg) : fn;
|
|
30
31
|
const getValueAndLabel = (option) => {
|
|
31
32
|
let label = "";
|
|
@@ -35,8 +36,8 @@ const getValueAndLabel = (option) => {
|
|
|
35
36
|
label = option;
|
|
36
37
|
value = option;
|
|
37
38
|
} else {
|
|
38
|
-
label = option.label ?? option.value;
|
|
39
|
-
value = option.value
|
|
39
|
+
label = option.label ?? String(option.value);
|
|
40
|
+
value = option.value;
|
|
40
41
|
}
|
|
41
42
|
}
|
|
42
43
|
return {
|
|
@@ -44,8 +45,7 @@ const getValueAndLabel = (option) => {
|
|
|
44
45
|
value
|
|
45
46
|
};
|
|
46
47
|
};
|
|
47
|
-
|
|
48
|
-
//#region src/utils/row.utils.ts
|
|
48
|
+
// src/utils/row.utils.ts
|
|
49
49
|
const getMRT_Rows = (table, all) => {
|
|
50
50
|
const { getCenterRows, getPrePaginatedRowModel, getRowModel, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode } } = table;
|
|
51
51
|
const { creatingRow, pagination } = table.state;
|
|
@@ -81,7 +81,7 @@ const getCanRankRows = (table) => {
|
|
|
81
81
|
};
|
|
82
82
|
const getIsRankingRows = (table) => {
|
|
83
83
|
const { globalFilter, sorting } = table.state;
|
|
84
|
-
return getCanRankRows(table) && globalFilter && !Object.values(sorting).some(Boolean);
|
|
84
|
+
return Boolean(getCanRankRows(table) && globalFilter && !Object.values(sorting).some(Boolean));
|
|
85
85
|
};
|
|
86
86
|
const getIsRowSelected = ({ row, table }) => {
|
|
87
87
|
const { options: { enableRowSelection } } = table;
|
|
@@ -97,7 +97,7 @@ const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table }) => (even
|
|
|
97
97
|
});
|
|
98
98
|
row.toggleSelected(value ?? !wasCurrentRowChecked);
|
|
99
99
|
const changedRowIds = /* @__PURE__ */ new Set([row.id]);
|
|
100
|
-
if (enableBatchRowSelection && enableMultiRowSelection && event.nativeEvent.shiftKey && lastSelectedRowId.current !== null) {
|
|
100
|
+
if (enableBatchRowSelection && enableMultiRowSelection && "shiftKey" in event.nativeEvent && event.nativeEvent.shiftKey && lastSelectedRowId.current !== null) {
|
|
101
101
|
const rows = getMRT_Rows(table, true);
|
|
102
102
|
const lastIndex = rows.findIndex((r) => r.id === lastSelectedRowId.current);
|
|
103
103
|
if (lastIndex !== -1) {
|
|
@@ -121,34 +121,18 @@ const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table }) => (even
|
|
|
121
121
|
};
|
|
122
122
|
const getMRT_SelectAllHandler = ({ table }) => (event, value, forceAll) => {
|
|
123
123
|
const { options: { enableRowPinning, rowPinningDisplayMode, selectAllMode }, refs: { lastSelectedRowId } } = table;
|
|
124
|
-
|
|
124
|
+
const checked = value ?? event.target.checked;
|
|
125
|
+
if (selectAllMode === "all" || forceAll) table.toggleAllRowsSelected(checked);
|
|
126
|
+
else table.toggleAllPageRowsSelected(checked);
|
|
125
127
|
if (enableRowPinning && rowPinningDisplayMode?.includes("select")) table.setRowPinning({
|
|
126
128
|
bottom: [],
|
|
127
129
|
top: []
|
|
128
130
|
});
|
|
129
131
|
lastSelectedRowId.current = null;
|
|
130
132
|
};
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
const { getRowModel, options: { data, enableGlobalFilterRankedResults, positionCreatingRow } } = table;
|
|
135
|
-
const { creatingRow, expanded, globalFilter, pagination, rowPinning, sorting } = table.state;
|
|
136
|
-
return useMemo(() => getMRT_Rows(table), [
|
|
137
|
-
creatingRow,
|
|
138
|
-
data,
|
|
139
|
-
enableGlobalFilterRankedResults,
|
|
140
|
-
expanded,
|
|
141
|
-
getRowModel().rows,
|
|
142
|
-
globalFilter,
|
|
143
|
-
pagination.pageIndex,
|
|
144
|
-
pagination.pageSize,
|
|
145
|
-
positionCreatingRow,
|
|
146
|
-
rowPinning,
|
|
147
|
-
sorting
|
|
148
|
-
]);
|
|
149
|
-
};
|
|
150
|
-
//#endregion
|
|
151
|
-
//#region src/utils/virtualization.utils.ts
|
|
133
|
+
// src/hooks/useMRT_Rows.ts
|
|
134
|
+
const useMRT_Rows = (table) => getMRT_Rows(table);
|
|
135
|
+
// src/utils/virtualization.utils.ts
|
|
152
136
|
/**
|
|
153
137
|
* When scroll, the `draggingRow` or `draggingColumn` can be removed from document because of virtualization,
|
|
154
138
|
* then, the `dragEnd` event on `MRT_TableBodyRowGrabHandle` or `MRT_TableHeadCellGrabHandle` will not fire.
|
|
@@ -161,13 +145,11 @@ const extraIndexRangeExtractor = (range, draggingIndex) => {
|
|
|
161
145
|
if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) newIndexes.push(draggingIndex);
|
|
162
146
|
return newIndexes;
|
|
163
147
|
};
|
|
164
|
-
|
|
165
|
-
//#region src/hooks/useMRT_RowVirtualizer.ts
|
|
148
|
+
// src/hooks/useMRT_RowVirtualizer.ts
|
|
166
149
|
const useMRT_RowVirtualizer = (table, rows) => {
|
|
167
150
|
const { getRowModel, options: { enableRowVirtualization, renderDetailPanel, rowVirtualizerInstanceRef, rowVirtualizerOptions }, refs: { tableContainerRef } } = table;
|
|
168
151
|
const { density, draggingRow, expanded } = table.state;
|
|
169
|
-
|
|
170
|
-
const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, { table });
|
|
152
|
+
const rowVirtualizerProps = enableRowVirtualization ? parseFromValuesOrFunc(rowVirtualizerOptions, { table }) : void 0;
|
|
171
153
|
const realRows = rows ?? getRowModel().rows;
|
|
172
154
|
/**
|
|
173
155
|
* when filtering, should find the correct index in filtered rows
|
|
@@ -177,6 +159,7 @@ const useMRT_RowVirtualizer = (table, rows) => {
|
|
|
177
159
|
const normalRowHeight = density === "compact" ? 37 : density === "comfortable" ? 58 : 73;
|
|
178
160
|
const rowVirtualizer = useVirtualizer({
|
|
179
161
|
count: renderDetailPanel ? rowCount * 2 : rowCount,
|
|
162
|
+
enabled: !!enableRowVirtualization,
|
|
180
163
|
estimateSize: (index) => renderDetailPanel && index % 2 === 1 ? expanded === true ? 100 : 0 : normalRowHeight,
|
|
181
164
|
getScrollElement: () => tableContainerRef.current,
|
|
182
165
|
measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? (element) => element?.getBoundingClientRect().height : void 0,
|
|
@@ -186,12 +169,12 @@ const useMRT_RowVirtualizer = (table, rows) => {
|
|
|
186
169
|
}, [draggingRowIndex]),
|
|
187
170
|
...rowVirtualizerProps
|
|
188
171
|
});
|
|
172
|
+
if (!enableRowVirtualization) return;
|
|
189
173
|
rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems();
|
|
190
174
|
if (rowVirtualizerInstanceRef) rowVirtualizerInstanceRef.current = rowVirtualizer;
|
|
191
175
|
return rowVirtualizer;
|
|
192
176
|
};
|
|
193
|
-
|
|
194
|
-
//#region src/utils/style.utils.ts
|
|
177
|
+
// src/utils/style.utils.ts
|
|
195
178
|
const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, "_");
|
|
196
179
|
const getMRTTheme = (mrtTheme, muiTheme) => {
|
|
197
180
|
const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme);
|
|
@@ -284,8 +267,7 @@ const getCommonTooltipProps = (placement) => ({
|
|
|
284
267
|
enterNextDelay: 1e3,
|
|
285
268
|
placement
|
|
286
269
|
});
|
|
287
|
-
|
|
288
|
-
//#region src/utils/cell.utils.ts
|
|
270
|
+
// src/utils/cell.utils.ts
|
|
289
271
|
const isWinCtrlMacMeta = (event) => {
|
|
290
272
|
return event.ctrlKey && navigator.platform.toLowerCase().includes("win") || event.metaKey && navigator.platform.toLowerCase().includes("mac");
|
|
291
273
|
};
|
|
@@ -321,7 +303,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
|
321
303
|
event.preventDefault();
|
|
322
304
|
getMRT_RowSelectionHandler({
|
|
323
305
|
row: cell.row,
|
|
324
|
-
staticRowIndex:
|
|
306
|
+
staticRowIndex: Number(event.target.getAttribute("data-index")),
|
|
325
307
|
table
|
|
326
308
|
})(event);
|
|
327
309
|
} else if (header?.column?.id === "mrt-row-select" && table.options.enableSelectAll) {
|
|
@@ -338,7 +320,8 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
|
338
320
|
table.toggleAllRowsExpanded();
|
|
339
321
|
} else if (cell?.column.id === "mrt-row-pin") {
|
|
340
322
|
event.preventDefault();
|
|
341
|
-
cell.row.getIsPinned()
|
|
323
|
+
if (cell.row.getIsPinned()) cell.row.pin(false);
|
|
324
|
+
else cell.row.pin(table.options.rowPinningDisplayMode?.includes("bottom") ? "bottom" : "top");
|
|
342
325
|
} else if (header && isWinCtrlMacMeta(event)) {
|
|
343
326
|
const actionsButton = currentCell.querySelector(`button[aria-label="${table.options.localization.columnActions}"]`);
|
|
344
327
|
if (actionsButton) actionsButton.click();
|
|
@@ -402,8 +385,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
|
402
385
|
if (nextCell) nextCell.focus();
|
|
403
386
|
}
|
|
404
387
|
};
|
|
405
|
-
|
|
406
|
-
//#region src/components/buttons/MRT_CopyButton.tsx
|
|
388
|
+
// src/components/buttons/MRT_CopyButton.tsx
|
|
407
389
|
const MRT_CopyButton = ({ cell, table, ...rest }) => {
|
|
408
390
|
const { options: { localization, muiCopyButtonProps } } = table;
|
|
409
391
|
const { column, row } = cell;
|
|
@@ -458,8 +440,7 @@ const MRT_CopyButton = ({ cell, table, ...rest }) => {
|
|
|
458
440
|
})
|
|
459
441
|
});
|
|
460
442
|
};
|
|
461
|
-
|
|
462
|
-
//#region src/utils/slotProps.utils.ts
|
|
443
|
+
// src/utils/slotProps.utils.ts
|
|
463
444
|
const getTextFieldSlotProps = (slotProps) => ({
|
|
464
445
|
formHelperText: slotProps?.formHelperText,
|
|
465
446
|
htmlInput: slotProps?.htmlInput,
|
|
@@ -467,8 +448,7 @@ const getTextFieldSlotProps = (slotProps) => ({
|
|
|
467
448
|
inputLabel: slotProps?.inputLabel,
|
|
468
449
|
select: slotProps?.select
|
|
469
450
|
});
|
|
470
|
-
|
|
471
|
-
//#region src/components/inputs/MRT_EditCellTextField.tsx
|
|
451
|
+
// src/components/inputs/MRT_EditCellTextField.tsx
|
|
472
452
|
const MRT_EditCellTextField = ({ cell, table, ...rest }) => {
|
|
473
453
|
const { options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps }, refs: { editInputRefs }, setCreatingRow, setEditingCell, setEditingRow } = table;
|
|
474
454
|
const { column, row } = cell;
|
|
@@ -587,8 +567,7 @@ const MRT_EditCellTextField = ({ cell, table, ...rest }) => {
|
|
|
587
567
|
})
|
|
588
568
|
});
|
|
589
569
|
};
|
|
590
|
-
|
|
591
|
-
//#region src/utils/highlight.utils.ts
|
|
570
|
+
// src/utils/highlight.utils.ts
|
|
592
571
|
const escapeRegExp = (term) => term.replace(/[|\\{}()[\]^$+*?.-]/g, (char) => `\\${char}`);
|
|
593
572
|
const termsToRegExpString = (terms) => terms.replace(/\s{2,}/g, " ").split(" ").join("|");
|
|
594
573
|
const buildRegExp = (terms, matchExactly) => {
|
|
@@ -614,8 +593,7 @@ const highlightWords = ({ matchExactly = false, query, text }) => {
|
|
|
614
593
|
text: str
|
|
615
594
|
}));
|
|
616
595
|
};
|
|
617
|
-
|
|
618
|
-
//#region src/components/body/MRT_TableBodyCellValue.tsx
|
|
596
|
+
// src/components/body/MRT_TableBodyCellValue.tsx
|
|
619
597
|
const allowedTypes = ["string", "number"];
|
|
620
598
|
const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowIndex, table }) => {
|
|
621
599
|
const { options: { enableFilterMatchHighlighting, mrtTheme: { matchHighlightColor } } } = table;
|
|
@@ -674,8 +652,7 @@ const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowInde
|
|
|
674
652
|
});
|
|
675
653
|
return renderedCellValue;
|
|
676
654
|
};
|
|
677
|
-
|
|
678
|
-
//#region src/components/body/MRT_TableBodyCell.tsx
|
|
655
|
+
// src/components/body/MRT_TableBodyCell.tsx
|
|
679
656
|
const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table, ...rest }) => {
|
|
680
657
|
const theme = useTheme();
|
|
681
658
|
const { options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, enableKeyboardShortcuts, layoutMode, mrtTheme: { draggingBorderColor }, muiSkeletonProps, muiTableBodyCellProps }, setHoveredColumn } = table;
|
|
@@ -705,7 +682,13 @@ const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRow
|
|
|
705
682
|
if (!isLoading && !showSkeletons || skeletonWidth !== 100) return;
|
|
706
683
|
const size = column.getSize();
|
|
707
684
|
setSkeletonWidth(columnDefType === "display" ? size / 2 : Math.round(Math.random() * (size - size / 3) + size / 3));
|
|
708
|
-
}, [
|
|
685
|
+
}, [
|
|
686
|
+
column,
|
|
687
|
+
columnDefType,
|
|
688
|
+
isLoading,
|
|
689
|
+
showSkeletons,
|
|
690
|
+
skeletonWidth
|
|
691
|
+
]);
|
|
709
692
|
const draggingBorders = useMemo(() => {
|
|
710
693
|
const isDraggingColumn = draggingColumn?.id === column.id;
|
|
711
694
|
const isHoveredColumn = hoveredColumn?.id === column.id;
|
|
@@ -725,12 +708,19 @@ const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRow
|
|
|
725
708
|
borderTop: isDraggingRow || isHoveredRow ? borderStyle : void 0
|
|
726
709
|
} : void 0;
|
|
727
710
|
}, [
|
|
711
|
+
column,
|
|
712
|
+
columnResizeDirection,
|
|
713
|
+
columnResizeMode,
|
|
728
714
|
columnResizing.isResizingColumn,
|
|
715
|
+
draggingBorderColor,
|
|
729
716
|
draggingColumn,
|
|
730
717
|
draggingRow,
|
|
731
718
|
hoveredColumn,
|
|
732
719
|
hoveredRow,
|
|
733
|
-
|
|
720
|
+
numRows,
|
|
721
|
+
row.id,
|
|
722
|
+
staticRowIndex,
|
|
723
|
+
theme.palette.grey
|
|
734
724
|
]);
|
|
735
725
|
const isColumnPinned = enableColumnPinning && columnDef.columnDefType !== "group" && column.getIsPinned();
|
|
736
726
|
const isEditable = isCellEditable({
|
|
@@ -739,7 +729,8 @@ const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRow
|
|
|
739
729
|
});
|
|
740
730
|
const isEditing = isEditable && !["custom", "modal"].includes(editDisplayMode) && (editDisplayMode === "table" || editingRow?.id === row.id || editingCell?.id === cell.id) && !row.getIsGrouped();
|
|
741
731
|
const isCreating = isEditable && createDisplayMode === "row" && creatingRow?.id === row.id;
|
|
742
|
-
const
|
|
732
|
+
const columnClickToCopy = parseFromValuesOrFunc(columnDef.enableClickToCopy, cell);
|
|
733
|
+
const showClickToCopyButton = (parseFromValuesOrFunc(enableClickToCopy, cell) === true || columnClickToCopy === true) && columnClickToCopy !== "context-menu" && columnClickToCopy !== false;
|
|
743
734
|
const isRightClickable = parseFromValuesOrFunc(enableCellActions, cell);
|
|
744
735
|
const cellValueProps = {
|
|
745
736
|
cell,
|
|
@@ -849,8 +840,7 @@ const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRow
|
|
|
849
840
|
});
|
|
850
841
|
};
|
|
851
842
|
const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
|
|
852
|
-
|
|
853
|
-
//#region src/components/body/MRT_TableDetailPanel.tsx
|
|
843
|
+
// src/components/body/MRT_TableDetailPanel.tsx
|
|
854
844
|
const MRT_TableDetailPanel = ({ parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow, ...rest }) => {
|
|
855
845
|
const { getVisibleLeafColumns, options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel } } = table;
|
|
856
846
|
const { isLoading } = table.state;
|
|
@@ -908,12 +898,11 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowVirtualizer, staticRowInde
|
|
|
908
898
|
})
|
|
909
899
|
});
|
|
910
900
|
};
|
|
911
|
-
|
|
912
|
-
//#region src/components/body/MRT_TableBodyRow.tsx
|
|
901
|
+
// src/components/body/MRT_TableBodyRow.tsx
|
|
913
902
|
const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow, ...rest }) => {
|
|
914
903
|
const theme = useTheme();
|
|
915
904
|
const { options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, mrtTheme: { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor }, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow } = table;
|
|
916
|
-
const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen
|
|
905
|
+
const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen } = table.state;
|
|
917
906
|
const visibleCells = row.getVisibleCells();
|
|
918
907
|
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
|
|
919
908
|
const isRowSelected = getIsRowSelected({
|
|
@@ -931,15 +920,16 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
|
|
|
931
920
|
}),
|
|
932
921
|
...rest
|
|
933
922
|
};
|
|
934
|
-
const
|
|
923
|
+
const getPinnedIndexes = () => {
|
|
935
924
|
if (!enableRowPinning || !rowPinningDisplayMode?.includes("sticky") || !pinnedRowIds || !row.getIsPinned()) return [];
|
|
936
925
|
return [[...pinnedRowIds].reverse().indexOf(row.id), pinnedRowIds.indexOf(row.id)];
|
|
937
|
-
}
|
|
926
|
+
};
|
|
927
|
+
const [bottomPinnedIndex, topPinnedIndex] = getPinnedIndexes();
|
|
938
928
|
const tableHeadHeight = (enableStickyHeader || isFullScreen) && tableHeadRef.current?.clientHeight || 0;
|
|
939
929
|
const tableFooterHeight = enableStickyFooter && tableFooterRef.current?.clientHeight || 0;
|
|
940
930
|
const sx = parseFromValuesOrFunc(tableRowProps?.sx, theme);
|
|
941
931
|
const defaultRowHeight = density === "compact" ? 37 : density === "comfortable" ? 53 : 69;
|
|
942
|
-
const rowHeight = parseInt(tableRowProps?.style?.height ?? sx?.height, 10) || defaultRowHeight;
|
|
932
|
+
const rowHeight = parseInt(String(tableRowProps?.style?.height ?? sx?.height), 10) || defaultRowHeight;
|
|
943
933
|
const handleDragEnter = (_e) => {
|
|
944
934
|
if (enableRowOrdering && draggingRow) setHoveredRow(row);
|
|
945
935
|
};
|
|
@@ -1029,8 +1019,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
|
|
|
1029
1019
|
})] });
|
|
1030
1020
|
};
|
|
1031
1021
|
const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.staticRowIndex === next.staticRowIndex);
|
|
1032
|
-
|
|
1033
|
-
//#region src/components/body/MRT_TableBody.tsx
|
|
1022
|
+
// src/components/body/MRT_TableBody.tsx
|
|
1034
1023
|
const MRT_TableBody = ({ columnVirtualizer, table, ...rest }) => {
|
|
1035
1024
|
const { getBottomRows, getIsSomeRowsPinned, getRowModel, getTopRows, options: { enableStickyFooter, enableStickyHeader, layoutMode, localization, memoMode, muiTableBodyProps, renderDetailPanel, renderEmptyRowsFallback, rowPinningDisplayMode }, refs: { tableFooterRef, tableHeadRef, tablePaperRef } } = table;
|
|
1036
1025
|
const { columnFilters, globalFilter, isFullScreen, rowPinning } = table.state;
|
|
@@ -1040,10 +1029,11 @@ const MRT_TableBody = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
1040
1029
|
};
|
|
1041
1030
|
const tableHeadHeight = (enableStickyHeader || isFullScreen) && tableHeadRef.current?.clientHeight || 0;
|
|
1042
1031
|
const tableFooterHeight = enableStickyFooter && tableFooterRef.current?.clientHeight || 0;
|
|
1032
|
+
const rowModelRows = getRowModel().rows;
|
|
1043
1033
|
const pinnedRowIds = useMemo(() => {
|
|
1044
1034
|
if (!rowPinning.bottom?.length && !rowPinning.top?.length) return [];
|
|
1045
|
-
return
|
|
1046
|
-
}, [rowPinning,
|
|
1035
|
+
return rowModelRows.filter((row) => row.getIsPinned()).map((r) => r.id);
|
|
1036
|
+
}, [rowPinning, rowModelRows]);
|
|
1047
1037
|
const rows = useMRT_Rows(table);
|
|
1048
1038
|
const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
|
|
1049
1039
|
const { virtualRows } = rowVirtualizer ?? {};
|
|
@@ -1139,8 +1129,7 @@ const MRT_TableBody = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
1139
1129
|
] });
|
|
1140
1130
|
};
|
|
1141
1131
|
const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
|
|
1142
|
-
|
|
1143
|
-
//#region src/components/buttons/MRT_GrabHandleButton.tsx
|
|
1132
|
+
// src/components/buttons/MRT_GrabHandleButton.tsx
|
|
1144
1133
|
const MRT_GrabHandleButton = ({ location, table, ...rest }) => {
|
|
1145
1134
|
const { options: { icons: { DragHandleIcon }, localization } } = table;
|
|
1146
1135
|
return /* @__PURE__ */ jsx(Tooltip, {
|
|
@@ -1174,8 +1163,7 @@ const MRT_GrabHandleButton = ({ location, table, ...rest }) => {
|
|
|
1174
1163
|
})
|
|
1175
1164
|
});
|
|
1176
1165
|
};
|
|
1177
|
-
|
|
1178
|
-
//#region src/components/body/MRT_TableBodyRowGrabHandle.tsx
|
|
1166
|
+
// src/components/body/MRT_TableBodyRowGrabHandle.tsx
|
|
1179
1167
|
const MRT_TableBodyRowGrabHandle = ({ row, rowRef, table, ...rest }) => {
|
|
1180
1168
|
const { options: { muiRowDragHandleProps } } = table;
|
|
1181
1169
|
const iconButtonProps = {
|
|
@@ -1207,8 +1195,7 @@ const MRT_TableBodyRowGrabHandle = ({ row, rowRef, table, ...rest }) => {
|
|
|
1207
1195
|
table
|
|
1208
1196
|
});
|
|
1209
1197
|
};
|
|
1210
|
-
|
|
1211
|
-
//#region src/components/buttons/MRT_RowPinButton.tsx
|
|
1198
|
+
// src/components/buttons/MRT_RowPinButton.tsx
|
|
1212
1199
|
const MRT_RowPinButton = ({ pinningPosition, row, table, ...rest }) => {
|
|
1213
1200
|
const { options: { icons: { CloseIcon, PushPinIcon }, localization, rowPinningDisplayMode } } = table;
|
|
1214
1201
|
const isPinned = row.getIsPinned();
|
|
@@ -1243,8 +1230,7 @@ const MRT_RowPinButton = ({ pinningPosition, row, table, ...rest }) => {
|
|
|
1243
1230
|
})
|
|
1244
1231
|
});
|
|
1245
1232
|
};
|
|
1246
|
-
|
|
1247
|
-
//#region src/components/body/MRT_TableBodyRowPinButton.tsx
|
|
1233
|
+
// src/components/body/MRT_TableBodyRowPinButton.tsx
|
|
1248
1234
|
const MRT_TableBodyRowPinButton = ({ row, table, ...rest }) => {
|
|
1249
1235
|
const { options: { enableRowPinning, rowPinningDisplayMode } } = table;
|
|
1250
1236
|
const { density } = table.state;
|
|
@@ -1272,8 +1258,7 @@ const MRT_TableBodyRowPinButton = ({ row, table, ...rest }) => {
|
|
|
1272
1258
|
...rowPinButtonProps
|
|
1273
1259
|
});
|
|
1274
1260
|
};
|
|
1275
|
-
|
|
1276
|
-
//#region src/components/buttons/MRT_ColumnPinningButtons.tsx
|
|
1261
|
+
// src/components/buttons/MRT_ColumnPinningButtons.tsx
|
|
1277
1262
|
const MRT_ColumnPinningButtons = ({ column, table, ...rest }) => {
|
|
1278
1263
|
const { options: { icons: { PushPinIcon }, localization } } = table;
|
|
1279
1264
|
const handlePinColumn = (pinDirection) => {
|
|
@@ -1310,8 +1295,7 @@ const MRT_ColumnPinningButtons = ({ column, table, ...rest }) => {
|
|
|
1310
1295
|
})] })
|
|
1311
1296
|
});
|
|
1312
1297
|
};
|
|
1313
|
-
|
|
1314
|
-
//#region src/components/buttons/MRT_EditActionButtons.tsx
|
|
1298
|
+
// src/components/buttons/MRT_EditActionButtons.tsx
|
|
1315
1299
|
const MRT_EditActionButtons = ({ row, table, variant = "icon", ...rest }) => {
|
|
1316
1300
|
const { options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowCancel, onEditingRowSave }, refs: { editInputRefs }, setCreatingRow, setEditingRow } = table;
|
|
1317
1301
|
const { creatingRow, editingRow, isSaving } = table.state;
|
|
@@ -1347,7 +1331,7 @@ const MRT_EditActionButtons = ({ row, table, variant = "icon", ...rest }) => {
|
|
|
1347
1331
|
exitEditingMode: () => setEditingRow(null),
|
|
1348
1332
|
row,
|
|
1349
1333
|
table,
|
|
1350
|
-
values: row
|
|
1334
|
+
values: row._valuesCache
|
|
1351
1335
|
});
|
|
1352
1336
|
};
|
|
1353
1337
|
return /* @__PURE__ */ jsx(Box, {
|
|
@@ -1389,8 +1373,7 @@ const MRT_EditActionButtons = ({ row, table, variant = "icon", ...rest }) => {
|
|
|
1389
1373
|
})] })
|
|
1390
1374
|
});
|
|
1391
1375
|
};
|
|
1392
|
-
|
|
1393
|
-
//#region src/components/buttons/MRT_ExpandAllButton.tsx
|
|
1376
|
+
// src/components/buttons/MRT_ExpandAllButton.tsx
|
|
1394
1377
|
const MRT_ExpandAllButton = ({ table, ...rest }) => {
|
|
1395
1378
|
const { getCanSomeRowsExpand, getIsAllRowsExpanded, getIsSomeRowsExpanded, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel }, toggleAllRowsExpanded } = table;
|
|
1396
1379
|
const { density, isLoading } = table.state;
|
|
@@ -1421,8 +1404,7 @@ const MRT_ExpandAllButton = ({ table, ...rest }) => {
|
|
|
1421
1404
|
}) })
|
|
1422
1405
|
});
|
|
1423
1406
|
};
|
|
1424
|
-
|
|
1425
|
-
//#region src/components/buttons/MRT_ExpandButton.tsx
|
|
1407
|
+
// src/components/buttons/MRT_ExpandButton.tsx
|
|
1426
1408
|
const MRT_ExpandButton = ({ row, staticRowIndex, table }) => {
|
|
1427
1409
|
const theme = useTheme();
|
|
1428
1410
|
const { options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, positionExpandColumn, renderDetailPanel } } = table;
|
|
@@ -1467,8 +1449,7 @@ const MRT_ExpandButton = ({ row, staticRowIndex, table }) => {
|
|
|
1467
1449
|
}) })
|
|
1468
1450
|
});
|
|
1469
1451
|
};
|
|
1470
|
-
|
|
1471
|
-
//#region src/utils/column.utils.ts
|
|
1452
|
+
// src/utils/column.utils.ts
|
|
1472
1453
|
const getSubColumnDefs = (columnDef) => "columns" in columnDef ? columnDef.columns : void 0;
|
|
1473
1454
|
const getColumnId = (columnDef) => columnDef.id ?? ("accessorKey" in columnDef ? columnDef.accessorKey?.toString?.() : void 0) ?? columnDef.header;
|
|
1474
1455
|
const getAllLeafColumnDefs = (columns) => {
|
|
@@ -1518,6 +1499,14 @@ const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
|
|
|
1518
1499
|
newColumnOrder.splice(newColumnOrder.indexOf(targetColumn.id), 0, newColumnOrder.splice(newColumnOrder.indexOf(draggedColumn.id), 1)[0]);
|
|
1519
1500
|
return newColumnOrder;
|
|
1520
1501
|
};
|
|
1502
|
+
const moveColumn = (table, draggedColumn, targetColumn) => {
|
|
1503
|
+
const reorderedColumns = reorderColumn(draggedColumn, targetColumn, table.state.columnOrder);
|
|
1504
|
+
table.setColumnOrder(reorderedColumns);
|
|
1505
|
+
table.setColumnPinning(({ end = [], start = [] }) => ({
|
|
1506
|
+
end: reorderedColumns.filter((header) => end.includes(header)),
|
|
1507
|
+
start: reorderedColumns.filter((header) => start.includes(header))
|
|
1508
|
+
}));
|
|
1509
|
+
};
|
|
1521
1510
|
const getDefaultColumnFilterFn = (columnDef) => {
|
|
1522
1511
|
const { filterVariant } = columnDef;
|
|
1523
1512
|
if (filterVariant === "multi-select") return "arrIncludesSome";
|
|
@@ -1525,6 +1514,7 @@ const getDefaultColumnFilterFn = (columnDef) => {
|
|
|
1525
1514
|
if (filterVariant === "select" || filterVariant === "checkbox") return "equals";
|
|
1526
1515
|
return "fuzzy";
|
|
1527
1516
|
};
|
|
1517
|
+
const getFilterOptionLabel = (localization, filterOption) => localization[`filter${filterOption.charAt(0).toUpperCase() + filterOption.slice(1)}`];
|
|
1528
1518
|
const getColumnFilterInfo = ({ header, table }) => {
|
|
1529
1519
|
const { options: { columnFilterModeOptions } } = table;
|
|
1530
1520
|
const { column } = header;
|
|
@@ -1563,12 +1553,12 @@ const useDropdownOptions = ({ header, table }) => {
|
|
|
1563
1553
|
return useMemo(() => columnDef.filterSelectOptions ?? ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) && facetedUniqueValues ? Array.from(facetedUniqueValues.keys()).filter((value) => value !== null && value !== void 0).sort((a, b) => a.localeCompare(b)) : void 0), [
|
|
1564
1554
|
columnDef.filterSelectOptions,
|
|
1565
1555
|
facetedUniqueValues,
|
|
1556
|
+
isAutocompleteFilter,
|
|
1566
1557
|
isMultiSelectFilter,
|
|
1567
1558
|
isSelectFilter
|
|
1568
1559
|
]);
|
|
1569
1560
|
};
|
|
1570
|
-
|
|
1571
|
-
//#region src/utils/displayColumn.utils.ts
|
|
1561
|
+
// src/utils/displayColumn.utils.ts
|
|
1572
1562
|
function defaultDisplayColumnProps({ header, id, size, tableOptions }) {
|
|
1573
1563
|
const { defaultDisplayColumn, displayColumnDefOptions, localization } = tableOptions;
|
|
1574
1564
|
return {
|
|
@@ -1624,11 +1614,9 @@ const getDefaultColumnOrderIds = (tableOptions, reset = false) => {
|
|
|
1624
1614
|
...trailingDisplayColIds
|
|
1625
1615
|
];
|
|
1626
1616
|
};
|
|
1627
|
-
|
|
1628
|
-
//#region src/components/menus/MRT_ShowHideColumnsMenuItems.tsx
|
|
1617
|
+
// src/components/menus/MRT_ShowHideColumnsMenuItems.tsx
|
|
1629
1618
|
const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, isNestedColumns, setHoveredColumn, table, ...rest }) => {
|
|
1630
|
-
const { options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor } }
|
|
1631
|
-
const { columnOrder } = table.state;
|
|
1619
|
+
const { options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor } } } = table;
|
|
1632
1620
|
const { columnDef } = column;
|
|
1633
1621
|
const { columnDefType } = columnDef;
|
|
1634
1622
|
const switchChecked = column.getIsVisible();
|
|
@@ -1651,14 +1639,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, isNes
|
|
|
1651
1639
|
const handleDragEnd = (_e) => {
|
|
1652
1640
|
setIsDragging(false);
|
|
1653
1641
|
setHoveredColumn(null);
|
|
1654
|
-
if (hoveredColumn)
|
|
1655
|
-
const reorderedColumns = reorderColumn(column, hoveredColumn, columnOrder);
|
|
1656
|
-
setColumnOrder(reorderedColumns);
|
|
1657
|
-
setColumnPinning(({ end = [], start = [] }) => ({
|
|
1658
|
-
end: reorderedColumns.filter((header) => end.includes(header)),
|
|
1659
|
-
start: reorderedColumns.filter((header) => start.includes(header))
|
|
1660
|
-
}));
|
|
1661
|
-
}
|
|
1642
|
+
if (hoveredColumn) moveColumn(table, column, hoveredColumn);
|
|
1662
1643
|
};
|
|
1663
1644
|
const handleDragEnter = (_e) => {
|
|
1664
1645
|
if (!isDragging && columnDef.enableColumnOrdering !== false) setHoveredColumn(column);
|
|
@@ -1725,11 +1706,10 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, isNes
|
|
|
1725
1706
|
table
|
|
1726
1707
|
}, `${i}-${c.id}`))] });
|
|
1727
1708
|
};
|
|
1728
|
-
|
|
1729
|
-
//#region src/components/menus/MRT_ShowHideColumnsMenu.tsx
|
|
1709
|
+
// src/components/menus/MRT_ShowHideColumnsMenu.tsx
|
|
1730
1710
|
const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, ...rest }) => {
|
|
1731
1711
|
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, initialState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { menuBackgroundColor } } } = table;
|
|
1732
|
-
const { columnOrder,
|
|
1712
|
+
const { columnOrder, density } = table.state;
|
|
1733
1713
|
const handleToggleAllColumns = (value) => {
|
|
1734
1714
|
const updates = getAllLeafColumns().filter((column) => column.columnDef.enableHiding !== false).reduce((acc, column) => {
|
|
1735
1715
|
acc[column.id] = value ?? !column.getIsVisible();
|
|
@@ -1740,21 +1720,24 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, ...rest }) => {
|
|
|
1740
1720
|
...updates
|
|
1741
1721
|
}));
|
|
1742
1722
|
};
|
|
1723
|
+
const allTableColumns = getAllColumns();
|
|
1724
|
+
const centerLeafColumns = getCenterLeafColumns();
|
|
1725
|
+
const leftLeafColumns = getLeftLeafColumns();
|
|
1726
|
+
const rightLeafColumns = getRightLeafColumns();
|
|
1743
1727
|
const allColumns = useMemo(() => {
|
|
1744
|
-
const columns =
|
|
1728
|
+
const columns = allTableColumns;
|
|
1745
1729
|
if (columnOrder.length > 0 && !columns.some((col) => col.columnDef.columnDefType === "group")) return [
|
|
1746
|
-
...
|
|
1747
|
-
...Array.from(new Set(columnOrder)).map((colId) =>
|
|
1748
|
-
...
|
|
1730
|
+
...leftLeafColumns,
|
|
1731
|
+
...Array.from(new Set(columnOrder)).map((colId) => centerLeafColumns.find((col) => col?.id === colId)),
|
|
1732
|
+
...rightLeafColumns
|
|
1749
1733
|
].filter(Boolean);
|
|
1750
1734
|
return columns;
|
|
1751
1735
|
}, [
|
|
1736
|
+
allTableColumns,
|
|
1737
|
+
centerLeafColumns,
|
|
1752
1738
|
columnOrder,
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
getCenterLeafColumns(),
|
|
1756
|
-
getLeftLeafColumns(),
|
|
1757
|
-
getRightLeafColumns()
|
|
1739
|
+
leftLeafColumns,
|
|
1740
|
+
rightLeafColumns
|
|
1758
1741
|
]);
|
|
1759
1742
|
const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === "group");
|
|
1760
1743
|
const hasColumnOrderChanged = useMemo(() => columnOrder.length !== initialState.columnOrder.length || !columnOrder.every((column, index) => column === initialState.columnOrder[index]), [columnOrder, initialState.columnOrder]);
|
|
@@ -1812,8 +1795,7 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, ...rest }) => {
|
|
|
1812
1795
|
]
|
|
1813
1796
|
});
|
|
1814
1797
|
};
|
|
1815
|
-
|
|
1816
|
-
//#region src/components/buttons/MRT_ShowHideColumnsButton.tsx
|
|
1798
|
+
// src/components/buttons/MRT_ShowHideColumnsButton.tsx
|
|
1817
1799
|
const MRT_ShowHideColumnsButton = ({ table, ...rest }) => {
|
|
1818
1800
|
const { options: { icons: { ViewColumnIcon }, localization } } = table;
|
|
1819
1801
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
@@ -1835,8 +1817,7 @@ const MRT_ShowHideColumnsButton = ({ table, ...rest }) => {
|
|
|
1835
1817
|
table
|
|
1836
1818
|
})] });
|
|
1837
1819
|
};
|
|
1838
|
-
|
|
1839
|
-
//#region src/components/buttons/MRT_ToggleDensePaddingButton.tsx
|
|
1820
|
+
// src/components/buttons/MRT_ToggleDensePaddingButton.tsx
|
|
1840
1821
|
const MRT_ToggleDensePaddingButton = ({ table, ...rest }) => {
|
|
1841
1822
|
const { options: { icons: { DensityLargeIcon, DensityMediumIcon, DensitySmallIcon }, localization }, setDensity } = table;
|
|
1842
1823
|
const { density } = table.state;
|
|
@@ -1854,8 +1835,7 @@ const MRT_ToggleDensePaddingButton = ({ table, ...rest }) => {
|
|
|
1854
1835
|
})
|
|
1855
1836
|
});
|
|
1856
1837
|
};
|
|
1857
|
-
|
|
1858
|
-
//#region src/components/buttons/MRT_ToggleFiltersButton.tsx
|
|
1838
|
+
// src/components/buttons/MRT_ToggleFiltersButton.tsx
|
|
1859
1839
|
const MRT_ToggleFiltersButton = ({ table, ...rest }) => {
|
|
1860
1840
|
const { options: { icons: { FilterListIcon, FilterListOffIcon }, localization }, setShowColumnFilters } = table;
|
|
1861
1841
|
const { showColumnFilters } = table.state;
|
|
@@ -1873,8 +1853,7 @@ const MRT_ToggleFiltersButton = ({ table, ...rest }) => {
|
|
|
1873
1853
|
})
|
|
1874
1854
|
});
|
|
1875
1855
|
};
|
|
1876
|
-
|
|
1877
|
-
//#region src/components/buttons/MRT_ToggleFullScreenButton.tsx
|
|
1856
|
+
// src/components/buttons/MRT_ToggleFullScreenButton.tsx
|
|
1878
1857
|
const MRT_ToggleFullScreenButton = ({ table, ...rest }) => {
|
|
1879
1858
|
const { options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization }, setIsFullScreen } = table;
|
|
1880
1859
|
const { isFullScreen } = table.state;
|
|
@@ -1899,8 +1878,7 @@ const MRT_ToggleFullScreenButton = ({ table, ...rest }) => {
|
|
|
1899
1878
|
})
|
|
1900
1879
|
});
|
|
1901
1880
|
};
|
|
1902
|
-
|
|
1903
|
-
//#region src/components/buttons/MRT_ToggleGlobalFilterButton.tsx
|
|
1881
|
+
// src/components/buttons/MRT_ToggleGlobalFilterButton.tsx
|
|
1904
1882
|
const MRT_ToggleGlobalFilterButton = ({ table, ...rest }) => {
|
|
1905
1883
|
const { options: { icons: { SearchIcon, SearchOffIcon }, localization }, refs: { searchInputRef }, setShowGlobalFilter } = table;
|
|
1906
1884
|
const { globalFilter, showGlobalFilter } = table.state;
|
|
@@ -1920,8 +1898,7 @@ const MRT_ToggleGlobalFilterButton = ({ table, ...rest }) => {
|
|
|
1920
1898
|
}) })
|
|
1921
1899
|
});
|
|
1922
1900
|
};
|
|
1923
|
-
|
|
1924
|
-
//#region src/components/menus/MRT_ActionMenuItem.tsx
|
|
1901
|
+
// src/components/menus/MRT_ActionMenuItem.tsx
|
|
1925
1902
|
const MRT_ActionMenuItem = ({ icon, label, onOpenSubMenu, table, ...rest }) => {
|
|
1926
1903
|
const { options: { icons: { ArrowRightIcon } } } = table;
|
|
1927
1904
|
return /* @__PURE__ */ jsxs(MenuItem, {
|
|
@@ -1949,8 +1926,7 @@ const MRT_ActionMenuItem = ({ icon, label, onOpenSubMenu, table, ...rest }) => {
|
|
|
1949
1926
|
})]
|
|
1950
1927
|
});
|
|
1951
1928
|
};
|
|
1952
|
-
|
|
1953
|
-
//#region src/components/menus/MRT_RowActionMenu.tsx
|
|
1929
|
+
// src/components/menus/MRT_RowActionMenu.tsx
|
|
1954
1930
|
const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table, ...rest }) => {
|
|
1955
1931
|
const { options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderRowActionMenuItems } } = table;
|
|
1956
1932
|
const { density } = table.state;
|
|
@@ -1972,8 +1948,14 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, staticRowIn
|
|
|
1972
1948
|
if (rowActionMenuItems?.length) items.push(...rowActionMenuItems);
|
|
1973
1949
|
return items;
|
|
1974
1950
|
}, [
|
|
1951
|
+
EditIcon,
|
|
1952
|
+
editDisplayMode,
|
|
1953
|
+
enableEditing,
|
|
1954
|
+
handleEdit,
|
|
1955
|
+
localization.edit,
|
|
1975
1956
|
renderRowActionMenuItems,
|
|
1976
1957
|
row,
|
|
1958
|
+
setAnchorEl,
|
|
1977
1959
|
staticRowIndex,
|
|
1978
1960
|
table
|
|
1979
1961
|
]);
|
|
@@ -1992,8 +1974,7 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, staticRowIn
|
|
|
1992
1974
|
children: menuItems
|
|
1993
1975
|
});
|
|
1994
1976
|
};
|
|
1995
|
-
|
|
1996
|
-
//#region src/components/buttons/MRT_ToggleRowActionMenuButton.tsx
|
|
1977
|
+
// src/components/buttons/MRT_ToggleRowActionMenuButton.tsx
|
|
1997
1978
|
const commonIconButtonStyles = {
|
|
1998
1979
|
"&:hover": { opacity: 1 },
|
|
1999
1980
|
height: "2rem",
|
|
@@ -2039,6 +2020,7 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, staticRowIndex, table, ...re
|
|
|
2039
2020
|
})
|
|
2040
2021
|
}) : renderRowActionMenuItems?.({
|
|
2041
2022
|
row,
|
|
2023
|
+
closeMenu: () => {},
|
|
2042
2024
|
staticRowIndex,
|
|
2043
2025
|
table
|
|
2044
2026
|
})?.length ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tooltip, {
|
|
@@ -2061,8 +2043,7 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, staticRowIndex, table, ...re
|
|
|
2061
2043
|
table
|
|
2062
2044
|
})] }) : null });
|
|
2063
2045
|
};
|
|
2064
|
-
|
|
2065
|
-
//#region src/components/footer/MRT_TableFooterCell.tsx
|
|
2046
|
+
// src/components/footer/MRT_TableFooterCell.tsx
|
|
2066
2047
|
const MRT_TableFooterCell = ({ footer, staticColumnIndex, table, ...rest }) => {
|
|
2067
2048
|
const theme = useTheme();
|
|
2068
2049
|
const { options: { enableColumnPinning, enableKeyboardShortcuts, muiTableFooterCellProps } } = table;
|
|
@@ -2117,8 +2098,7 @@ const MRT_TableFooterCell = ({ footer, staticColumnIndex, table, ...rest }) => {
|
|
|
2117
2098
|
}) ?? columnDef.footer ?? null)
|
|
2118
2099
|
});
|
|
2119
2100
|
};
|
|
2120
|
-
|
|
2121
|
-
//#region src/components/footer/MRT_TableFooterRow.tsx
|
|
2101
|
+
// src/components/footer/MRT_TableFooterRow.tsx
|
|
2122
2102
|
const MRT_TableFooterRow = ({ columnVirtualizer, footerGroup, table, ...rest }) => {
|
|
2123
2103
|
const { options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiTableFooterRowProps } } = table;
|
|
2124
2104
|
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
|
|
@@ -2163,8 +2143,7 @@ const MRT_TableFooterRow = ({ columnVirtualizer, footerGroup, table, ...rest })
|
|
|
2163
2143
|
]
|
|
2164
2144
|
});
|
|
2165
2145
|
};
|
|
2166
|
-
|
|
2167
|
-
//#region src/components/footer/MRT_TableFooter.tsx
|
|
2146
|
+
// src/components/footer/MRT_TableFooter.tsx
|
|
2168
2147
|
const MRT_TableFooter = ({ columnVirtualizer, table, ...rest }) => {
|
|
2169
2148
|
const { options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef } } = table;
|
|
2170
2149
|
const { isFullScreen } = table.state;
|
|
@@ -2179,7 +2158,7 @@ const MRT_TableFooter = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
2179
2158
|
...tableFooterProps,
|
|
2180
2159
|
ref: (ref) => {
|
|
2181
2160
|
tableFooterRef.current = ref;
|
|
2182
|
-
if (tableFooterProps?.ref) tableFooterProps.ref.current = ref;
|
|
2161
|
+
if (tableFooterProps?.ref && typeof tableFooterProps.ref === "object") tableFooterProps.ref.current = ref;
|
|
2183
2162
|
},
|
|
2184
2163
|
sx: (theme) => ({
|
|
2185
2164
|
bottom: stickFooter ? 0 : void 0,
|
|
@@ -2197,8 +2176,7 @@ const MRT_TableFooter = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
2197
2176
|
}, footerGroup.id))
|
|
2198
2177
|
});
|
|
2199
2178
|
};
|
|
2200
|
-
|
|
2201
|
-
//#region src/components/inputs/MRT_SelectCheckbox.tsx
|
|
2179
|
+
// src/components/inputs/MRT_SelectCheckbox.tsx
|
|
2202
2180
|
const MRT_SelectCheckbox = ({ row, staticRowIndex, table, ...rest }) => {
|
|
2203
2181
|
const { options: { enableMultiRowSelection, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, selectAllMode } } = table;
|
|
2204
2182
|
const { density, isLoading } = table.state;
|
|
@@ -2228,7 +2206,8 @@ const MRT_SelectCheckbox = ({ row, staticRowIndex, table, ...rest }) => {
|
|
|
2228
2206
|
disabled: isLoading || row && !row.getCanSelect() || row?.id === "mrt-row-create",
|
|
2229
2207
|
onChange: (event) => {
|
|
2230
2208
|
event.stopPropagation();
|
|
2231
|
-
|
|
2209
|
+
if (selectAll) onSelectAllChange(event);
|
|
2210
|
+
else onSelectionChange(event);
|
|
2232
2211
|
},
|
|
2233
2212
|
size: density === "compact" ? "small" : "medium",
|
|
2234
2213
|
slotProps: { input: { "aria-label": selectAll ? localization.toggleSelectAll : localization.toggleSelectRow } },
|
|
@@ -2255,8 +2234,7 @@ const MRT_SelectCheckbox = ({ row, staticRowIndex, table, ...rest }) => {
|
|
|
2255
2234
|
})
|
|
2256
2235
|
});
|
|
2257
2236
|
};
|
|
2258
|
-
|
|
2259
|
-
//#region src/components/toolbar/MRT_ToolbarAlertBanner.tsx
|
|
2237
|
+
// src/components/toolbar/MRT_ToolbarAlertBanner.tsx
|
|
2260
2238
|
const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, ...rest }) => {
|
|
2261
2239
|
const { getCoreRowModel, getFilteredSelectedRowModel, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount }, refs: { tablePaperRef } } = table;
|
|
2262
2240
|
const { density, grouping, rowSelection, showAlertBanner } = table.state;
|
|
@@ -2269,7 +2247,6 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, ...rest }) => {
|
|
|
2269
2247
|
const filteredRowCount = getFilteredSelectedRowModel().rows.length;
|
|
2270
2248
|
const selectedRowCount = useMemo(() => manualPagination ? Object.values(rowSelection).filter(Boolean).length : filteredRowCount, [
|
|
2271
2249
|
rowSelection,
|
|
2272
|
-
totalRowCount,
|
|
2273
2250
|
manualPagination,
|
|
2274
2251
|
filteredRowCount
|
|
2275
2252
|
]);
|
|
@@ -2343,8 +2320,7 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, ...rest }) => {
|
|
|
2343
2320
|
})
|
|
2344
2321
|
});
|
|
2345
2322
|
};
|
|
2346
|
-
|
|
2347
|
-
//#region src/components/menus/MRT_FilterOptionMenu.tsx
|
|
2323
|
+
// src/components/menus/MRT_FilterOptionMenu.tsx
|
|
2348
2324
|
const mrtFilterOptions = (localization) => [
|
|
2349
2325
|
{
|
|
2350
2326
|
divider: false,
|
|
@@ -2456,11 +2432,11 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
|
|
|
2456
2432
|
const currentFilterValue = column?.getFilterValue();
|
|
2457
2433
|
let allowedColumnFilterOptions = columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
|
|
2458
2434
|
if (rangeVariants.includes(columnDef?.filterVariant)) allowedColumnFilterOptions = [...rangeModes, ...allowedColumnFilterOptions ?? []].filter((option) => rangeModes.includes(option));
|
|
2459
|
-
const internalFilterOptions =
|
|
2435
|
+
const [internalFilterOptions] = useState(() => mrtFilterOptions(localization).filter((filterOption) => columnDef ? allowedColumnFilterOptions === void 0 || allowedColumnFilterOptions?.includes(filterOption.option) : (!globalFilterModeOptions || globalFilterModeOptions.includes(filterOption.option)) && [
|
|
2460
2436
|
"contains",
|
|
2461
2437
|
"fuzzy",
|
|
2462
2438
|
"startsWith"
|
|
2463
|
-
].includes(filterOption.option))
|
|
2439
|
+
].includes(filterOption.option)));
|
|
2464
2440
|
const handleSelectFilterMode = (option) => {
|
|
2465
2441
|
const prevFilterMode = columnDef?._filterFn ?? "";
|
|
2466
2442
|
if (!header || !column) setGlobalFilterFn(option);
|
|
@@ -2531,8 +2507,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
|
|
|
2531
2507
|
}, index))
|
|
2532
2508
|
});
|
|
2533
2509
|
};
|
|
2534
|
-
|
|
2535
|
-
//#region src/components/menus/MRT_ColumnActionMenu.tsx
|
|
2510
|
+
// src/components/menus/MRT_ColumnActionMenu.tsx
|
|
2536
2511
|
const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, ...rest }) => {
|
|
2537
2512
|
const { getAllLeafColumns, options: { columnFilterDisplayMode, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon }, localization, mrtTheme: { menuBackgroundColor }, renderColumnActionsMenuItems }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnResizing, setShowColumnFilters } = table;
|
|
2538
2513
|
const { column } = header;
|
|
@@ -2725,8 +2700,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, ...rest })
|
|
|
2725
2700
|
}) ?? internalColumnMenuItems
|
|
2726
2701
|
});
|
|
2727
2702
|
};
|
|
2728
|
-
|
|
2729
|
-
//#region src/components/head/MRT_TableHeadCellColumnActionsButton.tsx
|
|
2703
|
+
// src/components/head/MRT_TableHeadCellColumnActionsButton.tsx
|
|
2730
2704
|
const MRT_TableHeadCellColumnActionsButton = ({ header, table, ...rest }) => {
|
|
2731
2705
|
const { options: { icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps } } = table;
|
|
2732
2706
|
const { column } = header;
|
|
@@ -2775,8 +2749,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, ...rest }) => {
|
|
|
2775
2749
|
table
|
|
2776
2750
|
})] });
|
|
2777
2751
|
};
|
|
2778
|
-
|
|
2779
|
-
//#region src/components/inputs/MRT_FilterCheckbox.tsx
|
|
2752
|
+
// src/components/inputs/MRT_FilterCheckbox.tsx
|
|
2780
2753
|
const MRT_FilterCheckbox = ({ column, table, ...rest }) => {
|
|
2781
2754
|
const { options: { localization, muiFilterCheckboxProps } } = table;
|
|
2782
2755
|
const { density } = table.state;
|
|
@@ -2828,8 +2801,7 @@ const MRT_FilterCheckbox = ({ column, table, ...rest }) => {
|
|
|
2828
2801
|
})
|
|
2829
2802
|
});
|
|
2830
2803
|
};
|
|
2831
|
-
|
|
2832
|
-
//#region src/components/inputs/MRT_FilterTextField.tsx
|
|
2804
|
+
// src/components/inputs/MRT_FilterTextField.tsx
|
|
2833
2805
|
const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
2834
2806
|
const { options: { enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps }, refs: { filterInputRefs }, setColumnFilterFns } = table;
|
|
2835
2807
|
const { column } = header;
|
|
@@ -2869,20 +2841,20 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
2869
2841
|
header,
|
|
2870
2842
|
table
|
|
2871
2843
|
});
|
|
2872
|
-
const filterChipLabel = ["empty", "notEmpty"].includes(currentFilterOption) ? localization
|
|
2844
|
+
const filterChipLabel = ["empty", "notEmpty"].includes(currentFilterOption) ? getFilterOptionLabel(localization, currentFilterOption) : "";
|
|
2873
2845
|
const filterPlaceholder = !isRangeFilter ? textFieldProps?.placeholder ?? localization.filterByColumn?.replace("{column}", String(columnDef.header)) : rangeFilterIndex === 0 ? localization.min : rangeFilterIndex === 1 ? localization.max : "";
|
|
2874
2846
|
const showChangeModeButton = !!(enableColumnFilterModes && columnDef.enableColumnFilterModes !== false && !rangeFilterIndex && (allowedColumnFilterOptions === void 0 || !!allowedColumnFilterOptions?.length));
|
|
2875
2847
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
2876
2848
|
const [filterValue, setFilterValue] = useState(() => isMultiSelectFilter ? column.getFilterValue() || [] : isRangeFilter ? column.getFilterValue()?.[rangeFilterIndex] || "" : isAutocompleteFilter ? typeof column.getFilterValue() === "string" ? column.getFilterValue() : "" : column.getFilterValue() ?? "");
|
|
2877
2849
|
const [autocompleteValue, setAutocompleteValue] = useState(() => isAutocompleteFilter ? column.getFilterValue() || null : null);
|
|
2878
|
-
const handleChangeDebounced =
|
|
2850
|
+
const [handleChangeDebounced] = useState(() => debounce((newValue) => {
|
|
2879
2851
|
if (isRangeFilter) column.setFilterValue((old) => {
|
|
2880
2852
|
const newFilterValues = old ?? ["", ""];
|
|
2881
2853
|
newFilterValues[rangeFilterIndex] = newValue ?? void 0;
|
|
2882
2854
|
return newFilterValues;
|
|
2883
2855
|
});
|
|
2884
2856
|
else column.setFilterValue(newValue ?? void 0);
|
|
2885
|
-
}, isTextboxFilter ? manualFiltering ? 400 : 200 : 1)
|
|
2857
|
+
}, isTextboxFilter ? manualFiltering ? 400 : 200 : 1));
|
|
2886
2858
|
const handleChange = (newValue) => {
|
|
2887
2859
|
setFilterValue(newValue ?? "");
|
|
2888
2860
|
handleChangeDebounced(newValue);
|
|
@@ -2930,15 +2902,24 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
2930
2902
|
setAnchorEl(event.currentTarget);
|
|
2931
2903
|
};
|
|
2932
2904
|
const isMounted = useRef(false);
|
|
2905
|
+
const handleClearRef = useRef(handleClear);
|
|
2906
|
+
const columnFilterValue = column.getFilterValue();
|
|
2907
|
+
useEffect(() => {
|
|
2908
|
+
handleClearRef.current = handleClear;
|
|
2909
|
+
});
|
|
2933
2910
|
useEffect(() => {
|
|
2934
2911
|
if (isMounted.current) {
|
|
2935
|
-
const filterValue =
|
|
2936
|
-
if (filterValue === void 0)
|
|
2912
|
+
const filterValue = columnFilterValue;
|
|
2913
|
+
if (filterValue === void 0) handleClearRef.current();
|
|
2937
2914
|
else if (isRangeFilter && rangeFilterIndex !== void 0) setFilterValue(filterValue[rangeFilterIndex]);
|
|
2938
2915
|
else setFilterValue(filterValue);
|
|
2939
2916
|
}
|
|
2940
2917
|
isMounted.current = true;
|
|
2941
|
-
}, [
|
|
2918
|
+
}, [
|
|
2919
|
+
columnFilterValue,
|
|
2920
|
+
isRangeFilter,
|
|
2921
|
+
rangeFilterIndex
|
|
2922
|
+
]);
|
|
2942
2923
|
if (columnDef.Filter) return /* @__PURE__ */ jsx(Fragment$1, { children: columnDef.Filter?.({
|
|
2943
2924
|
column,
|
|
2944
2925
|
header,
|
|
@@ -2949,7 +2930,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
2949
2930
|
position: "end",
|
|
2950
2931
|
sx: {
|
|
2951
2932
|
mr: isSelectFilter || isMultiSelectFilter ? "20px" : void 0,
|
|
2952
|
-
visibility: (filterValue
|
|
2933
|
+
visibility: (typeof filterValue === "string" || Array.isArray(filterValue)) && filterValue.length > 0 ? "visible" : "hidden"
|
|
2953
2934
|
},
|
|
2954
2935
|
children: /* @__PURE__ */ jsx(Tooltip, {
|
|
2955
2936
|
placement: "right",
|
|
@@ -2989,7 +2970,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
2989
2970
|
}) : null;
|
|
2990
2971
|
const commonTextFieldProps = {
|
|
2991
2972
|
fullWidth: true,
|
|
2992
|
-
helperText: showChangeModeButton ? /* @__PURE__ */ jsx("label", { children: localization.filterMode.replace("{filterType}", localization
|
|
2973
|
+
helperText: showChangeModeButton ? /* @__PURE__ */ jsx("label", { children: localization.filterMode.replace("{filterType}", getFilterOptionLabel(localization, currentFilterOption)) }) : null,
|
|
2993
2974
|
inputRef: (inputRef) => {
|
|
2994
2975
|
filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] = inputRef;
|
|
2995
2976
|
if (textFieldProps.inputRef) textFieldProps.inputRef = inputRef;
|
|
@@ -3195,8 +3176,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
3195
3176
|
table
|
|
3196
3177
|
})] });
|
|
3197
3178
|
};
|
|
3198
|
-
|
|
3199
|
-
//#region src/components/inputs/MRT_FilterRangeFields.tsx
|
|
3179
|
+
// src/components/inputs/MRT_FilterRangeFields.tsx
|
|
3200
3180
|
const MRT_FilterRangeFields = ({ header, table, ...rest }) => {
|
|
3201
3181
|
return /* @__PURE__ */ jsx(Box, {
|
|
3202
3182
|
...rest,
|
|
@@ -3213,8 +3193,7 @@ const MRT_FilterRangeFields = ({ header, table, ...rest }) => {
|
|
|
3213
3193
|
}, rangeFilterIndex))
|
|
3214
3194
|
});
|
|
3215
3195
|
};
|
|
3216
|
-
|
|
3217
|
-
//#region src/components/inputs/MRT_FilterRangeSlider.tsx
|
|
3196
|
+
// src/components/inputs/MRT_FilterRangeSlider.tsx
|
|
3218
3197
|
const MRT_FilterRangeSlider = ({ header, table, ...rest }) => {
|
|
3219
3198
|
const { options: { enableColumnFilterModes, localization, muiFilterSliderProps }, refs: { filterInputRefs } } = table;
|
|
3220
3199
|
const { column } = header;
|
|
@@ -3277,7 +3256,8 @@ const MRT_FilterRangeSlider = ({ header, table, ...rest }) => {
|
|
|
3277
3256
|
slotProps: { input: { ref: (node) => {
|
|
3278
3257
|
if (node) {
|
|
3279
3258
|
filterInputRefs.current[`${column.id}-0`] = node;
|
|
3280
|
-
|
|
3259
|
+
const inputSlot = sliderProps?.slotProps?.input;
|
|
3260
|
+
if (inputSlot && typeof inputSlot === "object" && inputSlot.ref && typeof inputSlot.ref === "object") inputSlot.ref.current = node;
|
|
3281
3261
|
}
|
|
3282
3262
|
} } },
|
|
3283
3263
|
sx: (theme) => ({
|
|
@@ -3295,11 +3275,10 @@ const MRT_FilterRangeSlider = ({ header, table, ...rest }) => {
|
|
|
3295
3275
|
m: "-3px -6px",
|
|
3296
3276
|
whiteSpace: "nowrap"
|
|
3297
3277
|
},
|
|
3298
|
-
children: localization.filterMode.replace("{filterType}", localization
|
|
3278
|
+
children: localization.filterMode.replace("{filterType}", getFilterOptionLabel(localization, currentFilterOption))
|
|
3299
3279
|
}) : null] });
|
|
3300
3280
|
};
|
|
3301
|
-
|
|
3302
|
-
//#region src/components/head/MRT_TableHeadCellFilterContainer.tsx
|
|
3281
|
+
// src/components/head/MRT_TableHeadCellFilterContainer.tsx
|
|
3303
3282
|
const MRT_TableHeadCellFilterContainer = ({ header, table, ...rest }) => {
|
|
3304
3283
|
const { options: { columnFilterDisplayMode } } = table;
|
|
3305
3284
|
const { showColumnFilters } = table.state;
|
|
@@ -3329,8 +3308,7 @@ const MRT_TableHeadCellFilterContainer = ({ header, table, ...rest }) => {
|
|
|
3329
3308
|
})
|
|
3330
3309
|
});
|
|
3331
3310
|
};
|
|
3332
|
-
|
|
3333
|
-
//#region src/components/head/MRT_TableHeadCellFilterLabel.tsx
|
|
3311
|
+
// src/components/head/MRT_TableHeadCellFilterLabel.tsx
|
|
3334
3312
|
const MRT_TableHeadCellFilterLabel = ({ header, table, ...rest }) => {
|
|
3335
3313
|
const { options: { columnFilterDisplayMode, icons: { FilterAltIcon }, localization }, refs: { filterInputRefs }, setShowColumnFilters } = table;
|
|
3336
3314
|
const { column } = header;
|
|
@@ -3347,7 +3325,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, ...rest }) => {
|
|
|
3347
3325
|
});
|
|
3348
3326
|
const getSelectLabel = (index) => getValueAndLabel(dropdownOptions?.find((option) => getValueAndLabel(option).value === (index !== void 0 ? filterValue[index] : filterValue))).label;
|
|
3349
3327
|
const isFilterActive = Array.isArray(filterValue) && filterValue.some(Boolean) || !!filterValue && !Array.isArray(filterValue);
|
|
3350
|
-
const filterTooltip = columnFilterDisplayMode === "popover" && !isFilterActive ? localization.filterByColumn?.replace("{column}", String(columnDef.header)) : localization.filteringByColumn.replace("{column}", String(columnDef.header)).replace("{filterType}", currentFilterOption ? localization
|
|
3328
|
+
const filterTooltip = columnFilterDisplayMode === "popover" && !isFilterActive ? localization.filterByColumn?.replace("{column}", String(columnDef.header)) : localization.filteringByColumn.replace("{column}", String(columnDef.header)).replace("{filterType}", currentFilterOption ? getFilterOptionLabel(localization, currentFilterOption) : "").replace("{filterValue}", `"${Array.isArray(filterValue) ? filterValue.map((value, index) => isMultiSelectFilter ? getSelectLabel(index) : value).join(`" ${isRangeFilter ? localization.and : localization.or} "`) : isSelectFilter ? getSelectLabel() : filterValue}"`).replace("\" \"", "");
|
|
3351
3329
|
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Grow, {
|
|
3352
3330
|
in: columnFilterDisplayMode === "popover" || !!filterValue && !isRangeFilter || isRangeFilter && (!!filterValue?.[0] || !!filterValue?.[1]),
|
|
3353
3331
|
unmountOnExit: true,
|
|
@@ -3393,7 +3371,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, ...rest }) => {
|
|
|
3393
3371
|
disableScrollLock: true,
|
|
3394
3372
|
onClick: (event) => event.stopPropagation(),
|
|
3395
3373
|
onClose: (event) => {
|
|
3396
|
-
event.stopPropagation();
|
|
3374
|
+
event.stopPropagation?.();
|
|
3397
3375
|
setAnchorEl(null);
|
|
3398
3376
|
},
|
|
3399
3377
|
onKeyDown: (event) => event.key === "Enter" && setAnchorEl(null),
|
|
@@ -3412,12 +3390,11 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, ...rest }) => {
|
|
|
3412
3390
|
})
|
|
3413
3391
|
})] });
|
|
3414
3392
|
};
|
|
3415
|
-
|
|
3416
|
-
//#region src/components/head/MRT_TableHeadCellGrabHandle.tsx
|
|
3393
|
+
// src/components/head/MRT_TableHeadCellGrabHandle.tsx
|
|
3417
3394
|
const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, ...rest }) => {
|
|
3418
|
-
const { options: { enableColumnOrdering, muiColumnDragHandleProps },
|
|
3395
|
+
const { options: { enableColumnOrdering, muiColumnDragHandleProps }, setDraggingColumn, setHoveredColumn } = table;
|
|
3419
3396
|
const { columnDef } = column;
|
|
3420
|
-
const {
|
|
3397
|
+
const { draggingColumn, hoveredColumn } = table.state;
|
|
3421
3398
|
const iconButtonProps = {
|
|
3422
3399
|
...parseFromValuesOrFunc(muiColumnDragHandleProps, {
|
|
3423
3400
|
column,
|
|
@@ -3441,14 +3418,7 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, ...rest
|
|
|
3441
3418
|
const handleDragEnd = (event) => {
|
|
3442
3419
|
iconButtonProps?.onDragEnd?.(event);
|
|
3443
3420
|
if (hoveredColumn?.id === "drop-zone") column.toggleGrouping();
|
|
3444
|
-
else if (enableColumnOrdering && hoveredColumn && hoveredColumn?.id !== draggingColumn?.id)
|
|
3445
|
-
const reorderedColumns = reorderColumn(column, hoveredColumn, columnOrder);
|
|
3446
|
-
setColumnOrder(reorderedColumns);
|
|
3447
|
-
setColumnPinning(({ end = [], start = [] }) => ({
|
|
3448
|
-
end: reorderedColumns.filter((header) => end.includes(header)),
|
|
3449
|
-
start: reorderedColumns.filter((header) => start.includes(header))
|
|
3450
|
-
}));
|
|
3451
|
-
}
|
|
3421
|
+
else if (enableColumnOrdering && hoveredColumn && hoveredColumn?.id !== draggingColumn?.id) moveColumn(table, column, hoveredColumn);
|
|
3452
3422
|
setDraggingColumn(null);
|
|
3453
3423
|
setHoveredColumn(null);
|
|
3454
3424
|
};
|
|
@@ -3459,8 +3429,7 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, ...rest
|
|
|
3459
3429
|
table
|
|
3460
3430
|
});
|
|
3461
3431
|
};
|
|
3462
|
-
|
|
3463
|
-
//#region src/components/head/MRT_TableHeadCellResizeHandle.tsx
|
|
3432
|
+
// src/components/head/MRT_TableHeadCellResizeHandle.tsx
|
|
3464
3433
|
const MRT_TableHeadCellResizeHandle = ({ header, table, ...rest }) => {
|
|
3465
3434
|
const { options: { columnResizeDirection, columnResizeMode }, setColumnResizing } = table;
|
|
3466
3435
|
const { density } = table.state;
|
|
@@ -3511,8 +3480,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table, ...rest }) => {
|
|
|
3511
3480
|
})
|
|
3512
3481
|
});
|
|
3513
3482
|
};
|
|
3514
|
-
|
|
3515
|
-
//#region src/components/head/MRT_TableHeadCellSortLabel.tsx
|
|
3483
|
+
// src/components/head/MRT_TableHeadCellSortLabel.tsx
|
|
3516
3484
|
const MRT_TableHeadCellSortLabel = ({ header, table, ...rest }) => {
|
|
3517
3485
|
const { options: { icons: { ArrowDownwardIcon, SyncAltIcon }, localization } } = table;
|
|
3518
3486
|
const { column } = header;
|
|
@@ -3553,8 +3521,7 @@ const MRT_TableHeadCellSortLabel = ({ header, table, ...rest }) => {
|
|
|
3553
3521
|
})
|
|
3554
3522
|
});
|
|
3555
3523
|
};
|
|
3556
|
-
|
|
3557
|
-
//#region src/components/head/MRT_TableHeadCell.tsx
|
|
3524
|
+
// src/components/head/MRT_TableHeadCell.tsx
|
|
3558
3525
|
const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table, ...rest }) => {
|
|
3559
3526
|
const theme = useTheme();
|
|
3560
3527
|
const { options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableKeyboardShortcuts, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps }, refs: { tableHeadCellRefs }, setHoveredColumn } = table;
|
|
@@ -3582,7 +3549,11 @@ const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table
|
|
|
3582
3549
|
if (showColumnActions) pl += 1.75;
|
|
3583
3550
|
if (showDragHandle) pl += 1.5;
|
|
3584
3551
|
return pl;
|
|
3585
|
-
}, [
|
|
3552
|
+
}, [
|
|
3553
|
+
column,
|
|
3554
|
+
showColumnActions,
|
|
3555
|
+
showDragHandle
|
|
3556
|
+
]);
|
|
3586
3557
|
const draggingBorders = useMemo(() => {
|
|
3587
3558
|
const showResizeBorder = columnResizing.isResizingColumn === column.id && columnResizeMode === "onChange" && !header.subHeaders.length;
|
|
3588
3559
|
const borderStyle = showResizeBorder ? `2px solid ${draggingBorderColor} !important` : draggingColumn?.id === column.id ? `1px dashed ${theme.palette.grey[500]}` : hoveredColumn?.id === column.id ? `2px dashed ${draggingBorderColor}` : void 0;
|
|
@@ -3593,9 +3564,15 @@ const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table
|
|
|
3593
3564
|
borderTop: borderStyle
|
|
3594
3565
|
} : void 0;
|
|
3595
3566
|
}, [
|
|
3567
|
+
column.id,
|
|
3568
|
+
columnResizeDirection,
|
|
3569
|
+
columnResizeMode,
|
|
3570
|
+
columnResizing.isResizingColumn,
|
|
3571
|
+
draggingBorderColor,
|
|
3596
3572
|
draggingColumn,
|
|
3573
|
+
header.subHeaders.length,
|
|
3597
3574
|
hoveredColumn,
|
|
3598
|
-
|
|
3575
|
+
theme.palette.grey
|
|
3599
3576
|
]);
|
|
3600
3577
|
const handleDragEnter = (_e) => {
|
|
3601
3578
|
if (enableGrouping && hoveredColumn?.id === "drop-zone") setHoveredColumn(null);
|
|
@@ -3731,8 +3708,7 @@ const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table
|
|
|
3731
3708
|
})]
|
|
3732
3709
|
});
|
|
3733
3710
|
};
|
|
3734
|
-
|
|
3735
|
-
//#region src/components/head/MRT_TableHeadRow.tsx
|
|
3711
|
+
// src/components/head/MRT_TableHeadRow.tsx
|
|
3736
3712
|
const MRT_TableHeadRow = ({ columnVirtualizer, headerGroup, table, ...rest }) => {
|
|
3737
3713
|
const { options: { enableStickyHeader, layoutMode, mrtTheme: { baseBackgroundColor }, muiTableHeadRowProps } } = table;
|
|
3738
3714
|
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
|
|
@@ -3778,8 +3754,7 @@ const MRT_TableHeadRow = ({ columnVirtualizer, headerGroup, table, ...rest }) =>
|
|
|
3778
3754
|
]
|
|
3779
3755
|
});
|
|
3780
3756
|
};
|
|
3781
|
-
|
|
3782
|
-
//#region src/components/head/MRT_TableHead.tsx
|
|
3757
|
+
// src/components/head/MRT_TableHead.tsx
|
|
3783
3758
|
const MRT_TableHead = ({ columnVirtualizer, table, ...rest }) => {
|
|
3784
3759
|
const { options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner }, refs: { tableHeadRef } } = table;
|
|
3785
3760
|
const { isFullScreen, showAlertBanner } = table.state;
|
|
@@ -3792,7 +3767,7 @@ const MRT_TableHead = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
3792
3767
|
...tableHeadProps,
|
|
3793
3768
|
ref: (ref) => {
|
|
3794
3769
|
tableHeadRef.current = ref;
|
|
3795
|
-
if (tableHeadProps?.ref) tableHeadProps.ref.current = ref;
|
|
3770
|
+
if (tableHeadProps?.ref && typeof tableHeadProps.ref === "object") tableHeadProps.ref.current = ref;
|
|
3796
3771
|
},
|
|
3797
3772
|
sx: (theme) => ({
|
|
3798
3773
|
display: layoutMode?.startsWith("grid") ? "grid" : void 0,
|
|
@@ -3819,8 +3794,7 @@ const MRT_TableHead = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
3819
3794
|
}, headerGroup.id))
|
|
3820
3795
|
});
|
|
3821
3796
|
};
|
|
3822
|
-
|
|
3823
|
-
//#region src/components/inputs/MRT_GlobalFilterTextField.tsx
|
|
3797
|
+
// src/components/inputs/MRT_GlobalFilterTextField.tsx
|
|
3824
3798
|
const MRT_GlobalFilterTextField = ({ table, ...rest }) => {
|
|
3825
3799
|
const { options: { enableGlobalFilterModes, icons: { CloseIcon, SearchIcon }, localization, manualFiltering, muiSearchTextFieldProps }, refs: { searchInputRef }, setGlobalFilter } = table;
|
|
3826
3800
|
const { globalFilter, showGlobalFilter } = table.state;
|
|
@@ -3831,9 +3805,9 @@ const MRT_GlobalFilterTextField = ({ table, ...rest }) => {
|
|
|
3831
3805
|
const isMounted = useRef(false);
|
|
3832
3806
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
3833
3807
|
const [searchValue, setSearchValue] = useState(globalFilter ?? "");
|
|
3834
|
-
const handleChangeDebounced =
|
|
3808
|
+
const [handleChangeDebounced] = useState(() => debounce((event) => {
|
|
3835
3809
|
setGlobalFilter(event.target.value ?? void 0);
|
|
3836
|
-
}, manualFiltering ? 500 : 250)
|
|
3810
|
+
}, manualFiltering ? 500 : 250));
|
|
3837
3811
|
const handleChange = (event) => {
|
|
3838
3812
|
setSearchValue(event.target.value);
|
|
3839
3813
|
handleChangeDebounced(event);
|
|
@@ -3847,11 +3821,13 @@ const MRT_GlobalFilterTextField = ({ table, ...rest }) => {
|
|
|
3847
3821
|
};
|
|
3848
3822
|
useEffect(() => {
|
|
3849
3823
|
if (isMounted.current) {
|
|
3850
|
-
if (globalFilter === void 0)
|
|
3851
|
-
|
|
3824
|
+
if (globalFilter === void 0) {
|
|
3825
|
+
setSearchValue("");
|
|
3826
|
+
setGlobalFilter(void 0);
|
|
3827
|
+
} else setSearchValue(globalFilter);
|
|
3852
3828
|
}
|
|
3853
3829
|
isMounted.current = true;
|
|
3854
|
-
}, [globalFilter]);
|
|
3830
|
+
}, [globalFilter, setGlobalFilter]);
|
|
3855
3831
|
const consumerSlots = getTextFieldSlotProps(textFieldProps.slotProps);
|
|
3856
3832
|
return /* @__PURE__ */ jsxs(Collapse, {
|
|
3857
3833
|
in: showGlobalFilter,
|
|
@@ -3919,38 +3895,41 @@ const MRT_GlobalFilterTextField = ({ table, ...rest }) => {
|
|
|
3919
3895
|
})]
|
|
3920
3896
|
});
|
|
3921
3897
|
};
|
|
3922
|
-
|
|
3923
|
-
//#region src/fns/aggregationFns.ts
|
|
3898
|
+
// src/fns/aggregationFns.ts
|
|
3924
3899
|
const MRT_AggregationFns = { ...aggregationFns };
|
|
3925
|
-
|
|
3926
|
-
//#region src/fns/filterFns.ts
|
|
3900
|
+
// src/fns/filterFns.ts
|
|
3927
3901
|
const fuzzy = (row, columnId, filterValue, addMeta) => {
|
|
3928
3902
|
const itemRank = rankItem(row.getValue(columnId), filterValue, { threshold: rankings.MATCHES });
|
|
3929
3903
|
addMeta?.(itemRank);
|
|
3930
3904
|
return itemRank.passed;
|
|
3931
3905
|
};
|
|
3932
3906
|
fuzzy.autoRemove = (val) => !val;
|
|
3933
|
-
const
|
|
3907
|
+
const normalize = (value) => value.toString().toLowerCase().trim();
|
|
3908
|
+
const getNormalizedValue = (row, id) => {
|
|
3909
|
+
const value = row.getValue(id);
|
|
3910
|
+
return value === null || value === void 0 ? void 0 : normalize(value);
|
|
3911
|
+
};
|
|
3912
|
+
const contains = (row, id, filterValue) => !!getNormalizedValue(row, id)?.includes(normalize(filterValue));
|
|
3934
3913
|
contains.autoRemove = (val) => !val;
|
|
3935
|
-
const startsWith = (row, id, filterValue) => !!row
|
|
3914
|
+
const startsWith = (row, id, filterValue) => !!getNormalizedValue(row, id)?.startsWith(normalize(filterValue));
|
|
3936
3915
|
startsWith.autoRemove = (val) => !val;
|
|
3937
|
-
const endsWith = (row, id, filterValue) => !!row
|
|
3916
|
+
const endsWith = (row, id, filterValue) => !!getNormalizedValue(row, id)?.endsWith(normalize(filterValue));
|
|
3938
3917
|
endsWith.autoRemove = (val) => !val;
|
|
3939
|
-
const equals = (row, id, filterValue) => row
|
|
3918
|
+
const equals = (row, id, filterValue) => getNormalizedValue(row, id) === normalize(filterValue);
|
|
3940
3919
|
equals.autoRemove = (val) => !val;
|
|
3941
|
-
const notEquals = (row, id, filterValue) => row
|
|
3920
|
+
const notEquals = (row, id, filterValue) => getNormalizedValue(row, id) !== normalize(filterValue);
|
|
3942
3921
|
notEquals.autoRemove = (val) => !val;
|
|
3943
|
-
const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +(row.getValue(id) ?? 0) > +filterValue : (row
|
|
3922
|
+
const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +(row.getValue(id) ?? 0) > +filterValue : (getNormalizedValue(row, id) ?? "") > normalize(filterValue);
|
|
3944
3923
|
greaterThan.autoRemove = (val) => !val;
|
|
3945
3924
|
const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
|
|
3946
3925
|
greaterThanOrEqualTo.autoRemove = (val) => !val;
|
|
3947
|
-
const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +(row.getValue(id) ?? 0) < +filterValue : (row
|
|
3926
|
+
const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +(row.getValue(id) ?? 0) < +filterValue : (getNormalizedValue(row, id) ?? "") < normalize(filterValue);
|
|
3948
3927
|
lessThan.autoRemove = (val) => !val;
|
|
3949
3928
|
const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
|
|
3950
3929
|
lessThanOrEqualTo.autoRemove = (val) => !val;
|
|
3951
|
-
const between = (row, id, filterValues) => ([""
|
|
3930
|
+
const between = (row, id, filterValues) => (filterValues[0] === "" || filterValues[0] === void 0 || greaterThan(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || filterValues[1] === "" || filterValues[1] === void 0 || lessThan(row, id, filterValues[1]));
|
|
3952
3931
|
between.autoRemove = (val) => !val;
|
|
3953
|
-
const betweenInclusive = (row, id, filterValues) => ([""
|
|
3932
|
+
const betweenInclusive = (row, id, filterValues) => (filterValues[0] === "" || filterValues[0] === void 0 || greaterThanOrEqualTo(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || filterValues[1] === "" || filterValues[1] === void 0 || lessThanOrEqualTo(row, id, filterValues[1]));
|
|
3954
3933
|
betweenInclusive.autoRemove = (val) => !val;
|
|
3955
3934
|
const empty = (row, id, _filterValue) => !row.getValue(id)?.toString().trim();
|
|
3956
3935
|
empty.autoRemove = (val) => !val;
|
|
@@ -3978,7 +3957,8 @@ const MRT_FilterFns = {
|
|
|
3978
3957
|
lessThanOrEqualTo,
|
|
3979
3958
|
notEmpty,
|
|
3980
3959
|
notEquals,
|
|
3981
|
-
startsWith
|
|
3960
|
+
startsWith,
|
|
3961
|
+
weakEquals: filterFn_weakEquals
|
|
3982
3962
|
};
|
|
3983
3963
|
const MRT_DefaultTableFeatures = tableFeatures({
|
|
3984
3964
|
aggregationFns: MRT_AggregationFns,
|
|
@@ -4034,9 +4014,8 @@ const MRT_DefaultTableFeatures = tableFeatures({
|
|
|
4034
4014
|
sortedRowModel: createSortedRowModel(),
|
|
4035
4015
|
sortFns: MRT_SortingFns
|
|
4036
4016
|
});
|
|
4037
|
-
|
|
4038
|
-
|
|
4039
|
-
const flexRender = flexRender$1;
|
|
4017
|
+
// src/utils/tanstack.helpers.ts
|
|
4018
|
+
const flexRender = (Comp, props) => flexRender$1(Comp, props);
|
|
4040
4019
|
function createMRTColumnHelper() {
|
|
4041
4020
|
return {
|
|
4042
4021
|
accessor: (accessor, column) => {
|
|
@@ -4053,8 +4032,7 @@ function createMRTColumnHelper() {
|
|
|
4053
4032
|
};
|
|
4054
4033
|
}
|
|
4055
4034
|
const createRow = (table, originalRow, rowIndex = -1, depth = 0, subRows, parentId) => constructRow(table, "mrt-row-create", originalRow ?? Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({ [getColumnId(col)]: "" }))), rowIndex, depth, subRows, parentId);
|
|
4056
|
-
|
|
4057
|
-
//#region src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx
|
|
4035
|
+
// src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx
|
|
4058
4036
|
const getMRT_RowActionsColumnDef = (tableOptions) => {
|
|
4059
4037
|
return {
|
|
4060
4038
|
Cell: ({ cell, row, staticRowIndex, table }) => /* @__PURE__ */ jsx(MRT_ToggleRowActionMenuButton, {
|
|
@@ -4071,8 +4049,7 @@ const getMRT_RowActionsColumnDef = (tableOptions) => {
|
|
|
4071
4049
|
})
|
|
4072
4050
|
};
|
|
4073
4051
|
};
|
|
4074
|
-
|
|
4075
|
-
//#region src/hooks/display-columns/getMRT_RowDragColumnDef.tsx
|
|
4052
|
+
// src/hooks/display-columns/getMRT_RowDragColumnDef.tsx
|
|
4076
4053
|
const getMRT_RowDragColumnDef = (tableOptions) => {
|
|
4077
4054
|
return {
|
|
4078
4055
|
Cell: ({ row, rowRef, table }) => /* @__PURE__ */ jsx(MRT_TableBodyRowGrabHandle, {
|
|
@@ -4089,8 +4066,7 @@ const getMRT_RowDragColumnDef = (tableOptions) => {
|
|
|
4089
4066
|
})
|
|
4090
4067
|
};
|
|
4091
4068
|
};
|
|
4092
|
-
|
|
4093
|
-
//#region src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx
|
|
4069
|
+
// src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx
|
|
4094
4070
|
const getMRT_RowExpandColumnDef = (tableOptions) => {
|
|
4095
4071
|
const { defaultColumn, enableExpandAll, groupedColumnMode, positionExpandColumn, renderDetailPanel, state: { grouping } } = tableOptions;
|
|
4096
4072
|
const alignProps = positionExpandColumn === "last" ? { align: "right" } : void 0;
|
|
@@ -4142,8 +4118,7 @@ const getMRT_RowExpandColumnDef = (tableOptions) => {
|
|
|
4142
4118
|
})
|
|
4143
4119
|
};
|
|
4144
4120
|
};
|
|
4145
|
-
|
|
4146
|
-
//#region src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx
|
|
4121
|
+
// src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx
|
|
4147
4122
|
const getMRT_RowNumbersColumnDef = (tableOptions) => {
|
|
4148
4123
|
const { localization, rowNumberDisplayMode } = tableOptions;
|
|
4149
4124
|
const { pagination: { pageIndex, pageSize } } = tableOptions.state;
|
|
@@ -4159,8 +4134,7 @@ const getMRT_RowNumbersColumnDef = (tableOptions) => {
|
|
|
4159
4134
|
})
|
|
4160
4135
|
};
|
|
4161
4136
|
};
|
|
4162
|
-
|
|
4163
|
-
//#region src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx
|
|
4137
|
+
// src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx
|
|
4164
4138
|
const getMRT_RowPinningColumnDef = (tableOptions) => {
|
|
4165
4139
|
return {
|
|
4166
4140
|
Cell: ({ row, table }) => /* @__PURE__ */ jsx(MRT_TableBodyRowPinButton, {
|
|
@@ -4176,8 +4150,7 @@ const getMRT_RowPinningColumnDef = (tableOptions) => {
|
|
|
4176
4150
|
})
|
|
4177
4151
|
};
|
|
4178
4152
|
};
|
|
4179
|
-
|
|
4180
|
-
//#region src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx
|
|
4153
|
+
// src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx
|
|
4181
4154
|
const getMRT_RowSelectColumnDef = (tableOptions) => {
|
|
4182
4155
|
const { enableMultiRowSelection, enableSelectAll } = tableOptions;
|
|
4183
4156
|
return {
|
|
@@ -4196,8 +4169,7 @@ const getMRT_RowSelectColumnDef = (tableOptions) => {
|
|
|
4196
4169
|
})
|
|
4197
4170
|
};
|
|
4198
4171
|
};
|
|
4199
|
-
|
|
4200
|
-
//#region src/icons.ts
|
|
4172
|
+
// src/icons.ts
|
|
4201
4173
|
const MRT_Default_Icons = {
|
|
4202
4174
|
ArrowDownwardIcon: ArrowDownward,
|
|
4203
4175
|
ArrowRightIcon: ArrowRight,
|
|
@@ -4234,8 +4206,7 @@ const MRT_Default_Icons = {
|
|
|
4234
4206
|
ViewColumnIcon: ViewColumn,
|
|
4235
4207
|
VisibilityOffIcon: VisibilityOff
|
|
4236
4208
|
};
|
|
4237
|
-
|
|
4238
|
-
//#region src/locales/en.ts
|
|
4209
|
+
// src/locales/en.ts
|
|
4239
4210
|
const MRT_Localization_EN = {
|
|
4240
4211
|
language: "en",
|
|
4241
4212
|
actions: "Actions",
|
|
@@ -4330,8 +4301,7 @@ const MRT_Localization_EN = {
|
|
|
4330
4301
|
unpin: "Unpin",
|
|
4331
4302
|
unpinAll: "Unpin all"
|
|
4332
4303
|
};
|
|
4333
|
-
|
|
4334
|
-
//#region src/hooks/useMRT_TableOptions.ts
|
|
4304
|
+
// src/hooks/useMRT_TableOptions.ts
|
|
4335
4305
|
const MRT_DefaultColumn = {
|
|
4336
4306
|
filterVariant: "text",
|
|
4337
4307
|
maxSize: 1e3,
|
|
@@ -4363,18 +4333,18 @@ const useMRT_TableOptions = ({ aggregationFns, autoResetExpanded = false, column
|
|
|
4363
4333
|
...localization
|
|
4364
4334
|
}), [localization]);
|
|
4365
4335
|
mrtTheme = useMemo(() => getMRTTheme(mrtTheme, theme), [mrtTheme, theme]);
|
|
4366
|
-
aggregationFns =
|
|
4336
|
+
[aggregationFns] = useState(() => ({
|
|
4367
4337
|
...MRT_AggregationFns,
|
|
4368
4338
|
...aggregationFns
|
|
4369
|
-
})
|
|
4370
|
-
filterFns =
|
|
4339
|
+
}));
|
|
4340
|
+
[filterFns] = useState(() => ({
|
|
4371
4341
|
...MRT_FilterFns,
|
|
4372
4342
|
...filterFns
|
|
4373
|
-
})
|
|
4374
|
-
sortFns =
|
|
4343
|
+
}));
|
|
4344
|
+
[sortFns] = useState(() => ({
|
|
4375
4345
|
...MRT_SortingFns,
|
|
4376
4346
|
...sortFns
|
|
4377
|
-
})
|
|
4347
|
+
}));
|
|
4378
4348
|
defaultColumn = useMemo(() => ({
|
|
4379
4349
|
...MRT_DefaultColumn,
|
|
4380
4350
|
...defaultColumn
|
|
@@ -4383,7 +4353,7 @@ const useMRT_TableOptions = ({ aggregationFns, autoResetExpanded = false, column
|
|
|
4383
4353
|
...MRT_DefaultDisplayColumn,
|
|
4384
4354
|
...defaultDisplayColumn
|
|
4385
4355
|
}), [defaultDisplayColumn]);
|
|
4386
|
-
[enableColumnVirtualization, enableRowVirtualization] =
|
|
4356
|
+
[[enableColumnVirtualization, enableRowVirtualization]] = useState(() => [enableColumnVirtualization, enableRowVirtualization]);
|
|
4387
4357
|
if (!columnResizeDirection) columnResizeDirection = theme.direction || "ltr";
|
|
4388
4358
|
layoutMode = layoutMode || (enableColumnResizing ? "grid-no-grow" : "semantic");
|
|
4389
4359
|
if (layoutMode === "semantic" && (enableRowVirtualization || enableColumnVirtualization)) layoutMode = "grid";
|
|
@@ -4440,7 +4410,7 @@ const useMRT_TableOptions = ({ aggregationFns, autoResetExpanded = false, column
|
|
|
4440
4410
|
enableTopToolbar,
|
|
4441
4411
|
filterFns,
|
|
4442
4412
|
getRowCanExpand: rest.getRowCanExpand ?? (rest.renderDetailPanel ? () => true : void 0),
|
|
4443
|
-
getSubRows: (row) => row
|
|
4413
|
+
getSubRows: (row) => "subRows" in row ? row.subRows : void 0,
|
|
4444
4414
|
icons,
|
|
4445
4415
|
id,
|
|
4446
4416
|
layoutMode,
|
|
@@ -4465,8 +4435,7 @@ const useMRT_TableOptions = ({ aggregationFns, autoResetExpanded = false, column
|
|
|
4465
4435
|
...rest
|
|
4466
4436
|
};
|
|
4467
4437
|
};
|
|
4468
|
-
|
|
4469
|
-
//#region src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx
|
|
4438
|
+
// src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx
|
|
4470
4439
|
const blankColProps = {
|
|
4471
4440
|
children: null,
|
|
4472
4441
|
sx: {
|
|
@@ -4489,16 +4458,31 @@ const getMRT_RowSpacerColumnDef = (tableOptions) => {
|
|
|
4489
4458
|
muiTableHeadCellProps: blankColProps
|
|
4490
4459
|
};
|
|
4491
4460
|
};
|
|
4492
|
-
|
|
4493
|
-
//#region src/hooks/useMRT_Effects.ts
|
|
4461
|
+
// src/hooks/useMRT_Effects.ts
|
|
4494
4462
|
const useMRT_Effects = (table) => {
|
|
4495
|
-
const {
|
|
4463
|
+
const { getPrePaginatedRowModel, options: { enablePagination, enableRowPinning, rowCount } } = table;
|
|
4496
4464
|
const { columnOrder, density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting } = table.state;
|
|
4497
4465
|
const totalColumnCount = table.options.columns.length;
|
|
4498
4466
|
const totalRowCount = rowCount ?? getPrePaginatedRowModel().rows.length;
|
|
4499
|
-
const rerender = useReducer(() => ({}), {})
|
|
4467
|
+
const [, rerender] = useReducer(() => ({}), {});
|
|
4500
4468
|
const initialBodyHeight = useRef(null);
|
|
4501
4469
|
const previousTop = useRef(null);
|
|
4470
|
+
const effectValues = useRef({
|
|
4471
|
+
columnOrder,
|
|
4472
|
+
enableRowPinning,
|
|
4473
|
+
pagination,
|
|
4474
|
+
table,
|
|
4475
|
+
tableOptions: table.options
|
|
4476
|
+
});
|
|
4477
|
+
useEffect(() => {
|
|
4478
|
+
effectValues.current = {
|
|
4479
|
+
columnOrder,
|
|
4480
|
+
enableRowPinning,
|
|
4481
|
+
pagination,
|
|
4482
|
+
table,
|
|
4483
|
+
tableOptions: table.options
|
|
4484
|
+
};
|
|
4485
|
+
});
|
|
4502
4486
|
useEffect(() => {
|
|
4503
4487
|
if (typeof window !== "undefined") initialBodyHeight.current = document.body.style.height;
|
|
4504
4488
|
}, []);
|
|
@@ -4518,10 +4502,12 @@ const useMRT_Effects = (table) => {
|
|
|
4518
4502
|
}
|
|
4519
4503
|
}, [isFullScreen]);
|
|
4520
4504
|
useEffect(() => {
|
|
4521
|
-
|
|
4505
|
+
const { columnOrder, table, tableOptions } = effectValues.current;
|
|
4506
|
+
if (totalColumnCount !== columnOrder.length) table.setColumnOrder(getDefaultColumnOrderIds(tableOptions));
|
|
4522
4507
|
}, [totalColumnCount]);
|
|
4523
4508
|
useEffect(() => {
|
|
4524
4509
|
if (!enablePagination || isLoading || showSkeletons) return;
|
|
4510
|
+
const { pagination, table } = effectValues.current;
|
|
4525
4511
|
const { pageIndex, pageSize } = pagination;
|
|
4526
4512
|
const totalPages = totalRowCount > 0 ? Math.ceil(totalRowCount / pageSize) : 1;
|
|
4527
4513
|
if (pageIndex < 0 || pageIndex >= totalPages) table.setPageIndex(totalPages - 1);
|
|
@@ -4536,18 +4522,19 @@ const useMRT_Effects = (table) => {
|
|
|
4536
4522
|
if (sorting.length) appliedSort.current = sorting;
|
|
4537
4523
|
}, [sorting]);
|
|
4538
4524
|
useEffect(() => {
|
|
4525
|
+
const { table } = effectValues.current;
|
|
4539
4526
|
if (!getCanRankRows(table)) return;
|
|
4540
4527
|
if (globalFilter) table.setSorting([]);
|
|
4541
4528
|
else table.setSorting(() => appliedSort.current || []);
|
|
4542
4529
|
}, [globalFilter]);
|
|
4543
4530
|
useEffect(() => {
|
|
4544
|
-
|
|
4531
|
+
const { enableRowPinning, table } = effectValues.current;
|
|
4532
|
+
if (enableRowPinning && table.getIsSomeRowsPinned()) setTimeout(() => {
|
|
4545
4533
|
rerender();
|
|
4546
4534
|
}, 150);
|
|
4547
4535
|
}, [density]);
|
|
4548
4536
|
};
|
|
4549
|
-
|
|
4550
|
-
//#region src/hooks/useMRT_TableInstance.ts
|
|
4537
|
+
// src/hooks/useMRT_TableInstance.ts
|
|
4551
4538
|
/**
|
|
4552
4539
|
* The MRT hook that wraps the TanStack useReactTable hook and adds additional functionality
|
|
4553
4540
|
* @param definedTableOptions - table options with proper defaults set
|
|
@@ -4566,7 +4553,7 @@ const useMRT_TableInstance = (definedTableOptions) => {
|
|
|
4566
4553
|
const topToolbarRef = useRef(null);
|
|
4567
4554
|
const tableHeadRef = useRef(null);
|
|
4568
4555
|
const tableFooterRef = useRef(null);
|
|
4569
|
-
const initialState =
|
|
4556
|
+
const [initialState] = useState(() => {
|
|
4570
4557
|
const initState = definedTableOptions.initialState ?? {};
|
|
4571
4558
|
initState.columnOrder = initState.columnOrder ?? getDefaultColumnOrderIds({
|
|
4572
4559
|
...definedTableOptions,
|
|
@@ -4577,7 +4564,7 @@ const useMRT_TableInstance = (definedTableOptions) => {
|
|
|
4577
4564
|
});
|
|
4578
4565
|
initState.globalFilterFn = definedTableOptions.globalFilterFn ?? "fuzzy";
|
|
4579
4566
|
return initState;
|
|
4580
|
-
}
|
|
4567
|
+
});
|
|
4581
4568
|
definedTableOptions.initialState = initialState;
|
|
4582
4569
|
const [actionCell, setActionCell] = useState(initialState.actionCell ?? null);
|
|
4583
4570
|
const [creatingRow, _setCreatingRow] = useState(initialState.creatingRow ?? null);
|
|
@@ -4643,9 +4630,10 @@ const useMRT_TableInstance = (definedTableOptions) => {
|
|
|
4643
4630
|
tableOptions: statefulTableOptions
|
|
4644
4631
|
});
|
|
4645
4632
|
columnDefsRef.current = statefulTableOptions.columns;
|
|
4646
|
-
statefulTableOptions.data = useMemo(() => (statefulTableOptions.state.isLoading || statefulTableOptions.state.showSkeletons) && !statefulTableOptions.data.length ? [...Array(Math.min(statefulTableOptions.state.pagination.pageSize, 20)).fill(null)].map(() => Object.assign({}, ...getAllLeafColumnDefs(
|
|
4633
|
+
statefulTableOptions.data = useMemo(() => (statefulTableOptions.state.isLoading || statefulTableOptions.state.showSkeletons) && !statefulTableOptions.data.length ? [...Array(Math.min(statefulTableOptions.state.pagination.pageSize, 20)).fill(null)].map(() => Object.assign({}, ...getAllLeafColumnDefs(columnDefsRef.current).map((col) => ({ [getColumnId(col)]: null })))) : statefulTableOptions.data, [
|
|
4647
4634
|
statefulTableOptions.data,
|
|
4648
4635
|
statefulTableOptions.state.isLoading,
|
|
4636
|
+
statefulTableOptions.state.pagination.pageSize,
|
|
4649
4637
|
statefulTableOptions.state.showSkeletons
|
|
4650
4638
|
]);
|
|
4651
4639
|
const [features] = useState(() => tableFeatures({
|
|
@@ -4695,7 +4683,8 @@ const useMRT_TableInstance = (definedTableOptions) => {
|
|
|
4695
4683
|
setColumnFilterFns: statefulTableOptions.onColumnFilterFnsChange ?? setColumnFilterFns,
|
|
4696
4684
|
setCreatingRow: (row) => {
|
|
4697
4685
|
const nextRow = row === true ? createRow(table) : row;
|
|
4698
|
-
statefulTableOptions?.onCreatingRowChange?.(nextRow)
|
|
4686
|
+
const handled = statefulTableOptions?.onCreatingRowChange?.(nextRow);
|
|
4687
|
+
if (handled === void 0 || handled === null) _setCreatingRow(nextRow);
|
|
4699
4688
|
},
|
|
4700
4689
|
setDensity: statefulTableOptions.onDensityChange ?? setDensity,
|
|
4701
4690
|
setDraggingColumn: statefulTableOptions.onDraggingColumnChange ?? setDraggingColumn,
|
|
@@ -4714,11 +4703,9 @@ const useMRT_TableInstance = (definedTableOptions) => {
|
|
|
4714
4703
|
useMRT_Effects(table);
|
|
4715
4704
|
return table;
|
|
4716
4705
|
};
|
|
4717
|
-
|
|
4718
|
-
//#region src/hooks/useMaterialReactTable.ts
|
|
4706
|
+
// src/hooks/useMaterialReactTable.ts
|
|
4719
4707
|
const useMaterialReactTable = (tableOptions) => useMRT_TableInstance(useMRT_TableOptions(tableOptions));
|
|
4720
|
-
|
|
4721
|
-
//#region src/components/toolbar/MRT_LinearProgressBar.tsx
|
|
4708
|
+
// src/components/toolbar/MRT_LinearProgressBar.tsx
|
|
4722
4709
|
const MRT_LinearProgressBar = ({ isTopToolbar, table, ...rest }) => {
|
|
4723
4710
|
const { options: { muiLinearProgressProps } } = table;
|
|
4724
4711
|
const { isSaving, showProgressBars } = table.state;
|
|
@@ -4747,8 +4734,7 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table, ...rest }) => {
|
|
|
4747
4734
|
})
|
|
4748
4735
|
});
|
|
4749
4736
|
};
|
|
4750
|
-
|
|
4751
|
-
//#region src/components/toolbar/MRT_TablePagination.tsx
|
|
4737
|
+
// src/components/toolbar/MRT_TablePagination.tsx
|
|
4752
4738
|
const defaultRowsPerPage = [
|
|
4753
4739
|
5,
|
|
4754
4740
|
10,
|
|
@@ -4815,7 +4801,7 @@ const MRT_TablePagination = ({ position = "bottom", table, ...rest }) => {
|
|
|
4815
4801
|
},
|
|
4816
4802
|
label: localization.rowsPerPage,
|
|
4817
4803
|
MenuProps: { disableScrollLock: true },
|
|
4818
|
-
onChange: (event) => table.setPageSize(
|
|
4804
|
+
onChange: (event) => table.setPageSize(Number(event.target.value)),
|
|
4819
4805
|
sx: { mb: 0 },
|
|
4820
4806
|
value: pageSize,
|
|
4821
4807
|
variant: "standard",
|
|
@@ -4910,8 +4896,7 @@ const MRT_TablePagination = ({ position = "bottom", table, ...rest }) => {
|
|
|
4910
4896
|
})] }) : null]
|
|
4911
4897
|
});
|
|
4912
4898
|
};
|
|
4913
|
-
|
|
4914
|
-
//#region src/components/toolbar/MRT_ToolbarDropZone.tsx
|
|
4899
|
+
// src/components/toolbar/MRT_ToolbarDropZone.tsx
|
|
4915
4900
|
const MRT_ToolbarDropZone = ({ table, ...rest }) => {
|
|
4916
4901
|
const { options: { enableGrouping, localization }, setHoveredColumn, setShowToolbarDropZone } = table;
|
|
4917
4902
|
const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } = table.state;
|
|
@@ -4921,12 +4906,18 @@ const MRT_ToolbarDropZone = ({ table, ...rest }) => {
|
|
|
4921
4906
|
const handleDragOver = (e) => {
|
|
4922
4907
|
e.preventDefault();
|
|
4923
4908
|
};
|
|
4909
|
+
const isShowToolbarDropZoneControlled = table.options.state?.showToolbarDropZone !== void 0;
|
|
4910
|
+
const setShowToolbarDropZoneRef = useRef(setShowToolbarDropZone);
|
|
4911
|
+
useEffect(() => {
|
|
4912
|
+
setShowToolbarDropZoneRef.current = setShowToolbarDropZone;
|
|
4913
|
+
});
|
|
4924
4914
|
useEffect(() => {
|
|
4925
|
-
if (
|
|
4915
|
+
if (isShowToolbarDropZoneControlled) setShowToolbarDropZoneRef.current(!!enableGrouping && !!draggingColumn && draggingColumn.columnDef.enableGrouping !== false && !grouping.includes(draggingColumn.id));
|
|
4926
4916
|
}, [
|
|
4927
|
-
enableGrouping,
|
|
4928
4917
|
draggingColumn,
|
|
4929
|
-
|
|
4918
|
+
enableGrouping,
|
|
4919
|
+
grouping,
|
|
4920
|
+
isShowToolbarDropZoneControlled
|
|
4930
4921
|
]);
|
|
4931
4922
|
return /* @__PURE__ */ jsx(Fade, {
|
|
4932
4923
|
in: showToolbarDropZone,
|
|
@@ -4956,8 +4947,7 @@ const MRT_ToolbarDropZone = ({ table, ...rest }) => {
|
|
|
4956
4947
|
})
|
|
4957
4948
|
});
|
|
4958
4949
|
};
|
|
4959
|
-
|
|
4960
|
-
//#region src/components/toolbar/MRT_BottomToolbar.tsx
|
|
4950
|
+
// src/components/toolbar/MRT_BottomToolbar.tsx
|
|
4961
4951
|
const MRT_BottomToolbar = ({ table, ...rest }) => {
|
|
4962
4952
|
const { options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions }, refs: { bottomToolbarRef } } = table;
|
|
4963
4953
|
const { isFullScreen } = table.state;
|
|
@@ -4972,7 +4962,7 @@ const MRT_BottomToolbar = ({ table, ...rest }) => {
|
|
|
4972
4962
|
ref: (node) => {
|
|
4973
4963
|
if (node) {
|
|
4974
4964
|
bottomToolbarRef.current = node;
|
|
4975
|
-
if (toolbarProps?.ref) toolbarProps.ref.current = node;
|
|
4965
|
+
if (toolbarProps?.ref && typeof toolbarProps.ref === "object") toolbarProps.ref.current = node;
|
|
4976
4966
|
}
|
|
4977
4967
|
},
|
|
4978
4968
|
sx: (theme) => ({
|
|
@@ -5023,8 +5013,7 @@ const MRT_BottomToolbar = ({ table, ...rest }) => {
|
|
|
5023
5013
|
]
|
|
5024
5014
|
});
|
|
5025
5015
|
};
|
|
5026
|
-
|
|
5027
|
-
//#region src/components/toolbar/MRT_ToolbarInternalButtons.tsx
|
|
5016
|
+
// src/components/toolbar/MRT_ToolbarInternalButtons.tsx
|
|
5028
5017
|
const MRT_ToolbarInternalButtons = ({ table, ...rest }) => {
|
|
5029
5018
|
const { options: { columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableColumnPinning, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, initialState, renderToolbarInternalActions } } = table;
|
|
5030
5019
|
return /* @__PURE__ */ jsx(Box, {
|
|
@@ -5044,8 +5033,7 @@ const MRT_ToolbarInternalButtons = ({ table, ...rest }) => {
|
|
|
5044
5033
|
] })
|
|
5045
5034
|
});
|
|
5046
5035
|
};
|
|
5047
|
-
|
|
5048
|
-
//#region src/components/toolbar/MRT_TopToolbar.tsx
|
|
5036
|
+
// src/components/toolbar/MRT_TopToolbar.tsx
|
|
5049
5037
|
const MRT_TopToolbar = ({ table }) => {
|
|
5050
5038
|
const { options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions }, refs: { topToolbarRef } } = table;
|
|
5051
5039
|
const { isFullScreen, showGlobalFilter } = table.state;
|
|
@@ -5061,7 +5049,7 @@ const MRT_TopToolbar = ({ table }) => {
|
|
|
5061
5049
|
...toolbarProps,
|
|
5062
5050
|
ref: (ref) => {
|
|
5063
5051
|
topToolbarRef.current = ref;
|
|
5064
|
-
if (toolbarProps?.ref) toolbarProps.ref.current = ref;
|
|
5052
|
+
if (toolbarProps?.ref && typeof toolbarProps.ref === "object") toolbarProps.ref.current = ref;
|
|
5065
5053
|
},
|
|
5066
5054
|
sx: (theme) => ({
|
|
5067
5055
|
...getCommonToolbarStyles({
|
|
@@ -5117,8 +5105,7 @@ const MRT_TopToolbar = ({ table }) => {
|
|
|
5117
5105
|
]
|
|
5118
5106
|
});
|
|
5119
5107
|
};
|
|
5120
|
-
|
|
5121
|
-
//#region src/components/menus/MRT_CellActionMenu.tsx
|
|
5108
|
+
// src/components/menus/MRT_CellActionMenu.tsx
|
|
5122
5109
|
const MRT_CellActionMenu = ({ table, ...rest }) => {
|
|
5123
5110
|
const { options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderCellActionMenuItems }, refs: { actionCellRef } } = table;
|
|
5124
5111
|
const { actionCell, density } = table.state;
|
|
@@ -5127,7 +5114,7 @@ const MRT_CellActionMenu = ({ table, ...rest }) => {
|
|
|
5127
5114
|
const { column } = cell;
|
|
5128
5115
|
const { columnDef } = column;
|
|
5129
5116
|
const handleClose = (event) => {
|
|
5130
|
-
event?.stopPropagation();
|
|
5117
|
+
event?.stopPropagation?.();
|
|
5131
5118
|
table.setActionCell(null);
|
|
5132
5119
|
actionCellRef.current = null;
|
|
5133
5120
|
};
|
|
@@ -5179,8 +5166,7 @@ const MRT_CellActionMenu = ({ table, ...rest }) => {
|
|
|
5179
5166
|
children: menuItems ?? internalMenuItems
|
|
5180
5167
|
});
|
|
5181
5168
|
};
|
|
5182
|
-
|
|
5183
|
-
//#region src/components/modals/MRT_EditRowModal.tsx
|
|
5169
|
+
// src/components/modals/MRT_EditRowModal.tsx
|
|
5184
5170
|
const MRT_EditRowModal = ({ open, table, ...rest }) => {
|
|
5185
5171
|
const { options: { localization, muiCreateRowModalProps, muiEditRowDialogProps, onCreatingRowCancel, onEditingRowCancel, renderCreateRowDialogContent, renderEditRowDialogContent }, setCreatingRow, setEditingRow } = table;
|
|
5186
5172
|
const { creatingRow, editingRow } = table.state;
|
|
@@ -5257,24 +5243,19 @@ const MRT_EditRowModal = ({ open, table, ...rest }) => {
|
|
|
5257
5243
|
] })
|
|
5258
5244
|
});
|
|
5259
5245
|
};
|
|
5260
|
-
|
|
5261
|
-
//#region src/hooks/useMRT_ColumnVirtualizer.ts
|
|
5246
|
+
// src/hooks/useMRT_ColumnVirtualizer.ts
|
|
5262
5247
|
const useMRT_ColumnVirtualizer = (table) => {
|
|
5263
5248
|
const { options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization }, refs: { tableContainerRef } } = table;
|
|
5264
|
-
const {
|
|
5265
|
-
|
|
5266
|
-
const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, { table });
|
|
5249
|
+
const { draggingColumn } = table.state;
|
|
5250
|
+
const columnVirtualizerProps = enableColumnVirtualization ? parseFromValuesOrFunc(columnVirtualizerOptions, { table }) : void 0;
|
|
5267
5251
|
const visibleColumns = table.getVisibleLeafColumns();
|
|
5268
|
-
const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnPinning ? [visibleColumns.filter((c) => c.getIsPinned() === "start").map((c) => c.getPinnedIndex()), visibleColumns.filter((c) => c.getIsPinned() === "end").map((column) => visibleColumns.length - column.getPinnedIndex() - 1).sort((a, b) => a - b)] : [[], []], [
|
|
5269
|
-
columnPinning,
|
|
5270
|
-
columnVisibility,
|
|
5271
|
-
enableColumnPinning
|
|
5272
|
-
]);
|
|
5252
|
+
const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnPinning ? [visibleColumns.filter((c) => c.getIsPinned() === "start").map((c) => c.getPinnedIndex()), visibleColumns.filter((c) => c.getIsPinned() === "end").map((column) => visibleColumns.length - column.getPinnedIndex() - 1).sort((a, b) => a - b)] : [[], []], [enableColumnPinning, visibleColumns]);
|
|
5273
5253
|
const numPinnedLeft = leftPinnedIndexes.length;
|
|
5274
5254
|
const numPinnedRight = rightPinnedIndexes.length;
|
|
5275
|
-
const draggingColumnIndex = useMemo(() => draggingColumn?.id ? visibleColumns.findIndex((c) => c.id === draggingColumn?.id) : void 0, [draggingColumn?.id]);
|
|
5255
|
+
const draggingColumnIndex = useMemo(() => draggingColumn?.id ? visibleColumns.findIndex((c) => c.id === draggingColumn?.id) : void 0, [draggingColumn?.id, visibleColumns]);
|
|
5276
5256
|
const columnVirtualizer = useVirtualizer({
|
|
5277
5257
|
count: visibleColumns.length,
|
|
5258
|
+
enabled: !!enableColumnVirtualization,
|
|
5278
5259
|
estimateSize: (index) => visibleColumns[index].getSize(),
|
|
5279
5260
|
getScrollElement: () => tableContainerRef.current,
|
|
5280
5261
|
horizontal: true,
|
|
@@ -5290,10 +5271,13 @@ const useMRT_ColumnVirtualizer = (table) => {
|
|
|
5290
5271
|
}, [
|
|
5291
5272
|
leftPinnedIndexes,
|
|
5292
5273
|
rightPinnedIndexes,
|
|
5293
|
-
draggingColumnIndex
|
|
5274
|
+
draggingColumnIndex,
|
|
5275
|
+
numPinnedLeft,
|
|
5276
|
+
numPinnedRight
|
|
5294
5277
|
]),
|
|
5295
5278
|
...columnVirtualizerProps
|
|
5296
5279
|
});
|
|
5280
|
+
if (!enableColumnVirtualization) return;
|
|
5297
5281
|
const virtualColumns = columnVirtualizer.getVirtualItems();
|
|
5298
5282
|
columnVirtualizer.virtualColumns = virtualColumns;
|
|
5299
5283
|
const numColumns = virtualColumns.length;
|
|
@@ -5309,32 +5293,23 @@ const useMRT_ColumnVirtualizer = (table) => {
|
|
|
5309
5293
|
if (columnVirtualizerInstanceRef) columnVirtualizerInstanceRef.current = columnVirtualizer;
|
|
5310
5294
|
return columnVirtualizer;
|
|
5311
5295
|
};
|
|
5312
|
-
|
|
5313
|
-
//#region src/components/table/MRT_Table.tsx
|
|
5296
|
+
// src/components/table/MRT_Table.tsx
|
|
5314
5297
|
const MRT_Table = ({ table, ...rest }) => {
|
|
5315
|
-
const { getFlatHeaders, options: {
|
|
5316
|
-
const { columnResizing,
|
|
5298
|
+
const { getFlatHeaders, options: { enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, renderCaption } } = table;
|
|
5299
|
+
const { columnResizing, isFullScreen } = table.state;
|
|
5317
5300
|
const tableProps = {
|
|
5318
5301
|
...parseFromValuesOrFunc(muiTableProps, { table }),
|
|
5319
5302
|
...rest
|
|
5320
5303
|
};
|
|
5321
5304
|
const Caption = parseFromValuesOrFunc(renderCaption, { table });
|
|
5322
|
-
const
|
|
5323
|
-
|
|
5324
|
-
|
|
5325
|
-
|
|
5326
|
-
|
|
5327
|
-
|
|
5328
|
-
|
|
5329
|
-
|
|
5330
|
-
}
|
|
5331
|
-
return colSizes;
|
|
5332
|
-
}, [
|
|
5333
|
-
columns,
|
|
5334
|
-
columnSizing,
|
|
5335
|
-
columnResizing,
|
|
5336
|
-
columnVisibility
|
|
5337
|
-
]);
|
|
5305
|
+
const headers = getFlatHeaders();
|
|
5306
|
+
const columnSizeVars = {};
|
|
5307
|
+
for (let i = 0; i < headers.length; i++) {
|
|
5308
|
+
const header = headers[i];
|
|
5309
|
+
const colSize = header.getSize();
|
|
5310
|
+
columnSizeVars[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
|
|
5311
|
+
columnSizeVars[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
|
|
5312
|
+
}
|
|
5338
5313
|
const commonTableGroupProps = {
|
|
5339
5314
|
columnVirtualizer: useMRT_ColumnVirtualizer(table),
|
|
5340
5315
|
table
|
|
@@ -5360,8 +5335,7 @@ const MRT_Table = ({ table, ...rest }) => {
|
|
|
5360
5335
|
]
|
|
5361
5336
|
});
|
|
5362
5337
|
};
|
|
5363
|
-
|
|
5364
|
-
//#region src/components/table/MRT_TableLoadingOverlay.tsx
|
|
5338
|
+
// src/components/table/MRT_TableLoadingOverlay.tsx
|
|
5365
5339
|
const MRT_TableLoadingOverlay = ({ table, ...rest }) => {
|
|
5366
5340
|
const { options: { id, localization, mrtTheme: { baseBackgroundColor }, muiCircularProgressProps } } = table;
|
|
5367
5341
|
const circularProgressProps = {
|
|
@@ -5390,11 +5364,10 @@ const MRT_TableLoadingOverlay = ({ table, ...rest }) => {
|
|
|
5390
5364
|
})
|
|
5391
5365
|
});
|
|
5392
5366
|
};
|
|
5393
|
-
|
|
5394
|
-
//#region src/components/table/MRT_TableContainer.tsx
|
|
5367
|
+
// src/components/table/MRT_TableContainer.tsx
|
|
5395
5368
|
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
|
|
5396
5369
|
const MRT_TableContainer = ({ table, ...rest }) => {
|
|
5397
|
-
const { options: { createDisplayMode, editDisplayMode, enableCellActions, enableStickyHeader, muiTableContainerProps }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef } } = table;
|
|
5370
|
+
const { options: { createDisplayMode, editDisplayMode, enableBottomToolbar, enableCellActions, enableStickyHeader, enableTopToolbar, muiTableContainerProps }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef } } = table;
|
|
5398
5371
|
const { actionCell, creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay } = table.state;
|
|
5399
5372
|
const loading = showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
|
|
5400
5373
|
const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
|
|
@@ -5403,10 +5376,25 @@ const MRT_TableContainer = ({ table, ...rest }) => {
|
|
|
5403
5376
|
...rest
|
|
5404
5377
|
};
|
|
5405
5378
|
useIsomorphicLayoutEffect(() => {
|
|
5406
|
-
const
|
|
5407
|
-
|
|
5408
|
-
|
|
5409
|
-
|
|
5379
|
+
const measureToolbars = () => {
|
|
5380
|
+
setTotalToolbarHeight((topToolbarRef.current?.offsetHeight ?? 0) + (bottomToolbarRef.current?.offsetHeight ?? 0));
|
|
5381
|
+
};
|
|
5382
|
+
measureToolbars();
|
|
5383
|
+
if (typeof ResizeObserver === "undefined" || !tableContainerRef.current) return;
|
|
5384
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
5385
|
+
for (const toolbar of [topToolbarRef.current, bottomToolbarRef.current]) if (toolbar) resizeObserver.observe(toolbar);
|
|
5386
|
+
measureToolbars();
|
|
5387
|
+
});
|
|
5388
|
+
resizeObserver.observe(tableContainerRef.current);
|
|
5389
|
+
return () => resizeObserver.disconnect();
|
|
5390
|
+
}, [
|
|
5391
|
+
bottomToolbarRef,
|
|
5392
|
+
enableBottomToolbar,
|
|
5393
|
+
enableTopToolbar,
|
|
5394
|
+
isFullScreen,
|
|
5395
|
+
tableContainerRef,
|
|
5396
|
+
topToolbarRef
|
|
5397
|
+
]);
|
|
5410
5398
|
const createModalOpen = createDisplayMode === "modal" && creatingRow;
|
|
5411
5399
|
const editModalOpen = editDisplayMode === "modal" && editingRow;
|
|
5412
5400
|
return /* @__PURE__ */ jsxs(TableContainer, {
|
|
@@ -5416,7 +5404,7 @@ const MRT_TableContainer = ({ table, ...rest }) => {
|
|
|
5416
5404
|
ref: (node) => {
|
|
5417
5405
|
if (node) {
|
|
5418
5406
|
tableContainerRef.current = node;
|
|
5419
|
-
if (tableContainerProps?.ref) tableContainerProps.ref.current = node;
|
|
5407
|
+
if (tableContainerProps?.ref && typeof tableContainerProps.ref === "object") tableContainerProps.ref.current = node;
|
|
5420
5408
|
}
|
|
5421
5409
|
},
|
|
5422
5410
|
style: {
|
|
@@ -5441,8 +5429,7 @@ const MRT_TableContainer = ({ table, ...rest }) => {
|
|
|
5441
5429
|
]
|
|
5442
5430
|
});
|
|
5443
5431
|
};
|
|
5444
|
-
|
|
5445
|
-
//#region src/components/table/MRT_TablePaper.tsx
|
|
5432
|
+
// src/components/table/MRT_TablePaper.tsx
|
|
5446
5433
|
const MRT_TablePaper = ({ table, ...rest }) => {
|
|
5447
5434
|
const { options: { enableBottomToolbar, enableTopToolbar, mrtTheme: { baseBackgroundColor }, muiTablePaperProps, renderBottomToolbar, renderTopToolbar }, refs: { tablePaperRef } } = table;
|
|
5448
5435
|
const { isFullScreen } = table.state;
|
|
@@ -5457,7 +5444,7 @@ const MRT_TablePaper = ({ table, ...rest }) => {
|
|
|
5457
5444
|
...paperProps,
|
|
5458
5445
|
ref: (ref) => {
|
|
5459
5446
|
tablePaperRef.current = ref;
|
|
5460
|
-
if (paperProps?.ref) paperProps.ref.current = ref;
|
|
5447
|
+
if (paperProps?.ref && typeof paperProps.ref === "object") paperProps.ref.current = ref;
|
|
5461
5448
|
},
|
|
5462
5449
|
style: {
|
|
5463
5450
|
...isFullScreen ? {
|
|
@@ -5490,16 +5477,13 @@ const MRT_TablePaper = ({ table, ...rest }) => {
|
|
|
5490
5477
|
]
|
|
5491
5478
|
});
|
|
5492
5479
|
};
|
|
5493
|
-
|
|
5494
|
-
//#region src/components/MaterialReactTable.tsx
|
|
5480
|
+
// src/components/MaterialReactTable.tsx
|
|
5495
5481
|
const isTableInstanceProp = (props) => props.table !== void 0;
|
|
5496
|
-
const
|
|
5497
|
-
|
|
5498
|
-
if (isTableInstanceProp(props)) table = props.table;
|
|
5499
|
-
else table = useMaterialReactTable(props);
|
|
5482
|
+
const MRT_TableFromOptions = ({ tableOptions }) => {
|
|
5483
|
+
const table = useMaterialReactTable(tableOptions);
|
|
5500
5484
|
return /* @__PURE__ */ jsx(MRT_TablePaper, { table });
|
|
5501
5485
|
};
|
|
5502
|
-
|
|
5503
|
-
export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, cellKeyboardShortcuts, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnFilterInfo, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getSubColumnDefs, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useDropdownOptions, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
|
|
5486
|
+
const MaterialReactTable = (props) => isTableInstanceProp(props) ? /* @__PURE__ */ jsx(MRT_TablePaper, { table: props.table }) : /* @__PURE__ */ jsx(MRT_TableFromOptions, { tableOptions: props });
|
|
5487
|
+
export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, cellKeyboardShortcuts, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnFilterInfo, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getFilterOptionLabel, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getSubColumnDefs, getTrailingDisplayColumnIds, isCellEditable, moveColumn, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useDropdownOptions, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
|
|
5504
5488
|
|
|
5505
5489
|
//# sourceMappingURL=index.js.map
|