fix portfolio table sorting, fix table cells width

pendulum-chain · Sep 5, 2024 · d8b3102 · d8b3102
1 parent 2ce6ec8
commit d8b3102
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -59,7 +59,7 @@ export type TableProps<T> = {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const defaultData: any[] = [];
-const loading = <>{repeat(<Skeleton className="h-8 mb-2" />, 6)}</>;
+const loading = <>{repeat(<Skeleton className="mb-2 h-8" />, 6)}</>;
 
 const Table = <T,>({
   data = defaultData,
@@ -83,7 +83,7 @@ const Table = <T,>({
       : undefined;
   }, [sortBy]);
 
-  const { getHeaderGroups, getRowModel, getPageCount, nextPage, previousPage, setGlobalFilter, getState } =
+  const { getHeaderGroups, getRowModel, getPageCount, nextPage, previousPage, setGlobalFilter, getState, setSorting } =
     useReactTable({
       columns,
       data,
@@ -109,43 +109,53 @@ const Table = <T,>({
   return (
     <>
       {search ? (
-        <div className="flex flex-wrap flex-row gap-2 mb-2">
+        <div className="mb-2 flex flex-row flex-wrap gap-2">
           <div className="ml-auto">
             <GlobalFilter globalFilter={globalFilter} setGlobalFilter={setGlobalFilter} />
           </div>
         </div>
       ) : null}
       <div
-        className={`table-container bg-base-200 table-border rounded-lg overflow-x-auto border border-base-300 ${
+        className={`table-container table-border overflow-x-auto rounded-lg border border-base-300 bg-base-200 ${
           fontSize || 'text-sm'
         } font-semibold ${className})`}
       >
         {title && <div className="bg-base-200 px-4 py-6 text-lg">{title}</div>}
-        <table className="table w-full">
+        <table className="table w-full table-fixed">
           <thead>
             {getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id} className="border-b table-border">
+              <tr key={headerGroup.id} className="table-border border-b">
                 {headerGroup.headers.map((header) => {
                   const isSortable = header.column.getCanSort();
                   return (
                     <th
                       key={header.id}
                       colSpan={header.colSpan}
-                      className={`${isSortable ? ' cursor-pointer' : ''}`}
-                      onClick={header.column.getToggleSortingHandler()}
+                      className={`${isSortable ? 'cursor-pointer' : ''}`}
+                      onClick={() => {
+                        if (isSortable) {
+                          const currentSort = header.column.getIsSorted();
+                          setSorting([
+                            {
+                              id: header.column.id,
+                              desc: currentSort === 'asc',
+                            },
+                          ]);
+                        }
+                      }}
                     >
                       <div
                         className={`flex flex-row items-center font-normal ${
                           fontSize || 'text-sm'
-                        } normal-case table-header ${header.column.columnDef.meta?.className || ''}`}
+                        } table-header normal-case ${header.column.columnDef.meta?.className || ''}`}
                       >
                         {flexRender(header.column.columnDef.header, header.getContext())}
                         {isSortable ? (
-                          <div className={`sort ${header.column.getIsSorted()} ml-2 mb-0.5`}>
+                          <div className={`sort ${header.column.getIsSorted()} mb-0.5 ml-2`}>
                             {header.column.getIsSorted() === 'desc' ? (
-                              <ChevronDownIcon className="w-3 h-3" stroke-width="2" />
+                              <ChevronDownIcon className="h-3 w-3" stroke-width="2" />
                             ) : (
-                              <ChevronUpIcon className="w-3 h-3" stroke-width="2" />
+                              <ChevronUpIcon className="h-3 w-3" stroke-width="2" />
                             )}
                           </div>
                         ) : null}
@@ -161,15 +171,15 @@ const Table = <T,>({
               <tr
                 key={row.id}
                 onClick={rowCallback ? () => rowCallback(row, index) : undefined}
-                className={rowCallback && 'cursor-pointer highlighted-row'}
+                className={rowCallback && 'highlighted-row cursor-pointer'}
               >
                 {row.getVisibleCells().map((cell) => {
                   return (
                     <td
                       key={cell.id}
                       className={`${cell.column.columnDef.meta?.className || ''} ${
                         (index % 2 ? evenRowsClassname : oddRowsClassname) || 'bg-base-200'
-                      }`}
+                      } table-fixed`}
                     >
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </td>
@@ -180,7 +190,7 @@ const Table = <T,>({
           </tbody>
         </table>
         <Pagination
-          className="justify-end text-neutral-400 normal-case font-normal text-sm mt-2 mb-2"
+          className="mb-2 mt-2 justify-end text-sm font-normal normal-case text-neutral-400"
           currentIndex={pageIndex}
           pageSize={pageSize}
           totalCount={totalCount}

diff --git a/src/pages/dashboard/Portfolio.tsx b/src/pages/dashboard/Portfolio.tsx
@@ -26,7 +26,7 @@ function Portfolio() {
           data={balances}
           columns={columns}
           isLoading={!balances}
-          sortBy={{ amount: SortingOrder.DESC, token: SortingOrder.ASC }}
+          sortBy={{ usdValue: SortingOrder.DESC }}
           search={false}
           pageSize={8}
           oddRowsClassname="odd-rows bg-table-row border-b-base-300 table-border"