fix: do not render expand button when html field is empty (#1573)

* fix: do not render expand button when html field is empty
telekom · Mar 21, 2023 · 1fe6a9b · 1fe6a9b
1 parent 86ee300
commit 1fe6a9b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 35 deletions.
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
@@ -22,28 +22,30 @@ export const HTMLCell: Cell = {
   },
   render: ({ content, component }) => {
     return (
-      <scale-button
-        variant="secondary"
-        size="small"
-        icon-only
-        inner-aria-label={`Activate to ${
-          content.isExpanded ? 'collapse' : 'expand'
-        } content`}
-        onClick={() => {
-          content.isExpanded = !content.isExpanded;
-          component.forceRender++;
-        }}
-      >
-        {content.isExpanded ? (
-          <scale-icon-navigation-collapse-up
-            size={14}
-          ></scale-icon-navigation-collapse-up>
-        ) : (
-          <scale-icon-navigation-collapse-down
-            size={14}
-          ></scale-icon-navigation-collapse-down>
-        )}
-      </scale-button>
+      content && (
+        <scale-button
+          variant="secondary"
+          size="small"
+          icon-only
+          aria-label={`Activate to ${
+            content.isExpanded ? 'collapse' : 'expand'
+          } content`}
+          onClick={() => {
+            content.isExpanded = !content.isExpanded;
+            component.forceRender++;
+          }}
+        >
+          {content.isExpanded ? (
+            <scale-icon-navigation-collapse-up
+              size={14}
+            ></scale-icon-navigation-collapse-up>
+          ) : (
+            <scale-icon-navigation-collapse-down
+              size={14}
+            ></scale-icon-navigation-collapse-down>
+          )}
+        </scale-button>
+      )
     );
   },
 };
diff --git 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 {
                   <td class={`tbody__nested-cell`}>
                     {rowNestedContent.map(({ content }) => {
                       return (
-                        <div
-                          ref={(el) => {
-                            if (el) {
-                              // Remove content from other pages
-                              let child = el.lastElementChild;
-                              while (child) {
-                                el.removeChild(child);
-                                child = el.lastElementChild;
+                        content && (
+                          <div
+                            ref={(el) => {
+                              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);
-                            }
-                          }}
-                        ></div>
+                            }}
+                          ></div>
+                        )
                       );
                     })}
                   </td>