feat: enable transform of item fields

1 files changed, 11 insertions, 1 deletions

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>