From 8aaed86f59d35813225b60b3cce12cbfac605a04 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Tue, 13 Sep 2022 17:23:55 -0400
Subject: [PATCH] Fix #3310: RowExpansionTemplate allow for custom rendering

---
 components/doc/datatable/index.js       |  2 +-
 components/lib/datatable/TableBody.js   | 14 +++++++++++---
 components/lib/datatable/datatable.d.ts |  1 +
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/components/doc/datatable/index.js b/components/doc/datatable/index.js
index cd82901cfd..63a0e9f351 100644
--- a/components/doc/datatable/index.js
+++ b/components/doc/datatable/index.js
@@ -3301,7 +3301,7 @@ export const DataTableStateDemo = () => {
                                     <td>rowExpansionTemplate</td>
                                     <td>function</td>
                                     <td>null</td>
-                                    <td>Function that receives the row data as the parameter and returns the expanded row content.</td>
+                                    <td>Function that receives the row data as the parameter and returns the expanded row content. You can override the rendering of the content by setting options.customRendering = true.</td>
                                 </tr>
                                 <tr>
                                     <td>expandedRows</td>
diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js
index dec360de07..d95beccc53 100644
--- a/components/lib/datatable/TableBody.js
+++ b/components/lib/datatable/TableBody.js
@@ -903,14 +903,22 @@ export const TableBody = React.memo(
 
         const createExpansion = (rowData, index, expanded, colSpan) => {
             if (expanded && !(isSubheaderGrouping && props.expandableRowGroups)) {
-                const content = ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, { index });
                 const id = `${props.tableSelector}_content_${index}_expanded`;
+                const options = { index, customRendering: false };
+                let content = ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options);
 
-                return (
-                    <tr id={id} className="p-datatable-row-expansion" role="row">
+                // check if the user wants complete control of the rendering
+                if (!options.customRendering) {
+                    content = (
                         <td role="cell" colSpan={colSpan}>
                             {content}
                         </td>
+                    );
+                }
+
+                return (
+                    <tr id={id} className="p-datatable-row-expansion" role="row">
+                        {content}
                     </tr>
                 );
             }
diff --git a/components/lib/datatable/datatable.d.ts b/components/lib/datatable/datatable.d.ts
index 763c8128ce..e75664a6a8 100644
--- a/components/lib/datatable/datatable.d.ts
+++ b/components/lib/datatable/datatable.d.ts
@@ -206,6 +206,7 @@ interface DataTableRowReorderParams {
 
 interface DataTableRowExpansionTemplate {
     index: number;
+    customRendering: boolean;
 }
 
 interface DataTableRowClassNameOptions {