How to: React Table with Resize

 by Robin Wieruch
 - Edit this Post

This tutorial is part 2 of 2 in this series.

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. Now, we will enable users to resize columns in the table.

Everything that's needed is setting the resize property on each table's column:

<Header>
<HeaderRow>
<HeaderCell resize>Task</HeaderCell>
<HeaderCell resize>Deadline</HeaderCell>
<HeaderCell resize>Type</HeaderCell>
<HeaderCell resize>Complete</HeaderCell>
<HeaderCell resize>Tasks</HeaderCell>
</HeaderRow>
</Header>

That's the most straightforward way to enable resizable columns for your table. However, if you want to have more options for configuration, you can pass an object instead of a boolean.

For example, you can define a min width for each table column if you don't agree with the default.

<HeaderCell resize={{ minWidth: 50 }}>Task</HeaderCell>

You can also change the highlight color of the resize area and expand the resize area's size:

<HeaderCell
resize={{
resizerWidth: 15,
resizerHighlight: '#98d8ff',
}}
>
Task
</HeaderCell>

Be careful if you table or your table rows have any additional padding due to CSS (e.g. padding, margin, border), then you need to define an offset which mitigates this padding:

import { useTheme } from '@table-library/react-table-library/theme';
const App = () => {
const theme = useTheme({
BaseRow: `
padding-left: 32px;
padding-right: 16px;
`,
});
const data = { nodes };
const resize = { offset: 48 };
return (
<Table data={data} theme={theme}>
{(tableList) => (
<>
<Header>
<HeaderRow>
<HeaderCell resize={resize}>Task</HeaderCell>
<HeaderCell resize={resize}>Deadline</HeaderCell>
<HeaderCell resize={resize}>Type</HeaderCell>
<HeaderCell resize={resize}>Complete</HeaderCell>
<HeaderCell resize={resize}>Tasks</HeaderCell>
</HeaderRow>
</Header>
...
</>
)}
</Table>
);
};

That's it. With React Table Library, you are now able to create resizable tables in React.

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 for creating a Tree Table or Tree List . In the previous example, you have already installed React Table Library to create a…

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.