Fixed headers when scrolling. about react-datasheet HOT 6 OPEN

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.

from react-datasheet.

This how I make fixed headers when scrolling with awesome react-datasheet:

1 use css position sticky on
th { position: sticky; top: 0; }

2. then to make the header border not disappeared when it sticked on top
   .data-grid-container .data-grid { border-collapse: separate; border-spacing: 0; }

3. 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

from react-datasheet.

This how I make fixed headers when scrolling with awesome react-datasheet:

1 use css position sticky on
th { position: sticky; top: 0; }

1. then to make the header border not disappeared when it sticked on top
   .data-grid-container .data-grid { border-collapse: separate; border-spacing: 0; }
2. 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

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

from react-datasheet.

Here's my solution - https://github.com/romanstan1/react-datasheet-header

from react-datasheet.

do you mind doing a pull request @romanstan1 ? thanks

from react-datasheet.

This how I make fixed headers when scrolling with awesome react-datasheet:
1 use css position sticky on
th { position: sticky; top: 0; }

1. then to make the header border not disappeared when it sticked on top
   .data-grid-container .data-grid { border-collapse: separate; border-spacing: 0; }
2. 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

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.

from react-datasheet.