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?

Solution 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

Solution 2

To further make the answer clearer according to Steffan:

This is my column definition :

   const responsesData = [{..}, {..} .... etc ..];
   const columsDefnSamplesQsReactTable = [{
        Header: 'Question Code',
        accessor: 'Id'
    }, {
        Header: 'Question Text',
        accessor: 'QuestionText',
        style: { 'white-space': 'unset' } // allow for words wrap inside only this cell
    }];

    <ReactTable data={responsesData} columns= columsDefnSamplesQsReactTable } 
     defaultPageSize={3} />

Solution 3

In order to get this to work for me I had to use this sytnax:

style: { 'whiteSpace': 'unset' } 

Comments

[user3417479]

it works, although at columns points I had to declare in CSS white-space: normal.

[José]

Works, but I had to set whiteSpace instead of 'white-space', Bests

[Steffan]

Thanks @José, Updated the answer