Sha256: 47de882a93fefd0ca9dfd76897a94aa04f02d8e8c1133e80dc35b7469091c0e0

Contents?: true

Size: 740 Bytes

Versions: 1855

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,855 entries across 1,855 versions & 2 rubygems

Version Path
playbook_ui-14.11.0.pre.rc.4 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui_docs-14.11.0.pre.rc.3 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-14.11.0.pre.rc.3 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui_docs-14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui_docs-14.11.0.pre.rc.2 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-14.11.0.pre.rc.2 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui_docs-14.11.0.pre.rc.1 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-14.11.0.pre.rc.1 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui_docs-14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui_docs-14.11.0.pre.rc.0 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-14.11.0.pre.rc.0 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui_docs-14.9.0.pre.alpha.PBNTR767advancedtablemultiheadercolumns5136 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-14.9.0.pre.alpha.PBNTR767advancedtablemultiheadercolumns5136 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui_docs-14.9.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5121 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-14.9.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5121 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui_docs-14.9.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5120 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-14.9.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5120 app/pb_kits/playbook/pb_table/docs/_table_sticky.md
playbook_ui-14.10.0 app/pb_kits/playbook/pb_table/docs/_table_sticky.md