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>

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

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.