From d286c7f6ff492528d99de8445427d317e3081d8b Mon Sep 17 00:00:00 2001
From: Tavares Hansen <tavares.hansen321@gmail.com>
Date: Mon, 3 Aug 2020 19:09:35 -0700
Subject: [PATCH] [component][x]: add reusable Table component

---
 components/_shared/Table.tsx | 37 ++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 components/_shared/Table.tsx

diff --git a/components/_shared/Table.tsx b/components/_shared/Table.tsx
new file mode 100644
index 00000000..0f824191
--- /dev/null
+++ b/components/_shared/Table.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface TableProps {
+  columns: Array<any>;
+  data: Array<any>;
+  className?: string;
+}
+
+const Table: React.FC<TableProps> = ({ columns, data, className }) => {
+  return (
+    <table className={`table-auto w-full text-sm text-left my-6 ${className}`}>
+      <thead>
+        <tr>
+          {columns.map(({ key, name }) => (
+            <th key={key} className="px-4 py-2">
+              {name}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((item) => (
+          <tr key={item.id}>
+            {columns.map(({ key, render }) => (
+              <td className="px-4 py-2">
+                {(render && typeof render === 'function' && render(item)) ||
+                  item[key]}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default Table;