search

nadbm / react-datasheet

Excel-like data grid (table) component for React
https://nadbm.github.io/react-datasheet/
MIT License
5.38k stars 456 forks source link

Fixed headers when scrolling. #30

Open cgarvis opened 7 years ago

romanstan1 commented 7 years ago

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

nadbm commented 7 years ago

do you mind doing a pull request @romanstan1 ? thanks

patrick-jones commented 7 years ago

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.

aizaiz commented 4 years ago

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

MarcoSapienza commented 3 years ago

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

mohridwanhdp commented 3 years ago

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.