ScrollableTable implementation

Vizzuality · Dec 5, 2024 · 2838a02 · 2838a02
1 parent c9e94b9
commit 2838a02
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 65 deletions.
diff --git a/client/src/components/ui/table.tsx b/client/src/components/ui/table.tsx
@@ -2,6 +2,8 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+import { ScrollArea } from "@/components/ui/scroll-area";
+
 const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
@@ -16,6 +18,22 @@ const Table = React.forwardRef<
 ));
 Table.displayName = "Table";
 
+const ScrollableTable = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <ScrollArea hasHorizontalScroll>
+    <div className="table h-full w-full table-fixed">
+      <table
+        ref={ref}
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  </ScrollArea>
+));
+ScrollableTable.displayName = "ScrollableTable";
+
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
@@ -110,6 +128,7 @@ TableCaption.displayName = "TableCaption";
 
 export {
   Table,
+  ScrollableTable,
   TableHeader,
   TableBody,
   TableFooter,

diff --git a/client/src/containers/overview/table/view/overview/index.tsx b/client/src/containers/overview/table/view/overview/index.tsx
@@ -31,7 +31,7 @@ import {
 import { columns } from "@/containers/overview/table/view/overview/columns";
 
 import {
-  Table,
+  ScrollableTable,
   TableBody,
   TableCell,
   TableHead,
@@ -111,7 +111,7 @@ export function OverviewTable() {
   return (
     <>
       <ProjectDetails />
-      <Table>
+      <ScrollableTable>
         <TableHeader className="sticky top-0">
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id} className="divide-background">
@@ -183,7 +183,7 @@ export function OverviewTable() {
             </TableRow>
           )}
         </TableBody>
-      </Table>
+      </ScrollableTable>
       <TablePagination
         onChangePagination={setPagination}
         pagination={{

diff --git a/client/src/containers/projects/custom-project/annual-project-cash-flow/table/index.tsx b/client/src/containers/projects/custom-project/annual-project-cash-flow/table/index.tsx
@@ -16,8 +16,8 @@ import {
 import { getBreakdownYears } from "@/containers/projects/custom-project/annual-project-cash-flow/utils";
 import mockData from "@/containers/projects/custom-project/mock-data";
 
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
+  ScrollableTable,
   TableBody,
   TableCell,
   TableHead,
@@ -46,70 +46,60 @@ const CashFlowTable: FC = () => {
 
   return (
     <div className="relative flex h-full flex-1 flex-col overflow-hidden">
-      <ScrollArea hasHorizontalScroll>
-        <div className="table h-full w-full table-fixed">
-          <table className="w-full caption-bottom text-sm">
-            <TableHeader className="sticky top-0">
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id} className="divide-background">
-                  {headerGroup.headers.map((header) => {
-                    return (
-                      <TableHead
-                        key={header.id}
-                        className={cn({
-                          "text-xs font-normal": true,
-                          "text-center": header.id !== "label",
-                        })}
-                      >
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
-                      </TableHead>
-                    );
-                  })}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow key={row.id} className="divide-x-0">
-                    {row.getVisibleCells().map((cell, index) => (
-                      <TableCell
-                        key={cell.id}
-                        className="px-2 py-2.5"
-                        style={
-                          index > 0
-                            ? {
-                                minWidth: cell.column.columnDef.size,
-                                maxWidth: cell.column.columnDef.size,
-                              }
-                            : undefined
-                        }
-                      >
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
+      <ScrollableTable>
+        <TableHeader className="sticky top-0">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="divide-background">
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead
+                    key={header.id}
+                    className={cn({
+                      "text-xs font-normal": true,
+                      "text-center": header.id !== "label",
+                    })}
+                  >
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id} className="divide-x-0">
+                {row.getVisibleCells().map((cell, index) => (
                   <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
+                    key={cell.id}
+                    className="px-2 py-2.5"
+                    style={
+                      index > 0
+                        ? {
+                            minWidth: cell.column.columnDef.size,
+                            maxWidth: cell.column.columnDef.size,
+                          }
+                        : undefined
+                    }
                   >
-                    No results.
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </table>
-        </div>
-      </ScrollArea>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </ScrollableTable>
       <TablePagination
         onChangePagination={setPagination}
         pagination={{