From 3f3b9d0b9e719a13ba80a1bd01045b84cddf5755 Mon Sep 17 00:00:00 2001
From: pantonshire <tom@tomandtally.co.uk>
Date: Thu, 15 Jun 2023 14:34:34 +0100
Subject: [PATCH] only display table if it has a nonzero number of rows

---
 src/components/output_table.tsx | 56 +++++++++++++++++++--------------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/components/output_table.tsx b/src/components/output_table.tsx
index 6f162ff..fb4b4ef 100644
--- a/src/components/output_table.tsx
+++ b/src/components/output_table.tsx
@@ -67,32 +67,42 @@ export function OutputTable(props: { currentString: string }) {
     }
   }
 
+  let table;
+  
+  if (rows.length > 0) {
+    table = (
+      <table id={styles.output_table}>
+        <thead>
+          <tr>
+            <th></th>
+            <th>Name</th>
+            <th>Code</th>
+            <th>UTF-8</th>
+            <th>UTF-16LE</th>
+            <th>Category</th>
+            <th>Combining</th>
+            <th>Bidirectional</th>
+            <th>Mirrored</th>
+            <th>Decomp</th>
+            <th>Upper</th>
+            <th>Lower</th>
+            <th>Title</th>
+            <th>Numeric</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows}
+        </tbody>
+      </table>
+    );
+  } else {
+    table = (<></>);
+  }
+
   return (
     <section className={styles.table_container}>
       <div className={styles.overflow_scroll}>
-        <table id={styles.output_table}>
-          <thead>
-            <tr>
-              <th></th>
-              <th>Name</th>
-              <th>Code</th>
-              <th>UTF-8</th>
-              <th>UTF-16LE</th>
-              <th>Category</th>
-              <th>Combining</th>
-              <th>Bidirectional</th>
-              <th>Mirrored</th>
-              <th>Decomp</th>
-              <th>Upper</th>
-              <th>Lower</th>
-              <th>Title</th>
-              <th>Numeric</th>
-            </tr>
-          </thead>
-          <tbody>
-            {rows}
-          </tbody>
-        </table>
+        {table}
       </div>
     </section>
   );