为什么我无法在此 React Table 中显示前 10 列 - ReactJS

Question

我正在关注 React Table 官方网站上的这个例子 - https://codesandbox.io/s/n2gqAxl7

我有一个 React Table，它将有 13 列，对于少数列，我们有子列，而对于少数列，我们有单独的列。

我的 table 看起来像这样 -

如您所见，前 10 列是独立的，而后 3 列有子列。

在前 10 列中，这些列将没有访问器，而第 6 到 10 列将在一行中具有上述列（1 到 5）的访问器，并在新的一行中具有它们自己的（6 到 10）访问器。

我主要修改了名为columns的常量

const columns = [{
  id: 'col16',
  Header: () => {
    (
      <div>
        <div className="col1-heading">
          Col 1
            </div>
        <div className="col6-heading">
          Col 6
            </div>
      </div>
    );
  },
  accessor: (d) => {
        (
          <div>
            <div className="col1">
              {d.firstName}
            </div>
            <div className="col6">
              {d.lastName}
            </div>
          </div>
        );
      },
  width: 200
},
{
  id: 'col27',
  Header: () => {
    (
      <div>
        <div className="col2-heading">
          Col 2
            </div>
        <div className="col7-heading">
          Col 7
            </div>
      </div>
    );
  },
  accessor: (d) => {
        (
          <div>
            <div className="col2">
              {d.firstName}
            </div>
            <div className="col7">
              {d.lastName}
            </div>
          </div>
        );
      },
  width: 200
},
{
  id: 'col38',
  Header: () => {
    (
      <div>
        <div className="col3-heading">
          Col 3
            </div>
        <div className="col8-heading">
          Col 8
            </div>
      </div>
    );
  },
  accessor: (d) => {
        (
          <div>
            <div className="col3">
              {d.firstName}
            </div>
            <div className="col8">
              {d.lastName}
            </div>
          </div>
        );
      },
  width: 200
},
{
  id: 'col49',
  Header: () => {
    (
      <div>
        <div className="col4-heading">
          Col 4
            </div>
        <div className="col9-heading">
          Col 9
            </div>
      </div>
    );
  },
  accessor: (d) => {
        (
          <div>
            <div className="col4">
              {d.firstName}
            </div>
            <div className="col9">
              {d.lastName}
            </div>
          </div>
        );
      },
  width: 200
},
{
  id: 'col510',
  Header: () => {
    (
      <div>
        <div className="col5-heading">
          Col 5
            </div>
        <div className="col10-heading">
          Col 10
            </div>
      </div>
    );
  },
  accessor: (d) => {
        (
          <div>
            <div className="col5">
              {d.firstName}
            </div>
            <div className="col10">
              {d.lastName}
            </div>
          </div>
        );
      },
  width: 200
},
{
  id: 'col11',
  Header: 'Col 11',
  columns: [
    {
      id: 'scol11a',
      Header: 'Sub Col 11a',
      accessor: (d) => { return (d.firstName); },
      width: 80,
    },
    {
      id: 'scol11b',
      Header: 'Sub Col 11b',
      accessor: (d) => { return (d.firstName); },
      width: 80
    },
    {
      id: 'scol11c',
      Header: 'Sub Col 11c',
      accessor: (d) => { return (d.firstName); },
      width: 80
    },
    {
      id: 'scol11d',
      Header: 'Sub Col 11d',
      accessor: (d) => { return (d.firstName); },
      width: 80
    }
  ]
},
{
  id: 'col12',
  Header: 'Col 12',
  columns: [
    {
      id: 'scol12a',
      Header: 'Sub Col 12',
      accessor: (d) => { return (d.firstName); },
      width: 80
    }
  ]
},
{
  id: 'col13',
  Header: 'Col 13',
  columns: [
    {
      id: 'scol13a',
      Header: 'Sub Col 13a',
      accessor: (d) => { return (d.firstName); },
      width: 80
    },
    {
      id: 'scol13b',
      Header: 'Sub Col 13b',
      accessor: (d) => { return (d.firstName); },
      width: 80
    },
    {
      id: 'scol13c',
      Header: 'Sub Col 13c',
      accessor: (d) => { return (d.firstName); },
      width: 80
    },
    {
      id: 'scol13d',
      Header: 'Sub Col 13d',
      accessor: (d) => { return (d.firstName); },
      width: 80
    }
  ]
}];

我还创建了 2 个 CodeSandbox。这是我的 CodeSandbox

https://codesandbox.io/s/jnjrmwy3z9

https://jnjrmwy3z9.codesandbox.io/

https://codesandbox.io/s/xvr45zrnmo

https://xvr45zrnmo.codesandbox.io/

