From a59bc436d3411df72695eba6494358d6aa4d3900 Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Wed, 2 Aug 2023 18:36:25 -0400
Subject: [PATCH] Add title for collecticons

---
 app/scripts/components/common/table/index.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/scripts/components/common/table/index.tsx b/app/scripts/components/common/table/index.tsx
index 0ab854d75..c98973374 100644
--- a/app/scripts/components/common/table/index.tsx
+++ b/app/scripts/components/common/table/index.tsx
@@ -77,10 +77,9 @@ export default function TableComponent({ dataPath, excelOption, columnToSort }:T
                               header.getContext())}
                         {header.column.getCanSort() && 
                         <Button onClick={header.column.getToggleSortingHandler()} variation='base-text'> 
-                          
-                          {header.column.getIsSorted() as string == 'asc' && <CollecticonArrowUp />}
-                          {header.column.getIsSorted() as string == 'desc' && <CollecticonArrowDown />}
-                          {!header.column.getIsSorted() && <CollecticonArrowLoop />}
+                          {header.column.getIsSorted() as string == 'asc' && <CollecticonArrowUp meaninful={true} title='Sorted in ascending order' />}
+                          {header.column.getIsSorted() as string == 'desc' && <CollecticonArrowDown meaninful={true} title='Sorted in descending order' />}
+                          {!header.column.getIsSorted() && <CollecticonArrowLoop meaninful={true} title={`Sort the rows with this column's value`} />}
                         </Button>}
                     </th>
                   ))}