fix(datagrid): doc with new props

ovh · Oct 5, 2023 · f1898ce · f1898ce
1 parent 57824e9
commit f1898ce
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.tsx b/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.tsx
@@ -48,6 +48,13 @@ export class OsdsDatagrid implements OdsDatagridAttribute {
     this.table?.setData(rows);
   }
 
+  @Watch('isSelectable')
+  @Watch('columns')
+  onChangeColumns(): void {
+    const columns = this.controler.getColumns();
+    this.table?.setColumns(this.controler.getTabulatorColumns(columns));
+  }
+
   render(): JSX.Element {
     return (
       <Host>

diff --git a/packages/components/datagrid/src/docs/osds-datagrid/usage.mdx b/packages/components/datagrid/src/docs/osds-datagrid/usage.mdx
@@ -34,4 +34,43 @@ import GenericStyle from '@ovhcloud/ods-common-core/docs/generic-style.mdx';
       { name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" },
     ];
 </script>
+```
+
+### Selectable columns
+<osds-datagrid 
+  columns='[{"title":"Name","field":"name"},{"title":"Firstname","field":"firstname"},{"title":"Gender","field":"gender"},{"title":"Date Of Birth","field":"dob"}]'
+  rows='[{"name":"Dupont","firstname":"Antoine","gender":"male","dob":"15/11/1996"},{"name":"Garnbret","firstname":"Janja","gender":"female","dob":"12/03/1999"}]'
+  is-selectable>
+  </osds-datagrid>
+
+```html
+<!-- Attributes need to be stringify -->
+<osds-datagrid 
+  columns='[{"title":"Name","field":"name"},{"title":"Firstname","field":"firstname"},{"title":"Gender","field":"gender"},{"title":"Date Of Birth","field":"dob"}]'
+  rows='[{"name":"Dupont","firstname":"Antoine","gender":"male","dob":"15/11/1996"},{"name":"Garnbret","firstname":"Janja","gender":"female","dob":"12/03/1999"}]'
+  is-selectable>
+</osds-datagrid>
+```
+### With sortable columns
+<osds-datagrid 
+  columns='[{"title":"Name","field":"name", "isSortable": true},{"title":"Firstname","field":"firstname"},{"title":"Gender","field":"gender"},{"title":"Date Of Birth","field":"dob"}]'
+  rows='[{"name":"Dupont","firstname":"Antoine","gender":"male","dob":"15/11/1996"},{"name":"Garnbret","firstname":"Janja","gender":"female","dob":"12/03/1999"}]'>
+</osds-datagrid>
+
+```html
+<osds-datagrid id="datagrid"></osds-datagrid>
+
+<script>
+    const datagrid = document.querySelector('#datagrid')
+    datagrid.columns = [
+      { title: "Name", field: "name", isSortable: true },
+      { 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>
 ```
diff --git a/packages/storybook/stories/components/datagrid/datagrid.web-components.stories.ts b/packages/storybook/stories/components/datagrid/datagrid.web-components.stories.ts
@@ -8,12 +8,12 @@ import page from './datagrid.web-component.stories.page.mdx';
 
 defineCustomElements();
 
-/* Default story parameters  */
+/* Default story parameters */
 const defaultStoryParams = {
   columns: {
     category: 'Général',
     defaultValue: [
-      { title: "Name", field: "name" },
+      { title: "Name", field: "name", isSortable: true },
       { title: "Firstname", field: "firstname" },
       { title: "Gender", field: "gender" },
       { title: "Date Of Birth", field: "dob" },
@@ -26,6 +26,10 @@ const defaultStoryParams = {
       { name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" },
     ],
   },
+  isSelectable: {
+    category: 'Général',
+    defaultValue: false
+  },
 };
 
 export default {