feat(sorting): add support for multi-columns number indicator & tristate

ghiscoding · Apr 7, 2018 · ada47cd · ada47cd
1 parent f278c73
commit ada47cd
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 12 deletions.
diff --git a/aurelia-slickgrid/package.json b/aurelia-slickgrid/package.json
@@ -39,7 +39,7 @@
     "moment": "^2.19.1",
     "moment-mini": "^2.18.1",
     "nps": "^5.7.1",
-    "slickgrid": "^2.3.15",
+    "slickgrid": "^2.3.17",
     "text-encoding-utf-8": "^1.0.2"
   },
   "peerDependencies": {},

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/global-grid-options.ts b/aurelia-slickgrid/src/aurelia-slickgrid/global-grid-options.ts
@@ -68,6 +68,9 @@ export const GlobalGridOptions: GridOption = {
   },
   headerRowHeight: 35,
   multiColumnSort: true,
+  numberedMultiColumnSort: true,
+  tristateMultiColumnSort: false,
+  sortColNumberInSeparateSpan: true,
   pagination: {
     pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100],
     pageSize: 25,

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/models/gridOption.interface.ts b/aurelia-slickgrid/src/aurelia-slickgrid/models/gridOption.interface.ts
@@ -163,6 +163,9 @@ export interface GridOption {
   /** Do we want to enable multi-column sorting? */
   multiColumnSort?: boolean;
 
+  /** Defaults to true, which will display numbers indicating column sort precedence are displayed in the columns when multiple columns selected */
+  numberedMultiColumnSort?: boolean;
+
   /** DEPRECATED, Please use "backendServiceApi" instead */
   onBackendEventApi?: BackendEventChanged;
 
@@ -193,6 +196,12 @@ export interface GridOption {
   /** Do we want to show top panel row? */
   showTopPanel?: boolean;
 
+  /** Defaults to true, which leads to render a separate span for the number and styles it with css class <i>slick-sort-indicator-numbered</i> */
+  sortColNumberInSeparateSpan?: boolean;
+
   /** What is the top panel height in pixels (only type the number) */
   topPanelHeight?: number;
+
+  /** Defaults to false, when set to True will lead to multiple columns sorting without the need to hold or do shift-click to execute a multiple sort. */
+  tristateMultiColumnSort?: boolean;
 }
diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/styles/_variables.scss b/aurelia-slickgrid/src/aurelia-slickgrid/styles/_variables.scss
@@ -80,11 +80,6 @@ $icon-group-font-weight:                bold !default;
 $icon-group-margin-right:               2px !default;
 $icon-group-height:                     20px !default;
 $icon-group-width:                      14px !default;
-$icon-sort-asc:                         "\f0d8" !default;
-$icon-sort-desc:                        "\f0d7" !default;
-$icon-sort-color:                       rgb(76, 128, 190) !default;
-$icon-sort-position-right:              10px !default;
-$icon-sort-position-top:                ((15px * $header-row-count) - 15px) !default;
 $table-background:                      transparent !default;
 $container-border:                      0px solid $border-color !default;
 $link-color:        				            #08c !default;
@@ -93,6 +88,18 @@ $gray-dark:              			          #333 !default;
 $text-color:             			          $gray-dark !default;
 $navbar-default-link-hover-color:	      $gray-dark !default;
 
+/* Sorting */
+$icon-sort-asc:                         "\f0d8" !default;
+$icon-sort-desc:                        "\f0d7" !default;
+$icon-sort-color:                       rgb(76, 128, 190) !default;
+$icon-sort-position-right:              10px !default;
+$icon-sort-position-top:                ((15px * $header-row-count) - 15px) !default;
+$sort-indicator-number-font-size:       10px !default;
+$sort-indicator-number-width:           8px !default;
+$sort-indicator-number-left:            auto !default;
+$sort-indicator-number-right:           0px !default;
+$sort-indicator-number-top:             27px !default;
+
 /* Grouping Totals Formatter */
 $group-totals-formatter-color:          gray !default;
 $group-totals-formatter-bgcolor:        #fff !default;

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-bootstrap.scss b/aurelia-slickgrid/src/aurelia-slickgrid/styles/slick-bootstrap.scss
@@ -276,6 +276,9 @@
       }
 
       .slick-sort-indicator {
+        background: none;
+        font-family: $icon-font-family;
+        font-size: $icon-font-size;
         position: absolute;
         display: inline-block;
         color: $icon-sort-color;
@@ -285,11 +288,16 @@
         right: $icon-sort-position-right;
         top: $icon-sort-position-top;
       }
-
-      [class*="slick-sort-"] {
-        background: none;
-        font-family: $icon-font-family;
-        font-size: $icon-font-size;
+      .slick-sort-indicator-numbered {
+        font-family: $font-family;
+        font-size: $sort-indicator-number-font-size;
+        position: absolute;
+        display: inline-block;
+        color: $icon-sort-color;
+        width: $sort-indicator-number-width;
+        left: $sort-indicator-number-left;
+        right: $sort-indicator-number-right;
+        top: $sort-indicator-number-top;
       }
       .slick-sort-indicator-asc {
         &:before {

diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
     "jquery-ui-dist": "^1.12.1",
     "moment": "^2.18.1",
     "moment-mini": "^2.18.1",
-    "slickgrid": "^2.3.15",
+    "slickgrid": "^2.3.17",
     "text-encoding-utf-8": "^1.0.2"
   },
   "devDependencies": {