[FEATURE] Selection provider and Item actions

components/src/Table/Table.tsx

@@ -11,23 +11,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { Stack, useTheme } from '@mui/material';
 import {
-  useReactTable,
-  getCoreRowModel,
   ColumnDef,
-  RowSelectionState,
   OnChangeFn,
   Row,
-  Table as TanstackTable,
+  RowSelectionState,
   SortingState,
-  getSortedRowModel,
+  Table as TanstackTable,
+  getCoreRowModel,
   getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
 } from '@tanstack/react-table';
-import { useTheme } from '@mui/material';
 import { ReactElement, useCallback, useMemo } from 'react';
-import { VirtualizedTable } from './VirtualizedTable';
 import { TableCheckbox } from './TableCheckbox';
-import { TableProps, persesColumnsToTanstackColumns, DEFAULT_COLUMN_WIDTH } from './model/table-model';
+import { VirtualizedTable } from './VirtualizedTable';
+import { DEFAULT_COLUMN_WIDTH, TableProps, persesColumnsToTanstackColumns } from './model/table-model';
 
 const DEFAULT_GET_ROW_ID = (data: unknown, index: number): string => {
   return `${index}`;
@@ -59,6 +59,8 @@ export function Table<TableData>({
   getRowId = DEFAULT_GET_ROW_ID,
   rowSelection = DEFAULT_ROW_SELECTION,
   sorting = DEFAULT_SORTING,
+  getItemActions,
+  hasItemActions,
   pagination,
   onPaginationChange,
   rowSelectionVariant = 'standard',
@@ -111,6 +113,21 @@ export function Table<TableData>({
     onSortingChange?.(newSorting);
   };
 
+  const actionsColumn: ColumnDef<TableData> = useMemo(() => {
+    return {
+      id: 'itemActions',
+      header: 'Actions',
+      cell: ({ row }): ReactElement => {
+        return (
+          <Stack direction="row" alignItems="center">
+            {getItemActions?.({ id: row.id, data: row.original })}
+          </Stack>
+        );
+      },
+      enableSorting: false,
+    };
+  }, [getItemActions]);
+
   const checkboxColumn: ColumnDef<TableData> = useMemo(() => {
     return {
       id: 'checkboxRowSelect',
@@ -146,12 +163,16 @@ export function Table<TableData>({
   const tableColumns: Array<ColumnDef<TableData>> = useMemo(() => {
     const initTableColumns = persesColumnsToTanstackColumns(columns);
 
+    if (hasItemActions) {
+      initTableColumns.unshift(actionsColumn);
+    }
+
     if (checkboxSelection) {
       initTableColumns.unshift(checkboxColumn);
     }
 
     return initTableColumns;
-  }, [checkboxColumn, checkboxSelection, columns]);
+  }, [checkboxColumn, checkboxSelection, columns, hasItemActions, actionsColumn]);
 
   const table = useReactTable({
     data,

components/src/Table/TableCell.tsx

@@ -12,14 +12,15 @@
 // limitations under the License.
 
 import {
+  Box,
+  Link,
   TableCell as MuiTableCell,
-  styled,
   TableCellProps as MuiTableCellProps,
-  Box,
+  styled,
   useTheme,
-  Link,
 } from '@mui/material';
 import { ReactElement, useEffect, useMemo, useRef } from 'react';
+import { hasDataFieldPatterns, replaceDataFields } from '../utils/data-field-interpolation';
 import { DataLink, TableCellAlignment, TableDensity, getTableCellLayout } from './model/table-model';
 
 const StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({
@@ -129,15 +130,11 @@ export function TableCell({
   const modifiedDataLink = useMemo((): DataLink | undefined => {
     if (!dataLink) return undefined;
 
-    let url = dataLink.url;
-    const regex = /\$\{__data\.fields\["(.+)?"\]\}/;
-    if (adjacentCellsValuesMap && regex.test(dataLink.url)) {
-      Object.entries(adjacentCellsValuesMap).forEach(([key, value]) => {
-        const placeholder = `\${__data.fields["${key}"]}`;
-        url = url.replaceAll(placeholder, encodeURIComponent(value));
-      });
+    if (adjacentCellsValuesMap && hasDataFieldPatterns(dataLink.url)) {
+      const { text } = replaceDataFields(dataLink.url, adjacentCellsValuesMap, { urlEncode: true });
+      return { ...dataLink, url: text };
     }
-    return { ...dataLink, url };
+    return dataLink;
   }, [dataLink, adjacentCellsValuesMap]);
 
   return (

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

@@ -23,7 +23,7 @@ import {
   RowSelectionState,
   SortingState,
 } from '@tanstack/react-table';
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
 export const DEFAULT_COLUMN_WIDTH = 150;
 export const DEFAULT_COLUMN_HEIGHT = 40;
@@ -168,6 +168,16 @@ export interface TableProps<TableData> {
    * is enabled. If not set, a default color is used.
    */
   getCheckboxColor?: (rowData: TableData) => string;
+
+  /**
+   * Item actions to render for each row.
+   */
+  getItemActions?: ({ id, data }: { id: string; data: unknown }) => ReactNode[];
+
+  /**
+   * Item actions should be created
+   */
+  hasItemActions?: boolean;
 }
 
 function calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {