Column width for table-based header/cells

[marclemagne]

Hi. First off: great component. It is clear a lot of thought, time, and effort has gone into the creation and maintenance of this project.

I have looked through the documentation and various examples but I cannot see if it is possible to set a width on a column. For instance, I have a very basic table with two columns for first name and age. I'd like age to be 50 pixels wide and for first name to use the remaining space. Basic stuff for regular table-based elements. The documentation for Column however notes that width:

Specifies the width for the column (when using non-table-element layouts)

Setting this value does nothing on my table-based layout.

Is this possible without having to set some outside CSS?

Thanks!
~Marc

[francoisihry]

+1 I am looking for exactly the same thing

[dbertella]

Well do you have a custom component for your header?
Just make this custom component accept a width prop and then do something like:

{headerGroup.headers.map(column => (
<TableHeadCell
  {...column.getHeaderProps()}
  width={column.width}
>{column.render('Header')}</TableHeadCell>
))}

TableHeadCell can just be a normal component that map the width to it's own css width, it's up to you basically