@cutting/material-react-table 4.1.0 → 5.0.0-beta.2
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/dist/index.d.ts +360 -333
- package/dist/index.js +919 -928
- package/dist/index.js.map +1 -1
- package/locales/ar/package.json +2 -2
- package/locales/az/package.json +2 -2
- package/locales/bg/package.json +2 -2
- package/locales/cs/package.json +2 -2
- package/locales/da/package.json +2 -2
- package/locales/de/package.json +2 -2
- package/locales/el/package.json +2 -2
- package/locales/en/package.json +2 -2
- package/locales/es/package.json +2 -2
- package/locales/et/package.json +2 -2
- package/locales/fa/package.json +2 -2
- package/locales/fi/package.json +2 -2
- package/locales/fr/package.json +2 -2
- package/locales/he/package.json +2 -2
- package/locales/hr/package.json +2 -2
- package/locales/hu/package.json +2 -2
- package/locales/hy/package.json +2 -2
- package/locales/id/package.json +2 -2
- package/locales/it/package.json +2 -2
- package/locales/ja/package.json +2 -2
- package/locales/ko/package.json +2 -2
- package/locales/nl/package.json +2 -2
- package/locales/no/package.json +2 -2
- package/locales/np/package.json +2 -2
- package/locales/pl/package.json +2 -2
- package/locales/pt/package.json +2 -2
- package/locales/pt-BR/package.json +2 -2
- package/locales/ro/package.json +2 -2
- package/locales/ru/package.json +2 -2
- package/locales/sk/package.json +2 -2
- package/locales/sr-Cyrl-RS/package.json +2 -2
- package/locales/sr-Latn-RS/package.json +2 -2
- package/locales/sv/package.json +2 -2
- package/locales/tr/package.json +2 -2
- package/locales/uk/package.json +2 -2
- package/locales/vi/package.json +2 -2
- package/locales/zh-Hans/package.json +2 -2
- package/locales/zh-Hant/package.json +2 -2
- package/package.json +46 -61
- package/src/components/body/MRT_TableBody.tsx +1 -2
- package/src/components/body/MRT_TableBodyCell.tsx +4 -5
- package/src/components/body/MRT_TableBodyCellValue.tsx +1 -2
- package/src/components/body/MRT_TableBodyRow.tsx +1 -2
- package/src/components/body/MRT_TableBodyRowGrabHandle.test.tsx +42 -0
- package/src/components/body/MRT_TableBodyRowPinButton.tsx +1 -2
- package/src/components/body/MRT_TableDetailPanel.test.tsx +40 -0
- package/src/components/body/MRT_TableDetailPanel.tsx +1 -2
- package/src/components/buttons/MRT_ColumnPinningButtons.test.tsx +69 -0
- package/src/components/buttons/MRT_ColumnPinningButtons.tsx +3 -3
- package/src/components/buttons/MRT_EditActionButtons.test.tsx +50 -0
- package/src/components/buttons/MRT_EditActionButtons.tsx +1 -3
- package/src/components/buttons/MRT_ExpandAllButton.tsx +1 -2
- package/src/components/buttons/MRT_ExpandButton.tsx +1 -2
- package/src/components/buttons/MRT_ToggleDensePaddingButton.test.tsx +38 -0
- package/src/components/buttons/MRT_ToggleDensePaddingButton.tsx +1 -2
- package/src/components/buttons/MRT_ToggleFiltersButton.test.tsx +38 -0
- package/src/components/buttons/MRT_ToggleFiltersButton.tsx +1 -2
- package/src/components/buttons/MRT_ToggleFullScreenButton.test.tsx +36 -0
- package/src/components/buttons/MRT_ToggleFullScreenButton.tsx +1 -2
- package/src/components/buttons/MRT_ToggleGlobalFilterButton.tsx +1 -2
- package/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx +2 -3
- package/src/components/footer/MRT_TableFooter.tsx +1 -2
- package/src/components/footer/MRT_TableFooterCell.tsx +1 -2
- package/src/components/head/MRT_TableHead.tsx +1 -2
- package/src/components/head/MRT_TableHeadCell.tsx +9 -9
- package/src/components/head/MRT_TableHeadCellFilterContainer.tsx +1 -2
- package/src/components/head/MRT_TableHeadCellGrabHandle.test.tsx +61 -0
- package/src/components/head/MRT_TableHeadCellGrabHandle.tsx +4 -5
- package/src/components/head/MRT_TableHeadCellResizeHandle.test.tsx +45 -0
- package/src/components/head/MRT_TableHeadCellResizeHandle.tsx +4 -5
- package/src/components/head/MRT_TableHeadCellSortLabel.tsx +1 -2
- package/src/components/inputs/MRT_EditCellTextField.test.tsx +36 -0
- package/src/components/inputs/MRT_EditCellTextField.tsx +1 -3
- package/src/components/inputs/MRT_FilterCheckbox.tsx +1 -2
- package/src/components/inputs/MRT_FilterRangeSlider.tsx +2 -1
- package/src/components/inputs/MRT_FilterTextField.test.tsx +75 -0
- package/src/components/inputs/MRT_GlobalFilterTextField.tsx +1 -2
- package/src/components/inputs/MRT_SelectCheckbox.test.tsx +69 -0
- package/src/components/inputs/MRT_SelectCheckbox.tsx +1 -2
- package/src/components/menus/MRT_CellActionMenu.tsx +1 -2
- package/src/components/menus/MRT_ColumnActionMenu.tsx +12 -13
- package/src/components/menus/MRT_FilterOptionMenu.tsx +1 -2
- package/src/components/menus/MRT_RowActionMenu.tsx +1 -2
- package/src/components/menus/MRT_ShowHideColumnsMenu.tsx +1 -2
- package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx +4 -5
- package/src/components/modals/MRT_EditRowModal.test.tsx +54 -0
- package/src/components/modals/MRT_EditRowModal.tsx +1 -2
- package/src/components/table/MRT_Table.tsx +4 -5
- package/src/components/table/MRT_TableContainer.tsx +1 -2
- package/src/components/table/MRT_TablePaper.tsx +1 -2
- package/src/components/toolbar/MRT_BottomToolbar.tsx +2 -3
- package/src/components/toolbar/MRT_LinearProgressBar.tsx +1 -2
- package/src/components/toolbar/MRT_TablePagination.tsx +1 -2
- package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx +3 -4
- package/src/components/toolbar/MRT_ToolbarDropZone.test.tsx +42 -0
- package/src/components/toolbar/MRT_ToolbarDropZone.tsx +1 -2
- package/src/components/toolbar/MRT_TopToolbar.tsx +1 -2
- package/src/fns/aggregationFns.test.tsx +57 -0
- package/src/fns/filterFns.test.tsx +156 -0
- package/src/fns/filterFns.ts +36 -22
- package/src/fns/sortingFns.ts +14 -5
- package/src/fns/tableFeatures.test.tsx +106 -0
- package/src/fns/tableFeatures.ts +103 -0
- package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx +2 -2
- package/src/hooks/useMRT_ColumnVirtualizer.ts +6 -5
- package/src/hooks/useMRT_Effects.ts +3 -4
- package/src/hooks/useMRT_RowVirtualizer.ts +1 -2
- package/src/hooks/useMRT_Rows.ts +1 -2
- package/src/hooks/useMRT_TableInstance.ts +82 -63
- package/src/hooks/useMRT_TableOptions.ts +5 -37
- package/src/icons.ts +1 -1
- package/src/types.ts +162 -134
- package/src/utils/column.utils.ts +31 -24
- package/src/utils/row.utils.ts +7 -10
- package/src/utils/style.utils.ts +9 -10
- package/src/utils/tanstack.helpers.ts +2 -2
- package/dist/index.d.mts +0 -1925
- package/dist/index.mjs +0 -5409
- package/dist/index.mjs.map +0 -1
- package/locales/ar/index.d.ts +0 -3
- package/locales/ar/index.js +0 -98
- package/locales/az/index.d.ts +0 -3
- package/locales/az/index.js +0 -98
- package/locales/bg/index.d.ts +0 -3
- package/locales/bg/index.js +0 -98
- package/locales/cs/index.d.ts +0 -3
- package/locales/cs/index.js +0 -98
- package/locales/da/index.d.ts +0 -3
- package/locales/da/index.js +0 -98
- package/locales/de/index.d.ts +0 -3
- package/locales/de/index.js +0 -98
- package/locales/el/index.d.ts +0 -3
- package/locales/el/index.js +0 -98
- package/locales/en/index.d.ts +0 -3
- package/locales/en/index.js +0 -98
- package/locales/es/index.d.ts +0 -3
- package/locales/es/index.js +0 -98
- package/locales/et/index.d.ts +0 -3
- package/locales/et/index.js +0 -98
- package/locales/fa/index.d.ts +0 -3
- package/locales/fa/index.js +0 -98
- package/locales/fi/index.d.ts +0 -3
- package/locales/fi/index.js +0 -98
- package/locales/fr/index.d.ts +0 -3
- package/locales/fr/index.js +0 -98
- package/locales/he/index.d.ts +0 -3
- package/locales/he/index.js +0 -98
- package/locales/hr/index.d.ts +0 -3
- package/locales/hr/index.js +0 -98
- package/locales/hu/index.d.ts +0 -3
- package/locales/hu/index.js +0 -98
- package/locales/hy/index.d.ts +0 -3
- package/locales/hy/index.js +0 -98
- package/locales/id/index.d.ts +0 -3
- package/locales/id/index.js +0 -98
- package/locales/it/index.d.ts +0 -3
- package/locales/it/index.js +0 -98
- package/locales/ja/index.d.ts +0 -3
- package/locales/ja/index.js +0 -98
- package/locales/ko/index.d.ts +0 -3
- package/locales/ko/index.js +0 -98
- package/locales/nl/index.d.ts +0 -3
- package/locales/nl/index.js +0 -98
- package/locales/no/index.d.ts +0 -3
- package/locales/no/index.js +0 -98
- package/locales/np/index.d.ts +0 -3
- package/locales/np/index.js +0 -98
- package/locales/pl/index.d.ts +0 -3
- package/locales/pl/index.js +0 -98
- package/locales/pt/index.d.ts +0 -3
- package/locales/pt/index.js +0 -98
- package/locales/pt-BR/index.d.ts +0 -3
- package/locales/pt-BR/index.js +0 -98
- package/locales/ro/index.d.ts +0 -3
- package/locales/ro/index.js +0 -98
- package/locales/ru/index.d.ts +0 -3
- package/locales/ru/index.js +0 -98
- package/locales/sk/index.d.ts +0 -3
- package/locales/sk/index.js +0 -98
- package/locales/sr-Cyrl-RS/index.d.ts +0 -3
- package/locales/sr-Cyrl-RS/index.js +0 -98
- package/locales/sr-Latn-RS/index.d.ts +0 -3
- package/locales/sr-Latn-RS/index.js +0 -98
- package/locales/sv/index.d.ts +0 -3
- package/locales/sv/index.js +0 -98
- package/locales/tr/index.d.ts +0 -3
- package/locales/tr/index.js +0 -98
- package/locales/uk/index.d.ts +0 -3
- package/locales/uk/index.js +0 -98
- package/locales/vi/index.d.ts +0 -3
- package/locales/vi/index.js +0 -98
- package/locales/zh-Hans/index.d.ts +0 -3
- package/locales/zh-Hans/index.js +0 -98
- package/locales/zh-Hant/index.d.ts +0 -3
- package/locales/zh-Hant/index.js +0 -98
package/dist/index.js
CHANGED
|
@@ -1,25 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
let _mui_icons_material = require("@mui/icons-material");
|
|
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
|
+
import { Fragment, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
|
|
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";
|
|
5
|
+
import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
|
|
6
|
+
import { alpha, darken, lighten, useTheme } from "@mui/material/styles";
|
|
7
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
import { debounce } from "@mui/material/utils";
|
|
9
|
+
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
|
|
10
|
+
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
|
|
11
|
+
import { TimePicker } from "@mui/x-date-pickers/TimePicker";
|
|
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";
|
|
14
13
|
//#region src/fns/sortingFns.ts
|
|
15
14
|
const fuzzy$1 = (rowA, rowB, columnId) => {
|
|
16
15
|
let dir = 0;
|
|
17
|
-
if (rowA.columnFiltersMeta[columnId]) dir =
|
|
18
|
-
return dir === 0 ?
|
|
16
|
+
if (rowA.columnFiltersMeta[columnId]) dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
|
|
17
|
+
return dir === 0 ? sortFn_alphanumeric(rowA, rowB, columnId) : dir;
|
|
19
18
|
};
|
|
20
19
|
const MRT_SortingFns = {
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
alphanumeric: sortFn_alphanumeric,
|
|
21
|
+
basic: sortFn_basic,
|
|
22
|
+
datetime: sortFn_datetime,
|
|
23
|
+
fuzzy: fuzzy$1,
|
|
24
|
+
text: sortFn_text
|
|
23
25
|
};
|
|
24
26
|
const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) - Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
|
|
25
27
|
//#endregion
|
|
@@ -28,12 +30,14 @@ const parseFromValuesOrFunc = (fn, arg) => fn instanceof Function ? fn(arg) : fn
|
|
|
28
30
|
const getValueAndLabel = (option) => {
|
|
29
31
|
let label = "";
|
|
30
32
|
let value = "";
|
|
31
|
-
if (option)
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
if (option) {
|
|
34
|
+
if (typeof option !== "object") {
|
|
35
|
+
label = option;
|
|
36
|
+
value = option;
|
|
37
|
+
} else {
|
|
38
|
+
label = option.label ?? option.value;
|
|
39
|
+
value = option.value ?? label;
|
|
40
|
+
}
|
|
37
41
|
}
|
|
38
42
|
return {
|
|
39
43
|
label,
|
|
@@ -43,13 +47,13 @@ const getValueAndLabel = (option) => {
|
|
|
43
47
|
//#endregion
|
|
44
48
|
//#region src/utils/row.utils.ts
|
|
45
49
|
const getMRT_Rows = (table, all) => {
|
|
46
|
-
const { getCenterRows,
|
|
47
|
-
const { creatingRow, pagination } =
|
|
50
|
+
const { getCenterRows, getPrePaginatedRowModel, getRowModel, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode } } = table;
|
|
51
|
+
const { creatingRow, pagination } = table.state;
|
|
48
52
|
const isRankingRows = getIsRankingRows(table);
|
|
49
53
|
let rows = [];
|
|
50
|
-
if (!isRankingRows) rows = !enableRowPinning || rowPinningDisplayMode?.includes("sticky") ? all ?
|
|
54
|
+
if (!isRankingRows) rows = !enableRowPinning || rowPinningDisplayMode?.includes("sticky") ? all ? getPrePaginatedRowModel().rows : getRowModel().rows : getCenterRows();
|
|
51
55
|
else {
|
|
52
|
-
rows =
|
|
56
|
+
rows = getPrePaginatedRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
|
|
53
57
|
if (enablePagination && !manualPagination && !all) {
|
|
54
58
|
const start = pagination.pageIndex * pagination.pageSize;
|
|
55
59
|
rows = rows.slice(start, start + pagination.pageSize);
|
|
@@ -71,12 +75,12 @@ const getMRT_Rows = (table, all) => {
|
|
|
71
75
|
return rows;
|
|
72
76
|
};
|
|
73
77
|
const getCanRankRows = (table) => {
|
|
74
|
-
const {
|
|
75
|
-
const { expanded, globalFilterFn } =
|
|
78
|
+
const { options: { enableGlobalFilterRankedResults, manualExpanding, manualFiltering, manualGrouping, manualSorting } } = table;
|
|
79
|
+
const { expanded, globalFilterFn } = table.state;
|
|
76
80
|
return !manualExpanding && !manualFiltering && !manualGrouping && !manualSorting && enableGlobalFilterRankedResults && globalFilterFn === "fuzzy" && expanded !== true && !Object.values(expanded).some(Boolean);
|
|
77
81
|
};
|
|
78
82
|
const getIsRankingRows = (table) => {
|
|
79
|
-
const { globalFilter, sorting } = table.
|
|
83
|
+
const { globalFilter, sorting } = table.state;
|
|
80
84
|
return getCanRankRows(table) && globalFilter && !Object.values(sorting).some(Boolean);
|
|
81
85
|
};
|
|
82
86
|
const getIsRowSelected = ({ row, table }) => {
|
|
@@ -84,8 +88,8 @@ const getIsRowSelected = ({ row, table }) => {
|
|
|
84
88
|
return row.getIsSelected() || parseFromValuesOrFunc(enableRowSelection, row) && row.getCanSelectSubRows() && row.getIsAllSubRowsSelected();
|
|
85
89
|
};
|
|
86
90
|
const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table }) => (event, value) => {
|
|
87
|
-
const {
|
|
88
|
-
const { pagination: { pageIndex, pageSize } } =
|
|
91
|
+
const { options: { enableBatchRowSelection, enableMultiRowSelection, enableRowPinning, manualPagination, rowPinningDisplayMode }, refs: { lastSelectedRowId } } = table;
|
|
92
|
+
const { pagination: { pageIndex, pageSize } } = table.state;
|
|
89
93
|
const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
|
|
90
94
|
const wasCurrentRowChecked = getIsRowSelected({
|
|
91
95
|
row,
|
|
@@ -127,9 +131,9 @@ const getMRT_SelectAllHandler = ({ table }) => (event, value, forceAll) => {
|
|
|
127
131
|
//#endregion
|
|
128
132
|
//#region src/hooks/useMRT_Rows.ts
|
|
129
133
|
const useMRT_Rows = (table) => {
|
|
130
|
-
const { getRowModel,
|
|
131
|
-
const { creatingRow, expanded, globalFilter, pagination, rowPinning, sorting } =
|
|
132
|
-
return
|
|
134
|
+
const { getRowModel, options: { data, enableGlobalFilterRankedResults, positionCreatingRow } } = table;
|
|
135
|
+
const { creatingRow, expanded, globalFilter, pagination, rowPinning, sorting } = table.state;
|
|
136
|
+
return useMemo(() => getMRT_Rows(table), [
|
|
133
137
|
creatingRow,
|
|
134
138
|
data,
|
|
135
139
|
enableGlobalFilterRankedResults,
|
|
@@ -151,7 +155,7 @@ const useMRT_Rows = (table) => {
|
|
|
151
155
|
* We should keep the `draggingRow` or `draggingColumn` in `getVirtualItems()` to avoid this thing.
|
|
152
156
|
*/
|
|
153
157
|
const extraIndexRangeExtractor = (range, draggingIndex) => {
|
|
154
|
-
const newIndexes =
|
|
158
|
+
const newIndexes = defaultRangeExtractor(range);
|
|
155
159
|
if (draggingIndex === void 0) return newIndexes;
|
|
156
160
|
if (draggingIndex >= 0 && draggingIndex < Math.max(range.startIndex - range.overscan, 0)) newIndexes.unshift(draggingIndex);
|
|
157
161
|
if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) newIndexes.push(draggingIndex);
|
|
@@ -160,24 +164,24 @@ const extraIndexRangeExtractor = (range, draggingIndex) => {
|
|
|
160
164
|
//#endregion
|
|
161
165
|
//#region src/hooks/useMRT_RowVirtualizer.ts
|
|
162
166
|
const useMRT_RowVirtualizer = (table, rows) => {
|
|
163
|
-
const { getRowModel,
|
|
164
|
-
const { density, draggingRow, expanded } =
|
|
167
|
+
const { getRowModel, options: { enableRowVirtualization, renderDetailPanel, rowVirtualizerInstanceRef, rowVirtualizerOptions }, refs: { tableContainerRef } } = table;
|
|
168
|
+
const { density, draggingRow, expanded } = table.state;
|
|
165
169
|
if (!enableRowVirtualization) return void 0;
|
|
166
170
|
const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, { table });
|
|
167
171
|
const realRows = rows ?? getRowModel().rows;
|
|
168
172
|
/**
|
|
169
173
|
* when filtering, should find the correct index in filtered rows
|
|
170
174
|
*/
|
|
171
|
-
const draggingRowIndex =
|
|
175
|
+
const draggingRowIndex = useMemo(() => draggingRow?.id ? realRows.findIndex((r) => r.id === draggingRow?.id) : void 0, [realRows, draggingRow?.id]);
|
|
172
176
|
const rowCount = realRows.length;
|
|
173
177
|
const normalRowHeight = density === "compact" ? 37 : density === "comfortable" ? 58 : 73;
|
|
174
|
-
const rowVirtualizer =
|
|
178
|
+
const rowVirtualizer = useVirtualizer({
|
|
175
179
|
count: renderDetailPanel ? rowCount * 2 : rowCount,
|
|
176
180
|
estimateSize: (index) => renderDetailPanel && index % 2 === 1 ? expanded === true ? 100 : 0 : normalRowHeight,
|
|
177
181
|
getScrollElement: () => tableContainerRef.current,
|
|
178
182
|
measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? (element) => element?.getBoundingClientRect().height : void 0,
|
|
179
183
|
overscan: 4,
|
|
180
|
-
rangeExtractor:
|
|
184
|
+
rangeExtractor: useCallback((range) => {
|
|
181
185
|
return extraIndexRangeExtractor(range, draggingRowIndex);
|
|
182
186
|
}, [draggingRowIndex]),
|
|
183
187
|
...rowVirtualizerProps
|
|
@@ -191,15 +195,15 @@ const useMRT_RowVirtualizer = (table, rows) => {
|
|
|
191
195
|
const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, "_");
|
|
192
196
|
const getMRTTheme = (mrtTheme, muiTheme) => {
|
|
193
197
|
const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme);
|
|
194
|
-
const baseBackgroundColor = mrtThemeOverrides?.baseBackgroundColor ?? (muiTheme.palette.mode === "dark" ?
|
|
198
|
+
const baseBackgroundColor = mrtThemeOverrides?.baseBackgroundColor ?? (muiTheme.palette.mode === "dark" ? lighten(muiTheme.palette.background.default, .05) : muiTheme.palette.background.default);
|
|
195
199
|
return {
|
|
196
200
|
baseBackgroundColor,
|
|
197
201
|
cellNavigationOutlineColor: muiTheme.palette.primary.main,
|
|
198
202
|
draggingBorderColor: muiTheme.palette.primary.main,
|
|
199
|
-
matchHighlightColor: muiTheme.palette.mode === "dark" ?
|
|
200
|
-
menuBackgroundColor:
|
|
201
|
-
pinnedRowBackgroundColor:
|
|
202
|
-
selectedRowBackgroundColor:
|
|
203
|
+
matchHighlightColor: muiTheme.palette.mode === "dark" ? darken(muiTheme.palette.warning.dark, .25) : lighten(muiTheme.palette.warning.light, .5),
|
|
204
|
+
menuBackgroundColor: lighten(baseBackgroundColor, .07),
|
|
205
|
+
pinnedRowBackgroundColor: alpha(muiTheme.palette.primary.main, .1),
|
|
206
|
+
selectedRowBackgroundColor: alpha(muiTheme.palette.primary.main, .2),
|
|
203
207
|
...mrtThemeOverrides
|
|
204
208
|
};
|
|
205
209
|
};
|
|
@@ -216,14 +220,14 @@ const getCommonPinnedCellStyles = ({ column, table, theme }) => {
|
|
|
216
220
|
const { baseBackgroundColor } = table.options.mrtTheme;
|
|
217
221
|
const isPinned = column?.getIsPinned();
|
|
218
222
|
return { "&[data-pinned=\"true\"]": { "&:before": {
|
|
219
|
-
backgroundColor:
|
|
220
|
-
boxShadow: column ? isPinned === "
|
|
223
|
+
backgroundColor: alpha(darken(baseBackgroundColor, theme.palette.mode === "dark" ? .05 : .01), .97),
|
|
224
|
+
boxShadow: column ? isPinned === "start" && column.getIsLastColumn(isPinned) ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], .5)} inset` : isPinned === "end" && column.getIsFirstColumn(isPinned) ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], .5)} inset` : void 0 : void 0,
|
|
221
225
|
...commonCellBeforeAfterStyles
|
|
222
226
|
} } };
|
|
223
227
|
};
|
|
224
228
|
const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme }) => {
|
|
225
|
-
const {
|
|
226
|
-
const { draggingColumn } =
|
|
229
|
+
const { options: { enableColumnVirtualization, layoutMode } } = table;
|
|
230
|
+
const { draggingColumn } = table.state;
|
|
227
231
|
const { columnDef } = column;
|
|
228
232
|
const { columnDefType } = columnDef;
|
|
229
233
|
const isColumnPinned = columnDef.columnDefType !== "group" && column.getIsPinned();
|
|
@@ -239,10 +243,10 @@ const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme }
|
|
|
239
243
|
table,
|
|
240
244
|
theme
|
|
241
245
|
}),
|
|
242
|
-
left: isColumnPinned === "
|
|
246
|
+
left: isColumnPinned === "start" ? `${column.getStart("start")}px` : void 0,
|
|
243
247
|
opacity: .97,
|
|
244
248
|
position: "sticky",
|
|
245
|
-
right: isColumnPinned === "
|
|
249
|
+
right: isColumnPinned === "end" ? `${column.getAfter("end")}px` : void 0
|
|
246
250
|
} : {};
|
|
247
251
|
return {
|
|
248
252
|
"&:focus-visible": {
|
|
@@ -253,7 +257,7 @@ const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme }
|
|
|
253
257
|
backgroundImage: "inherit",
|
|
254
258
|
display: layoutMode?.startsWith("grid") ? "flex" : void 0,
|
|
255
259
|
justifyContent: columnDefType === "group" ? "center" : layoutMode?.startsWith("grid") ? tableCellProps.align : void 0,
|
|
256
|
-
opacity: table.
|
|
260
|
+
opacity: table.state.draggingColumn?.id === column.id || table.state.hoveredColumn?.id === column.id ? .5 : 1,
|
|
257
261
|
position: "relative",
|
|
258
262
|
transition: enableColumnVirtualization ? "none" : `padding 150ms ease-in-out`,
|
|
259
263
|
zIndex: column.getIsResizing() || draggingColumn?.id === column.id ? 2 : columnDefType !== "group" && isColumnPinned ? 1 : 0,
|
|
@@ -393,9 +397,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
|
|
|
393
397
|
case "PageDown":
|
|
394
398
|
nextCell = findBottomTopCell(currentIndex, "b");
|
|
395
399
|
break;
|
|
396
|
-
case "PageUp":
|
|
397
|
-
nextCell = findBottomTopCell(currentIndex, "t");
|
|
398
|
-
break;
|
|
400
|
+
case "PageUp": nextCell = findBottomTopCell(currentIndex, "t");
|
|
399
401
|
}
|
|
400
402
|
if (nextCell) nextCell.focus();
|
|
401
403
|
}
|
|
@@ -406,7 +408,7 @@ const MRT_CopyButton = ({ cell, table, ...rest }) => {
|
|
|
406
408
|
const { options: { localization, muiCopyButtonProps } } = table;
|
|
407
409
|
const { column, row } = cell;
|
|
408
410
|
const { columnDef } = column;
|
|
409
|
-
const [copied, setCopied] =
|
|
411
|
+
const [copied, setCopied] = useState(false);
|
|
410
412
|
const handleCopy = (event, text) => {
|
|
411
413
|
event.stopPropagation();
|
|
412
414
|
navigator.clipboard.writeText(text);
|
|
@@ -428,10 +430,10 @@ const MRT_CopyButton = ({ cell, table, ...rest }) => {
|
|
|
428
430
|
}),
|
|
429
431
|
...rest
|
|
430
432
|
};
|
|
431
|
-
return /* @__PURE__ */
|
|
433
|
+
return /* @__PURE__ */ jsx(Tooltip, {
|
|
432
434
|
...getCommonTooltipProps("top"),
|
|
433
435
|
title: buttonProps?.title ?? (copied ? localization.copiedToClipboard : localization.clickToCopy),
|
|
434
|
-
children: /* @__PURE__ */
|
|
436
|
+
children: /* @__PURE__ */ jsx(Button, {
|
|
435
437
|
onClick: (e) => handleCopy(e, cell.getValue()),
|
|
436
438
|
size: "small",
|
|
437
439
|
type: "button",
|
|
@@ -468,15 +470,15 @@ const getTextFieldSlotProps = (slotProps) => ({
|
|
|
468
470
|
//#endregion
|
|
469
471
|
//#region src/components/inputs/MRT_EditCellTextField.tsx
|
|
470
472
|
const MRT_EditCellTextField = ({ cell, table, ...rest }) => {
|
|
471
|
-
const {
|
|
473
|
+
const { options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps }, refs: { editInputRefs }, setCreatingRow, setEditingCell, setEditingRow } = table;
|
|
472
474
|
const { column, row } = cell;
|
|
473
475
|
const { columnDef } = column;
|
|
474
|
-
const { creatingRow, editingRow } =
|
|
476
|
+
const { creatingRow, editingRow } = table.state;
|
|
475
477
|
const { editSelectOptions, editVariant } = columnDef;
|
|
476
478
|
const isCreating = creatingRow?.id === row.id;
|
|
477
479
|
const isEditing = editingRow?.id === row.id;
|
|
478
|
-
const [value, setValue] =
|
|
479
|
-
const [completesComposition, setCompletesComposition] =
|
|
480
|
+
const [value, setValue] = useState(() => cell.getValue());
|
|
481
|
+
const [completesComposition, setCompletesComposition] = useState(true);
|
|
480
482
|
const textFieldProps = {
|
|
481
483
|
...parseFromValuesOrFunc(muiEditTextFieldProps, {
|
|
482
484
|
cell,
|
|
@@ -518,14 +520,14 @@ const MRT_EditCellTextField = ({ cell, table, ...rest }) => {
|
|
|
518
520
|
textFieldProps.onKeyDown?.(event);
|
|
519
521
|
if (event.key === "Enter" && !event.shiftKey && completesComposition) editInputRefs.current?.[column.id]?.blur();
|
|
520
522
|
};
|
|
521
|
-
if (columnDef.Edit) return /* @__PURE__ */
|
|
523
|
+
if (columnDef.Edit) return /* @__PURE__ */ jsx(Fragment$1, { children: columnDef.Edit?.({
|
|
522
524
|
cell,
|
|
523
525
|
column,
|
|
524
526
|
row,
|
|
525
527
|
table
|
|
526
528
|
}) });
|
|
527
529
|
const consumerSlots = getTextFieldSlotProps(textFieldProps.slotProps);
|
|
528
|
-
return /* @__PURE__ */
|
|
530
|
+
return /* @__PURE__ */ jsx(TextField, {
|
|
529
531
|
disabled: parseFromValuesOrFunc(columnDef.enableEditing, row) === false,
|
|
530
532
|
fullWidth: true,
|
|
531
533
|
inputRef: (inputRef) => {
|
|
@@ -572,7 +574,7 @@ const MRT_EditCellTextField = ({ cell, table, ...rest }) => {
|
|
|
572
574
|
},
|
|
573
575
|
children: textFieldProps.children ?? selectOptions?.map((option) => {
|
|
574
576
|
const { label, value } = getValueAndLabel(option);
|
|
575
|
-
return /* @__PURE__ */
|
|
577
|
+
return /* @__PURE__ */ jsx(MenuItem, {
|
|
576
578
|
sx: {
|
|
577
579
|
alignItems: "center",
|
|
578
580
|
display: "flex",
|
|
@@ -616,10 +618,10 @@ const highlightWords = ({ matchExactly = false, query, text }) => {
|
|
|
616
618
|
//#region src/components/body/MRT_TableBodyCellValue.tsx
|
|
617
619
|
const allowedTypes = ["string", "number"];
|
|
618
620
|
const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowIndex, table }) => {
|
|
619
|
-
const {
|
|
621
|
+
const { options: { enableFilterMatchHighlighting, mrtTheme: { matchHighlightColor } } } = table;
|
|
620
622
|
const { column, row } = cell;
|
|
621
623
|
const { columnDef } = column;
|
|
622
|
-
const { globalFilter, globalFilterFn } =
|
|
624
|
+
const { globalFilter, globalFilterFn } = table.state;
|
|
623
625
|
const filterValue = column.getFilterValue();
|
|
624
626
|
let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell ? columnDef.AggregatedCell({
|
|
625
627
|
cell,
|
|
@@ -644,10 +646,10 @@ const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowInde
|
|
|
644
646
|
query: (filterValue ?? globalFilter ?? "").toString(),
|
|
645
647
|
text: renderedCellValue?.toString()
|
|
646
648
|
});
|
|
647
|
-
if (chunks?.length > 1 || chunks?.[0]?.match) renderedCellValue = /* @__PURE__ */
|
|
649
|
+
if (chunks?.length > 1 || chunks?.[0]?.match) renderedCellValue = /* @__PURE__ */ jsx("span", {
|
|
648
650
|
"aria-label": renderedCellValue,
|
|
649
651
|
role: "note",
|
|
650
|
-
children: chunks?.map(({ key, match, text }) => /* @__PURE__ */
|
|
652
|
+
children: chunks?.map(({ key, match, text }) => /* @__PURE__ */ jsx(Box, {
|
|
651
653
|
"aria-hidden": "true",
|
|
652
654
|
component: "span",
|
|
653
655
|
sx: match ? {
|
|
@@ -675,9 +677,9 @@ const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowInde
|
|
|
675
677
|
//#endregion
|
|
676
678
|
//#region src/components/body/MRT_TableBodyCell.tsx
|
|
677
679
|
const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table, ...rest }) => {
|
|
678
|
-
const theme =
|
|
679
|
-
const {
|
|
680
|
-
const { actionCell,
|
|
680
|
+
const theme = useTheme();
|
|
681
|
+
const { options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, enableKeyboardShortcuts, layoutMode, mrtTheme: { draggingBorderColor }, muiSkeletonProps, muiTableBodyCellProps }, setHoveredColumn } = table;
|
|
682
|
+
const { actionCell, columnResizing, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons } = table.state;
|
|
681
683
|
const { column, row } = cell;
|
|
682
684
|
const { columnDef } = column;
|
|
683
685
|
const { columnDefType } = columnDef;
|
|
@@ -698,13 +700,13 @@ const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRow
|
|
|
698
700
|
row,
|
|
699
701
|
table
|
|
700
702
|
});
|
|
701
|
-
const [skeletonWidth, setSkeletonWidth] =
|
|
702
|
-
|
|
703
|
+
const [skeletonWidth, setSkeletonWidth] = useState(100);
|
|
704
|
+
useEffect(() => {
|
|
703
705
|
if (!isLoading && !showSkeletons || skeletonWidth !== 100) return;
|
|
704
706
|
const size = column.getSize();
|
|
705
707
|
setSkeletonWidth(columnDefType === "display" ? size / 2 : Math.round(Math.random() * (size - size / 3) + size / 3));
|
|
706
708
|
}, [isLoading, showSkeletons]);
|
|
707
|
-
const draggingBorders =
|
|
709
|
+
const draggingBorders = useMemo(() => {
|
|
708
710
|
const isDraggingColumn = draggingColumn?.id === column.id;
|
|
709
711
|
const isHoveredColumn = hoveredColumn?.id === column.id;
|
|
710
712
|
const isDraggingRow = draggingRow?.id === row.id;
|
|
@@ -712,7 +714,7 @@ const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRow
|
|
|
712
714
|
const isFirstColumn = column.getIsFirstColumn();
|
|
713
715
|
const isLastColumn = column.getIsLastColumn();
|
|
714
716
|
const isLastRow = numRows && staticRowIndex === numRows - 1;
|
|
715
|
-
const isResizingColumn =
|
|
717
|
+
const isResizingColumn = columnResizing.isResizingColumn === column.id;
|
|
716
718
|
const showResizeBorder = isResizingColumn && columnResizeMode === "onChange";
|
|
717
719
|
const borderStyle = showResizeBorder ? `2px solid ${draggingBorderColor} !important` : isDraggingColumn || isDraggingRow ? `1px dashed ${theme.palette.grey[500]} !important` : isHoveredColumn || isHoveredRow || isResizingColumn ? `2px dashed ${draggingBorderColor} !important` : void 0;
|
|
718
720
|
if (showResizeBorder) return columnResizeDirection === "ltr" ? { borderRight: borderStyle } : { borderLeft: borderStyle };
|
|
@@ -723,7 +725,7 @@ const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRow
|
|
|
723
725
|
borderTop: isDraggingRow || isHoveredRow ? borderStyle : void 0
|
|
724
726
|
} : void 0;
|
|
725
727
|
}, [
|
|
726
|
-
|
|
728
|
+
columnResizing.isResizingColumn,
|
|
727
729
|
draggingColumn,
|
|
728
730
|
draggingRow,
|
|
729
731
|
hoveredColumn,
|
|
@@ -777,7 +779,7 @@ const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRow
|
|
|
777
779
|
table
|
|
778
780
|
});
|
|
779
781
|
};
|
|
780
|
-
return /* @__PURE__ */
|
|
782
|
+
return /* @__PURE__ */ jsx(TableCell, {
|
|
781
783
|
align: theme.direction === "rtl" ? "right" : "left",
|
|
782
784
|
"data-index": staticColumnIndex,
|
|
783
785
|
"data-pinned": !!isColumnPinned || void 0,
|
|
@@ -809,12 +811,12 @@ const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRow
|
|
|
809
811
|
}),
|
|
810
812
|
...draggingBorders
|
|
811
813
|
}),
|
|
812
|
-
children: tableCellProps.children ?? /* @__PURE__ */
|
|
814
|
+
children: tableCellProps.children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [cell.getIsPlaceholder() ? columnDef.PlaceholderCell?.({
|
|
813
815
|
cell,
|
|
814
816
|
column,
|
|
815
817
|
row,
|
|
816
818
|
table
|
|
817
|
-
}) ?? null : showSkeletons !== false && (isLoading || showSkeletons) ? /* @__PURE__ */
|
|
819
|
+
}) ?? null : showSkeletons !== false && (isLoading || showSkeletons) ? /* @__PURE__ */ jsx(Skeleton, {
|
|
818
820
|
animation: "wave",
|
|
819
821
|
height: 20,
|
|
820
822
|
width: skeletonWidth,
|
|
@@ -832,26 +834,26 @@ const MRT_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRow
|
|
|
832
834
|
staticColumnIndex,
|
|
833
835
|
staticRowIndex,
|
|
834
836
|
table
|
|
835
|
-
}) : isCreating || isEditing ? /* @__PURE__ */
|
|
837
|
+
}) : isCreating || isEditing ? /* @__PURE__ */ jsx(MRT_EditCellTextField, {
|
|
836
838
|
cell,
|
|
837
839
|
table
|
|
838
|
-
}) : showClickToCopyButton && columnDef.enableClickToCopy !== false ? /* @__PURE__ */
|
|
840
|
+
}) : showClickToCopyButton && columnDef.enableClickToCopy !== false ? /* @__PURE__ */ jsx(MRT_CopyButton, {
|
|
839
841
|
cell,
|
|
840
842
|
table,
|
|
841
|
-
children: /* @__PURE__ */
|
|
842
|
-
}) : /* @__PURE__ */
|
|
843
|
+
children: /* @__PURE__ */ jsx(MRT_TableBodyCellValue, { ...cellValueProps })
|
|
844
|
+
}) : /* @__PURE__ */ jsx(MRT_TableBodyCellValue, { ...cellValueProps }), cell.getIsGrouped() && !columnDef.GroupedCell && /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
843
845
|
" (",
|
|
844
846
|
row.subRows?.length,
|
|
845
847
|
")"
|
|
846
848
|
] })] })
|
|
847
849
|
});
|
|
848
850
|
};
|
|
849
|
-
const Memo_MRT_TableBodyCell =
|
|
851
|
+
const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
|
|
850
852
|
//#endregion
|
|
851
853
|
//#region src/components/body/MRT_TableDetailPanel.tsx
|
|
852
854
|
const MRT_TableDetailPanel = ({ parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow, ...rest }) => {
|
|
853
|
-
const {
|
|
854
|
-
const { isLoading } =
|
|
855
|
+
const { getVisibleLeafColumns, options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel } } = table;
|
|
856
|
+
const { isLoading } = table.state;
|
|
855
857
|
const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
|
|
856
858
|
isDetailPanel: true,
|
|
857
859
|
row,
|
|
@@ -869,7 +871,7 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowVirtualizer, staticRowInde
|
|
|
869
871
|
row,
|
|
870
872
|
table
|
|
871
873
|
});
|
|
872
|
-
return /* @__PURE__ */
|
|
874
|
+
return /* @__PURE__ */ jsx(TableRow, {
|
|
873
875
|
className: "Mui-TableBodyCell-DetailPanel",
|
|
874
876
|
"data-index": renderDetailPanel ? staticRowIndex * 2 + 1 : staticRowIndex,
|
|
875
877
|
ref: (node) => {
|
|
@@ -884,7 +886,7 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowVirtualizer, staticRowInde
|
|
|
884
886
|
width: "100%",
|
|
885
887
|
...parseFromValuesOrFunc(tableRowProps?.sx, theme)
|
|
886
888
|
}),
|
|
887
|
-
children: /* @__PURE__ */
|
|
889
|
+
children: /* @__PURE__ */ jsx(TableCell, {
|
|
888
890
|
className: "Mui-TableBodyCell-DetailPanel",
|
|
889
891
|
colSpan: getVisibleLeafColumns().length,
|
|
890
892
|
...tableCellProps,
|
|
@@ -897,7 +899,7 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowVirtualizer, staticRowInde
|
|
|
897
899
|
width: `100%`,
|
|
898
900
|
...parseFromValuesOrFunc(tableCellProps?.sx, theme)
|
|
899
901
|
}),
|
|
900
|
-
children: virtualRow ? row.getIsExpanded() && DetailPanel : /* @__PURE__ */
|
|
902
|
+
children: virtualRow ? row.getIsExpanded() && DetailPanel : /* @__PURE__ */ jsx(Collapse, {
|
|
901
903
|
in: row.getIsExpanded(),
|
|
902
904
|
mountOnEnter: true,
|
|
903
905
|
unmountOnExit: true,
|
|
@@ -909,9 +911,9 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowVirtualizer, staticRowInde
|
|
|
909
911
|
//#endregion
|
|
910
912
|
//#region src/components/body/MRT_TableBodyRow.tsx
|
|
911
913
|
const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow, ...rest }) => {
|
|
912
|
-
const theme =
|
|
913
|
-
const {
|
|
914
|
-
const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning } =
|
|
914
|
+
const theme = useTheme();
|
|
915
|
+
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, rowPinning } = table.state;
|
|
915
917
|
const visibleCells = row.getVisibleCells();
|
|
916
918
|
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
|
|
917
919
|
const isRowSelected = getIsRowSelected({
|
|
@@ -929,7 +931,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
|
|
|
929
931
|
}),
|
|
930
932
|
...rest
|
|
931
933
|
};
|
|
932
|
-
const [bottomPinnedIndex, topPinnedIndex] =
|
|
934
|
+
const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
|
|
933
935
|
if (!enableRowPinning || !rowPinningDisplayMode?.includes("sticky") || !pinnedRowIds || !row.getIsPinned()) return [];
|
|
934
936
|
return [[...pinnedRowIds].reverse().indexOf(row.id), pinnedRowIds.indexOf(row.id)];
|
|
935
937
|
}, [pinnedRowIds, rowPinning]);
|
|
@@ -944,10 +946,10 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
|
|
|
944
946
|
const handleDragOver = (e) => {
|
|
945
947
|
e.preventDefault();
|
|
946
948
|
};
|
|
947
|
-
const rowRef =
|
|
949
|
+
const rowRef = useRef(null);
|
|
948
950
|
const cellHighlightColor = isRowSelected ? selectedRowBackgroundColor : isRowPinned ? pinnedRowBackgroundColor : void 0;
|
|
949
|
-
const cellHighlightColorHover = tableRowProps?.hover !== false ? isRowSelected ? cellHighlightColor : theme.palette.mode === "dark" ? `${
|
|
950
|
-
return /* @__PURE__ */
|
|
951
|
+
const cellHighlightColorHover = tableRowProps?.hover !== false ? isRowSelected ? cellHighlightColor : theme.palette.mode === "dark" ? `${lighten(baseBackgroundColor, .3)}` : `${darken(baseBackgroundColor, .3)}` : void 0;
|
|
952
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(TableRow, {
|
|
951
953
|
"data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex,
|
|
952
954
|
"data-pinned": !!isRowPinned || void 0,
|
|
953
955
|
"data-selected": isRowSelected || void 0,
|
|
@@ -967,7 +969,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
|
|
|
967
969
|
},
|
|
968
970
|
sx: (theme) => ({
|
|
969
971
|
"&:hover td:after": cellHighlightColorHover ? {
|
|
970
|
-
backgroundColor:
|
|
972
|
+
backgroundColor: alpha(cellHighlightColorHover, .3),
|
|
971
973
|
...commonCellBeforeAfterStyles
|
|
972
974
|
} : void 0,
|
|
973
975
|
backgroundColor: `${baseBackgroundColor} !important`,
|
|
@@ -991,7 +993,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
|
|
|
991
993
|
...sx
|
|
992
994
|
}),
|
|
993
995
|
children: [
|
|
994
|
-
virtualPaddingLeft ? /* @__PURE__ */
|
|
996
|
+
virtualPaddingLeft ? /* @__PURE__ */ jsx("td", { style: {
|
|
995
997
|
display: "flex",
|
|
996
998
|
width: virtualPaddingLeft
|
|
997
999
|
} }) : null,
|
|
@@ -1010,14 +1012,14 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
|
|
|
1010
1012
|
table
|
|
1011
1013
|
};
|
|
1012
1014
|
const key = `${cell.id}-${staticRowIndex}`;
|
|
1013
|
-
return cell ? memoMode === "cells" && cell.column.columnDef.columnDefType === "data" && !draggingColumn && !draggingRow && editingCell?.id !== cell.id && editingRow?.id !== row.id ? /* @__PURE__ */
|
|
1015
|
+
return cell ? memoMode === "cells" && cell.column.columnDef.columnDefType === "data" && !draggingColumn && !draggingRow && editingCell?.id !== cell.id && editingRow?.id !== row.id ? /* @__PURE__ */ jsx(Memo_MRT_TableBodyCell, { ...props }, key) : /* @__PURE__ */ jsx(MRT_TableBodyCell, { ...props }, key) : null;
|
|
1014
1016
|
}),
|
|
1015
|
-
virtualPaddingRight ? /* @__PURE__ */
|
|
1017
|
+
virtualPaddingRight ? /* @__PURE__ */ jsx("td", { style: {
|
|
1016
1018
|
display: "flex",
|
|
1017
1019
|
width: virtualPaddingRight
|
|
1018
1020
|
} }) : null
|
|
1019
1021
|
]
|
|
1020
|
-
}), renderDetailPanel && !row.getIsGrouped() && /* @__PURE__ */
|
|
1022
|
+
}), renderDetailPanel && !row.getIsGrouped() && /* @__PURE__ */ jsx(MRT_TableDetailPanel, {
|
|
1021
1023
|
parentRowRef: rowRef,
|
|
1022
1024
|
row,
|
|
1023
1025
|
rowVirtualizer,
|
|
@@ -1026,19 +1028,19 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
|
|
|
1026
1028
|
virtualRow
|
|
1027
1029
|
})] });
|
|
1028
1030
|
};
|
|
1029
|
-
const Memo_MRT_TableBodyRow =
|
|
1031
|
+
const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.staticRowIndex === next.staticRowIndex);
|
|
1030
1032
|
//#endregion
|
|
1031
1033
|
//#region src/components/body/MRT_TableBody.tsx
|
|
1032
1034
|
const MRT_TableBody = ({ columnVirtualizer, table, ...rest }) => {
|
|
1033
|
-
const { getBottomRows, getIsSomeRowsPinned, getRowModel,
|
|
1034
|
-
const { columnFilters, globalFilter, isFullScreen, rowPinning } =
|
|
1035
|
+
const { getBottomRows, getIsSomeRowsPinned, getRowModel, getTopRows, options: { enableStickyFooter, enableStickyHeader, layoutMode, localization, memoMode, muiTableBodyProps, renderDetailPanel, renderEmptyRowsFallback, rowPinningDisplayMode }, refs: { tableFooterRef, tableHeadRef, tablePaperRef } } = table;
|
|
1036
|
+
const { columnFilters, globalFilter, isFullScreen, rowPinning } = table.state;
|
|
1035
1037
|
const tableBodyProps = {
|
|
1036
1038
|
...parseFromValuesOrFunc(muiTableBodyProps, { table }),
|
|
1037
1039
|
...rest
|
|
1038
1040
|
};
|
|
1039
1041
|
const tableHeadHeight = (enableStickyHeader || isFullScreen) && tableHeadRef.current?.clientHeight || 0;
|
|
1040
1042
|
const tableFooterHeight = enableStickyFooter && tableFooterRef.current?.clientHeight || 0;
|
|
1041
|
-
const pinnedRowIds =
|
|
1043
|
+
const pinnedRowIds = useMemo(() => {
|
|
1042
1044
|
if (!rowPinning.bottom?.length && !rowPinning.top?.length) return [];
|
|
1043
1045
|
return getRowModel().rows.filter((row) => row.getIsPinned()).map((r) => r.id);
|
|
1044
1046
|
}, [rowPinning, getRowModel().rows]);
|
|
@@ -1050,8 +1052,8 @@ const MRT_TableBody = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
1050
1052
|
numRows: rows.length,
|
|
1051
1053
|
table
|
|
1052
1054
|
};
|
|
1053
|
-
return /* @__PURE__ */
|
|
1054
|
-
!rowPinningDisplayMode?.includes("sticky") && getIsSomeRowsPinned("top") && /* @__PURE__ */
|
|
1055
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
1056
|
+
!rowPinningDisplayMode?.includes("sticky") && getIsSomeRowsPinned("top") && /* @__PURE__ */ jsx(TableBody, {
|
|
1055
1057
|
...tableBodyProps,
|
|
1056
1058
|
sx: (theme) => ({
|
|
1057
1059
|
display: layoutMode?.startsWith("grid") ? "grid" : void 0,
|
|
@@ -1066,10 +1068,10 @@ const MRT_TableBody = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
1066
1068
|
row,
|
|
1067
1069
|
staticRowIndex
|
|
1068
1070
|
};
|
|
1069
|
-
return memoMode === "rows" ? /* @__PURE__ */
|
|
1071
|
+
return memoMode === "rows" ? /* @__PURE__ */ jsx(Memo_MRT_TableBodyRow, { ...props }, row.id) : /* @__PURE__ */ jsx(MRT_TableBodyRow, { ...props }, row.id);
|
|
1070
1072
|
})
|
|
1071
1073
|
}),
|
|
1072
|
-
/* @__PURE__ */
|
|
1074
|
+
/* @__PURE__ */ jsx(TableBody, {
|
|
1073
1075
|
...tableBodyProps,
|
|
1074
1076
|
sx: (theme) => ({
|
|
1075
1077
|
display: layoutMode?.startsWith("grid") ? "grid" : void 0,
|
|
@@ -1078,12 +1080,12 @@ const MRT_TableBody = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
1078
1080
|
position: "relative",
|
|
1079
1081
|
...parseFromValuesOrFunc(tableBodyProps?.sx, theme)
|
|
1080
1082
|
}),
|
|
1081
|
-
children: tableBodyProps?.children ?? (!rows.length ? /* @__PURE__ */
|
|
1083
|
+
children: tableBodyProps?.children ?? (!rows.length ? /* @__PURE__ */ jsx("tr", {
|
|
1082
1084
|
style: { display: layoutMode?.startsWith("grid") ? "grid" : void 0 },
|
|
1083
|
-
children: /* @__PURE__ */
|
|
1085
|
+
children: /* @__PURE__ */ jsx("td", {
|
|
1084
1086
|
colSpan: table.getVisibleLeafColumns().length,
|
|
1085
1087
|
style: { display: layoutMode?.startsWith("grid") ? "grid" : void 0 },
|
|
1086
|
-
children: renderEmptyRowsFallback?.({ table }) ?? /* @__PURE__ */
|
|
1088
|
+
children: renderEmptyRowsFallback?.({ table }) ?? /* @__PURE__ */ jsx(Typography, {
|
|
1087
1089
|
sx: {
|
|
1088
1090
|
color: "text.secondary",
|
|
1089
1091
|
fontStyle: "italic",
|
|
@@ -1095,12 +1097,13 @@ const MRT_TableBody = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
1095
1097
|
children: globalFilter || columnFilters.length ? localization.noResultsFound : localization.noRecordsToDisplay
|
|
1096
1098
|
})
|
|
1097
1099
|
})
|
|
1098
|
-
}) : /* @__PURE__ */
|
|
1100
|
+
}) : /* @__PURE__ */ jsx(Fragment$1, { children: (virtualRows ?? rows).map((rowOrVirtualRow, staticRowIndex) => {
|
|
1099
1101
|
let row = rowOrVirtualRow;
|
|
1100
1102
|
if (rowVirtualizer) {
|
|
1101
|
-
if (renderDetailPanel)
|
|
1102
|
-
|
|
1103
|
-
|
|
1103
|
+
if (renderDetailPanel) {
|
|
1104
|
+
if (rowOrVirtualRow.index % 2 === 1) return null;
|
|
1105
|
+
else staticRowIndex = rowOrVirtualRow.index / 2;
|
|
1106
|
+
} else staticRowIndex = rowOrVirtualRow.index;
|
|
1104
1107
|
row = rows[staticRowIndex];
|
|
1105
1108
|
}
|
|
1106
1109
|
const props = {
|
|
@@ -1112,10 +1115,10 @@ const MRT_TableBody = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
1112
1115
|
virtualRow: rowVirtualizer ? rowOrVirtualRow : void 0
|
|
1113
1116
|
};
|
|
1114
1117
|
const key = `${row.id}-${row.index}`;
|
|
1115
|
-
return memoMode === "rows" ? /* @__PURE__ */
|
|
1118
|
+
return memoMode === "rows" ? /* @__PURE__ */ jsx(Memo_MRT_TableBodyRow, { ...props }, key) : /* @__PURE__ */ jsx(MRT_TableBodyRow, { ...props }, key);
|
|
1116
1119
|
}) }))
|
|
1117
1120
|
}),
|
|
1118
|
-
!rowPinningDisplayMode?.includes("sticky") && getIsSomeRowsPinned("bottom") && /* @__PURE__ */
|
|
1121
|
+
!rowPinningDisplayMode?.includes("sticky") && getIsSomeRowsPinned("bottom") && /* @__PURE__ */ jsx(TableBody, {
|
|
1119
1122
|
...tableBodyProps,
|
|
1120
1123
|
sx: (theme) => ({
|
|
1121
1124
|
bottom: tableFooterHeight - 1,
|
|
@@ -1130,20 +1133,20 @@ const MRT_TableBody = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
1130
1133
|
row,
|
|
1131
1134
|
staticRowIndex
|
|
1132
1135
|
};
|
|
1133
|
-
return memoMode === "rows" ? /* @__PURE__ */
|
|
1136
|
+
return memoMode === "rows" ? /* @__PURE__ */ jsx(Memo_MRT_TableBodyRow, { ...props }, row.id) : /* @__PURE__ */ jsx(MRT_TableBodyRow, { ...props }, row.id);
|
|
1134
1137
|
})
|
|
1135
1138
|
})
|
|
1136
1139
|
] });
|
|
1137
1140
|
};
|
|
1138
|
-
const Memo_MRT_TableBody =
|
|
1141
|
+
const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
|
|
1139
1142
|
//#endregion
|
|
1140
1143
|
//#region src/components/buttons/MRT_GrabHandleButton.tsx
|
|
1141
1144
|
const MRT_GrabHandleButton = ({ location, table, ...rest }) => {
|
|
1142
1145
|
const { options: { icons: { DragHandleIcon }, localization } } = table;
|
|
1143
|
-
return /* @__PURE__ */
|
|
1146
|
+
return /* @__PURE__ */ jsx(Tooltip, {
|
|
1144
1147
|
...getCommonTooltipProps("top"),
|
|
1145
1148
|
title: rest?.title ?? localization.move,
|
|
1146
|
-
children: /* @__PURE__ */
|
|
1149
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
1147
1150
|
"aria-label": rest.title ?? localization.move,
|
|
1148
1151
|
disableRipple: true,
|
|
1149
1152
|
draggable: "true",
|
|
@@ -1167,7 +1170,7 @@ const MRT_GrabHandleButton = ({ location, table, ...rest }) => {
|
|
|
1167
1170
|
...parseFromValuesOrFunc(rest?.sx, theme)
|
|
1168
1171
|
}),
|
|
1169
1172
|
title: void 0,
|
|
1170
|
-
children: /* @__PURE__ */
|
|
1173
|
+
children: /* @__PURE__ */ jsx(DragHandleIcon, {})
|
|
1171
1174
|
})
|
|
1172
1175
|
});
|
|
1173
1176
|
};
|
|
@@ -1196,7 +1199,7 @@ const MRT_TableBodyRowGrabHandle = ({ row, rowRef, table, ...rest }) => {
|
|
|
1196
1199
|
table.setDraggingRow(null);
|
|
1197
1200
|
table.setHoveredRow(null);
|
|
1198
1201
|
};
|
|
1199
|
-
return /* @__PURE__ */
|
|
1202
|
+
return /* @__PURE__ */ jsx(MRT_GrabHandleButton, {
|
|
1200
1203
|
...iconButtonProps,
|
|
1201
1204
|
location: "row",
|
|
1202
1205
|
onDragEnd: handleDragEnd,
|
|
@@ -1209,17 +1212,17 @@ const MRT_TableBodyRowGrabHandle = ({ row, rowRef, table, ...rest }) => {
|
|
|
1209
1212
|
const MRT_RowPinButton = ({ pinningPosition, row, table, ...rest }) => {
|
|
1210
1213
|
const { options: { icons: { CloseIcon, PushPinIcon }, localization, rowPinningDisplayMode } } = table;
|
|
1211
1214
|
const isPinned = row.getIsPinned();
|
|
1212
|
-
const [tooltipOpened, setTooltipOpened] =
|
|
1215
|
+
const [tooltipOpened, setTooltipOpened] = useState(false);
|
|
1213
1216
|
const handleTogglePin = (event) => {
|
|
1214
1217
|
setTooltipOpened(false);
|
|
1215
1218
|
event.stopPropagation();
|
|
1216
1219
|
row.pin(isPinned ? false : pinningPosition);
|
|
1217
1220
|
};
|
|
1218
|
-
return /* @__PURE__ */
|
|
1221
|
+
return /* @__PURE__ */ jsx(Tooltip, {
|
|
1219
1222
|
...getCommonTooltipProps(),
|
|
1220
1223
|
open: tooltipOpened,
|
|
1221
1224
|
title: isPinned ? localization.unpin : localization.pin,
|
|
1222
|
-
children: /* @__PURE__ */
|
|
1225
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
1223
1226
|
"aria-label": localization.pin,
|
|
1224
1227
|
onBlur: () => setTooltipOpened(false),
|
|
1225
1228
|
onClick: handleTogglePin,
|
|
@@ -1233,7 +1236,7 @@ const MRT_RowPinButton = ({ pinningPosition, row, table, ...rest }) => {
|
|
|
1233
1236
|
width: "24px",
|
|
1234
1237
|
...parseFromValuesOrFunc(rest?.sx, theme)
|
|
1235
1238
|
}),
|
|
1236
|
-
children: isPinned ? /* @__PURE__ */
|
|
1239
|
+
children: isPinned ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(PushPinIcon, {
|
|
1237
1240
|
fontSize: "small",
|
|
1238
1241
|
style: { transform: `rotate(${rowPinningDisplayMode === "sticky" ? 135 : pinningPosition === "top" ? 180 : 0}deg)` }
|
|
1239
1242
|
})
|
|
@@ -1243,28 +1246,28 @@ const MRT_RowPinButton = ({ pinningPosition, row, table, ...rest }) => {
|
|
|
1243
1246
|
//#endregion
|
|
1244
1247
|
//#region src/components/body/MRT_TableBodyRowPinButton.tsx
|
|
1245
1248
|
const MRT_TableBodyRowPinButton = ({ row, table, ...rest }) => {
|
|
1246
|
-
const {
|
|
1247
|
-
const { density } =
|
|
1249
|
+
const { options: { enableRowPinning, rowPinningDisplayMode } } = table;
|
|
1250
|
+
const { density } = table.state;
|
|
1248
1251
|
if (!parseFromValuesOrFunc(enableRowPinning, row)) return null;
|
|
1249
1252
|
const rowPinButtonProps = {
|
|
1250
1253
|
row,
|
|
1251
1254
|
table,
|
|
1252
1255
|
...rest
|
|
1253
1256
|
};
|
|
1254
|
-
if (rowPinningDisplayMode === "top-and-bottom" && !row.getIsPinned()) return /* @__PURE__ */
|
|
1257
|
+
if (rowPinningDisplayMode === "top-and-bottom" && !row.getIsPinned()) return /* @__PURE__ */ jsxs(Box, {
|
|
1255
1258
|
sx: {
|
|
1256
1259
|
display: "flex",
|
|
1257
1260
|
flexDirection: density === "compact" ? "row" : "column"
|
|
1258
1261
|
},
|
|
1259
|
-
children: [/* @__PURE__ */
|
|
1262
|
+
children: [/* @__PURE__ */ jsx(MRT_RowPinButton, {
|
|
1260
1263
|
pinningPosition: "top",
|
|
1261
1264
|
...rowPinButtonProps
|
|
1262
|
-
}), /* @__PURE__ */
|
|
1265
|
+
}), /* @__PURE__ */ jsx(MRT_RowPinButton, {
|
|
1263
1266
|
pinningPosition: "bottom",
|
|
1264
1267
|
...rowPinButtonProps
|
|
1265
1268
|
})]
|
|
1266
1269
|
});
|
|
1267
|
-
return /* @__PURE__ */
|
|
1270
|
+
return /* @__PURE__ */ jsx(MRT_RowPinButton, {
|
|
1268
1271
|
pinningPosition: rowPinningDisplayMode === "bottom" ? "bottom" : "top",
|
|
1269
1272
|
...rowPinButtonProps
|
|
1270
1273
|
});
|
|
@@ -1276,33 +1279,33 @@ const MRT_ColumnPinningButtons = ({ column, table, ...rest }) => {
|
|
|
1276
1279
|
const handlePinColumn = (pinDirection) => {
|
|
1277
1280
|
column.pin(pinDirection);
|
|
1278
1281
|
};
|
|
1279
|
-
return /* @__PURE__ */
|
|
1282
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
1280
1283
|
...rest,
|
|
1281
1284
|
sx: (theme) => ({
|
|
1282
1285
|
minWidth: "70px",
|
|
1283
1286
|
textAlign: "center",
|
|
1284
1287
|
...parseFromValuesOrFunc(rest?.sx, theme)
|
|
1285
1288
|
}),
|
|
1286
|
-
children: column.getIsPinned() ? /* @__PURE__ */
|
|
1289
|
+
children: column.getIsPinned() ? /* @__PURE__ */ jsx(Tooltip, {
|
|
1287
1290
|
title: localization.unpin,
|
|
1288
|
-
children: /* @__PURE__ */
|
|
1291
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
1289
1292
|
onClick: () => handlePinColumn(false),
|
|
1290
1293
|
size: "small",
|
|
1291
|
-
children: /* @__PURE__ */
|
|
1294
|
+
children: /* @__PURE__ */ jsx(PushPinIcon, {})
|
|
1292
1295
|
})
|
|
1293
|
-
}) : /* @__PURE__ */
|
|
1296
|
+
}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tooltip, {
|
|
1294
1297
|
title: localization.pinToLeft,
|
|
1295
|
-
children: /* @__PURE__ */
|
|
1296
|
-
onClick: () => handlePinColumn("
|
|
1298
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
1299
|
+
onClick: () => handlePinColumn("start"),
|
|
1297
1300
|
size: "small",
|
|
1298
|
-
children: /* @__PURE__ */
|
|
1301
|
+
children: /* @__PURE__ */ jsx(PushPinIcon, { style: { transform: "rotate(90deg)" } })
|
|
1299
1302
|
})
|
|
1300
|
-
}), /* @__PURE__ */
|
|
1303
|
+
}), /* @__PURE__ */ jsx(Tooltip, {
|
|
1301
1304
|
title: localization.pinToRight,
|
|
1302
|
-
children: /* @__PURE__ */
|
|
1303
|
-
onClick: () => handlePinColumn("
|
|
1305
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
1306
|
+
onClick: () => handlePinColumn("end"),
|
|
1304
1307
|
size: "small",
|
|
1305
|
-
children: /* @__PURE__ */
|
|
1308
|
+
children: /* @__PURE__ */ jsx(PushPinIcon, { style: { transform: "rotate(-90deg)" } })
|
|
1306
1309
|
})
|
|
1307
1310
|
})] })
|
|
1308
1311
|
});
|
|
@@ -1310,8 +1313,8 @@ const MRT_ColumnPinningButtons = ({ column, table, ...rest }) => {
|
|
|
1310
1313
|
//#endregion
|
|
1311
1314
|
//#region src/components/buttons/MRT_EditActionButtons.tsx
|
|
1312
1315
|
const MRT_EditActionButtons = ({ row, table, variant = "icon", ...rest }) => {
|
|
1313
|
-
const {
|
|
1314
|
-
const { creatingRow, editingRow, isSaving } =
|
|
1316
|
+
const { options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowCancel, onEditingRowSave }, refs: { editInputRefs }, setCreatingRow, setEditingRow } = table;
|
|
1317
|
+
const { creatingRow, editingRow, isSaving } = table.state;
|
|
1315
1318
|
const isCreating = creatingRow?.id === row.id;
|
|
1316
1319
|
const isEditing = editingRow?.id === row.id;
|
|
1317
1320
|
const handleCancel = () => {
|
|
@@ -1347,39 +1350,39 @@ const MRT_EditActionButtons = ({ row, table, variant = "icon", ...rest }) => {
|
|
|
1347
1350
|
values: row?._valuesCache
|
|
1348
1351
|
});
|
|
1349
1352
|
};
|
|
1350
|
-
return /* @__PURE__ */
|
|
1353
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
1351
1354
|
onClick: (e) => e.stopPropagation(),
|
|
1352
1355
|
sx: (theme) => ({
|
|
1353
1356
|
display: "flex",
|
|
1354
1357
|
gap: "0.75rem",
|
|
1355
1358
|
...parseFromValuesOrFunc(rest?.sx, theme)
|
|
1356
1359
|
}),
|
|
1357
|
-
children: variant === "icon" ? /* @__PURE__ */
|
|
1360
|
+
children: variant === "icon" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tooltip, {
|
|
1358
1361
|
title: localization.cancel,
|
|
1359
|
-
children: /* @__PURE__ */
|
|
1362
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
1360
1363
|
"aria-label": localization.cancel,
|
|
1361
1364
|
onClick: handleCancel,
|
|
1362
|
-
children: /* @__PURE__ */
|
|
1365
|
+
children: /* @__PURE__ */ jsx(CancelIcon, {})
|
|
1363
1366
|
})
|
|
1364
|
-
}), (isCreating && onCreatingRowSave || isEditing && onEditingRowSave) && /* @__PURE__ */
|
|
1367
|
+
}), (isCreating && onCreatingRowSave || isEditing && onEditingRowSave) && /* @__PURE__ */ jsx(Tooltip, {
|
|
1365
1368
|
title: localization.save,
|
|
1366
|
-
children: /* @__PURE__ */
|
|
1369
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
1367
1370
|
"aria-label": localization.save,
|
|
1368
1371
|
color: "info",
|
|
1369
1372
|
disabled: isSaving,
|
|
1370
1373
|
onClick: handleSubmitRow,
|
|
1371
|
-
children: isSaving ? /* @__PURE__ */
|
|
1374
|
+
children: isSaving ? /* @__PURE__ */ jsx(CircularProgress, { size: 18 }) : /* @__PURE__ */ jsx(SaveIcon, {})
|
|
1372
1375
|
})
|
|
1373
|
-
})] }) : /* @__PURE__ */
|
|
1376
|
+
})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
|
|
1374
1377
|
onClick: handleCancel,
|
|
1375
1378
|
sx: { minWidth: "100px" },
|
|
1376
1379
|
children: localization.cancel
|
|
1377
|
-
}), /* @__PURE__ */
|
|
1380
|
+
}), /* @__PURE__ */ jsxs(Button, {
|
|
1378
1381
|
disabled: isSaving,
|
|
1379
1382
|
onClick: handleSubmitRow,
|
|
1380
1383
|
sx: { minWidth: "100px" },
|
|
1381
1384
|
variant: "contained",
|
|
1382
|
-
children: [isSaving && /* @__PURE__ */
|
|
1385
|
+
children: [isSaving && /* @__PURE__ */ jsx(CircularProgress, {
|
|
1383
1386
|
color: "inherit",
|
|
1384
1387
|
size: 18
|
|
1385
1388
|
}), localization.save]
|
|
@@ -1389,17 +1392,17 @@ const MRT_EditActionButtons = ({ row, table, variant = "icon", ...rest }) => {
|
|
|
1389
1392
|
//#endregion
|
|
1390
1393
|
//#region src/components/buttons/MRT_ExpandAllButton.tsx
|
|
1391
1394
|
const MRT_ExpandAllButton = ({ table, ...rest }) => {
|
|
1392
|
-
const { getCanSomeRowsExpand, getIsAllRowsExpanded, getIsSomeRowsExpanded,
|
|
1393
|
-
const { density, isLoading } =
|
|
1395
|
+
const { getCanSomeRowsExpand, getIsAllRowsExpanded, getIsSomeRowsExpanded, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel }, toggleAllRowsExpanded } = table;
|
|
1396
|
+
const { density, isLoading } = table.state;
|
|
1394
1397
|
const iconButtonProps = {
|
|
1395
1398
|
...parseFromValuesOrFunc(muiExpandAllButtonProps, { table }),
|
|
1396
1399
|
...rest
|
|
1397
1400
|
};
|
|
1398
1401
|
const isAllRowsExpanded = getIsAllRowsExpanded();
|
|
1399
|
-
return /* @__PURE__ */
|
|
1402
|
+
return /* @__PURE__ */ jsx(Tooltip, {
|
|
1400
1403
|
...getCommonTooltipProps(),
|
|
1401
1404
|
title: iconButtonProps?.title ?? (isAllRowsExpanded ? localization.collapseAll : localization.expandAll),
|
|
1402
|
-
children: /* @__PURE__ */
|
|
1405
|
+
children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, {
|
|
1403
1406
|
"aria-label": localization.expandAll,
|
|
1404
1407
|
disabled: isLoading || !renderDetailPanel && !getCanSomeRowsExpand(),
|
|
1405
1408
|
onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded),
|
|
@@ -1411,7 +1414,7 @@ const MRT_ExpandAllButton = ({ table, ...rest }) => {
|
|
|
1411
1414
|
...parseFromValuesOrFunc(iconButtonProps?.sx, theme)
|
|
1412
1415
|
}),
|
|
1413
1416
|
title: void 0,
|
|
1414
|
-
children: iconButtonProps?.children ?? /* @__PURE__ */
|
|
1417
|
+
children: iconButtonProps?.children ?? /* @__PURE__ */ jsx(KeyboardDoubleArrowDownIcon, { style: {
|
|
1415
1418
|
transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
|
|
1416
1419
|
transition: "transform 150ms"
|
|
1417
1420
|
} })
|
|
@@ -1421,9 +1424,9 @@ const MRT_ExpandAllButton = ({ table, ...rest }) => {
|
|
|
1421
1424
|
//#endregion
|
|
1422
1425
|
//#region src/components/buttons/MRT_ExpandButton.tsx
|
|
1423
1426
|
const MRT_ExpandButton = ({ row, staticRowIndex, table }) => {
|
|
1424
|
-
const theme =
|
|
1425
|
-
const {
|
|
1426
|
-
const { density } =
|
|
1427
|
+
const theme = useTheme();
|
|
1428
|
+
const { options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, positionExpandColumn, renderDetailPanel } } = table;
|
|
1429
|
+
const { density } = table.state;
|
|
1427
1430
|
const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
|
|
1428
1431
|
row,
|
|
1429
1432
|
staticRowIndex,
|
|
@@ -1440,11 +1443,11 @@ const MRT_ExpandButton = ({ row, staticRowIndex, table }) => {
|
|
|
1440
1443
|
row,
|
|
1441
1444
|
table
|
|
1442
1445
|
});
|
|
1443
|
-
return /* @__PURE__ */
|
|
1446
|
+
return /* @__PURE__ */ jsx(Tooltip, {
|
|
1444
1447
|
disableHoverListener: !canExpand && !detailPanel,
|
|
1445
1448
|
...getCommonTooltipProps(),
|
|
1446
1449
|
title: iconButtonProps?.title ?? (isExpanded ? localization.collapse : localization.expand),
|
|
1447
|
-
children: /* @__PURE__ */
|
|
1450
|
+
children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, {
|
|
1448
1451
|
"aria-label": localization.expand,
|
|
1449
1452
|
disabled: !canExpand && !detailPanel,
|
|
1450
1453
|
...iconButtonProps,
|
|
@@ -1457,7 +1460,7 @@ const MRT_ExpandButton = ({ row, staticRowIndex, table }) => {
|
|
|
1457
1460
|
...parseFromValuesOrFunc(iconButtonProps?.sx, theme)
|
|
1458
1461
|
}),
|
|
1459
1462
|
title: void 0,
|
|
1460
|
-
children: iconButtonProps?.children ?? /* @__PURE__ */
|
|
1463
|
+
children: iconButtonProps?.children ?? /* @__PURE__ */ jsx(ExpandMoreIcon, { style: {
|
|
1461
1464
|
transform: `rotate(${!canExpand && !renderDetailPanel ? positionExpandColumn === "last" || theme.direction === "rtl" ? 90 : -90 : isExpanded ? -180 : 0}deg)`,
|
|
1462
1465
|
transition: "transform 150ms"
|
|
1463
1466
|
} })
|
|
@@ -1466,12 +1469,14 @@ const MRT_ExpandButton = ({ row, staticRowIndex, table }) => {
|
|
|
1466
1469
|
};
|
|
1467
1470
|
//#endregion
|
|
1468
1471
|
//#region src/utils/column.utils.ts
|
|
1469
|
-
const
|
|
1472
|
+
const getSubColumnDefs = (columnDef) => "columns" in columnDef ? columnDef.columns : void 0;
|
|
1473
|
+
const getColumnId = (columnDef) => columnDef.id ?? ("accessorKey" in columnDef ? columnDef.accessorKey?.toString?.() : void 0) ?? columnDef.header;
|
|
1470
1474
|
const getAllLeafColumnDefs = (columns) => {
|
|
1471
1475
|
const allLeafColumnDefs = [];
|
|
1472
1476
|
const getLeafColumns = (cols) => {
|
|
1473
1477
|
cols.forEach((col) => {
|
|
1474
|
-
|
|
1478
|
+
const subColumnDefs = getSubColumnDefs(col);
|
|
1479
|
+
if (subColumnDefs) getLeafColumns(subColumnDefs);
|
|
1475
1480
|
else allLeafColumnDefs.push(col);
|
|
1476
1481
|
});
|
|
1477
1482
|
};
|
|
@@ -1479,26 +1484,27 @@ const getAllLeafColumnDefs = (columns) => {
|
|
|
1479
1484
|
return allLeafColumnDefs;
|
|
1480
1485
|
};
|
|
1481
1486
|
const prepareColumns = ({ columnDefs, tableOptions }) => {
|
|
1482
|
-
const { aggregationFns = {}, defaultDisplayColumn, filterFns = {},
|
|
1487
|
+
const { aggregationFns = {}, defaultDisplayColumn, filterFns = {}, sortFns = {}, state: { columnFilterFns = {} } = {} } = tableOptions;
|
|
1483
1488
|
return columnDefs.map((columnDef) => {
|
|
1484
1489
|
if (!columnDef.id) columnDef.id = getColumnId(columnDef);
|
|
1485
1490
|
if (!columnDef.columnDefType) columnDef.columnDefType = "data";
|
|
1486
|
-
|
|
1491
|
+
const subColumnDefs = getSubColumnDefs(columnDef);
|
|
1492
|
+
if (subColumnDefs?.length && "columns" in columnDef) {
|
|
1487
1493
|
columnDef.columnDefType = "group";
|
|
1488
1494
|
columnDef.columns = prepareColumns({
|
|
1489
|
-
columnDefs:
|
|
1495
|
+
columnDefs: [...subColumnDefs],
|
|
1490
1496
|
tableOptions
|
|
1491
1497
|
});
|
|
1492
1498
|
} else if (columnDef.columnDefType === "data") {
|
|
1493
1499
|
if (Array.isArray(columnDef.aggregationFn)) {
|
|
1494
1500
|
const aggFns = columnDef.aggregationFn;
|
|
1495
|
-
columnDef.aggregationFn =
|
|
1501
|
+
columnDef.aggregationFn = { aggregate: (context) => aggFns.map((fn) => aggregationFns[fn]?.aggregate(context)) };
|
|
1496
1502
|
}
|
|
1497
1503
|
if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
|
|
1498
1504
|
columnDef.filterFn = filterFns[columnFilterFns[columnDef.id]] ?? filterFns.fuzzy;
|
|
1499
1505
|
columnDef._filterFn = columnFilterFns[columnDef.id];
|
|
1500
1506
|
}
|
|
1501
|
-
if (Object.keys(
|
|
1507
|
+
if (Object.keys(sortFns).includes(columnDef.sortFn)) columnDef.sortFn = sortFns[columnDef.sortFn];
|
|
1502
1508
|
} else if (columnDef.columnDefType === "display") columnDef = {
|
|
1503
1509
|
...defaultDisplayColumn,
|
|
1504
1510
|
...columnDef
|
|
@@ -1526,15 +1532,15 @@ const getColumnFilterInfo = ({ header, table }) => {
|
|
|
1526
1532
|
const { filterVariant } = columnDef;
|
|
1527
1533
|
const isDateFilter = !!(filterVariant?.startsWith("date") || filterVariant?.startsWith("time"));
|
|
1528
1534
|
const isAutocompleteFilter = filterVariant === "autocomplete";
|
|
1535
|
+
const currentFilterOption = columnDef._filterFn ?? getDefaultColumnFilterFn(columnDef);
|
|
1529
1536
|
const isRangeFilter = filterVariant?.includes("range") || [
|
|
1530
1537
|
"between",
|
|
1531
1538
|
"betweenInclusive",
|
|
1532
1539
|
"inNumberRange"
|
|
1533
|
-
].includes(
|
|
1540
|
+
].includes(currentFilterOption);
|
|
1534
1541
|
const isSelectFilter = filterVariant === "select";
|
|
1535
1542
|
const isMultiSelectFilter = filterVariant === "multi-select";
|
|
1536
1543
|
const isTextboxFilter = ["autocomplete", "text"].includes(filterVariant) || !isSelectFilter && !isMultiSelectFilter;
|
|
1537
|
-
const currentFilterOption = columnDef._filterFn;
|
|
1538
1544
|
return {
|
|
1539
1545
|
allowedColumnFilterOptions: columnDef?.columnFilterModeOptions ?? columnFilterModeOptions,
|
|
1540
1546
|
currentFilterOption,
|
|
@@ -1554,7 +1560,7 @@ const useDropdownOptions = ({ header, table }) => {
|
|
|
1554
1560
|
header,
|
|
1555
1561
|
table
|
|
1556
1562
|
});
|
|
1557
|
-
return
|
|
1563
|
+
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), [
|
|
1558
1564
|
columnDef.filterSelectOptions,
|
|
1559
1565
|
facetedUniqueValues,
|
|
1560
1566
|
isMultiSelectFilter,
|
|
@@ -1621,8 +1627,8 @@ const getDefaultColumnOrderIds = (tableOptions, reset = false) => {
|
|
|
1621
1627
|
//#endregion
|
|
1622
1628
|
//#region src/components/menus/MRT_ShowHideColumnsMenuItems.tsx
|
|
1623
1629
|
const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, isNestedColumns, setHoveredColumn, table, ...rest }) => {
|
|
1624
|
-
const {
|
|
1625
|
-
const { columnOrder } =
|
|
1630
|
+
const { options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor } }, setColumnOrder, setColumnPinning } = table;
|
|
1631
|
+
const { columnOrder } = table.state;
|
|
1626
1632
|
const { columnDef } = column;
|
|
1627
1633
|
const { columnDefType } = columnDef;
|
|
1628
1634
|
const switchChecked = column.getIsVisible();
|
|
@@ -1632,8 +1638,8 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, isNes
|
|
|
1632
1638
|
});
|
|
1633
1639
|
else column.toggleVisibility();
|
|
1634
1640
|
};
|
|
1635
|
-
const menuItemRef =
|
|
1636
|
-
const [isDragging, setIsDragging] =
|
|
1641
|
+
const menuItemRef = useRef(null);
|
|
1642
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
1637
1643
|
const handleDragStart = (e) => {
|
|
1638
1644
|
setIsDragging(true);
|
|
1639
1645
|
try {
|
|
@@ -1648,9 +1654,9 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, isNes
|
|
|
1648
1654
|
if (hoveredColumn) {
|
|
1649
1655
|
const reorderedColumns = reorderColumn(column, hoveredColumn, columnOrder);
|
|
1650
1656
|
setColumnOrder(reorderedColumns);
|
|
1651
|
-
setColumnPinning(({
|
|
1652
|
-
|
|
1653
|
-
|
|
1657
|
+
setColumnPinning(({ end = [], start = [] }) => ({
|
|
1658
|
+
end: reorderedColumns.filter((header) => end.includes(header)),
|
|
1659
|
+
start: reorderedColumns.filter((header) => start.includes(header))
|
|
1654
1660
|
}));
|
|
1655
1661
|
}
|
|
1656
1662
|
};
|
|
@@ -1658,7 +1664,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, isNes
|
|
|
1658
1664
|
if (!isDragging && columnDef.enableColumnOrdering !== false) setHoveredColumn(column);
|
|
1659
1665
|
};
|
|
1660
1666
|
if (!columnDef.header || columnDef.visibleInShowHideMenu === false) return null;
|
|
1661
|
-
return /* @__PURE__ */
|
|
1667
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuItem, {
|
|
1662
1668
|
disableRipple: true,
|
|
1663
1669
|
onDragEnter: handleDragEnter,
|
|
1664
1670
|
ref: menuItemRef,
|
|
@@ -1674,28 +1680,28 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, isNes
|
|
|
1674
1680
|
py: "6px",
|
|
1675
1681
|
...parseFromValuesOrFunc(rest?.sx, theme)
|
|
1676
1682
|
}),
|
|
1677
|
-
children: /* @__PURE__ */
|
|
1683
|
+
children: /* @__PURE__ */ jsxs(Box, {
|
|
1678
1684
|
sx: {
|
|
1679
1685
|
display: "flex",
|
|
1680
1686
|
flexWrap: "nowrap",
|
|
1681
1687
|
gap: "8px"
|
|
1682
1688
|
},
|
|
1683
1689
|
children: [
|
|
1684
|
-
columnDefType !== "group" && enableColumnOrdering && !isNestedColumns && (columnDef.enableColumnOrdering !== false ? /* @__PURE__ */
|
|
1690
|
+
columnDefType !== "group" && enableColumnOrdering && !isNestedColumns && (columnDef.enableColumnOrdering !== false ? /* @__PURE__ */ jsx(MRT_GrabHandleButton, {
|
|
1685
1691
|
onDragEnd: handleDragEnd,
|
|
1686
1692
|
onDragStart: handleDragStart,
|
|
1687
1693
|
table
|
|
1688
|
-
}) : /* @__PURE__ */
|
|
1689
|
-
enableColumnPinning && (column.getCanPin() ? /* @__PURE__ */
|
|
1694
|
+
}) : /* @__PURE__ */ jsx(Box, { sx: { width: "28px" } })),
|
|
1695
|
+
enableColumnPinning && (column.getCanPin() ? /* @__PURE__ */ jsx(MRT_ColumnPinningButtons, {
|
|
1690
1696
|
column,
|
|
1691
1697
|
table
|
|
1692
|
-
}) : /* @__PURE__ */
|
|
1693
|
-
enableHiding ? /* @__PURE__ */
|
|
1698
|
+
}) : /* @__PURE__ */ jsx(Box, { sx: { width: "70px" } })),
|
|
1699
|
+
enableHiding ? /* @__PURE__ */ jsx(FormControlLabel, {
|
|
1694
1700
|
checked: switchChecked,
|
|
1695
|
-
control: /* @__PURE__ */
|
|
1701
|
+
control: /* @__PURE__ */ jsx(Tooltip, {
|
|
1696
1702
|
...getCommonTooltipProps(),
|
|
1697
1703
|
title: localization.toggleVisibility,
|
|
1698
|
-
children: /* @__PURE__ */
|
|
1704
|
+
children: /* @__PURE__ */ jsx(Switch, {})
|
|
1699
1705
|
}),
|
|
1700
1706
|
disabled: !column.getCanHide(),
|
|
1701
1707
|
label: columnDef.header,
|
|
@@ -1704,13 +1710,13 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, isNes
|
|
|
1704
1710
|
mb: 0,
|
|
1705
1711
|
opacity: columnDefType !== "display" ? 1 : .5
|
|
1706
1712
|
} } }
|
|
1707
|
-
}) : /* @__PURE__ */
|
|
1713
|
+
}) : /* @__PURE__ */ jsx(Typography, {
|
|
1708
1714
|
sx: { alignSelf: "center" },
|
|
1709
1715
|
children: columnDef.header
|
|
1710
1716
|
})
|
|
1711
1717
|
]
|
|
1712
1718
|
})
|
|
1713
|
-
}), column.columns?.map((c, i) => /* @__PURE__ */
|
|
1719
|
+
}), column.columns?.map((c, i) => /* @__PURE__ */ jsx(MRT_ShowHideColumnsMenuItems, {
|
|
1714
1720
|
allColumns,
|
|
1715
1721
|
column: c,
|
|
1716
1722
|
hoveredColumn,
|
|
@@ -1722,8 +1728,8 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, isNes
|
|
|
1722
1728
|
//#endregion
|
|
1723
1729
|
//#region src/components/menus/MRT_ShowHideColumnsMenu.tsx
|
|
1724
1730
|
const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, ...rest }) => {
|
|
1725
|
-
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns,
|
|
1726
|
-
const { columnOrder, columnPinning, density } =
|
|
1731
|
+
const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, initialState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { menuBackgroundColor } } } = table;
|
|
1732
|
+
const { columnOrder, columnPinning, density } = table.state;
|
|
1727
1733
|
const handleToggleAllColumns = (value) => {
|
|
1728
1734
|
const updates = getAllLeafColumns().filter((column) => column.columnDef.enableHiding !== false).reduce((acc, column) => {
|
|
1729
1735
|
acc[column.id] = value ?? !column.getIsVisible();
|
|
@@ -1734,7 +1740,7 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, ...rest }) => {
|
|
|
1734
1740
|
...updates
|
|
1735
1741
|
}));
|
|
1736
1742
|
};
|
|
1737
|
-
const allColumns =
|
|
1743
|
+
const allColumns = useMemo(() => {
|
|
1738
1744
|
const columns = getAllColumns();
|
|
1739
1745
|
if (columnOrder.length > 0 && !columns.some((col) => col.columnDef.columnDefType === "group")) return [
|
|
1740
1746
|
...getLeftLeafColumns(),
|
|
@@ -1751,9 +1757,9 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, ...rest }) => {
|
|
|
1751
1757
|
getRightLeafColumns()
|
|
1752
1758
|
]);
|
|
1753
1759
|
const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === "group");
|
|
1754
|
-
const hasColumnOrderChanged =
|
|
1755
|
-
const [hoveredColumn, setHoveredColumn] =
|
|
1756
|
-
return /* @__PURE__ */
|
|
1760
|
+
const hasColumnOrderChanged = useMemo(() => columnOrder.length !== initialState.columnOrder.length || !columnOrder.every((column, index) => column === initialState.columnOrder[index]), [columnOrder, initialState.columnOrder]);
|
|
1761
|
+
const [hoveredColumn, setHoveredColumn] = useState(null);
|
|
1762
|
+
return /* @__PURE__ */ jsxs(Menu, {
|
|
1757
1763
|
anchorEl,
|
|
1758
1764
|
disableScrollLock: true,
|
|
1759
1765
|
onClose: () => setAnchorEl(null),
|
|
@@ -1764,7 +1770,7 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, ...rest }) => {
|
|
|
1764
1770
|
} },
|
|
1765
1771
|
...rest,
|
|
1766
1772
|
children: [
|
|
1767
|
-
/* @__PURE__ */
|
|
1773
|
+
/* @__PURE__ */ jsxs(Box, {
|
|
1768
1774
|
sx: {
|
|
1769
1775
|
display: "flex",
|
|
1770
1776
|
justifyContent: "space-between",
|
|
@@ -1772,30 +1778,30 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, ...rest }) => {
|
|
|
1772
1778
|
pt: 0
|
|
1773
1779
|
},
|
|
1774
1780
|
children: [
|
|
1775
|
-
enableHiding && /* @__PURE__ */
|
|
1781
|
+
enableHiding && /* @__PURE__ */ jsx(Button, {
|
|
1776
1782
|
disabled: !getIsSomeColumnsVisible(),
|
|
1777
1783
|
onClick: () => handleToggleAllColumns(false),
|
|
1778
1784
|
children: localization.hideAll
|
|
1779
1785
|
}),
|
|
1780
|
-
enableColumnOrdering && /* @__PURE__ */
|
|
1786
|
+
enableColumnOrdering && /* @__PURE__ */ jsx(Button, {
|
|
1781
1787
|
disabled: !hasColumnOrderChanged,
|
|
1782
1788
|
onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)),
|
|
1783
1789
|
children: localization.resetOrder
|
|
1784
1790
|
}),
|
|
1785
|
-
enableColumnPinning && /* @__PURE__ */
|
|
1791
|
+
enableColumnPinning && /* @__PURE__ */ jsx(Button, {
|
|
1786
1792
|
disabled: !getIsSomeColumnsPinned(),
|
|
1787
1793
|
onClick: () => table.resetColumnPinning(true),
|
|
1788
1794
|
children: localization.unpinAll
|
|
1789
1795
|
}),
|
|
1790
|
-
enableHiding && /* @__PURE__ */
|
|
1796
|
+
enableHiding && /* @__PURE__ */ jsx(Button, {
|
|
1791
1797
|
disabled: getIsAllColumnsVisible(),
|
|
1792
1798
|
onClick: () => handleToggleAllColumns(true),
|
|
1793
1799
|
children: localization.showAll
|
|
1794
1800
|
})
|
|
1795
1801
|
]
|
|
1796
1802
|
}),
|
|
1797
|
-
/* @__PURE__ */
|
|
1798
|
-
allColumns.map((column, index) => /* @__PURE__ */
|
|
1803
|
+
/* @__PURE__ */ jsx(Divider, {}),
|
|
1804
|
+
allColumns.map((column, index) => /* @__PURE__ */ jsx(MRT_ShowHideColumnsMenuItems, {
|
|
1799
1805
|
allColumns,
|
|
1800
1806
|
column,
|
|
1801
1807
|
hoveredColumn,
|
|
@@ -1810,20 +1816,20 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, ...rest }) => {
|
|
|
1810
1816
|
//#region src/components/buttons/MRT_ShowHideColumnsButton.tsx
|
|
1811
1817
|
const MRT_ShowHideColumnsButton = ({ table, ...rest }) => {
|
|
1812
1818
|
const { options: { icons: { ViewColumnIcon }, localization } } = table;
|
|
1813
|
-
const [anchorEl, setAnchorEl] =
|
|
1819
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
1814
1820
|
const handleClick = (event) => {
|
|
1815
1821
|
setAnchorEl(event.currentTarget);
|
|
1816
1822
|
};
|
|
1817
|
-
return /* @__PURE__ */
|
|
1823
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tooltip, {
|
|
1818
1824
|
title: rest?.title ?? localization.showHideColumns,
|
|
1819
|
-
children: /* @__PURE__ */
|
|
1825
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
1820
1826
|
"aria-label": localization.showHideColumns,
|
|
1821
1827
|
onClick: handleClick,
|
|
1822
1828
|
...rest,
|
|
1823
1829
|
title: void 0,
|
|
1824
|
-
children: /* @__PURE__ */
|
|
1830
|
+
children: /* @__PURE__ */ jsx(ViewColumnIcon, {})
|
|
1825
1831
|
})
|
|
1826
|
-
}), anchorEl && /* @__PURE__ */
|
|
1832
|
+
}), anchorEl && /* @__PURE__ */ jsx(MRT_ShowHideColumnsMenu, {
|
|
1827
1833
|
anchorEl,
|
|
1828
1834
|
setAnchorEl,
|
|
1829
1835
|
table
|
|
@@ -1832,55 +1838,55 @@ const MRT_ShowHideColumnsButton = ({ table, ...rest }) => {
|
|
|
1832
1838
|
//#endregion
|
|
1833
1839
|
//#region src/components/buttons/MRT_ToggleDensePaddingButton.tsx
|
|
1834
1840
|
const MRT_ToggleDensePaddingButton = ({ table, ...rest }) => {
|
|
1835
|
-
const {
|
|
1836
|
-
const { density } =
|
|
1841
|
+
const { options: { icons: { DensityLargeIcon, DensityMediumIcon, DensitySmallIcon }, localization }, setDensity } = table;
|
|
1842
|
+
const { density } = table.state;
|
|
1837
1843
|
const handleToggleDensePadding = () => {
|
|
1838
1844
|
setDensity(density === "comfortable" ? "compact" : density === "compact" ? "spacious" : "comfortable");
|
|
1839
1845
|
};
|
|
1840
|
-
return /* @__PURE__ */
|
|
1846
|
+
return /* @__PURE__ */ jsx(Tooltip, {
|
|
1841
1847
|
title: rest?.title ?? localization.toggleDensity,
|
|
1842
|
-
children: /* @__PURE__ */
|
|
1848
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
1843
1849
|
"aria-label": localization.toggleDensity,
|
|
1844
1850
|
onClick: handleToggleDensePadding,
|
|
1845
1851
|
...rest,
|
|
1846
1852
|
title: void 0,
|
|
1847
|
-
children: density === "compact" ? /* @__PURE__ */
|
|
1853
|
+
children: density === "compact" ? /* @__PURE__ */ jsx(DensitySmallIcon, {}) : density === "comfortable" ? /* @__PURE__ */ jsx(DensityMediumIcon, {}) : /* @__PURE__ */ jsx(DensityLargeIcon, {})
|
|
1848
1854
|
})
|
|
1849
1855
|
});
|
|
1850
1856
|
};
|
|
1851
1857
|
//#endregion
|
|
1852
1858
|
//#region src/components/buttons/MRT_ToggleFiltersButton.tsx
|
|
1853
1859
|
const MRT_ToggleFiltersButton = ({ table, ...rest }) => {
|
|
1854
|
-
const {
|
|
1855
|
-
const { showColumnFilters } =
|
|
1860
|
+
const { options: { icons: { FilterListIcon, FilterListOffIcon }, localization }, setShowColumnFilters } = table;
|
|
1861
|
+
const { showColumnFilters } = table.state;
|
|
1856
1862
|
const handleToggleShowFilters = () => {
|
|
1857
1863
|
setShowColumnFilters(!showColumnFilters);
|
|
1858
1864
|
};
|
|
1859
|
-
return /* @__PURE__ */
|
|
1865
|
+
return /* @__PURE__ */ jsx(Tooltip, {
|
|
1860
1866
|
title: rest?.title ?? localization.showHideFilters,
|
|
1861
|
-
children: /* @__PURE__ */
|
|
1867
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
1862
1868
|
"aria-label": localization.showHideFilters,
|
|
1863
1869
|
onClick: handleToggleShowFilters,
|
|
1864
1870
|
...rest,
|
|
1865
1871
|
title: void 0,
|
|
1866
|
-
children: showColumnFilters ? /* @__PURE__ */
|
|
1872
|
+
children: showColumnFilters ? /* @__PURE__ */ jsx(FilterListOffIcon, {}) : /* @__PURE__ */ jsx(FilterListIcon, {})
|
|
1867
1873
|
})
|
|
1868
1874
|
});
|
|
1869
1875
|
};
|
|
1870
1876
|
//#endregion
|
|
1871
1877
|
//#region src/components/buttons/MRT_ToggleFullScreenButton.tsx
|
|
1872
1878
|
const MRT_ToggleFullScreenButton = ({ table, ...rest }) => {
|
|
1873
|
-
const {
|
|
1874
|
-
const { isFullScreen } =
|
|
1875
|
-
const [tooltipOpened, setTooltipOpened] =
|
|
1879
|
+
const { options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization }, setIsFullScreen } = table;
|
|
1880
|
+
const { isFullScreen } = table.state;
|
|
1881
|
+
const [tooltipOpened, setTooltipOpened] = useState(false);
|
|
1876
1882
|
const handleToggleFullScreen = () => {
|
|
1877
1883
|
setTooltipOpened(false);
|
|
1878
1884
|
setIsFullScreen(!isFullScreen);
|
|
1879
1885
|
};
|
|
1880
|
-
return /* @__PURE__ */
|
|
1886
|
+
return /* @__PURE__ */ jsx(Tooltip, {
|
|
1881
1887
|
open: tooltipOpened,
|
|
1882
1888
|
title: rest?.title ?? localization.toggleFullScreen,
|
|
1883
|
-
children: /* @__PURE__ */
|
|
1889
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
1884
1890
|
"aria-label": localization.toggleFullScreen,
|
|
1885
1891
|
onBlur: () => setTooltipOpened(false),
|
|
1886
1892
|
onClick: handleToggleFullScreen,
|
|
@@ -1889,28 +1895,28 @@ const MRT_ToggleFullScreenButton = ({ table, ...rest }) => {
|
|
|
1889
1895
|
onMouseLeave: () => setTooltipOpened(false),
|
|
1890
1896
|
...rest,
|
|
1891
1897
|
title: void 0,
|
|
1892
|
-
children: isFullScreen ? /* @__PURE__ */
|
|
1898
|
+
children: isFullScreen ? /* @__PURE__ */ jsx(FullscreenExitIcon, {}) : /* @__PURE__ */ jsx(FullscreenIcon, {})
|
|
1893
1899
|
})
|
|
1894
1900
|
});
|
|
1895
1901
|
};
|
|
1896
1902
|
//#endregion
|
|
1897
1903
|
//#region src/components/buttons/MRT_ToggleGlobalFilterButton.tsx
|
|
1898
1904
|
const MRT_ToggleGlobalFilterButton = ({ table, ...rest }) => {
|
|
1899
|
-
const {
|
|
1900
|
-
const { globalFilter, showGlobalFilter } =
|
|
1905
|
+
const { options: { icons: { SearchIcon, SearchOffIcon }, localization }, refs: { searchInputRef }, setShowGlobalFilter } = table;
|
|
1906
|
+
const { globalFilter, showGlobalFilter } = table.state;
|
|
1901
1907
|
const handleToggleSearch = () => {
|
|
1902
1908
|
setShowGlobalFilter(!showGlobalFilter);
|
|
1903
1909
|
queueMicrotask(() => searchInputRef.current?.focus());
|
|
1904
1910
|
};
|
|
1905
|
-
return /* @__PURE__ */
|
|
1911
|
+
return /* @__PURE__ */ jsx(Tooltip, {
|
|
1906
1912
|
title: rest?.title ?? localization.showHideSearch,
|
|
1907
|
-
children: /* @__PURE__ */
|
|
1913
|
+
children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, {
|
|
1908
1914
|
"aria-label": rest?.title ?? localization.showHideSearch,
|
|
1909
1915
|
disabled: !!globalFilter && showGlobalFilter,
|
|
1910
1916
|
onClick: handleToggleSearch,
|
|
1911
1917
|
...rest,
|
|
1912
1918
|
title: void 0,
|
|
1913
|
-
children: showGlobalFilter ? /* @__PURE__ */
|
|
1919
|
+
children: showGlobalFilter ? /* @__PURE__ */ jsx(SearchOffIcon, {}) : /* @__PURE__ */ jsx(SearchIcon, {})
|
|
1914
1920
|
}) })
|
|
1915
1921
|
});
|
|
1916
1922
|
};
|
|
@@ -1918,7 +1924,7 @@ const MRT_ToggleGlobalFilterButton = ({ table, ...rest }) => {
|
|
|
1918
1924
|
//#region src/components/menus/MRT_ActionMenuItem.tsx
|
|
1919
1925
|
const MRT_ActionMenuItem = ({ icon, label, onOpenSubMenu, table, ...rest }) => {
|
|
1920
1926
|
const { options: { icons: { ArrowRightIcon } } } = table;
|
|
1921
|
-
return /* @__PURE__ */
|
|
1927
|
+
return /* @__PURE__ */ jsxs(MenuItem, {
|
|
1922
1928
|
sx: {
|
|
1923
1929
|
alignItems: "center",
|
|
1924
1930
|
justifyContent: "space-between",
|
|
@@ -1928,30 +1934,30 @@ const MRT_ActionMenuItem = ({ icon, label, onOpenSubMenu, table, ...rest }) => {
|
|
|
1928
1934
|
},
|
|
1929
1935
|
tabIndex: 0,
|
|
1930
1936
|
...rest,
|
|
1931
|
-
children: [/* @__PURE__ */
|
|
1937
|
+
children: [/* @__PURE__ */ jsxs(Box, {
|
|
1932
1938
|
sx: {
|
|
1933
1939
|
alignItems: "center",
|
|
1934
1940
|
display: "flex"
|
|
1935
1941
|
},
|
|
1936
|
-
children: [/* @__PURE__ */
|
|
1937
|
-
}), onOpenSubMenu && /* @__PURE__ */
|
|
1942
|
+
children: [/* @__PURE__ */ jsx(ListItemIcon, { children: icon }), label]
|
|
1943
|
+
}), onOpenSubMenu && /* @__PURE__ */ jsx(IconButton, {
|
|
1938
1944
|
onClick: onOpenSubMenu,
|
|
1939
1945
|
onMouseEnter: onOpenSubMenu,
|
|
1940
1946
|
size: "small",
|
|
1941
1947
|
sx: { p: 0 },
|
|
1942
|
-
children: /* @__PURE__ */
|
|
1948
|
+
children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
|
|
1943
1949
|
})]
|
|
1944
1950
|
});
|
|
1945
1951
|
};
|
|
1946
1952
|
//#endregion
|
|
1947
1953
|
//#region src/components/menus/MRT_RowActionMenu.tsx
|
|
1948
1954
|
const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table, ...rest }) => {
|
|
1949
|
-
const {
|
|
1950
|
-
const { density } =
|
|
1951
|
-
const menuItems =
|
|
1955
|
+
const { options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderRowActionMenuItems } } = table;
|
|
1956
|
+
const { density } = table.state;
|
|
1957
|
+
const menuItems = useMemo(() => {
|
|
1952
1958
|
const items = [];
|
|
1953
|
-
const editItem = parseFromValuesOrFunc(enableEditing, row) && ["modal", "row"].includes(editDisplayMode) && /* @__PURE__ */
|
|
1954
|
-
icon: /* @__PURE__ */
|
|
1959
|
+
const editItem = parseFromValuesOrFunc(enableEditing, row) && ["modal", "row"].includes(editDisplayMode) && /* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
1960
|
+
icon: /* @__PURE__ */ jsx(EditIcon, {}),
|
|
1955
1961
|
label: localization.edit,
|
|
1956
1962
|
onClick: handleEdit,
|
|
1957
1963
|
table
|
|
@@ -1972,7 +1978,7 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, staticRowIn
|
|
|
1972
1978
|
table
|
|
1973
1979
|
]);
|
|
1974
1980
|
if (!menuItems.length) return null;
|
|
1975
|
-
return /* @__PURE__ */
|
|
1981
|
+
return /* @__PURE__ */ jsx(Menu, {
|
|
1976
1982
|
anchorEl,
|
|
1977
1983
|
disableScrollLock: true,
|
|
1978
1984
|
onClick: (event) => event.stopPropagation(),
|
|
@@ -1997,12 +2003,12 @@ const commonIconButtonStyles = {
|
|
|
1997
2003
|
width: "2rem"
|
|
1998
2004
|
};
|
|
1999
2005
|
const MRT_ToggleRowActionMenuButton = ({ cell, row, staticRowIndex, table, ...rest }) => {
|
|
2000
|
-
const {
|
|
2001
|
-
const { creatingRow, editingRow } =
|
|
2006
|
+
const { options: { createDisplayMode, editDisplayMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions }, setEditingRow } = table;
|
|
2007
|
+
const { creatingRow, editingRow } = table.state;
|
|
2002
2008
|
const isCreating = creatingRow?.id === row.id;
|
|
2003
2009
|
const isEditing = editingRow?.id === row.id;
|
|
2004
2010
|
const showEditActionButtons = isCreating && createDisplayMode === "row" || isEditing && editDisplayMode === "row";
|
|
2005
|
-
const [anchorEl, setAnchorEl] =
|
|
2011
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
2006
2012
|
const handleOpenRowActionMenu = (event) => {
|
|
2007
2013
|
event.stopPropagation();
|
|
2008
2014
|
event.preventDefault();
|
|
@@ -2010,43 +2016,43 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, staticRowIndex, table, ...re
|
|
|
2010
2016
|
};
|
|
2011
2017
|
const handleStartEditMode = (event) => {
|
|
2012
2018
|
event.stopPropagation();
|
|
2013
|
-
setEditingRow(
|
|
2019
|
+
setEditingRow(row);
|
|
2014
2020
|
setAnchorEl(null);
|
|
2015
2021
|
};
|
|
2016
|
-
return /* @__PURE__ */
|
|
2022
|
+
return /* @__PURE__ */ jsx(Fragment$1, { children: renderRowActions && !showEditActionButtons ? renderRowActions({
|
|
2017
2023
|
cell,
|
|
2018
2024
|
row,
|
|
2019
2025
|
staticRowIndex,
|
|
2020
2026
|
table
|
|
2021
|
-
}) : showEditActionButtons ? /* @__PURE__ */
|
|
2027
|
+
}) : showEditActionButtons ? /* @__PURE__ */ jsx(MRT_EditActionButtons, {
|
|
2022
2028
|
row,
|
|
2023
2029
|
table
|
|
2024
|
-
}) : !renderRowActionMenuItems && parseFromValuesOrFunc(enableEditing, row) && ["modal", "row"].includes(editDisplayMode) ? /* @__PURE__ */
|
|
2030
|
+
}) : !renderRowActionMenuItems && parseFromValuesOrFunc(enableEditing, row) && ["modal", "row"].includes(editDisplayMode) ? /* @__PURE__ */ jsx(Tooltip, {
|
|
2025
2031
|
placement: "right",
|
|
2026
2032
|
title: localization.edit,
|
|
2027
|
-
children: /* @__PURE__ */
|
|
2033
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
2028
2034
|
"aria-label": localization.edit,
|
|
2029
2035
|
onClick: handleStartEditMode,
|
|
2030
2036
|
sx: commonIconButtonStyles,
|
|
2031
2037
|
...rest,
|
|
2032
|
-
children: /* @__PURE__ */
|
|
2038
|
+
children: /* @__PURE__ */ jsx(EditIcon, {})
|
|
2033
2039
|
})
|
|
2034
2040
|
}) : renderRowActionMenuItems?.({
|
|
2035
2041
|
row,
|
|
2036
2042
|
staticRowIndex,
|
|
2037
2043
|
table
|
|
2038
|
-
})?.length ? /* @__PURE__ */
|
|
2044
|
+
})?.length ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tooltip, {
|
|
2039
2045
|
...getCommonTooltipProps(),
|
|
2040
2046
|
title: localization.rowActions,
|
|
2041
|
-
children: /* @__PURE__ */
|
|
2047
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
2042
2048
|
"aria-label": localization.rowActions,
|
|
2043
2049
|
onClick: handleOpenRowActionMenu,
|
|
2044
2050
|
size: "small",
|
|
2045
2051
|
sx: commonIconButtonStyles,
|
|
2046
2052
|
...rest,
|
|
2047
|
-
children: /* @__PURE__ */
|
|
2053
|
+
children: /* @__PURE__ */ jsx(MoreHorizIcon, {})
|
|
2048
2054
|
})
|
|
2049
|
-
}), /* @__PURE__ */
|
|
2055
|
+
}), /* @__PURE__ */ jsx(MRT_RowActionMenu, {
|
|
2050
2056
|
anchorEl,
|
|
2051
2057
|
handleEdit: handleStartEditMode,
|
|
2052
2058
|
row,
|
|
@@ -2058,9 +2064,9 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, staticRowIndex, table, ...re
|
|
|
2058
2064
|
//#endregion
|
|
2059
2065
|
//#region src/components/footer/MRT_TableFooterCell.tsx
|
|
2060
2066
|
const MRT_TableFooterCell = ({ footer, staticColumnIndex, table, ...rest }) => {
|
|
2061
|
-
const theme =
|
|
2062
|
-
const {
|
|
2063
|
-
const { density } =
|
|
2067
|
+
const theme = useTheme();
|
|
2068
|
+
const { options: { enableColumnPinning, enableKeyboardShortcuts, muiTableFooterCellProps } } = table;
|
|
2069
|
+
const { density } = table.state;
|
|
2064
2070
|
const { column } = footer;
|
|
2065
2071
|
const { columnDef } = column;
|
|
2066
2072
|
const { columnDefType } = columnDef;
|
|
@@ -2082,7 +2088,7 @@ const MRT_TableFooterCell = ({ footer, staticColumnIndex, table, ...rest }) => {
|
|
|
2082
2088
|
table
|
|
2083
2089
|
});
|
|
2084
2090
|
};
|
|
2085
|
-
return /* @__PURE__ */
|
|
2091
|
+
return /* @__PURE__ */ jsx(TableCell, {
|
|
2086
2092
|
align: columnDefType === "group" ? "center" : theme.direction === "rtl" ? "right" : "left",
|
|
2087
2093
|
colSpan: footer.colSpan,
|
|
2088
2094
|
"data-index": staticColumnIndex,
|
|
@@ -2124,7 +2130,7 @@ const MRT_TableFooterRow = ({ columnVirtualizer, footerGroup, table, ...rest })
|
|
|
2124
2130
|
}),
|
|
2125
2131
|
...rest
|
|
2126
2132
|
};
|
|
2127
|
-
return /* @__PURE__ */
|
|
2133
|
+
return /* @__PURE__ */ jsxs(TableRow, {
|
|
2128
2134
|
...tableRowProps,
|
|
2129
2135
|
sx: (theme) => ({
|
|
2130
2136
|
backgroundColor: baseBackgroundColor,
|
|
@@ -2134,7 +2140,7 @@ const MRT_TableFooterRow = ({ columnVirtualizer, footerGroup, table, ...rest })
|
|
|
2134
2140
|
...parseFromValuesOrFunc(tableRowProps?.sx, theme)
|
|
2135
2141
|
}),
|
|
2136
2142
|
children: [
|
|
2137
|
-
virtualPaddingLeft ? /* @__PURE__ */
|
|
2143
|
+
virtualPaddingLeft ? /* @__PURE__ */ jsx("th", { style: {
|
|
2138
2144
|
display: "flex",
|
|
2139
2145
|
width: virtualPaddingLeft
|
|
2140
2146
|
} }) : null,
|
|
@@ -2144,13 +2150,13 @@ const MRT_TableFooterRow = ({ columnVirtualizer, footerGroup, table, ...rest })
|
|
|
2144
2150
|
staticColumnIndex = footerOrVirtualFooter.index;
|
|
2145
2151
|
footer = footerGroup.headers[staticColumnIndex];
|
|
2146
2152
|
}
|
|
2147
|
-
return footer ? /* @__PURE__ */
|
|
2153
|
+
return footer ? /* @__PURE__ */ jsx(MRT_TableFooterCell, {
|
|
2148
2154
|
footer,
|
|
2149
2155
|
staticColumnIndex,
|
|
2150
2156
|
table
|
|
2151
2157
|
}, footer.id) : null;
|
|
2152
2158
|
}),
|
|
2153
|
-
virtualPaddingRight ? /* @__PURE__ */
|
|
2159
|
+
virtualPaddingRight ? /* @__PURE__ */ jsx("th", { style: {
|
|
2154
2160
|
display: "flex",
|
|
2155
2161
|
width: virtualPaddingRight
|
|
2156
2162
|
} }) : null
|
|
@@ -2160,8 +2166,8 @@ const MRT_TableFooterRow = ({ columnVirtualizer, footerGroup, table, ...rest })
|
|
|
2160
2166
|
//#endregion
|
|
2161
2167
|
//#region src/components/footer/MRT_TableFooter.tsx
|
|
2162
2168
|
const MRT_TableFooter = ({ columnVirtualizer, table, ...rest }) => {
|
|
2163
|
-
const {
|
|
2164
|
-
const { isFullScreen } =
|
|
2169
|
+
const { options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef } } = table;
|
|
2170
|
+
const { isFullScreen } = table.state;
|
|
2165
2171
|
const tableFooterProps = {
|
|
2166
2172
|
...parseFromValuesOrFunc(muiTableFooterProps, { table }),
|
|
2167
2173
|
...rest
|
|
@@ -2169,7 +2175,7 @@ const MRT_TableFooter = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
2169
2175
|
const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
|
|
2170
2176
|
const footerGroups = table.getFooterGroups();
|
|
2171
2177
|
if (!footerGroups.some((footerGroup) => footerGroup.headers?.some((header) => typeof header.column.columnDef.footer === "string" && !!header.column.columnDef.footer || header.column.columnDef.Footer))) return null;
|
|
2172
|
-
return /* @__PURE__ */
|
|
2178
|
+
return /* @__PURE__ */ jsx(TableFooter, {
|
|
2173
2179
|
...tableFooterProps,
|
|
2174
2180
|
ref: (ref) => {
|
|
2175
2181
|
tableFooterRef.current = ref;
|
|
@@ -2184,7 +2190,7 @@ const MRT_TableFooter = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
2184
2190
|
zIndex: stickFooter ? 1 : void 0,
|
|
2185
2191
|
...parseFromValuesOrFunc(tableFooterProps?.sx, theme)
|
|
2186
2192
|
}),
|
|
2187
|
-
children: footerGroups.map((footerGroup) => /* @__PURE__ */
|
|
2193
|
+
children: footerGroups.map((footerGroup) => /* @__PURE__ */ jsx(MRT_TableFooterRow, {
|
|
2188
2194
|
columnVirtualizer,
|
|
2189
2195
|
footerGroup,
|
|
2190
2196
|
table
|
|
@@ -2194,8 +2200,8 @@ const MRT_TableFooter = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
2194
2200
|
//#endregion
|
|
2195
2201
|
//#region src/components/inputs/MRT_SelectCheckbox.tsx
|
|
2196
2202
|
const MRT_SelectCheckbox = ({ row, staticRowIndex, table, ...rest }) => {
|
|
2197
|
-
const {
|
|
2198
|
-
const { density, isLoading } =
|
|
2203
|
+
const { options: { enableMultiRowSelection, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, selectAllMode } } = table;
|
|
2204
|
+
const { density, isLoading } = table.state;
|
|
2199
2205
|
const selectAll = !row;
|
|
2200
2206
|
const allRowsSelected = selectAll ? selectAllMode === "page" ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected() : void 0;
|
|
2201
2207
|
const isChecked = selectAll ? allRowsSelected : getIsRowSelected({
|
|
@@ -2240,10 +2246,10 @@ const MRT_SelectCheckbox = ({ row, staticRowIndex, table, ...rest }) => {
|
|
|
2240
2246
|
}),
|
|
2241
2247
|
title: void 0
|
|
2242
2248
|
};
|
|
2243
|
-
return /* @__PURE__ */
|
|
2249
|
+
return /* @__PURE__ */ jsx(Tooltip, {
|
|
2244
2250
|
...getCommonTooltipProps(),
|
|
2245
2251
|
title: checkboxProps?.title ?? (selectAll ? localization.toggleSelectAll : localization.toggleSelectRow),
|
|
2246
|
-
children: enableMultiRowSelection === false ? /* @__PURE__ */
|
|
2252
|
+
children: enableMultiRowSelection === false ? /* @__PURE__ */ jsx(Radio, { ...commonProps }) : /* @__PURE__ */ jsx(Checkbox, {
|
|
2247
2253
|
indeterminate: !isChecked && selectAll ? table.getIsSomeRowsSelected() : row?.getIsSomeSelected() && row.getCanSelectSubRows(),
|
|
2248
2254
|
...commonProps
|
|
2249
2255
|
})
|
|
@@ -2252,8 +2258,8 @@ const MRT_SelectCheckbox = ({ row, staticRowIndex, table, ...rest }) => {
|
|
|
2252
2258
|
//#endregion
|
|
2253
2259
|
//#region src/components/toolbar/MRT_ToolbarAlertBanner.tsx
|
|
2254
2260
|
const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, ...rest }) => {
|
|
2255
|
-
const { getCoreRowModel, getFilteredSelectedRowModel,
|
|
2256
|
-
const { density, grouping, rowSelection, showAlertBanner } =
|
|
2261
|
+
const { getCoreRowModel, getFilteredSelectedRowModel, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount }, refs: { tablePaperRef } } = table;
|
|
2262
|
+
const { density, grouping, rowSelection, showAlertBanner } = table.state;
|
|
2257
2263
|
const alertProps = {
|
|
2258
2264
|
...parseFromValuesOrFunc(muiToolbarAlertBannerProps, { table }),
|
|
2259
2265
|
...rest
|
|
@@ -2261,38 +2267,38 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, ...rest }) => {
|
|
|
2261
2267
|
const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, { table });
|
|
2262
2268
|
const totalRowCount = rowCount ?? getCoreRowModel().rows.length;
|
|
2263
2269
|
const filteredRowCount = getFilteredSelectedRowModel().rows.length;
|
|
2264
|
-
const selectedRowCount =
|
|
2270
|
+
const selectedRowCount = useMemo(() => manualPagination ? Object.values(rowSelection).filter(Boolean).length : filteredRowCount, [
|
|
2265
2271
|
rowSelection,
|
|
2266
2272
|
totalRowCount,
|
|
2267
2273
|
manualPagination,
|
|
2268
2274
|
filteredRowCount
|
|
2269
2275
|
]);
|
|
2270
|
-
const selectedAlert = selectedRowCount > 0 ? /* @__PURE__ */
|
|
2276
|
+
const selectedAlert = selectedRowCount > 0 ? /* @__PURE__ */ jsxs(Stack, {
|
|
2271
2277
|
direction: "row",
|
|
2272
2278
|
sx: {
|
|
2273
2279
|
alignItems: "center",
|
|
2274
2280
|
gap: "16px"
|
|
2275
2281
|
},
|
|
2276
|
-
children: [localization.selectedCountOfRowCountRowsSelected?.replace("{selectedCount}", selectedRowCount.toLocaleString(localization.language))?.replace("{rowCount}", totalRowCount.toLocaleString(localization.language)), /* @__PURE__ */
|
|
2282
|
+
children: [localization.selectedCountOfRowCountRowsSelected?.replace("{selectedCount}", selectedRowCount.toLocaleString(localization.language))?.replace("{rowCount}", totalRowCount.toLocaleString(localization.language)), /* @__PURE__ */ jsx(Button, {
|
|
2277
2283
|
onClick: (event) => getMRT_SelectAllHandler({ table })(event, false, true),
|
|
2278
2284
|
size: "small",
|
|
2279
2285
|
sx: { p: "2px" },
|
|
2280
2286
|
children: localization.clearSelection
|
|
2281
2287
|
})]
|
|
2282
2288
|
}) : null;
|
|
2283
|
-
const groupedAlert = grouping.length > 0 ? /* @__PURE__ */
|
|
2289
|
+
const groupedAlert = grouping.length > 0 ? /* @__PURE__ */ jsxs("span", { children: [
|
|
2284
2290
|
localization.groupedBy,
|
|
2285
2291
|
" ",
|
|
2286
|
-
grouping.map((columnId, index) => /* @__PURE__ */
|
|
2287
|
-
label: table.getColumn(columnId)
|
|
2288
|
-
onDelete: () => table.getColumn(columnId)
|
|
2292
|
+
grouping.map((columnId, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 ? localization.thenBy : "", /* @__PURE__ */ jsx(Chip, {
|
|
2293
|
+
label: table.getColumn(columnId)?.columnDef.header,
|
|
2294
|
+
onDelete: () => table.getColumn(columnId)?.toggleGrouping(),
|
|
2289
2295
|
...chipProps
|
|
2290
2296
|
})] }, `${index}-${columnId}`))
|
|
2291
2297
|
] }) : null;
|
|
2292
|
-
return /* @__PURE__ */
|
|
2298
|
+
return /* @__PURE__ */ jsx(Collapse, {
|
|
2293
2299
|
in: showAlertBanner || !!selectedAlert || !!groupedAlert,
|
|
2294
2300
|
timeout: stackAlertBanner ? 200 : 0,
|
|
2295
|
-
children: /* @__PURE__ */
|
|
2301
|
+
children: /* @__PURE__ */ jsx(Alert, {
|
|
2296
2302
|
color: "info",
|
|
2297
2303
|
icon: false,
|
|
2298
2304
|
...alertProps,
|
|
@@ -2317,20 +2323,20 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, ...rest }) => {
|
|
|
2317
2323
|
groupedAlert,
|
|
2318
2324
|
selectedAlert,
|
|
2319
2325
|
table
|
|
2320
|
-
}) ?? /* @__PURE__ */
|
|
2326
|
+
}) ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [alertProps?.title && /* @__PURE__ */ jsx(AlertTitle, { children: alertProps.title }), /* @__PURE__ */ jsxs(Stack, {
|
|
2321
2327
|
sx: { p: positionToolbarAlertBanner !== "head-overlay" ? "0.5rem 1rem" : density === "spacious" ? "0.75rem 1.25rem" : density === "comfortable" ? "0.5rem 0.75rem" : "0.25rem 0.5rem" },
|
|
2322
2328
|
children: [
|
|
2323
2329
|
alertProps?.children,
|
|
2324
|
-
alertProps?.children && (selectedAlert || groupedAlert) && /* @__PURE__ */
|
|
2325
|
-
/* @__PURE__ */
|
|
2330
|
+
alertProps?.children && (selectedAlert || groupedAlert) && /* @__PURE__ */ jsx("br", {}),
|
|
2331
|
+
/* @__PURE__ */ jsxs(Box, {
|
|
2326
2332
|
sx: { display: "flex" },
|
|
2327
2333
|
children: [
|
|
2328
|
-
enableRowSelection && enableSelectAll && positionToolbarAlertBanner === "head-overlay" && /* @__PURE__ */
|
|
2334
|
+
enableRowSelection && enableSelectAll && positionToolbarAlertBanner === "head-overlay" && /* @__PURE__ */ jsx(MRT_SelectCheckbox, { table }),
|
|
2329
2335
|
" ",
|
|
2330
2336
|
selectedAlert
|
|
2331
2337
|
]
|
|
2332
2338
|
}),
|
|
2333
|
-
selectedAlert && groupedAlert && /* @__PURE__ */
|
|
2339
|
+
selectedAlert && groupedAlert && /* @__PURE__ */ jsx("br", {}),
|
|
2334
2340
|
groupedAlert
|
|
2335
2341
|
]
|
|
2336
2342
|
})] })
|
|
@@ -2443,14 +2449,14 @@ const rangeVariants = [
|
|
|
2443
2449
|
"range"
|
|
2444
2450
|
];
|
|
2445
2451
|
const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, ...rest }) => {
|
|
2446
|
-
const {
|
|
2447
|
-
const { density, globalFilterFn } =
|
|
2452
|
+
const { options: { columnFilterModeOptions, globalFilterModeOptions, localization, mrtTheme: { menuBackgroundColor }, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems }, setColumnFilterFns, setGlobalFilterFn } = table;
|
|
2453
|
+
const { density, globalFilterFn } = table.state;
|
|
2448
2454
|
const { column } = header ?? {};
|
|
2449
2455
|
const { columnDef } = column ?? {};
|
|
2450
2456
|
const currentFilterValue = column?.getFilterValue();
|
|
2451
2457
|
let allowedColumnFilterOptions = columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
|
|
2452
2458
|
if (rangeVariants.includes(columnDef?.filterVariant)) allowedColumnFilterOptions = [...rangeModes, ...allowedColumnFilterOptions ?? []].filter((option) => rangeModes.includes(option));
|
|
2453
|
-
const internalFilterOptions =
|
|
2459
|
+
const internalFilterOptions = useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef ? allowedColumnFilterOptions === void 0 || allowedColumnFilterOptions?.includes(filterOption.option) : (!globalFilterModeOptions || globalFilterModeOptions.includes(filterOption.option)) && [
|
|
2454
2460
|
"contains",
|
|
2455
2461
|
"fuzzy",
|
|
2456
2462
|
"startsWith"
|
|
@@ -2471,11 +2477,12 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
|
|
|
2471
2477
|
column.setFilterValue([]);
|
|
2472
2478
|
setFilterValue?.([]);
|
|
2473
2479
|
} else if (currentFilterValue) column.setFilterValue(currentFilterValue);
|
|
2474
|
-
} else if (columnDef?.filterVariant?.includes("range") || rangeModes.includes(option))
|
|
2475
|
-
|
|
2476
|
-
|
|
2477
|
-
|
|
2478
|
-
|
|
2480
|
+
} else if (columnDef?.filterVariant?.includes("range") || rangeModes.includes(option)) {
|
|
2481
|
+
if (!Array.isArray(currentFilterValue) || !currentFilterValue?.every((v) => v === "") && !rangeModes.includes(prevFilterMode)) {
|
|
2482
|
+
column.setFilterValue(["", ""]);
|
|
2483
|
+
setFilterValue?.("");
|
|
2484
|
+
} else column.setFilterValue(currentFilterValue);
|
|
2485
|
+
} else if (Array.isArray(currentFilterValue)) {
|
|
2479
2486
|
column.setFilterValue("");
|
|
2480
2487
|
setFilterValue?.("");
|
|
2481
2488
|
} else if (currentFilterValue === " " && emptyModes.includes(prevFilterMode)) column.setFilterValue(void 0);
|
|
@@ -2485,7 +2492,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
|
|
|
2485
2492
|
onSelect?.();
|
|
2486
2493
|
};
|
|
2487
2494
|
const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
|
|
2488
|
-
return /* @__PURE__ */
|
|
2495
|
+
return /* @__PURE__ */ jsx(Menu, {
|
|
2489
2496
|
anchorEl,
|
|
2490
2497
|
anchorOrigin: {
|
|
2491
2498
|
horizontal: "right",
|
|
@@ -2513,7 +2520,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
|
|
|
2513
2520
|
internalFilterOptions,
|
|
2514
2521
|
onSelectFilterMode: handleSelectFilterMode,
|
|
2515
2522
|
table
|
|
2516
|
-
})) ?? internalFilterOptions.map(({ divider, label, option, symbol }, index) => /* @__PURE__ */
|
|
2523
|
+
})) ?? internalFilterOptions.map(({ divider, label, option, symbol }, index) => /* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
2517
2524
|
divider,
|
|
2518
2525
|
icon: symbol,
|
|
2519
2526
|
label,
|
|
@@ -2527,12 +2534,12 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
|
|
|
2527
2534
|
//#endregion
|
|
2528
2535
|
//#region src/components/menus/MRT_ColumnActionMenu.tsx
|
|
2529
2536
|
const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, ...rest }) => {
|
|
2530
|
-
const { getAllLeafColumns,
|
|
2537
|
+
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;
|
|
2531
2538
|
const { column } = header;
|
|
2532
2539
|
const { columnDef } = column;
|
|
2533
|
-
const { columnSizing, columnVisibility, density, showColumnFilters } =
|
|
2540
|
+
const { columnSizing, columnVisibility, density, showColumnFilters } = table.state;
|
|
2534
2541
|
const columnFilterValue = column.getFilterValue();
|
|
2535
|
-
const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
|
|
2542
|
+
const [filterMenuAnchorEl, setFilterMenuAnchorEl] = useState(null);
|
|
2536
2543
|
const handleClearSort = () => {
|
|
2537
2544
|
column.clearSorting();
|
|
2538
2545
|
setAnchorEl(null);
|
|
@@ -2546,7 +2553,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, ...rest })
|
|
|
2546
2553
|
setAnchorEl(null);
|
|
2547
2554
|
};
|
|
2548
2555
|
const handleResetColumnSize = () => {
|
|
2549
|
-
|
|
2556
|
+
setColumnResizing((old) => ({
|
|
2550
2557
|
...old,
|
|
2551
2558
|
isResizingColumn: false
|
|
2552
2559
|
}));
|
|
@@ -2569,7 +2576,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, ...rest })
|
|
|
2569
2576
|
const handleClearFilter = () => {
|
|
2570
2577
|
column.setFilterValue(void 0);
|
|
2571
2578
|
setAnchorEl(null);
|
|
2572
|
-
if (["empty", "notEmpty"].includes(
|
|
2579
|
+
if (["empty", "notEmpty"].includes(currentFilterOption)) setColumnFilterFns((prev) => ({
|
|
2573
2580
|
...prev,
|
|
2574
2581
|
[header.id]: allowedColumnFilterOptions?.[0] ?? "fuzzy"
|
|
2575
2582
|
}));
|
|
@@ -2588,51 +2595,54 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, ...rest })
|
|
|
2588
2595
|
setFilterMenuAnchorEl(event.currentTarget);
|
|
2589
2596
|
};
|
|
2590
2597
|
const isSelectFilter = !!columnDef.filterSelectOptions;
|
|
2591
|
-
const allowedColumnFilterOptions
|
|
2598
|
+
const { allowedColumnFilterOptions, currentFilterOption } = getColumnFilterInfo({
|
|
2599
|
+
header,
|
|
2600
|
+
table
|
|
2601
|
+
});
|
|
2592
2602
|
const showFilterModeSubMenu = enableColumnFilterModes && columnDef.enableColumnFilterModes !== false && !isSelectFilter && (allowedColumnFilterOptions === void 0 || !!allowedColumnFilterOptions?.length);
|
|
2593
2603
|
const internalColumnMenuItems = [
|
|
2594
2604
|
...enableSorting && column.getCanSort() ? [
|
|
2595
|
-
enableSortingRemoval !== false && /* @__PURE__ */
|
|
2605
|
+
enableSortingRemoval !== false && /* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
2596
2606
|
disabled: column.getIsSorted() === false,
|
|
2597
|
-
icon: /* @__PURE__ */
|
|
2607
|
+
icon: /* @__PURE__ */ jsx(ClearAllIcon, {}),
|
|
2598
2608
|
label: localization.clearSort,
|
|
2599
2609
|
onClick: handleClearSort,
|
|
2600
2610
|
table
|
|
2601
2611
|
}, 0),
|
|
2602
|
-
/* @__PURE__ */
|
|
2612
|
+
/* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
2603
2613
|
disabled: column.getIsSorted() === "asc",
|
|
2604
|
-
icon: /* @__PURE__ */
|
|
2614
|
+
icon: /* @__PURE__ */ jsx(SortIcon, { style: { transform: "rotate(180deg) scaleX(-1)" } }),
|
|
2605
2615
|
label: localization.sortByColumnAsc?.replace("{column}", String(columnDef.header)),
|
|
2606
2616
|
onClick: handleSortAsc,
|
|
2607
2617
|
table
|
|
2608
2618
|
}, 1),
|
|
2609
|
-
/* @__PURE__ */
|
|
2619
|
+
/* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
2610
2620
|
disabled: column.getIsSorted() === "desc",
|
|
2611
2621
|
divider: enableColumnFilters || enableGrouping || enableHiding,
|
|
2612
|
-
icon: /* @__PURE__ */
|
|
2622
|
+
icon: /* @__PURE__ */ jsx(SortIcon, {}),
|
|
2613
2623
|
label: localization.sortByColumnDesc?.replace("{column}", String(columnDef.header)),
|
|
2614
2624
|
onClick: handleSortDesc,
|
|
2615
2625
|
table
|
|
2616
2626
|
}, 2)
|
|
2617
2627
|
] : [],
|
|
2618
2628
|
...enableColumnFilters && column.getCanFilter() ? [
|
|
2619
|
-
/* @__PURE__ */
|
|
2629
|
+
/* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
2620
2630
|
disabled: !columnFilterValue || Array.isArray(columnFilterValue) && !columnFilterValue.filter((value) => value).length,
|
|
2621
|
-
icon: /* @__PURE__ */
|
|
2631
|
+
icon: /* @__PURE__ */ jsx(FilterListOffIcon, {}),
|
|
2622
2632
|
label: localization.clearFilter,
|
|
2623
2633
|
onClick: handleClearFilter,
|
|
2624
2634
|
table
|
|
2625
2635
|
}, 3),
|
|
2626
|
-
columnFilterDisplayMode === "subheader" && /* @__PURE__ */
|
|
2636
|
+
columnFilterDisplayMode === "subheader" && /* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
2627
2637
|
disabled: showColumnFilters && !enableColumnFilterModes,
|
|
2628
2638
|
divider: enableGrouping || enableHiding,
|
|
2629
|
-
icon: /* @__PURE__ */
|
|
2639
|
+
icon: /* @__PURE__ */ jsx(FilterListIcon, {}),
|
|
2630
2640
|
label: localization.filterByColumn?.replace("{column}", String(columnDef.header)),
|
|
2631
2641
|
onClick: showColumnFilters ? handleOpenFilterModeMenu : handleFilterByColumn,
|
|
2632
2642
|
onOpenSubMenu: showFilterModeSubMenu ? handleOpenFilterModeMenu : void 0,
|
|
2633
2643
|
table
|
|
2634
2644
|
}, 4),
|
|
2635
|
-
showFilterModeSubMenu && /* @__PURE__ */
|
|
2645
|
+
showFilterModeSubMenu && /* @__PURE__ */ jsx(MRT_FilterOptionMenu, {
|
|
2636
2646
|
anchorEl: filterMenuAnchorEl,
|
|
2637
2647
|
header,
|
|
2638
2648
|
onSelect: handleFilterByColumn,
|
|
@@ -2640,59 +2650,59 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, ...rest })
|
|
|
2640
2650
|
table
|
|
2641
2651
|
}, 5)
|
|
2642
2652
|
].filter(Boolean) : [],
|
|
2643
|
-
...enableGrouping && column.getCanGroup() ? [/* @__PURE__ */
|
|
2653
|
+
...enableGrouping && column.getCanGroup() ? [/* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
2644
2654
|
divider: enableColumnPinning,
|
|
2645
|
-
icon: /* @__PURE__ */
|
|
2655
|
+
icon: /* @__PURE__ */ jsx(DynamicFeedIcon, {}),
|
|
2646
2656
|
label: localization[column.getIsGrouped() ? "ungroupByColumn" : "groupByColumn"]?.replace("{column}", String(columnDef.header)),
|
|
2647
2657
|
onClick: handleGroupByColumn,
|
|
2648
2658
|
table
|
|
2649
2659
|
}, 6)] : [],
|
|
2650
2660
|
...enableColumnPinning && column.getCanPin() ? [
|
|
2651
|
-
/* @__PURE__ */
|
|
2652
|
-
disabled: column.getIsPinned() === "
|
|
2653
|
-
icon: /* @__PURE__ */
|
|
2661
|
+
/* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
2662
|
+
disabled: column.getIsPinned() === "start" || !column.getCanPin(),
|
|
2663
|
+
icon: /* @__PURE__ */ jsx(PushPinIcon, { style: { transform: "rotate(90deg)" } }),
|
|
2654
2664
|
label: localization.pinToLeft,
|
|
2655
|
-
onClick: () => handlePinColumn("
|
|
2665
|
+
onClick: () => handlePinColumn("start"),
|
|
2656
2666
|
table
|
|
2657
2667
|
}, 7),
|
|
2658
|
-
/* @__PURE__ */
|
|
2659
|
-
disabled: column.getIsPinned() === "
|
|
2660
|
-
icon: /* @__PURE__ */
|
|
2668
|
+
/* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
2669
|
+
disabled: column.getIsPinned() === "end" || !column.getCanPin(),
|
|
2670
|
+
icon: /* @__PURE__ */ jsx(PushPinIcon, { style: { transform: "rotate(-90deg)" } }),
|
|
2661
2671
|
label: localization.pinToRight,
|
|
2662
|
-
onClick: () => handlePinColumn("
|
|
2672
|
+
onClick: () => handlePinColumn("end"),
|
|
2663
2673
|
table
|
|
2664
2674
|
}, 8),
|
|
2665
|
-
/* @__PURE__ */
|
|
2675
|
+
/* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
2666
2676
|
disabled: !column.getIsPinned(),
|
|
2667
2677
|
divider: enableHiding,
|
|
2668
|
-
icon: /* @__PURE__ */
|
|
2678
|
+
icon: /* @__PURE__ */ jsx(PushPinIcon, {}),
|
|
2669
2679
|
label: localization.unpin,
|
|
2670
2680
|
onClick: () => handlePinColumn(false),
|
|
2671
2681
|
table
|
|
2672
2682
|
}, 9)
|
|
2673
2683
|
] : [],
|
|
2674
|
-
...enableColumnResizing && column.getCanResize() ? [/* @__PURE__ */
|
|
2684
|
+
...enableColumnResizing && column.getCanResize() ? [/* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
2675
2685
|
disabled: columnSizing[column.id] === void 0,
|
|
2676
|
-
icon: /* @__PURE__ */
|
|
2686
|
+
icon: /* @__PURE__ */ jsx(RestartAltIcon, {}),
|
|
2677
2687
|
label: localization.resetColumnSize,
|
|
2678
2688
|
onClick: handleResetColumnSize,
|
|
2679
2689
|
table
|
|
2680
2690
|
}, 10)] : [],
|
|
2681
|
-
...enableHiding ? [/* @__PURE__ */
|
|
2691
|
+
...enableHiding ? [/* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
2682
2692
|
disabled: !column.getCanHide(),
|
|
2683
|
-
icon: /* @__PURE__ */
|
|
2693
|
+
icon: /* @__PURE__ */ jsx(VisibilityOffIcon, {}),
|
|
2684
2694
|
label: localization.hideColumn?.replace("{column}", String(columnDef.header)),
|
|
2685
2695
|
onClick: handleHideColumn,
|
|
2686
2696
|
table
|
|
2687
|
-
}, 11), /* @__PURE__ */
|
|
2697
|
+
}, 11), /* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
2688
2698
|
disabled: !Object.values(columnVisibility).filter((visible) => !visible).length,
|
|
2689
|
-
icon: /* @__PURE__ */
|
|
2699
|
+
icon: /* @__PURE__ */ jsx(ViewColumnIcon, {}),
|
|
2690
2700
|
label: localization.showAllColumns?.replace("{column}", String(columnDef.header)),
|
|
2691
2701
|
onClick: handleShowAllColumns,
|
|
2692
2702
|
table
|
|
2693
2703
|
}, 12)] : []
|
|
2694
2704
|
].filter(Boolean);
|
|
2695
|
-
return /* @__PURE__ */
|
|
2705
|
+
return /* @__PURE__ */ jsx(Menu, {
|
|
2696
2706
|
anchorEl,
|
|
2697
2707
|
disableScrollLock: true,
|
|
2698
2708
|
onClose: () => setAnchorEl(null),
|
|
@@ -2721,7 +2731,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, ...rest }) => {
|
|
|
2721
2731
|
const { options: { icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps } } = table;
|
|
2722
2732
|
const { column } = header;
|
|
2723
2733
|
const { columnDef } = column;
|
|
2724
|
-
const [anchorEl, setAnchorEl] =
|
|
2734
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
2725
2735
|
const handleClick = (event) => {
|
|
2726
2736
|
event.stopPropagation();
|
|
2727
2737
|
event.preventDefault();
|
|
@@ -2738,10 +2748,10 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, ...rest }) => {
|
|
|
2738
2748
|
}),
|
|
2739
2749
|
...rest
|
|
2740
2750
|
};
|
|
2741
|
-
return /* @__PURE__ */
|
|
2751
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tooltip, {
|
|
2742
2752
|
...getCommonTooltipProps("top"),
|
|
2743
2753
|
title: iconButtonProps?.title ?? localization.columnActions,
|
|
2744
|
-
children: /* @__PURE__ */
|
|
2754
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
2745
2755
|
"aria-label": localization.columnActions,
|
|
2746
2756
|
onClick: handleClick,
|
|
2747
2757
|
size: "small",
|
|
@@ -2756,9 +2766,9 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, ...rest }) => {
|
|
|
2756
2766
|
...parseFromValuesOrFunc(iconButtonProps?.sx, theme)
|
|
2757
2767
|
}),
|
|
2758
2768
|
title: void 0,
|
|
2759
|
-
children: iconButtonProps?.children ?? /* @__PURE__ */
|
|
2769
|
+
children: iconButtonProps?.children ?? /* @__PURE__ */ jsx(MoreVertIcon, { style: { transform: "scale(0.9)" } })
|
|
2760
2770
|
})
|
|
2761
|
-
}), anchorEl && /* @__PURE__ */
|
|
2771
|
+
}), anchorEl && /* @__PURE__ */ jsx(MRT_ColumnActionMenu, {
|
|
2762
2772
|
anchorEl,
|
|
2763
2773
|
header,
|
|
2764
2774
|
setAnchorEl,
|
|
@@ -2768,8 +2778,8 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, ...rest }) => {
|
|
|
2768
2778
|
//#endregion
|
|
2769
2779
|
//#region src/components/inputs/MRT_FilterCheckbox.tsx
|
|
2770
2780
|
const MRT_FilterCheckbox = ({ column, table, ...rest }) => {
|
|
2771
|
-
const {
|
|
2772
|
-
const { density } =
|
|
2781
|
+
const { options: { localization, muiFilterCheckboxProps } } = table;
|
|
2782
|
+
const { density } = table.state;
|
|
2773
2783
|
const { columnDef } = column;
|
|
2774
2784
|
const checkboxProps = {
|
|
2775
2785
|
...parseFromValuesOrFunc(muiFilterCheckboxProps, {
|
|
@@ -2783,11 +2793,11 @@ const MRT_FilterCheckbox = ({ column, table, ...rest }) => {
|
|
|
2783
2793
|
...rest
|
|
2784
2794
|
};
|
|
2785
2795
|
const filterLabel = localization.filterByColumn?.replace("{column}", columnDef.header);
|
|
2786
|
-
return /* @__PURE__ */
|
|
2796
|
+
return /* @__PURE__ */ jsx(Tooltip, {
|
|
2787
2797
|
...getCommonTooltipProps(),
|
|
2788
2798
|
title: checkboxProps?.title ?? filterLabel,
|
|
2789
|
-
children: /* @__PURE__ */
|
|
2790
|
-
control: /* @__PURE__ */
|
|
2799
|
+
children: /* @__PURE__ */ jsx(FormControlLabel, {
|
|
2800
|
+
control: /* @__PURE__ */ jsx(Checkbox, {
|
|
2791
2801
|
checked: column.getFilterValue() === "true",
|
|
2792
2802
|
color: column.getFilterValue() === void 0 ? "default" : "primary",
|
|
2793
2803
|
indeterminate: column.getFilterValue() === void 0,
|
|
@@ -2862,10 +2872,10 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
2862
2872
|
const filterChipLabel = ["empty", "notEmpty"].includes(currentFilterOption) ? localization[`filter${currentFilterOption?.charAt?.(0)?.toUpperCase() + currentFilterOption?.slice(1)}`] : "";
|
|
2863
2873
|
const filterPlaceholder = !isRangeFilter ? textFieldProps?.placeholder ?? localization.filterByColumn?.replace("{column}", String(columnDef.header)) : rangeFilterIndex === 0 ? localization.min : rangeFilterIndex === 1 ? localization.max : "";
|
|
2864
2874
|
const showChangeModeButton = !!(enableColumnFilterModes && columnDef.enableColumnFilterModes !== false && !rangeFilterIndex && (allowedColumnFilterOptions === void 0 || !!allowedColumnFilterOptions?.length));
|
|
2865
|
-
const [anchorEl, setAnchorEl] =
|
|
2866
|
-
const [filterValue, setFilterValue] =
|
|
2867
|
-
const [autocompleteValue, setAutocompleteValue] =
|
|
2868
|
-
const handleChangeDebounced =
|
|
2875
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
2876
|
+
const [filterValue, setFilterValue] = useState(() => isMultiSelectFilter ? column.getFilterValue() || [] : isRangeFilter ? column.getFilterValue()?.[rangeFilterIndex] || "" : isAutocompleteFilter ? typeof column.getFilterValue() === "string" ? column.getFilterValue() : "" : column.getFilterValue() ?? "");
|
|
2877
|
+
const [autocompleteValue, setAutocompleteValue] = useState(() => isAutocompleteFilter ? column.getFilterValue() || null : null);
|
|
2878
|
+
const handleChangeDebounced = useCallback(debounce((newValue) => {
|
|
2869
2879
|
if (isRangeFilter) column.setFilterValue((old) => {
|
|
2870
2880
|
const newFilterValues = old ?? ["", ""];
|
|
2871
2881
|
newFilterValues[rangeFilterIndex] = newValue ?? void 0;
|
|
@@ -2919,8 +2929,8 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
2919
2929
|
const handleFilterMenuOpen = (event) => {
|
|
2920
2930
|
setAnchorEl(event.currentTarget);
|
|
2921
2931
|
};
|
|
2922
|
-
const isMounted =
|
|
2923
|
-
|
|
2932
|
+
const isMounted = useRef(false);
|
|
2933
|
+
useEffect(() => {
|
|
2924
2934
|
if (isMounted.current) {
|
|
2925
2935
|
const filterValue = column.getFilterValue();
|
|
2926
2936
|
if (filterValue === void 0) handleClear();
|
|
@@ -2929,22 +2939,22 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
2929
2939
|
}
|
|
2930
2940
|
isMounted.current = true;
|
|
2931
2941
|
}, [column.getFilterValue()]);
|
|
2932
|
-
if (columnDef.Filter) return /* @__PURE__ */
|
|
2942
|
+
if (columnDef.Filter) return /* @__PURE__ */ jsx(Fragment$1, { children: columnDef.Filter?.({
|
|
2933
2943
|
column,
|
|
2934
2944
|
header,
|
|
2935
2945
|
rangeFilterIndex,
|
|
2936
2946
|
table
|
|
2937
2947
|
}) });
|
|
2938
|
-
const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? /* @__PURE__ */
|
|
2948
|
+
const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? /* @__PURE__ */ jsx(InputAdornment, {
|
|
2939
2949
|
position: "end",
|
|
2940
2950
|
sx: {
|
|
2941
2951
|
mr: isSelectFilter || isMultiSelectFilter ? "20px" : void 0,
|
|
2942
2952
|
visibility: (filterValue?.length ?? 0) > 0 ? "visible" : "hidden"
|
|
2943
2953
|
},
|
|
2944
|
-
children: /* @__PURE__ */
|
|
2954
|
+
children: /* @__PURE__ */ jsx(Tooltip, {
|
|
2945
2955
|
placement: "right",
|
|
2946
2956
|
title: localization.clearFilter ?? "",
|
|
2947
|
-
children: /* @__PURE__ */
|
|
2957
|
+
children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, {
|
|
2948
2958
|
"aria-label": localization.clearFilter,
|
|
2949
2959
|
disabled: !filterValue?.toString()?.length,
|
|
2950
2960
|
onClick: handleClear,
|
|
@@ -2954,15 +2964,15 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
2954
2964
|
transform: "scale(0.9)",
|
|
2955
2965
|
width: "2rem"
|
|
2956
2966
|
},
|
|
2957
|
-
children: /* @__PURE__ */
|
|
2967
|
+
children: /* @__PURE__ */ jsx(CloseIcon, {})
|
|
2958
2968
|
}) })
|
|
2959
2969
|
})
|
|
2960
2970
|
}) : null;
|
|
2961
|
-
const startAdornment = showChangeModeButton ? /* @__PURE__ */
|
|
2971
|
+
const startAdornment = showChangeModeButton ? /* @__PURE__ */ jsxs(InputAdornment, {
|
|
2962
2972
|
position: "start",
|
|
2963
|
-
children: [/* @__PURE__ */
|
|
2973
|
+
children: [/* @__PURE__ */ jsx(Tooltip, {
|
|
2964
2974
|
title: localization.changeFilterMode,
|
|
2965
|
-
children: /* @__PURE__ */
|
|
2975
|
+
children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, {
|
|
2966
2976
|
"aria-label": localization.changeFilterMode,
|
|
2967
2977
|
onClick: handleFilterMenuOpen,
|
|
2968
2978
|
size: "small",
|
|
@@ -2970,16 +2980,16 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
2970
2980
|
height: "1.75rem",
|
|
2971
2981
|
width: "1.75rem"
|
|
2972
2982
|
},
|
|
2973
|
-
children: /* @__PURE__ */
|
|
2983
|
+
children: /* @__PURE__ */ jsx(FilterListIcon, {})
|
|
2974
2984
|
}) })
|
|
2975
|
-
}), filterChipLabel && /* @__PURE__ */
|
|
2985
|
+
}), filterChipLabel && /* @__PURE__ */ jsx(Chip, {
|
|
2976
2986
|
label: filterChipLabel,
|
|
2977
2987
|
onDelete: handleClearEmptyFilterChip
|
|
2978
2988
|
})]
|
|
2979
2989
|
}) : null;
|
|
2980
2990
|
const commonTextFieldProps = {
|
|
2981
2991
|
fullWidth: true,
|
|
2982
|
-
helperText: showChangeModeButton ? /* @__PURE__ */
|
|
2992
|
+
helperText: showChangeModeButton ? /* @__PURE__ */ jsx("label", { children: localization.filterMode.replace("{filterType}", localization[`filter${currentFilterOption?.charAt(0)?.toUpperCase() + currentFilterOption?.slice(1)}`]) }) : null,
|
|
2983
2993
|
inputRef: (inputRef) => {
|
|
2984
2994
|
filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] = inputRef;
|
|
2985
2995
|
if (textFieldProps.inputRef) textFieldProps.inputRef = inputRef;
|
|
@@ -3036,7 +3046,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
3036
3046
|
},
|
|
3037
3047
|
value: filterValue || null
|
|
3038
3048
|
};
|
|
3039
|
-
return /* @__PURE__ */
|
|
3049
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [filterVariant?.startsWith("time") ? /* @__PURE__ */ jsx(TimePicker, {
|
|
3040
3050
|
...commonDatePickerProps,
|
|
3041
3051
|
...timePickerProps,
|
|
3042
3052
|
slotProps: {
|
|
@@ -3051,7 +3061,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
3051
3061
|
...timePickerProps?.slotProps?.textField
|
|
3052
3062
|
}
|
|
3053
3063
|
}
|
|
3054
|
-
}) : filterVariant?.startsWith("datetime") ? /* @__PURE__ */
|
|
3064
|
+
}) : filterVariant?.startsWith("datetime") ? /* @__PURE__ */ jsx(DateTimePicker, {
|
|
3055
3065
|
...commonDatePickerProps,
|
|
3056
3066
|
...dateTimePickerProps,
|
|
3057
3067
|
slotProps: {
|
|
@@ -3066,7 +3076,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
3066
3076
|
...dateTimePickerProps?.slotProps?.textField
|
|
3067
3077
|
}
|
|
3068
3078
|
}
|
|
3069
|
-
}) : filterVariant?.startsWith("date") ? /* @__PURE__ */
|
|
3079
|
+
}) : filterVariant?.startsWith("date") ? /* @__PURE__ */ jsx(DatePicker, {
|
|
3070
3080
|
...commonDatePickerProps,
|
|
3071
3081
|
...datePickerProps,
|
|
3072
3082
|
slotProps: {
|
|
@@ -3081,7 +3091,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
3081
3091
|
...datePickerProps?.slotProps?.textField
|
|
3082
3092
|
}
|
|
3083
3093
|
}
|
|
3084
|
-
}) : isAutocompleteFilter ? /* @__PURE__ */
|
|
3094
|
+
}) : isAutocompleteFilter ? /* @__PURE__ */ jsx(Autocomplete, {
|
|
3085
3095
|
freeSolo: true,
|
|
3086
3096
|
getOptionLabel: (option) => getValueAndLabel(option).label,
|
|
3087
3097
|
inputValue: filterValue,
|
|
@@ -3092,7 +3102,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
3092
3102
|
renderInput: (params) => {
|
|
3093
3103
|
const commonInput = getTextFieldSlotProps(commonTextFieldProps.slotProps).input;
|
|
3094
3104
|
const commonHtmlInput = getTextFieldSlotProps(commonTextFieldProps.slotProps).htmlInput;
|
|
3095
|
-
return /* @__PURE__ */
|
|
3105
|
+
return /* @__PURE__ */ jsx(TextField, {
|
|
3096
3106
|
...commonTextFieldProps,
|
|
3097
3107
|
disabled: params.disabled,
|
|
3098
3108
|
fullWidth: params.fullWidth,
|
|
@@ -3114,7 +3124,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
3114
3124
|
});
|
|
3115
3125
|
},
|
|
3116
3126
|
value: autocompleteValue
|
|
3117
|
-
}) : /* @__PURE__ */
|
|
3127
|
+
}) : /* @__PURE__ */ jsx(TextField, {
|
|
3118
3128
|
select: isSelectFilter || isMultiSelectFilter,
|
|
3119
3129
|
...commonTextFieldProps,
|
|
3120
3130
|
onChange: handleTextFieldChange,
|
|
@@ -3129,10 +3139,10 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
3129
3139
|
displayEmpty: true,
|
|
3130
3140
|
MenuProps: { disableScrollLock: true },
|
|
3131
3141
|
multiple: isMultiSelectFilter,
|
|
3132
|
-
renderValue: isMultiSelectFilter ? (selected) => !Array.isArray(selected) || selected?.length === 0 ? /* @__PURE__ */
|
|
3142
|
+
renderValue: isMultiSelectFilter ? (selected) => !Array.isArray(selected) || selected?.length === 0 ? /* @__PURE__ */ jsx(Box, {
|
|
3133
3143
|
sx: { opacity: .5 },
|
|
3134
3144
|
children: filterPlaceholder
|
|
3135
|
-
}) : /* @__PURE__ */
|
|
3145
|
+
}) : /* @__PURE__ */ jsx(Box, {
|
|
3136
3146
|
sx: {
|
|
3137
3147
|
display: "flex",
|
|
3138
3148
|
flexWrap: "wrap",
|
|
@@ -3140,25 +3150,25 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
3140
3150
|
},
|
|
3141
3151
|
children: selected.map((value) => {
|
|
3142
3152
|
const selectedValue = dropdownOptions?.find((option) => getValueAndLabel(option).value === value);
|
|
3143
|
-
return /* @__PURE__ */
|
|
3153
|
+
return /* @__PURE__ */ jsx(Chip, { label: getValueAndLabel(selectedValue).label }, value);
|
|
3144
3154
|
})
|
|
3145
3155
|
}) : void 0,
|
|
3146
3156
|
...commonTextFieldProps.slotProps?.select
|
|
3147
3157
|
}
|
|
3148
3158
|
},
|
|
3149
3159
|
value: isMultiSelectFilter ? Array.isArray(filterValue) ? filterValue : [] : filterValue,
|
|
3150
|
-
children: (isSelectFilter || isMultiSelectFilter) && [/* @__PURE__ */
|
|
3160
|
+
children: (isSelectFilter || isMultiSelectFilter) && [/* @__PURE__ */ jsx(MenuItem, {
|
|
3151
3161
|
disabled: true,
|
|
3152
3162
|
divider: true,
|
|
3153
3163
|
hidden: true,
|
|
3154
3164
|
value: "",
|
|
3155
|
-
children: /* @__PURE__ */
|
|
3165
|
+
children: /* @__PURE__ */ jsx(Box, {
|
|
3156
3166
|
sx: { opacity: .5 },
|
|
3157
3167
|
children: filterPlaceholder
|
|
3158
3168
|
})
|
|
3159
3169
|
}, "p"), ...[textFieldProps.children ?? dropdownOptions?.map((option, index) => {
|
|
3160
3170
|
const { label, value } = getValueAndLabel(option);
|
|
3161
|
-
return /* @__PURE__ */
|
|
3171
|
+
return /* @__PURE__ */ jsxs(MenuItem, {
|
|
3162
3172
|
sx: {
|
|
3163
3173
|
alignItems: "center",
|
|
3164
3174
|
display: "flex",
|
|
@@ -3167,7 +3177,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
3167
3177
|
},
|
|
3168
3178
|
value,
|
|
3169
3179
|
children: [
|
|
3170
|
-
isMultiSelectFilter && /* @__PURE__ */
|
|
3180
|
+
isMultiSelectFilter && /* @__PURE__ */ jsx(Checkbox, {
|
|
3171
3181
|
checked: (column.getFilterValue() ?? []).includes(value),
|
|
3172
3182
|
sx: { mr: "0.5rem" }
|
|
3173
3183
|
}),
|
|
@@ -3177,7 +3187,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
3177
3187
|
]
|
|
3178
3188
|
}, `${index}-${value}`);
|
|
3179
3189
|
})]]
|
|
3180
|
-
}), /* @__PURE__ */
|
|
3190
|
+
}), /* @__PURE__ */ jsx(MRT_FilterOptionMenu, {
|
|
3181
3191
|
anchorEl,
|
|
3182
3192
|
header,
|
|
3183
3193
|
setAnchorEl,
|
|
@@ -3188,7 +3198,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, ...rest }) => {
|
|
|
3188
3198
|
//#endregion
|
|
3189
3199
|
//#region src/components/inputs/MRT_FilterRangeFields.tsx
|
|
3190
3200
|
const MRT_FilterRangeFields = ({ header, table, ...rest }) => {
|
|
3191
|
-
return /* @__PURE__ */
|
|
3201
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
3192
3202
|
...rest,
|
|
3193
3203
|
sx: (theme) => ({
|
|
3194
3204
|
display: "grid",
|
|
@@ -3196,7 +3206,7 @@ const MRT_FilterRangeFields = ({ header, table, ...rest }) => {
|
|
|
3196
3206
|
gridTemplateColumns: "1fr 1fr",
|
|
3197
3207
|
...parseFromValuesOrFunc(rest?.sx, theme)
|
|
3198
3208
|
}),
|
|
3199
|
-
children: [0, 1].map((rangeFilterIndex) => /* @__PURE__ */
|
|
3209
|
+
children: [0, 1].map((rangeFilterIndex) => /* @__PURE__ */ jsx(MRT_FilterTextField, {
|
|
3200
3210
|
header,
|
|
3201
3211
|
rangeFilterIndex,
|
|
3202
3212
|
table
|
|
@@ -3209,7 +3219,10 @@ const MRT_FilterRangeSlider = ({ header, table, ...rest }) => {
|
|
|
3209
3219
|
const { options: { enableColumnFilterModes, localization, muiFilterSliderProps }, refs: { filterInputRefs } } = table;
|
|
3210
3220
|
const { column } = header;
|
|
3211
3221
|
const { columnDef } = column;
|
|
3212
|
-
const currentFilterOption =
|
|
3222
|
+
const { currentFilterOption } = getColumnFilterInfo({
|
|
3223
|
+
header,
|
|
3224
|
+
table
|
|
3225
|
+
});
|
|
3213
3226
|
const showChangeModeButton = enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
|
|
3214
3227
|
const sliderProps = {
|
|
3215
3228
|
...parseFromValuesOrFunc(muiFilterSliderProps, {
|
|
@@ -3227,13 +3240,13 @@ const MRT_FilterRangeSlider = ({ header, table, ...rest }) => {
|
|
|
3227
3240
|
if (Array.isArray(max)) max = max[0];
|
|
3228
3241
|
if (min === null) min = 0;
|
|
3229
3242
|
if (max === null) max = 1;
|
|
3230
|
-
const [filterValues, setFilterValues] =
|
|
3243
|
+
const [filterValues, setFilterValues] = useState([min, max]);
|
|
3231
3244
|
const columnFilterValue = column.getFilterValue();
|
|
3232
|
-
const isMounted =
|
|
3245
|
+
const isMounted = useRef(false);
|
|
3233
3246
|
const handleKeyDown = (event) => {
|
|
3234
3247
|
if (event.key === "ArrowLeft" || event.key === "ArrowRight") event.stopPropagation();
|
|
3235
3248
|
};
|
|
3236
|
-
|
|
3249
|
+
useEffect(() => {
|
|
3237
3250
|
if (isMounted.current) {
|
|
3238
3251
|
if (columnFilterValue === void 0) setFilterValues([min, max]);
|
|
3239
3252
|
else if (Array.isArray(columnFilterValue)) setFilterValues(columnFilterValue);
|
|
@@ -3244,7 +3257,7 @@ const MRT_FilterRangeSlider = ({ header, table, ...rest }) => {
|
|
|
3244
3257
|
min,
|
|
3245
3258
|
max
|
|
3246
3259
|
]);
|
|
3247
|
-
return /* @__PURE__ */
|
|
3260
|
+
return /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(Slider, {
|
|
3248
3261
|
disableSwap: true,
|
|
3249
3262
|
max,
|
|
3250
3263
|
min,
|
|
@@ -3252,8 +3265,10 @@ const MRT_FilterRangeSlider = ({ header, table, ...rest }) => {
|
|
|
3252
3265
|
setFilterValues(values);
|
|
3253
3266
|
},
|
|
3254
3267
|
onChangeCommitted: (_event, value) => {
|
|
3255
|
-
if (Array.isArray(value))
|
|
3256
|
-
|
|
3268
|
+
if (Array.isArray(value)) {
|
|
3269
|
+
if (value[0] <= min && value[1] >= max) column.setFilterValue(void 0);
|
|
3270
|
+
else column.setFilterValue(value);
|
|
3271
|
+
}
|
|
3257
3272
|
},
|
|
3258
3273
|
onKeyDown: handleKeyDown,
|
|
3259
3274
|
value: filterValues,
|
|
@@ -3273,7 +3288,7 @@ const MRT_FilterRangeSlider = ({ header, table, ...rest }) => {
|
|
|
3273
3288
|
width: "calc(100% - 8px)",
|
|
3274
3289
|
...parseFromValuesOrFunc(sliderProps?.sx, theme)
|
|
3275
3290
|
})
|
|
3276
|
-
}), showChangeModeButton ? /* @__PURE__ */
|
|
3291
|
+
}), showChangeModeButton ? /* @__PURE__ */ jsx(FormHelperText, {
|
|
3277
3292
|
sx: {
|
|
3278
3293
|
fontSize: "0.75rem",
|
|
3279
3294
|
lineHeight: "0.8rem",
|
|
@@ -3286,29 +3301,29 @@ const MRT_FilterRangeSlider = ({ header, table, ...rest }) => {
|
|
|
3286
3301
|
//#endregion
|
|
3287
3302
|
//#region src/components/head/MRT_TableHeadCellFilterContainer.tsx
|
|
3288
3303
|
const MRT_TableHeadCellFilterContainer = ({ header, table, ...rest }) => {
|
|
3289
|
-
const {
|
|
3290
|
-
const { showColumnFilters } =
|
|
3304
|
+
const { options: { columnFilterDisplayMode } } = table;
|
|
3305
|
+
const { showColumnFilters } = table.state;
|
|
3291
3306
|
const { column } = header;
|
|
3292
3307
|
const { columnDef } = column;
|
|
3293
3308
|
const { isRangeFilter } = getColumnFilterInfo({
|
|
3294
3309
|
header,
|
|
3295
3310
|
table
|
|
3296
3311
|
});
|
|
3297
|
-
return /* @__PURE__ */
|
|
3312
|
+
return /* @__PURE__ */ jsx(Collapse, {
|
|
3298
3313
|
in: showColumnFilters || columnFilterDisplayMode === "popover",
|
|
3299
3314
|
mountOnEnter: true,
|
|
3300
3315
|
unmountOnExit: true,
|
|
3301
3316
|
...rest,
|
|
3302
|
-
children: columnDef.filterVariant === "checkbox" ? /* @__PURE__ */
|
|
3317
|
+
children: columnDef.filterVariant === "checkbox" ? /* @__PURE__ */ jsx(MRT_FilterCheckbox, {
|
|
3303
3318
|
column,
|
|
3304
3319
|
table
|
|
3305
|
-
}) : columnDef.filterVariant === "range-slider" ? /* @__PURE__ */
|
|
3320
|
+
}) : columnDef.filterVariant === "range-slider" ? /* @__PURE__ */ jsx(MRT_FilterRangeSlider, {
|
|
3306
3321
|
header,
|
|
3307
3322
|
table
|
|
3308
|
-
}) : isRangeFilter ? /* @__PURE__ */
|
|
3323
|
+
}) : isRangeFilter ? /* @__PURE__ */ jsx(MRT_FilterRangeFields, {
|
|
3309
3324
|
header,
|
|
3310
3325
|
table
|
|
3311
|
-
}) : /* @__PURE__ */
|
|
3326
|
+
}) : /* @__PURE__ */ jsx(MRT_FilterTextField, {
|
|
3312
3327
|
header,
|
|
3313
3328
|
table
|
|
3314
3329
|
})
|
|
@@ -3321,7 +3336,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, ...rest }) => {
|
|
|
3321
3336
|
const { column } = header;
|
|
3322
3337
|
const { columnDef } = column;
|
|
3323
3338
|
const filterValue = column.getFilterValue();
|
|
3324
|
-
const [anchorEl, setAnchorEl] =
|
|
3339
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
3325
3340
|
const { currentFilterOption, isMultiSelectFilter, isRangeFilter, isSelectFilter } = getColumnFilterInfo({
|
|
3326
3341
|
header,
|
|
3327
3342
|
table
|
|
@@ -3333,16 +3348,16 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, ...rest }) => {
|
|
|
3333
3348
|
const getSelectLabel = (index) => getValueAndLabel(dropdownOptions?.find((option) => getValueAndLabel(option).value === (index !== void 0 ? filterValue[index] : filterValue))).label;
|
|
3334
3349
|
const isFilterActive = Array.isArray(filterValue) && filterValue.some(Boolean) || !!filterValue && !Array.isArray(filterValue);
|
|
3335
3350
|
const filterTooltip = columnFilterDisplayMode === "popover" && !isFilterActive ? localization.filterByColumn?.replace("{column}", String(columnDef.header)) : localization.filteringByColumn.replace("{column}", String(columnDef.header)).replace("{filterType}", currentFilterOption ? localization[`filter${currentFilterOption.charAt(0).toUpperCase() + currentFilterOption.slice(1)}`] : "").replace("{filterValue}", `"${Array.isArray(filterValue) ? filterValue.map((value, index) => isMultiSelectFilter ? getSelectLabel(index) : value).join(`" ${isRangeFilter ? localization.and : localization.or} "`) : isSelectFilter ? getSelectLabel() : filterValue}"`).replace("\" \"", "");
|
|
3336
|
-
return /* @__PURE__ */
|
|
3351
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Grow, {
|
|
3337
3352
|
in: columnFilterDisplayMode === "popover" || !!filterValue && !isRangeFilter || isRangeFilter && (!!filterValue?.[0] || !!filterValue?.[1]),
|
|
3338
3353
|
unmountOnExit: true,
|
|
3339
|
-
children: /* @__PURE__ */
|
|
3354
|
+
children: /* @__PURE__ */ jsx(Box, {
|
|
3340
3355
|
component: "span",
|
|
3341
3356
|
sx: { flex: "0 0" },
|
|
3342
|
-
children: /* @__PURE__ */
|
|
3357
|
+
children: /* @__PURE__ */ jsx(Tooltip, {
|
|
3343
3358
|
placement: "top",
|
|
3344
3359
|
title: filterTooltip,
|
|
3345
|
-
children: /* @__PURE__ */
|
|
3360
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
3346
3361
|
disableRipple: true,
|
|
3347
3362
|
onClick: (event) => {
|
|
3348
3363
|
if (columnFilterDisplayMode === "popover") setAnchorEl(event.currentTarget);
|
|
@@ -3365,11 +3380,11 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, ...rest }) => {
|
|
|
3365
3380
|
width: "16px",
|
|
3366
3381
|
...parseFromValuesOrFunc(rest?.sx, theme)
|
|
3367
3382
|
}),
|
|
3368
|
-
children: /* @__PURE__ */
|
|
3383
|
+
children: /* @__PURE__ */ jsx(FilterAltIcon, {})
|
|
3369
3384
|
})
|
|
3370
3385
|
})
|
|
3371
3386
|
})
|
|
3372
|
-
}), columnFilterDisplayMode === "popover" && /* @__PURE__ */
|
|
3387
|
+
}), columnFilterDisplayMode === "popover" && /* @__PURE__ */ jsx(Popover, {
|
|
3373
3388
|
anchorEl,
|
|
3374
3389
|
anchorOrigin: {
|
|
3375
3390
|
horizontal: "center",
|
|
@@ -3388,9 +3403,9 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, ...rest }) => {
|
|
|
3388
3403
|
horizontal: "center",
|
|
3389
3404
|
vertical: "bottom"
|
|
3390
3405
|
},
|
|
3391
|
-
children: /* @__PURE__ */
|
|
3406
|
+
children: /* @__PURE__ */ jsx(Box, {
|
|
3392
3407
|
sx: { p: "1rem" },
|
|
3393
|
-
children: /* @__PURE__ */
|
|
3408
|
+
children: /* @__PURE__ */ jsx(MRT_TableHeadCellFilterContainer, {
|
|
3394
3409
|
header,
|
|
3395
3410
|
table
|
|
3396
3411
|
})
|
|
@@ -3400,9 +3415,9 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, ...rest }) => {
|
|
|
3400
3415
|
//#endregion
|
|
3401
3416
|
//#region src/components/head/MRT_TableHeadCellGrabHandle.tsx
|
|
3402
3417
|
const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, ...rest }) => {
|
|
3403
|
-
const {
|
|
3418
|
+
const { options: { enableColumnOrdering, muiColumnDragHandleProps }, setColumnOrder, setColumnPinning, setDraggingColumn, setHoveredColumn } = table;
|
|
3404
3419
|
const { columnDef } = column;
|
|
3405
|
-
const { columnOrder, draggingColumn, hoveredColumn } =
|
|
3420
|
+
const { columnOrder, draggingColumn, hoveredColumn } = table.state;
|
|
3406
3421
|
const iconButtonProps = {
|
|
3407
3422
|
...parseFromValuesOrFunc(muiColumnDragHandleProps, {
|
|
3408
3423
|
column,
|
|
@@ -3429,15 +3444,15 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, ...rest
|
|
|
3429
3444
|
else if (enableColumnOrdering && hoveredColumn && hoveredColumn?.id !== draggingColumn?.id) {
|
|
3430
3445
|
const reorderedColumns = reorderColumn(column, hoveredColumn, columnOrder);
|
|
3431
3446
|
setColumnOrder(reorderedColumns);
|
|
3432
|
-
setColumnPinning(({
|
|
3433
|
-
|
|
3434
|
-
|
|
3447
|
+
setColumnPinning(({ end = [], start = [] }) => ({
|
|
3448
|
+
end: reorderedColumns.filter((header) => end.includes(header)),
|
|
3449
|
+
start: reorderedColumns.filter((header) => start.includes(header))
|
|
3435
3450
|
}));
|
|
3436
3451
|
}
|
|
3437
3452
|
setDraggingColumn(null);
|
|
3438
3453
|
setHoveredColumn(null);
|
|
3439
3454
|
};
|
|
3440
|
-
return /* @__PURE__ */
|
|
3455
|
+
return /* @__PURE__ */ jsx(MRT_GrabHandleButton, {
|
|
3441
3456
|
...iconButtonProps,
|
|
3442
3457
|
onDragEnd: handleDragEnd,
|
|
3443
3458
|
onDragStart: handleDragStart,
|
|
@@ -3447,16 +3462,16 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, ...rest
|
|
|
3447
3462
|
//#endregion
|
|
3448
3463
|
//#region src/components/head/MRT_TableHeadCellResizeHandle.tsx
|
|
3449
3464
|
const MRT_TableHeadCellResizeHandle = ({ header, table, ...rest }) => {
|
|
3450
|
-
const {
|
|
3451
|
-
const { density } =
|
|
3465
|
+
const { options: { columnResizeDirection, columnResizeMode }, setColumnResizing } = table;
|
|
3466
|
+
const { density } = table.state;
|
|
3452
3467
|
const { column } = header;
|
|
3453
3468
|
const handler = header.getResizeHandler();
|
|
3454
3469
|
const mx = density === "compact" ? "-8px" : density === "comfortable" ? "-16px" : "-24px";
|
|
3455
3470
|
const lr = column.columnDef.columnDefType === "display" ? "4px" : "0";
|
|
3456
|
-
return /* @__PURE__ */
|
|
3471
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
3457
3472
|
className: "Mui-TableHeadCell-ResizeHandle-Wrapper",
|
|
3458
3473
|
onDoubleClick: () => {
|
|
3459
|
-
|
|
3474
|
+
setColumnResizing((old) => ({
|
|
3460
3475
|
...old,
|
|
3461
3476
|
isResizingColumn: false
|
|
3462
3477
|
}));
|
|
@@ -3464,7 +3479,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table, ...rest }) => {
|
|
|
3464
3479
|
},
|
|
3465
3480
|
onMouseDown: handler,
|
|
3466
3481
|
onTouchStart: handler,
|
|
3467
|
-
style: { transform: column.getIsResizing() && columnResizeMode === "onEnd" ? `translateX(${(columnResizeDirection === "rtl" ? -1 : 1) * (
|
|
3482
|
+
style: { transform: column.getIsResizing() && columnResizeMode === "onEnd" ? `translateX(${(columnResizeDirection === "rtl" ? -1 : 1) * (table.state.columnResizing.deltaOffset ?? 0)}px)` : void 0 },
|
|
3468
3483
|
sx: (theme) => ({
|
|
3469
3484
|
"&:active > hr": {
|
|
3470
3485
|
backgroundColor: theme.palette.info.main,
|
|
@@ -3478,7 +3493,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table, ...rest }) => {
|
|
|
3478
3493
|
px: "4px",
|
|
3479
3494
|
right: columnResizeDirection === "ltr" ? lr : void 0
|
|
3480
3495
|
}),
|
|
3481
|
-
children: /* @__PURE__ */
|
|
3496
|
+
children: /* @__PURE__ */ jsx(Divider, {
|
|
3482
3497
|
className: "Mui-TableHeadCell-ResizeHandle-Divider",
|
|
3483
3498
|
flexItem: true,
|
|
3484
3499
|
orientation: "vertical",
|
|
@@ -3499,24 +3514,24 @@ const MRT_TableHeadCellResizeHandle = ({ header, table, ...rest }) => {
|
|
|
3499
3514
|
//#endregion
|
|
3500
3515
|
//#region src/components/head/MRT_TableHeadCellSortLabel.tsx
|
|
3501
3516
|
const MRT_TableHeadCellSortLabel = ({ header, table, ...rest }) => {
|
|
3502
|
-
const {
|
|
3517
|
+
const { options: { icons: { ArrowDownwardIcon, SyncAltIcon }, localization } } = table;
|
|
3503
3518
|
const { column } = header;
|
|
3504
3519
|
const { columnDef } = column;
|
|
3505
|
-
const { isLoading, showSkeletons, sorting } =
|
|
3520
|
+
const { isLoading, showSkeletons, sorting } = table.state;
|
|
3506
3521
|
const isSorted = !!column.getIsSorted();
|
|
3507
3522
|
const sortTooltip = isLoading || showSkeletons ? "" : column.getIsSorted() ? column.getIsSorted() === "desc" ? localization.sortedByColumnDesc.replace("{column}", columnDef.header) : localization.sortedByColumnAsc.replace("{column}", columnDef.header) : column.getNextSortingOrder() === "desc" ? localization.sortByColumnDesc.replace("{column}", columnDef.header) : localization.sortByColumnAsc.replace("{column}", columnDef.header);
|
|
3508
3523
|
const direction = isSorted ? column.getIsSorted() : void 0;
|
|
3509
|
-
return /* @__PURE__ */
|
|
3524
|
+
return /* @__PURE__ */ jsx(Tooltip, {
|
|
3510
3525
|
placement: "top",
|
|
3511
3526
|
title: sortTooltip,
|
|
3512
|
-
children: /* @__PURE__ */
|
|
3527
|
+
children: /* @__PURE__ */ jsx(Badge, {
|
|
3513
3528
|
badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0,
|
|
3514
3529
|
overlap: "circular",
|
|
3515
|
-
children: /* @__PURE__ */
|
|
3530
|
+
children: /* @__PURE__ */ jsx(TableSortLabel, {
|
|
3516
3531
|
active: true,
|
|
3517
3532
|
"aria-label": sortTooltip,
|
|
3518
3533
|
direction,
|
|
3519
|
-
IconComponent: !isSorted ? (props) => /* @__PURE__ */
|
|
3534
|
+
IconComponent: !isSorted ? (props) => /* @__PURE__ */ jsx(SyncAltIcon, {
|
|
3520
3535
|
...props,
|
|
3521
3536
|
direction,
|
|
3522
3537
|
style: { transform: "rotate(-90deg) scaleX(0.9) translateX(-1px)" }
|
|
@@ -3541,9 +3556,9 @@ const MRT_TableHeadCellSortLabel = ({ header, table, ...rest }) => {
|
|
|
3541
3556
|
//#endregion
|
|
3542
3557
|
//#region src/components/head/MRT_TableHeadCell.tsx
|
|
3543
3558
|
const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table, ...rest }) => {
|
|
3544
|
-
const theme =
|
|
3545
|
-
const {
|
|
3546
|
-
const {
|
|
3559
|
+
const theme = useTheme();
|
|
3560
|
+
const { options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableKeyboardShortcuts, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps }, refs: { tableHeadCellRefs }, setHoveredColumn } = table;
|
|
3561
|
+
const { columnResizing, density, draggingColumn, grouping, hoveredColumn, showColumnFilters } = table.state;
|
|
3547
3562
|
const { column } = header;
|
|
3548
3563
|
const { columnDef } = column;
|
|
3549
3564
|
const { columnDefType } = columnDef;
|
|
@@ -3561,15 +3576,15 @@ const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table
|
|
|
3561
3576
|
const isColumnPinned = enableColumnPinning && columnDef.columnDefType !== "group" && column.getIsPinned();
|
|
3562
3577
|
const showColumnActions = (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false;
|
|
3563
3578
|
const showDragHandle = enableColumnDragging !== false && columnDef.enableColumnDragging !== false && (enableColumnDragging || enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false && !grouping.includes(column.id));
|
|
3564
|
-
const headerPL =
|
|
3579
|
+
const headerPL = useMemo(() => {
|
|
3565
3580
|
let pl = 0;
|
|
3566
3581
|
if (column.getCanSort()) pl += 1;
|
|
3567
3582
|
if (showColumnActions) pl += 1.75;
|
|
3568
3583
|
if (showDragHandle) pl += 1.5;
|
|
3569
3584
|
return pl;
|
|
3570
3585
|
}, [showColumnActions, showDragHandle]);
|
|
3571
|
-
const draggingBorders =
|
|
3572
|
-
const showResizeBorder =
|
|
3586
|
+
const draggingBorders = useMemo(() => {
|
|
3587
|
+
const showResizeBorder = columnResizing.isResizingColumn === column.id && columnResizeMode === "onChange" && !header.subHeaders.length;
|
|
3573
3588
|
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;
|
|
3574
3589
|
if (showResizeBorder) return columnResizeDirection === "ltr" ? { borderRight: borderStyle } : { borderLeft: borderStyle };
|
|
3575
3590
|
return borderStyle ? {
|
|
@@ -3580,7 +3595,7 @@ const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table
|
|
|
3580
3595
|
}, [
|
|
3581
3596
|
draggingColumn,
|
|
3582
3597
|
hoveredColumn,
|
|
3583
|
-
|
|
3598
|
+
columnResizing.isResizingColumn
|
|
3584
3599
|
]);
|
|
3585
3600
|
const handleDragEnter = (_e) => {
|
|
3586
3601
|
if (enableGrouping && hoveredColumn?.id === "drop-zone") setHoveredColumn(null);
|
|
@@ -3598,7 +3613,9 @@ const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table
|
|
|
3598
3613
|
table
|
|
3599
3614
|
});
|
|
3600
3615
|
};
|
|
3601
|
-
const
|
|
3616
|
+
const tableHeadCellRef = useRef(null);
|
|
3617
|
+
const handleRef = useCallback((node) => {
|
|
3618
|
+
tableHeadCellRef.current = node;
|
|
3602
3619
|
if (node) {
|
|
3603
3620
|
if (tableHeadCellRefs.current) tableHeadCellRefs.current[column.id] = node;
|
|
3604
3621
|
if (columnDefType !== "group") columnVirtualizer?.measureElement?.(node);
|
|
@@ -3614,7 +3631,7 @@ const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table
|
|
|
3614
3631
|
header,
|
|
3615
3632
|
table
|
|
3616
3633
|
}) ?? columnDef.header;
|
|
3617
|
-
return /* @__PURE__ */
|
|
3634
|
+
return /* @__PURE__ */ jsxs(TableCell, {
|
|
3618
3635
|
align: columnDefType === "group" ? "center" : theme.direction === "rtl" ? "right" : "left",
|
|
3619
3636
|
"aria-sort": column.getIsSorted() ? column.getIsSorted() === "asc" ? "ascending" : "descending" : "none",
|
|
3620
3637
|
colSpan: header.colSpan,
|
|
@@ -3647,7 +3664,7 @@ const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table
|
|
|
3647
3664
|
}),
|
|
3648
3665
|
...draggingBorders
|
|
3649
3666
|
}),
|
|
3650
|
-
children: [header.isPlaceholder ? null : tableCellProps.children ?? /* @__PURE__ */
|
|
3667
|
+
children: [header.isPlaceholder ? null : tableCellProps.children ?? /* @__PURE__ */ jsxs(Box, {
|
|
3651
3668
|
className: "Mui-TableHeadCell-Content",
|
|
3652
3669
|
sx: {
|
|
3653
3670
|
alignItems: "center",
|
|
@@ -3658,7 +3675,7 @@ const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table
|
|
|
3658
3675
|
width: "100%"
|
|
3659
3676
|
},
|
|
3660
3677
|
children: [
|
|
3661
|
-
/* @__PURE__ */
|
|
3678
|
+
/* @__PURE__ */ jsxs(Box, {
|
|
3662
3679
|
className: "Mui-TableHeadCell-Content-Labels",
|
|
3663
3680
|
onClick: column.getToggleSortingHandler(),
|
|
3664
3681
|
sx: {
|
|
@@ -3670,7 +3687,7 @@ const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table
|
|
|
3670
3687
|
pl: tableCellProps?.align === "center" ? `${headerPL}rem` : void 0
|
|
3671
3688
|
},
|
|
3672
3689
|
children: [
|
|
3673
|
-
/* @__PURE__ */
|
|
3690
|
+
/* @__PURE__ */ jsx(Box, {
|
|
3674
3691
|
className: "Mui-TableHeadCell-Content-Wrapper",
|
|
3675
3692
|
sx: {
|
|
3676
3693
|
"&:hover": { textOverflow: "clip" },
|
|
@@ -3681,34 +3698,34 @@ const MRT_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table
|
|
|
3681
3698
|
},
|
|
3682
3699
|
children: HeaderElement
|
|
3683
3700
|
}),
|
|
3684
|
-
column.getCanFilter() && /* @__PURE__ */
|
|
3701
|
+
column.getCanFilter() && /* @__PURE__ */ jsx(MRT_TableHeadCellFilterLabel, {
|
|
3685
3702
|
header,
|
|
3686
3703
|
table
|
|
3687
3704
|
}),
|
|
3688
|
-
column.getCanSort() && /* @__PURE__ */
|
|
3705
|
+
column.getCanSort() && /* @__PURE__ */ jsx(MRT_TableHeadCellSortLabel, {
|
|
3689
3706
|
header,
|
|
3690
3707
|
table
|
|
3691
3708
|
})
|
|
3692
3709
|
]
|
|
3693
3710
|
}),
|
|
3694
|
-
columnDefType !== "group" && /* @__PURE__ */
|
|
3711
|
+
columnDefType !== "group" && /* @__PURE__ */ jsxs(Box, {
|
|
3695
3712
|
className: "Mui-TableHeadCell-Content-Actions",
|
|
3696
3713
|
sx: { whiteSpace: "nowrap" },
|
|
3697
|
-
children: [showDragHandle && /* @__PURE__ */
|
|
3714
|
+
children: [showDragHandle && /* @__PURE__ */ jsx(MRT_TableHeadCellGrabHandle, {
|
|
3698
3715
|
column,
|
|
3699
3716
|
table,
|
|
3700
|
-
tableHeadCellRef
|
|
3701
|
-
}), showColumnActions && /* @__PURE__ */
|
|
3717
|
+
tableHeadCellRef
|
|
3718
|
+
}), showColumnActions && /* @__PURE__ */ jsx(MRT_TableHeadCellColumnActionsButton, {
|
|
3702
3719
|
header,
|
|
3703
3720
|
table
|
|
3704
3721
|
})]
|
|
3705
3722
|
}),
|
|
3706
|
-
column.getCanResize() && /* @__PURE__ */
|
|
3723
|
+
column.getCanResize() && /* @__PURE__ */ jsx(MRT_TableHeadCellResizeHandle, {
|
|
3707
3724
|
header,
|
|
3708
3725
|
table
|
|
3709
3726
|
})
|
|
3710
3727
|
]
|
|
3711
|
-
}), columnFilterDisplayMode === "subheader" && column.getCanFilter() && /* @__PURE__ */
|
|
3728
|
+
}), columnFilterDisplayMode === "subheader" && column.getCanFilter() && /* @__PURE__ */ jsx(MRT_TableHeadCellFilterContainer, {
|
|
3712
3729
|
header,
|
|
3713
3730
|
table
|
|
3714
3731
|
})]
|
|
@@ -3726,18 +3743,18 @@ const MRT_TableHeadRow = ({ columnVirtualizer, headerGroup, table, ...rest }) =>
|
|
|
3726
3743
|
}),
|
|
3727
3744
|
...rest
|
|
3728
3745
|
};
|
|
3729
|
-
return /* @__PURE__ */
|
|
3746
|
+
return /* @__PURE__ */ jsxs(TableRow, {
|
|
3730
3747
|
...tableRowProps,
|
|
3731
3748
|
sx: (theme) => ({
|
|
3732
3749
|
backgroundColor: baseBackgroundColor,
|
|
3733
|
-
boxShadow: `4px 0 8px ${
|
|
3750
|
+
boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, .1)}`,
|
|
3734
3751
|
display: layoutMode?.startsWith("grid") ? "flex" : void 0,
|
|
3735
3752
|
position: enableStickyHeader && layoutMode === "semantic" ? "sticky" : "relative",
|
|
3736
3753
|
top: 0,
|
|
3737
3754
|
...parseFromValuesOrFunc(tableRowProps?.sx, theme)
|
|
3738
3755
|
}),
|
|
3739
3756
|
children: [
|
|
3740
|
-
virtualPaddingLeft ? /* @__PURE__ */
|
|
3757
|
+
virtualPaddingLeft ? /* @__PURE__ */ jsx("th", { style: {
|
|
3741
3758
|
display: "flex",
|
|
3742
3759
|
width: virtualPaddingLeft
|
|
3743
3760
|
} }) : null,
|
|
@@ -3747,14 +3764,14 @@ const MRT_TableHeadRow = ({ columnVirtualizer, headerGroup, table, ...rest }) =>
|
|
|
3747
3764
|
staticColumnIndex = headerOrVirtualHeader.index;
|
|
3748
3765
|
header = headerGroup.headers[staticColumnIndex];
|
|
3749
3766
|
}
|
|
3750
|
-
return header ? /* @__PURE__ */
|
|
3767
|
+
return header ? /* @__PURE__ */ jsx(MRT_TableHeadCell, {
|
|
3751
3768
|
columnVirtualizer,
|
|
3752
3769
|
header,
|
|
3753
3770
|
staticColumnIndex,
|
|
3754
3771
|
table
|
|
3755
3772
|
}, header.id) : null;
|
|
3756
3773
|
}),
|
|
3757
|
-
virtualPaddingRight ? /* @__PURE__ */
|
|
3774
|
+
virtualPaddingRight ? /* @__PURE__ */ jsx("th", { style: {
|
|
3758
3775
|
display: "flex",
|
|
3759
3776
|
width: virtualPaddingRight
|
|
3760
3777
|
} }) : null
|
|
@@ -3764,14 +3781,14 @@ const MRT_TableHeadRow = ({ columnVirtualizer, headerGroup, table, ...rest }) =>
|
|
|
3764
3781
|
//#endregion
|
|
3765
3782
|
//#region src/components/head/MRT_TableHead.tsx
|
|
3766
3783
|
const MRT_TableHead = ({ columnVirtualizer, table, ...rest }) => {
|
|
3767
|
-
const {
|
|
3768
|
-
const { isFullScreen, showAlertBanner } =
|
|
3784
|
+
const { options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner }, refs: { tableHeadRef } } = table;
|
|
3785
|
+
const { isFullScreen, showAlertBanner } = table.state;
|
|
3769
3786
|
const tableHeadProps = {
|
|
3770
3787
|
...parseFromValuesOrFunc(muiTableHeadProps, { table }),
|
|
3771
3788
|
...rest
|
|
3772
3789
|
};
|
|
3773
3790
|
const stickyHeader = enableStickyHeader || isFullScreen;
|
|
3774
|
-
return /* @__PURE__ */
|
|
3791
|
+
return /* @__PURE__ */ jsx(TableHead, {
|
|
3775
3792
|
...tableHeadProps,
|
|
3776
3793
|
ref: (ref) => {
|
|
3777
3794
|
tableHeadRef.current = ref;
|
|
@@ -3785,17 +3802,17 @@ const MRT_TableHead = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
3785
3802
|
zIndex: stickyHeader ? 2 : void 0,
|
|
3786
3803
|
...parseFromValuesOrFunc(tableHeadProps?.sx, theme)
|
|
3787
3804
|
}),
|
|
3788
|
-
children: positionToolbarAlertBanner === "head-overlay" && (showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? /* @__PURE__ */
|
|
3805
|
+
children: positionToolbarAlertBanner === "head-overlay" && (showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? /* @__PURE__ */ jsx("tr", {
|
|
3789
3806
|
style: { display: layoutMode?.startsWith("grid") ? "grid" : void 0 },
|
|
3790
|
-
children: /* @__PURE__ */
|
|
3807
|
+
children: /* @__PURE__ */ jsx("th", {
|
|
3791
3808
|
colSpan: table.getVisibleLeafColumns().length,
|
|
3792
3809
|
style: {
|
|
3793
3810
|
display: layoutMode?.startsWith("grid") ? "grid" : void 0,
|
|
3794
3811
|
padding: 0
|
|
3795
3812
|
},
|
|
3796
|
-
children: /* @__PURE__ */
|
|
3813
|
+
children: /* @__PURE__ */ jsx(MRT_ToolbarAlertBanner, { table })
|
|
3797
3814
|
})
|
|
3798
|
-
}) : table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */
|
|
3815
|
+
}) : table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(MRT_TableHeadRow, {
|
|
3799
3816
|
columnVirtualizer,
|
|
3800
3817
|
headerGroup,
|
|
3801
3818
|
table
|
|
@@ -3805,16 +3822,16 @@ const MRT_TableHead = ({ columnVirtualizer, table, ...rest }) => {
|
|
|
3805
3822
|
//#endregion
|
|
3806
3823
|
//#region src/components/inputs/MRT_GlobalFilterTextField.tsx
|
|
3807
3824
|
const MRT_GlobalFilterTextField = ({ table, ...rest }) => {
|
|
3808
|
-
const {
|
|
3809
|
-
const { globalFilter, showGlobalFilter } =
|
|
3825
|
+
const { options: { enableGlobalFilterModes, icons: { CloseIcon, SearchIcon }, localization, manualFiltering, muiSearchTextFieldProps }, refs: { searchInputRef }, setGlobalFilter } = table;
|
|
3826
|
+
const { globalFilter, showGlobalFilter } = table.state;
|
|
3810
3827
|
const textFieldProps = {
|
|
3811
3828
|
...parseFromValuesOrFunc(muiSearchTextFieldProps, { table }),
|
|
3812
3829
|
...rest
|
|
3813
3830
|
};
|
|
3814
|
-
const isMounted =
|
|
3815
|
-
const [anchorEl, setAnchorEl] =
|
|
3816
|
-
const [searchValue, setSearchValue] =
|
|
3817
|
-
const handleChangeDebounced =
|
|
3831
|
+
const isMounted = useRef(false);
|
|
3832
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
3833
|
+
const [searchValue, setSearchValue] = useState(globalFilter ?? "");
|
|
3834
|
+
const handleChangeDebounced = useCallback(debounce((event) => {
|
|
3818
3835
|
setGlobalFilter(event.target.value ?? void 0);
|
|
3819
3836
|
}, manualFiltering ? 500 : 250), []);
|
|
3820
3837
|
const handleChange = (event) => {
|
|
@@ -3828,18 +3845,20 @@ const MRT_GlobalFilterTextField = ({ table, ...rest }) => {
|
|
|
3828
3845
|
setSearchValue("");
|
|
3829
3846
|
setGlobalFilter(void 0);
|
|
3830
3847
|
};
|
|
3831
|
-
|
|
3832
|
-
if (isMounted.current)
|
|
3833
|
-
|
|
3848
|
+
useEffect(() => {
|
|
3849
|
+
if (isMounted.current) {
|
|
3850
|
+
if (globalFilter === void 0) handleClear();
|
|
3851
|
+
else setSearchValue(globalFilter);
|
|
3852
|
+
}
|
|
3834
3853
|
isMounted.current = true;
|
|
3835
3854
|
}, [globalFilter]);
|
|
3836
3855
|
const consumerSlots = getTextFieldSlotProps(textFieldProps.slotProps);
|
|
3837
|
-
return /* @__PURE__ */
|
|
3856
|
+
return /* @__PURE__ */ jsxs(Collapse, {
|
|
3838
3857
|
in: showGlobalFilter,
|
|
3839
3858
|
mountOnEnter: true,
|
|
3840
3859
|
orientation: "horizontal",
|
|
3841
3860
|
unmountOnExit: true,
|
|
3842
|
-
children: [/* @__PURE__ */
|
|
3861
|
+
children: [/* @__PURE__ */ jsx(TextField, {
|
|
3843
3862
|
onChange: handleChange,
|
|
3844
3863
|
placeholder: localization.search,
|
|
3845
3864
|
size: "small",
|
|
@@ -3856,24 +3875,24 @@ const MRT_GlobalFilterTextField = ({ table, ...rest }) => {
|
|
|
3856
3875
|
...consumerSlots.htmlInput
|
|
3857
3876
|
},
|
|
3858
3877
|
input: {
|
|
3859
|
-
endAdornment: /* @__PURE__ */
|
|
3878
|
+
endAdornment: /* @__PURE__ */ jsx(InputAdornment, {
|
|
3860
3879
|
position: "end",
|
|
3861
|
-
children: /* @__PURE__ */
|
|
3880
|
+
children: /* @__PURE__ */ jsx(Tooltip, {
|
|
3862
3881
|
title: localization.clearSearch ?? "",
|
|
3863
|
-
children: /* @__PURE__ */
|
|
3882
|
+
children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, {
|
|
3864
3883
|
"aria-label": localization.clearSearch,
|
|
3865
3884
|
disabled: !searchValue?.length,
|
|
3866
3885
|
onClick: handleClear,
|
|
3867
3886
|
size: "small",
|
|
3868
|
-
children: /* @__PURE__ */
|
|
3887
|
+
children: /* @__PURE__ */ jsx(CloseIcon, {})
|
|
3869
3888
|
}) })
|
|
3870
3889
|
})
|
|
3871
3890
|
}),
|
|
3872
|
-
startAdornment: enableGlobalFilterModes ? /* @__PURE__ */
|
|
3891
|
+
startAdornment: enableGlobalFilterModes ? /* @__PURE__ */ jsx(InputAdornment, {
|
|
3873
3892
|
position: "start",
|
|
3874
|
-
children: /* @__PURE__ */
|
|
3893
|
+
children: /* @__PURE__ */ jsx(Tooltip, {
|
|
3875
3894
|
title: localization.changeSearchMode,
|
|
3876
|
-
children: /* @__PURE__ */
|
|
3895
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
|
3877
3896
|
"aria-label": localization.changeSearchMode,
|
|
3878
3897
|
onClick: handleGlobalFilterMenuOpen,
|
|
3879
3898
|
size: "small",
|
|
@@ -3881,10 +3900,10 @@ const MRT_GlobalFilterTextField = ({ table, ...rest }) => {
|
|
|
3881
3900
|
height: "1.75rem",
|
|
3882
3901
|
width: "1.75rem"
|
|
3883
3902
|
},
|
|
3884
|
-
children: /* @__PURE__ */
|
|
3903
|
+
children: /* @__PURE__ */ jsx(SearchIcon, {})
|
|
3885
3904
|
})
|
|
3886
3905
|
})
|
|
3887
|
-
}) : /* @__PURE__ */
|
|
3906
|
+
}) : /* @__PURE__ */ jsx(SearchIcon, { style: { marginRight: "4px" } }),
|
|
3888
3907
|
...consumerSlots.input,
|
|
3889
3908
|
sx: {
|
|
3890
3909
|
mb: 0,
|
|
@@ -3892,7 +3911,7 @@ const MRT_GlobalFilterTextField = ({ table, ...rest }) => {
|
|
|
3892
3911
|
}
|
|
3893
3912
|
}
|
|
3894
3913
|
}
|
|
3895
|
-
}), /* @__PURE__ */
|
|
3914
|
+
}), /* @__PURE__ */ jsx(MRT_FilterOptionMenu, {
|
|
3896
3915
|
anchorEl,
|
|
3897
3916
|
onSelect: handleClear,
|
|
3898
3917
|
setAnchorEl,
|
|
@@ -3901,8 +3920,123 @@ const MRT_GlobalFilterTextField = ({ table, ...rest }) => {
|
|
|
3901
3920
|
});
|
|
3902
3921
|
};
|
|
3903
3922
|
//#endregion
|
|
3923
|
+
//#region src/fns/aggregationFns.ts
|
|
3924
|
+
const MRT_AggregationFns = { ...aggregationFns };
|
|
3925
|
+
//#endregion
|
|
3926
|
+
//#region src/fns/filterFns.ts
|
|
3927
|
+
const fuzzy = (row, columnId, filterValue, addMeta) => {
|
|
3928
|
+
const itemRank = rankItem(row.getValue(columnId), filterValue, { threshold: rankings.MATCHES });
|
|
3929
|
+
addMeta?.(itemRank);
|
|
3930
|
+
return itemRank.passed;
|
|
3931
|
+
};
|
|
3932
|
+
fuzzy.autoRemove = (val) => !val;
|
|
3933
|
+
const contains = (row, id, filterValue) => !!row.getValue(id)?.toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim());
|
|
3934
|
+
contains.autoRemove = (val) => !val;
|
|
3935
|
+
const startsWith = (row, id, filterValue) => !!row.getValue(id)?.toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim());
|
|
3936
|
+
startsWith.autoRemove = (val) => !val;
|
|
3937
|
+
const endsWith = (row, id, filterValue) => !!row.getValue(id)?.toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim());
|
|
3938
|
+
endsWith.autoRemove = (val) => !val;
|
|
3939
|
+
const equals = (row, id, filterValue) => row.getValue(id)?.toString().toLowerCase().trim() === filterValue.toString().toLowerCase().trim();
|
|
3940
|
+
equals.autoRemove = (val) => !val;
|
|
3941
|
+
const notEquals = (row, id, filterValue) => row.getValue(id)?.toString().toLowerCase().trim() !== filterValue.toString().toLowerCase().trim();
|
|
3942
|
+
notEquals.autoRemove = (val) => !val;
|
|
3943
|
+
const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +(row.getValue(id) ?? 0) > +filterValue : (row.getValue(id) ?? "")?.toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
|
|
3944
|
+
greaterThan.autoRemove = (val) => !val;
|
|
3945
|
+
const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
|
|
3946
|
+
greaterThanOrEqualTo.autoRemove = (val) => !val;
|
|
3947
|
+
const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +(row.getValue(id) ?? 0) < +filterValue : (row.getValue(id) ?? "")?.toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
|
|
3948
|
+
lessThan.autoRemove = (val) => !val;
|
|
3949
|
+
const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
|
|
3950
|
+
lessThanOrEqualTo.autoRemove = (val) => !val;
|
|
3951
|
+
const between = (row, id, filterValues) => (["", void 0].includes(filterValues[0]) || greaterThan(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ["", void 0].includes(filterValues[1]) || lessThan(row, id, filterValues[1]));
|
|
3952
|
+
between.autoRemove = (val) => !val;
|
|
3953
|
+
const betweenInclusive = (row, id, filterValues) => (["", void 0].includes(filterValues[0]) || greaterThanOrEqualTo(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ["", void 0].includes(filterValues[1]) || lessThanOrEqualTo(row, id, filterValues[1]));
|
|
3954
|
+
betweenInclusive.autoRemove = (val) => !val;
|
|
3955
|
+
const empty = (row, id, _filterValue) => !row.getValue(id)?.toString().trim();
|
|
3956
|
+
empty.autoRemove = (val) => !val;
|
|
3957
|
+
const notEmpty = (row, id, _filterValue) => !!row.getValue(id)?.toString().trim();
|
|
3958
|
+
notEmpty.autoRemove = (val) => !val;
|
|
3959
|
+
const MRT_FilterFns = {
|
|
3960
|
+
arrIncludes: filterFn_arrIncludes,
|
|
3961
|
+
arrIncludesAll: filterFn_arrIncludesAll,
|
|
3962
|
+
arrIncludesSome: filterFn_arrIncludesSome,
|
|
3963
|
+
between,
|
|
3964
|
+
betweenInclusive,
|
|
3965
|
+
contains,
|
|
3966
|
+
empty,
|
|
3967
|
+
endsWith,
|
|
3968
|
+
equals,
|
|
3969
|
+
equalsString: filterFn_equalsString,
|
|
3970
|
+
equalsStringSensitive: filterFn_equalsStringSensitive,
|
|
3971
|
+
fuzzy,
|
|
3972
|
+
greaterThan,
|
|
3973
|
+
greaterThanOrEqualTo,
|
|
3974
|
+
includesString: filterFn_includesString,
|
|
3975
|
+
includesStringSensitive: filterFn_includesStringSensitive,
|
|
3976
|
+
inNumberRange: filterFn_inNumberRange,
|
|
3977
|
+
lessThan,
|
|
3978
|
+
lessThanOrEqualTo,
|
|
3979
|
+
notEmpty,
|
|
3980
|
+
notEquals,
|
|
3981
|
+
startsWith
|
|
3982
|
+
};
|
|
3983
|
+
const MRT_DefaultTableFeatures = tableFeatures({
|
|
3984
|
+
aggregationFns: MRT_AggregationFns,
|
|
3985
|
+
cellSelectionFeature,
|
|
3986
|
+
cellSpanningFeature,
|
|
3987
|
+
columnFacetingFeature,
|
|
3988
|
+
columnFilteringFeature,
|
|
3989
|
+
columnGroupingFeature,
|
|
3990
|
+
columnOrderingFeature,
|
|
3991
|
+
columnPinningFeature,
|
|
3992
|
+
columnResizingFeature,
|
|
3993
|
+
columnSizingFeature,
|
|
3994
|
+
columnVisibilityFeature,
|
|
3995
|
+
expandedRowModel: createExpandedRowModel(),
|
|
3996
|
+
facetedMinMaxValues: createFacetedMinMaxValues(),
|
|
3997
|
+
facetedRowModel: createFacetedRowModel(),
|
|
3998
|
+
facetedUniqueValues: createFacetedUniqueValues(),
|
|
3999
|
+
filteredRowModel: createFilteredRowModel(),
|
|
4000
|
+
filterFns: MRT_FilterFns,
|
|
4001
|
+
globalFilteringFeature,
|
|
4002
|
+
groupedRowModel: createGroupedRowModel(),
|
|
4003
|
+
mrtFeature: { getInitialState: (state) => ({
|
|
4004
|
+
actionCell: null,
|
|
4005
|
+
columnFilterFns: {},
|
|
4006
|
+
creatingRow: null,
|
|
4007
|
+
density: "comfortable",
|
|
4008
|
+
draggingColumn: null,
|
|
4009
|
+
draggingRow: null,
|
|
4010
|
+
editingCell: null,
|
|
4011
|
+
editingRow: null,
|
|
4012
|
+
globalFilterFn: "fuzzy",
|
|
4013
|
+
hoveredColumn: null,
|
|
4014
|
+
hoveredRow: null,
|
|
4015
|
+
isFullScreen: false,
|
|
4016
|
+
isLoading: false,
|
|
4017
|
+
isSaving: false,
|
|
4018
|
+
showAlertBanner: false,
|
|
4019
|
+
showColumnFilters: false,
|
|
4020
|
+
showGlobalFilter: false,
|
|
4021
|
+
showLoadingOverlay: false,
|
|
4022
|
+
showProgressBars: false,
|
|
4023
|
+
showSkeletons: false,
|
|
4024
|
+
showToolbarDropZone: false,
|
|
4025
|
+
...state
|
|
4026
|
+
}) },
|
|
4027
|
+
paginatedRowModel: createPaginatedRowModel(),
|
|
4028
|
+
rowAggregationFeature,
|
|
4029
|
+
rowExpandingFeature,
|
|
4030
|
+
rowPaginationFeature,
|
|
4031
|
+
rowPinningFeature,
|
|
4032
|
+
rowSelectionFeature,
|
|
4033
|
+
rowSortingFeature,
|
|
4034
|
+
sortedRowModel: createSortedRowModel(),
|
|
4035
|
+
sortFns: MRT_SortingFns
|
|
4036
|
+
});
|
|
4037
|
+
//#endregion
|
|
3904
4038
|
//#region src/utils/tanstack.helpers.ts
|
|
3905
|
-
const flexRender =
|
|
4039
|
+
const flexRender = flexRender$1;
|
|
3906
4040
|
function createMRTColumnHelper() {
|
|
3907
4041
|
return {
|
|
3908
4042
|
accessor: (accessor, column) => {
|
|
@@ -3918,12 +4052,12 @@ function createMRTColumnHelper() {
|
|
|
3918
4052
|
group: (column) => column
|
|
3919
4053
|
};
|
|
3920
4054
|
}
|
|
3921
|
-
const createRow = (table, originalRow, rowIndex = -1, depth = 0, subRows, parentId) => (
|
|
4055
|
+
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);
|
|
3922
4056
|
//#endregion
|
|
3923
4057
|
//#region src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx
|
|
3924
4058
|
const getMRT_RowActionsColumnDef = (tableOptions) => {
|
|
3925
4059
|
return {
|
|
3926
|
-
Cell: ({ cell, row, staticRowIndex, table }) => /* @__PURE__ */
|
|
4060
|
+
Cell: ({ cell, row, staticRowIndex, table }) => /* @__PURE__ */ jsx(MRT_ToggleRowActionMenuButton, {
|
|
3927
4061
|
cell,
|
|
3928
4062
|
row,
|
|
3929
4063
|
staticRowIndex,
|
|
@@ -3941,7 +4075,7 @@ const getMRT_RowActionsColumnDef = (tableOptions) => {
|
|
|
3941
4075
|
//#region src/hooks/display-columns/getMRT_RowDragColumnDef.tsx
|
|
3942
4076
|
const getMRT_RowDragColumnDef = (tableOptions) => {
|
|
3943
4077
|
return {
|
|
3944
|
-
Cell: ({ row, rowRef, table }) => /* @__PURE__ */
|
|
4078
|
+
Cell: ({ row, rowRef, table }) => /* @__PURE__ */ jsx(MRT_TableBodyRowGrabHandle, {
|
|
3945
4079
|
row,
|
|
3946
4080
|
rowRef,
|
|
3947
4081
|
table
|
|
@@ -3968,27 +4102,27 @@ const getMRT_RowExpandColumnDef = (tableOptions) => {
|
|
|
3968
4102
|
table
|
|
3969
4103
|
};
|
|
3970
4104
|
const subRowsLength = row.subRows?.length;
|
|
3971
|
-
if (groupedColumnMode === "remove" && row.groupingColumnId) return /* @__PURE__ */
|
|
4105
|
+
if (groupedColumnMode === "remove" && row.groupingColumnId) return /* @__PURE__ */ jsxs(Stack, {
|
|
3972
4106
|
sx: {
|
|
3973
4107
|
alignItems: "center",
|
|
3974
4108
|
flexDirection: "row",
|
|
3975
4109
|
gap: "0.25rem"
|
|
3976
4110
|
},
|
|
3977
4111
|
children: [
|
|
3978
|
-
/* @__PURE__ */
|
|
3979
|
-
/* @__PURE__ */
|
|
4112
|
+
/* @__PURE__ */ jsx(MRT_ExpandButton, { ...expandButtonProps }),
|
|
4113
|
+
/* @__PURE__ */ jsx(Tooltip, {
|
|
3980
4114
|
...getCommonTooltipProps("right"),
|
|
3981
|
-
title: table.getColumn(row.groupingColumnId)
|
|
3982
|
-
children: /* @__PURE__ */
|
|
4115
|
+
title: table.getColumn(row.groupingColumnId)?.columnDef.header,
|
|
4116
|
+
children: /* @__PURE__ */ jsx("span", { children: row.groupingValue })
|
|
3983
4117
|
}),
|
|
3984
|
-
!!subRowsLength && /* @__PURE__ */
|
|
4118
|
+
!!subRowsLength && /* @__PURE__ */ jsxs("span", { children: [
|
|
3985
4119
|
"(",
|
|
3986
4120
|
subRowsLength,
|
|
3987
4121
|
")"
|
|
3988
4122
|
] })
|
|
3989
4123
|
]
|
|
3990
4124
|
});
|
|
3991
|
-
else return /* @__PURE__ */
|
|
4125
|
+
else return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MRT_ExpandButton, { ...expandButtonProps }), column.columnDef.GroupedCell?.({
|
|
3992
4126
|
cell,
|
|
3993
4127
|
column,
|
|
3994
4128
|
row,
|
|
@@ -3996,7 +4130,7 @@ const getMRT_RowExpandColumnDef = (tableOptions) => {
|
|
|
3996
4130
|
})] });
|
|
3997
4131
|
},
|
|
3998
4132
|
Header: enableExpandAll ? ({ table }) => {
|
|
3999
|
-
return /* @__PURE__ */
|
|
4133
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MRT_ExpandAllButton, { table }), groupedColumnMode === "remove" && grouping?.map((groupedColumnId) => table.getColumn(groupedColumnId)?.columnDef.header)?.join(", ")] });
|
|
4000
4134
|
} : void 0,
|
|
4001
4135
|
muiTableBodyCellProps: alignProps,
|
|
4002
4136
|
muiTableHeadCellProps: alignProps,
|
|
@@ -4029,7 +4163,7 @@ const getMRT_RowNumbersColumnDef = (tableOptions) => {
|
|
|
4029
4163
|
//#region src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx
|
|
4030
4164
|
const getMRT_RowPinningColumnDef = (tableOptions) => {
|
|
4031
4165
|
return {
|
|
4032
|
-
Cell: ({ row, table }) => /* @__PURE__ */
|
|
4166
|
+
Cell: ({ row, table }) => /* @__PURE__ */ jsx(MRT_TableBodyRowPinButton, {
|
|
4033
4167
|
row,
|
|
4034
4168
|
table
|
|
4035
4169
|
}),
|
|
@@ -4047,13 +4181,13 @@ const getMRT_RowPinningColumnDef = (tableOptions) => {
|
|
|
4047
4181
|
const getMRT_RowSelectColumnDef = (tableOptions) => {
|
|
4048
4182
|
const { enableMultiRowSelection, enableSelectAll } = tableOptions;
|
|
4049
4183
|
return {
|
|
4050
|
-
Cell: ({ row, staticRowIndex, table }) => /* @__PURE__ */
|
|
4184
|
+
Cell: ({ row, staticRowIndex, table }) => /* @__PURE__ */ jsx(MRT_SelectCheckbox, {
|
|
4051
4185
|
row,
|
|
4052
4186
|
staticRowIndex,
|
|
4053
4187
|
table
|
|
4054
4188
|
}),
|
|
4055
4189
|
grow: false,
|
|
4056
|
-
Header: enableSelectAll && enableMultiRowSelection ? ({ table }) => /* @__PURE__ */
|
|
4190
|
+
Header: enableSelectAll && enableMultiRowSelection ? ({ table }) => /* @__PURE__ */ jsx(MRT_SelectCheckbox, { table }) : void 0,
|
|
4057
4191
|
...defaultDisplayColumnProps({
|
|
4058
4192
|
header: "select",
|
|
4059
4193
|
id: "mrt-row-select",
|
|
@@ -4063,96 +4197,42 @@ const getMRT_RowSelectColumnDef = (tableOptions) => {
|
|
|
4063
4197
|
};
|
|
4064
4198
|
};
|
|
4065
4199
|
//#endregion
|
|
4066
|
-
//#region src/fns/aggregationFns.ts
|
|
4067
|
-
const MRT_AggregationFns = { ..._tanstack_react_table.aggregationFns };
|
|
4068
|
-
//#endregion
|
|
4069
|
-
//#region src/fns/filterFns.ts
|
|
4070
|
-
const fuzzy = (row, columnId, filterValue, addMeta) => {
|
|
4071
|
-
const itemRank = (0, _tanstack_match_sorter_utils.rankItem)(row.getValue(columnId), filterValue, { threshold: _tanstack_match_sorter_utils.rankings.MATCHES });
|
|
4072
|
-
addMeta(itemRank);
|
|
4073
|
-
return itemRank.passed;
|
|
4074
|
-
};
|
|
4075
|
-
fuzzy.autoRemove = (val) => !val;
|
|
4076
|
-
const contains = (row, id, filterValue) => !!row.getValue(id)?.toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim());
|
|
4077
|
-
contains.autoRemove = (val) => !val;
|
|
4078
|
-
const startsWith = (row, id, filterValue) => !!row.getValue(id)?.toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim());
|
|
4079
|
-
startsWith.autoRemove = (val) => !val;
|
|
4080
|
-
const endsWith = (row, id, filterValue) => !!row.getValue(id)?.toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim());
|
|
4081
|
-
endsWith.autoRemove = (val) => !val;
|
|
4082
|
-
const equals = (row, id, filterValue) => row.getValue(id)?.toString().toLowerCase().trim() === filterValue.toString().toLowerCase().trim();
|
|
4083
|
-
equals.autoRemove = (val) => !val;
|
|
4084
|
-
const notEquals = (row, id, filterValue) => row.getValue(id)?.toString().toLowerCase().trim() !== filterValue.toString().toLowerCase().trim();
|
|
4085
|
-
notEquals.autoRemove = (val) => !val;
|
|
4086
|
-
const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +(row.getValue(id) ?? 0) > +filterValue : (row.getValue(id) ?? "")?.toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
|
|
4087
|
-
greaterThan.autoRemove = (val) => !val;
|
|
4088
|
-
const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
|
|
4089
|
-
greaterThanOrEqualTo.autoRemove = (val) => !val;
|
|
4090
|
-
const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +(row.getValue(id) ?? 0) < +filterValue : (row.getValue(id) ?? "")?.toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
|
|
4091
|
-
lessThan.autoRemove = (val) => !val;
|
|
4092
|
-
const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
|
|
4093
|
-
lessThanOrEqualTo.autoRemove = (val) => !val;
|
|
4094
|
-
const between = (row, id, filterValues) => (["", void 0].includes(filterValues[0]) || greaterThan(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ["", void 0].includes(filterValues[1]) || lessThan(row, id, filterValues[1]));
|
|
4095
|
-
between.autoRemove = (val) => !val;
|
|
4096
|
-
const betweenInclusive = (row, id, filterValues) => (["", void 0].includes(filterValues[0]) || greaterThanOrEqualTo(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ["", void 0].includes(filterValues[1]) || lessThanOrEqualTo(row, id, filterValues[1]));
|
|
4097
|
-
betweenInclusive.autoRemove = (val) => !val;
|
|
4098
|
-
const empty = (row, id, _filterValue) => !row.getValue(id)?.toString().trim();
|
|
4099
|
-
empty.autoRemove = (val) => !val;
|
|
4100
|
-
const notEmpty = (row, id, _filterValue) => !!row.getValue(id)?.toString().trim();
|
|
4101
|
-
notEmpty.autoRemove = (val) => !val;
|
|
4102
|
-
const MRT_FilterFns = {
|
|
4103
|
-
..._tanstack_react_table.filterFns,
|
|
4104
|
-
between,
|
|
4105
|
-
betweenInclusive,
|
|
4106
|
-
contains,
|
|
4107
|
-
empty,
|
|
4108
|
-
endsWith,
|
|
4109
|
-
equals,
|
|
4110
|
-
fuzzy,
|
|
4111
|
-
greaterThan,
|
|
4112
|
-
greaterThanOrEqualTo,
|
|
4113
|
-
lessThan,
|
|
4114
|
-
lessThanOrEqualTo,
|
|
4115
|
-
notEmpty,
|
|
4116
|
-
notEquals,
|
|
4117
|
-
startsWith
|
|
4118
|
-
};
|
|
4119
|
-
//#endregion
|
|
4120
4200
|
//#region src/icons.ts
|
|
4121
4201
|
const MRT_Default_Icons = {
|
|
4122
|
-
ArrowDownwardIcon:
|
|
4123
|
-
ArrowRightIcon:
|
|
4124
|
-
CancelIcon:
|
|
4125
|
-
ChevronLeftIcon:
|
|
4126
|
-
ChevronRightIcon:
|
|
4127
|
-
ClearAllIcon:
|
|
4128
|
-
CloseIcon:
|
|
4129
|
-
ContentCopy
|
|
4130
|
-
DensityLargeIcon:
|
|
4131
|
-
DensityMediumIcon:
|
|
4132
|
-
DensitySmallIcon:
|
|
4133
|
-
DragHandleIcon:
|
|
4134
|
-
DynamicFeedIcon:
|
|
4135
|
-
EditIcon:
|
|
4136
|
-
ExpandMoreIcon:
|
|
4137
|
-
FilterAltIcon:
|
|
4138
|
-
FilterListIcon:
|
|
4139
|
-
FilterListOffIcon:
|
|
4140
|
-
FirstPageIcon:
|
|
4141
|
-
FullscreenExitIcon:
|
|
4142
|
-
FullscreenIcon:
|
|
4143
|
-
KeyboardDoubleArrowDownIcon:
|
|
4144
|
-
LastPageIcon:
|
|
4145
|
-
MoreHorizIcon:
|
|
4146
|
-
MoreVertIcon:
|
|
4147
|
-
PushPinIcon:
|
|
4148
|
-
RestartAltIcon:
|
|
4149
|
-
SaveIcon:
|
|
4150
|
-
SearchIcon:
|
|
4151
|
-
SearchOffIcon:
|
|
4152
|
-
SortIcon:
|
|
4153
|
-
SyncAltIcon:
|
|
4154
|
-
ViewColumnIcon:
|
|
4155
|
-
VisibilityOffIcon:
|
|
4202
|
+
ArrowDownwardIcon: ArrowDownward,
|
|
4203
|
+
ArrowRightIcon: ArrowRight,
|
|
4204
|
+
CancelIcon: Cancel,
|
|
4205
|
+
ChevronLeftIcon: ChevronLeft,
|
|
4206
|
+
ChevronRightIcon: ChevronRight,
|
|
4207
|
+
ClearAllIcon: ClearAll,
|
|
4208
|
+
CloseIcon: Close,
|
|
4209
|
+
ContentCopy,
|
|
4210
|
+
DensityLargeIcon: DensityLarge,
|
|
4211
|
+
DensityMediumIcon: DensityMedium,
|
|
4212
|
+
DensitySmallIcon: DensitySmall,
|
|
4213
|
+
DragHandleIcon: DragHandle,
|
|
4214
|
+
DynamicFeedIcon: DynamicFeed,
|
|
4215
|
+
EditIcon: Edit,
|
|
4216
|
+
ExpandMoreIcon: ExpandMore,
|
|
4217
|
+
FilterAltIcon: FilterAlt,
|
|
4218
|
+
FilterListIcon: FilterList,
|
|
4219
|
+
FilterListOffIcon: FilterListOff,
|
|
4220
|
+
FirstPageIcon: FirstPage,
|
|
4221
|
+
FullscreenExitIcon: FullscreenExit,
|
|
4222
|
+
FullscreenIcon: Fullscreen,
|
|
4223
|
+
KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDown,
|
|
4224
|
+
LastPageIcon: LastPage,
|
|
4225
|
+
MoreHorizIcon: MoreHoriz,
|
|
4226
|
+
MoreVertIcon: MoreVert,
|
|
4227
|
+
PushPinIcon: PushPin,
|
|
4228
|
+
RestartAltIcon: RestartAlt,
|
|
4229
|
+
SaveIcon: Save,
|
|
4230
|
+
SearchIcon: Search,
|
|
4231
|
+
SearchOffIcon: SearchOff,
|
|
4232
|
+
SortIcon: Sort,
|
|
4233
|
+
SyncAltIcon: SyncAlt,
|
|
4234
|
+
ViewColumnIcon: ViewColumn,
|
|
4235
|
+
VisibilityOffIcon: VisibilityOff
|
|
4156
4236
|
};
|
|
4157
4237
|
//#endregion
|
|
4158
4238
|
//#region src/locales/en.ts
|
|
@@ -4272,38 +4352,38 @@ const MRT_DefaultDisplayColumn = {
|
|
|
4272
4352
|
enableResizing: false,
|
|
4273
4353
|
enableSorting: false
|
|
4274
4354
|
};
|
|
4275
|
-
const useMRT_TableOptions = ({ aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = "subheader", columnResizeDirection, columnResizeMode = "onChange", createDisplayMode = "modal", defaultColumn, defaultDisplayColumn, editDisplayMode = "modal", enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableKeyboardShortcuts = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, id =
|
|
4276
|
-
const theme =
|
|
4277
|
-
icons =
|
|
4355
|
+
const useMRT_TableOptions = ({ aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = "subheader", columnResizeDirection, columnResizeMode = "onChange", createDisplayMode = "modal", defaultColumn, defaultDisplayColumn, editDisplayMode = "modal", enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableKeyboardShortcuts = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, id = useId(), layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, mrtTheme, paginationDisplayMode = "default", positionActionsColumn = "first", positionCreatingRow = "top", positionExpandColumn = "first", positionGlobalFilter = "right", positionPagination = "bottom", positionToolbarAlertBanner = "top", positionToolbarDropZone = "top", rowNumberDisplayMode = "static", rowPinningDisplayMode = "sticky", selectAllMode = "page", sortFns, ...rest }) => {
|
|
4356
|
+
const theme = useTheme();
|
|
4357
|
+
icons = useMemo(() => ({
|
|
4278
4358
|
...MRT_Default_Icons,
|
|
4279
4359
|
...icons
|
|
4280
4360
|
}), [icons]);
|
|
4281
|
-
localization =
|
|
4361
|
+
localization = useMemo(() => ({
|
|
4282
4362
|
...MRT_Localization_EN,
|
|
4283
4363
|
...localization
|
|
4284
4364
|
}), [localization]);
|
|
4285
|
-
mrtTheme =
|
|
4286
|
-
aggregationFns =
|
|
4365
|
+
mrtTheme = useMemo(() => getMRTTheme(mrtTheme, theme), [mrtTheme, theme]);
|
|
4366
|
+
aggregationFns = useMemo(() => ({
|
|
4287
4367
|
...MRT_AggregationFns,
|
|
4288
4368
|
...aggregationFns
|
|
4289
4369
|
}), []);
|
|
4290
|
-
filterFns =
|
|
4370
|
+
filterFns = useMemo(() => ({
|
|
4291
4371
|
...MRT_FilterFns,
|
|
4292
4372
|
...filterFns
|
|
4293
4373
|
}), []);
|
|
4294
|
-
|
|
4374
|
+
sortFns = useMemo(() => ({
|
|
4295
4375
|
...MRT_SortingFns,
|
|
4296
|
-
...
|
|
4376
|
+
...sortFns
|
|
4297
4377
|
}), []);
|
|
4298
|
-
defaultColumn =
|
|
4378
|
+
defaultColumn = useMemo(() => ({
|
|
4299
4379
|
...MRT_DefaultColumn,
|
|
4300
4380
|
...defaultColumn
|
|
4301
4381
|
}), [defaultColumn]);
|
|
4302
|
-
defaultDisplayColumn =
|
|
4382
|
+
defaultDisplayColumn = useMemo(() => ({
|
|
4303
4383
|
...MRT_DefaultDisplayColumn,
|
|
4304
4384
|
...defaultDisplayColumn
|
|
4305
4385
|
}), [defaultDisplayColumn]);
|
|
4306
|
-
[enableColumnVirtualization, enableRowVirtualization] =
|
|
4386
|
+
[enableColumnVirtualization, enableRowVirtualization] = useMemo(() => [enableColumnVirtualization, enableRowVirtualization], []);
|
|
4307
4387
|
if (!columnResizeDirection) columnResizeDirection = theme.direction || "ltr";
|
|
4308
4388
|
layoutMode = layoutMode || (enableColumnResizing ? "grid-no-grow" : "semantic");
|
|
4309
4389
|
if (layoutMode === "semantic" && (enableRowVirtualization || enableColumnVirtualization)) layoutMode = "grid";
|
|
@@ -4359,15 +4439,7 @@ const useMRT_TableOptions = ({ aggregationFns, autoResetExpanded = false, column
|
|
|
4359
4439
|
enableToolbarInternalActions,
|
|
4360
4440
|
enableTopToolbar,
|
|
4361
4441
|
filterFns,
|
|
4362
|
-
|
|
4363
|
-
getExpandedRowModel: enableExpanding || enableGrouping ? (0, _tanstack_react_table.getExpandedRowModel)() : void 0,
|
|
4364
|
-
getFacetedMinMaxValues: enableFacetedValues ? (0, _tanstack_react_table.getFacetedMinMaxValues)() : void 0,
|
|
4365
|
-
getFacetedRowModel: enableFacetedValues ? (0, _tanstack_react_table.getFacetedRowModel)() : void 0,
|
|
4366
|
-
getFacetedUniqueValues: enableFacetedValues ? (0, _tanstack_react_table.getFacetedUniqueValues)() : void 0,
|
|
4367
|
-
getFilteredRowModel: (enableColumnFilters || enableGlobalFilter || enableFilters) && !manualFiltering ? (0, _tanstack_react_table.getFilteredRowModel)() : void 0,
|
|
4368
|
-
getGroupedRowModel: enableGrouping && !manualGrouping ? (0, _tanstack_react_table.getGroupedRowModel)() : void 0,
|
|
4369
|
-
getPaginationRowModel: enablePagination && !manualPagination ? (0, _tanstack_react_table.getPaginationRowModel)() : void 0,
|
|
4370
|
-
getSortedRowModel: enableSorting && !manualSorting ? (0, _tanstack_react_table.getSortedRowModel)() : void 0,
|
|
4442
|
+
getRowCanExpand: rest.getRowCanExpand ?? (rest.renderDetailPanel ? () => true : void 0),
|
|
4371
4443
|
getSubRows: (row) => row?.subRows,
|
|
4372
4444
|
icons,
|
|
4373
4445
|
id,
|
|
@@ -4389,7 +4461,7 @@ const useMRT_TableOptions = ({ aggregationFns, autoResetExpanded = false, column
|
|
|
4389
4461
|
rowNumberDisplayMode,
|
|
4390
4462
|
rowPinningDisplayMode,
|
|
4391
4463
|
selectAllMode,
|
|
4392
|
-
|
|
4464
|
+
sortFns,
|
|
4393
4465
|
...rest
|
|
4394
4466
|
};
|
|
4395
4467
|
};
|
|
@@ -4420,33 +4492,35 @@ const getMRT_RowSpacerColumnDef = (tableOptions) => {
|
|
|
4420
4492
|
//#endregion
|
|
4421
4493
|
//#region src/hooks/useMRT_Effects.ts
|
|
4422
4494
|
const useMRT_Effects = (table) => {
|
|
4423
|
-
const { getIsSomeRowsPinned,
|
|
4424
|
-
const { columnOrder, density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting } =
|
|
4495
|
+
const { getIsSomeRowsPinned, getPrePaginatedRowModel, options: { enablePagination, enableRowPinning, rowCount } } = table;
|
|
4496
|
+
const { columnOrder, density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting } = table.state;
|
|
4425
4497
|
const totalColumnCount = table.options.columns.length;
|
|
4426
|
-
const totalRowCount = rowCount ??
|
|
4427
|
-
const rerender =
|
|
4428
|
-
const initialBodyHeight =
|
|
4429
|
-
const previousTop =
|
|
4430
|
-
|
|
4498
|
+
const totalRowCount = rowCount ?? getPrePaginatedRowModel().rows.length;
|
|
4499
|
+
const rerender = useReducer(() => ({}), {})[1];
|
|
4500
|
+
const initialBodyHeight = useRef(null);
|
|
4501
|
+
const previousTop = useRef(null);
|
|
4502
|
+
useEffect(() => {
|
|
4431
4503
|
if (typeof window !== "undefined") initialBodyHeight.current = document.body.style.height;
|
|
4432
4504
|
}, []);
|
|
4433
|
-
|
|
4434
|
-
if (typeof window !== "undefined")
|
|
4435
|
-
|
|
4436
|
-
|
|
4437
|
-
|
|
4438
|
-
|
|
4439
|
-
|
|
4440
|
-
|
|
4441
|
-
|
|
4442
|
-
|
|
4443
|
-
|
|
4505
|
+
useEffect(() => {
|
|
4506
|
+
if (typeof window !== "undefined") {
|
|
4507
|
+
if (isFullScreen) {
|
|
4508
|
+
previousTop.current = document.body.getBoundingClientRect().top;
|
|
4509
|
+
document.body.style.height = "100dvh";
|
|
4510
|
+
} else {
|
|
4511
|
+
document.body.style.height = initialBodyHeight.current;
|
|
4512
|
+
if (!previousTop.current) return;
|
|
4513
|
+
window.scrollTo({
|
|
4514
|
+
behavior: "instant",
|
|
4515
|
+
top: -1 * previousTop.current
|
|
4516
|
+
});
|
|
4517
|
+
}
|
|
4444
4518
|
}
|
|
4445
4519
|
}, [isFullScreen]);
|
|
4446
|
-
|
|
4520
|
+
useEffect(() => {
|
|
4447
4521
|
if (totalColumnCount !== columnOrder.length) table.setColumnOrder(getDefaultColumnOrderIds(table.options));
|
|
4448
4522
|
}, [totalColumnCount]);
|
|
4449
|
-
|
|
4523
|
+
useEffect(() => {
|
|
4450
4524
|
if (!enablePagination || isLoading || showSkeletons) return;
|
|
4451
4525
|
const { pageIndex, pageSize } = pagination;
|
|
4452
4526
|
const totalPages = totalRowCount > 0 ? Math.ceil(totalRowCount / pageSize) : 1;
|
|
@@ -4457,16 +4531,16 @@ const useMRT_Effects = (table) => {
|
|
|
4457
4531
|
isLoading,
|
|
4458
4532
|
showSkeletons
|
|
4459
4533
|
]);
|
|
4460
|
-
const appliedSort =
|
|
4461
|
-
|
|
4534
|
+
const appliedSort = useRef(sorting);
|
|
4535
|
+
useEffect(() => {
|
|
4462
4536
|
if (sorting.length) appliedSort.current = sorting;
|
|
4463
4537
|
}, [sorting]);
|
|
4464
|
-
|
|
4538
|
+
useEffect(() => {
|
|
4465
4539
|
if (!getCanRankRows(table)) return;
|
|
4466
4540
|
if (globalFilter) table.setSorting([]);
|
|
4467
4541
|
else table.setSorting(() => appliedSort.current || []);
|
|
4468
4542
|
}, [globalFilter]);
|
|
4469
|
-
|
|
4543
|
+
useEffect(() => {
|
|
4470
4544
|
if (enableRowPinning && getIsSomeRowsPinned()) setTimeout(() => {
|
|
4471
4545
|
rerender();
|
|
4472
4546
|
}, 150);
|
|
@@ -4480,19 +4554,19 @@ const useMRT_Effects = (table) => {
|
|
|
4480
4554
|
* @returns the MRT table instance
|
|
4481
4555
|
*/
|
|
4482
4556
|
const useMRT_TableInstance = (definedTableOptions) => {
|
|
4483
|
-
const lastSelectedRowId =
|
|
4484
|
-
const actionCellRef =
|
|
4485
|
-
const bottomToolbarRef =
|
|
4486
|
-
const editInputRefs =
|
|
4487
|
-
const filterInputRefs =
|
|
4488
|
-
const searchInputRef =
|
|
4489
|
-
const tableContainerRef =
|
|
4490
|
-
const tableHeadCellRefs =
|
|
4491
|
-
const tablePaperRef =
|
|
4492
|
-
const topToolbarRef =
|
|
4493
|
-
const tableHeadRef =
|
|
4494
|
-
const tableFooterRef =
|
|
4495
|
-
const initialState =
|
|
4557
|
+
const lastSelectedRowId = useRef(null);
|
|
4558
|
+
const actionCellRef = useRef(null);
|
|
4559
|
+
const bottomToolbarRef = useRef(null);
|
|
4560
|
+
const editInputRefs = useRef({});
|
|
4561
|
+
const filterInputRefs = useRef({});
|
|
4562
|
+
const searchInputRef = useRef(null);
|
|
4563
|
+
const tableContainerRef = useRef(null);
|
|
4564
|
+
const tableHeadCellRefs = useRef({});
|
|
4565
|
+
const tablePaperRef = useRef(null);
|
|
4566
|
+
const topToolbarRef = useRef(null);
|
|
4567
|
+
const tableHeadRef = useRef(null);
|
|
4568
|
+
const tableFooterRef = useRef(null);
|
|
4569
|
+
const initialState = useMemo(() => {
|
|
4496
4570
|
const initState = definedTableOptions.initialState ?? {};
|
|
4497
4571
|
initState.columnOrder = initState.columnOrder ?? getDefaultColumnOrderIds({
|
|
4498
4572
|
...definedTableOptions,
|
|
@@ -4505,34 +4579,34 @@ const useMRT_TableInstance = (definedTableOptions) => {
|
|
|
4505
4579
|
return initState;
|
|
4506
4580
|
}, []);
|
|
4507
4581
|
definedTableOptions.initialState = initialState;
|
|
4508
|
-
const [actionCell, setActionCell] =
|
|
4509
|
-
const [creatingRow, _setCreatingRow] =
|
|
4510
|
-
const [columnFilterFns, setColumnFilterFns] =
|
|
4511
|
-
const [columnOrder, onColumnOrderChange] =
|
|
4512
|
-
const [
|
|
4513
|
-
const [density, setDensity] =
|
|
4514
|
-
const [draggingColumn, setDraggingColumn] =
|
|
4515
|
-
const [draggingRow, setDraggingRow] =
|
|
4516
|
-
const [editingCell, setEditingCell] =
|
|
4517
|
-
const [editingRow, setEditingRow] =
|
|
4518
|
-
const [globalFilterFn, setGlobalFilterFn] =
|
|
4519
|
-
const [grouping, onGroupingChange] =
|
|
4520
|
-
const [hoveredColumn, setHoveredColumn] =
|
|
4521
|
-
const [hoveredRow, setHoveredRow] =
|
|
4522
|
-
const [isFullScreen, setIsFullScreen] =
|
|
4523
|
-
const [pagination, onPaginationChange] =
|
|
4582
|
+
const [actionCell, setActionCell] = useState(initialState.actionCell ?? null);
|
|
4583
|
+
const [creatingRow, _setCreatingRow] = useState(initialState.creatingRow ?? null);
|
|
4584
|
+
const [columnFilterFns, setColumnFilterFns] = useState(() => Object.assign({}, ...getAllLeafColumnDefs(definedTableOptions.columns).map((col) => ({ [getColumnId(col)]: col.filterFn instanceof Function ? col.filterFn.name ?? "custom" : col.filterFn ?? initialState?.columnFilterFns?.[getColumnId(col)] ?? getDefaultColumnFilterFn(col) }))));
|
|
4585
|
+
const [columnOrder, onColumnOrderChange] = useState(initialState.columnOrder ?? []);
|
|
4586
|
+
const [columnResizing, onColumnResizingChange] = useState(initialState.columnResizing ?? {});
|
|
4587
|
+
const [density, setDensity] = useState(initialState?.density ?? "comfortable");
|
|
4588
|
+
const [draggingColumn, setDraggingColumn] = useState(initialState.draggingColumn ?? null);
|
|
4589
|
+
const [draggingRow, setDraggingRow] = useState(initialState.draggingRow ?? null);
|
|
4590
|
+
const [editingCell, setEditingCell] = useState(initialState.editingCell ?? null);
|
|
4591
|
+
const [editingRow, setEditingRow] = useState(initialState.editingRow ?? null);
|
|
4592
|
+
const [globalFilterFn, setGlobalFilterFn] = useState(initialState.globalFilterFn ?? "fuzzy");
|
|
4593
|
+
const [grouping, onGroupingChange] = useState(initialState.grouping ?? []);
|
|
4594
|
+
const [hoveredColumn, setHoveredColumn] = useState(initialState.hoveredColumn ?? null);
|
|
4595
|
+
const [hoveredRow, setHoveredRow] = useState(initialState.hoveredRow ?? null);
|
|
4596
|
+
const [isFullScreen, setIsFullScreen] = useState(initialState?.isFullScreen ?? false);
|
|
4597
|
+
const [pagination, onPaginationChange] = useState(initialState?.pagination ?? {
|
|
4524
4598
|
pageIndex: 0,
|
|
4525
4599
|
pageSize: 10
|
|
4526
4600
|
});
|
|
4527
|
-
const [showAlertBanner, setShowAlertBanner] =
|
|
4528
|
-
const [showColumnFilters, setShowColumnFilters] =
|
|
4529
|
-
const [showGlobalFilter, setShowGlobalFilter] =
|
|
4530
|
-
const [showToolbarDropZone, setShowToolbarDropZone] =
|
|
4601
|
+
const [showAlertBanner, setShowAlertBanner] = useState(initialState?.showAlertBanner ?? false);
|
|
4602
|
+
const [showColumnFilters, setShowColumnFilters] = useState(initialState?.showColumnFilters ?? false);
|
|
4603
|
+
const [showGlobalFilter, setShowGlobalFilter] = useState(initialState?.showGlobalFilter ?? false);
|
|
4604
|
+
const [showToolbarDropZone, setShowToolbarDropZone] = useState(initialState?.showToolbarDropZone ?? false);
|
|
4531
4605
|
definedTableOptions.state = {
|
|
4532
4606
|
actionCell,
|
|
4533
4607
|
columnFilterFns,
|
|
4534
4608
|
columnOrder,
|
|
4535
|
-
|
|
4609
|
+
columnResizing,
|
|
4536
4610
|
creatingRow,
|
|
4537
4611
|
density,
|
|
4538
4612
|
draggingColumn,
|
|
@@ -4552,8 +4626,8 @@ const useMRT_TableInstance = (definedTableOptions) => {
|
|
|
4552
4626
|
...definedTableOptions.state
|
|
4553
4627
|
};
|
|
4554
4628
|
const statefulTableOptions = definedTableOptions;
|
|
4555
|
-
const columnDefsRef =
|
|
4556
|
-
statefulTableOptions.columns = statefulTableOptions.state.
|
|
4629
|
+
const columnDefsRef = useRef([]);
|
|
4630
|
+
statefulTableOptions.columns = statefulTableOptions.state.columnResizing.isResizingColumn || statefulTableOptions.state.draggingColumn || statefulTableOptions.state.draggingRow ? columnDefsRef.current : prepareColumns({
|
|
4557
4631
|
columnDefs: [
|
|
4558
4632
|
...[
|
|
4559
4633
|
showRowPinningColumn(statefulTableOptions) && getMRT_RowPinningColumnDef(statefulTableOptions),
|
|
@@ -4569,53 +4643,74 @@ const useMRT_TableInstance = (definedTableOptions) => {
|
|
|
4569
4643
|
tableOptions: statefulTableOptions
|
|
4570
4644
|
});
|
|
4571
4645
|
columnDefsRef.current = statefulTableOptions.columns;
|
|
4572
|
-
statefulTableOptions.data =
|
|
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(statefulTableOptions.columns).map((col) => ({ [getColumnId(col)]: null })))) : statefulTableOptions.data, [
|
|
4573
4647
|
statefulTableOptions.data,
|
|
4574
4648
|
statefulTableOptions.state.isLoading,
|
|
4575
4649
|
statefulTableOptions.state.showSkeletons
|
|
4576
4650
|
]);
|
|
4577
|
-
const
|
|
4651
|
+
const [features] = useState(() => tableFeatures({
|
|
4652
|
+
...MRT_DefaultTableFeatures,
|
|
4653
|
+
aggregationFns: {
|
|
4654
|
+
...MRT_DefaultTableFeatures.aggregationFns,
|
|
4655
|
+
...statefulTableOptions.aggregationFns
|
|
4656
|
+
},
|
|
4657
|
+
filterFns: {
|
|
4658
|
+
...MRT_DefaultTableFeatures.filterFns,
|
|
4659
|
+
...statefulTableOptions.filterFns
|
|
4660
|
+
},
|
|
4661
|
+
sortFns: {
|
|
4662
|
+
...MRT_DefaultTableFeatures.sortFns,
|
|
4663
|
+
...statefulTableOptions.sortFns
|
|
4664
|
+
}
|
|
4665
|
+
}));
|
|
4666
|
+
const tableOptions = {
|
|
4578
4667
|
onColumnOrderChange,
|
|
4579
|
-
|
|
4668
|
+
onColumnResizingChange,
|
|
4580
4669
|
onGroupingChange,
|
|
4581
4670
|
onPaginationChange,
|
|
4582
4671
|
...statefulTableOptions,
|
|
4583
|
-
|
|
4672
|
+
features,
|
|
4673
|
+
globalFilterFn: globalFilterFn ?? "fuzzy"
|
|
4674
|
+
};
|
|
4675
|
+
const reactTable = useTable(tableOptions);
|
|
4676
|
+
const table = Object.assign(reactTable, {
|
|
4677
|
+
getLeftLeafColumns: () => reactTable.getStartLeafColumns(),
|
|
4678
|
+
getPaginationRowModel: () => reactTable.getPaginatedRowModel(),
|
|
4679
|
+
getRightLeafColumns: () => reactTable.getEndLeafColumns(),
|
|
4680
|
+
refs: {
|
|
4681
|
+
actionCellRef,
|
|
4682
|
+
bottomToolbarRef,
|
|
4683
|
+
editInputRefs,
|
|
4684
|
+
filterInputRefs,
|
|
4685
|
+
lastSelectedRowId,
|
|
4686
|
+
searchInputRef,
|
|
4687
|
+
tableContainerRef,
|
|
4688
|
+
tableFooterRef,
|
|
4689
|
+
tableHeadCellRefs,
|
|
4690
|
+
tableHeadRef,
|
|
4691
|
+
tablePaperRef,
|
|
4692
|
+
topToolbarRef
|
|
4693
|
+
},
|
|
4694
|
+
setActionCell: statefulTableOptions.onActionCellChange ?? setActionCell,
|
|
4695
|
+
setColumnFilterFns: statefulTableOptions.onColumnFilterFnsChange ?? setColumnFilterFns,
|
|
4696
|
+
setCreatingRow: (row) => {
|
|
4697
|
+
const nextRow = row === true ? createRow(table) : row;
|
|
4698
|
+
statefulTableOptions?.onCreatingRowChange?.(nextRow) ?? _setCreatingRow(nextRow);
|
|
4699
|
+
},
|
|
4700
|
+
setDensity: statefulTableOptions.onDensityChange ?? setDensity,
|
|
4701
|
+
setDraggingColumn: statefulTableOptions.onDraggingColumnChange ?? setDraggingColumn,
|
|
4702
|
+
setDraggingRow: statefulTableOptions.onDraggingRowChange ?? setDraggingRow,
|
|
4703
|
+
setEditingCell: statefulTableOptions.onEditingCellChange ?? setEditingCell,
|
|
4704
|
+
setEditingRow: statefulTableOptions.onEditingRowChange ?? setEditingRow,
|
|
4705
|
+
setGlobalFilterFn: statefulTableOptions.onGlobalFilterFnChange ?? setGlobalFilterFn,
|
|
4706
|
+
setHoveredColumn: statefulTableOptions.onHoveredColumnChange ?? setHoveredColumn,
|
|
4707
|
+
setHoveredRow: statefulTableOptions.onHoveredRowChange ?? setHoveredRow,
|
|
4708
|
+
setIsFullScreen: statefulTableOptions.onIsFullScreenChange ?? setIsFullScreen,
|
|
4709
|
+
setShowAlertBanner: statefulTableOptions.onShowAlertBannerChange ?? setShowAlertBanner,
|
|
4710
|
+
setShowColumnFilters: statefulTableOptions.onShowColumnFiltersChange ?? setShowColumnFilters,
|
|
4711
|
+
setShowGlobalFilter: statefulTableOptions.onShowGlobalFilterChange ?? setShowGlobalFilter,
|
|
4712
|
+
setShowToolbarDropZone: statefulTableOptions.onShowToolbarDropZoneChange ?? setShowToolbarDropZone
|
|
4584
4713
|
});
|
|
4585
|
-
table.refs = {
|
|
4586
|
-
actionCellRef,
|
|
4587
|
-
bottomToolbarRef,
|
|
4588
|
-
editInputRefs,
|
|
4589
|
-
filterInputRefs,
|
|
4590
|
-
lastSelectedRowId,
|
|
4591
|
-
searchInputRef,
|
|
4592
|
-
tableContainerRef,
|
|
4593
|
-
tableFooterRef,
|
|
4594
|
-
tableHeadCellRefs,
|
|
4595
|
-
tableHeadRef,
|
|
4596
|
-
tablePaperRef,
|
|
4597
|
-
topToolbarRef
|
|
4598
|
-
};
|
|
4599
|
-
table.setActionCell = statefulTableOptions.onActionCellChange ?? setActionCell;
|
|
4600
|
-
table.setCreatingRow = (row) => {
|
|
4601
|
-
let _row = row;
|
|
4602
|
-
if (row === true) _row = createRow(table);
|
|
4603
|
-
statefulTableOptions?.onCreatingRowChange?.(_row) ?? _setCreatingRow(_row);
|
|
4604
|
-
};
|
|
4605
|
-
table.setColumnFilterFns = statefulTableOptions.onColumnFilterFnsChange ?? setColumnFilterFns;
|
|
4606
|
-
table.setDensity = statefulTableOptions.onDensityChange ?? setDensity;
|
|
4607
|
-
table.setDraggingColumn = statefulTableOptions.onDraggingColumnChange ?? setDraggingColumn;
|
|
4608
|
-
table.setDraggingRow = statefulTableOptions.onDraggingRowChange ?? setDraggingRow;
|
|
4609
|
-
table.setEditingCell = statefulTableOptions.onEditingCellChange ?? setEditingCell;
|
|
4610
|
-
table.setEditingRow = statefulTableOptions.onEditingRowChange ?? setEditingRow;
|
|
4611
|
-
table.setGlobalFilterFn = statefulTableOptions.onGlobalFilterFnChange ?? setGlobalFilterFn;
|
|
4612
|
-
table.setHoveredColumn = statefulTableOptions.onHoveredColumnChange ?? setHoveredColumn;
|
|
4613
|
-
table.setHoveredRow = statefulTableOptions.onHoveredRowChange ?? setHoveredRow;
|
|
4614
|
-
table.setIsFullScreen = statefulTableOptions.onIsFullScreenChange ?? setIsFullScreen;
|
|
4615
|
-
table.setShowAlertBanner = statefulTableOptions.onShowAlertBannerChange ?? setShowAlertBanner;
|
|
4616
|
-
table.setShowColumnFilters = statefulTableOptions.onShowColumnFiltersChange ?? setShowColumnFilters;
|
|
4617
|
-
table.setShowGlobalFilter = statefulTableOptions.onShowGlobalFilterChange ?? setShowGlobalFilter;
|
|
4618
|
-
table.setShowToolbarDropZone = statefulTableOptions.onShowToolbarDropZoneChange ?? setShowToolbarDropZone;
|
|
4619
4714
|
useMRT_Effects(table);
|
|
4620
4715
|
return table;
|
|
4621
4716
|
};
|
|
@@ -4625,8 +4720,8 @@ const useMaterialReactTable = (tableOptions) => useMRT_TableInstance(useMRT_Tabl
|
|
|
4625
4720
|
//#endregion
|
|
4626
4721
|
//#region src/components/toolbar/MRT_LinearProgressBar.tsx
|
|
4627
4722
|
const MRT_LinearProgressBar = ({ isTopToolbar, table, ...rest }) => {
|
|
4628
|
-
const {
|
|
4629
|
-
const { isSaving, showProgressBars } =
|
|
4723
|
+
const { options: { muiLinearProgressProps } } = table;
|
|
4724
|
+
const { isSaving, showProgressBars } = table.state;
|
|
4630
4725
|
const linearProgressProps = {
|
|
4631
4726
|
...parseFromValuesOrFunc(muiLinearProgressProps, {
|
|
4632
4727
|
isTopToolbar,
|
|
@@ -4634,7 +4729,7 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table, ...rest }) => {
|
|
|
4634
4729
|
}),
|
|
4635
4730
|
...rest
|
|
4636
4731
|
};
|
|
4637
|
-
return /* @__PURE__ */
|
|
4732
|
+
return /* @__PURE__ */ jsx(Collapse, {
|
|
4638
4733
|
in: showProgressBars !== false && (showProgressBars || isSaving),
|
|
4639
4734
|
mountOnEnter: true,
|
|
4640
4735
|
sx: {
|
|
@@ -4644,7 +4739,7 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table, ...rest }) => {
|
|
|
4644
4739
|
width: "100%"
|
|
4645
4740
|
},
|
|
4646
4741
|
unmountOnExit: true,
|
|
4647
|
-
children: /* @__PURE__ */
|
|
4742
|
+
children: /* @__PURE__ */ jsx(LinearProgress, {
|
|
4648
4743
|
"aria-busy": "true",
|
|
4649
4744
|
"aria-label": "Loading",
|
|
4650
4745
|
sx: { position: "relative" },
|
|
@@ -4665,10 +4760,10 @@ const defaultRowsPerPage = [
|
|
|
4665
4760
|
100
|
|
4666
4761
|
];
|
|
4667
4762
|
const MRT_TablePagination = ({ position = "bottom", table, ...rest }) => {
|
|
4668
|
-
const theme =
|
|
4669
|
-
const isMobile =
|
|
4670
|
-
const {
|
|
4671
|
-
const { pagination: { pageIndex = 0, pageSize = 10 } } =
|
|
4763
|
+
const theme = useTheme();
|
|
4764
|
+
const isMobile = useMediaQuery("(max-width: 720px)");
|
|
4765
|
+
const { options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, id, localization, muiPaginationProps, paginationDisplayMode } } = table;
|
|
4766
|
+
const { pagination: { pageIndex = 0, pageSize = 10 } } = table.state;
|
|
4672
4767
|
const paginationProps = {
|
|
4673
4768
|
...parseFromValuesOrFunc(muiPaginationProps, { table }),
|
|
4674
4769
|
...rest
|
|
@@ -4683,7 +4778,7 @@ const MRT_TablePagination = ({ position = "bottom", table, ...rest }) => {
|
|
|
4683
4778
|
const disableNext = lastRowIndex >= totalRowCount || disabled;
|
|
4684
4779
|
if (isMobile && SelectProps?.native !== false) SelectProps.native = true;
|
|
4685
4780
|
const tooltipProps = getCommonTooltipProps();
|
|
4686
|
-
return /* @__PURE__ */
|
|
4781
|
+
return /* @__PURE__ */ jsxs(Box, {
|
|
4687
4782
|
className: "MuiTablePagination-root",
|
|
4688
4783
|
sx: {
|
|
4689
4784
|
alignItems: "center",
|
|
@@ -4701,17 +4796,17 @@ const MRT_TablePagination = ({ position = "bottom", table, ...rest }) => {
|
|
|
4701
4796
|
py: "12px",
|
|
4702
4797
|
zIndex: 2
|
|
4703
4798
|
},
|
|
4704
|
-
children: [showRowsPerPage && /* @__PURE__ */
|
|
4799
|
+
children: [showRowsPerPage && /* @__PURE__ */ jsxs(Box, {
|
|
4705
4800
|
sx: {
|
|
4706
4801
|
alignItems: "center",
|
|
4707
4802
|
display: "flex",
|
|
4708
4803
|
gap: "8px"
|
|
4709
4804
|
},
|
|
4710
|
-
children: [/* @__PURE__ */
|
|
4805
|
+
children: [/* @__PURE__ */ jsx(InputLabel, {
|
|
4711
4806
|
htmlFor: `mrt-rows-per-page-${id}`,
|
|
4712
4807
|
sx: { mb: 0 },
|
|
4713
4808
|
children: localization.rowsPerPage
|
|
4714
|
-
}), /* @__PURE__ */
|
|
4809
|
+
}), /* @__PURE__ */ jsx(Select, {
|
|
4715
4810
|
disabled,
|
|
4716
4811
|
disableUnderline: true,
|
|
4717
4812
|
inputProps: {
|
|
@@ -4728,22 +4823,22 @@ const MRT_TablePagination = ({ position = "bottom", table, ...rest }) => {
|
|
|
4728
4823
|
children: rowsPerPageOptions.map((option) => {
|
|
4729
4824
|
const value = typeof option !== "number" ? option.value : option;
|
|
4730
4825
|
const label = typeof option !== "number" ? option.label : `${option}`;
|
|
4731
|
-
return SelectProps?.children ?? (SelectProps?.native ? /* @__PURE__ */
|
|
4826
|
+
return SelectProps?.children ?? (SelectProps?.native ? /* @__PURE__ */ jsx("option", {
|
|
4732
4827
|
value,
|
|
4733
4828
|
children: label
|
|
4734
|
-
}, value) : /* @__PURE__ */
|
|
4829
|
+
}, value) : /* @__PURE__ */ jsx(MenuItem, {
|
|
4735
4830
|
sx: { m: 0 },
|
|
4736
4831
|
value,
|
|
4737
4832
|
children: label
|
|
4738
4833
|
}, value));
|
|
4739
4834
|
})
|
|
4740
4835
|
})]
|
|
4741
|
-
}), paginationDisplayMode === "pages" ? /* @__PURE__ */
|
|
4836
|
+
}), paginationDisplayMode === "pages" ? /* @__PURE__ */ jsx(Pagination, {
|
|
4742
4837
|
count: numberOfPages,
|
|
4743
4838
|
disabled,
|
|
4744
4839
|
onChange: (_e, newPageIndex) => table.setPageIndex(newPageIndex - 1),
|
|
4745
4840
|
page: pageIndex + 1,
|
|
4746
|
-
renderItem: (item) => /* @__PURE__ */
|
|
4841
|
+
renderItem: (item) => /* @__PURE__ */ jsx(PaginationItem, {
|
|
4747
4842
|
slots: {
|
|
4748
4843
|
first: FirstPageIcon,
|
|
4749
4844
|
last: LastPageIcon,
|
|
@@ -4755,7 +4850,7 @@ const MRT_TablePagination = ({ position = "bottom", table, ...rest }) => {
|
|
|
4755
4850
|
showFirstButton,
|
|
4756
4851
|
showLastButton,
|
|
4757
4852
|
...restPaginationProps
|
|
4758
|
-
}) : paginationDisplayMode === "default" ? /* @__PURE__ */
|
|
4853
|
+
}) : paginationDisplayMode === "default" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Typography, {
|
|
4759
4854
|
align: "center",
|
|
4760
4855
|
component: "span",
|
|
4761
4856
|
sx: {
|
|
@@ -4764,51 +4859,51 @@ const MRT_TablePagination = ({ position = "bottom", table, ...rest }) => {
|
|
|
4764
4859
|
},
|
|
4765
4860
|
variant: "body2",
|
|
4766
4861
|
children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString(localization.language)}-${lastRowIndex.toLocaleString(localization.language)} ${localization.of} ${totalRowCount.toLocaleString(localization.language)}`
|
|
4767
|
-
}), /* @__PURE__ */
|
|
4862
|
+
}), /* @__PURE__ */ jsxs(Box, {
|
|
4768
4863
|
sx: { gap: "xs" },
|
|
4769
4864
|
children: [
|
|
4770
|
-
showFirstButton && /* @__PURE__ */
|
|
4865
|
+
showFirstButton && /* @__PURE__ */ jsx(Tooltip, {
|
|
4771
4866
|
...tooltipProps,
|
|
4772
4867
|
title: localization.goToFirstPage,
|
|
4773
|
-
children: /* @__PURE__ */
|
|
4868
|
+
children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, {
|
|
4774
4869
|
"aria-label": localization.goToFirstPage,
|
|
4775
4870
|
disabled: disableBack,
|
|
4776
4871
|
onClick: () => table.firstPage(),
|
|
4777
4872
|
size: "small",
|
|
4778
|
-
children: /* @__PURE__ */
|
|
4873
|
+
children: /* @__PURE__ */ jsx(FirstPageIcon, { ...flipIconStyles(theme) })
|
|
4779
4874
|
}) })
|
|
4780
4875
|
}),
|
|
4781
|
-
/* @__PURE__ */
|
|
4876
|
+
/* @__PURE__ */ jsx(Tooltip, {
|
|
4782
4877
|
...tooltipProps,
|
|
4783
4878
|
title: localization.goToPreviousPage,
|
|
4784
|
-
children: /* @__PURE__ */
|
|
4879
|
+
children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, {
|
|
4785
4880
|
"aria-label": localization.goToPreviousPage,
|
|
4786
4881
|
disabled: disableBack,
|
|
4787
4882
|
onClick: () => table.previousPage(),
|
|
4788
4883
|
size: "small",
|
|
4789
|
-
children: /* @__PURE__ */
|
|
4884
|
+
children: /* @__PURE__ */ jsx(ChevronLeftIcon, { ...flipIconStyles(theme) })
|
|
4790
4885
|
}) })
|
|
4791
4886
|
}),
|
|
4792
|
-
/* @__PURE__ */
|
|
4887
|
+
/* @__PURE__ */ jsx(Tooltip, {
|
|
4793
4888
|
...tooltipProps,
|
|
4794
4889
|
title: localization.goToNextPage,
|
|
4795
|
-
children: /* @__PURE__ */
|
|
4890
|
+
children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, {
|
|
4796
4891
|
"aria-label": localization.goToNextPage,
|
|
4797
4892
|
disabled: disableNext,
|
|
4798
4893
|
onClick: () => table.nextPage(),
|
|
4799
4894
|
size: "small",
|
|
4800
|
-
children: /* @__PURE__ */
|
|
4895
|
+
children: /* @__PURE__ */ jsx(ChevronRightIcon, { ...flipIconStyles(theme) })
|
|
4801
4896
|
}) })
|
|
4802
4897
|
}),
|
|
4803
|
-
showLastButton && /* @__PURE__ */
|
|
4898
|
+
showLastButton && /* @__PURE__ */ jsx(Tooltip, {
|
|
4804
4899
|
...tooltipProps,
|
|
4805
4900
|
title: localization.goToLastPage,
|
|
4806
|
-
children: /* @__PURE__ */
|
|
4901
|
+
children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, {
|
|
4807
4902
|
"aria-label": localization.goToLastPage,
|
|
4808
4903
|
disabled: disableNext,
|
|
4809
4904
|
onClick: () => table.lastPage(),
|
|
4810
4905
|
size: "small",
|
|
4811
|
-
children: /* @__PURE__ */
|
|
4906
|
+
children: /* @__PURE__ */ jsx(LastPageIcon, { ...flipIconStyles(theme) })
|
|
4812
4907
|
}) })
|
|
4813
4908
|
})
|
|
4814
4909
|
]
|
|
@@ -4818,24 +4913,24 @@ const MRT_TablePagination = ({ position = "bottom", table, ...rest }) => {
|
|
|
4818
4913
|
//#endregion
|
|
4819
4914
|
//#region src/components/toolbar/MRT_ToolbarDropZone.tsx
|
|
4820
4915
|
const MRT_ToolbarDropZone = ({ table, ...rest }) => {
|
|
4821
|
-
const {
|
|
4822
|
-
const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } =
|
|
4916
|
+
const { options: { enableGrouping, localization }, setHoveredColumn, setShowToolbarDropZone } = table;
|
|
4917
|
+
const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } = table.state;
|
|
4823
4918
|
const handleDragEnter = (_event) => {
|
|
4824
4919
|
setHoveredColumn({ id: "drop-zone" });
|
|
4825
4920
|
};
|
|
4826
4921
|
const handleDragOver = (e) => {
|
|
4827
4922
|
e.preventDefault();
|
|
4828
4923
|
};
|
|
4829
|
-
|
|
4924
|
+
useEffect(() => {
|
|
4830
4925
|
if (table.options.state?.showToolbarDropZone !== void 0) setShowToolbarDropZone(!!enableGrouping && !!draggingColumn && draggingColumn.columnDef.enableGrouping !== false && !grouping.includes(draggingColumn.id));
|
|
4831
4926
|
}, [
|
|
4832
4927
|
enableGrouping,
|
|
4833
4928
|
draggingColumn,
|
|
4834
4929
|
grouping
|
|
4835
4930
|
]);
|
|
4836
|
-
return /* @__PURE__ */
|
|
4931
|
+
return /* @__PURE__ */ jsx(Fade, {
|
|
4837
4932
|
in: showToolbarDropZone,
|
|
4838
|
-
children: /* @__PURE__ */
|
|
4933
|
+
children: /* @__PURE__ */ jsx(Box, {
|
|
4839
4934
|
className: "Mui-ToolbarDropZone",
|
|
4840
4935
|
onDragEnter: handleDragEnter,
|
|
4841
4936
|
onDragOver: handleDragOver,
|
|
@@ -4843,7 +4938,7 @@ const MRT_ToolbarDropZone = ({ table, ...rest }) => {
|
|
|
4843
4938
|
sx: (theme) => ({
|
|
4844
4939
|
alignItems: "center",
|
|
4845
4940
|
backdropFilter: "blur(4px)",
|
|
4846
|
-
backgroundColor:
|
|
4941
|
+
backgroundColor: alpha(theme.palette.info.main, hoveredColumn?.id === "drop-zone" ? .2 : .1),
|
|
4847
4942
|
border: `dashed ${theme.palette.info.main} 2px`,
|
|
4848
4943
|
boxSizing: "border-box",
|
|
4849
4944
|
display: "flex",
|
|
@@ -4854,7 +4949,7 @@ const MRT_ToolbarDropZone = ({ table, ...rest }) => {
|
|
|
4854
4949
|
zIndex: 4,
|
|
4855
4950
|
...parseFromValuesOrFunc(rest?.sx, theme)
|
|
4856
4951
|
}),
|
|
4857
|
-
children: /* @__PURE__ */
|
|
4952
|
+
children: /* @__PURE__ */ jsx(Typography, {
|
|
4858
4953
|
sx: { fontStyle: "italic" },
|
|
4859
4954
|
children: localization.dropToGroupBy.replace("{column}", draggingColumn?.columnDef?.header ?? "")
|
|
4860
4955
|
})
|
|
@@ -4864,15 +4959,15 @@ const MRT_ToolbarDropZone = ({ table, ...rest }) => {
|
|
|
4864
4959
|
//#endregion
|
|
4865
4960
|
//#region src/components/toolbar/MRT_BottomToolbar.tsx
|
|
4866
4961
|
const MRT_BottomToolbar = ({ table, ...rest }) => {
|
|
4867
|
-
const {
|
|
4868
|
-
const { isFullScreen } =
|
|
4869
|
-
const isMobile =
|
|
4962
|
+
const { options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions }, refs: { bottomToolbarRef } } = table;
|
|
4963
|
+
const { isFullScreen } = table.state;
|
|
4964
|
+
const isMobile = useMediaQuery("(max-width:720px)");
|
|
4870
4965
|
const toolbarProps = {
|
|
4871
4966
|
...parseFromValuesOrFunc(muiBottomToolbarProps, { table }),
|
|
4872
4967
|
...rest
|
|
4873
4968
|
};
|
|
4874
4969
|
const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
|
|
4875
|
-
return /* @__PURE__ */
|
|
4970
|
+
return /* @__PURE__ */ jsxs(Box, {
|
|
4876
4971
|
...toolbarProps,
|
|
4877
4972
|
ref: (node) => {
|
|
4878
4973
|
if (node) {
|
|
@@ -4886,23 +4981,23 @@ const MRT_BottomToolbar = ({ table, ...rest }) => {
|
|
|
4886
4981
|
theme
|
|
4887
4982
|
}),
|
|
4888
4983
|
bottom: isFullScreen ? "0" : void 0,
|
|
4889
|
-
boxShadow: `0 1px 2px -1px ${
|
|
4984
|
+
boxShadow: `0 1px 2px -1px ${alpha(theme.palette.grey[700], .5)} inset`,
|
|
4890
4985
|
left: 0,
|
|
4891
4986
|
position: isFullScreen ? "fixed" : "relative",
|
|
4892
4987
|
right: 0,
|
|
4893
4988
|
...parseFromValuesOrFunc(toolbarProps?.sx, theme)
|
|
4894
4989
|
}),
|
|
4895
4990
|
children: [
|
|
4896
|
-
/* @__PURE__ */
|
|
4991
|
+
/* @__PURE__ */ jsx(MRT_LinearProgressBar, {
|
|
4897
4992
|
isTopToolbar: false,
|
|
4898
4993
|
table
|
|
4899
4994
|
}),
|
|
4900
|
-
positionToolbarAlertBanner === "bottom" && /* @__PURE__ */
|
|
4995
|
+
positionToolbarAlertBanner === "bottom" && /* @__PURE__ */ jsx(MRT_ToolbarAlertBanner, {
|
|
4901
4996
|
stackAlertBanner,
|
|
4902
4997
|
table
|
|
4903
4998
|
}),
|
|
4904
|
-
["both", "bottom"].includes(positionToolbarDropZone ?? "") && /* @__PURE__ */
|
|
4905
|
-
/* @__PURE__ */
|
|
4999
|
+
["both", "bottom"].includes(positionToolbarDropZone ?? "") && /* @__PURE__ */ jsx(MRT_ToolbarDropZone, { table }),
|
|
5000
|
+
/* @__PURE__ */ jsxs(Box, {
|
|
4906
5001
|
sx: {
|
|
4907
5002
|
alignItems: "center",
|
|
4908
5003
|
boxSizing: "border-box",
|
|
@@ -4911,7 +5006,7 @@ const MRT_BottomToolbar = ({ table, ...rest }) => {
|
|
|
4911
5006
|
p: "0.5rem",
|
|
4912
5007
|
width: "100%"
|
|
4913
5008
|
},
|
|
4914
|
-
children: [renderBottomToolbarCustomActions ? renderBottomToolbarCustomActions({ table }) : /* @__PURE__ */
|
|
5009
|
+
children: [renderBottomToolbarCustomActions ? renderBottomToolbarCustomActions({ table }) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx(Box, {
|
|
4915
5010
|
sx: {
|
|
4916
5011
|
display: "flex",
|
|
4917
5012
|
justifyContent: "flex-end",
|
|
@@ -4919,7 +5014,7 @@ const MRT_BottomToolbar = ({ table, ...rest }) => {
|
|
|
4919
5014
|
right: 0,
|
|
4920
5015
|
top: 0
|
|
4921
5016
|
},
|
|
4922
|
-
children: enablePagination && ["both", "bottom"].includes(positionPagination ?? "") && /* @__PURE__ */
|
|
5017
|
+
children: enablePagination && ["both", "bottom"].includes(positionPagination ?? "") && /* @__PURE__ */ jsx(MRT_TablePagination, {
|
|
4923
5018
|
position: "bottom",
|
|
4924
5019
|
table
|
|
4925
5020
|
})
|
|
@@ -4932,7 +5027,7 @@ const MRT_BottomToolbar = ({ table, ...rest }) => {
|
|
|
4932
5027
|
//#region src/components/toolbar/MRT_ToolbarInternalButtons.tsx
|
|
4933
5028
|
const MRT_ToolbarInternalButtons = ({ table, ...rest }) => {
|
|
4934
5029
|
const { options: { columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableColumnPinning, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, initialState, renderToolbarInternalActions } } = table;
|
|
4935
|
-
return /* @__PURE__ */
|
|
5030
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
4936
5031
|
...rest,
|
|
4937
5032
|
sx: (theme) => ({
|
|
4938
5033
|
alignItems: "center",
|
|
@@ -4940,29 +5035,29 @@ const MRT_ToolbarInternalButtons = ({ table, ...rest }) => {
|
|
|
4940
5035
|
zIndex: 3,
|
|
4941
5036
|
...parseFromValuesOrFunc(rest?.sx, theme)
|
|
4942
5037
|
}),
|
|
4943
|
-
children: renderToolbarInternalActions?.({ table }) ?? /* @__PURE__ */
|
|
4944
|
-
enableFilters && enableGlobalFilter && !initialState?.showGlobalFilter && /* @__PURE__ */
|
|
4945
|
-
enableFilters && enableColumnFilters && columnFilterDisplayMode !== "popover" && /* @__PURE__ */
|
|
4946
|
-
(enableHiding || enableColumnOrdering || enableColumnPinning) && /* @__PURE__ */
|
|
4947
|
-
enableDensityToggle && /* @__PURE__ */
|
|
4948
|
-
enableFullScreenToggle && /* @__PURE__ */
|
|
5038
|
+
children: renderToolbarInternalActions?.({ table }) ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
5039
|
+
enableFilters && enableGlobalFilter && !initialState?.showGlobalFilter && /* @__PURE__ */ jsx(MRT_ToggleGlobalFilterButton, { table }),
|
|
5040
|
+
enableFilters && enableColumnFilters && columnFilterDisplayMode !== "popover" && /* @__PURE__ */ jsx(MRT_ToggleFiltersButton, { table }),
|
|
5041
|
+
(enableHiding || enableColumnOrdering || enableColumnPinning) && /* @__PURE__ */ jsx(MRT_ShowHideColumnsButton, { table }),
|
|
5042
|
+
enableDensityToggle && /* @__PURE__ */ jsx(MRT_ToggleDensePaddingButton, { table }),
|
|
5043
|
+
enableFullScreenToggle && /* @__PURE__ */ jsx(MRT_ToggleFullScreenButton, { table })
|
|
4949
5044
|
] })
|
|
4950
5045
|
});
|
|
4951
5046
|
};
|
|
4952
5047
|
//#endregion
|
|
4953
5048
|
//#region src/components/toolbar/MRT_TopToolbar.tsx
|
|
4954
5049
|
const MRT_TopToolbar = ({ table }) => {
|
|
4955
|
-
const {
|
|
4956
|
-
const { isFullScreen, showGlobalFilter } =
|
|
4957
|
-
const isMobile =
|
|
4958
|
-
const isTablet =
|
|
5050
|
+
const { options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions }, refs: { topToolbarRef } } = table;
|
|
5051
|
+
const { isFullScreen, showGlobalFilter } = table.state;
|
|
5052
|
+
const isMobile = useMediaQuery("(max-width:720px)");
|
|
5053
|
+
const isTablet = useMediaQuery("(max-width:1024px)");
|
|
4959
5054
|
const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
|
|
4960
5055
|
const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter && isTablet;
|
|
4961
5056
|
const globalFilterProps = {
|
|
4962
5057
|
sx: !isTablet ? { zIndex: 2 } : void 0,
|
|
4963
5058
|
table
|
|
4964
5059
|
};
|
|
4965
|
-
return /* @__PURE__ */
|
|
5060
|
+
return /* @__PURE__ */ jsxs(Box, {
|
|
4966
5061
|
...toolbarProps,
|
|
4967
5062
|
ref: (ref) => {
|
|
4968
5063
|
topToolbarRef.current = ref;
|
|
@@ -4978,12 +5073,12 @@ const MRT_TopToolbar = ({ table }) => {
|
|
|
4978
5073
|
...parseFromValuesOrFunc(toolbarProps?.sx, theme)
|
|
4979
5074
|
}),
|
|
4980
5075
|
children: [
|
|
4981
|
-
positionToolbarAlertBanner === "top" && /* @__PURE__ */
|
|
5076
|
+
positionToolbarAlertBanner === "top" && /* @__PURE__ */ jsx(MRT_ToolbarAlertBanner, {
|
|
4982
5077
|
stackAlertBanner,
|
|
4983
5078
|
table
|
|
4984
5079
|
}),
|
|
4985
|
-
["both", "top"].includes(positionToolbarDropZone ?? "") && /* @__PURE__ */
|
|
4986
|
-
/* @__PURE__ */
|
|
5080
|
+
["both", "top"].includes(positionToolbarDropZone ?? "") && /* @__PURE__ */ jsx(MRT_ToolbarDropZone, { table }),
|
|
5081
|
+
/* @__PURE__ */ jsxs(Box, {
|
|
4987
5082
|
sx: {
|
|
4988
5083
|
alignItems: "flex-start",
|
|
4989
5084
|
boxSizing: "border-box",
|
|
@@ -4997,9 +5092,9 @@ const MRT_TopToolbar = ({ table }) => {
|
|
|
4997
5092
|
width: "100%"
|
|
4998
5093
|
},
|
|
4999
5094
|
children: [
|
|
5000
|
-
enableGlobalFilter && positionGlobalFilter === "left" && /* @__PURE__ */
|
|
5001
|
-
renderTopToolbarCustomActions?.({ table }) ?? /* @__PURE__ */
|
|
5002
|
-
enableToolbarInternalActions ? /* @__PURE__ */
|
|
5095
|
+
enableGlobalFilter && positionGlobalFilter === "left" && /* @__PURE__ */ jsx(MRT_GlobalFilterTextField, { ...globalFilterProps }),
|
|
5096
|
+
renderTopToolbarCustomActions?.({ table }) ?? /* @__PURE__ */ jsx("span", {}),
|
|
5097
|
+
enableToolbarInternalActions ? /* @__PURE__ */ jsxs(Box, {
|
|
5003
5098
|
sx: {
|
|
5004
5099
|
alignItems: "center",
|
|
5005
5100
|
display: "flex",
|
|
@@ -5007,15 +5102,15 @@ const MRT_TopToolbar = ({ table }) => {
|
|
|
5007
5102
|
gap: "0.5rem",
|
|
5008
5103
|
justifyContent: "flex-end"
|
|
5009
5104
|
},
|
|
5010
|
-
children: [enableGlobalFilter && positionGlobalFilter === "right" && /* @__PURE__ */
|
|
5011
|
-
}) : enableGlobalFilter && positionGlobalFilter === "right" && /* @__PURE__ */
|
|
5105
|
+
children: [enableGlobalFilter && positionGlobalFilter === "right" && /* @__PURE__ */ jsx(MRT_GlobalFilterTextField, { ...globalFilterProps }), /* @__PURE__ */ jsx(MRT_ToolbarInternalButtons, { table })]
|
|
5106
|
+
}) : enableGlobalFilter && positionGlobalFilter === "right" && /* @__PURE__ */ jsx(MRT_GlobalFilterTextField, { ...globalFilterProps })
|
|
5012
5107
|
]
|
|
5013
5108
|
}),
|
|
5014
|
-
enablePagination && ["both", "top"].includes(positionPagination ?? "") && /* @__PURE__ */
|
|
5109
|
+
enablePagination && ["both", "top"].includes(positionPagination ?? "") && /* @__PURE__ */ jsx(MRT_TablePagination, {
|
|
5015
5110
|
position: "top",
|
|
5016
5111
|
table
|
|
5017
5112
|
}),
|
|
5018
|
-
/* @__PURE__ */
|
|
5113
|
+
/* @__PURE__ */ jsx(MRT_LinearProgressBar, {
|
|
5019
5114
|
isTopToolbar: true,
|
|
5020
5115
|
table
|
|
5021
5116
|
})
|
|
@@ -5025,8 +5120,8 @@ const MRT_TopToolbar = ({ table }) => {
|
|
|
5025
5120
|
//#endregion
|
|
5026
5121
|
//#region src/components/menus/MRT_CellActionMenu.tsx
|
|
5027
5122
|
const MRT_CellActionMenu = ({ table, ...rest }) => {
|
|
5028
|
-
const {
|
|
5029
|
-
const { actionCell, density } =
|
|
5123
|
+
const { options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderCellActionMenuItems }, refs: { actionCellRef } } = table;
|
|
5124
|
+
const { actionCell, density } = table.state;
|
|
5030
5125
|
const cell = actionCell;
|
|
5031
5126
|
const { row } = cell;
|
|
5032
5127
|
const { column } = cell;
|
|
@@ -5036,8 +5131,8 @@ const MRT_CellActionMenu = ({ table, ...rest }) => {
|
|
|
5036
5131
|
table.setActionCell(null);
|
|
5037
5132
|
actionCellRef.current = null;
|
|
5038
5133
|
};
|
|
5039
|
-
const internalMenuItems = [(parseFromValuesOrFunc(enableClickToCopy, cell) === "context-menu" || parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === "context-menu") && /* @__PURE__ */
|
|
5040
|
-
icon: /* @__PURE__ */
|
|
5134
|
+
const internalMenuItems = [(parseFromValuesOrFunc(enableClickToCopy, cell) === "context-menu" || parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === "context-menu") && /* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
5135
|
+
icon: /* @__PURE__ */ jsx(ContentCopy, {}),
|
|
5041
5136
|
label: localization.copy,
|
|
5042
5137
|
onClick: (event) => {
|
|
5043
5138
|
event.stopPropagation();
|
|
@@ -5045,8 +5140,8 @@ const MRT_CellActionMenu = ({ table, ...rest }) => {
|
|
|
5045
5140
|
handleClose();
|
|
5046
5141
|
},
|
|
5047
5142
|
table
|
|
5048
|
-
}, "mrt-copy"), parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === "cell" && /* @__PURE__ */
|
|
5049
|
-
icon: /* @__PURE__ */
|
|
5143
|
+
}, "mrt-copy"), parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === "cell" && /* @__PURE__ */ jsx(MRT_ActionMenuItem, {
|
|
5144
|
+
icon: /* @__PURE__ */ jsx(EditIcon, {}),
|
|
5050
5145
|
label: localization.edit,
|
|
5051
5146
|
onClick: () => {
|
|
5052
5147
|
openEditingCell({
|
|
@@ -5066,7 +5161,7 @@ const MRT_CellActionMenu = ({ table, ...rest }) => {
|
|
|
5066
5161
|
table
|
|
5067
5162
|
};
|
|
5068
5163
|
const menuItems = columnDef.renderCellActionMenuItems?.(renderActionProps) ?? renderCellActionMenuItems?.(renderActionProps);
|
|
5069
|
-
return (!!menuItems?.length || !!internalMenuItems?.length) && /* @__PURE__ */
|
|
5164
|
+
return (!!menuItems?.length || !!internalMenuItems?.length) && /* @__PURE__ */ jsx(Menu, {
|
|
5070
5165
|
anchorEl: actionCellRef.current,
|
|
5071
5166
|
disableScrollLock: true,
|
|
5072
5167
|
onClick: (event) => event.stopPropagation(),
|
|
@@ -5087,8 +5182,8 @@ const MRT_CellActionMenu = ({ table, ...rest }) => {
|
|
|
5087
5182
|
//#endregion
|
|
5088
5183
|
//#region src/components/modals/MRT_EditRowModal.tsx
|
|
5089
5184
|
const MRT_EditRowModal = ({ open, table, ...rest }) => {
|
|
5090
|
-
const {
|
|
5091
|
-
const { creatingRow, editingRow } =
|
|
5185
|
+
const { options: { localization, muiCreateRowModalProps, muiEditRowDialogProps, onCreatingRowCancel, onEditingRowCancel, renderCreateRowDialogContent, renderEditRowDialogContent }, setCreatingRow, setEditingRow } = table;
|
|
5186
|
+
const { creatingRow, editingRow } = table.state;
|
|
5092
5187
|
const row = creatingRow ?? editingRow;
|
|
5093
5188
|
const dialogProps = {
|
|
5094
5189
|
...parseFromValuesOrFunc(muiEditRowDialogProps, {
|
|
@@ -5101,11 +5196,11 @@ const MRT_EditRowModal = ({ open, table, ...rest }) => {
|
|
|
5101
5196
|
}),
|
|
5102
5197
|
...rest
|
|
5103
5198
|
};
|
|
5104
|
-
const internalEditComponents = row.getAllCells().filter((cell) => cell.column.columnDef.columnDefType === "data").map((cell) => /* @__PURE__ */
|
|
5199
|
+
const internalEditComponents = row.getAllCells().filter((cell) => cell.column.columnDef.columnDefType === "data").map((cell) => /* @__PURE__ */ jsx(MRT_EditCellTextField, {
|
|
5105
5200
|
cell,
|
|
5106
5201
|
table
|
|
5107
5202
|
}, cell.id));
|
|
5108
|
-
return /* @__PURE__ */
|
|
5203
|
+
return /* @__PURE__ */ jsx(Dialog, {
|
|
5109
5204
|
fullWidth: true,
|
|
5110
5205
|
maxWidth: "xs",
|
|
5111
5206
|
onClose: (event, reason) => {
|
|
@@ -5135,14 +5230,14 @@ const MRT_EditRowModal = ({ open, table, ...rest }) => {
|
|
|
5135
5230
|
internalEditComponents,
|
|
5136
5231
|
row,
|
|
5137
5232
|
table
|
|
5138
|
-
})) ?? /* @__PURE__ */
|
|
5139
|
-
/* @__PURE__ */
|
|
5233
|
+
})) ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
5234
|
+
/* @__PURE__ */ jsx(DialogTitle, {
|
|
5140
5235
|
sx: { textAlign: "center" },
|
|
5141
5236
|
children: localization.edit
|
|
5142
5237
|
}),
|
|
5143
|
-
/* @__PURE__ */
|
|
5238
|
+
/* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx("form", {
|
|
5144
5239
|
onSubmit: (e) => e.preventDefault(),
|
|
5145
|
-
children: /* @__PURE__ */
|
|
5240
|
+
children: /* @__PURE__ */ jsx(Stack, {
|
|
5146
5241
|
sx: {
|
|
5147
5242
|
gap: "32px",
|
|
5148
5243
|
paddingTop: "16px",
|
|
@@ -5151,9 +5246,9 @@ const MRT_EditRowModal = ({ open, table, ...rest }) => {
|
|
|
5151
5246
|
children: internalEditComponents
|
|
5152
5247
|
})
|
|
5153
5248
|
}) }),
|
|
5154
|
-
/* @__PURE__ */
|
|
5249
|
+
/* @__PURE__ */ jsx(DialogActions, {
|
|
5155
5250
|
sx: { p: "1.25rem" },
|
|
5156
|
-
children: /* @__PURE__ */
|
|
5251
|
+
children: /* @__PURE__ */ jsx(MRT_EditActionButtons, {
|
|
5157
5252
|
row,
|
|
5158
5253
|
table,
|
|
5159
5254
|
variant: "text"
|
|
@@ -5165,26 +5260,26 @@ const MRT_EditRowModal = ({ open, table, ...rest }) => {
|
|
|
5165
5260
|
//#endregion
|
|
5166
5261
|
//#region src/hooks/useMRT_ColumnVirtualizer.ts
|
|
5167
5262
|
const useMRT_ColumnVirtualizer = (table) => {
|
|
5168
|
-
const {
|
|
5169
|
-
const { columnPinning, columnVisibility, draggingColumn } =
|
|
5263
|
+
const { options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization }, refs: { tableContainerRef } } = table;
|
|
5264
|
+
const { columnPinning, columnVisibility, draggingColumn } = table.state;
|
|
5170
5265
|
if (!enableColumnVirtualization) return void 0;
|
|
5171
5266
|
const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, { table });
|
|
5172
5267
|
const visibleColumns = table.getVisibleLeafColumns();
|
|
5173
|
-
const [leftPinnedIndexes, rightPinnedIndexes] =
|
|
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)] : [[], []], [
|
|
5174
5269
|
columnPinning,
|
|
5175
5270
|
columnVisibility,
|
|
5176
5271
|
enableColumnPinning
|
|
5177
5272
|
]);
|
|
5178
5273
|
const numPinnedLeft = leftPinnedIndexes.length;
|
|
5179
5274
|
const numPinnedRight = rightPinnedIndexes.length;
|
|
5180
|
-
const draggingColumnIndex =
|
|
5181
|
-
const columnVirtualizer =
|
|
5275
|
+
const draggingColumnIndex = useMemo(() => draggingColumn?.id ? visibleColumns.findIndex((c) => c.id === draggingColumn?.id) : void 0, [draggingColumn?.id]);
|
|
5276
|
+
const columnVirtualizer = useVirtualizer({
|
|
5182
5277
|
count: visibleColumns.length,
|
|
5183
5278
|
estimateSize: (index) => visibleColumns[index].getSize(),
|
|
5184
5279
|
getScrollElement: () => tableContainerRef.current,
|
|
5185
5280
|
horizontal: true,
|
|
5186
5281
|
overscan: 3,
|
|
5187
|
-
rangeExtractor:
|
|
5282
|
+
rangeExtractor: useCallback((range) => {
|
|
5188
5283
|
const newIndexes = extraIndexRangeExtractor(range, draggingColumnIndex);
|
|
5189
5284
|
if (!numPinnedLeft && !numPinnedRight) return newIndexes;
|
|
5190
5285
|
return [.../* @__PURE__ */ new Set([
|
|
@@ -5217,14 +5312,14 @@ const useMRT_ColumnVirtualizer = (table) => {
|
|
|
5217
5312
|
//#endregion
|
|
5218
5313
|
//#region src/components/table/MRT_Table.tsx
|
|
5219
5314
|
const MRT_Table = ({ table, ...rest }) => {
|
|
5220
|
-
const { getFlatHeaders,
|
|
5221
|
-
const {
|
|
5315
|
+
const { getFlatHeaders, options: { columns, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, renderCaption } } = table;
|
|
5316
|
+
const { columnResizing, columnSizing, columnVisibility, isFullScreen } = table.state;
|
|
5222
5317
|
const tableProps = {
|
|
5223
5318
|
...parseFromValuesOrFunc(muiTableProps, { table }),
|
|
5224
5319
|
...rest
|
|
5225
5320
|
};
|
|
5226
5321
|
const Caption = parseFromValuesOrFunc(renderCaption, { table });
|
|
5227
|
-
const columnSizeVars =
|
|
5322
|
+
const columnSizeVars = useMemo(() => {
|
|
5228
5323
|
const headers = getFlatHeaders();
|
|
5229
5324
|
const colSizes = {};
|
|
5230
5325
|
for (let i = 0; i < headers.length; i++) {
|
|
@@ -5237,14 +5332,14 @@ const MRT_Table = ({ table, ...rest }) => {
|
|
|
5237
5332
|
}, [
|
|
5238
5333
|
columns,
|
|
5239
5334
|
columnSizing,
|
|
5240
|
-
|
|
5335
|
+
columnResizing,
|
|
5241
5336
|
columnVisibility
|
|
5242
5337
|
]);
|
|
5243
5338
|
const commonTableGroupProps = {
|
|
5244
5339
|
columnVirtualizer: useMRT_ColumnVirtualizer(table),
|
|
5245
5340
|
table
|
|
5246
5341
|
};
|
|
5247
|
-
return /* @__PURE__ */
|
|
5342
|
+
return /* @__PURE__ */ jsxs(Table, {
|
|
5248
5343
|
stickyHeader: enableStickyHeader || isFullScreen,
|
|
5249
5344
|
...tableProps,
|
|
5250
5345
|
style: {
|
|
@@ -5258,10 +5353,10 @@ const MRT_Table = ({ table, ...rest }) => {
|
|
|
5258
5353
|
...parseFromValuesOrFunc(tableProps?.sx, theme)
|
|
5259
5354
|
}),
|
|
5260
5355
|
children: [
|
|
5261
|
-
!!Caption && /* @__PURE__ */
|
|
5262
|
-
enableTableHead && /* @__PURE__ */
|
|
5263
|
-
memoMode === "table-body" ||
|
|
5264
|
-
enableTableFooter && /* @__PURE__ */
|
|
5356
|
+
!!Caption && /* @__PURE__ */ jsx("caption", { children: Caption }),
|
|
5357
|
+
enableTableHead && /* @__PURE__ */ jsx(MRT_TableHead, { ...commonTableGroupProps }),
|
|
5358
|
+
memoMode === "table-body" || columnResizing.isResizingColumn ? /* @__PURE__ */ jsx(Memo_MRT_TableBody, { ...commonTableGroupProps }) : /* @__PURE__ */ jsx(MRT_TableBody, { ...commonTableGroupProps }),
|
|
5359
|
+
enableTableFooter && /* @__PURE__ */ jsx(MRT_TableFooter, { ...commonTableGroupProps })
|
|
5265
5360
|
]
|
|
5266
5361
|
});
|
|
5267
5362
|
};
|
|
@@ -5273,10 +5368,10 @@ const MRT_TableLoadingOverlay = ({ table, ...rest }) => {
|
|
|
5273
5368
|
...parseFromValuesOrFunc(muiCircularProgressProps, { table }),
|
|
5274
5369
|
...rest
|
|
5275
5370
|
};
|
|
5276
|
-
return /* @__PURE__ */
|
|
5371
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
5277
5372
|
sx: {
|
|
5278
5373
|
alignItems: "center",
|
|
5279
|
-
backgroundColor:
|
|
5374
|
+
backgroundColor: alpha(baseBackgroundColor, .5),
|
|
5280
5375
|
bottom: 0,
|
|
5281
5376
|
display: "flex",
|
|
5282
5377
|
justifyContent: "center",
|
|
@@ -5288,7 +5383,7 @@ const MRT_TableLoadingOverlay = ({ table, ...rest }) => {
|
|
|
5288
5383
|
width: "100%",
|
|
5289
5384
|
zIndex: 3
|
|
5290
5385
|
},
|
|
5291
|
-
children: circularProgressProps?.Component ?? /* @__PURE__ */
|
|
5386
|
+
children: circularProgressProps?.Component ?? /* @__PURE__ */ jsx(CircularProgress, {
|
|
5292
5387
|
"aria-label": localization.noRecordsToDisplay,
|
|
5293
5388
|
id: `mrt-progress-${id}`,
|
|
5294
5389
|
...circularProgressProps
|
|
@@ -5297,12 +5392,12 @@ const MRT_TableLoadingOverlay = ({ table, ...rest }) => {
|
|
|
5297
5392
|
};
|
|
5298
5393
|
//#endregion
|
|
5299
5394
|
//#region src/components/table/MRT_TableContainer.tsx
|
|
5300
|
-
const useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
5395
|
+
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
|
|
5301
5396
|
const MRT_TableContainer = ({ table, ...rest }) => {
|
|
5302
|
-
const {
|
|
5303
|
-
const { actionCell, creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay } =
|
|
5397
|
+
const { options: { createDisplayMode, editDisplayMode, enableCellActions, enableStickyHeader, muiTableContainerProps }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef } } = table;
|
|
5398
|
+
const { actionCell, creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay } = table.state;
|
|
5304
5399
|
const loading = showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
|
|
5305
|
-
const [totalToolbarHeight, setTotalToolbarHeight] =
|
|
5400
|
+
const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
|
|
5306
5401
|
const tableContainerProps = {
|
|
5307
5402
|
...parseFromValuesOrFunc(muiTableContainerProps, { table }),
|
|
5308
5403
|
...rest
|
|
@@ -5314,7 +5409,7 @@ const MRT_TableContainer = ({ table, ...rest }) => {
|
|
|
5314
5409
|
});
|
|
5315
5410
|
const createModalOpen = createDisplayMode === "modal" && creatingRow;
|
|
5316
5411
|
const editModalOpen = editDisplayMode === "modal" && editingRow;
|
|
5317
|
-
return /* @__PURE__ */
|
|
5412
|
+
return /* @__PURE__ */ jsxs(TableContainer, {
|
|
5318
5413
|
"aria-busy": loading,
|
|
5319
5414
|
"aria-describedby": loading ? "mrt-progress" : void 0,
|
|
5320
5415
|
...tableContainerProps,
|
|
@@ -5336,27 +5431,27 @@ const MRT_TableContainer = ({ table, ...rest }) => {
|
|
|
5336
5431
|
...parseFromValuesOrFunc(tableContainerProps?.sx, theme)
|
|
5337
5432
|
}),
|
|
5338
5433
|
children: [
|
|
5339
|
-
loading ? /* @__PURE__ */
|
|
5340
|
-
/* @__PURE__ */
|
|
5341
|
-
(createModalOpen || editModalOpen) && /* @__PURE__ */
|
|
5434
|
+
loading ? /* @__PURE__ */ jsx(MRT_TableLoadingOverlay, { table }) : null,
|
|
5435
|
+
/* @__PURE__ */ jsx(MRT_Table, { table }),
|
|
5436
|
+
(createModalOpen || editModalOpen) && /* @__PURE__ */ jsx(MRT_EditRowModal, {
|
|
5342
5437
|
open: true,
|
|
5343
5438
|
table
|
|
5344
5439
|
}),
|
|
5345
|
-
enableCellActions && actionCell && /* @__PURE__ */
|
|
5440
|
+
enableCellActions && actionCell && /* @__PURE__ */ jsx(MRT_CellActionMenu, { table })
|
|
5346
5441
|
]
|
|
5347
5442
|
});
|
|
5348
5443
|
};
|
|
5349
5444
|
//#endregion
|
|
5350
5445
|
//#region src/components/table/MRT_TablePaper.tsx
|
|
5351
5446
|
const MRT_TablePaper = ({ table, ...rest }) => {
|
|
5352
|
-
const {
|
|
5353
|
-
const { isFullScreen } =
|
|
5447
|
+
const { options: { enableBottomToolbar, enableTopToolbar, mrtTheme: { baseBackgroundColor }, muiTablePaperProps, renderBottomToolbar, renderTopToolbar }, refs: { tablePaperRef } } = table;
|
|
5448
|
+
const { isFullScreen } = table.state;
|
|
5354
5449
|
const paperProps = {
|
|
5355
5450
|
...parseFromValuesOrFunc(muiTablePaperProps, { table }),
|
|
5356
5451
|
...rest
|
|
5357
5452
|
};
|
|
5358
|
-
const theme =
|
|
5359
|
-
return /* @__PURE__ */
|
|
5453
|
+
const theme = useTheme();
|
|
5454
|
+
return /* @__PURE__ */ jsxs(Paper, {
|
|
5360
5455
|
elevation: 2,
|
|
5361
5456
|
onKeyDown: (e) => e.key === "Escape" && table.setIsFullScreen(false),
|
|
5362
5457
|
...paperProps,
|
|
@@ -5389,9 +5484,9 @@ const MRT_TablePaper = ({ table, ...rest }) => {
|
|
|
5389
5484
|
...parseFromValuesOrFunc(paperProps?.sx, theme)
|
|
5390
5485
|
}),
|
|
5391
5486
|
children: [
|
|
5392
|
-
enableTopToolbar && (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? /* @__PURE__ */
|
|
5393
|
-
/* @__PURE__ */
|
|
5394
|
-
enableBottomToolbar && (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? /* @__PURE__ */
|
|
5487
|
+
enableTopToolbar && (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? /* @__PURE__ */ jsx(MRT_TopToolbar, { table })),
|
|
5488
|
+
/* @__PURE__ */ jsx(MRT_TableContainer, { table }),
|
|
5489
|
+
enableBottomToolbar && (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? /* @__PURE__ */ jsx(MRT_BottomToolbar, { table }))
|
|
5395
5490
|
]
|
|
5396
5491
|
});
|
|
5397
5492
|
};
|
|
@@ -5402,113 +5497,9 @@ const MaterialReactTable = (props) => {
|
|
|
5402
5497
|
let table;
|
|
5403
5498
|
if (isTableInstanceProp(props)) table = props.table;
|
|
5404
5499
|
else table = useMaterialReactTable(props);
|
|
5405
|
-
return /* @__PURE__ */
|
|
5500
|
+
return /* @__PURE__ */ jsx(MRT_TablePaper, { table });
|
|
5406
5501
|
};
|
|
5407
5502
|
//#endregion
|
|
5408
|
-
|
|
5409
|
-
exports.MRT_AggregationFns = MRT_AggregationFns;
|
|
5410
|
-
exports.MRT_BottomToolbar = MRT_BottomToolbar;
|
|
5411
|
-
exports.MRT_ColumnActionMenu = MRT_ColumnActionMenu;
|
|
5412
|
-
exports.MRT_ColumnPinningButtons = MRT_ColumnPinningButtons;
|
|
5413
|
-
exports.MRT_CopyButton = MRT_CopyButton;
|
|
5414
|
-
exports.MRT_DefaultColumn = MRT_DefaultColumn;
|
|
5415
|
-
exports.MRT_DefaultDisplayColumn = MRT_DefaultDisplayColumn;
|
|
5416
|
-
exports.MRT_EditActionButtons = MRT_EditActionButtons;
|
|
5417
|
-
exports.MRT_EditCellTextField = MRT_EditCellTextField;
|
|
5418
|
-
exports.MRT_EditRowModal = MRT_EditRowModal;
|
|
5419
|
-
exports.MRT_ExpandAllButton = MRT_ExpandAllButton;
|
|
5420
|
-
exports.MRT_ExpandButton = MRT_ExpandButton;
|
|
5421
|
-
exports.MRT_FilterCheckbox = MRT_FilterCheckbox;
|
|
5422
|
-
exports.MRT_FilterFns = MRT_FilterFns;
|
|
5423
|
-
exports.MRT_FilterOptionMenu = MRT_FilterOptionMenu;
|
|
5424
|
-
exports.MRT_FilterRangeFields = MRT_FilterRangeFields;
|
|
5425
|
-
exports.MRT_FilterRangeSlider = MRT_FilterRangeSlider;
|
|
5426
|
-
exports.MRT_FilterTextField = MRT_FilterTextField;
|
|
5427
|
-
exports.MRT_GlobalFilterTextField = MRT_GlobalFilterTextField;
|
|
5428
|
-
exports.MRT_GrabHandleButton = MRT_GrabHandleButton;
|
|
5429
|
-
exports.MRT_LinearProgressBar = MRT_LinearProgressBar;
|
|
5430
|
-
exports.MRT_RowActionMenu = MRT_RowActionMenu;
|
|
5431
|
-
exports.MRT_RowPinButton = MRT_RowPinButton;
|
|
5432
|
-
exports.MRT_SelectCheckbox = MRT_SelectCheckbox;
|
|
5433
|
-
exports.MRT_ShowHideColumnsButton = MRT_ShowHideColumnsButton;
|
|
5434
|
-
exports.MRT_ShowHideColumnsMenu = MRT_ShowHideColumnsMenu;
|
|
5435
|
-
exports.MRT_ShowHideColumnsMenuItems = MRT_ShowHideColumnsMenuItems;
|
|
5436
|
-
exports.MRT_SortingFns = MRT_SortingFns;
|
|
5437
|
-
exports.MRT_Table = MRT_Table;
|
|
5438
|
-
exports.MRT_TableBody = MRT_TableBody;
|
|
5439
|
-
exports.MRT_TableBodyCell = MRT_TableBodyCell;
|
|
5440
|
-
exports.MRT_TableBodyCellValue = MRT_TableBodyCellValue;
|
|
5441
|
-
exports.MRT_TableBodyRow = MRT_TableBodyRow;
|
|
5442
|
-
exports.MRT_TableBodyRowGrabHandle = MRT_TableBodyRowGrabHandle;
|
|
5443
|
-
exports.MRT_TableBodyRowPinButton = MRT_TableBodyRowPinButton;
|
|
5444
|
-
exports.MRT_TableContainer = MRT_TableContainer;
|
|
5445
|
-
exports.MRT_TableDetailPanel = MRT_TableDetailPanel;
|
|
5446
|
-
exports.MRT_TableFooter = MRT_TableFooter;
|
|
5447
|
-
exports.MRT_TableFooterCell = MRT_TableFooterCell;
|
|
5448
|
-
exports.MRT_TableFooterRow = MRT_TableFooterRow;
|
|
5449
|
-
exports.MRT_TableHead = MRT_TableHead;
|
|
5450
|
-
exports.MRT_TableHeadCell = MRT_TableHeadCell;
|
|
5451
|
-
exports.MRT_TableHeadCellColumnActionsButton = MRT_TableHeadCellColumnActionsButton;
|
|
5452
|
-
exports.MRT_TableHeadCellFilterContainer = MRT_TableHeadCellFilterContainer;
|
|
5453
|
-
exports.MRT_TableHeadCellFilterLabel = MRT_TableHeadCellFilterLabel;
|
|
5454
|
-
exports.MRT_TableHeadCellGrabHandle = MRT_TableHeadCellGrabHandle;
|
|
5455
|
-
exports.MRT_TableHeadCellResizeHandle = MRT_TableHeadCellResizeHandle;
|
|
5456
|
-
exports.MRT_TableHeadCellSortLabel = MRT_TableHeadCellSortLabel;
|
|
5457
|
-
exports.MRT_TableHeadRow = MRT_TableHeadRow;
|
|
5458
|
-
exports.MRT_TableLoadingOverlay = MRT_TableLoadingOverlay;
|
|
5459
|
-
exports.MRT_TablePagination = MRT_TablePagination;
|
|
5460
|
-
exports.MRT_TablePaper = MRT_TablePaper;
|
|
5461
|
-
exports.MRT_ToggleDensePaddingButton = MRT_ToggleDensePaddingButton;
|
|
5462
|
-
exports.MRT_ToggleFiltersButton = MRT_ToggleFiltersButton;
|
|
5463
|
-
exports.MRT_ToggleFullScreenButton = MRT_ToggleFullScreenButton;
|
|
5464
|
-
exports.MRT_ToggleGlobalFilterButton = MRT_ToggleGlobalFilterButton;
|
|
5465
|
-
exports.MRT_ToggleRowActionMenuButton = MRT_ToggleRowActionMenuButton;
|
|
5466
|
-
exports.MRT_ToolbarAlertBanner = MRT_ToolbarAlertBanner;
|
|
5467
|
-
exports.MRT_ToolbarDropZone = MRT_ToolbarDropZone;
|
|
5468
|
-
exports.MRT_ToolbarInternalButtons = MRT_ToolbarInternalButtons;
|
|
5469
|
-
exports.MRT_TopToolbar = MRT_TopToolbar;
|
|
5470
|
-
exports.MaterialReactTable = MaterialReactTable;
|
|
5471
|
-
exports.Memo_MRT_TableBody = Memo_MRT_TableBody;
|
|
5472
|
-
exports.Memo_MRT_TableBodyCell = Memo_MRT_TableBodyCell;
|
|
5473
|
-
exports.Memo_MRT_TableBodyRow = Memo_MRT_TableBodyRow;
|
|
5474
|
-
exports.cellKeyboardShortcuts = cellKeyboardShortcuts;
|
|
5475
|
-
exports.createMRTColumnHelper = createMRTColumnHelper;
|
|
5476
|
-
exports.createRow = createRow;
|
|
5477
|
-
exports.defaultDisplayColumnProps = defaultDisplayColumnProps;
|
|
5478
|
-
exports.flexRender = flexRender;
|
|
5479
|
-
exports.getAllLeafColumnDefs = getAllLeafColumnDefs;
|
|
5480
|
-
exports.getCanRankRows = getCanRankRows;
|
|
5481
|
-
exports.getColumnFilterInfo = getColumnFilterInfo;
|
|
5482
|
-
exports.getColumnId = getColumnId;
|
|
5483
|
-
exports.getDefaultColumnFilterFn = getDefaultColumnFilterFn;
|
|
5484
|
-
exports.getDefaultColumnOrderIds = getDefaultColumnOrderIds;
|
|
5485
|
-
exports.getIsRankingRows = getIsRankingRows;
|
|
5486
|
-
exports.getIsRowSelected = getIsRowSelected;
|
|
5487
|
-
exports.getLeadingDisplayColumnIds = getLeadingDisplayColumnIds;
|
|
5488
|
-
exports.getMRT_RowSelectionHandler = getMRT_RowSelectionHandler;
|
|
5489
|
-
exports.getMRT_Rows = getMRT_Rows;
|
|
5490
|
-
exports.getMRT_SelectAllHandler = getMRT_SelectAllHandler;
|
|
5491
|
-
exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
|
|
5492
|
-
exports.isCellEditable = isCellEditable;
|
|
5493
|
-
exports.mrtFilterOptions = mrtFilterOptions;
|
|
5494
|
-
exports.openEditingCell = openEditingCell;
|
|
5495
|
-
exports.prepareColumns = prepareColumns;
|
|
5496
|
-
exports.rankGlobalFuzzy = rankGlobalFuzzy;
|
|
5497
|
-
exports.reorderColumn = reorderColumn;
|
|
5498
|
-
exports.showRowActionsColumn = showRowActionsColumn;
|
|
5499
|
-
exports.showRowDragColumn = showRowDragColumn;
|
|
5500
|
-
exports.showRowExpandColumn = showRowExpandColumn;
|
|
5501
|
-
exports.showRowNumbersColumn = showRowNumbersColumn;
|
|
5502
|
-
exports.showRowPinningColumn = showRowPinningColumn;
|
|
5503
|
-
exports.showRowSelectionColumn = showRowSelectionColumn;
|
|
5504
|
-
exports.showRowSpacerColumn = showRowSpacerColumn;
|
|
5505
|
-
exports.useDropdownOptions = useDropdownOptions;
|
|
5506
|
-
exports.useMRT_ColumnVirtualizer = useMRT_ColumnVirtualizer;
|
|
5507
|
-
exports.useMRT_Effects = useMRT_Effects;
|
|
5508
|
-
exports.useMRT_RowVirtualizer = useMRT_RowVirtualizer;
|
|
5509
|
-
exports.useMRT_Rows = useMRT_Rows;
|
|
5510
|
-
exports.useMRT_TableInstance = useMRT_TableInstance;
|
|
5511
|
-
exports.useMRT_TableOptions = useMRT_TableOptions;
|
|
5512
|
-
exports.useMaterialReactTable = useMaterialReactTable;
|
|
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 };
|
|
5513
5504
|
|
|
5514
5505
|
//# sourceMappingURL=index.js.map
|