请帮忙找出我哪里出错了。为什么我无法显示前 10 列？

Answer 1

我在您的代码中发现了一些错误，您没有从 Header 和访问器方法返回数据。

请用这个

替换你的 index.js

import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";

// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";

const columns = [
  {
    id: "col16",
    Header: () => {
      return (
        <div>
          <div className="col1-heading">Col 1</div>
          <div className="col6-heading">Col 6</div>
        </div>
      );
    },
    accessor: d => {
      return (
        <div>
          <div className="col1">{d.firstName}</div>
          <div className="col6">{d.lastName}</div>
        </div>
      );
    },
    width: 200
  },
  {
    id: "col27",
    Header: () => {
      return (
        <div>
          <div className="col2-heading">Col 2</div>
          <div className="col7-heading">Col 7</div>
        </div>
      );
    },
    accessor: d => {
      return (
        <div>
          <div className="col2">{d.firstName}</div>
          <div className="col7">{d.lastName}</div>
        </div>
      );
    },
    width: 200
  },
  {
    id: "col38",
    Header: () => {
      return (
        <div>
          <div className="col3-heading">Col 3</div>
          <div className="col8-heading">Col 8</div>
        </div>
      );
    },
    accessor: d => {
      return (
        <div>
          <div className="col3">{d.firstName}</div>
          <div className="col8">{d.lastName}</div>
        </div>
      );
    },
    width: 200
  },
  {
    id: "col49",
    Header: () => {
      return (
        <div>
          <div className="col4-heading">Col 4</div>
          <div className="col9-heading">Col 9</div>
        </div>
      );
    },
    accessor: d => {
      return (
        <div>
          <div className="col4">{d.firstName}</div>
          <div className="col9">{d.lastName}</div>
        </div>
      );
    },
    width: 200
  },
  {
    id: "col510",
    Header: () => {
      return (
        <div>
          <div className="col5-heading">Col 5</div>
          <div className="col10-heading">Col 10</div>
        </div>
      );
    },
    accessor: d => {
      return (
        <div>
          <div className="col5">{d.firstName}</div>
          <div className="col10">{d.lastName}</div>
        </div>
      );
    },
    width: 200
  },
  {
    id: "col11",
    Header: "Col 11",
    columns: [
      {
        id: "scol11a",
        Header: "Sub Col 11a",
        accessor: d => {
          return d.firstName;
        },
        width: 80
      },
      {
        id: "scol11b",
        Header: "Sub Col 11b",
        accessor: d => {
          return d.firstName;
        },
        width: 80
      },
      {
        id: "scol11c",
        Header: "Sub Col 11c",
        accessor: d => {
          return d.firstName;
        },
        width: 80
      },
      {
        id: "scol11d",
        Header: "Sub Col 11d",
        accessor: d => {
          return d.firstName;
        },
        width: 80
      }
    ]
  },
  {
    id: "col12",
    Header: "Col 12",
    columns: [
      {
        id: "scol12a",
        Header: "Sub Col 12",
        accessor: d => {
          return d.firstName;
        },
        width: 80
      }
    ]
  },
  {
    id: "col13",
    Header: "Col 13",
    columns: [
      {
        id: "scol13a",
        Header: "Sub Col 13a",
        accessor: d => {
          return d.firstName;
        },
        width: 80
      },
      {
        id: "scol13b",
        Header: "Sub Col 13b",
        accessor: d => {
          return d.firstName;
        },
        width: 80
      },
      {
        id: "scol13c",
        Header: "Sub Col 13c",
        accessor: d => {
          return d.firstName;
        },
        width: 80
      },
      {
        id: "scol13d",
        Header: "Sub Col 13d",
        accessor: d => {
          return d.firstName;
        },
        width: 80
      }
    ]
  }
];

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: makeData()
    };
  }
  render() {
    const { data } = this.state;
    return (
      <div>
        <ReactTable
          data={data}
          columns={columns}
          defaultPageSize={10}
          className="-striped -highlight"
          SubComponent={row => {
            return (
              <div style={{ padding: "20px" }}>
                <em>
                  You can put any component you want here, even another React
                  Table!
                </em>
                <br />
                <br />
                <ReactTable
                  data={data}
                  columns={columns}
                  defaultPageSize={3}
                  showPagination={false}
                  SubComponent={row => {
                    return (
                      <div style={{ padding: "20px" }}>
                        Another Sub Component!
                      </div>
                    );
                  }}
                />
              </div>
            );
          }}
        />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

为什么我无法在此 React Table 中显示前 10 列 - ReactJS

Why I am not able to display the first 10 columns in this React Table - ReactJS

reactjs

react-table