如何动态控制反应-引导-表-下一个表列的宽度?

Question

下面是我的表格在代码中的样子。如何控制每列并使它们具有不同的宽度？

{ id: 1, name: "Item 1", price: 100 },
{ id: 2, name: "Item 2", price: 102 }
];
const ProductList = props => {
const columns = [
{
dataField: "id",
text: "Product ID"
},
{
dataField: "name",
text: "Product Name"
},
{
dataField: "price",
text: "Product Price"
}
];
return (
<div style={{ padding: "20px" }}>
<h1 className="h2">Products</h1>
<BootstrapTable keyField="id" data={products} columns={columns} />
</div>
);
};```

Answer 1

您可以使用样式道具

{
dataField: "name",
style: { 
width: '90px' 
}
text: "Product Name"
}

Answer 2

在冲浪和寻找解决方案时，我偶然发现了他们记录良好的文档页面。最初，让我感到困惑的是react-bootstrap-table-next这个名字：它被称为 react-bootstrap-table2。

因此，要控制 react-bootstrap-table-next table 列的宽度，您应该添加类props 以在外部设置其样式或样式以使用内联样式。这两个道具都能够采用回调函数来更好地操作它。

代码现在将如下所示：

这里操作第一列的宽度：

const ProductList = props => {
const columns = [
{
dataField: "id",
text: "Product ID",
style: {
width: '12em',
}
},
{
dataField: "name",
text: "Product Name"
},
{
dataField: "price",
text: "Product Price"
}
];
return (
<div style={{ padding: "20px" }}>
<h1 className="h2">Products</h1>
<BootstrapTable keyField="id" data={products} columns={columns} />
</div>
);
};

故事书非常简单。

Answer 3

只需将width交给columns

const columns = [
{
dataField: "id",
text: "Product ID",
style:{'width' : '90px'}
},
{
dataField: "name",
text: "Product Name",
style:{'width' : '90px'}
},
{
dataField: "price",
text: "Product Price",
style:{'width' : '90px'}
}
];