carbon-design-system / carbon-website

The website for the Carbon Design System.
https://www.carbondesignsystem.com
Apache License 2.0
278 stars 774 forks source link

Document DataTable `stickyHeader` on website #2922

Open josenyris opened 2 years ago

josenyris commented 2 years ago

Hi, for a SaaS project I‘m working with, I would like to have more information about fixing the column header and the pagination table bar from a Data Table. Should I fix only the column header or the whole page header? how should look the space between the last data row and the pagination bar?

Thanks in advance for your feedback on the Carbon website!

abbeyhrt commented 2 years ago

Hey @josenyris! Could you provide more information about this discussion? Not sure how to address this with the information given.

tay1orjones commented 2 years ago

@josenyris There is an experimental stickyHeader prop on DataTable, here's a storybook showing it. https://react.carbondesignsystem.com/?path=/story/components-datatable-basic--playground&args=stickyHeader:true

There are caveats and challenges to making both the header and pagination sticky. In any case, it will require your own custom css atop the existing functionality provided.

There's been some suggestions to improve this but no work has been done yet https://github.com/carbon-design-system/carbon/issues/10560

One actionable piece that we do need to address is making sure stickyHeader is documented on the website.

josenyris commented 2 years ago

Thank you Taylor! 🙏🏽