make a table not a function so we can use popular libs as react-table about react-super-responsive-table HOT 3 CLOSED

import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css';

import { Table, Thead, Tbody, Tr, Th, Td, Box } from "@chakra-ui/react";
import { useTable } from "react-table";
import styles from "src/theme/css/tables.module.css";
import { chakra } from "@chakra-ui/react";
import { FaAngleDown, FaAngleUp } from "react-icons/fa";
const ChakraDownArrow = chakra(FaAngleDown);
const ChakraUpArrow = chakra(FaAngleUp);
import { useMemo } from "react";

const ResponsiveTableExample = () => {
  // dummy data
  const data = useMemo(
    () => [
      { testData1: "hello", testData2: "world" },
      { testData1: "hello again", testData2: "old friend" },
    ],
    []
  );

  // dummy headers for the dummy data
  const columns = useMemo(
    () => [
      {
        Header: "Test1",
        accessor: "testData1",
      },
      {
        Header: "Test2",
        accessor: "testData2",
      },
    ],
    []
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    prepareRow,
  } = useTable();

  return (
    // apply the appropriate class from the
    // react-super-responsive-table CSS
    <Table
        {...getTableProps()}
        className={styles.responsiveTable}
        borderRadius="10px"
      >
        <Thead>
          {headerGroups.map((headerGroup) => (
            <Tr
              {...headerGroup.getHeaderGroupProps()}
              key={`table-row-${JSON.stringify(headerGroup)}`}
            >
              {headerGroup.headers.map((column, i) => (
                <Th
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                  key={`table-head-${column.Header}-${i}`}
                >
                  {column.render("Header")}
                  <chakra.span pl="4%" key={`span-${column.Header}-${i}`}>
                    {column.isSorted ? (
                      column.isSortedDesc ? (
                        <ChakraDownArrow
                          aria-label="sorted descending"
                          key={`down-arrow-${column.Header}-${i}`}
                        />
                      ) : (
                        <ChakraUpArrow
                          aria-label="sorted ascending"
                          key={`up-arrow-${column.Header}-${i}`}
                        />
                      )
                    ) : null}
                  </chakra.span>
                </Th>
              ))}
            </Tr>
          ))}
        </Thead>
        <Tbody {...getTableBodyProps()}>
          {page.map((row, i) => {
            prepareRow(row);

            return (
              <Tr {...row.getRowProps()} key={`table-row-${row.id}-${i}`}>
                {row.cells.map((cell, i) => {
                  return (
                    <Td
                      {...cell.getCellProps()}
                      key={`table-data-${cell.value}-${i}`}
                       // apply the appropriate class from the
                       // react-super-responsive-table CSS
                      className={styles.pivoted}
                    >
                      {/* map through headerGroups once again and only render
                           a header if it corresponds with the correct column */}
                      {headerGroups.map((headerGroup) => {
                        return (
                          <Box key={`${JSON.stringify(headerGroup)}-container`}>
                            {headerGroup.headers.map((column, i) => {
                              return cell.column.Header === column.Header ? (
                                <Box
                                  key={`mobile-table-header-${column.Header}-${i}`}
                                  // apply the appropriate class from the
                                  // react-super-responsive-table CSS
                                  className={styles.tdBefore}
                                >
                                  {column.render("Header")}
                                </Box>
                              ) : null;
                            })}
                          </Box>
                        );
                      })}
                      {cell.render("Cell")}
                    </Td>
                  );
                })}
              </Tr>
            );
          })}
        </Tbody>
      </Table>
  );
};

export default ResponsiveTableExample;