Documentation
- Demo on CodeSandbox
- Features
- Simple example
- Sticky columns for react-table v6
- Browser support
- Contribute
Features
- sticky header
- sticky footer
- sticky columns left and/or right
- full customizable
Simple example
Steps:
- create CSS classes
.table
.header
.body
.sticky
etc... (check following example) - create HTML elements
<div className="table sticky">
,<div className="header">
,<div className="body">
etc... - add
useSticky
hook - then, add
sticky: 'left'
orsticky: 'right'
to your column
full example:
;;;; const Styles = styleddiv` .table { border: 1px solid #ddd; .tr { :last-child { .td { border-bottom: 0; } } } .th, .td { padding: 5px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; background-color: #fff; overflow: hidden; :last-child { border-right: 0; } } &.sticky { overflow: scroll; .header, .footer { position: sticky; z-index: 1; width: fit-content; } .header { top: 0; box-shadow: 0px 3px 3px #ccc; } .footer { bottom: 0; box-shadow: 0px -3px 3px #ccc; } .body { position: relative; z-index: 0; } [data-sticky-td] { position: sticky; } [data-sticky-last-left-td] { box-shadow: 2px 0px 3px #ccc; } [data-sticky-first-right-td] { box-shadow: -2px 0px 3px #ccc; } } }`; { const columns = Header: 'First Name' accessor: 'firstName' sticky: 'left' Header: 'Last Name' accessor: 'lastName' sticky: 'left' ... Header: 'age' accessor: 'age' sticky: 'right' const data = ... const getTableProps getTableBodyProps headerGroups rows prepareRow = ; // Workaround as react-table footerGroups doesn't provide the same internal data than headerGroups const footerGroups = headerGroups; return <Styles> <div ... className="table sticky" style= width: 1000 height: 500 > <div className="header"> headerGroups </div> <div ... className="body"> rows </div> <div className="footer"> footerGroups </div> </div> </Styles> ;}
Tips: if your table contain at least one header group, place yours sticky columns into a group too (even with an empty Header name)
const columns = Header: ' ' sticky: 'left' columns: Header: 'First Name' accessor: 'firstName' Header: 'Last Name' accessor: 'lastName' Header: 'Other group' columns: ...
Sticky columns for React Table v6
If you search tool for sticky position in React Table v6, take a look at react-table-hoc-fixed-columns
Browser support
Check CSS sticky support https://caniuse.com/#search=sticky
Contribute
git clone https://github.com/guillaumejasmin/react-table-sticky.git
npm install
npm run demo
- Go to http://localhost:8080