From 296f43c5aef2a128defc3fe016c01f7d6455e6ba Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 14 Mar 2021 13:47:56 +0300
Subject: feat: enable transform of item fields

---
 src/components/ListTable.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'src/components/ListTable.tsx')

diff --git a/src/components/ListTable.tsx b/src/components/ListTable.tsx
index c333698..7c316ed 100644
--- a/src/components/ListTable.tsx
+++ b/src/components/ListTable.tsx
@@ -4,6 +4,7 @@ import _ from 'lodash';
 interface Field {
   key: string;
   label: string;
+  transform?: (text: string) => string;
 }
 
 interface Props {
@@ -12,6 +13,11 @@ interface Props {
   handleRowClick?: (index: number) => void;
 }
 
+const getItemField = (item: any, field: Field) => {
+  const value = _.get(item, field.key);
+  return field.transform ? field.transform(value) : value;
+};
+
 
 const ListTable: React.FC<Props> = ({ items = [], fields, handleRowClick = () => {} }) => {
   if (!items.length) return <div className="text-center p-6">No data</div>;
@@ -29,7 +35,11 @@ const ListTable: React.FC<Props> = ({ items = [], fields, handleRowClick = () =>
             className={`border-b hover:bg-gray-100 cursor-pointer ${index % 2 && 'bg-gray-50'}`}
             onClick={() => handleRowClick(index)}
           >
-            {fields.map(field => <td key={`${item._id} ${field.label}`} className="p-3">{_.get(item, field.key)}</td>)}
+            {fields.map(field => (
+              <td key={`${item._id} ${field.label}`} className="p-3">
+                {getItemField(item, field)}
+              </td>
+            ))}
           </tr>
         ))}
       </tbody>
-- 
cgit v1.2.3