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>

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 a fixed column . In the previous example, you have already installed React Table Library to create a table component and…

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…

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.