Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: Fixed issue on rowVirtualizer. When the rows are filtered, UI is getting disturbed

Browse source
This commit is contained in:
Kavin Venkatachalam 2025-04-02 13:17:41 +05:30
parent ede354756d
commit 14ac063612
2 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableRow.jsx
View file

@ -27,7 +27,7 @@ export const TableRow = ({
return (
<tr
key={row.id}
key={row.uniqueId}
ref={measureElement}
data-index={virtualRow.index}
style={{

13
frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTable.js
View file

@ -7,6 +7,7 @@ import {
getFilteredRowModel,
} from '@tanstack/react-table';
import { applyFilters } from '../_components/Header/_components/Filter/filterUtils';
import { v4 as uuidv4 } from 'uuid';
export function useTable({
data,
@ -32,7 +33,15 @@ export function useTable({
// When the columns change, the data is not getting re-rendered. So, we need to create a new data array
// eslint-disable-next-line react-hooks/exhaustive-deps
const newData = useMemo(() => [...data], [data, columns]);
const newData = useMemo(
() =>
data.map((row) => ({
...row,
uniqueId: row.uniqueId || uuidv4(), // Use existing ID if available
})),
// eslint-disable-next-line react-hooks/exhaustive-deps
[data, columns]
);
const table = useReactTable({
data: newData,
@ -44,7 +53,7 @@ export function useTable({
getFilteredRowModel: getFilteredRowModel(),
enableColumnResizing: true,
columnResizeMode: 'onChange',
getRowId: (row) => row.uuid,
getRowId: (row) => row.uniqueId,
enableRowSelection: true,
enableMultiRowSelection: showBulkSelector,
state: {