我无法在UI中获取React表的页眉和页脚

Question

这是我正在使用的代码。 为了渲染这个表，我使用了 React 表库

This a Basic table component where I am rendering the table header, body, footer

    import { useMemo } from "react";
import { useTable } from "react-table";
import { COLUMNS } from "./columns";
import MOCK_DATA from "./MOCK_DATA.json";
import "./Basictable.css";

export const BasicTable = () => {
  const columns = useMemo(() => COLUMNS, []);
  const data = useMemo(() => MOCK_DATA, []);
  //   useTable({ columns: COLUMNS, data: MOCK_DATA });
  //   useTable({ columns: columns, data: data });
  const tableInstance = useTable({ columns, data });
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups, // a group of headers,
      footerGroups,
      rows, //on each we access the cells, and from each cell we call the render function passing 
  in the string "cell".It picks the  value from MOCK_JSON data for each column.
      prepareRow,
    } = tableInstance;
    return (
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => {
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => {
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>;
                console.log(column.render("Header"));
              })}
            </tr>;
          })}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  // console.log(cell);
                  return (
                    <td {...cell.getCellProps()}>{cell.render("Cell")} </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
        <tfoot>
          {footerGroups.map((footerGroup) => {
            <tr {...footerGroup.getFooterGroupProps()}>
              {footerGroup.headers.map((column) => {
                <td {...column.getFooterProps}>{column.render("Footer")} </td>;
                console.log(column.render("Footer"));
              })}
            </tr>;
          })}
        </tfoot>
      </table>
    );
};

column.js

    export const COLUMNS = [
  {
    Header: "Id",
    accessor: "id",
    Footer: "Id",
  },
  {
    Header: "First Name",
    accessor: "first_name",
    Footer: "First Name",
  },
  {
    Header: "Last Name",
    accessor: "last_name",
    Footer: "Last Name",
  },
  {
    Header: "Date of Birth",
    accessor: "date_of_birth",
    Footer: "Date of Birth",
  },
  {
    Header: "Country",
    accessor: "country",
    Footer: "Country",
  },
  {
    Header: "Phone",
    accessor: "phone"
    Footer: "Phone",
  },
];

但是从这段代码中我只能看到表体。 我看不到表格页眉和页脚。 如果有人知道解决方案请帮忙。

这就是我在用户界面中得到的

这是预期的。

Answer 1

在您的代码中进行以下更改：

 <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) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => (
                <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
      <tfoot>
        {footerGroups.map((footerGroup) => (
          <tr {...footerGroup.getFooterGroupProps()}>
            {footerGroup.headers.map((column) => (
              <td {...column.getFooterProps()}>{column.render("Footer")}</td>
            ))}
          </tr>
        ))}
      </tfoot>
    </table>