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} />
In order to get this to work for me I had to use this sytnax:
style: { 'whiteSpace': 'unset' }