Using React Radix UI Table with Virtuoso

[Rad710]

I'm using Radix UI Themes Table to show data. The problem is that I must show many rows, and this makes everything slow. I wanted to implement virtual rendering with react virtuoso and it somehow works but the style of the table is messed up and I get some errors like:

cannot appear as a child of . cannot appear as a child of

Here is a code snippet of what I have so far:

`
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import { Table } from "@radix-ui/themes"
import { useState } from "react"
import { TableVirtuoso } from 'react-virtuoso';

const TableScrollArea = () => {
const [scrollParent, setScrollParent] = useState();

// Create an empty array to store the objects
const dataArray = [];

// Define the data to be filled in the objects
const data = {
    name: 'AAA',
    email: 'AAA',
    title: 'AAA',
};

// Fill the array with 1000 entries, each containing the data
for (let i = 0; i < 10000; i++) {
    dataArray.push({ ...data });
}

const TableRow = ({ person }) => {
    return (
        <Table.Row>
            <Table.RowHeaderCell>{person.name}</Table.RowHeaderCell>
            <Table.Cell>{person.email}</Table.Cell>
            <Table.Cell>{person.title}</Table.Cell>
        </Table.Row>
    )
}


return (
    <ScrollAreaPrimitive.Root>
        <ScrollAreaPrimitive.Viewport ref={setScrollParent} className={`h-[300px]`}>
            
            <Table.Root>
                <Table.Header>
                    <Table.Row>
                        <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
                        <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
                        <Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    <TableVirtuoso
                        data={dataArray}
                        itemContent={(index, person) => <TableRow person={person} />}
                        customScrollParent={scrollParent ?? undefined}
                    />
                </Table.Body>
            </Table.Root>

        </ScrollAreaPrimitive.Viewport>
        <ScrollAreaPrimitive.Scrollbar
            orientation="vertical"
        >
            <ScrollAreaPrimitive.Thumb />
        </ScrollAreaPrimitive.Scrollbar>
    </ScrollAreaPrimitive.Root>
)
};
export default TableScrollArea

`

[vladmoroz]

Mostly, the parts of our table component don't do anything special. Table Root handles a scroll container itself, but other than that, sounds like you might find more react-virtuoso experts in the repository of that library rather than here.