fix(data-grid): improve selection handling and formatting fix

telekom · Oct 31, 2024 · c897add · c897add
1 parent 60c8059
commit c897add
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 19 deletions.
diff --git a/packages/components/src/components/data-grid/cell-handlers/text-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/text-cell.tsx
@@ -38,7 +38,7 @@ export const TextCell: Cell = {
       iconPrefix,
       iconSuffix,
       label,
-      textFieldProps = {}
+      textFieldProps = {},
     } = field;
 
     // Input component doesn't expand with content, so need to return a fake element that simulates width

diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx
@@ -102,7 +102,7 @@ export class DataGrid {
   /** (optional) Set to true to add selection column */
   @Prop() selectable?: boolean = false;
   /** Read-only selection array - populated with raw data from selected rows */
-  @State() selection: any[] = [];
+  @Prop({mutable: true}) selection: any[] = [];
   /** (optional) Shade every second row darker */
   @Prop() shadeAlternate?: boolean = true;
   /** (optional) Injected css styles */
@@ -255,7 +255,8 @@ export class DataGrid {
       this.sortTable(
         this.fields[this.activeSortingIndex].sortDirection,
         this.fields[this.activeSortingIndex].type,
-        this.activeSortingIndex, true
+        this.activeSortingIndex,
+        true
       );
     }
   }

diff --git a/packages/components/src/components/data-grid/readme.md b/packages/components/src/components/data-grid/readme.md
@@ -20,7 +20,7 @@
 | `pageSize`            | `page-size`             | (optional) Set number of rows to display per pagination page                                                                  | `number`                                                                                                        | `Infinity`                  |
 | `rows`                | `rows`                  | Input data array                                                                                                              | `any`                                                                                                           | `undefined`                 |
 | `selectable`          | `selectable`            | (optional) Set to true to add selection column                                                                                | `boolean`                                                                                                       | `false`                     |
-| `selection`           | --                      | Read-only selection array - populated with raw data from selected rows                                                        | `string[]`                                                                                                      | `[]`                        |
+| `selection`           | --                      | Read-only selection array - populated with raw data from selected rows                                                        | `any[]`                                                                                                         | `[]`                        |
 | `shadeAlternate`      | `shade-alternate`       | (optional) Shade every second row darker                                                                                      | `boolean`                                                                                                       | `true`                      |
 | `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns                                                                                         | `string`                                                                                                        | `'Activate to sort column'` |
 | `styles`              | `styles`                | (optional) Injected css styles                                                                                                | `any`                                                                                                           | `undefined`                 |
@@ -29,12 +29,13 @@
 
 ## Events
 
-| Event        | Description                                                                                        | Type                                     |
-| ------------ | -------------------------------------------------------------------------------------------------- | ---------------------------------------- |
-| `scale-edit` | Event triggered every time the editable cells are changed, updating the original rows data         | `CustomEvent<DataGridEditEventDetail>`   |
-| `scale-sort` | Event triggered every time the data is sorted, changing original rows data                         | `CustomEvent<DataGridSortedEventDetail>` |
-| `scaleEdit`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<DataGridEditEventDetail>`   |
-| `scaleSort`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<DataGridSortedEventDetail>` |
+| Event             | Description                                                                                        | Type                                     |
+| ----------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------- |
+| `scale-edit`      | Event triggered every time the editable cells are changed, updating the original rows data         | `CustomEvent<DataGridEditEventDetail>`   |
+| `scale-selection` | Event triggered every time the selection list updates                                              | `CustomEvent<any[]>`                     |
+| `scale-sort`      | Event triggered every time the data is sorted, changing original rows data                         | `CustomEvent<DataGridSortedEventDetail>` |
+| `scaleEdit`       | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<DataGridEditEventDetail>`   |
+| `scaleSort`       | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<DataGridSortedEventDetail>` |
 
 
 ## Dependencies

diff --git a/packages/components/src/html/data-grid.html b/packages/components/src/html/data-grid.html
@@ -189,15 +189,15 @@
           style: 'switch',
           editable: true,
         },
-        {  
+        {
           type: 'text',
           label: 'Nr-edit',
           editable: true,
           width: 60,
           textFieldProps: {
             type: 'number',
-            'max':2
-          }
+            max: 2,
+          },
         },
         {
           type: 'graph',
@@ -849,12 +849,16 @@
 
       // Pass in data
       const table = document.querySelector('#table1');
-      document.querySelector('scale-data-grid').addEventListener('scale-sort', ({ detail }) => {
-        console.log('sort', detail);
-      });
-      document.querySelector('scale-data-grid').addEventListener('scale-selection', ({ detail }) => {
-        console.log('select', detail);
-      });
+      document
+        .querySelector('scale-data-grid')
+        .addEventListener('scale-sort', ({ detail }) => {
+          console.log('sort', detail);
+        });
+      document
+        .querySelector('scale-data-grid')
+        .addEventListener('scale-selection', ({ detail }) => {
+          console.log('select', detail);
+        });
       table.fields = fields;
       table.rows = rows;
       table.localization = localization;

diff --git a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
@@ -748,6 +748,8 @@ Expected format: unformatted `string`, eg `'this is a string'`
 - `iconPrefix?: scale-icon-string (eg 'action-download')`
 - `iconSuffix?: scale-icon-string (eg 'action-download')`
 - `editable?: boolean = false`
+
+
  If `editable` is set to `true`, a `scale-text-field` is used for the element. The properties of the `scale-text-field` can be passed to the editable component using the `textFieldProps` attribute.
  <Canvas withSource="close">
   <Story name="Text Cell">