score:0

const columsdefnsamplesqsreacttable = [
  {
    header: "question code",
    accessor: "id",
  },
  {
    header: "question text",
    accessor: "questiontext",
    style: { overflowwrap: "break-word" }, // allow for words wrap inside this cell
  },
];

score:3

in order to get this to work for me i had to use this sytnax:

style: { 'whitespace': 'unset' } 

score:12

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

score:50

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 Query

More Query from same tag