fix(datagrid): update table holder calculated size on render

ovh · Nov 15, 2023 · 54d1a45 · 54d1a45
1 parent fb11c20
commit 54d1a45
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 19 deletions.
diff --git a/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.scss b/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.scss
@@ -31,14 +31,14 @@
         &:checked::before {
             background-color: var(--ods-color-primary-500);
             /* stylelint-disable-next-line property-no-vendor-prefix */
-            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath stroke-linecap='round' stroke-width='2' d='M4 13l5 5M20 7L9 18'/%3E%3Cpath fill='%23000000' d='M19.293 6.293a1 1 0 011.414 1.414l-11 11a.995.995 0 01-.53.277l-.118.014h-.118a.996.996 0 01-.648-.29l-5-5a1 1 0 011.414-1.415L9 16.585z'/%3E%3C/g%3E%3C/svg%3E"); 
+            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath stroke-linecap='round' stroke-width='2' d='M4 13l5 5M20 7L9 18'/%3E%3Cpath fill='%23000000' d='M19.293 6.293a1 1 0 011.414 1.414l-11 11a.995.995 0 01-.53.277l-.118.014h-.118a.996.996 0 01-.648-.29l-5-5a1 1 0 011.414-1.415L9 16.585z'/%3E%3C/g%3E%3C/svg%3E");
             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath stroke-linecap='round' stroke-width='2' d='M4 13l5 5M20 7L9 18'/%3E%3Cpath fill='%23000000' d='M19.293 6.293a1 1 0 011.414 1.414l-11 11a.995.995 0 01-.53.277l-.118.014h-.118a.996.996 0 01-.648-.29l-5-5a1 1 0 011.414-1.415L9 16.585z'/%3E%3C/g%3E%3C/svg%3E");
         }
 
         &:indeterminate::before {
             background-color: var(--ods-color-primary-500);
             /* stylelint-disable-next-line property-no-vendor-prefix */
-            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' fill-rule='evenodd' d='M20 11a1 1 0 010 2H4a1 1 0 010-2h16z'/%3E%3C/svg%3E"); 
+            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' fill-rule='evenodd' d='M20 11a1 1 0 010 2H4a1 1 0 010-2h16z'/%3E%3C/svg%3E");
             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' fill-rule='evenodd' d='M20 11a1 1 0 010 2H4a1 1 0 010-2h16z'/%3E%3C/svg%3E");
         }
     }
@@ -77,7 +77,7 @@ $ods-border-datagrid: solid 1px var(--ods-color-blue-200);
                 border-bottom: $ods-border-datagrid;
             }
         }
-    
+
         .tabulator-cell {
             box-sizing: border-box;
             border-top: $ods-border-datagrid;
@@ -163,8 +163,8 @@ $ods-border-datagrid: solid 1px var(--ods-color-blue-200);
                         }
                     }
                 }
-                
-                
+
+
                 &.ods-selectable__input-checkbox {
                     @include ods-input-checkbox;
 
@@ -210,8 +210,6 @@ $ods-border-datagrid: solid 1px var(--ods-color-blue-200);
                         }
                     }
                 }
-
-
             }
         }
     }

diff --git a/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.tsx b/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.tsx
@@ -103,9 +103,16 @@ export class OsdsDatagrid implements OdsDatagridAttribute, OdsDatagridEvent {
   }
 
   private setColumnsHeight(): void {
-    this.table?.getColumns().forEach((col) => {
-      col.getElement().style.height = `${this.rowHeight}px`;
-    });
+    if (this.table) {
+      this.table.getColumns().forEach((col) => {
+        col.getElement().style.height = `${this.rowHeight}px`;
+      });
+
+      // As header is using web-component, its size is not correct when tabulator
+      // set the tableholder element height, so we need to update it
+      this.table.rowManager.element.style.height = `calc(100% - ${this.rowHeight}px)`;
+      this.table.rowManager.element.style.maxHeight = `calc(100% - ${this.rowHeight}px)`;
+    }
   }
 
   private initTable(): void {

diff --git a/packages/components/datagrid/src/index.html b/packages/components/datagrid/src/index.html
@@ -15,10 +15,17 @@
   <script type='module' src='/build/osds-datagrid.esm.js'></script>
   <script nomodule src='/build/osds-datagrid.js'></script>
   <link rel="stylesheet" href="/build/osds-datagrid.css">
+
+  <style>
+    :root {
+      --ods-menu-position: absolute;
+    }
+  </style>
 </head>
 <body>
-  <osds-datagrid id="datagridFormatter" is-selectable height="600"></osds-datagrid>
+  <osds-datagrid id="datagridFormatter" is-selectable height="400"></osds-datagrid>
   <button id="buttonDatagrid">Toggle isSelectable</button>
+
   <h1>With sorted column</h1>
   <osds-datagrid
     id="datagridFormatter"
@@ -35,6 +42,15 @@ <h1>With selectable columns</h1>
     height="300">
   </osds-datagrid>
 
+  <h1>With many rows</h1>
+  <osds-datagrid
+    has-hideable-columns="false"
+    id="largeDatagrid"
+    is-selectable="false"
+    columns='[{"title":"Name", "field":"name"}, {"title":"Firstname", "field":"firstname"}]'
+    height="300">
+  </osds-datagrid>
+
   <h1>Empty state</h1>
   <osds-datagrid
     columns='[{"title":"Name", "field":"name", "isSortable": true}, {"title":"Firstname", "field":"firstname"}]'
@@ -43,12 +59,6 @@ <h1>Empty state</h1>
     height="100">
   </osds-datagrid>
 
-  <style>
-    :root {
-      --ods-menu-surface-position: absolute;
-    }
-  </style> 
-
   <script>
     const datagrid = document.getElementById('datagridFormatter');
     const button = document.getElementById('buttonDatagrid');
@@ -85,6 +95,18 @@ <h1>Empty state</h1>
     ];
     datagrid.rows = Array.from({ length: 5 }).fill({ name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" });
     // datagrid.hideableColumns = ['name', 'gender'];
+
+    const largeDatagrid = document.getElementById('largeDatagrid');
+    const rows = [];
+
+    for (let i = 0; i < 100; i++) {
+      rows.push({
+        firstname: `firstname-${i}`,
+        name: `name${i}`,
+      });
+    }
+
+    largeDatagrid.rows = rows;
   </script>
 </body>
 </html>
diff --git a/packages/components/datagrid/src/jestStub.js b/packages/components/datagrid/src/jestStub.js
@@ -1,5 +1,11 @@
 class TabulatorFullStub {
-  constructor() { }
+  constructor() {
+    this.rowManager = {
+      element: {
+        style: {},
+      },
+    };
+  }
 
   // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
   setData() {
@@ -30,4 +36,4 @@ class TabulatorFullStub {
 // eslint-disable-next-line no-undef
 module.exports = {
   TabulatorFull: TabulatorFullStub,
-};
+};