react-table-sticky
v1.1.3
Published
Sticky components for react-table v7
Downloads
393,215
Readme
Documentation
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:
import React from 'react';
import styled from 'styled-components';
import { useTable, useBlockLayout } from 'react-table';
import { useSticky } from 'react-table-sticky';
const Styles = styled.div`
.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;
}
}
}
`;
function TableDemo() {
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,
} = useTable(
{
columns,
data,
},
useBlockLayout,
useSticky,
);
// Workaround as react-table footerGroups doesn't provide the same internal data than headerGroups
const footerGroups = headerGroups.slice().reverse();
return (
<Styles>
<div {...getTableProps()} className="table sticky" style={{ width: 1000, height: 500 }}>
<div className="header">
{headerGroups.map((headerGroup) => (
<div {...headerGroup.getHeaderGroupProps()} className="tr">
{headerGroup.headers.map((column) => (
<div {...column.getHeaderProps()} className="th">
{column.render('Header')}
</div>
))}
</div>
))}
</div>
<div {...getTableBodyProps()} className="body">
{rows.map((row) => {
prepareRow(row);
return (
<div {...row.getRowProps()} className="tr">
{row.cells.map((cell) => (
<div {...cell.getCellProps()} className="td">
{cell.render('Cell')}
</div>
))}
</div>
);
})}
</div>
<div className="footer">
{footerGroups.map((footerGroup) => (
<div {...footerGroup.getHeaderGroupProps()} className="tr">
{footerGroup.headers.map((column) => (
<div {...column.getHeaderProps()} className="td">
{column.render('Footer')}
</div>
))}
</div>
))}
</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