控制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

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

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
},]

Answer 2

您应该考虑使用React bootstrap它的设置和使用非常简单。您应该查看的部分与您应该检查的部分与网格和列。下面是如何使用引导列设置来控制列的示例。使用每个项目的宽度数据中的最后一位数字设置每列​​的宽度，例如 col-lg-2。有12列。因此，您可以将 12 等分，使每列具有不同的宽度。例如 1,2,2,7 或 1,3,3,5 等

\n

import React from \'react\';\nimport Row from \'react-bootstrap/Row\';\nimport Col from \'react-bootstrap/Col\';\n\nexport default function ColumnWidths(props) {\n  const columnheadings = [\n{\n  name: "ID",\n  selector: "id",\n  sortable: true,\n  width: "col col-lg-1",\n},\n{\n  name: "Nombre Rol",\n  selector: "id",\n  sortable: true,\n  width: "col col-lg-2",\n},\n{\n  name: "Descripci\xc3\xb3n Rol",\n  selector: "id",\n  sortable: true,\n  width: "col col-lg-2",\n},\n{\n  name: "Acciones",\n  selector: "id",\n  sortable: true,\n  width: "col col-lg-7",\n}\n];\n\nconst columndataitem = [\n{\n  data: "1",\n  selector: "id",\n  sortable: true,\n  width: "col col-lg-1",\n},\n{\n  data: "Lorem ipsum dolor sit amet, consectetur ",\n  selector: "id",\n  sortable: true,\n  width: "col col-lg-2",\n},\n{\n  data: "Lorem ipsum dolor sit amet, consectetur ",\n  selector: "id",\n  sortable: true,\n  width: "col col-lg-2",\n},\n{\n  data: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo magna, ornare nec tempus id, dictum et eros. Vivamus laoreet consequat elit ut feugiat. Aenean lacinia, risus eget vulputate malesuada, mauris leo rhoncus ante, eget iaculis augue neque ultrices tellus. Donec elementum, neque id gravida efficitur, ante est molestie nisl, in varius purus nisl ac quam. Sed ac varius mi. Sed felis felis, maximus nec est eget, ultrices euismod massa. Donec viverra mauris nulla, vel lobortis libero sollicitudin nec. Nunc sed accumsan orci. Etiam fringilla felis ut rhoncus eleifend. Integer vitae dui sed arcu auctor ultricies.",\n  selector: "id",\n  sortable: true,\n  width: "col col-lg-7",\n}\n];\n\nconst headings = columnheadings.map(e => <div className={e.width}><h4>{e.name}</h4></div>);\nconst data     = columndataitem.map(e => <div className={e.width}>{e.data}</div>);\nreturn(\n  <>\n    <div class="container-fluid">\n      <div class="row">\n      {headings}\n      {data}\n      </div>\n    </div>\n  </>\n)\n}\n

\n