如何在React-Table中对数据进行自动换行？

Question

我正在使用https://react-table.js.org/#/story/readme来显示从服务器响应的表格。但是对于长度较长的列数据，它会显示省略号。我找不到一种方法来自动换行并显示完整的数据。

在文档中，他们提到了style属性，但我无法弄清楚如何使用。我尝试了以下代码，但它没有起作用。

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

有人可以建议一下，我应该做什么改变吗？

- xploreraj

---

答案在这里。https://github.com/react-tools/react-table/issues/578 - Panther

谢谢 @Panther，我尝试了 Cell: props => <div className=''>{props.value}</div>，但它没有起作用。它没有显示省略号，但单元格宽度并没有增加，数据实际上从右边缘消失了。 - xploreraj

你可以尝试一些CSS样式来处理你的div，例如使用word-break: all和将宽度设置为100%。 - Panther

Answer 1

您需要使用CSS属性white-space: unset;

找到您想要换行文字的列，并将以下内容添加为该列的属性

// Example Column definition
{
    Header: 'header', 
    accessor: 'data1',
    style: { 'whiteSpace': 'unset' } //Add this line to the column definition
}

或者您可以在css/sass/scss中直接添加一个针对.ReactTable .rt-td的类。

编辑：添加了一个示例列定义，使其更清晰，并更新为新的react-table api。

- Steffan

---

它能工作，尽管在某些地方的列我不得不在CSS中声明white-space: normal。 - user3417479

可以运行，但我必须设置 whiteSpace 而不是 'white-space'。最佳。 - José

感谢@José，已更新回答。 - Steffan

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

- SmoothyBoothy

Answer 3

为了让我成功运行，我必须使用以下语法：

style: { 'whiteSpace': 'unset' } 

- EllaVader

Answer 4

现在你可以简单地将属性wrap: true添加到列属性中：

{
  name: title,
  selector: property, 
  sortable: true, 
  wrap: true
}

- Kai Durai

Answer 5

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

- Sachin Budhiraja