How to: React Table with fixed Column

 by Robin Wieruch
 - Edit this Post

This tutorial is part 3 of 3 in this series.

In this tutorial, I want to show you how to use React Table Library with a fixed column. In the previous example, you have already installed React Table Library to create a table component and gave it a theme. Now, we will enable users to have their column sticky to the side:

...
import { useTheme } from '@table-library/react-table-library/theme';
const App = () => {
const data = { nodes };
const theme = useTheme({
BaseCell: `
&:nth-of-type(1) {
left: 0px;
min-width: 250px;
width: 250px;
}
&:nth-of-type(2) {
left: 250px;
min-width: 150px;
width: 150px;
}
&:nth-of-type(3),
&:nth-of-type(4) {
min-width: 50%;
width: 50%;
}
`,
});
return (...);
};

We fixed the columns to the left side. You can fix columns the same way to the right side as well. What's missing is giving the Cell components a pinLeft (or pinRight) prop to signalize them to stick to the side:

const App = () => {
...
return (
<Table data={data} theme={theme} layout={{ custom: true, horizontalScroll: true }}>
{(tableList) => (
<>
<Header>
<HeaderRow>
<HeaderCell pinLeft>Task</HeaderCell>
<HeaderCell pinLeft>Deadline</HeaderCell>
<HeaderCell>Type</HeaderCell>
<HeaderCell>Complete</HeaderCell>
</HeaderRow>
</Header>
<Body>
{tableList.map((item) => (
<Row key={item.id} item={item}>
<Cell pinLeft>{item.name}</Cell>
<Cell pinLeft>
{item.deadline.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})}
</Cell>
<Cell>{item.type}</Cell>
<Cell>{item.isComplete.toString()}</Cell>
</Row>
))}
</Body>
</>
)}
</Table>
);
};

With everything in place, the none fixed columns of the table will scroll in a vertical direction while the column stays sticky at the side of the table.

Keep reading about 

In this tutorial, I want to show you how to use React Table Library with its useSort plugin for a sort feature. In the previous example, you have already installed React Table Library to create a…

In this tutorial, I want to show you how to use React Table Library with its resize feature. In the previous example, you have already installed React Table Library to create a table component…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.