How to do word-wrap for data using react-table?

Question

I am using https://react-table.js.org/#/story/readme for displaying table from server response. But for column data with long length, its showing ellipsis. I am not finding a way for wrapping it, so that full data is displayed.

In the doc, they have mentioned style prop, but I am not able to figure it out. I tried below, but it did not work.

<ReactTable
    data={respDataArr}
    columns={columns}
    style={{overflow:'wrap'}}
/>

Can someone suggest please what change should I do?

Answer 1

You'll want to use the css property white-space: unset;

find the column you want to have wrap text and add the following as a property of the column

// Example Column definition
{
    Header: 'header', 
    accessor: 'data1',
    style: { 'whiteSpace': 'unset' } //Add this line to the column definition
}

Alternatively you can add a class that targets .ReactTable .rt-td directly in your css/sass/scss

Edited: Added example column definition to make it clearer, updated to new react-table api