如何使React Table V6单元格具有相同的宽度

问题描述

我正在使用react-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",style: {
            textAlign: "left",{
          Header: "FirsT NAME",accessor: "firstName",{
          Header: "PRIMARY PHONE",accessor: "primaryPhoneNumber",filterable: false,width: 110,{
          Header: "CELLPHONE",accessor: "cellphone",{
          Header: "WORK PHONE",accessor: "workPhone",{
          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,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>
            );
          },];
    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;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-table-v6 reactjs reactjs