反应表无法正确呈现

Question

我正在关注React Table的这个示例-https://codesandbox.io/s/n2gqAxl7

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

假设此表中的1到10列是独立的。在第11列至第13列中，我们有上层列和下层列的概念。

在前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
    }
  ]
}];

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

https://codesandbox.io/s/jnjrmwy3z9

https://jnjrmwy3z9.codesandbox.io/

前10列显示不正确。请帮助我。