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:
<HeaderCellresize={{resizerWidth: 15,resizerHighlight: '#98d8ff',}}>Task</HeaderCell>
That's it. With React Table Library, you are now able to create resizable tables in React.