如何使用react-table对数据进行自动换行？

Question

我使用https://react-table.js.org/#/story/readme来显示来自服务器响应的表.但对于长度较长的列数据,它显示省略号.我没有找到包装它的方法,因此显示完整的数据.

在文档中,他们提到style道具,但我无法弄明白.我试过下面,但它没有用.

<ReactTable
    data={respDataArr}
    columns={columns}
    style={{overflow:'wrap'}}
/>

有人可以建议我应该做些什么改变？

Answer 1

你会想要使用css属性 white-space: unset;

找到要包装文本的列,并将以下内容添加为列的属性

.ReactTable .rt-td

或者,您可以添加一个white-space: unset;直接在css/sass/scss中定位的类

Answer 2

根据Steffan的说法,进一步明确答案:

这是我的列定义:

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