From 296059f47181ef1dd22fb305710648e7bddfc7b8 Mon Sep 17 00:00:00 2001
From: johnnadeluy <johnnadel.salita@gmail.com>
Date: Tue, 5 Mar 2024 08:29:46 +0100
Subject: [PATCH] Disables sorting function for empty tables in Table component

---
 src/components/Table/Table.tsx | 35 ++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 2552e42b..ecd9d571 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -107,22 +107,25 @@ const TableDesktopView = ({ columns, data, activeTab }: TableDesktopViewProps) =
       <table className={styles.table}>
         <thead>
           <tr>
-            {columns.map((column) => (
-              <th
-                key={column.id}
-                className={!column.unsortable ? styles.sortableColumn : undefined}
-                onClick={!column.unsortable ? () => handleSortBy(column.id) : undefined}
-              >
-                {!column.unsortable ? (
-                  <span>
-                    {column.label}
-                    {renderSortByArrow(sortBy === column.id, sortByDirection)}
-                  </span>
-                ) : (
-                  column.label
-                )}
-              </th>
-            ))}
+            {columns.map((column) => {
+              const sortableColumn = data.length && !column.unsortable
+              return (
+                <th
+                  key={column.id}
+                  className={sortableColumn ? styles.sortableColumn : undefined}
+                  onClick={sortableColumn ? () => handleSortBy(column.id) : undefined}
+                >
+                  {sortableColumn ? (
+                    <span>
+                      {column.label}
+                      {renderSortByArrow(sortBy === column.id, sortByDirection)}
+                    </span>
+                  ) : (
+                    column.label
+                  )}
+                </th>
+              )
+            })}
           </tr>
         </thead>
         <tbody>