javascript - 如何在“react-data-table-component”中添加顶部和底部水平滚动条

Question

我一直在寻找几天来解决这个问题的好方法

我在 react-data-table-component 包中设计和结构化列，我想在顶部添加滚动条。默认情况下，该包支持底部的水平滚动条。但现在我也想在上面添加。我已经尝试过了：[带有 css 和 jquery 的滚动条][1]。但它也不起作用还尝试了[带有 css 和 jquery 的滚动条][2] 我还尝试了在 react 中添加双滚动条的包，但它也不起作用：https://www.npmjs.com/package/react -shadowed-double-scrollbar https://npm.io/package/react-double-scrollbar 这是我的组件：

<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
/>

对于具有可变宽度内容的第二个滚动条有什么好的解决方案吗？欢迎使用 JQuery/Javascript 解决方案。

[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

标签： javascriptjqueryreactjsdatatablereact-data-table-component