EPMRPP-96014 || Adjust rowActionMenu to renderRowActions function (#54)

* EPMRPP-96014 || Adjust rowActionMenu to renderRowActions function * EPMRPP-96014 || Adjust storybook example
reportportal · Nov 6, 2024 · 9cf2894 · 9cf2894
1 parent 525d16d
commit 9cf2894
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/src/components/table/table.stories.tsx b/src/components/table/table.stories.tsx
@@ -29,7 +29,7 @@ export default meta;
 
 type Story = StoryObj<TableComponentProps>;
 
-const rowActionMenu = (
+const renderRowActions = () => (
   <Popover
     placement={'bottom-end'}
     content={
@@ -151,7 +151,7 @@ export const Default: Story = {
   args: {
     primaryColumn,
     fixedColumns,
-    rowActionMenu,
+    renderRowActions,
     selectable: true,
   },
 };
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
@@ -12,7 +12,7 @@ export const Table: FC<TableComponentProps> = ({
   data,
   primaryColumn,
   fixedColumns,
-  rowActionMenu,
+  renderRowActions,
   className = '',
   rowClassName = '',
   headerClassName = '',
@@ -121,7 +121,7 @@ export const Table: FC<TableComponentProps> = ({
             </div>
           </button>
         ))}
-        {rowActionMenu && <div className={cx('table-header-cell', 'action-menu-cell')} />}
+        {renderRowActions && <div className={cx('table-header-cell', 'action-menu-cell')} />}
       </div>
 
       <div className={cx('table-body')}>
@@ -156,8 +156,10 @@ export const Table: FC<TableComponentProps> = ({
                 </div>
               ))}
 
-              {rowActionMenu && (
-                <div className={cx('table-cell', 'action-menu-cell')}>{rowActionMenu}</div>
+              {renderRowActions && (
+                <div className={cx('table-cell', 'action-menu-cell')}>
+                  {renderRowActions(item.metaData)}
+                </div>
               )}
             </div>
           </div>

diff --git a/src/components/table/types.ts b/src/components/table/types.ts
@@ -18,10 +18,14 @@ export interface DetailedCellData {
   content: string | number;
   component: ReactNode;
 }
+export interface MetaData {
+  [key: string]: any;
+}
 export interface RowData {
   id: string | number;
   [key: string]: DetailedCellData | RowConfigs | string | number | any;
   rowConfigs?: RowConfigs;
+  metaData?: MetaData;
 }
 export enum SortDirection {
   ASC = 'asc',
@@ -35,7 +39,7 @@ export interface TableComponentProps {
   data: RowData[];
   primaryColumn: Column;
   fixedColumns: FixedColumn[];
-  rowActionMenu?: ReactNode;
+  renderRowActions?: (metaData?: MetaData) => ReactNode;
   selectable?: boolean;
   className?: string;
   headerClassName?: string;