intended for sandboxing

BasicHtmlTable.tsx

import React from "react";
// prettier-ignore
export interface BasicHtmlTableProps { head?: React.ReactNode[][]; body?: React.ReactNode[][]; foot?: React.ReactNode[][]; tStyle?: React.CSSProperties; p?(cell: React.ReactNode): Record<string, any>; }
// prettier-ignore
export const BasicHtmlTable = ({ head, body, foot, tStyle = { border: "1px solid black" }, p = (cell: any) => ({ key: Math.random(), children: cell, style: tStyle }) }: BasicHtmlTableProps) => {
  const headJsx = head?.map((r) => <tr {...p(r.map((c, i) => <th {...p(c)} />))}/>); // prettier-ignore
  const bodyJsx = body?.map((r) => <tr {...p(r.map((c, i) => <td {...p(c)} />))}/>); // prettier-ignore
  const footJsx = foot?.map((r) => <tr {...p(r.map((c, i) => <td {...p(c)} />))}/>); // prettier-ignore
  return (
    <table style={tStyle}>
      {head && <thead>{headJsx}</thead>}
      {body && <tbody>{bodyJsx}</tbody>}
      {foot && <tfoot>{footJsx}</tfoot>}
    </table>
  );
};
// <BasicHtmlTable
//  head={[["Month", "Savings"]]}
//  body={[["January", "$100"],["February", "$80"]]}
//  foot={[["Sum", "$180"]]}
// />
export const row = (
  oneKeyObj: Record<string, any>,
  key = Object.keys(oneKeyObj).pop()
) => [key, oneKeyObj[key!]];
export const ObjectTable = ({ obj }: any) => (
  <BasicHtmlTable
    head={[["Key", "Value"]]}
    body={Object.keys(obj).map((k) => row({ [k]: obj[k] }))}
  />
);