feat(data-grid): adds presort to grid (#2335)

feat(data-grid): presort functionality added to data-grid
telekom · Oct 16, 2024 · f657202 · f657202
1 parent ee21b87
commit f657202
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 14 deletions.
diff --git a/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts b/packages/components/src/components/data-grid/cell-handlers/cell-interface.ts
@@ -17,6 +17,8 @@ export interface Cell {
     resizable?: boolean;
     sortable?: boolean;
     sortBy?: 'number' | 'text' | 'date';
+    presort?: boolean;
+    presortDirection?: 'ascending' | 'descending';
     stretchWeight?: number;
     textAlign?: 'left' | 'center' | 'right';
     visible?: boolean;

diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx
@@ -182,11 +182,12 @@ export class DataGrid {
     this.applyResponsiveClasses = this.applyResponsiveClasses.bind(this);
     this.updateColumnStretching = this.updateColumnStretching.bind(this);
   }
+
   componentWillLoad() {
     this.fieldsHandler();
     this.rowsHandler();
   }
-  componentWillUpdate() {}
+
   componentDidRender() {
     if (this.needsAutoWidthParse) {
       this.calculateAutoWidths();
@@ -198,10 +199,11 @@ export class DataGrid {
       }
     });
   }
+
   componentDidLoad() {
     this.addResizeObserver();
   }
-  componentDidUpdate() {}
+
   disconnectedCallback() {
     this.removeResizeObserver();
   }
@@ -216,6 +218,7 @@ export class DataGrid {
     this.resetSortingToggle();
     this.dataNeedsCheck = true;
   }
+
   @Watch('rows')
   rowsHandler() {
     // Reset pagination to the last page of the new records if new records are less than previous.
@@ -225,6 +228,7 @@ export class DataGrid {
     }
     this.parseRows();
     this.setInitialRowProps();
+    this.presortTable();
     this.dataNeedsCheck = true;
     // Set flag to dirty to redo column width with new data
     this.needsAutoWidthParse = true;
@@ -407,7 +411,7 @@ export class DataGrid {
   }
 
   // Sorting handlers
-  toggleTableSorting(sortDirection, columnIndex, type) {
+  toggleTableSorting(currentSortDirection, columnIndex, type) {
     // Remove sorting from previous column index
     if (
       this.activeSortingIndex > -1 &&
@@ -419,9 +423,9 @@ export class DataGrid {
     this.activeSortingIndex = columnIndex;
 
     const newSortDirection =
-      sortDirection === 'none'
+      currentSortDirection === 'none'
         ? 'ascending'
-        : sortDirection === 'ascending'
+        : currentSortDirection === 'ascending'
         ? 'descending'
         : 'none';
     this.fields[columnIndex].sortDirection = newSortDirection;
@@ -496,6 +500,23 @@ export class DataGrid {
     this.activeSortingIndex = -1;
   }
 
+  presortTable(): void {
+    const columnToPresort = this.fields.find(
+      (col) => col.sortable && col.presort
+    );
+    if (!columnToPresort) {
+      return;
+    }
+    const columnIndex = this.fields.indexOf(columnToPresort);
+    const direction =
+      columnToPresort.presortDirection === 'descending'
+        ? 'descending'
+        : 'ascending';
+    this.activeSortingIndex = columnIndex;
+    this.fields[columnIndex].sortDirection = direction;
+    this.sortTable(direction, columnToPresort.type, columnIndex);
+  }
+
   // Column resize handlers
   onDividerDown(e) {
     this.polyfillMousePosition(e);

diff --git a/packages/components/src/html/data-grid.html b/packages/components/src/html/data-grid.html
@@ -172,6 +172,8 @@
           type: 'number',
           label: 'Numbers',
           sortable: true,
+          presort: true,
+          presortDirection: 'descending',
           precision: 2,
           decimalSymbol: '.',
           groupSymbol: ',',
@@ -218,7 +220,7 @@
             { content: 'Bug' },
           ],
           '00:00:20',
-          102045.0,
+          101045.0,
           false,
           15,
           (() => {
@@ -322,7 +324,7 @@
           'http://example.com',
           'Simple, Short',
           '00:01:15',
-          43.2,
+          45.2,
           true,
           73.2,
           (() => {
@@ -355,7 +357,7 @@
           'http://example.com',
           'Simple, Short',
           '00:00:20',
-          102045.0,
+          103045.0,
           false,
           15,
           (() => {
@@ -388,7 +390,7 @@
           'http://example.com',
           'Simple, Short',
           '00:01:15',
-          43.2,
+          47.2,
           true,
           73.2,
           (() => {
@@ -421,7 +423,7 @@
           'http://example.com',
           'Simple, Short',
           '00:00:20',
-          102045.0,
+          105045.0,
           false,
           15,
           (() => {
@@ -454,7 +456,7 @@
           'http://example.com',
           'Simple, Short',
           '00:01:15',
-          43.2,
+          48.2,
           true,
           73.2,
           (() => {
@@ -487,7 +489,7 @@
           'http://example.com',
           'Simple, Short',
           '00:00:20',
-          102045.0,
+          109045.0,
           false,
           15,
           (() => {
@@ -520,7 +522,7 @@
           'http://example.com',
           'Simple, Short',
           '00:01:15',
-          43.2,
+          40.2,
           true,
           73.2,
           (() => {
@@ -553,7 +555,7 @@
           'http://example.com',
           'Simple, Short',
           '00:00:20',
-          102045.0,
+          108045.0,
           false,
           15,
           (() => {

diff --git a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
@@ -309,6 +309,8 @@ const rows = [ [1, 'John', '12:30'], [2, 'Mary', '2:12'], [3, 'Patek', '16:01'],
 - `resizable?: boolean = true`
 - `sortable?: boolean = false`
 - `sortBy?: 'number' | 'text' = 'text'`
+- `presort?: boolean = false`
+- `presortDirection?: 'ascending' | 'descending' = 'ascending'`
 - `textAlign?: 'left' | 'center' | 'right' = 'left'`
 - `stretchWeight?: 'number'`
 - `visible?: boolean = true`
@@ -1381,6 +1383,43 @@ Expected format: unformatted `string`, eg `'this is a string'`
   </Story>
 </Canvas>
 
+## Presort
+
+To make grid presorted by certain field on init, add next props to this field: `sortable: true`, `presort: true`, `presortDirection: 'ascending' | 'descending'`.
+
+<Canvas withSource="close">
+  <Story name="Presort">
+    {`<content>
+      <scale-data-grid heading="Presort" id="presort-example"></scale-data-grid>
+      <script type="application/javascript">
+        {
+          const dataGrid = document.querySelector('#presort-example');
+          dataGrid.fields = [
+            {
+              type: 'text',
+              label: 'Name',
+              sortable: true,
+              presort: true,
+              presortDirection: 'descending',
+            },
+            {
+              type: 'checkbox',
+              label: 'Toggle',
+              style: 'switch',
+            },
+          ];
+          dataGrid.rows = [
+            ['Adrienne Hopper', true],
+            ['Merritt Hardin', true],
+            ['Randall Copeland', false],
+            ['Hope Bass', false],
+          ];
+        }
+      </script>
+    </content>`}
+  </Story>
+</Canvas>
+
 <!-- TODO -->
 <!-- manual pagination example -->
 <!-- search filtering example -->