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.11.0 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.10.0.pre.alpha.PLAY705phonenumberreturn372 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.10.0.pre.alpha.PLAY677richtexteditorts370 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.10.0 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.9.1.pre.alpha.play664tiptapinvestigation353 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.9.1.pre.alpha.PLAY689bugtxtinputlabel346 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.9.1.pre.alpha.menucleanup345 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.9.1.pre.alpha.menucleanup342 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.9.1 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.9.0 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.8.0.pre.alpha.PLAY625phonenumberdark301 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.8.0.pre.alpha.PLAY625phonenumberdark300 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.8.0.pre.alpha.PLAY649mapkitstyles299 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.8.0.pre.alpha.PLAY645typescriptprogresstep298 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.8.0.pre.alpha.PLAY645typescriptprogresstep297 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.8.0.pre.alpha.rubyandnpmalpharelease296 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.8.0.pre.alpha.rubyandnpmalpharelease295 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.8.0.pre.alpha.rubyandnpmalpharelease294 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.8.0 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-12.7.1.pre.alpha.rubyandnpmalpharelease293 app/pb_kits/playbook/pb_table/docs/_table_sticky.md