[FEATURE] Components: Read and render links in the Table component

Signed-off-by: Seyed Mahmoud SHAHROKNI <[email protected]>

Signed-off-by: Mahmoud Shahrokni <[email protected]>

Signed-off-by: Mahmoud Shahrokni <[email protected]>

Author: shahrokni

components/src/Table/TableCell.tsx

@@ -11,9 +11,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { TableCell as MuiTableCell, styled, TableCellProps as MuiTableCellProps, Box, useTheme } from '@mui/material';
+import {
+  TableCell as MuiTableCell,
+  styled,
+  TableCellProps as MuiTableCellProps,
+  Box,
+  useTheme,
+  Link,
+} from '@mui/material';
 import { ReactElement, useEffect, useRef } from 'react';
-import { TableCellAlignment, TableDensity, getTableCellLayout } from './model/table-model';
+import { DataLink, TableCellAlignment, TableDensity, getTableCellLayout } from './model/table-model';
 
 const StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({
   padding: 0,
@@ -65,6 +72,7 @@ export interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'al
   onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;
   color?: string;
   backgroundColor?: string;
+  dataLink?: DataLink;
 }
 
 export function TableCell({
@@ -81,10 +89,10 @@ export function TableCell({
   align,
   color,
   backgroundColor,
+  dataLink,
   ...otherProps
 }: TableCellProps): ReactElement {
   const theme = useTheme();
-
   const elRef = useRef<HTMLTableCellElement>();
 
   const isHeader = variant === 'head';
@@ -172,7 +180,17 @@ export function TableCell({
         aria-label={description}
         textAlign={align}
       >
-        {children}
+        {dataLink ? (
+          <Link
+            href={dataLink.url}
+            target={dataLink.openNewTab ? '_blank' : '_self'}
+            rel={dataLink.openNewTab ? 'noopener noreferrer' : undefined}
+          >
+            {children}
+          </Link>
+        ) : (
+          children
+        )}
       </Box>
     </StyledMuiTableCell>
   );

components/src/Table/VirtualizedTable.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';
+import { Column, ColumnMeta, HeaderGroup, Row, flexRender } from '@tanstack/react-table';
 import { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';
 import { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';
 import { useRef, useMemo, ReactElement } from 'react';
@@ -22,7 +22,7 @@ import { TableHead } from './TableHead';
 import { TableHeaderCell } from './TableHeaderCell';
 import { TableCell, TableCellProps } from './TableCell';
 import { VirtualizedTableContainer } from './VirtualizedTableContainer';
-import { TableCellConfigs, TableProps, TableRowEventOpts } from './model/table-model';
+import { TableCellConfigs, TableColumnConfig, TableProps, TableRowEventOpts } from './model/table-model';
 import { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';
 import { TableFoot } from './TableFoot';
 
@@ -72,6 +72,7 @@ export function VirtualizedTable<TableData>({
     startIndex: 0,
     endIndex: 0,
   });
+
   const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {
     visibleRange.current = newVisibleRange;
   };
@@ -218,7 +219,6 @@ export function VirtualizedTable<TableData>({
             <>
               {row.getVisibleCells().map((cell, i, cells) => {
                 const position: TableCellPosition = {
-                  // Add 1 to the row index because the header is row 0
                   row: index + 1,
                   column: i,
                 };
@@ -229,6 +229,16 @@ export function VirtualizedTable<TableData>({
                 const cellRenderFn = cell.column.columnDef.cell;
                 const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
 
+                /* 
+                   IMPORTANT:
+                   If Variables exist in the link, they should have been translated by the plugin already. (Being developed at the moment)
+                   Components have no access to any context (Which is intentional and correct)
+                   We may want to add parameters to a link from neighboring cells in the future as well.
+                   If this is the case, the value of the neighboring cells should be read from here and be replaced. (Bing discussed at the moment, not decided yet)
+                */
+                const columnDefMeta = cell.column.columnDef.meta as ColumnMeta<TableData, unknown> &
+                  Pick<TableColumnConfig<TableData>, 'dataLink'>;
+
                 const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;
                 let description: string | undefined = undefined;
                 if (typeof cellDescriptionDef === 'function') {
@@ -258,6 +268,7 @@ export function VirtualizedTable<TableData>({
                     description={description}
                     color={cellConfig?.textColor ?? undefined}
                     backgroundColor={cellConfig?.backgroundColor ?? undefined}
+                    dataLink={columnDefMeta?.dataLink}
                   >
                     {cellConfig?.text || cellContent}
                   </TableCell>

components/src/Table/model/__snapshots__/table-model.test.tsx.snap

@@ -64,6 +64,7 @@ exports[`persesColumnToTanstackColumn transforms perses columns to tanstack colu
     "meta": {
       "align": "right",
       "cellDescription": undefined,
+      "dataLink": undefined,
       "headerDescription": undefined,
     },
     "minSize": 0,
@@ -77,6 +78,7 @@ exports[`persesColumnToTanstackColumn transforms perses columns to tanstack colu
     "meta": {
       "align": undefined,
       "cellDescription": [Function],
+      "dataLink": undefined,
       "headerDescription": "The total number of values.",
     },
     "size": 120,

components/src/Table/model/table-model.test.tsx

@@ -175,12 +175,14 @@ describe('persesColumnToTanstackColumn', () => {
         header: 'Name',
         width: 'auto',
         align: 'right',
+        dataLink: undefined,
       },
       {
         accessorKey: 'value',
         header: 'Count',
         headerDescription: 'The total number of values.',
         width: 120,
+        dataLink: undefined,
         cell: (data) => <strong>{data.getValue()}</strong>,
         cellDescription: (data) => `Desc for ${data.getValue()}`,
       },

components/src/Table/model/table-model.ts

@@ -265,6 +265,15 @@ declare module '@tanstack/table-core' {
   }
 }
 
+// Column link settings
+// The URL could be set to a static link or could be constructed dynamically
+// The URL may include reference to the variables or neighboring cells in the row
+export interface DataLink {
+  url: string;
+  title?: string;
+  openNewTab: boolean;
+}
+
 // Only exposing a very simplified version of the very extensive column definitions
 // possible with tanstack table to make it easier for us to control rendering
 // and functionality.
@@ -324,11 +333,7 @@ export interface TableColumnConfig<TableData>
    * Dynamic link setting. If available the the cell content should turn into
    * a link with the value of the cell as the dynamic section
    */
-  dataLink?: {
-    url: string;
-    title?: string;
-    openNewTab: boolean;
-  };
+  dataLink?: DataLink;
 }
 
 /**
@@ -338,7 +343,7 @@ export function persesColumnsToTanstackColumns<TableData>(
   columns: Array<TableColumnConfig<TableData>>
 ): Array<ColumnDef<TableData>> {
   const tableCols: Array<ColumnDef<TableData>> = columns.map(
-    ({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps }) => {
+    ({ width, align, headerDescription, cellDescription, enableSorting, dataLink, ...otherProps }) => {
       // Tanstack Table does not support an "auto" value to naturally size to fit
       // the space in a table. We translate our custom "auto" setting to 0 size
       // for these columns, so it is easy to fall back to auto when rendering.
@@ -370,6 +375,7 @@ export function persesColumnsToTanstackColumns<TableData>(
           align,
           headerDescription,
           cellDescription,
+          dataLink,
         },
       };