-
Hello all, I have a Datatable with a lot of columns and I haven't been able to get a scrollbar that works just for the table itself. |
Beta Was this translation helpful? Give feedback.
Answered by
theetrain
Oct 26, 2022
Replies: 1 comment 2 replies
-
@cgildenia I have this CSS set up for my DataTables: /*
Table wrapper used to opt into sticky styles
Usage:
<div class="table-wrapper">
<DataTable />
</div>
*/
:global(.table-wrapper) {
overflow-x: scroll;
}
/*
Keep header and toolbar visible on
wide tables with sticky content
*/
:global(.table-wrapper .bx--data-table-container) {
overflow: auto;
}
:global(.table-wrapper .bx--data-table-header, .table-wrapper
.bx--table-toolbar, .table-wrapper .bx--pagination) {
position: sticky;
left: 0;
} And then you can wrap your DataTable with the <div class="table-wrapper">
<DataTable {...tableProps} />
</div> Having a built-in way for tables be scrollable is something I would advocate for. |
Beta Was this translation helpful? Give feedback.
2 replies
Answer selected by
metonym
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@cgildenia I have this CSS set up for my DataTables:
And then you can wrap your DataTable with the
table-wrapper
class: