How to specify column width for first column

[coreybruyere]

When using useRowSelect and useTable how can I specify column width for the first column so that it never exceeds the width of the checkboxes? I don't want to use useFlex as I want to preserve column widths based on the header width.

You'll notice when the table is set to 100% width the first column starts to grow if you expand your browser window.

Here's an example:

https://codesandbox.io/s/youthful-hamilton-j0rev?file=/src/App.js

[DPCamino]

You can target the first column with a selector.

In Styles, add a :first-child selector like this:

td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }

      :first-child {
        width: 20px;
      }
    }

Set the column to whatever width works, in my example 20px.