css - 如何动态控制 react-bootstrap-table-next 表格列的宽度？

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

你可以使用样式 Prop

{
  dataField: "name",

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

}