From f1898ce1a178b55faa633af53e3b3b3654e94a99 Mon Sep 17 00:00:00 2001
From: Alexandre Esteves <alexandre.esteves.ae@gmail.com>
Date: Tue, 3 Oct 2023 17:15:20 +0200
Subject: [PATCH] fix(datagrid): doc with new props

---
 .../osds-datagrid/osds-datagrid.tsx           |  7 ++++
 .../datagrid/src/docs/osds-datagrid/usage.mdx | 39 +++++++++++++++++++
 .../datagrid.web-components.stories.ts        |  8 +++-
 3 files changed, 52 insertions(+), 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
index 08d43193ba..aac3ac4655 100644
--- 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
index 00eebab6b9..ec3d75b035 100644
--- 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>
 ```
\ No newline at end of file
diff --git a/packages/storybook/stories/components/datagrid/datagrid.web-components.stories.ts b/packages/storybook/stories/components/datagrid/datagrid.web-components.stories.ts
index f046d86093..acd099355e 100644
--- 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 {