fix(datagrid): row change & storybook

ovh · Nov 21, 2023 · 3a792fe · 3a792fe
1 parent 8156c4c
commit 3a792fe
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 17 deletions.
diff --git a/packages/components/datagrid/documentation/usage-guidelines/usage-style.css b/packages/components/datagrid/documentation/usage-guidelines/usage-style.css
@@ -1,6 +1,6 @@
-:root {
-    --ods-menu-position: absolute;
-    --ods-select-position: absolute;
-    --ods-popover-position: absolute;
-    --ods-tooltip-position: absolute;
+:root osds-datagrid {
+    --ods-menu-position: static;
+    --ods-select-position: static;
+    --ods-popover-position: static;
+    --ods-tooltip-position: static;
 }
diff --git a/packages/components/datagrid/documentation/usage-guidelines/usage.mdx b/packages/components/datagrid/documentation/usage-guidelines/usage.mdx
@@ -196,8 +196,16 @@ export const datagridWithMenu = () => {
     datagrid.rows = [
       { name: "Dupont", firstname: "Antoine", gender: "male", dob: "15/11/1996" },
       { name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" },
+      { name: "Dupont", firstname: "Antoine", gender: "male", dob: "15/11/1996" },
+      { name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" },
+      { name: "Dupont", firstname: "Antoine", gender: "male", dob: "15/11/1996" },
+      { name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" },
+      { name: "Dupont", firstname: "Antoine", gender: "male", dob: "15/11/1996" },
+      { name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" },
+      { name: "Dupont", firstname: "Antoine", gender: "male", dob: "15/11/1996" },
+      { name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" },
     ];
-    datagrid.height = 150;
+    datagrid.height = 300;
   }, 0);
 };
 
@@ -210,11 +218,11 @@ export const datagridWithMenu = () => {
 <osds-datagrid id="datagrid" no-result-label="Aucun résultat"></osds-datagrid>
 
 <style>
-  :root {
-    --ods-menu-position: absolute;
-    --ods-select-position: absolute;
-    --ods-popover-position: absolute;
-    --ods-tooltip-position: absolute;
+  :root osds-datagrid {
+    --ods-menu-position: static;
+    --ods-select-position: static;
+    --ods-popover-position: static;
+    --ods-tooltip-position: static;
   }
 </style> 
 

diff --git a/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.e2e.ts b/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.e2e.ts
@@ -195,4 +195,17 @@ describe('e2e:osds-datagrid', () => {
     expect(columns?.[0].innerText).toContain('Name');
     expect(columns?.[1].innerText).toContain('Firstname');
   });
+
+  it('should update rows', async() => {
+    await setup({ attributes: {
+      columns: JSON.stringify([{ field: 'name', title: 'Name' }, { field: 'firstname', title: 'Firstname' }]),
+      hasHideableColumns: false,
+      rows: JSON.stringify([{ firstname: 'Simpson', name: 'Homer' }]),
+    } });
+    el.setProperty('rows', JSON.stringify([{ firstname: 'Simpson', name: 'Homer' }, { firstname: 'Simpson', name: 'Marge' }]));
+    await page.waitForChanges()
+
+    const rows = JSON.parse(await el.getProperty('rows'));
+    expect(rows).toHaveLength(2);
+  });
 });
diff --git a/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.tsx b/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.tsx
@@ -153,7 +153,9 @@ export class OsdsDatagrid implements OdsDatagridAttribute, OdsDatagridEvent {
 
   private handlerEvent(): void {
     this.table?.on('dataSorting', (sorters: SorterFromTable[]): void => {
-      this.odsSortChange.emit({ dir: sorters[0].dir, field: sorters[0].field });
+      if (sorters[0]) {
+        this.odsSortChange.emit({ dir: sorters[0].dir, field: sorters[0].field });
+      }
     });
 
     // @ts-ignore type not good, doc: https://tabulator.info/docs/5.5/events#select

diff --git a/packages/components/datagrid/src/index.html b/packages/components/datagrid/src/index.html
@@ -18,10 +18,10 @@
 
   <style>
     :root {
-      --ods-menu-position: absolute;
-      --ods-select-position: absolute;
-      --ods-popover-position: absolute;
-      --ods-tooltip-position: absolute;
+      --ods-menu-position: static;
+      --ods-select-position: static;
+      --ods-popover-position: static;
+      --ods-tooltip-position: static;
     }
   </style>
 </head>
@@ -66,7 +66,13 @@ <h1>Empty state</h1>
     const datagrid = document.getElementById('datagridFormatter');
     const button = document.getElementById('buttonDatagrid');
     button.addEventListener('click', () => {
-      datagrid.isSelectable = !datagrid.isSelectable;
+      datagrid.rows = [{
+        firstname: `firstname1`,
+        name: `name1`,
+      }, {
+        firstname: `firstname2`,
+        name: `name2`,
+      }];
     });
     datagrid.addEventListener('odsSortChange', (data) => console.log('odsSortChange', data));
     datagrid.addEventListener('odsRowSelectedChange', (data) => console.log('odsRowSelectedChange', data))