如何使用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;

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

的属性

style:{ 'white-space': 'unset'}

或者，您可以直接在css / sass / scss中添加一个定位.ReactTable .rt-td的课程

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

Answer 3

为了使它对我有用，我不得不使用以下语法：

d

Answer 4

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