From 9e0fde7ed793426d9a3ed8c79e56bc95c01486b2 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 14 Mar 2021 00:47:33 +0300
Subject: feat: implement ListTable

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

(limited to 'src/components')

diff --git a/src/components/ListTable.tsx b/src/components/ListTable.tsx
new file mode 100644
index 0000000..5d899e0
--- /dev/null
+++ b/src/components/ListTable.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface Field {
+  key: string;
+  label: string;
+}
+
+interface Props {
+  items: any[];
+  fields: Field[];
+  handleRowClick?: (index: number) => any;
+}
+
+
+const ListTable: React.FC<Props> = ({ children, items, fields, handleRowClick = () => {} }) => {
+  return (
+    <table className="m-2 table-auto w-full">
+      <thead>
+        <tr className="border-b select-none">
+          {fields.map(field => <th>{field.label}</th>)}
+        </tr>
+      </thead>
+      <tbody>
+        {items.map((item, index) => (
+          <tr
+            className={`border-b hover:bg-gray-100 cursor-pointer ${index % 2 && 'bg-gray-50'}`}
+            onClick={() => handleRowClick(index)}
+          >
+            {fields.map(field => <td className="p-3">{item[field.key]}</td>)}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default ListTable;
-- 
cgit v1.2.3