How to: React Table with Resize

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.