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

reactjs react-table
xploreraj picture xploreraj · Feb 18, 2018 · Viewed 27.8k times · Source

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

Steffan picture Steffan · Mar 8, 2018

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

Related questions

Select row on click react-table

I am trying to find the best table to use with my react apps, and for now, the react-table offers everything I need (pagination, server-side control, filtering, sorting, footer row). This being said, I can't seem to be able to …

Read More
Export to CSV button in react table

Looking for a way to add an "Export to CSV" button to a react-table which is an npmjs package (https://www.npmjs.com/package/react-table). I need to add a custom button for exporting the table data to an excel …

Read More
How to stop memory leak in useEffect hook react

I am using Effect hook to fetch the datas from server and these data are passed to the react table there i have used the same api call to load the next set of datas from server. When the application …

Read More