diff --git a/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx index 615a8ec899..ca79ada96b 100644 --- a/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx +++ b/packages/components/src/components/data-grid/cell-handlers/html-cell.tsx @@ -22,28 +22,30 @@ export const HTMLCell: Cell = { }, render: ({ content, component }) => { return ( - { - content.isExpanded = !content.isExpanded; - component.forceRender++; - }} - > - {content.isExpanded ? ( - - ) : ( - - )} - + content && ( + { + content.isExpanded = !content.isExpanded; + component.forceRender++; + }} + > + {content.isExpanded ? ( + + ) : ( + + )} + + ) ); }, }; diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx index f322eedf94..2c706b8b3b 100644 --- a/packages/components/src/components/data-grid/data-grid.tsx +++ b/packages/components/src/components/data-grid/data-grid.tsx @@ -1118,6 +1118,14 @@ export class DataGrid { } // Add rows nested tables to array if (field.type === 'html') { + if (!cellContent) { + return this.renderTableCell( + field, + null, + rowIndex, + columnIndex + ); + } if (!!cellContent.isExpanded) { isNestedExpanded = true; } @@ -1148,20 +1156,22 @@ export class DataGrid { {rowNestedContent.map(({ content }) => { return ( -
{ - if (el) { - // Remove content from other pages - let child = el.lastElementChild; - while (child) { - el.removeChild(child); - child = el.lastElementChild; + content && ( +
{ + if (el) { + // Remove content from other pages + let child = el.lastElementChild; + while (child) { + el.removeChild(child); + child = el.lastElementChild; + } + // Append actual content + el.appendChild(content); } - // Append actual content - el.appendChild(content); - } - }} - >
+ }} + >
+ ) ); })}