From 051a8702e3475faa392297cf872989125d5ae199 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Fri, 25 Mar 2022 06:49:58 -0700
Subject: [PATCH] perf(data-table): only render table row content when expanded
 (#1211)

Closes #1209
---
 src/DataTable/DataTable.svelte | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index dc180328..1585656d 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -497,13 +497,15 @@
               parentRowId = null;
             }}"
           >
-            <TableCell
-              colspan="{selectable ? headers.length + 2 : headers.length + 1}"
-            >
-              <div class:bx--child-row-inner-container="{true}">
-                <slot name="expanded-row" row="{row}" />
-              </div>
-            </TableCell>
+            {#if expandedRows[row.id] && !nonExpandableRowIds.includes(row.id)}
+              <TableCell
+                colspan="{selectable ? headers.length + 2 : headers.length + 1}"
+              >
+                <div class:bx--child-row-inner-container="{true}">
+                  <slot name="expanded-row" row="{row}" />
+                </div>
+              </TableCell>
+            {/if}
           </tr>
         {/if}
       {/each}