Avoid the table body getting into the table header when scrolling

[pavelgromyko]

I'm creating a table (with product names) in my desktop application using React. To create the table I use the React Table Library (https://react-table-library.com/?path=/story/getting-started-installation--page). I have already customized some settings to suit my needs, but there are moments for which I just can’t find a solution.

As you can see, I have a table, but when scrolling, the table body merges with the table header (since I'm using background-color: transparent). Tell me, how can I scroll the table body so that the table body is not visible in the header?

And perhaps you can tell me how to customize the scroll bar in this library. I would like to change its width, remove the up/down arrows, and have the scroll bar start not from the table header, but only at the height of the table body.

Perhaps you can help either with the code or with advice, since I have already tried all the possible options that I knew and read

my code below

`  export default function App() {
  const data = { nodes };
  const theme = useTheme([
    getTheme(),

{
  HeaderRow: `
    background-color: transparent;
    color: hsl(0, 0%, 71%);
    font-size: 10px;
  `
},
{
  Row: `
    background-color: transparent;
    color: black;
    font-size: 11px;
    
  `
}
]);

const COLUMNS = [
  { label: "Name of phone", renderCell: (item) => item.name },
  { label: "Cost", renderCell: (item) => item.length },
  { label: "Specified hotkey", renderCell: (item) => item.hotkey },
  { label: "Charge", renderCell: (item) => item.isActivness }
];

const VIRTUALIZED_OPTIONS = {
  rowHeight: (_item, _index) => 33
};

return (
  <div style={{ height: "300px" }}>
    <CompactTable
      columns={COLUMNS}
      virtualizedOptions={VIRTUALIZED_OPTIONS}
      data={data}
      theme={theme}
      layout={{ isDiv: true, fixedHeader: true }}
    />
  </div>
);

}`

[proddy]

I know it's possible as I did something similar a while back, but can't remember all the tricks, sorry. You can see it working on https://ems-esp.derbyshire.nl/dashboard/devices (click a entry in the table).

And the code is starts in https://github.com/emsesp/EMS-ESP32/blob/df9f75a5c99a6360d3cf68b7d207f37e3558b17a/interface/src/project/DashboardDevices.tsx#L520

I removed the scroll bar and used a custom theme. It might not help, but wanted to say there's always a way around it!

[pavelgromyko]

@proddy Thank you for paying attention to my question. Yes, our tables are somewhat similar. But the peculiarity of my table is that I have to make a scrollbar in the table body (since both the body and the header in my table are transparent and when I start scrolling, the information from the table body is visible in the header)