add basic table to games page

src/components/Table.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+type DataItem = Record<string, any>;
+
+export interface Header {
+  key: string;
+  header: string;
+  formatter?: (data: DataItem) => JSX.ElementType;
+}
+
+interface Props {
+  data: DataItem[];
+  headers: Header[];
+}
+
+export default function Table({ data, headers }: Props): JSX.Element {
+  function getProperty(data: DataItem, header: Header): any {
+    if (header.key === 'index') {
+      return 'index';
+    }
+
+    return data[header.key];
+  }
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          {headers.map((item, idx) => (
+            <th key={idx}>{item.header}</th>
+          ))}
+        </tr>
+      </thead>
+
+      <tbody>
+        {data.map((item, idx) => (
+          <tr key={idx}>
+            {headers.map((header, hidx) => (
+              <td key={hidx}>{getProperty(item.data, header)}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}