material-react-table 0.40.0 → 0.40.3
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/cjs/MaterialReactTable.d.ts +10 -2
- package/dist/cjs/index.js +56 -31
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/menus/MRT_RowActionMenu.d.ts +2 -2
- package/dist/esm/MaterialReactTable.d.ts +10 -2
- package/dist/esm/material-react-table.esm.js +56 -31
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/esm/menus/MRT_RowActionMenu.d.ts +2 -2
- package/dist/index.d.ts +11 -3
- package/package.json +4 -4
- package/src/MaterialReactTable.tsx +10 -5
- package/src/body/MRT_TableBody.tsx +15 -10
- package/src/buttons/MRT_CopyButton.tsx +4 -3
- package/src/buttons/MRT_EditActionButtons.tsx +4 -1
- package/src/buttons/MRT_ExpandButton.tsx +5 -3
- package/src/buttons/MRT_GrabHandleButton.tsx +4 -0
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +8 -3
- package/src/head/MRT_TableHeadCell.tsx +21 -13
- package/src/inputs/MRT_EditCellTextField.tsx +4 -2
- package/src/inputs/MRT_SelectCheckbox.tsx +4 -0
- package/src/menus/MRT_RowActionMenu.tsx +2 -2
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +1 -1
- package/src/table/MRT_TableRoot.tsx +1 -1
- package/src/toolbar/MRT_ToolbarDropZone.tsx +10 -2
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, MouseEvent } from 'react';
|
|
2
2
|
import type { MRT_Row, MRT_TableInstance } from '..';
|
|
3
3
|
interface Props {
|
|
4
4
|
anchorEl: HTMLElement | null;
|
|
5
|
-
handleEdit: () => void;
|
|
5
|
+
handleEdit: (event: MouseEvent) => void;
|
|
6
6
|
row: MRT_Row;
|
|
7
7
|
setAnchorEl: (anchorEl: HTMLElement | null) => void;
|
|
8
8
|
table: MRT_TableInstance;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Dispatch, DragEvent, MutableRefObject, ReactNode, SetStateAction } from 'react';
|
|
2
2
|
import type { AlertProps, ButtonProps, CheckboxProps, ChipProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
|
|
3
3
|
import type { Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
|
|
4
|
-
import type { Options as VirtualizerOptions } from 'react-virtual';
|
|
4
|
+
import type { Options as VirtualizerOptions, VirtualItem } from 'react-virtual';
|
|
5
5
|
import { MRT_Icons } from './icons';
|
|
6
6
|
import { MRT_FilterFns } from './filterFns';
|
|
7
7
|
import { MRT_Localization } from './localization';
|
|
@@ -509,6 +509,14 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
|
509
509
|
virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>> | (({ table, }: {
|
|
510
510
|
table: MRT_TableInstance<TData>;
|
|
511
511
|
}) => Partial<VirtualizerOptions<HTMLDivElement>>);
|
|
512
|
+
virtualizerInstanceRef?: MutableRefObject<Virtualizer | null>;
|
|
512
513
|
};
|
|
513
|
-
declare
|
|
514
|
+
export declare type Virtualizer = {
|
|
515
|
+
virtualItems: VirtualItem[];
|
|
516
|
+
totalSize: number;
|
|
517
|
+
scrollToOffset: (index: number, options?: any | undefined) => void;
|
|
518
|
+
scrollToIndex: (index: number, options?: any | undefined) => void;
|
|
519
|
+
measure: () => void;
|
|
520
|
+
};
|
|
521
|
+
declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
|
|
514
522
|
export default _default;
|
|
@@ -274,12 +274,15 @@ const MRT_ExpandButton = ({ row, table }) => {
|
|
|
274
274
|
const iconButtonProps = muiExpandButtonProps instanceof Function
|
|
275
275
|
? muiExpandButtonProps({ table, row })
|
|
276
276
|
: muiExpandButtonProps;
|
|
277
|
-
const handleToggleExpand = () => {
|
|
277
|
+
const handleToggleExpand = (event) => {
|
|
278
|
+
var _a;
|
|
279
|
+
event.stopPropagation();
|
|
278
280
|
row.toggleExpanded();
|
|
281
|
+
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
|
|
279
282
|
};
|
|
280
283
|
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.expand },
|
|
281
284
|
React.createElement("span", null,
|
|
282
|
-
React.createElement(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !row.getCanExpand() && !renderDetailPanel
|
|
285
|
+
React.createElement(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !row.getCanExpand() && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
|
283
286
|
? iconButtonProps.sx(theme)
|
|
284
287
|
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
|
|
285
288
|
React.createElement(ExpandMoreIcon, { style: {
|
|
@@ -458,7 +461,11 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
|
|
|
458
461
|
const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
|
|
459
462
|
const { options: { icons: { DragHandleIcon }, localization, }, } = table;
|
|
460
463
|
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: localization.move },
|
|
461
|
-
React.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", onDragStart: onDragStart, onDragEnd: onDragEnd, size: "small" }, iconButtonProps, {
|
|
464
|
+
React.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", onDragStart: onDragStart, onDragEnd: onDragEnd, size: "small" }, iconButtonProps, { onClick: (e) => {
|
|
465
|
+
var _a;
|
|
466
|
+
e.stopPropagation();
|
|
467
|
+
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
|
|
468
|
+
}, sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 0.2s ease-in-out', '&:hover': {
|
|
462
469
|
backgroundColor: 'transparent',
|
|
463
470
|
opacity: 1,
|
|
464
471
|
}, '&:active': {
|
|
@@ -615,7 +622,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
|
|
|
615
622
|
}
|
|
616
623
|
};
|
|
617
624
|
const handleDragEnter = (_e) => {
|
|
618
|
-
if (!isDragging) {
|
|
625
|
+
if (!isDragging && columnDef.enableColumnOrdering !== false) {
|
|
619
626
|
setHoveredColumn(column);
|
|
620
627
|
}
|
|
621
628
|
};
|
|
@@ -909,7 +916,7 @@ const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
|
|
|
909
916
|
values: (_b = editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache) !== null && _b !== void 0 ? _b : Object.assign({}, row.original),
|
|
910
917
|
});
|
|
911
918
|
};
|
|
912
|
-
return (React.createElement(Box, { sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React.createElement(React.Fragment, null,
|
|
919
|
+
return (React.createElement(Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React.createElement(React.Fragment, null,
|
|
913
920
|
React.createElement(Tooltip, { arrow: true, title: localization.cancel },
|
|
914
921
|
React.createElement(IconButton, { "aria-label": localization.cancel, onClick: handleCancel },
|
|
915
922
|
React.createElement(CancelIcon, null))),
|
|
@@ -930,7 +937,7 @@ const commonIconButtonStyles = {
|
|
|
930
937
|
opacity: 1,
|
|
931
938
|
},
|
|
932
939
|
};
|
|
933
|
-
const MRT_ToggleRowActionMenuButton = ({ cell, row, table }) => {
|
|
940
|
+
const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
|
|
934
941
|
const { getState, options: { editingMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
|
|
935
942
|
const { editingRow } = getState();
|
|
936
943
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
@@ -939,7 +946,8 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table }) => {
|
|
|
939
946
|
event.preventDefault();
|
|
940
947
|
setAnchorEl(event.currentTarget);
|
|
941
948
|
};
|
|
942
|
-
const handleStartEditMode = () => {
|
|
949
|
+
const handleStartEditMode = (event) => {
|
|
950
|
+
event.stopPropagation();
|
|
943
951
|
setEditingRow(Object.assign({}, row));
|
|
944
952
|
setAnchorEl(null);
|
|
945
953
|
};
|
|
@@ -971,7 +979,11 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
|
|
|
971
979
|
? selectAllMode === 'all'
|
|
972
980
|
? table.getToggleAllRowsSelectedHandler()
|
|
973
981
|
: table.getToggleAllPageRowsSelectedHandler()
|
|
974
|
-
: row.getToggleSelectedHandler(), size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, {
|
|
982
|
+
: row.getToggleSelectedHandler(), size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
|
|
983
|
+
var _a;
|
|
984
|
+
e.stopPropagation();
|
|
985
|
+
(_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
|
|
986
|
+
}, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
|
|
975
987
|
? checkboxProps.sx(theme)
|
|
976
988
|
: checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) }))));
|
|
977
989
|
};
|
|
@@ -1175,11 +1187,13 @@ const MRT_ToolbarInternalButtons = ({ table }) => {
|
|
|
1175
1187
|
const MRT_ToolbarDropZone = ({ table }) => {
|
|
1176
1188
|
var _a, _b;
|
|
1177
1189
|
const { getState, options: { enableGrouping, localization }, setHoveredColumn, } = table;
|
|
1178
|
-
const { draggingColumn, hoveredColumn } = getState();
|
|
1190
|
+
const { draggingColumn, hoveredColumn, grouping } = getState();
|
|
1179
1191
|
const handleDragEnter = (_event) => {
|
|
1180
1192
|
setHoveredColumn({ id: 'drop-zone' });
|
|
1181
1193
|
};
|
|
1182
|
-
return (React.createElement(Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping &&
|
|
1194
|
+
return (React.createElement(Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping &&
|
|
1195
|
+
!!draggingColumn &&
|
|
1196
|
+
!grouping.includes(draggingColumn.id) },
|
|
1183
1197
|
React.createElement(Box, { sx: (theme) => ({
|
|
1184
1198
|
alignItems: 'center',
|
|
1185
1199
|
backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
|
|
@@ -1626,7 +1640,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
|
|
|
1626
1640
|
var _a, _b, _c, _d;
|
|
1627
1641
|
const theme = useTheme();
|
|
1628
1642
|
const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnResizing, enableGrouping, enableMultiSort, muiTableHeadCellProps, }, setHoveredColumn, } = table;
|
|
1629
|
-
const { density, draggingColumn, hoveredColumn, showColumnFilters } = getState();
|
|
1643
|
+
const { density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
|
|
1630
1644
|
const { column } = header;
|
|
1631
1645
|
const { columnDef } = column;
|
|
1632
1646
|
const { columnDefType } = columnDef;
|
|
@@ -1742,11 +1756,14 @@ const MRT_TableHeadCell = ({ header, table }) => {
|
|
|
1742
1756
|
column.getCanSort() && (React.createElement(MRT_TableHeadCellSortLabel, { header: header, table: table })),
|
|
1743
1757
|
column.getCanFilter() && (React.createElement(MRT_TableHeadCellFilterLabel, { header: header, table: table }))),
|
|
1744
1758
|
columnDefType !== 'group' && (React.createElement(Box, { sx: { whiteSpace: 'nowrap' } },
|
|
1745
|
-
|
|
1746
|
-
columnDef.enableColumnDragging !== false
|
|
1747
|
-
(
|
|
1748
|
-
|
|
1749
|
-
|
|
1759
|
+
enableColumnDragging !== false &&
|
|
1760
|
+
columnDef.enableColumnDragging !== false &&
|
|
1761
|
+
(enableColumnDragging ||
|
|
1762
|
+
(enableColumnOrdering &&
|
|
1763
|
+
columnDef.enableColumnOrdering !== false) ||
|
|
1764
|
+
(enableGrouping &&
|
|
1765
|
+
columnDef.enableGrouping !== false &&
|
|
1766
|
+
!grouping.includes(column.id))) && (React.createElement(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: tableHeadCellRef })),
|
|
1750
1767
|
(enableColumnActions || columnDef.enableColumnActions) &&
|
|
1751
1768
|
columnDef.enableColumnActions !== false && (React.createElement(MRT_TableHeadCellColumnActionsButton, { header: header, table: table })))),
|
|
1752
1769
|
column.getCanResize() && (React.createElement(MRT_TableHeadCellResizeHandle, { header: header, table: table })))),
|
|
@@ -1826,7 +1843,11 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
|
|
|
1826
1843
|
textFieldProps.inputRef = inputRef;
|
|
1827
1844
|
}
|
|
1828
1845
|
}
|
|
1829
|
-
}, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: column.id,
|
|
1846
|
+
}, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: column.id, placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onClick: (e) => {
|
|
1847
|
+
var _a;
|
|
1848
|
+
e.stopPropagation();
|
|
1849
|
+
(_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
|
|
1850
|
+
}, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown })));
|
|
1830
1851
|
};
|
|
1831
1852
|
|
|
1832
1853
|
const MRT_CopyButton = ({ cell, children, table, }) => {
|
|
@@ -1834,7 +1855,8 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
|
|
|
1834
1855
|
const { column, row } = cell;
|
|
1835
1856
|
const { columnDef } = column;
|
|
1836
1857
|
const [copied, setCopied] = useState(false);
|
|
1837
|
-
const handleCopy = (text) => {
|
|
1858
|
+
const handleCopy = (event, text) => {
|
|
1859
|
+
event.stopPropagation();
|
|
1838
1860
|
navigator.clipboard.writeText(text);
|
|
1839
1861
|
setCopied(true);
|
|
1840
1862
|
setTimeout(() => setCopied(false), 4000);
|
|
@@ -1850,7 +1872,7 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
|
|
|
1850
1872
|
: columnDef.muiTableBodyCellCopyButtonProps;
|
|
1851
1873
|
const buttonProps = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
|
|
1852
1874
|
return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: copied ? localization.copiedToClipboard : localization.clickToCopy },
|
|
1853
|
-
React.createElement(Button, Object.assign({ onClick: () => handleCopy(cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
|
|
1875
|
+
React.createElement(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
|
|
1854
1876
|
? buttonProps.sx(theme)
|
|
1855
1877
|
: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))) }), children)));
|
|
1856
1878
|
};
|
|
@@ -2100,7 +2122,7 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
|
|
|
2100
2122
|
};
|
|
2101
2123
|
|
|
2102
2124
|
const MRT_TableBody = ({ table, tableContainerRef }) => {
|
|
2103
|
-
const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, muiTableBodyProps, virtualizerProps, }, } = table;
|
|
2125
|
+
const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, muiTableBodyProps, virtualizerProps, virtualizerInstanceRef, }, } = table;
|
|
2104
2126
|
const { globalFilter, pagination, sorting } = getState();
|
|
2105
2127
|
const tableBodyProps = muiTableBodyProps instanceof Function
|
|
2106
2128
|
? muiTableBodyProps({ table })
|
|
@@ -2128,10 +2150,15 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
|
|
|
2128
2150
|
: getRowModel().rows,
|
|
2129
2151
|
globalFilter,
|
|
2130
2152
|
]);
|
|
2131
|
-
const
|
|
2153
|
+
const virtualizer = enableRowVirtualization
|
|
2132
2154
|
? useVirtual(Object.assign({ size: rows.length, parentRef: tableContainerRef, overscan: 15 }, vProps))
|
|
2133
2155
|
: {};
|
|
2134
|
-
|
|
2156
|
+
useEffect(() => {
|
|
2157
|
+
if (virtualizerInstanceRef) {
|
|
2158
|
+
virtualizerInstanceRef.current = virtualizer;
|
|
2159
|
+
}
|
|
2160
|
+
}, [virtualizer]);
|
|
2161
|
+
// const virtualizer: Virtualizer = enableRowVirtualization
|
|
2135
2162
|
// ? useVirtualizer({
|
|
2136
2163
|
// count: rows.length,
|
|
2137
2164
|
// estimateSize: () => (density === 'compact' ? 25 : 50),
|
|
@@ -2140,24 +2167,22 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
|
|
|
2140
2167
|
// ...vProps,
|
|
2141
2168
|
// })
|
|
2142
2169
|
// : ({} as any);
|
|
2143
|
-
const virtualRows = enableRowVirtualization
|
|
2144
|
-
? rowVirtualizer.virtualItems
|
|
2145
|
-
: [];
|
|
2170
|
+
const virtualRows = enableRowVirtualization ? virtualizer.virtualItems : [];
|
|
2146
2171
|
// const virtualRows = enableRowVirtualization
|
|
2147
|
-
// ?
|
|
2172
|
+
// ? virtualizer.getVirtualItems()
|
|
2148
2173
|
// : [];
|
|
2149
2174
|
let paddingTop = 0;
|
|
2150
2175
|
let paddingBottom = 0;
|
|
2151
2176
|
if (enableRowVirtualization) {
|
|
2152
2177
|
paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
|
|
2153
2178
|
paddingBottom = !!virtualRows.length
|
|
2154
|
-
?
|
|
2179
|
+
? virtualizer.totalSize - virtualRows[virtualRows.length - 1].end
|
|
2155
2180
|
: 0;
|
|
2156
2181
|
}
|
|
2157
2182
|
// if (enableRowVirtualization) {
|
|
2158
2183
|
// paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
|
|
2159
2184
|
// paddingBottom = !!virtualRows.length
|
|
2160
|
-
// ?
|
|
2185
|
+
// ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
|
|
2161
2186
|
// : 0;
|
|
2162
2187
|
// }
|
|
2163
2188
|
return (React.createElement(TableBody, Object.assign({}, tableBodyProps),
|
|
@@ -2443,7 +2468,7 @@ const MRT_TableRoot = (props) => {
|
|
|
2443
2468
|
if (props.tableInstanceRef) {
|
|
2444
2469
|
props.tableInstanceRef.current = table;
|
|
2445
2470
|
}
|
|
2446
|
-
}, []);
|
|
2471
|
+
}, [table]);
|
|
2447
2472
|
return (React.createElement(React.Fragment, null,
|
|
2448
2473
|
React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => setIsFullScreen(false), open: isFullScreen, transitionDuration: 400 },
|
|
2449
2474
|
React.createElement(MRT_TablePaper, { table: table })),
|
|
@@ -2452,8 +2477,8 @@ const MRT_TableRoot = (props) => {
|
|
|
2452
2477
|
};
|
|
2453
2478
|
|
|
2454
2479
|
var MaterialReactTable = (_a) => {
|
|
2455
|
-
var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true,
|
|
2456
|
-
return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions,
|
|
2480
|
+
var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
|
|
2481
|
+
return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
|
|
2457
2482
|
};
|
|
2458
2483
|
|
|
2459
2484
|
export { MRT_CopyButton, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTable as default };
|