Table Virtuoso with mui table

The structure of TableVirtuoso is compatible with the markup of MUI Table. Notice the adjustment of the borderCollapse styling.

MUI Table virtualized with Table Virtuoso

import { TableVirtuoso } from 'react-virtuoso'
import { generateUsers } from './data'
import React from 'react'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableContainer from '@mui/material/TableContainer'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
import Paper from '@mui/material/Paper'

export default function App() {
  return (
    <TableVirtuoso
      style={{ height: 400 }}
      data={generateUsers(100)}
      components={{
        Scroller: React.forwardRef((props, ref) => <TableContainer component={Paper} {...props} ref={ref} />),
        Table: (props) => <Table {...props} style={{ borderCollapse: 'separate' }} />,
        TableHead: TableHead,
        TableRow: TableRow,
        TableBody: React.forwardRef((props, ref) => <TableBody {...props} ref={ref} />),
      }}
      fixedHeaderContent={() => (
        <TableRow>
          <TableCell style={{ width: 150, background: 'white' }}>
            Name
          </TableCell>
          <TableCell style={{ background: 'white' }}>
            Description
          </TableCell>
        </TableRow>
      )}
      itemContent={(index, user) => (
        <>
          <TableCell style={{ width: 150, background: 'white' }}>
            {user.name}
          </TableCell>
          <TableCell style={{ background: 'white'  }}>
            {user.description}
          </TableCell>
        </>
      )}
    />
  )
}

MUI Table virtualized with Table Virtuoso#

MUI Table virtualized with Table Virtuoso