From 38f027d1d640586f019f052e9b409dcedf5d9f06 Mon Sep 17 00:00:00 2001
From: Geovanni Perez <1775792+geoperez@users.noreply.github.com>
Date: Thu, 21 Dec 2023 12:28:16 -0600
Subject: [PATCH] Add new render property to table column

---
 package.json               |  2 +-
 pnpm-lock.yaml             |  8 +++---
 sample/index.tsx           | 12 ++++++---
 src/Table/TableShimmer.tsx | 15 +++++++++++
 src/Table/index.tsx        | 54 ++++++++++++++++++++------------------
 src/Table/sortData.ts      |  6 +++++
 6 files changed, 63 insertions(+), 34 deletions(-)
 create mode 100644 src/Table/TableShimmer.tsx

diff --git a/package.json b/package.json
index 071bfaa..f2b4518 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
         "autoprefixer": "^10.4.16",
         "eslint": "^8.56.0",
         "eslint-config-unosquare": "0.8.3",
-        "eslint-plugin-prettier": "^5.1.0",
+        "eslint-plugin-prettier": "^5.1.1",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "husky": "^8.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b621324..725ca5c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,8 +80,8 @@ devDependencies:
     specifier: 0.8.3
     version: 0.8.3(eslint@8.56.0)(prettier@3.1.1)(typescript@5.3.3)
   eslint-plugin-prettier:
-    specifier: ^5.1.0
-    version: 5.1.0(eslint@8.56.0)(prettier@3.1.1)
+    specifier: ^5.1.1
+    version: 5.1.1(eslint@8.56.0)(prettier@3.1.1)
   eslint-plugin-react:
     specifier: ^7.33.2
     version: 7.33.2(eslint@8.56.0)
