full example:

``js
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 (



`

Tips: if your table contain at least one header group, place yours sticky columns into a group too (even with an empty Header name)

`js
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

* git clone https://github.com/guillaumejasmin/react-table-sticky.git
* npm install
* npm run demo`
* Go to http://localhost:8080