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?

is answered here.. https://github.com/react-tools/react-table/issues/578 — Panther, Feb 18 '18 at 17:11
Thanks @Panther, I tried `Cell: props =>
{props.value}
` but it did not work. Its not showing ellipsis, but cell width has not increased and the data rather goes hiding from the right edge. — xploreraj, Feb 18 '18 at 17:25
u may try some css for ur div.. like word-break: all and width as 100% — Panther, Feb 18 '18 at 17:30

Steffan · Answer 1 · 2019-11-05T17:35:31.470

52

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

edited Nov 05 '19 at 17:35

answered Mar 08 '18 at 22:44

Steffan

719
5
8

it works, although at columns points I had to declare in CSS white-space: normal. – user3417479 Aug 14 '19 at 13:52
2

Works, but I had to set whiteSpace instead of 'white-space', Bests – José Nov 03 '19 at 02:41
Thanks @José, Updated the answer – Steffan Nov 05 '19 at 17:36

score 12 · Answer 2 · answered Jun 14 '18 at 04:04

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

score 3 · Answer 3 · answered Sep 05 '18 at 14:15

3

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

style: { 'whiteSpace': 'unset' }

answered Sep 05 '18 at 14:15

EllaVader

141
1
5

score 0 · Answer 4 · answered Aug 10 '20 at 12:31

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

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

4 Answers4

Linked