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>

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.