feat(datagrid): formatter custom

packages/components/datagrid/documentation/specifications/spec.md

@@ -4,16 +4,20 @@
 ## Interfaces
 
 ### OdsDatagridAttribute
-|name | Type | Required | Default | Description|
+|Name | Type | Required | Default | Description|
 |---|---|:---:|---|---|
 |**`columns`** | `string` \| `OdsDatagridColumn[]` | ✴️ |  | The list of the column|
+|**`isSelectable`** | _boolean_ |  |  | The rows can be selectable|
+|**`noResultLabel`** | _string_ |  |  | Text when the datagrid was no rows|
 |**`rows`** | `string` \| `OdsDatagridRow[]` | ✴️ |  | The list of the rowsThe key need to be according to the column field|
 
 ### OdsDatagridColumn
-|name | Type | Required | Default | Description|
+|Name | Type | Required | Default | Description|
 |---|---|:---:|---|---|
 |**`field`** | _string_ | ✴️ |  | |
+|**`isSortable`** | _boolean_ |  |  | |
 |**`title`** | _string_ | ✴️ |  | |
+|**`formatter`** | `undefined` \| `string` | ✴️ |  | |
 
 ### OdsDatagridRow
 |Key | Type | Description|

packages/components/datagrid/package.json

@@ -44,6 +44,7 @@
   },
   "devDependencies": {
     "@ovhcloud/ods-common-testing": "16.2.0",
+    "@ovhcloud/ods-component-button": "16.2.0",
     "@ovhcloud/ods-stencil-dev": "16.2.0",
     "@types/tabulator-tables": "5.5.2"
   }

packages/components/datagrid/src/components/osds-datagrid/core/controller.ts

@@ -17,8 +17,16 @@ class OdsDatagridController {
             field: column.field,
             headerSort: column.isSortable ?? false,
             headerHozAlign: 'center',
+            vertAlign: 'middle',
             titleFormatter: (cell: CellComponent) => this.getOdsText(cell.getValue(), ODS_TEXT_SIZE._500),
-            formatter: (cell: CellComponent) => this.getOdsText(cell.getValue(), ODS_TEXT_SIZE._400),
+            formatter: (cell: CellComponent, _formatterParams: Record<string, unknown>, onRendered: (callback: () => void) => void) => {
+                onRendered(() => {
+                    // setTimeout(() => {
+                    //     console.log('cell.getElement()', cell.getElement().scrollHeight);
+                    // }, 100);
+                });
+                return column.formatter?.(cell.getValue()) ?? this.getOdsText(cell.getValue(), ODS_TEXT_SIZE._400);
+            },
             hozAlign: 'center',
             minWidth: 100,
         }

packages/components/datagrid/src/components/osds-datagrid/interfaces/attributes.ts

