Skip to content

Commit 30a2309

Browse files
KevinVandyKevinVandy
committed
simplify virtualizer types
1 parent 93b9dcc commit 30a2309

File tree

11 files changed

+71
-83
lines changed

11 files changed

+71
-83
lines changed

‎packages/material-react-table/src/body/MRT_TableBody.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,11 @@ import {
1616
interface Props<TData extends MRT_RowData> extends TableBodyProps {
1717
columnVirtualizer?: MRT_ColumnVirtualizer;
1818
table: MRT_TableInstance<TData>;
19-
virtualColumns?: VirtualItem[];
2019
}
2120

2221
export const MRT_TableBody = <TData extends MRT_RowData>({
2322
columnVirtualizer,
2423
table,
25-
virtualColumns,
2624
...rest
2725
}: Props<TData>) => {
2826
const {
@@ -70,15 +68,12 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
7068

7169
const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
7270

73-
const virtualRows = rowVirtualizer
74-
? rowVirtualizer.getVirtualItems()
75-
: undefined;
71+
const { virtualRows } = rowVirtualizer ?? {};
7672

7773
const commonRowProps = {
7874
columnVirtualizer,
7975
numRows: rows.length,
8076
table,
81-
virtualColumns,
8277
};
8378

8479
const CreatingRow = creatingRow && createDisplayMode === 'row' && (
@@ -186,13 +181,11 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
186181
? (rowOrVirtualRow as VirtualItem)
187182
: undefined,
188183
};
184+
const key = `${row.id}-${row.index}`;
189185
return memoMode === 'rows' ? (
190-
<Memo_MRT_TableBodyRow
191-
key={`${row.id}-${row.index}`}
192-
{...props}
193-
/>
186+
<Memo_MRT_TableBodyRow key={key} {...props} />
194187
) : (
195-
<MRT_TableBodyRow key={`${row.id}-${row.index}`} {...props} />
188+
<MRT_TableBodyRow key={key} {...props} />
196189
);
197190
})}
198191
</>
@@ -217,7 +210,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
217210
rowIndex,
218211
};
219212
return memoMode === 'rows' ? (
220-
<Memo_MRT_TableBodyRow key={`${row.id}`} {...props} />
213+
<Memo_MRT_TableBodyRow key={row.id} {...props} />
221214
) : (
222215
<MRT_TableBodyRow key={row.id} {...props} />
223216
);

‎packages/material-react-table/src/body/MRT_TableBodyRow.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ interface Props<TData extends MRT_RowData> {
2828
row: MRT_Row<TData>;
2929
rowIndex: number;
3030
table: MRT_TableInstance<TData>;
31-
virtualColumns?: VirtualItem[];
3231
virtualRow?: VirtualItem;
3332
}
3433

@@ -40,7 +39,6 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
4039
row,
4140
rowIndex,
4241
table,
43-
virtualColumns,
4442
virtualRow,
4543
}: Props<TData>) => {
4644
const theme = useTheme();
@@ -72,7 +70,8 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
7270
rowPinning,
7371
} = getState();
7472

75-
const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
73+
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
74+
columnVirtualizer ?? {};
7675

7776
const isPinned = enableRowPinning && row.getIsPinned();
7877

‎packages/material-react-table/src/column.utils.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -314,9 +314,10 @@ export const createRow = <TData extends MRT_RowData>(
314314

315315
export const extraIndexRangeExtractor = (
316316
range: Range,
317-
draggingIndex: number,
317+
draggingIndex?: number,
318318
) => {
319319
const newIndexes = defaultRangeExtractor(range);
320+
if (draggingIndex === undefined) return newIndexes;
320321
if (
321322
draggingIndex >= 0 &&
322323
draggingIndex < Math.max(range.startIndex - range.overscan, 0)

‎packages/material-react-table/src/footer/MRT_TableFooter.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { type VirtualItem } from '@tanstack/react-virtual';
21
import TableFooter, { type TableFooterProps } from '@mui/material/TableFooter';
32
import { MRT_TableFooterRow } from './MRT_TableFooterRow';
43
import { parseFromValuesOrFunc } from '../column.utils';
@@ -11,13 +10,11 @@ import {
1110
interface Props<TData extends MRT_RowData> extends TableFooterProps {
1211
columnVirtualizer?: MRT_ColumnVirtualizer;
1312
table: MRT_TableInstance<TData>;
14-
virtualColumns?: VirtualItem[];
1513
}
1614

1715
export const MRT_TableFooter = <TData extends MRT_RowData>({
1816
columnVirtualizer,
1917
table,
20-
virtualColumns,
2118
...rest
2219
}: Props<TData>) => {
2320
const {
@@ -68,7 +65,6 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
6865
footerGroup={footerGroup as any}
6966
key={footerGroup.id}
7067
table={table}
71-
virtualColumns={virtualColumns}
7268
/>
7369
))}
7470
</TableFooter>

‎packages/material-react-table/src/footer/MRT_TableFooterRow.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { type VirtualItem } from '@tanstack/react-virtual';
21
import TableRow, { type TableRowProps } from '@mui/material/TableRow';
32
import { MRT_TableFooterCell } from './MRT_TableFooterCell';
43
import { parseFromValuesOrFunc } from '../column.utils';
@@ -15,21 +14,20 @@ interface Props<TData extends MRT_RowData> extends TableRowProps {
1514
columnVirtualizer?: MRT_ColumnVirtualizer;
1615
footerGroup: MRT_HeaderGroup<TData>;
1716
table: MRT_TableInstance<TData>;
18-
virtualColumns?: VirtualItem[];
1917
}
2018

2119
export const MRT_TableFooterRow = <TData extends MRT_RowData>({
2220
columnVirtualizer,
2321
footerGroup,
2422
table,
25-
virtualColumns,
2623
...rest
2724
}: Props<TData>) => {
2825
const {
2926
options: { layoutMode, muiTableFooterRowProps },
3027
} = table;
3128

32-
const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
29+
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
30+
columnVirtualizer ?? {};
3331

3432
// if no content in row, skip row
3533
if (

‎packages/material-react-table/src/head/MRT_TableHead.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { type VirtualItem } from '@tanstack/react-virtual';
21
import TableHead, { type TableHeadProps } from '@mui/material/TableHead';
32
import { MRT_TableHeadRow } from './MRT_TableHeadRow';
43
import { parseFromValuesOrFunc } from '../column.utils';
@@ -12,13 +11,11 @@ import {
1211
interface Props<TData extends MRT_RowData> extends TableHeadProps {
1312
columnVirtualizer?: MRT_ColumnVirtualizer;
1413
table: MRT_TableInstance<TData>;
15-
virtualColumns?: VirtualItem[];
1614
}
1715

1816
export const MRT_TableHead = <TData extends MRT_RowData>({
1917
columnVirtualizer,
2018
table,
21-
virtualColumns,
2219
...rest
2320
}: Props<TData>) => {
2421
const {
@@ -85,7 +82,6 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
8582
headerGroup={headerGroup as any}
8683
key={headerGroup.id}
8784
table={table}
88-
virtualColumns={virtualColumns}
8985
/>
9086
))
9187
)}

‎packages/material-react-table/src/head/MRT_TableHeadRow.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { type VirtualItem } from '@tanstack/react-virtual';
21
import { alpha } from '@mui/material';
32
import TableRow, { type TableRowProps } from '@mui/material/TableRow';
43
import { MRT_TableHeadCell } from './MRT_TableHeadCell';
@@ -16,21 +15,20 @@ interface Props<TData extends MRT_RowData> extends TableRowProps {
1615
columnVirtualizer?: MRT_ColumnVirtualizer;
1716
headerGroup: MRT_HeaderGroup<TData>;
1817
table: MRT_TableInstance<TData>;
19-
virtualColumns?: VirtualItem[];
2018
}
2119

2220
export const MRT_TableHeadRow = <TData extends MRT_RowData>({
2321
columnVirtualizer,
2422
headerGroup,
2523
table,
26-
virtualColumns,
2724
...rest
2825
}: Props<TData>) => {
2926
const {
3027
options: { layoutMode, muiTableHeadRowProps },
3128
} = table;
3229

33-
const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
30+
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
31+
columnVirtualizer ?? {};
3432

3533
const tableRowProps = {
3634
...parseFromValuesOrFunc(muiTableHeadRowProps, {

‎packages/material-react-table/src/hooks/useMRT_ColumnVirtualizer.ts‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,11 @@ export const useMRT_ColumnVirtualizer = <
6767
return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
6868
}, [table.getRowModel().rows, columnPinning, columnVisibility]);
6969

70-
const draggingColumnIndex = table
71-
.getVisibleLeafColumns()
72-
.findIndex((c) => c.id === draggingColumn?.id);
70+
const draggingColumnIndex = draggingColumn?.id
71+
? table
72+
.getVisibleLeafColumns()
73+
.findIndex((c) => c.id === draggingColumn?.id)
74+
: undefined;
7375

7476
const columnVirtualizer = enableColumnVirtualization
7577
? (useVirtualizer({
@@ -98,28 +100,27 @@ export const useMRT_ColumnVirtualizer = <
98100
}) as unknown as MRT_ColumnVirtualizer<TScrollElement, TItemElement>)
99101
: undefined;
100102

101-
if (columnVirtualizerInstanceRef && columnVirtualizer) {
102-
//@ts-ignore
103-
columnVirtualizerInstanceRef.current = columnVirtualizer;
104-
}
105-
106-
const virtualColumns = columnVirtualizer
107-
? columnVirtualizer.getVirtualItems()
108-
: undefined;
109-
110-
if (columnVirtualizer && virtualColumns?.length) {
111-
columnVirtualizer.virtualPaddingLeft =
112-
(virtualColumns[leftPinnedIndexes.length]?.start ?? 0) -
113-
(virtualColumns[leftPinnedIndexes.length - 1]?.end ?? 0);
114-
columnVirtualizer.virtualPaddingRight =
115-
columnVirtualizer.getTotalSize() -
116-
(virtualColumns[virtualColumns.length - rightPinnedIndexes.length - 1]
117-
?.end ?? 0) -
118-
(rightPinnedIndexes.length
119-
? columnVirtualizer.getTotalSize() -
120-
(virtualColumns[virtualColumns.length - rightPinnedIndexes.length]
121-
?.start ?? 0)
122-
: 0);
103+
if (columnVirtualizer) {
104+
const virtualColumns = columnVirtualizer.getVirtualItems();
105+
columnVirtualizer.virtualColumns = virtualColumns;
106+
if (virtualColumns.length) {
107+
columnVirtualizer.virtualPaddingLeft =
108+
(virtualColumns[leftPinnedIndexes.length]?.start ?? 0) -
109+
(virtualColumns[leftPinnedIndexes.length - 1]?.end ?? 0);
110+
columnVirtualizer.virtualPaddingRight =
111+
columnVirtualizer.getTotalSize() -
112+
(virtualColumns[virtualColumns.length - rightPinnedIndexes.length - 1]
113+
?.end ?? 0) -
114+
(rightPinnedIndexes.length
115+
? columnVirtualizer.getTotalSize() -
116+
(virtualColumns[virtualColumns.length - rightPinnedIndexes.length]
117+
?.start ?? 0)
118+
: 0);
119+
}
120+
if (columnVirtualizerInstanceRef) {
121+
//@ts-ignore
122+
columnVirtualizerInstanceRef.current = columnVirtualizer;
123+
}
123124
}
124125

125126
return columnVirtualizer as any;

‎packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,13 @@ export const useMRT_RowVirtualizer = <
5757
}) as unknown as MRT_RowVirtualizer<TScrollElement, TItemElement>)
5858
: undefined;
5959

60-
if (rowVirtualizerInstanceRef && rowVirtualizer) {
61-
//@ts-ignore
62-
rowVirtualizerInstanceRef.current = rowVirtualizer;
60+
if (rowVirtualizer) {
61+
const virtualRows = rowVirtualizer.getVirtualItems();
62+
rowVirtualizer.virtualRows = virtualRows;
63+
if (rowVirtualizerInstanceRef) {
64+
//@ts-ignore
65+
rowVirtualizerInstanceRef.current = rowVirtualizer;
66+
}
6367
}
6468

6569
return rowVirtualizer;

‎packages/material-react-table/src/table/MRT_Table.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,9 @@ export const MRT_Table = <TData extends MRT_RowData>({
5353

5454
const columnVirtualizer = useMRT_ColumnVirtualizer(table);
5555

56-
const virtualColumns = columnVirtualizer
57-
? columnVirtualizer.getVirtualItems()
58-
: undefined;
59-
6056
const commonTableGroupProps = {
6157
columnVirtualizer,
6258
table,
63-
virtualColumns,
6459
};
6560

6661
return (

0 commit comments

Comments
 (0)