CODEWITHSUNDEEP
reactjsfixed-data-table
kurtgn
kurtgn

Reputation: 8710

reactjs and fixed-data-table-2: 100% width for table

I am learning fixed-data-table-2 and trying to pass a width of 100% to it.

<Table
rowsCount={this.state.countries.length}
rowHeight={50}
headerHeight={50}
width={'100%'}
height={500}>

This works (in Chrome at least), and the table indeed stretches to full page width, but the console is predictably flooded with errors:

Warning: Failed prop type: Invalid prop `width` of type `string` supplied to `FixedDataTable`, expected `number`.

I understand that

FixedDataTable does not provide a layout reflow mechanism or calculate content layout information such as width and height of the cell contents.

so what is a proper way of stretching it to full container width?

Upvotes: 3

Views: 1026

Answers (1)

apieceofbart
apieceofbart

Reputation: 2197

For a start you could wrap <Table /> component in a div with a width: 100%. Then attach a ref to this div and read its clientWidth. Once you have that, simply pass it as width to <Table /> component.

This of course gets more complicated if you want to consider user changing the browser width - you need a way to listen to either window or element size change - and change the width accordingly.

Upvotes: 0

Related Questions