reactjs - 控制 react-data-table-component 列的宽度

Question

我需要从“react-data-table-component”控制表格列的宽度。到目前为止，我正在使用它，但它不起作用。

const columns = [
{
  name: "ID",
  selector: "id",
  sortable: true,
  headerStyle: (selector, id) => {
    return { width: "80px", textAlign: "center" };
  },
},
{
  name: "Another column",
  selector: "blahblah",
  sortable: true,
},]

这是组件 -> https://www.npmjs.com/package/react-data-table-component

Answer 1

有点晚了，但对于 future 的读者来说，这是对我有用的。 使用问题中的原始代码，在与 name: "ID" 相同的级别添加 width: "80px" 会使其大小合适。

const columns = [
{
  name: "ID",
  selector: "id",
  sortable: true,
  width: "80px"                       // added line here
  headerStyle: (selector, id) => {
    return { textAlign: "center" };   // removed partial line here
  },
},
{
  name: "Another column",
  selector: "blahblah",
  sortable: true,
  width: "4rem"                       // another for example
},]