Sha256: 47de882a93fefd0ca9dfd76897a94aa04f02d8e8c1133e80dc35b7469091c0e0

Contents?: true

Size: 740 Bytes

Versions: 1909

Compression:

Stored size: 740 Bytes

Contents

React: Use `sticky` on a table to allow the table header to be fixed in place when the user scrolls up and down on the page.

Rails: Pass `sticky: true` to props.

If the table header is not sticking in the right place you will need to pass a inline `top` style to the `thead`.
React Example: `<thead style={{ top: "-16px" }}>`
Rails Example: `<thead style="top: -16px">`

### Troubleshooting CSS Problems
Sticky may not work if any parent/ancestor of the sticky element has any of the `overflow` properties set. Additionally, specifying a height on the overflowing container provides measurement for this feature to work properly. In some cases, it may be necessary to set the same parent/ancestor container to `position: static` as well.

Version data entries

1,909 entries across 1,909 versions & 2 rubygems

Version Path
playbook_ui-12.24.0.pre.alpha.play824733 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.24.0.pre.alpha.play833boldoptionfortitle2and3721 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.24.0.pre.alpha.alphatestforselfhostfak720 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.24.0.pre.alpha.play833boldoptionfortitle2and3719 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.24.0.pre.alpha.play833boldoptionfortitle2and3717 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.24.0 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui_docs-12.23.0.pre.alpha.movemarkdown712 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.23.0.pre.alpha.movemarkdown712 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui_docs-12.23.0.pre.alpha.movemarkdown708 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.23.0.pre.alpha.movemarkdown708 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.23.0.pre.alpha.play698responsivespacingglobalprop703 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.23.0.pre.alpha.play698responsivespacingglobalprop701 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.23.0 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.22.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown696 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.22.0.pre.alpha.play698responsivespacingglobalprop690 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.22.0.pre.alpha.PBNTR12checkingemptyfilters686 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.22.0 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.21.0.pre.alpha.PLAY807RTEcustomtoolbar680 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.21.0 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui_docs-12.20.0.pre.alpha.movemarkdown668 app/pb_kits/playbook/pb_table/docs/_table_sticky.md