feat(data-grid): adds presort to grid

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;

packages/components/src/components/data-grid/data-grid.tsx

@@ -179,11 +179,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();
@@ -195,10 +196,11 @@ export class DataGrid {
       }
     });
   }
+
   componentDidLoad() {
     this.addResizeObserver();
   }
-  componentDidUpdate() {}
+
   disconnectedCallback() {
     this.removeResizeObserver();
   }
@@ -213,6 +215,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.
@@ -222,6 +225,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;
@@ -404,7 +408,7 @@ export class DataGrid {
   }
 
   // Sorting handlers
-  toggleTableSorting(sortDirection, columnIndex, type) {
+  toggleTableSorting(currentSortDirection, columnIndex, type) {
     // Remove sorting from previous column index
     if (
       this.activeSortingIndex > -1 &&
@@ -416,9 +420,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;
@@ -493,6 +497,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);

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: ',',
@@ -214,7 +216,7 @@
           'http://example.com',
           'Simple, Short',
           '00:00:20',
-          102045.0,
+          101045.0,
           false,
           15,
           (() => {
@@ -318,7 +320,7 @@
           'http://example.com',
           'Simple, Short',
           '00:01:15',
-          43.2,
+          45.2,
           true,
           73.2,
           (() => {
@@ -351,7 +353,7 @@
           'http://example.com',
           'Simple, Short',
           '00:00:20',
-          102045.0,
+          103045.0,
           false,
           15,
           (() => {
@@ -384,7 +386,7 @@
           'http://example.com',
           'Simple, Short',
           '00:01:15',
-          43.2,
+          47.2,
           true,
           73.2,
           (() => {
@@ -417,7 +419,7 @@
           'http://example.com',
           'Simple, Short',
           '00:00:20',
-          102045.0,
+          105045.0,
           false,
           15,
           (() => {
@@ -450,7 +452,7 @@
           'http://example.com',
           'Simple, Short',
           '00:01:15',
-          43.2,
+          48.2,
           true,
           73.2,
           (() => {
@@ -483,7 +485,7 @@
           'http://example.com',
           'Simple, Short',
           '00:00:20',
-          102045.0,
+          109045.0,
           false,
           15,
           (() => {
@@ -516,7 +518,7 @@
           'http://example.com',
           'Simple, Short',
           '00:01:15',
-          43.2,
+          40.2,
           true,
           73.2,
           (() => {
@@ -549,7 +551,7 @@
           'http://example.com',
           'Simple, Short',
           '00:00:20',
-          102045.0,
+          108045.0,
           false,
           15,
           (() => {

packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx

@@ -42,7 +42,7 @@ import ScaleDataGrid from './ScaleDataGrid.vue';
       },
       description: `(optional) Title for sortable columns`,
       control: { type: null },
-    },    
+    },
     height: {
       table: {
         type: { summary: 'string' },
@@ -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 -->