Updated table sort button behavior

RealWagmi · Mar 14, 2024 · c0594c8 · c0594c8
1 parent 5152d21
commit c0594c8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/src/components/Table/TableServer.tsx b/src/components/Table/TableServer.tsx
@@ -74,19 +74,21 @@ function TableServer<T = any>({
                   <TableHeader key={i} data-testid={`table-header-${i}`}>
                     {header.title && (
                       <TableHeaderTitleBtn
-                        disabled={!isSortable}
                         onClick={() => {
-                          const sortBy = header.key;
-                          if (sortBy) {
-                            if (options.sort?.sortBy === sortBy && options.sort.reverseOrder) {
-                              updateOptions({ ...options, sort: undefined, page: 1 });
-                            } else {
-                              const reverseOrder =
-                                options.sort?.sortBy !== sortBy ? false : !options.sort?.reverseOrder;
-                              updateOptions({ ...options, sort: { sortBy, reverseOrder }, page: 1 });
+                          if (isSortable) {
+                            const sortBy = header.key;
+                            if (sortBy) {
+                              if (options.sort?.sortBy === sortBy && options.sort.reverseOrder) {
+                                updateOptions({ ...options, sort: undefined, page: 1 });
+                              } else {
+                                const reverseOrder =
+                                  options.sort?.sortBy !== sortBy ? false : !options.sort?.reverseOrder;
+                                updateOptions({ ...options, sort: { sortBy, reverseOrder }, page: 1 });
+                              }
                             }
                           }
                         }}
+                        clickable={isSortable}
                         active={!!header.key && options.sort?.sortBy === header.key}
                       >
                         {isSortable && (
@@ -134,7 +136,7 @@ function TableServer<T = any>({
         )}
         {loading && (
           <TableLoadWrap>
-            <LoadingSpinner size={'32px'} />
+            <LoadingSpinner size={"32px"} />
           </TableLoadWrap>
         )}
       </TableContentWrap>

diff --git a/src/components/Table/styles.ts b/src/components/Table/styles.ts
@@ -73,22 +73,18 @@ export const TableHeader = styled(Box)`
   min-height: 17px;
 `;
 
-export const TableHeaderTitleBtn = styled.button<{ active: boolean }>`
+export const TableHeaderTitleBtn = styled.div<{ active: boolean; clickable: boolean }>`
   display: flex;
   align-items: center;
   border: none;
   outline: none;
-  cursor: pointer;
   background: transparent;
   padding: 0;
   color: ${({ theme, active }) =>
     active ? theme.colors.primaryDefault : theme.colors.darkGray}; //styleName: Caption/Regular;
   font-size: 12px;
   font-weight: 400;
-
-  &:disabled {
-    cursor: default;
-  }
+  cursor: ${({ clickable }) => (clickable ? "pointer" : "default")};
 `;
 
 export const TableItem = styled(Box)`