有点晚了，但对于未来的读者来说，这里是我的工作：使用问题中的原始代码，在与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
},]

你应该考虑使用React bootstrap它非常容易设置和使用。你应该 checkout 的部分是与网格和列。这里有一个例子，你可以如何控制列使用引导列设置。设置每列的宽度使用每个项目的宽度数据的最后一位数字，如col-lg-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>
  </>
)
}

您可以使用列的不同属性，例如：* * 换行：真**，**最大宽度："40px"**等
例如：

`const columns = [{
name: "Title",
selector: "title",
sortable: true,
wrap: true},{
name: "EmailWrapped",
selector: "email",
sortable: true,
cell: row => <EmailWrap {...row} />,
maxWidth: "150px"

}]`
来源：https://github.com/jbetancur/react-data-table-component/issues/234
代码笔：https://codesandbox.io/embed/react-data-table-sandbox-custom-growwtap-9upub