@@ -1,7 +1,8 @@
 interface OdsDatagridColumn {
-  field: string // the key matching the row property
-  isSortable?: boolean // Column is sortable by string
-  title: string // the column title
+  field: string; // the key matching the row property
+  isSortable?: boolean; // Column is sortable by string
+  title: string; // the column title
+  formatter: (cellValue: string | number | boolean) => string | null; // The formatter for a column, sould return a string html
 }
 
 interface OdsDatagridRow {

packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.scss

@@ -57,6 +57,10 @@ $ods-border-datagrid: solid 1px var(--ods-color-blue-200);
             border-top: $ods-border-datagrid;
             box-sizing: border-box;
 
+            &:not(.height-calc) {
+                height: unset !important;
+            }
+
             &:first-child {
                 border-left: $ods-border-datagrid;
             }

packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.tsx

@@ -6,6 +6,7 @@ import { OdsDatagridController } from './core/controller';
 import { OdsLogger } from '@ovhcloud/ods-common-core';
 import { ODS_ICON_SIZE, ODS_ICON_NAME } from '@ovhcloud/ods-component-icon'
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+
 @Component({
   tag: 'osds-datagrid',
   styleUrl: 'osds-datagrid.scss',
@@ -41,7 +42,6 @@ export class OsdsDatagrid implements OdsDatagridAttribute {
     this.table = new Tabulator(this.grid, {
       height: '100%',
       data: rows,
-      rowHeight: 28,
       layout: 'fitColumns',
       placeholder: this.noResultLabel,
       columns: this.controler.getTabulatorColumns(columns),
@@ -59,6 +59,26 @@ export class OsdsDatagrid implements OdsDatagridAttribute {
         </osds-icon>`
       },
     });
+    this.table?.on('renderComplete', () => {
+      let maxHeight = 0;
+      setTimeout(() => {
+        this.table?.getRows().forEach((row) => {
+          row.getCells().map((cell) => {
+            const element = cell.getElement();
+            if (maxHeight < element.offsetHeight) {
+              maxHeight = element.offsetHeight;
+            }
+            return element;
+          }).forEach((element) => {
+            element.classList.add('height-calc');
+            element.style.height = maxHeight + 'px';
+          });
+        });
+      }, 100);
+    })
+    // setTimeout(() => {
+    //   this.table?.rowManager.reRenderInPosition();
+    // }, 300);
   }
 
   @Watch('rows')

packages/components/datagrid/src/global.dev.ts

@@ -8,6 +8,7 @@ import './global';
 import { OdsLogger } from '@ovhcloud/ods-common-core';
 import '@ovhcloud/ods-component-icon';
 import '@ovhcloud/ods-component-text';
+import '@ovhcloud/ods-component-button';
 
 const logger = new OdsLogger('global-dev');
 logger.log('init');

packages/components/datagrid/src/index.html

@@ -14,9 +14,9 @@
   <link rel="stylesheet" href="/build/osds-datagrid.css">
 </head>
 <body>
-  <osds-datagrid columns='[{"title":"Name", "field":"name"}, {"title":"Firstname", "field":"firstname"}]' rows='[{"name":"Homer", "firstname":"Simpson"}]'></osds-datagrid>
+  <osds-datagrid id="datagridFormatter"></osds-datagrid>
 
-  <h1>With sorted column</h1>
+  <!-- <h1>With sorted column</h1>
   <osds-datagrid
     columns='[{"title":"Name", "field":"name", "isSortable": true}, {"title":"Firstname", "field":"firstname"}, {"title":"Gender", "field":"gender"}]'
     rows='[{"name":"Homer", "firstname":"Simpson", "gender": "Male"}, {"name":"Marge", "firstname":"Simpson", "gender": "Female"}]'>
@@ -34,7 +34,24 @@ <h1>Empty state</h1>
     columns='[{"title":"Name", "field":"name", "isSortable": true}, {"title":"Firstname", "field":"firstname"}]'
     rows='[]'
     no-result-label="Aucune données de renseignée">
-  </osds-datagrid>
+  </osds-datagrid> -->
+
+  <script>
+    const datagrid = document.getElementById('datagridFormatter');
+    datagrid.columns = [
+      { title: "Name", field: "name", formatter: (cellValue) => {
+          return `<osds-button>Button content</osds-button> ${cellValue}`
+        }
+      },
+      { title: "Firstname", field: "firstname" },
+      { title: "Gender", field: "gender" },
+      { title: "Date Of Birth", field: "dob" },
+    ];
+    datagrid.rows = [
+      { name: "Dupont", firstname: "Antoine", gender: "male", dob: "15/11/1996" },
+      { name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" },
+    ];
+  </script>
 
 </body>
 </html>

yarn.lock

@@ -4685,6 +4685,7 @@ __metadata:
     "@ovhcloud/ods-common-stencil": 16.2.0
     "@ovhcloud/ods-common-testing": 16.2.0
     "@ovhcloud/ods-common-theming": 16.2.0
+    "@ovhcloud/ods-component-button": 16.2.0
     "@ovhcloud/ods-component-icon": 16.2.0
     "@ovhcloud/ods-component-text": 16.2.0
     "@ovhcloud/ods-stencil-dev": 16.2.0