Added sort icons to Table component

ahmedalatawi · Nov 10, 2024 · 1dc15c0 · 1dc15c0
1 parent baa4e8c
commit 1dc15c0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 30 deletions.
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -117,23 +117,7 @@ const StyledTable = styled.table`
     cursor: pointer;
   }
 
-  // tr[data-selected='true'] {
-  //   background: #a7c7e7;
-  // }
-
   thead {
     white-space: nowrap;
   }
-
-  thead th.asc::after {
-    content: 'V';
-    display: inline-block;
-    margin-left: 0.3em;
-  }
-
-  thead th.desc::after {
-    content: '^';
-    display: inline-block;
-    margin-left: 0.3em;
-  }
 `
diff --git a/src/components/Table/TableHead.tsx b/src/components/Table/TableHead.tsx
@@ -1,4 +1,5 @@
 import type { SortConfig, TableConfig } from './Table'
+import { PiSortAscendingLight, PiSortDescendingLight } from 'react-icons/pi'
 
 export type TableHeader<T> = {
   key: keyof T
@@ -13,31 +14,28 @@ interface Props<T> {
 }
 
 function TableHead<T>({ columns, config, sortConfig, onClick }: Props<T>) {
-  const getSortClassName = (key: keyof T) => {
+  const getSortIcon = (key: keyof T) => {
     if (!sortConfig?.key) return
-    return sortConfig.key === key ? sortConfig.direction : undefined
+    const dir = sortConfig.key === key ? sortConfig.direction : null
+    return dir === 'asc' ? (
+      <PiSortAscendingLight />
+    ) : dir === 'desc' ? (
+      <PiSortDescendingLight />
+    ) : null
   }
 
   return (
     <thead className='thead-dark'>
       <tr>
         {config
           ? config.headers.map((h) => (
-              <th
-                key={h.key as string}
-                onClick={() => onClick?.(h.key)}
-                className={getSortClassName(h.key)}
-              >
-                {h.label}
+              <th key={h.key as string} onClick={() => onClick?.(h.key)}>
+                {h.label} {getSortIcon(h.key)}
               </th>
             ))
           : columns.map((k) => (
-              <th
-                key={k}
-                onClick={() => onClick?.(k as keyof T)}
-                className={getSortClassName(k as keyof T)}
-              >
-                {k}
+              <th key={k} onClick={() => onClick?.(k as keyof T)}>
+                {k} {getSortIcon(k as keyof T)}
               </th>
             ))}
       </tr>