T
TanStack•3y ago
adverse-sapphire

@tanstack/react-table v8 with @tanstack/react-virtual v3: Resizing a table with large dataset

I have a table rendering a large data set, which i want to virtualise. I want to have the columns resizable, but as i resize the ui slows down. Any ideas or examples would be welcomed. the documentation and example on the tanstack site seem to use the older react-virtual v2 currently i have the virtual part on the tbody 
  <tbody>
    { virtualRows.map(virtualRow => {
        const row = rows[virtualRow.index]
        return (
          <tr key={row.id} >
            {row.getVisibleCells().map(cell => {
              return (
                <td key={cell.id}>
                  {flexRender(
                    cell.column.columnDef.cell,
                    cell.getContext()
                  )}
                </td>
              ) 
            })}
          </tr>
        )
      })
    }
    </tbody>
  <tbody>
    { virtualRows.map(virtualRow => {
        const row = rows[virtualRow.index]
        return (
          <tr key={row.id} >
            {row.getVisibleCells().map(cell => {
              return (
                <td key={cell.id}>
                  {flexRender(
                    cell.column.columnDef.cell,
                    cell.getContext()
                  )}
                </td>
              ) 
            })}
          </tr>
        )
      })
    }
    </tbody>
and I am setting up the hooks like so 
  const table = useReactTable({
      data,
      columns,
      columnResizeMode : 'onChange',
      enableColumnResizing: true,
      getCoreRowModel: getCoreRowModel(),
    });

    const {rows} = table.getRowModel();

    const virtualizer = useVirtualizer({
      count: data.length,
      getScrollElement: () => parentRef.current,
      estimateSize: () => 10,
    })
    const virtualRows = virtualizer.getVirtualItems();
  const table = useReactTable({
      data,
      columns,
      columnResizeMode : 'onChange',
      enableColumnResizing: true,
      getCoreRowModel: getCoreRowModel(),
    });

    const {rows} = table.getRowModel();

    const virtualizer = useVirtualizer({
      count: data.length,
      getScrollElement: () => parentRef.current,
      estimateSize: () => 10,
    })
    const virtualRows = virtualizer.getVirtualItems();
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?