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

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


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


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


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

style: { 'whiteSpace': 'unset' }