Блог

Ссылка на таблицу проверки Codesandbox

Заголовок кажется отображаемым, но самое странное то, что, когда я регистрирую данные в консоли, в нем отображаются все необходимые данные. Но если я утешу.строка журнала нет ни одного объекта, который можно было бы увидеть в реквизитах данных. Как я могу отобразить здесь все содержимое таблицы?

 import { FC } from "react";
import { useTable } from "react-table";

interface Column {
  Header: string;
  accessor: string;
}

interface TableProps {
  columns: Array<Column>;
  data: Array<any>;
}

export const Table: FC<TableProps> = ({ columns, data }) => {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({
      data,
      columns,
    });
  console.log(columns, data);
  return (
    <>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row) => {
            console.log(row);
            prepareRow(row);

            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => (
                  <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </>
  );
}; 

Во-первых, вам нужно проверить свои данные, так как структура неверна:

/data/table.js

 export const TableContent = [
    {
        "available on all exchanges": "Live trading terminal",
        "pioneer": true,
        "explorer": true,
        "adventurer": true,
        "hero": true
    },
 

Должно быть:

 export const TableContent = [
    {
        "feature": "Live trading terminal",
        "pioneer": true,
        "explorer": true,
        "adventurer": true,
        "hero": true
    }
 

Во-вторых, в определении столбца необходимо указать, что некоторые значения являются логическими и должны быть преобразованы, если вы хотите отобразить их в виде строки.

/данные/столбцы.tsx

 export const TableHeaders = [
  {
    id: 'feature',
    Header: 'Features',
    accessor: 'feature'
  },
  {
    Header: 'Pioneer',
    id: 'pioneer',
    accessor: (d: any) => d.pioneer.toString()
  },
  {
    Header: 'Explorer',
    id: 'explorer',
    accessor: (d: any) => d.explorer.toString()
  },
  {
    Header: 'Adventurer',
    id: 'adventurer',
    accessor: (d: any) => d.adventurer.toString()
  },
  {
    Header: 'Hero',
    id: 'hero',
    accessor: (d: any) => d.hero.toString()
  }
];

 

Это приведет к:

Демо-версия Codesandbox