Control width of react-data-table-component columns

Question

I need to control the widths of the table columns from "react-data-table-component". So far I am using this but it doesn't work.

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

This is the component -> https://www.npmjs.com/package/react-data-table-component

Answer 1

You can make use of different properties on column like: wrap:true, maxWidth:"40px" etc.

For ex:

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

Source: https://github.com/jbetancur/react-data-table-component/issues/234

CodePen: https://codesandbox.io/embed/react-data-table-sandbox-custom-growwtap-9upub

Answer 2

A little late, but for future readers here is what worked for me. Using the original code in the question, adding width: "80px" in the same level as name: "ID" causes it to size appropriately.

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 3

You should look into using React bootstrap It's super easy to setup and use. The section that you should be checking out is to do with grids and columns. Here's an example of how you can control the columns using bootstraps column settings. Set the width of each column using the last digit in the width data for each item eg col-lg-2. There are 12 columns. So you can divide up 12 to have different widths for each of the columns. eg 1,2,2,7 or 1,3,3,5 etc

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>
  </>
)
}