From 4f95b258fff55f779fa1f73ee43d16ab781f0932 Mon Sep 17 00:00:00 2001
From: Luka <lfilipovic@croz.net>
Date: Wed, 24 Apr 2024 11:45:21 +0200
Subject: [PATCH] #239 Remove sorting arrow icon when canSort prop is set to
 false in DataTable component

---
 libs/data-display/src/DataTable.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/libs/data-display/src/DataTable.tsx b/libs/data-display/src/DataTable.tsx
index e119ada..8052703 100644
--- a/libs/data-display/src/DataTable.tsx
+++ b/libs/data-display/src/DataTable.tsx
@@ -646,7 +646,9 @@ function DataTable<T extends object>({
                         className={tableHeaderClassName}
                         title={column.title}
                         onClick={() => {
-                          toggleSortBy(column.id, undefined, multiSort);
+                          if (column.canSort) {
+                            toggleSortBy(column.id, undefined, multiSort);
+                          }
                         }}
                       >
                         <DataTableHeader alignHeader={alignHeader} {...column}>
@@ -815,10 +817,11 @@ function DataTableHeader({
   return (
     <div className={tableHeaderContainer}>
       {children}
-
-      <span className="flex justify-center items-center ml-1">
-        {isSorted ? isSortedDesc ? sortDescIcon : sortAscIcon : canSort ? <div className="w-4 h-4">&nbsp;</div> : null}
-      </span>
+      {canSort && (
+        <span className="flex justify-center items-center ml-1">
+          {isSorted ? isSortedDesc ? sortDescIcon : sortAscIcon : <div className="w-3.5">&nbsp;</div>}
+        </span>
+      )}
     </div>
   );
 }
@@ -1081,6 +1084,7 @@ function DataTableColumn<T extends object>(_: DataTableColumnProps<T>) {
 
 DataTableColumn.defaultProps = {
   type: "DataTableColumn",
+  canSort: false,
 };
 
 function DataTableExpander<T>(_: DataTableExpanderProps<T>) {