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 = () => {
rowExpansionTemplate |
function |
null |
- Function that receives the row data as the parameter and returns the expanded row content. |
+ 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. |
expandedRows |
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 (
-
+ // check if the user wants complete control of the rendering
+ if (!options.customRendering) {
+ content = (
{content}
|
+ );
+ }
+
+ return (
+
+ {content}
);
}
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 {