How to Set the Column Width With React-Table Library

1. Customize Column Width With the react-table Library
2. Use the .getHeaderProps() Method to Specify Column Width With the react-table Library

React is the most popular framework for building front-end applications. It is normal for modern apps to contain lots of information; organizing raw data into tables can make the vast information easier to digest.

The react-table library provides the necessary logic to create tables in React. However, you must create the UI of the table yourself.

In this article, we want to show how users can customize the appearance of tables, for example, adjust the width of the column.

Customize Column Width With the react-table Library

react-table is a headless UI library for making tables in React. It provides only logic, not the actual UI.

React developers can use the useTable hook from the react-table library to create a table based on raw data and column information.

Let’s take a look at this Table component:

function Table({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th
                {...column.getHeaderProps({
                  style: {
                    minWidth: 200,
                    width: 250,
                    border: "1px solid black"
                  }
                })}
              >
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

It is a basic example of a table created with the useTable hook. In it, we used HTML elements for styling tables.

The <table> HTML component is at the highest level. We also have <thead>, <tr>, <th>, and other elements.

If you want to inspect the code yourself, you can do so on CodeSandbox.

Use the .getHeaderProps() Method to Specify Column Width With the react-table Library

You must define the UI elements yourself if you have a table created with a useTable() hook. That’s where the <th> HTML comes in.

It defines a header for the table. In other words, label the cell at the top of the column.

In the example above, we used the .getHeaderProps() method with one argument: a style object, which will override the default styles for the <th> element.

Let’s take a look at the actual code:

<th
    {...column.getHeaderProps({
                              style: {
                              minWidth: 200,
                              width: 250,
                              border: "1px solid black"
                  }
                })}
              >

This is the easiest way to specify column width when building tables with the react-table library. In this case, we specified the minWidth and width parameters to adjust the column size.

In reality, you can apply any CSS property, as long as it is styled as an object.

For example, if you want to apply the min-width property as an inline style, it will become minWidth. This is done because all styles need to be formatted as an object.

You can check out the code and try to edit it yourself on CodeSandbox.