@@ -3406,8 +3406,8 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-prettier@5.1.0(eslint@8.56.0)(prettier@3.1.1):
-    resolution: {integrity: sha512-hQc+2zbnMeXcIkg+pKZtVa+3Yqx4WY7SMkn1PLZ4VbBEU7jJIpVn9347P8BBhTbz6ne85aXvQf30kvexcqBeWw==}
+  /eslint-plugin-prettier@5.1.1(eslint@8.56.0)(prettier@3.1.1):
+    resolution: {integrity: sha512-WQpV3mSmIobb77s4qiCZu3dBrZZ0rj8ckSfBtRrgNK9Wnh2s3eiaxNTWloz1LJ1WtvqZES/PAI7PLvsrGt/CEA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       '@types/eslint': '>=8.0.0'
diff --git a/sample/index.tsx b/sample/index.tsx
index 3a8c9ca..847ebca 100644
--- a/sample/index.tsx
+++ b/sample/index.tsx
@@ -30,6 +30,7 @@ import {
     StyledMenuSearchBox,
     Table,
     TableColumn,
+    TableCell,
     TremorContainer,
     VirtualSelect,
     useTheme,
@@ -65,15 +66,20 @@ const extraColumns: TableColumn[] = [
     { label: 'Date', dataType: 'date' },
 ];
 
-
 const onlineColumns: TableColumn[] = [
     { label: 'User Id' },
     { label: 'Id', sortOrder: 1, sortDirection: 'asc', dataType: 'number' },
-    { label: 'Title' },
+    {
+        label: 'Title', render: (column, index, data, rawData) =>
+        (<TableCell column={column} index={index} className='bg-gray-100'>
+            {rawData && <a href={`https://jsonplaceholder.typicode.com/posts/${rawData[index].id}`}>{String(data)}</a>}
+        </TableCell>
+        )
+    },
     { label: 'Body' },
 ];
 
-const calculateFooter = (data: unknown[][]) => ['Total', '', data.length, '', '', '', '', '', '', ''];
+const calculateFooter = (data: unknown[][]) => ['Total', '', String(data.length), '', '', '', '', '', '', ''];
 
 const chartData = [
     { name: 'Group A', Value: 10.15 },
diff --git a/src/Table/TableShimmer.tsx b/src/Table/TableShimmer.tsx
new file mode 100644
index 0000000..888b512
--- /dev/null
+++ b/src/Table/TableShimmer.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { TableRow, TableCell as TremorTableCell } from '@tremor/react';
+
+export const ShimmerTable = ({ colSpan }: { colSpan: number }) =>
+    Array.from({ length: 4 }).map((_, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <TableRow key={i}>
+            {Array.from({ length: colSpan }).map((_o, k) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <TremorTableCell className='p-2' key={k}>
+                    <div className='loading-shimmer rounded'>&nbsp;</div>
+                </TremorTableCell>
+            ))}
+        </TableRow>
+    ));
diff --git a/src/Table/index.tsx b/src/Table/index.tsx
index 100eb4b..924acb2 100644
--- a/src/Table/index.tsx
+++ b/src/Table/index.tsx
@@ -12,7 +12,6 @@ import {
 import {
     Flex,
     TableBody,
-    TableCell,
     TableFoot,
     TableFooterCell,
     TableHead,
@@ -20,6 +19,7 @@ import {
     TableRow,
     TextInput,
     Table as TremorTable,
+    TableCell as TremorTableCell,
 } from '@tremor/react';
 import objectHash from 'object-hash';
 import { twMerge } from 'tailwind-merge';
@@ -31,6 +31,7 @@ import { NoData } from '../NoData';
 import { searchData, searchFooter, sortData, TableCellTypes, TableColumn } from './sortData';
 import { ExportCsvButton } from '../ExportCsvButton';
 import { useDebounce, useToggle } from '../hooks';
+import { ShimmerTable } from './TableShimmer';
 
 export * from './sortData';
 
@@ -39,7 +40,7 @@ export type TableSettings<TDataIn> = DataComponent<TDataIn, TableCellTypes[][]>
         columns: TableColumn[];
         noDataElement?: React.ReactNode;
         searchable?: boolean;
-        calculateFooter?: (data: TDataIn) => unknown[];
+        calculateFooter?: (data: TDataIn) => string[];
         sortable?: boolean;
         exportCsv?: boolean;
         render?: (
@@ -238,17 +239,31 @@ const TableFooter = ({ footer, columns }: TableFooterProps) => (
     </TableFoot>
 );
 
-const getRows = (data: TableCellTypes[][], columns: TableColumn[]) =>
+export const TableCell = ({
+    column,
+    index,
+    children,
+    className,
+}: PropsWithChildren<{ column: TableColumn; index: number }> & ClassNameComponent) => (
+    <TremorTableCell
+        className={twMerge('p-2 whitespace-normal text-xs/[13px]', getAlignment(column, index), className)}
+    >
+        {children}
+    </TremorTableCell>
+);
+
+const getRows = <TDataIn,>(data: TableCellTypes[][], columns: TableColumn[], rawData: TDataIn | undefined) =>
     data.map((row) => (
         <TableRow key={objectHash(row)}>
-            {columns.map((column, index) => (
-                <TableCell
-                    key={column.label}
-                    className={`p-2 whitespace-normal text-xs/[13px] ${getAlignment(column, index)}`}
-                >
-                    {renderTableCell(row[index], column)}
-                </TableCell>
-            ))}
+            {columns.map((column, index) =>
+                column.render ? (
+                    column.render(column, index, row[index], rawData)
+                ) : (
+                    <TableCell key={column.label} column={column} index={index}>
+                        {renderTableCell(row[index], column)}
+                    </TableCell>
+                ),
+            )}
         </TableRow>
     ));
 
@@ -266,26 +281,13 @@ const renderToRowString = (data: TableCellTypes[][], definitions: TableColumn[])
         }),
     );
 
-const ShimmerTable = ({ colSpan }: { colSpan: number }) =>
-    Array.from({ length: 4 }).map((_, i) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <TableRow key={i}>
-            {Array.from({ length: colSpan }).map((_o, k) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <TableCell className='p-2' key={k}>
-                    <div className='loading-shimmer rounded'>&nbsp;</div>
-                </TableCell>
-            ))}
-        </TableRow>
-    ));
-
 const SpanTable = ({ colSpan, children }: PropsWithChildren<{ colSpan: number }>) => (
     <TableRow>
-        <TableCell colSpan={colSpan} className='p-2'>
+        <TremorTableCell colSpan={colSpan} className='p-2'>
             <Flex alignItems='center' className='w-full'>
                 {children}
             </Flex>
-        </TableCell>
+        </TremorTableCell>
     </TableRow>
 );
 
diff --git a/src/Table/sortData.ts b/src/Table/sortData.ts
index 7b7aeb6..8ed88ba 100644
--- a/src/Table/sortData.ts
+++ b/src/Table/sortData.ts
@@ -11,6 +11,12 @@ export type TableColumn = {
     disableSearch?: boolean;
     excludeFromSort?: boolean;
     textAlign?: TextAlign;
+    render?: <TDataIn>(
+        column: TableColumn,
+        index: number,
+        cellValue: TableCellTypes,
+        rawData: TDataIn | undefined,
+    ) => JSX.Element;
     formatterOptions?: {
         keepFormat?: boolean;
         decimals?: number;