Open cgarvis opened 7 years ago
do you mind doing a pull request @romanstan1 ? thanks
I probably should have commented earlier, but I've been very head-down. I have a PR for for #26 that will allow this, and much more. @romanstan1's solution as written is that it always assumes the first row is a header row, and that may not be the case.
I haven't officially submitted my code for #26 yet because I still need to bulk up the tests and documentation for it. I'll try to get on that.
This how I make fixed headers when scrolling with awesome react-datasheet:
1 use css position sticky on
th { position: sticky; top: 0; }
then to make the header border not disappeared when it sticked on top
.data-grid-container .data-grid { border-collapse: separate; border-spacing: 0; }
don't forget to wrap <table>
inside <div>
then set the height
and overflow-y: auto
to make it scroll
With this way you can also make horizontal srolling, and let the first column sticky left
This how I make fixed headers when scrolling with awesome react-datasheet:
1 use css position sticky on
th { position: sticky; top: 0; }
- then to make the header border not disappeared when it sticked on top
.data-grid-container .data-grid { border-collapse: separate; border-spacing: 0; }
- don't forget to wrap
<table>
inside<div>
then set theheight
andoverflow-y: auto
to make it scrollWith this way you can also make horizontal srolling, and let the first column sticky left
Hi @aizaiz , please could you explain how to fixed header with more details. I don't understand where to set the height and overflow. Thanks
This how I make fixed headers when scrolling with awesome react-datasheet: 1 use css position sticky on
th { position: sticky; top: 0; }
- then to make the header border not disappeared when it sticked on top
.data-grid-container .data-grid { border-collapse: separate; border-spacing: 0; }
- don't forget to wrap
<table>
inside<div>
then set theheight
andoverflow-y: auto
to make it scrollWith this way you can also make horizontal srolling, and let the first column sticky left
Hi @aizaiz , please could you explain how to fixed header with more details. I don't understand where to set the height and overflow. Thanks
I set the height: auto; overflow-y: auto;
in .data-grid-container .data-grid
and it's work also.
Here's my solution - https://github.com/romanstan1/react-datasheet-header