From f663b9ede786b0d003ffa19bf7edb372c9b444d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=A0=E5=8B=87?= Date: Sat, 18 Jan 2025 20:12:18 +0800 Subject: [PATCH 1/5] fix: #1041, #1217, wrong draggingRowIndex in virtual when filtered. --- .../src/hooks/useMRT_RowVirtualizer.ts | 20 ++++-- ...dragging-virtual-when-filtered.stories.tsx | 68 +++++++++++++++++++ 2 files changed, 84 insertions(+), 4 deletions(-) create mode 100644 packages/material-react-table/stories/fixed-bugs/dragging-virtual-when-filtered.stories.tsx diff --git a/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts b/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts index 95883127e..2d4dba96b 100644 --- a/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts +++ b/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useCallback, useMemo } from 'react'; import { type Range, useVirtualizer } from '@tanstack/react-virtual'; import { type MRT_Row, @@ -36,7 +36,19 @@ export const useMRT_RowVirtualizer = < table, }); - const rowCount = rows?.length ?? getRowModel().rows.length; + const realRows = rows ?? getRowModel().rows; + /** + * when filtering, should find the correct index in filtered rows + */ + const draggingRowIndex = useMemo( + () => + draggingRow?.id + ? realRows.findIndex((r) => r.id === draggingRow?.id) + : undefined, + [draggingRow?.id], + ); + + const rowCount = realRows.length; const normalRowHeight = density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73; @@ -58,9 +70,9 @@ export const useMRT_RowVirtualizer = < overscan: 4, rangeExtractor: useCallback( (range: Range) => { - return extraIndexRangeExtractor(range, draggingRow?.index ?? 0); + return extraIndexRangeExtractor(range, draggingRowIndex); }, - [draggingRow], + [draggingRowIndex], ), ...rowVirtualizerProps, }) as unknown as MRT_RowVirtualizer; diff --git a/packages/material-react-table/stories/fixed-bugs/dragging-virtual-when-filtered.stories.tsx b/packages/material-react-table/stories/fixed-bugs/dragging-virtual-when-filtered.stories.tsx new file mode 100644 index 000000000..1ce72a2fb --- /dev/null +++ b/packages/material-react-table/stories/fixed-bugs/dragging-virtual-when-filtered.stories.tsx @@ -0,0 +1,68 @@ +import { faker } from '@faker-js/faker'; +import { type Meta } from '@storybook/react'; +import { useState } from 'react'; +import { + MaterialReactTable, + useMaterialReactTable, + type MRT_ColumnDef, +} from '../../src'; +const meta: Meta = { + title: 'Fixed Bugs/dragging virtual when filtered', +}; +export default meta; +const initData = [...Array(25)].map(() => ({ + age: faker.number.int(20) + 18, + email: faker.internet.email(), + firstName: faker.person.firstName(), + id: faker.string.alphanumeric(6), + lastName: faker.person.lastName(), +})); +initData.push({ + age: 18, + email: 'info@example.com', + firstName: 'Foobar', + lastName: 'Baz', + id: '1', +}); +const columns: MRT_ColumnDef<(typeof initData)[0]>[] = [ + { + accessorKey: 'id', + header: 'ID', + }, + { + accessorKey: 'firstName', + header: 'First Name', + }, + { + accessorKey: 'lastName', + header: 'Last Name', + }, + { + accessorKey: 'email', + header: 'Email Address', + }, + { + accessorKey: 'age', + header: 'Age', + }, + { + accessorKey: 'state', + header: 'State', + }, +]; +export const DraggingRowWhenFiltered = () => { + const [data, _setData] = useState(() => initData); + const t = useMaterialReactTable({ + enableRowVirtualization: true, + enableRowNumbers: true, + columns: columns, + data: data, + enableRowDragging: true, + initialState: { + density: 'compact', + columnFilters: [{ id: 'firstName', value: 'foo' }], + showColumnFilters: true, + }, + }); + return ; +}; From 021a1bd25a5b83cd9a88370902b02e08b036d97b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=A0=E5=8B=87?= Date: Sat, 18 Jan 2025 20:13:56 +0800 Subject: [PATCH 2/5] docs: add docs of wyh should do a extra index of rangeExtractor --- .../material-react-table/src/utils/virtualization.utils.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/material-react-table/src/utils/virtualization.utils.ts b/packages/material-react-table/src/utils/virtualization.utils.ts index 2b5e8a2d2..77f9975b1 100644 --- a/packages/material-react-table/src/utils/virtualization.utils.ts +++ b/packages/material-react-table/src/utils/virtualization.utils.ts @@ -1,5 +1,10 @@ import { type Range, defaultRangeExtractor } from '@tanstack/react-virtual'; +/** + * When scroll, the `draggingRow` or `draggingColumn` can be removed from document because of virtualization, + * then, the `dragEnd` event on `MRT_TableBodyRowGrabHandle` or `MRT_TableHeadCellGrabHandle` will not fire. + * We should keep the `draggingRow` or `draggingColumn` in `getVirtualItems()` to avoid this thing. + */ export const extraIndexRangeExtractor = ( range: Range, draggingIndex?: number, From 843b9a3f1f8738724af10a6becd4a95cd945bcd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=A0=E5=8B=87?= Date: Sat, 18 Jan 2025 20:15:05 +0800 Subject: [PATCH 3/5] chore: add vscode launch.json for debug storybook --- .vscode/launch.json | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..a17a2837d --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // 使用 IntelliSense 了解相关属性。 + // 悬停以查看现有属性的描述。 + // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "msedge", + "request": "launch", + "name": "storybook launch Edge", + "url": "http://localhost:6006", + "webRoot": "${workspaceFolder}/packages/material-react-table", + } + ] +} From 71eadae1c0bddd45cf8d360e2aad4ab8f974ab66 Mon Sep 17 00:00:00 2001 From: YongThePsibor <136299750+YongThePsibor@users.noreply.github.com> Date: Sat, 18 Jan 2025 21:01:24 +0800 Subject: [PATCH 4/5] Delete .vscode/launch.json --- .vscode/launch.json | 15 --------------- 1 file changed, 15 deletions(-) delete mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json deleted file mode 100644 index a17a2837d..000000000 --- a/.vscode/launch.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - // 使用 IntelliSense 了解相关属性。 - // 悬停以查看现有属性的描述。 - // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 - "version": "0.2.0", - "configurations": [ - { - "type": "msedge", - "request": "launch", - "name": "storybook launch Edge", - "url": "http://localhost:6006", - "webRoot": "${workspaceFolder}/packages/material-react-table", - } - ] -} From 8d4f390ec62ec4a0608a400c73b2fd7ffd6ea363 Mon Sep 17 00:00:00 2001 From: YongThePsibor <136299750+YongThePsibor@users.noreply.github.com> Date: Sun, 19 Jan 2025 22:16:55 +0800 Subject: [PATCH 5/5] fix: draggingRowIndex should depend on realRows --- .../material-react-table/src/hooks/useMRT_RowVirtualizer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts b/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts index 2d4dba96b..ae35eee57 100644 --- a/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts +++ b/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts @@ -45,7 +45,7 @@ export const useMRT_RowVirtualizer = < draggingRow?.id ? realRows.findIndex((r) => r.id === draggingRow?.id) : undefined, - [draggingRow?.id], + [realRows, draggingRow?.id], ); const rowCount = realRows.length;