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> ); 

}`