如何将字符串列表格式化为React Bootstrap表2的列，以使数据不会流出实际的列

问题描述

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

实际上，对于此列，我从后端获取字符串数组。例如[“ DEPT”，“ OLD”，“ CUSTOM_FUNCTION”，...]通过react在内部转换为单个字符串，我不确定如何进一步格式化它。

我还在https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-celledit.html#rich-editors的React表文档中进行了搜索，但未找到任何内容。

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

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

我无法确定哪个列支柱会帮助我，或者是否有可能。目标是完全相同的，但是用简单的新行分隔数据也可以。

列定义代码：

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

请帮助或提出适当的建议。

谢谢

解决方法

选中此沙箱。

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

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.c {
  height: 200px;
}

.d,.e { 
  grid-column: 1;
}

.f {
  
}

您需要定义自己的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>)}</> },}]; ，以便在表格单元格中包含“复杂” html。