Add new render property to table column

unosquare · Dec 21, 2023 · 38f027d · 38f027d
1 parent e5b1202
commit 38f027d
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 34 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -12,14 +12,14 @@ import {
 import {
     Flex,
     TableBody,
-    TableCell,
     TableFoot,
     TableFooterCell,
     TableHead,
     TableHeaderCell,
     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
@@ -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;