时间戳

首页 > 解决方案 > 如何动态控制 react-bootstrap-table-next 表列的宽度？

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

问题描述

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

  { 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>
  );
};```

标签： cssreactjsreact-bootstrap-table

解决方案

在浏览和搜索解决方案时，我偶然发现了他们有据可查的文档页面。最初，让我感到困惑的是react-bootstrap-table-next这个名字：它被称为 react-bootstrap-table2。

因此，要控制 react-bootstrap-table-next 表列的宽度，您应该添加classes属性以在外部设置样式或设置样式以使用内联样式。两个 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>
  );
};

故事书很简单。

推荐阅读