If you are new to react virtuoso , it can be a struggle in trying to customise the table component in react virtuoso. I have gone through the documentation and after a bit of hassle got to customize almost every part of the table. Every part of the table can be customized by passing specific props to the virtuoso table component. It has the following props.

Components: 

This prop is of type object which contains the following components. All of them should be wrapped with forward ref as they receive ref as well.

1. Table: This should return <table> tag with any custom styles. It receives props and use that to render the children. 

2. TableHead: This should return <thead> tag with any  custom styles. It receives props and use that to render the children

3. TableRow: This should return <tr> tag with any custom styles. It receives props and use that to render the children

4. TableFoot: This should return <tfoot> tag with any custom styles. It receives props and use that to render the children

fixedHeaderContent: 

This is a component prop used to render table head content with fixed position while scrolling. This should be present if the TableHead has to work where you can render custom <thead>. The content of this is passed as children to the TableHead. You can return empty and just use TableHead with content..

itemContent:

This is a component prop used to render the tbody row content. This content is passed as children to TableRow. 

fixedFooterContent:

This is a component prop and the return value is passed as children to TableFoot.

So far it's working with a lot of tweaking. There might be some other reason than what I mentioned in how each prop is used. Below is a basic example of it. You can build on top of this and make changes specific to your case.

import { TableVirtuoso } from "react-virtuoso";
import { forwardRef } from "react";

<TableVirtuoso
  className="!text-center !w-full !overflow-x-auto border border-[#E7E7EB] rounded-md"
  data={[1, 2, 4, 5]}
  fixedHeaderContent={() => {
    return (
      <tr className="border-b border-[#E7E7EB] text-[#64748B] text-sm h-9 font-medium">
        <th className="font-medium w-full">1</th>
        <th className="font-medium w-full">2</th>
        <th className="font-medium w-full">3</th>
        <th className="font-medium w-full">4</th>
      </tr>
    );
  }}
  components={{
    Table: forwardRef((props, ref) => (
      <table {...props} className="text-center w-full table-fixed">
        {props.children}
      </table>
    )),
    TableRow: forwardRef(({ item, ...props }, ref) => (
      <tr
        {...props}
        className="border-b border-[#E7E7EB] h-12 font-medium text-xs text-[#0F172A] cursor-pointer"
      >
        {props.children}
      </tr>
    )),
    TableFoot: forwardRef(({ item, ...props }, ref) => (
      <tfoot>{props.children}</tfoot>
    )),
    TableHead: forwardRef(({ item, ...props }, ref) => (
      <thead className="sticky top-0 bg-white z-10">{props.children}</thead>
    )),
  }}
  itemContent={(index, item) => {
    return (
      <>
        <td className="min-w-[150px]">8</td>
        <td className="min-w-[150px]">9</td>
        <td className="min-w-[150px]">10</td>
        <td className="min-w-[150px]">11</td>
      </>
    );
  }}
  fixedFooterContent={() => {
    return (
      <tr>
        <td className="py-3 h-16" colSpan={7}>{true ? "Loading..." : ""}</td>
      </tr>
    );
  }}
/>;