如何使用反应表对数据进行自动换行? [英] How to do word-wrap for data using react-table?

问题描述

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

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.

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

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?

推荐答案

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

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
}

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

Alternatively you can add a class that targets .ReactTable .rt-td directly in your css/sass/scss

添加示例列定义以使其更清晰，更新为新的 react-table api

这篇关于如何使用反应表对数据进行自动换行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！