feat: DynamicDataTable - update support for button type cell wrapper component

Author: RohitRaj011

src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx

@@ -1,4 +1,4 @@
-import { createRef, Fragment, RefObject, useEffect, useRef } from 'react'
+import { createElement, createRef, Fragment, ReactElement, RefObject, useEffect, useRef } from 'react'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { followCursor } from 'tippy.js'
 
@@ -19,12 +19,15 @@ import { getActionButtonPosition, getRowGridTemplateColumn, rowTypeHasInputField
 import { DynamicDataTableRowType, DynamicDataTableRowProps, DynamicDataTableRowDataType } from './types'
 
 const conditionalWrap =
-    (
-        renderer: (props: { customState?: Record<string, any>; children: JSX.Element }) => JSX.Element,
-        customState: Record<string, any>,
-    ) =>
-    (children: JSX.Element) =>
-        renderer({ children, customState })
+    <K extends string>(renderer: (row: DynamicDataTableRowType<K>) => ReactElement, row: DynamicDataTableRowType<K>) =>
+    (children: JSX.Element) => {
+        if (renderer) {
+            const { props, type } = renderer(row)
+            return createElement(type, props, children)
+        }
+
+        return null
+    }
 
 export const DynamicDataTableRow = <K extends string>({
     rows = [],
@@ -40,6 +43,7 @@ export const DynamicDataTableRow = <K extends string>({
     onRowDelete,
     leadingCellIcon,
     trailingCellIcon,
+    buttonCellWrapComponent,
 }: DynamicDataTableRowProps<K>) => {
     // CONSTANTS
     const isFirstRowEmpty = headers.every(({ key }) => !rows[0]?.data[key].value)
@@ -151,18 +155,16 @@ export const DynamicDataTableRow = <K extends string>({
                 return (
                     <div className="w-100 h-100 flex top">
                         <ConditionalWrap
-                            condition={row.data[key].wrap}
-                            wrap={conditionalWrap(row.data[key].wrapRenderer, row.customState)}
+                            condition={!!buttonCellWrapComponent}
+                            wrap={conditionalWrap(buttonCellWrapComponent, row)}
                         >
-                            <div>
-                                <button
-                                    type="button"
-                                    className={`dc__transparent w-100 p-8 flex left dc__gap-8 dc__hover-n50 cn-9 fs-13 lh-20 ${row.data[key].disabled ? 'dc__disabled' : ''}`}
-                                >
-                                    {row.data[key].props?.icon || null}
-                                    {row.data[key].props.text}
-                                </button>
-                            </div>
+                            <button
+                                type="button"
+                                className={`dc__transparent w-100 p-8 flex left dc__gap-8 dc__hover-n50 cn-9 fs-13 lh-20 ${row.data[key].disabled ? 'dc__disabled' : ''}`}
+                            >
+                                {row.data[key].props?.icon || null}
+                                {row.data[key].props.text}
+                            </button>
                         </ConditionalWrap>
                     </div>
                 )

src/Shared/Components/DynamicDataTable/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { DetailedHTMLProps, ReactNode } from 'react'
+import { DetailedHTMLProps, ReactElement, ReactNode } from 'react'
 
 import { SortingOrder } from '@Common/Constants'
 
@@ -81,25 +81,8 @@ export type DynamicDataTableCellPropsMap = {
     }
 }
 
-type DynamicDataTableCellExtendedPropsMap = {
-    [DynamicDataTableRowDataType.TEXT]: {}
-    [DynamicDataTableRowDataType.DROPDOWN]: {}
-    [DynamicDataTableRowDataType.SELECT_TEXT]: {}
-    [DynamicDataTableRowDataType.BUTTON]:
-        | {
-              wrap: true
-              wrapRenderer: (props: { children: JSX.Element; customState?: Record<string, any> }) => JSX.Element
-          }
-        | {
-              wrap?: false
-              wrapRenderer?: never
-          }
-}
-
 type DynamicDataTableCellData<T extends keyof DynamicDataTableCellPropsMap = keyof DynamicDataTableCellPropsMap> =
-    T extends keyof DynamicDataTableCellPropsMap
-        ? { type: T; props: DynamicDataTableCellPropsMap[T] } & DynamicDataTableCellExtendedPropsMap[T]
-        : never
+    T extends keyof DynamicDataTableCellPropsMap ? { type: T; props: DynamicDataTableCellPropsMap[T] } : never
 
 /**
  * Type representing a key-value row.
@@ -153,6 +136,8 @@ export type DynamicDataTableProps<K extends string> = {
     leadingCellIcon?: DynamicDataTableCellIcon<K>
     /** Optional configuration for displaying an icon in the trailing position of a cell. */
     trailingCellIcon?: DynamicDataTableCellIcon<K>
+    /** An optional function to render a custom wrapper component for the type `DynamicDataTableRowDataType.BUTTON`. */
+    buttonCellWrapComponent?: (row: DynamicDataTableRowType<K>) => ReactElement
     /** An optional React node for a custom header component. */
     headerComponent?: ReactNode
     /** When true, data addition field will not be shown. */
@@ -257,4 +242,5 @@ export interface DynamicDataTableRowProps<K extends string>
         | 'validationSchema'
         | 'leadingCellIcon'
         | 'trailingCellIcon'
+        | 'buttonCellWrapComponent'
     > {}