Как сделать так, чтобы ячейки таблицы React v6 имели одинаковую ширину

Question

Я использую пакет response-table-v6 для отображения большого количества данных. Проблема, с которой я столкнулся, заключается в том, что если строка содержит пустую ячейку, эта пустая ячейка исчезает, а ячейка слева занимает пустое пространство, из-за чего данные всей таблицы выглядят неравномерно с разными размерами ширины. У меня также есть свойство filterable для некоторых столбцов, но происходит то же самое; вместо того, чтобы занимать ширину каждого столбца, они берут всю ширину таблицы.

Что я здесь делаю не так? Любая помощь или предложения будут высоко оценены.

Вот мой код

import React, { Component } from 'react';
import ReactTable from "react-table-v6";
import "react-table-v6/react-table.css";

class index extends Component {
  render() {

  const columns = [
        {
          Header: "ID",
          accessor: "id",
          filterable: true,
          style: {
            textAlign: "center",
          },
          width: 80,
        },
        {
          Header: "LAST NAME",
          accessor: "lastName",
          filterable: true,
          style: {
            textAlign: "left",
          },
        },
        {
          Header: "FIRST NAME",
          accessor: "firstName",
          filterable: true,
          style: {
            textAlign: "left",
          },
        },
        {
          Header: "PRIMARY PHONE",
          accessor: "primaryPhoneNumber",
          filterable: false,
          width: 110,
          style: {
            textAlign: "left",
          },
        },
        {
          Header: "CELLPHONE",
          accessor: "cellphone",
          filterable: false,
          width: 110,
          style: {
            textAlign: "left",
          },
        },
        {
          Header: "WORK PHONE",
          accessor: "workPhone",
          filterable: false,
          width: 110,
          style: {
            textAlign: "left",
          },
        },

        {
          Header: "PETS",
          Cell: (props) => {
            return props.original.Pets.map((pet) => {
              return (
                <ul key={pet.id}>
                  <li>{pet.name}</li>
                  <span>{pet.breed}</span>
                </ul>
              );
            });
          },
          sortable: false,
          filterable: false,
          width: 150,
        },
        {
          Header: "ACTIONS",
          Cell: (props) => {
            return (
              <div>
                <Link
                  className="btn btn-info btn-table-clients"
                  to={"/auth/api/clients/" + props.original.id}
                >
                  More Info
                </Link>
                <button
                  className="btn btn-danger btn-table-clients"
                  onClick={() => {
                    // console.log("props", props)
                    this.handleDeleteClient(props.original.id);
                  }}
                >
                  Delete
                </button>
              </div>
            );
          },
          sortable: false,
          filterable: false,
        },
      ];
    return (
      <div>
        <ReactTable
                className="react-table-component"
                columns={columns}
                data={clients}
                defaultPageSize={8}
                noDataText={"No records found with your search"}
                defaultSorted={[
                  {
                    id: "id",
                    desc: true,
                  },
                ]}
         ></ReactTable>
      </div>
    );
  }
}

export default index;