@datarailsshared/dr_renderer 1.2.356 → 1.2.358

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.2.356",
+  "version": "1.2.358",
   "description": "DataRails charts and tables renderer",
   "keywords": [
     "datarails",

package/src/dr_pivottable.js

@@ -12,6 +12,10 @@ let initDRPivotTable = function($, window, document) {
       document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.use_new_ux;
     // const numberOfRows = 500; // change to activate the handsontable when num of rows bigger then this.
 
+    const isFlatKeyInPivotKeys = function(keys, flatKey) {
+        return keys.some(key => key.join(delim) === flatKey);
+    };
+
     DRPivotData = (function(superClass) {
         extend(DRPivotData, superClass);
 
@@ -199,10 +203,10 @@ let initDRPivotTable = function($, window, document) {
                 let flatColKey = colKey.join(delim);
 
                 if (this.keysLength === rowKey.length + colKey.length) {
-                    if (!this.rowKeys.some(rKey => rKey.join(delim) === flatRowKey)) {
+                    if (!this.isKeysSortingDoneOnBackendSide && !isFlatKeyInPivotKeys(this.rowKeys, flatRowKey)) {
                         this.rowKeys.push(rowKey);
                     }
-                    if (!this.colKeys.some(cKey => cKey.join(delim) === flatColKey)) {
+                    if (!this.isKeysSortingDoneOnBackendSide && !isFlatKeyInPivotKeys(this.colKeys, flatColKey)) {
                         this.colKeys.push(colKey);
                     }
                 }
@@ -234,7 +238,6 @@ let initDRPivotTable = function($, window, document) {
                         insight: insight,
                     });
                 }
-
                 return;
             }
 

package/src/highcharts_renderer.js

@@ -21,6 +21,9 @@ const CHART_COLORS = {
     LABEL: '#cfd7dd',
     LABEL_SECOND: '#85889c',
     DRILL_UP_FILL: '#eef3f6',
+    DRILL_BUTTON_COLOR_FILL: 'white',
+    DRILL_BUTTON_COLOR: '#6D6E6F',
+    DRILL_BUTTON_COLOR_HOVER: '#333333',
     PLOT_BORDER: '#606063',
     MINOR_GRID_LINE: '#505053',
     TICK_COLOR: '#666',
@@ -61,6 +64,7 @@ const CHART_TYPES = {
 
 const HIGHCHARTS_CONSTANTS = {
     delimer: ' , ',
+    DRILL_BUTTON_FONT_SIZE: '14px',
     MAX_ROWS_FOR_AUTO_REFRESH: 100000,
     MAX_ROWS_FOR_SHOW_RESULTS: 10000,
     DR_OTHERS_KEY: 'DR_Others',
@@ -146,6 +150,7 @@ const FEATURES = {
     FORMAT_DATES_AS_OTHER_AXIS_TYPES: 'format_dates_as_other_axis_types',
     MULTIPLE_DIMENSION_TAGS: 'multiple_dimension_tags',
     USE_NEW_SCENARIO_TAG: 'use_new_scenario_tag',
+    ENABLE_SERVER_WIDGET_DATA_SORTING: 'enable_server_widget_data_sorting',
 }
 
 const TICKS_COUNT = 5;
@@ -201,6 +206,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         highchartsRenderer.useTotalsCalculation = highchartsRenderer.hasFeature(FEATURES.ENABLE_SERVER_TOTALS_CALCULATION);
         disableAnimation = document.ReportHippo.user.organization && document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.disable_animation
         highchartsRenderer.enabledNewWidgetValueFormatting = highchartsRenderer.hasFeature(FEATURES.ENABLE_NEW_WIDGET_VALUE_FORMATTING);
+        highchartsRenderer.isSortingOnBackendEnabled = highchartsRenderer.hasFeature(FEATURES.ENABLE_SERVER_WIDGET_DATA_SORTING);
     }
 
     // fix issue of use tootip.stickOnContact with tooltip.outside , source: https://github.com/highcharts/highcharts/pull/15960
@@ -1036,8 +1042,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     chartOptions.yAxis && chartOptions.yAxis.title && (chartOptions.yAxis.title.text || chartOptions.yAxis.title.autoylabel) ? -60 : -40;
                 const y = isPieChart ? 27 :
                     chartOptions.xAxis && chartOptions.xAxis.title && (chartOptions.xAxis.title.text || chartOptions.xAxis.title.autoxlabel) ? 65 : 43;
+                chartOptions.chart.spacingBottom = 30;
                 chartOptions.drilldown.breadcrumbs = {
-                    formatter: () => '< Back',
+                    formatter: () => 'Back',
                     showFullPath: false,
                     position: {
                         align: 'left',
@@ -1046,23 +1053,21 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         y: y,
                     },
                     floating: true,
+                    position:  { align: 'left', x: 12, y: 6, verticalAlign: 'bottom' },
+                    relativeTo: 'spacingBox',
                     buttonTheme: {
-                        fill: 'white',
-                        color: CHART_COLORS.LABEL_SECOND,
-                        'stroke-width': 1,
-                        stroke: CHART_COLORS.LABEL_SECOND,
-                        r: 3,
-                        padding: 3,
+                        fill: CHART_COLORS.DRILL_BUTTON_COLOR_FILL,
+                        style: {
+                            fontSize: HIGHCHARTS_CONSTANTS.DRILL_BUTTON_FONT_SIZE,
+                            color: CHART_COLORS.DRILL_BUTTON_COLOR,
+                        },
                         states: {
                             hover: {
-                                fill: CHART_COLORS.DRILL_UP_FILL,
-                                stroke: CHART_COLORS.LABEL_SECOND,
-                                color: CHART_COLORS.LABEL_SECOND
-                            },
-                            select: {
-                                stroke: CHART_COLORS.LABEL_SECOND,
-                                fill: CHART_COLORS.DRILL_UP_FILL,
-                                color: CHART_COLORS.LABEL_SECOND
+                                fill: CHART_COLORS.DRILL_BUTTON_COLOR_FILL,
+                                style: {
+                                    fontSize: HIGHCHARTS_CONSTANTS.DRILL_BUTTON_FONT_SIZE,
+                                    color: CHART_COLORS.DRILL_BUTTON_COLOR_HOVER,
+                                }
                             }
                         }
                     },
@@ -1538,6 +1543,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         const chart_series = [];
         const row_n_keys = pivotData.getRowKeys();
         const col_n_keys = pivotData.getColKeys();
+        const rows_by_cols = pivotData.rowKeysByCols;
 
         let resultObject = {
             data: [],
@@ -1567,7 +1573,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             });
 
             if (col_index !== col_n_keys.length - 1) {
-                lodash.forEach(row_n_keys, function (row_n_value) {
+
+                const rowKeys = rows_by_cols ? rows_by_cols[col_index] : row_n_keys;
+                lodash.forEach(rowKeys, function (row_n_value) {
                     const agg = pivotData.getAggregator(row_n_value, col_n_value);
                     let val = agg.value();
 
@@ -4795,20 +4803,22 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     opts.rendererOptions.onlyOptions = true;
                 }
 
-                const sortByValueSettings = lodash.filter(
-                    lodash.get(widget, 'options.sortingFields', []),
-                    sortingField => lodash.includes(['field_values', 'variance'], lodash.get(sortingField, 'sorting.sort_by'))
-                );
-
-                if (sortByValueSettings.length) {
-                    pivotData.sortByValueAttrs = lodash.map(sortByValueSettings, fieldSorting => fieldSorting.name);
-                    let new_sorting_function = highchartsRenderer.generateSortingFunctionByValues(sortByValueSettings, pivotData, opts, widget);
-                    opts.sorters = new_sorting_function;
-                    optsFiltered.sorters = new_sorting_function;
-                    pivotData.sorters = new_sorting_function;
-
-                    if (lodash.isObject(lodash.get(widget, 'pivot'))) {
-                        widget.pivot.sorters = new_sorting_function;
+                if (!highchartsRenderer.isSortingOnBackendEnabled) {
+                    const sortByValueSettings = lodash.filter(
+                        lodash.get(widget, 'options.sortingFields', []),
+                        sortingField => lodash.includes(['field_values', 'variance'], lodash.get(sortingField, 'sorting.sort_by'))
+                    );
+    
+                    if (sortByValueSettings.length) {
+                        pivotData.sortByValueAttrs = lodash.map(sortByValueSettings, fieldSorting => fieldSorting.name);
+                        let new_sorting_function = highchartsRenderer.generateSortingFunctionByValues(sortByValueSettings, pivotData, opts, widget);
+                        opts.sorters = new_sorting_function;
+                        optsFiltered.sorters = new_sorting_function;
+                        pivotData.sorters = new_sorting_function;
+
+                        if (lodash.isObject(lodash.get(widget, 'pivot'))) {
+                            widget.pivot.sorters = new_sorting_function;
+                        }
                     }
                 }
 
@@ -4872,6 +4882,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             rowFormats: highchartsRenderer.getTableFormatInfosForWidgetFields(widget, pivotOptions, widget.rows),
             rendererOptions: widget.options,
             dateValuesDictionary: pivotOptions ? pivotOptions.dateValuesDictionary : null,
+            keysObject: pivotOptions ? pivotOptions.keysObject : null,
         };
 
         if (!subopts.rendererOptions) {
@@ -8774,8 +8785,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.getWidgetDataSorters = function (res, widget, defaultDateFormat) {
-
         const isFormattingDatesAsOtherAxisTypes = highchartsRenderer.isFormattingDatesAsOtherAxisTypes();
+        let sorters;
 
         if ($.pivotUtilities && !$.pivotUtilities.additionalFieldsList) {
             $.pivotUtilities.additionalFieldsList = [
@@ -8784,7 +8795,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             ];
         }
 
-        var datesFields = [];
+        let datesFields = [];
         datesFields = lodash.filter(widget.rows, element => element.type == 'Date');
         datesFields = datesFields.concat(lodash.filter(widget.cols, element => element.type == 'Date'));
 
@@ -8808,8 +8819,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             } //'MMM - yyyy' format
         });
 
-        var data = res;
-
         if (!isFormattingDatesAsOtherAxisTypes) {
             lodash.forEach(datesFields, function (row) {
                 row.val_not_convert = highchartsRenderer.check_values_not_for_convert(widget, row.name);
@@ -8817,7 +8826,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     
         if (datesFields.length > 0) {
-            lodash.forEach(data, function (element) {
+            const invertedDateStringMap = {};
+            lodash.forEach(res, function (element) {
                 for (var i in datesFields) {
                     if (element.hasOwnProperty(datesFields[i].name)) {
                         datesFields[i].values.push(element[datesFields[i].name]);
@@ -8832,133 +8842,154 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                                     widget.pivot.dateValuesDictionary = {}
                                 }
                                 widget.pivot.dateValuesDictionary[dateStringValue] = element[datesFields[i].name];
+                                invertedDateStringMap[element[datesFields[i].name]] = dateStringValue;
                             }
                             element[datesFields[i].name] = dateStringValue;
                         }
                     }
                 }
             });
-        }
 
-        lodash.forEach(datesFields, function (row) {
-            row.values = lodash.uniq(row.values);
+            if (highchartsRenderer.isSortingOnBackendEnabled && !isFormattingDatesAsOtherAxisTypes && lodash.get(widget, 'pivot.keysObject')) {
+                lodash.forEach(['col_keys', 'row_keys'], (keysListName, index) => {
+                    const widgetFields = index ? widget.rows : widget.cols;
+                    const uniqueFormattedKeysList = [];
+                    lodash.forEach(widget.pivot.keysObject[keysListName], subKeysList => {
+                        lodash.forEach(subKeysList, (key, index) => {
+                            if (widgetFields[index].type === 'Date') {
+                                subKeysList[index] = invertedDateStringMap[key] || key;
+                            }
+                        });
+                        if (!lodash.find(uniqueFormattedKeysList, formattedSubKeys => lodash.isEqual(formattedSubKeys, subKeysList))) {
+                            uniqueFormattedKeysList.push(subKeysList);
+                        }
+                    });
+                    widget.pivot.keysObject[keysListName] = uniqueFormattedKeysList;
+                });
+            }
+        }
 
-            const isTimestampDateField = row.type === 'Date' && lodash.some(row.values, value => typeof value ==='number');
-            if (isTimestampDateField) {
-                const nullValueIndex = row.values.indexOf(NULL_VALUE);
-                if (~nullValueIndex) {
-                    row.values.splice(nullValueIndex, 1);
+        if (!highchartsRenderer.isSortingOnBackendEnabled) {
+    
+            lodash.forEach(datesFields, function (row) {
+                row.values = lodash.uniq(row.values);
+    
+                const isTimestampDateField = row.type === 'Date' && lodash.some(row.values, value => typeof value ==='number');
+                if (isTimestampDateField) {
+                    const nullValueIndex = row.values.indexOf(NULL_VALUE);
+                    if (~nullValueIndex) {
+                        row.values.splice(nullValueIndex, 1);
+                    }
+                    row.values = row.values.sort((a, b) => a - b);
+                    if (~nullValueIndex) {
+                        row.values.push(NULL_VALUE);
+                    }
+                } else {
+                    row.values = row.values.sort();
                 }
-                row.values = row.values.sort((a, b) => a - b);
-                if (~nullValueIndex) {
-                    row.values.push(NULL_VALUE);
+    
+                if (row.sorting && row.sorting.type == "largestToSmallest") {
+                    row.values = lodash.reverse(row.values);
                 }
-            } else {
-                row.values = row.values.sort();
-            }
+                delete row.sorting;
 
-            if (row.sorting && row.sorting.type == "largestToSmallest") {
-                row.values = lodash.reverse(row.values);
-            }
-            delete row.sorting;
+                if (!isFormattingDatesAsOtherAxisTypes) {
+                    row.values = lodash.map(row.values, function (val) {
+                        return highchartsRenderer.returnRawDataValue(row.type, val, row.format, row.name, row.val_not_convert) + "";
+                    });
+                }
+            });
 
-            if (!isFormattingDatesAsOtherAxisTypes) {
-                row.values = lodash.map(row.values, function (val) {
-                    return highchartsRenderer.returnRawDataValue(row.type, val, row.format, row.name, row.val_not_convert) + "";
+            /* date string */
+            var rowsAndCols = [];
+            rowsAndCols = widget.rows.concat(widget.cols);
+
+            if (widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN) {
+
+                // if it is breakdown widget - redefine sorting according to breakdown_options
+                // TODO: remove this when BE sort will be implemented (FE subtickets for story DR-18469)
+                const isTwoColumnComparisonWidget = lodash.get(widget, 'options.breakdown_options.values.totals', []).length === 2;
+                lodash.forEach(rowsAndCols, function (field) {
+                    const waterfallFieldType = field.id === widget.cols[0].id ? 'totals' : 'breakdown';
+                    if (waterfallFieldType !== 'totals' || isTwoColumnComparisonWidget) {
+                        field.sorting = {
+                            type: 'CustomOrder',
+                            values: lodash.map(
+                                widget.options.breakdown_options.values[waterfallFieldType],
+                                value => value.key
+                            ),
+                        };
+                    } else {
+                        field.sorting = null;
+                    }
+                });
+            } else if (isCustomSorting) {
+                lodash.forEach(rowsAndCols, function (field) {
+                    const fieldToSort = lodash.find(
+                        widget.options.sortingFields, element => element.id === field.id && lodash.get(element, 'sorting.sort_by') === 'field_items'
+                    );
+                    field.sorting = fieldToSort ? fieldToSort.sorting : field.sorting;
                 });
             }
-        });
 
-        /* date string */
-        var rowsAndCols = [];
-        rowsAndCols = widget.rows.concat(widget.cols);
-
-        if (widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN) {
-
-            // if it is breakdown widget - redefine sorting according to breakdown_options
-            // TODO: remove this when BE sort will be implemented
-            const isTwoColumnComparisonWidget = lodash.get(widget, 'options.breakdown_options.values.totals', []).length === 2;
-            lodash.forEach(rowsAndCols, function (field) {
-                const waterfallFieldType = field.id === widget.cols[0].id ? 'totals' : 'breakdown';
-                if (waterfallFieldType !== 'totals' || isTwoColumnComparisonWidget) {
-                    field.sorting = {
-                        type: 'CustomOrder',
-                        values: lodash.map(
-                            widget.options.breakdown_options.values[waterfallFieldType],
-                            value => value.key
-                        ),
-                    };
-                } else {
-                    field.sorting = null;
-                }
-            });
-        } else if (isCustomSorting) {
             lodash.forEach(rowsAndCols, function (field) {
-                const fieldToSort = lodash.find(
-                    widget.options.sortingFields, element => element.id === field.id && lodash.get(element, 'sorting.sort_by') === 'field_items'
-                );
-                field.sorting = fieldToSort ? fieldToSort.sorting : field.sorting;
-            });
-        }
-
-        lodash.forEach(rowsAndCols, function (field) {
-            if (field.sorting && (field.sorting.type == "DateString" || field.sorting.type == "largestToSmallest")) {
-                var find_field = lodash.find(datesFields, {name: field.name});
-                if (find_field) {
-                    if (find_field.type != 'Date')
-                        find_field.sorting = field.sorting;
-                } else {
+                if (field.sorting && (field.sorting.type == "DateString" || field.sorting.type == "largestToSmallest")) {
+                    var find_field = lodash.find(datesFields, {name: field.name});
+                    if (find_field) {
+                        if (find_field.type != 'Date')
+                            find_field.sorting = field.sorting;
+                    } else {
+                        datesFields.push({
+                            "format": field.format,
+                            "name": field.name,
+                            "type": field.type,
+                            "values": [],
+                            "sorting": field.sorting,
+                        });
+                    }
+                } else if (field.sorting && field.sorting.type == "CustomOrder" && field.sorting.values) {
                     datesFields.push({
                         "format": field.format,
                         "name": field.name,
                         "type": field.type,
-                        "values": [],
-                        "sorting": field.sorting,
+                        "values": field.sorting.values
                     });
                 }
-            } else if (field.sorting && field.sorting.type == "CustomOrder" && field.sorting.values) {
-                datesFields.push({
-                    "format": field.format,
-                    "name": field.name,
-                    "type": field.type,
-                    "values": field.sorting.values
-                });
-            }
-        });
-
-        if (widget.vals && widget.vals.length > 1) {
-            datesFields.push({name: "DR_Values", values: lodash.map(widget.vals, 'name')});
-        }
-
-        /****** END *******/
+            });
 
-        // TODO: Remove. sortingValues looks like lagacy which is not in use neither in webclient nor in renderer
-        if (widget.options && widget.options.sortingValues) {
-            var field = lodash.find(datesFields, {name: widget.options.sortingValues.field});
-            if (field) {
-                field.values = widget.options.sortingValues.values;
-                field.sorting = null;
-            } else {
-                datesFields.push({
-                    name: widget.options.sortingValues.field,
-                    values: widget.options.sortingValues.values
-                });
+            if (widget.vals && widget.vals.length > 1) {
+                datesFields.push({name: "DR_Values", values: lodash.map(widget.vals, 'name')});
             }
-        }
+    
+            /****** END *******/
 
-        let sorters = function (attr) {
-            var field = lodash.find(datesFields, {name: attr});
-            if (field)
-                if (field.sorting && field.sorting.type == "DateString") {
-                    return $.pivotUtilities.sortDateStrings(field.sorting.month_order);
-                } else if (field.sorting && field.sorting.type == "largestToSmallest") {
-                    if (field.sorting.is_absolute)
-                        return $.pivotUtilities.largeToSmallSortByAbsolute;
-                    return $.pivotUtilities.largeToSmallSort;
+            // TODO: Remove. sortingValues looks like lagacy which is not in use neither in webclient nor in renderer
+            if (widget.options && widget.options.sortingValues) {
+                var field = lodash.find(datesFields, {name: widget.options.sortingValues.field});
+                if (field) {
+                    field.values = widget.options.sortingValues.values;
+                    field.sorting = null;
                 } else {
-                    return $.pivotUtilities.sortAs(field.values);
+                    datesFields.push({
+                        name: widget.options.sortingValues.field,
+                        values: widget.options.sortingValues.values
+                    });
                 }
-        };
+            }
+            sorters = function (attr) {
+                var field = lodash.find(datesFields, {name: attr});
+                if (field)
+                    if (field.sorting && field.sorting.type == "DateString") {
+                        return $.pivotUtilities.sortDateStrings(field.sorting.month_order);
+                    } else if (field.sorting && field.sorting.type == "largestToSmallest") {
+                        if (field.sorting.is_absolute)
+                            return $.pivotUtilities.largeToSmallSortByAbsolute;
+                        return $.pivotUtilities.largeToSmallSort;
+                    } else {
+                        return $.pivotUtilities.sortAs(field.values);
+                    }
+            };
+        }
 
         return sorters;
     };
@@ -8978,6 +9009,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     //highchartsRenderer.getGraphOptions(scope.data, override_values, res, scope.dataModel.templatesWithOutData, scope.openDrillDownList, drillDownFunction)
     highchartsRenderer.getGraphOptions = function (widget_obj, override_values, row_data, templates, openDrillDownListFunction, drillDownFunction) {
+
+        let keysObject;
+        if (highchartsRenderer.isSortingOnBackendEnabled) {
+            keysObject = row_data.pop();
+        }
+
         let res = highchartsRenderer.updateSelectedOverrideValues(widget_obj, override_values, row_data);
         res = highchartsRenderer.convertUniqueDateValues(widget_obj, templates, res);
 
@@ -8991,6 +9028,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         let pivot = {};
 
+        if (highchartsRenderer.isSortingOnBackendEnabled) {
+            pivot.keysObject = keysObject;
+        }
+
         let templateNoData = lodash.find(templates, {id: widget_obj.template_id});
         if (templateNoData) {
 
@@ -9031,6 +9072,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             subopts.onlyOptions = true;
         }
 
+        subopts.keysObject = keysObject;
+
         let hc_options = highchartsRenderer.rhPivotView(res, subopts, is_table, widget_obj);
 
         return hc_options;

package/src/pivottable.js

@@ -686,8 +686,17 @@ let initPivotTable = function($, window, document) {
             });
             this.tree = {};
             this.insights = [];
-            this.rowKeys = [];
-            this.colKeys = [];
+
+            this.isKeysSortingDoneOnBackendSide = opts.keysObject && typeof opts.keysObject === 'object';
+            if (this.isKeysSortingDoneOnBackendSide) {
+                this.rowKeys = opts.keysObject.row_keys;
+                this.colKeys = opts.keysObject.col_keys;
+                // TODO: add also for breakdown sort object when BE story is ready.
+            } else {
+                this.rowKeys = [];
+                this.colKeys = [];
+            }
+
             this.rowTotals = {};
             this.colTotals = {};
             this.allTotal = this.aggregator(this, [], []);
@@ -859,12 +868,16 @@ let initPivotTable = function($, window, document) {
         };
 
         PivotData.prototype.getColKeys = function() {
-            this.sortKeys();
+            if (!this.isKeysSortingDoneOnBackendSide) {
+                this.sortKeys();
+            }
             return this.colKeys;
         };
 
         PivotData.prototype.getRowKeys = function() {
-            this.sortKeys();
+            if (!this.isKeysSortingDoneOnBackendSide) {
+                this.sortKeys();
+            }
             return this.rowKeys;
         };