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

【问题标题】：How to do word-wrap for data using react-table?如何使用 react-table 对数据进行自动换行？
【发布时间】：2018-07-28 21:52:49
【问题描述】：

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

在文档中，他们提到了style 道具，但我无法弄清楚。我在下面尝试过，但没有成功。

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

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

【问题讨论】：

在这里回答.. github.com/react-tools/react-table/issues/578
谢谢@Panther，我试过Cell: props => <div className=''>{props.value}</div>，但没用。它没有显示省略号，但单元格宽度没有增加，数据反而从右边缘隐藏起来。
你可以为你的 div 尝试一些 css .. 比如 word-break: all 和 width as 100%

标签： reactjs react-table

【解决方案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

【讨论】：

它可以工作，尽管在列点我必须在 CSS white-space: normal 中声明。
有效，但我必须设置 whiteSpace 而不是 'white-space'，Bests
感谢@José，更新了答案

【解决方案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} />

【讨论】：

【解决方案3】：

为了让它为我工作，我不得不使用这个 sytnax：

style: { 'whiteSpace': 'unset' }

【讨论】：

【解决方案4】：

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

【讨论】：