I have been searching for a couple of days now for a good solution to this problem

I have designed and structured columns in react-data-table-component package and I want to add Scrollbar on top. By default the package supports horizontal scroll bar at bottom. But now I want to add on top too. I already tried this: [Scrollbar with css and jquery ][1]. But it does not work either Also tried [Scroll bar with css and jquery][2] I also tried A package to add Double scrollbar in react but it does not work either: https://www.npmjs.com/package/react-shadowed-double-scrollbar https://npm.io/package/react-double-scrollbar Here is my component:

<DataTable
title='ELENCO E-PRESENTATIONS'
columns={eventColumns}
data={state.events}
paginationPerPage={50}
paginationRowsPerPageOptions={[50, 100, 150, 200, 250, 300]}
expandableRowsComponent={<ExpandableComponent />}
noDataComponent='Nessun evento trovato'
expandableIcon={{
  collapsed: <PlayIcon />,
  expanded: <PlayDisabledIcon />
}}
sortIcon={<SortIcon />}
striped
highlightOnHover
pointerOnHover
responsive
pagination
defaultSortField='code'
expandableRows
expandOnRowClicked
/>

Any good solutions out their for second scroll bar with variable width content? JQuery/Javascript solutions are welcome.

[1]: https://jsfiddle.net/dagope/DtRTq/
[2]: https://codepen.io/gulzarsoft8/pen/YzQMxQz
Here is an image where I want to add scrollbar
[3]: https://i.stack.imgur.com/8SYsW.png