material-react-table 2.0.0-beta.0 → 2.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/cjs/index.js +92 -66
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/body/MRT_TableBodyCell.d.ts +1 -1
- package/dist/cjs/types/body/MRT_TableBodyRow.d.ts +1 -1
- package/dist/esm/material-react-table.esm.js +92 -66
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/esm/types/body/MRT_TableBodyCell.d.ts +1 -1
- package/dist/esm/types/body/MRT_TableBodyRow.d.ts +1 -1
- package/dist/index.d.ts +2 -2
- package/package.json +1 -1
- package/src/body/MRT_TableBody.tsx +5 -0
- package/src/body/MRT_TableBodyCell.tsx +18 -4
- package/src/body/MRT_TableBodyRow.tsx +1 -1
- package/src/body/MRT_TableDetailPanel.tsx +1 -2
- package/src/head/MRT_TableHeadCell.tsx +21 -13
- package/src/head/MRT_TableHeadCellResizeHandle.tsx +8 -3
- package/src/inputs/MRT_EditCellTextField.tsx +10 -2
- package/src/table/MRT_TablePaper.tsx +1 -1
- package/src/toolbar/MRT_TablePagination.tsx +5 -2
|
@@ -4,7 +4,7 @@ import { type MRT_Cell, type MRT_TableInstance } from '../types';
|
|
|
4
4
|
interface Props<TData extends Record<string, any>> {
|
|
5
5
|
cell: MRT_Cell<TData>;
|
|
6
6
|
measureElement?: (element: HTMLTableCellElement) => void;
|
|
7
|
-
numRows
|
|
7
|
+
numRows?: number;
|
|
8
8
|
rowIndex: number;
|
|
9
9
|
rowRef: RefObject<HTMLTableRowElement>;
|
|
10
10
|
table: MRT_TableInstance<TData>;
|
|
@@ -3,7 +3,7 @@ import { type MRT_Row, type MRT_TableInstance } from '../types';
|
|
|
3
3
|
interface Props<TData extends Record<string, any>> {
|
|
4
4
|
columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
|
|
5
5
|
measureElement?: (element: HTMLTableRowElement) => void;
|
|
6
|
-
numRows
|
|
6
|
+
numRows?: number;
|
|
7
7
|
pinnedRowIds?: string[];
|
|
8
8
|
row: MRT_Row<TData>;
|
|
9
9
|
rowIndex: number;
|
|
@@ -530,11 +530,11 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
|
|
|
530
530
|
textFieldProps.inputRef = inputRef;
|
|
531
531
|
}
|
|
532
532
|
}
|
|
533
|
-
}, label: ['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
|
|
534
|
-
?
|
|
533
|
+
}, label: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
|
|
534
|
+
? columnDef.header
|
|
535
535
|
: undefined, margin: "none", name: column.id, placeholder: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
|
|
536
536
|
? columnDef.header
|
|
537
|
-
: undefined, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
|
|
537
|
+
: undefined, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { InputProps: Object.assign({ disableUnderline: editDisplayMode === 'table' }, textFieldProps.InputProps), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
|
|
538
538
|
var _a;
|
|
539
539
|
e.stopPropagation();
|
|
540
540
|
(_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
|
|
@@ -562,7 +562,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
|
|
|
562
562
|
var _a, _b, _c, _d;
|
|
563
563
|
const theme = useTheme();
|
|
564
564
|
const { getState, options: { createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiSkeletonProps, muiTableBodyCellProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
|
|
565
|
-
const { creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
|
|
565
|
+
const { columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
|
|
566
566
|
const { column, row } = cell;
|
|
567
567
|
const { columnDef } = column;
|
|
568
568
|
const { columnDefType } = columnDef;
|
|
@@ -599,12 +599,17 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
|
|
|
599
599
|
const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
|
|
600
600
|
const isFirstColumn = getIsFirstColumn(column, table);
|
|
601
601
|
const isLastColumn = getIsLastColumn(column, table);
|
|
602
|
-
const isLastRow = rowIndex === numRows - 1;
|
|
602
|
+
const isLastRow = numRows && rowIndex === numRows - 1;
|
|
603
603
|
const borderStyle = isDraggingColumn || isDraggingRow
|
|
604
604
|
? `1px dashed ${theme.palette.text.secondary} !important`
|
|
605
|
-
: isHoveredColumn ||
|
|
605
|
+
: isHoveredColumn ||
|
|
606
|
+
isHoveredRow ||
|
|
607
|
+
columnSizingInfo.isResizingColumn === column.id
|
|
606
608
|
? `2px dashed ${theme.palette.primary.main} !important`
|
|
607
609
|
: undefined;
|
|
610
|
+
if (columnSizingInfo.isResizingColumn === column.id) {
|
|
611
|
+
return { borderRight: borderStyle };
|
|
612
|
+
}
|
|
608
613
|
return borderStyle
|
|
609
614
|
? {
|
|
610
615
|
borderBottom: isDraggingRow || isHoveredRow || isLastRow
|
|
@@ -623,7 +628,14 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
|
|
|
623
628
|
borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
|
|
624
629
|
}
|
|
625
630
|
: undefined;
|
|
626
|
-
}, [
|
|
631
|
+
}, [
|
|
632
|
+
columnSizingInfo.isResizingColumn,
|
|
633
|
+
draggingColumn,
|
|
634
|
+
draggingRow,
|
|
635
|
+
hoveredColumn,
|
|
636
|
+
hoveredRow,
|
|
637
|
+
rowIndex,
|
|
638
|
+
]);
|
|
627
639
|
const isEditable = parseFromValuesOrFunc(enableEditing, row) &&
|
|
628
640
|
parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
|
|
629
641
|
const isEditing = isEditable &&
|
|
@@ -730,7 +742,7 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow,
|
|
|
730
742
|
: undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
|
|
731
743
|
}, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
|
|
732
744
|
? lighten(theme.palette.background.default, 0.05)
|
|
733
|
-
: undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : 'table-cell',
|
|
745
|
+
: undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : 'table-cell', py: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
|
|
734
746
|
};
|
|
735
747
|
|
|
736
748
|
const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
|
|
@@ -850,8 +862,8 @@ const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFil
|
|
|
850
862
|
|
|
851
863
|
const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
|
|
852
864
|
var _a, _b, _c, _d, _e, _f;
|
|
853
|
-
const { getBottomRows, getCenterRows, getIsSomeRowsPinned, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { enableGlobalFilterRankedResults, enablePagination, enableRowPinning, enableRowVirtualization, enableStickyFooter, enableStickyHeader, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
|
|
854
|
-
const { columnFilters, density, draggingRow, expanded, globalFilter, isFullScreen, pagination, rowPinning, sorting, } = getState();
|
|
865
|
+
const { getBottomRows, getCenterRows, getIsSomeRowsPinned, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enableGlobalFilterRankedResults, enablePagination, enableRowPinning, enableRowVirtualization, enableStickyFooter, enableStickyHeader, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
|
|
866
|
+
const { columnFilters, creatingRow, density, draggingRow, expanded, globalFilter, isFullScreen, pagination, rowPinning, sorting, } = getState();
|
|
855
867
|
const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
|
|
856
868
|
const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
|
|
857
869
|
table,
|
|
@@ -934,44 +946,44 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
|
|
|
934
946
|
virtualPaddingRight,
|
|
935
947
|
};
|
|
936
948
|
return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
|
|
937
|
-
}) }))),
|
|
949
|
+
}) }))), jsxs(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
|
|
938
950
|
? `${rowVirtualizer.getTotalSize()}px`
|
|
939
|
-
: 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: (_c = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _c !== void 0 ? _c : (!rows.length ? (jsx("tr", { style: {
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
951
|
+
: 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: [creatingRow && createDisplayMode === 'row' && (jsx(MRT_TableBodyRow, { row: creatingRow, rowIndex: -1, table: table })), (_c = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _c !== void 0 ? _c : (!rows.length ? (jsx("tr", { style: {
|
|
952
|
+
display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
|
|
953
|
+
}, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
|
|
954
|
+
display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
|
|
955
|
+
? 'grid'
|
|
956
|
+
: 'table-cell',
|
|
957
|
+
}, children: (_d = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _d !== void 0 ? _d : (jsx(Typography, { sx: {
|
|
958
|
+
color: 'text.secondary',
|
|
959
|
+
fontStyle: 'italic',
|
|
960
|
+
maxWidth: `min(100vw, ${(_f = (_e = tablePaperRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 360}px)`,
|
|
961
|
+
py: '2rem',
|
|
962
|
+
textAlign: 'center',
|
|
963
|
+
width: '100%',
|
|
964
|
+
}, children: globalFilter || columnFilters.length
|
|
965
|
+
? localization.noResultsFound
|
|
966
|
+
: localization.noRecordsToDisplay })) }) })) : (jsx(Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
|
|
967
|
+
const row = rowVirtualizer
|
|
968
|
+
? rows[rowOrVirtualRow.index]
|
|
969
|
+
: rowOrVirtualRow;
|
|
970
|
+
const props = {
|
|
971
|
+
columnVirtualizer,
|
|
972
|
+
measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
|
|
973
|
+
numRows: rows.length,
|
|
974
|
+
pinnedRowIds,
|
|
975
|
+
row,
|
|
976
|
+
rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
|
|
977
|
+
table,
|
|
978
|
+
virtualColumns,
|
|
979
|
+
virtualPaddingLeft,
|
|
980
|
+
virtualPaddingRight,
|
|
981
|
+
virtualRow: rowVirtualizer
|
|
982
|
+
? rowOrVirtualRow
|
|
983
|
+
: undefined,
|
|
984
|
+
};
|
|
985
|
+
return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
|
|
986
|
+
}) })))] })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
|
|
975
987
|
getIsSomeRowsPinned('bottom') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ bottom: tableFooterHeight - 1, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, rowIndex) => {
|
|
976
988
|
const props = {
|
|
977
989
|
columnVirtualizer,
|
|
@@ -1863,13 +1875,17 @@ const MRT_TableHeadCellResizeHandle = ({ header, table, }) => {
|
|
|
1863
1875
|
}, sx: (theme) => ({
|
|
1864
1876
|
'&:active > hr': {
|
|
1865
1877
|
backgroundColor: theme.palette.info.main,
|
|
1866
|
-
opacity: 1,
|
|
1878
|
+
opacity: header.subHeaders.length ? 1 : 0,
|
|
1867
1879
|
},
|
|
1868
1880
|
cursor: 'col-resize',
|
|
1869
|
-
mr: density === 'compact'
|
|
1881
|
+
mr: density === 'compact'
|
|
1882
|
+
? '-12px'
|
|
1883
|
+
: density === 'comfortable'
|
|
1884
|
+
? '-20px'
|
|
1885
|
+
: '-28px',
|
|
1870
1886
|
position: 'absolute',
|
|
1871
1887
|
px: '4px',
|
|
1872
|
-
right: '
|
|
1888
|
+
right: '0',
|
|
1873
1889
|
}), children: jsx(Divider, { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
|
|
1874
1890
|
borderRadius: '2px',
|
|
1875
1891
|
borderWidth: '2px',
|
|
@@ -1914,7 +1930,7 @@ const MRT_TableHeadCell = ({ header, table, }) => {
|
|
|
1914
1930
|
var _a, _b, _c, _d, _f;
|
|
1915
1931
|
const theme = useTheme();
|
|
1916
1932
|
const { getState, options: { columnFilterDisplayMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
|
|
1917
|
-
const { density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
|
|
1933
|
+
const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
|
|
1918
1934
|
const { column } = header;
|
|
1919
1935
|
const { columnDef } = column;
|
|
1920
1936
|
const { columnDefType } = columnDef;
|
|
@@ -1941,18 +1957,27 @@ const MRT_TableHeadCell = ({ header, table, }) => {
|
|
|
1941
1957
|
pl += 1.5;
|
|
1942
1958
|
return pl;
|
|
1943
1959
|
}, [showColumnActions, showDragHandle]);
|
|
1944
|
-
const
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
? `2px
|
|
1948
|
-
:
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1960
|
+
const draggingBorders = useMemo(() => {
|
|
1961
|
+
const borderStyle = columnSizingInfo.isResizingColumn === column.id &&
|
|
1962
|
+
!header.subHeaders.length
|
|
1963
|
+
? `2px solid ${theme.palette.primary.main} !important`
|
|
1964
|
+
: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
|
|
1965
|
+
? `1px dashed ${theme.palette.text.secondary}`
|
|
1966
|
+
: (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
|
|
1967
|
+
? `2px dashed ${theme.palette.primary.main}`
|
|
1968
|
+
: undefined;
|
|
1969
|
+
if (columnSizingInfo.isResizingColumn === column.id) {
|
|
1970
|
+
return { borderRight: borderStyle };
|
|
1954
1971
|
}
|
|
1955
|
-
|
|
1972
|
+
const draggingBorders = borderStyle
|
|
1973
|
+
? {
|
|
1974
|
+
borderLeft: borderStyle,
|
|
1975
|
+
borderRight: borderStyle,
|
|
1976
|
+
borderTop: borderStyle,
|
|
1977
|
+
}
|
|
1978
|
+
: undefined;
|
|
1979
|
+
return draggingBorders;
|
|
1980
|
+
}, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
|
|
1956
1981
|
const handleDragEnter = (_e) => {
|
|
1957
1982
|
if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
|
|
1958
1983
|
setHoveredColumn(null);
|
|
@@ -2107,8 +2132,9 @@ const MRT_TablePagination = ({ position = 'bottom', table, }) => {
|
|
|
2107
2132
|
return (jsxs(Box, { sx: {
|
|
2108
2133
|
alignItems: 'center',
|
|
2109
2134
|
display: 'flex',
|
|
2135
|
+
flexWrap: 'wrap',
|
|
2110
2136
|
gap: '8px',
|
|
2111
|
-
justifyContent: 'space-between',
|
|
2137
|
+
justifyContent: { md: 'space-between', sm: 'center' },
|
|
2112
2138
|
justifySelf: 'flex-end',
|
|
2113
2139
|
mt: position === 'top' &&
|
|
2114
2140
|
enableToolbarInternalActions &&
|
|
@@ -2119,12 +2145,12 @@ const MRT_TablePagination = ({ position = 'bottom', table, }) => {
|
|
|
2119
2145
|
px: '4px',
|
|
2120
2146
|
py: '12px',
|
|
2121
2147
|
zIndex: 2,
|
|
2122
|
-
}, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, { id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: {
|
|
2148
|
+
}, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, { disableUnderline: true, id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsx(MenuItem, { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
|
|
2123
2149
|
first: FirstPageIcon,
|
|
2124
2150
|
last: LastPageIcon,
|
|
2125
2151
|
next: ChevronRightIcon,
|
|
2126
2152
|
previous: ChevronLeftIcon,
|
|
2127
|
-
} }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { sx: { mb: 0, minWidth: '10ch', mx: '4px' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) })), jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, {}) }), jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }), showLastButton && (jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }))] })] })) : null] }));
|
|
2153
|
+
} }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", sx: { mb: 0, minWidth: '10ch', mx: '4px' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) })), jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, {}) }), jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }), showLastButton && (jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }))] })] })) : null] }));
|
|
2128
2154
|
};
|
|
2129
2155
|
|
|
2130
2156
|
const MRT_GlobalFilterTextField = ({ table, }) => {
|
|
@@ -2821,7 +2847,7 @@ const MRT_TablePaper = ({ table, }) => {
|
|
|
2821
2847
|
right: 0,
|
|
2822
2848
|
top: 0,
|
|
2823
2849
|
width: '100vw',
|
|
2824
|
-
zIndex:
|
|
2850
|
+
zIndex: 9999,
|
|
2825
2851
|
}
|
|
2826
2852
|
: {})), tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), sx: (theme) => (Object.assign({ overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx, theme))), children: [enableTopToolbar &&
|
|
2827
2853
|
((_a = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _a !== void 0 ? _a : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
|