Почему я не могу отобразить первые 10 столбцов в этой таблице React - ReactJS

Question

Я слежу за этим примером таблицы React с ее официального сайта - https://codesandbox.io/s/n2gqAxl7

У меня есть таблица React, которая будет иметь 13 столбцов, для нескольких столбцов у нас есть подстолбцы, а для нескольких столбцов - отдельныестолбцы.

Моя таблица будет выглядеть так -

Как видно, первые 10 столбцов независимы, а последние3 столбца имеют дочерние столбцы.

В первых 10 столбцах столбцы не будут иметь средства доступа, в то время как столбцы с 6 по 10 будут иметь средства доступа к указанному выше столбцу (от 1 до 5) в одной строке и свои собственные (от 6 до 10).) accessor в новой строке.

Я в основном изменил константу, названную столбцами

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

Я нашел ошибку в вашем коде, вы не возвращали данные из заголовка и метода доступа.

замените ваш 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"));