如何将字符串列表格式化为 react bootstrap table 2 的列，以便数据不会流出实际列

Question

我正在尝试使用 react-bootstrap-table 以表格形式呈现一些数据，但是一列的数据与其他列的数据重叠。我想保持我的布局固定，因此添加了 css layout:fixed 这实际上也是一个要求。但是最后的结果是：

实际上，对于本专栏，我从后端获取了一个字符串数组。例如["DEPT","OLD","CUSTOM_FUNCTION",...] 正在通过 React 在内部转换为单个字符串，我不确定如何进一步格式化它。

我也在 React table 文档中搜索：https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-celledit.html#rich-editors 但没有找到任何东西。

我的最终目标是以更好的方式可视化数据，例如下拉菜单或同一列中新行中的每个数组元素可在单击鼠标时展开。

上图可视为示例要求，加载时仅显示列表的第一个元素，单击箭头按钮后，将在同一列中依次显示所有列表项，如下所示。

我无法弄清楚哪个专栏道具对我有帮助，或者它是否可能。目标完全相同，但一个简单的新行分隔数据也可以。

列定义代码：

{
    dataField: 'data',
    text: 'DATA',
    editable: false,
    filter: textFilter(),
    headerStyle: () => 
    {
        return { width: '100px', textAlign: 'center'};
    }
}

Table 创建代码：

<BootstrapTable 
    keyField='serialNo' 
    data={ this.state.data } 
    columns={ this.state.columns } 
    filter={ filterFactory() } 
    pagination={ paginationFactory({sizePerPage: 4}) }
    cellEdit={ cellEditFactory({ mode: 'click'}) }
    striped
    hover
/>

请提供帮助或建议。

谢谢

Answer 1

检查这个沙箱。

https://codesandbox.io/s/competent-rain-2enlp

const columns = [{
  dataField: 'id',
  text: 'Product ID',
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'labels',
  text: 'Labels',
   formatter: (cell) => {
    return <>{cell.map(label => <li>{label}</li>)}</>
  },
}];

您需要定义自己的 formatter 以便在 table 单元格中包含“复杂”html。

如何将字符串列表格式化为 react bootstrap table 2 的列，以便数据不会流出实际列

How to format a list of string into columns of react bootstrap table 2 such that data doesn't flows out of actual columns

javascript

json

reactjs

react-native

react-bootstrap-table