如何将字符串列表格式化为反应引导表 2 的列，以使数据不会从实际列中流出

Question

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

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

我还在反应表文档中搜索： 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'};
    }
}

表创建代码：

<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 ，以便在表格单元格中包含“复杂” html。