title: How can I dynamically control the width of a react-bootstrap-table-next table column?
body: <p>Below is what my table looks like in code. How can i control each column and make them have different widths?</p>
  
  <pre><code>  { id: 1, name: "Item 1", price: 100 },
    { id: 2, name: "Item 2", price: 102 }
  ];
  
  const ProductList = props =&gt; {
    const columns = [
      {
        dataField: "id",
        text: "Product ID"
      },
      {
        dataField: "name",
        text: "Product Name"
      },
      {
        dataField: "price",
        text: "Product Price"
      }
    ];
    return (
      &lt;div style={{ padding: "20px" }}&gt;
        &lt;h1 className="h2"&gt;Products&lt;/h1&gt;
        &lt;BootstrapTable keyField="id" data={products} columns={columns} /&gt;
      &lt;/div&gt;
    );
  };```
  </code></pre>