Changing column width in react-table

In react-table v7 you need to use a layout hook (useBlockLayout, useAbsoluteLayout or useFlexLayout) so the specified width is applied. Important: all those hooks set a default column width to 150px. You can see an example in Full Width Resizable Table.

In react-table v8 you can use the attributes size, minSize and maxSize on the columns definition (see the example below) or define the default value on tableOptions.defaultColumn. You can read more in Column Sizing.

In react-table v7 if you don’t want to use a layout hook, you can use getHeaderProps and getCellProps according to your needs, acessing minWidth and width values, as the example below.

In v8 you need to replace width, minWidth and maxWidth to size, minSize and maxSize, as mentioned in the Migrating to V8 docs.

function Table({ data }) {
  const columns = useMemo(
    () => [
      {
        Header: 'Name',
        accessor: 'name',
        maxWidth: 400,
        minWidth: 140,
        width: 200,
      },
      {
        Header: 'Qty',
        accessor: 'quantity',
        maxWidth: 70,
        minWidth: 50,
        width: 60,
      },
    ],
    [],
  );

  const {
    getTableBodyProps,
    getTableProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data, getRowId });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th
                {...column.getHeaderProps({
                  style: { minWidth: column.minWidth, width: column.width },
                })}
              >
                <span>{column.render('Header')}</span>
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return (
                  <td {...cell.getCellProps({
                      style: {
                        minWidth: cell.column.minWidth,
                        width: cell.column.width,
                      },
                    })>
                    {cell.render('Cell')}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}