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

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

​

​

Answer 1

你应该考虑使用React bootstrap，它非常容易安装和使用。您应该检查的部分是与grids and columns有关的。下面是如何使用bootstraps列设置控制列的示例。使用宽度数据中的最后一位为每一项设置每列的宽度，例如col 2。一共有12列。因此，您可以划分为12个，以使每列具有不同的宽度。如1、2、2、7或1、3、3、5等

import React from 'react';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function ColumnWidths(props) {
  const columnheadings = [
{
  name: "ID",
  selector: "id",
  sortable: true,
  width: "col col-lg-1",
},
{
  name: "Nombre Rol",
  selector: "id",
  sortable: true,
  width: "col col-lg-2",
},
{
  name: "Descripción Rol",
  selector: "id",
  sortable: true,
  width: "col col-lg-2",
},
{
  name: "Acciones",
  selector: "id",
  sortable: true,
  width: "col col-lg-7",
}
];

const columndataitem = [
{
  data: "1",
  selector: "id",
  sortable: true,
  width: "col col-lg-1",
},
{
  data: "Lorem ipsum dolor sit amet, consectetur ",
  selector: "id",
  sortable: true,
  width: "col col-lg-2",
},
{
  data: "Lorem ipsum dolor sit amet, consectetur ",
  selector: "id",
  sortable: true,
  width: "col col-lg-2",
},
{
  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.",
  selector: "id",
  sortable: true,
  width: "col col-lg-7",
}
];

const headings = columnheadings.map(e => <div className={e.width}><h4>{e.name}</h4></div>);
const data     = columndataitem.map(e => <div className={e.width}>{e.data}</div>);
return(
  <>
    <div class="container-fluid">
      <div class="row">
      {headings}
      {data}
      </div>
    </div>
  </>
)
}