CODEWITHSUNDEEP
reactjsreact-table
xploreraj
xploreraj

Reputation: 4362

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

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?

Upvotes: 20

Views: 53914

Answers (5)

Kai Durai
Kai Durai

Reputation: 431

You can now simply add the property wrap: true to the column properties:

{
  name: title,
  selector: property, 
  sortable: true, 
  wrap: true
}

Upvotes: 1

Sachin Budhiraja
Sachin Budhiraja

Reputation: 1

const columsDefnSamplesQsReactTable = [
  {
    Header: "Question Code",
    accessor: "Id",
  },
  {
    Header: "Question Text",
    accessor: "QuestionText",
    style: { overflowWrap: "break-word" }, // allow for words wrap inside this cell
  },
];

Upvotes: 0

Steffan
Steffan

Reputation: 719

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

Upvotes: 52

EllaVader
EllaVader

Reputation: 141

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

style: { 'whiteSpace': 'unset' }

Upvotes: 3

SmoothyBoothy
SmoothyBoothy

Reputation: 195

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} />

enter image description here

Upvotes: 12

Related Questions