fix: update table to show arrow for sortable columns on hover

JoinColony · Oct 30, 2024 · b7b1d4a · b7b1d4a
1 parent d2b63f0
commit b7b1d4a
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 8 deletions.
diff --git a/...ts/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/FiatTransfersTable.tsx b/...ts/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/FiatTransfersTable.tsx
@@ -72,7 +72,6 @@ const FiatTransfersTable = () => {
         getSortedRowModel={getSortedRowModel()}
         getPaginationRowModel={getPaginationRowModel()}
         getRowCanExpand={() => isMobile}
-        shouldHideSortingArrow={false}
         renderSubComponent={({ row }) => (
           <FiatTransferDescription actionRow={row} loading={loading} />
         )}

diff --git a/src/components/v5/common/Table/Table.tsx b/src/components/v5/common/Table/Table.tsx
@@ -52,7 +52,6 @@ const Table = <T,>({
   showTableBorder = true,
   alwaysShowPagination = false,
   footerColSpan,
-  shouldHideSortingArrow = true,
   ...rest
 }: TableProps<T>) => {
   const helper = useMemo(() => createColumnHelper<T>(), []);
@@ -239,7 +238,7 @@ const Table = <T,>({
                         key={header.id}
                         className={clsx(
                           header.column.columnDef.headCellClassName,
-                          'border-b border-b-gray-200 bg-gray-50 px-[1.125rem] py-2.5 text-left text-sm font-normal text-gray-600 first:rounded-tl-lg last:rounded-tr-lg empty:p-0',
+                          'group border-b border-b-gray-200 bg-gray-50 px-[1.125rem] py-2.5 text-left text-sm font-normal text-gray-600 first:rounded-tl-lg last:rounded-tr-lg empty:p-0',
                           {
                             'cursor-pointer':
                               header.column.getCanSort() &&
@@ -277,10 +276,9 @@ const Table = <T,>({
                                 'rotate-0':
                                   header.column.getIsSorted() === 'desc' &&
                                   !shouldShowEmptyContent,
-                                hidden:
-                                  shouldHideSortingArrow &&
-                                  (header.column.getIsSorted() === false ||
-                                    shouldShowEmptyContent),
+                                'opacity-0 group-hover:opacity-100':
+                                  header.column.getIsSorted() === false ||
+                                  shouldShowEmptyContent,
                               },
                             )}
                           />

diff --git a/src/components/v5/common/Table/types.ts b/src/components/v5/common/Table/types.ts
@@ -48,5 +48,4 @@ export interface TableProps<T>
   showTableHead?: boolean;
   showTableBorder?: boolean;
   alwaysShowPagination?: boolean;
-  shouldHideSortingArrow?: boolean;
 }