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>

    );

};

    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",

  },

];

<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>