[TM-1314] scroll table (#669)

* [TM-1314] [TM-1313] modifi scroll in table and content * [TM-1314] update snapshots --------- Co-authored-by: Limber Mamani Vallejos <[email protected]>
wri · Nov 13, 2024 · b3daf3b · b3daf3b
1 parent cad81a4
commit b3daf3b
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 15 deletions.
diff --git a/src/components/elements/Table/Table.tsx b/src/components/elements/Table/Table.tsx
@@ -51,6 +51,7 @@ export interface TableProps<TData>
   visibleRows?: number;
   onRowClick?: (row: TData) => void;
   contentClassName?: string;
+  classNameTableWrapper?: string;
 }
 
 export interface TableState {
@@ -77,6 +78,7 @@ function Table<TData extends RowData>({
   initialTableState,
   variant = VARIANT_TABLE_PRIMARY,
   children,
+  classNameTableWrapper,
   isLoading,
   invertSelectPagination = false,
   hasPagination = false,
@@ -145,7 +147,7 @@ function Table<TData extends RowData>({
           />
         </When>
         {children}
-        <div className={variant.tableWrapper}>
+        <div className={classNames(variant.tableWrapper, classNameTableWrapper)}>
           <table {...props} className={classNames(className, "w-full", variant.table)}>
             <thead className={variant.thead}>
               {getHeaderGroups().map(headerGroup => (

diff --git a/src/components/elements/Table/TableVariants.ts b/src/components/elements/Table/TableVariants.ts
@@ -126,7 +126,7 @@ export const VARIANT_TABLE_ORGANISATION = {
 export const VARIANT_TABLE_DASHBOARD_COUNTRIES = {
   table: "border-collapse",
   name: "border-airtable",
-  tableWrapper: "border border-neutral-200 rounded-lg overflow-auto max-h-[534px] lg:max-h-[568px] wide:max-h-[608px]",
+  tableWrapper: "border border-neutral-200 rounded-lg overflow-auto max-h-[285px] lg:max-h-[303px] wide:max-h-[321px]",
   trHeader: "bg-neutral-150 sticky top-0 z-auto",
   thHeader: "text-nowrap first:pl-3 first:pr-2 last:pl-2 last:pr-3 border-y border-neutral-200 text-14 px-3 border-t-0",
   tBody: "",
@@ -155,7 +155,7 @@ export const VARIANT_TABLE_DASHBOARD = {
   tableWrapper: "border border-neutral-200 rounded-lg w-full bg-white",
   trHeader: "bg-neutral-150 sticky top-0 z-[1]",
   thHeader:
-    "first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-1.5 border-t-0 py-4",
+    "first:pl-4 first:rounded-tl-lg bg-neutral-150 first:pr-2 last:pl-2 last:pr-4 last:rounded-tr-lg border-neutral-200 text-14-semibold whitespace-normal px-1.5 py-4",
   tBody: "",
   trBody: "bg-white border-y border-neutral-200 last:border-b-0",
   tdBody: "text-14-light px-2 py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4",

diff --git a/src/components/elements/Table/__snapshots__/Table.stories.storyshot b/src/components/elements/Table/__snapshots__/Table.stories.storyshot
@@ -100,7 +100,9 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
         Create
       </span>
     </button>
-    <div>
+    <div
+      className=""
+    >
       <table
         className="w-full border-spacing-y-4 border-separate"
       >
@@ -961,7 +963,9 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
         Create
       </span>
     </button>
-    <div>
+    <div
+      className=""
+    >
       <table
         className="w-full border-spacing-y-4 border-separate"
       >
@@ -1822,7 +1826,9 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
         Create
       </span>
     </button>
-    <div>
+    <div
+      className=""
+    >
       <table
         className="w-full border-spacing-y-4 border-separate"
       >
@@ -2683,7 +2689,9 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
         Create
       </span>
     </button>
-    <div>
+    <div
+      className=""
+    >
       <table
         className="w-full border-collapse"
       >
@@ -4411,7 +4419,9 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
         Create
       </span>
     </button>
-    <div>
+    <div
+      className=""
+    >
       <table
         className="w-full border-spacing-y-4 border-separate"
       >
@@ -5272,7 +5282,9 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
         Create
       </span>
     </button>
-    <div>
+    <div
+      className=""
+    >
       <table
         className="w-full border-spacing-y-4 border-separate"
       >
@@ -6137,7 +6149,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
         </span>
       </button>
       <div
-        className="border border-neutral-200 rounded-lg overflow-auto max-h-[534px] lg:max-h-[568px] wide:max-h-[608px]"
+        className="border border-neutral-200 rounded-lg overflow-auto max-h-[285px] lg:max-h-[303px] wide:max-h-[321px]"
       >
         <table
           className="w-full border-collapse"
@@ -7870,7 +7882,9 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
           Create
         </span>
       </button>
-      <div>
+      <div
+        className=""
+      >
         <table
           className="w-full border-collapse w-full"
         >
@@ -9598,7 +9612,9 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
           Create
         </span>
       </button>
-      <div>
+      <div
+        className=""
+      >
         <table
           className="w-full border-collapse"
         >

diff --git a/src/pages/dashboard/components/ContentOverview.tsx b/src/pages/dashboard/components/ContentOverview.tsx
@@ -303,7 +303,7 @@ const ContentOverview = (props: ContentOverviewProps<RowData>) => {
           }
         >
           <Table
-            visibleRows={5}
+            visibleRows={50}
             columns={columns}
             data={data}
             onRowClick={row => {
@@ -313,6 +313,9 @@ const ContentOverview = (props: ContentOverviewProps<RowData>) => {
                 uuid: row.uuid
               }));
             }}
+            classNameTableWrapper={
+              filters.country.id === 0 ? "" : "!max-h-[391px] lg:!max-h-[423px] wide:!max-h-[457  px]"
+            }
             variant={VARIANT_TABLE_DASHBOARD_COUNTRIES}
           />
         </PageCard>

diff --git a/src/pages/dashboard/index.page.tsx b/src/pages/dashboard/index.page.tsx
@@ -125,7 +125,12 @@ const Dashboard = () => {
     {
       header: "Project",
       accessorKey: "project",
-      enableSorting: false
+      enableSorting: false,
+      cell: (props: any) => {
+        console.log(props.getValue(), "props.getValue()");
+        const value = props.getValue().split("_");
+        return <span className="two-line-text text-14-light">{value}</span>;
+      }
     },
     {
       header: "Trees Planted",
@@ -248,7 +253,7 @@ const Dashboard = () => {
     total_non_profit_count: totalSectionHeader?.total_non_profit_count
   };
   return (
-    <div className="mb-4 mr-2 mt-4 flex flex-1 flex-wrap gap-4 overflow-auto bg-neutral-70 pl-4 pr-2 small:flex-nowrap">
+    <div className="mb-4 mr-2 mt-4 flex flex-1 flex-wrap gap-4 overflow-y-auto overflow-x-hidden bg-neutral-70 pl-4 pr-2 small:flex-nowrap">
       <div className="overflow-hiden mx-auto w-full max-w-[730px] small:w-1/2 small:max-w-max">
         <PageRow className="gap-4 p-0">
           <When condition={filters.country.id !== 0 && !filters.uuid}>

diff --git a/src/styles/extended-utilities.css b/src/styles/extended-utilities.css
@@ -672,3 +672,14 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.two-line-text{
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}