From 2489461983cec8aea128a91385631212433dbe6d Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Thu, 8 Aug 2024 09:26:07 +0200
Subject: [PATCH] Add icon to orderable DataTable columns

---
 src/components/data/DataTable.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/data/DataTable.tsx b/src/components/data/DataTable.tsx
index 7cee08077..b44620dc6 100644
--- a/src/components/data/DataTable.tsx
+++ b/src/components/data/DataTable.tsx
@@ -6,7 +6,12 @@ import { useStableCallback } from '../../hooks/use-stable-callback';
 import { useSyncedRef } from '../../hooks/use-synced-ref';
 import type { CompositeProps, Order, OrderDirection } from '../../types';
 import { downcastRef } from '../../util/typing';
-import { ArrowDownIcon, ArrowUpIcon, SpinnerSpokesIcon } from '../icons';
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  OrderableIcon,
+  SpinnerSpokesIcon,
+} from '../icons';
 import { Button } from '../input';
 import ScrollContext from './ScrollContext';
 import Table from './Table';
@@ -369,6 +374,9 @@ export default function DataTable<Row>({
                       )}
                     </div>
                   )}
+                  {!isActiveOrder && isOrderable && (
+                    <OrderableIcon className="text-grey-5" />
+                  )}
                 </HeaderComponent>
               </TableCell>
             );