@revolist/revogrid 3.0.98 → 3.1.1

package/dist/collection/plugins/filter/filter.plugin.js

@@ -5,9 +5,11 @@ import { filterEntities, filterNames, filterTypes } from './filter.service';
 export const FILTER_TRIMMED_TYPE = 'filter';
 export default class FilterPlugin extends BasePlugin {
   constructor(revogrid, uiid, config) {
+    var _a;
     super(revogrid);
     this.revogrid = revogrid;
     this.filterCollection = {};
+    this.multiFilterItems = {};
     this.possibleFilters = Object.assign({}, filterTypes);
     this.possibleFilterNames = Object.assign({}, filterNames);
     this.possibleFilterEntities = Object.assign({}, filterEntities);
@@ -15,21 +17,38 @@ export default class FilterPlugin extends BasePlugin {
       this.initConfig(config);
     }
     const headerclick = (e) => this.headerclick(e);
-    const aftersourceset = () => {
-      if (Object.keys(this.filterCollection).length) {
-        this.filterByProps(this.filterCollection);
+    const aftersourceset = async () => {
+      const filterCollectionProps = Object.keys(this.filterCollection);
+      if (filterCollectionProps.length > 0) {
+        // handle old way of filtering by reworking FilterCollection to new MultiFilterItem
+        filterCollectionProps.forEach((prop, index) => {
+          if (!this.multiFilterItems[prop]) {
+            this.multiFilterItems[prop] = [
+              {
+                id: index,
+                type: this.filterCollection[prop].type,
+                value: this.filterCollection[prop].value,
+                relation: 'and',
+              },
+            ];
+          }
+        });
       }
+      await this.runFiltering();
     };
     this.addEventListener('headerclick', headerclick);
     this.addEventListener('aftersourceset', aftersourceset);
     this.revogrid.registerVNode([
-      h("revogr-filter-panel", { uuid: `filter-${uiid}`, filterNames: this.possibleFilterNames, filterEntities: this.possibleFilterEntities, onFilterChange: e => this.onFilterChange(e.detail), ref: e => (this.pop = e) }),
+      h("revogr-filter-panel", { uuid: `filter-${uiid}`, filterItems: this.multiFilterItems, filterNames: this.possibleFilterNames, filterEntities: this.possibleFilterEntities, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), ref: e => (this.pop = e) }),
     ]);
   }
   initConfig(config) {
     if (config.collection) {
       this.filterCollection = Object.assign({}, config.collection);
     }
+    if (config.multiFilterItems) {
+      this.multiFilterItems = Object.assign({}, config.multiFilterItems);
+    }
     if (config.customFilters) {
       for (let cType in config.customFilters) {
         const cFilter = config.customFilters[cType];
@@ -59,6 +78,15 @@ export default class FilterPlugin extends BasePlugin {
         this.possibleFilters = filters;
       }
     }
+    if (config.localization) {
+      if (config.localization.filterNames) {
+        Object.entries(config.localization.filterNames).forEach(([k, v]) => {
+          if (this.possibleFilterNames[k] != void 0) {
+            this.possibleFilterNames[k] = v;
+          }
+        });
+      }
+    }
   }
   async headerclick(e) {
     var _a;
@@ -104,43 +132,18 @@ export default class FilterPlugin extends BasePlugin {
     return !!(typeof type === 'string' && this.possibleFilters[type]);
   }
   // called on internal component change
-  async onFilterChange(filterItem) {
-    this.filterByProps({ [filterItem.prop]: filterItem });
-  }
-  /**
-   * Apply filters collection to extend existing one or override
-   * @method
-   * @param conditions - list of filters to apply
-   */
-  async filterByProps(conditions, override = false) {
-    if (override) {
-      this.filterCollection = {};
-    }
-    for (const prop in conditions) {
-      const { type, value } = conditions[prop];
-      if (type === 'none') {
-        delete this.filterCollection[prop];
-      }
-      else {
-        const filter = this.possibleFilterEntities[type];
-        this.filterCollection[prop] = {
-          filter,
-          value,
-          type,
-        };
-      }
-    }
-    await this.runFiltering();
+  async onFilterChange(filterItems) {
+    this.multiFilterItems = filterItems;
+    this.runFiltering();
   }
   /**
    * Triggers grid filtering
    */
-  async doFiltering(collection, items, columns) {
+  async doFiltering(collection, items, columns, filterItems) {
     const columnsToUpdate = [];
-    // todo improvement: loop through collection of props
     columns.forEach(rgCol => {
       const column = Object.assign({}, rgCol);
-      const hasFilter = collection[column.prop];
+      const hasFilter = filterItems[column.prop];
       if (column[FILTER_PROP] && !hasFilter) {
         delete column[FILTER_PROP];
         columnsToUpdate.push(column);
@@ -150,9 +153,9 @@ export default class FilterPlugin extends BasePlugin {
         column[FILTER_PROP] = true;
       }
     });
-    const itemsToFilter = this.getRowFilter(items, collection);
+    const itemsToFilter = this.getRowFilter(items, filterItems);
     // check is filter event prevented
-    const { defaultPrevented, detail } = this.emit('beforefiltertrimmed', { collection, itemsToFilter, source: items });
+    const { defaultPrevented, detail } = this.emit('beforefiltertrimmed', { collection, itemsToFilter, source: items, filterItems });
     if (defaultPrevented) {
       return;
     }
@@ -161,39 +164,92 @@ export default class FilterPlugin extends BasePlugin {
     if (isAddedEvent.defaultPrevented) {
       return;
     }
+    // applies the hasFilter to the columns to show filter icon
     await this.revogrid.updateColumns(columnsToUpdate);
     this.emit('afterFilterApply');
   }
   async clearFiltering() {
-    this.filterCollection = {};
+    this.multiFilterItems = {};
     await this.runFiltering();
   }
   async runFiltering() {
+    const collection = {};
+    // handle old filterCollection to return the first filter only (if any) from multiFilterItems
+    const filterProps = Object.keys(this.multiFilterItems);
+    for (const prop of filterProps) {
+      // check if we have any filter for a column
+      if (this.multiFilterItems[prop].length > 0) {
+        const firstFilterItem = this.multiFilterItems[prop][0];
+        collection[prop] = {
+          filter: filterEntities[firstFilterItem.type],
+          type: firstFilterItem.type,
+          value: firstFilterItem.value,
+        };
+      }
+    }
+    this.filterCollection = collection;
     const { source, columns } = await this.getData();
-    const { defaultPrevented, detail } = this.emit('beforefilterapply', { collection: this.filterCollection, source, columns });
+    const { defaultPrevented, detail } = this.emit('beforefilterapply', { collection: this.filterCollection, source, columns, filterItems: this.multiFilterItems });
     if (defaultPrevented) {
       return;
     }
-    this.doFiltering(detail.collection, detail.source, detail.columns);
+    this.doFiltering(detail.collection, detail.source, detail.columns, detail.filterItems);
   }
   async getData() {
     const source = await this.revogrid.getSource();
     const columns = await this.revogrid.getColumns();
     return {
       source,
-      columns
+      columns,
     };
   }
-  getRowFilter(rows, collection) {
+  getRowFilter(rows, filterItems) {
+    const propKeys = Object.keys(filterItems);
     const trimmed = {};
+    let propFilterSatisfiedCount = 0;
+    let lastFilterResults = [];
+    // each rows
     rows.forEach((model, rowIndex) => {
-      for (const prop in collection) {
-        const filterItem = collection[prop];
-        const filter = filterItem.filter;
-        if (!filter(model[prop], filterItem.value)) {
+      // working on all props
+      for (const prop of propKeys) {
+        const propFilters = filterItems[prop];
+        propFilterSatisfiedCount = 0;
+        lastFilterResults = [];
+        // testing each filter for a prop
+        for (const [filterIndex, filterData] of propFilters.entries()) {
+          // the filter LogicFunction based on the type
+          const filter = filterEntities[filterData.type];
+          // THE MAGIC OF FILTERING IS HERE
+          if (filterData.relation === 'or') {
+            lastFilterResults = [];
+            if (filter(model[prop], filterData.value)) {
+              continue;
+            }
+            propFilterSatisfiedCount++;
+          }
+          else {
+            // 'and' relation will need to know the next filter
+            // so we save this current filter to include it in the next filter
+            lastFilterResults.push(!filter(model[prop], filterData.value));
+            // check first if we have a filter on the next index to pair it with this current filter
+            const nextFilterData = propFilters[filterIndex + 1];
+            // stop the sequence if there is no next filter or if the next filter is not an 'and' relation
+            if (!nextFilterData || nextFilterData.relation !== 'and') {
+              // let's just continue since for sure propFilterSatisfiedCount cannot be satisfied
+              if (lastFilterResults.indexOf(true) === -1) {
+                lastFilterResults = [];
+                continue;
+              }
+              // we need to add all of the lastFilterResults since we need to satisfy all
+              propFilterSatisfiedCount += lastFilterResults.length;
+              lastFilterResults = [];
+            }
+          }
+        } // end of propFilters forEach
+        // add to the list of removed/trimmed rows of filter condition is satisfied
+        if (propFilterSatisfiedCount === propFilters.length)
           trimmed[rowIndex] = true;
-        }
-      }
+      } // end of for-of propKeys
     });
     return trimmed;
   }

package/dist/collection/plugins/filter/filter.pop.js

@@ -1,13 +1,30 @@
 import { Component, h, Host, Listen, Prop, State, Event, Method } from '@stencil/core';
-import { isFilterBtn } from './filter.button';
+import { AndOrButton, isFilterBtn, TrashButton } from './filter.button';
 import { RevoButton } from '../../components/button/button';
 import '../../utils/closestPolifill';
+import debounce from 'lodash/debounce';
 const defaultType = 'none';
+const FILTER_LIST_CLASS = 'multi-filter-list';
+const FILTER_LIST_CLASS_ACTION = 'multi-filter-list-action';
 export class FilterPanel {
   constructor() {
+    this.filterCaptionsInternal = {
+      title: 'Filter by condition',
+      save: 'Save',
+      reset: 'Reset',
+      cancel: 'Close',
+    };
+    this.isFilterIdSet = false;
+    this.filterId = 0;
+    this.currentFilterId = -1;
+    this.currentFilterType = defaultType;
+    this.filterItems = {};
     this.filterTypes = {};
     this.filterNames = {};
     this.filterEntities = {};
+    this.debouncedApplyFilter = debounce(() => {
+      this.filterChange.emit(this.filterItems);
+    }, 400);
   }
   onMouseDown(e) {
     if (this.changes && !e.defaultPrevented) {
@@ -26,26 +43,63 @@ export class FilterPanel {
   async getChanges() {
     return this.changes;
   }
-  renderConditions(type) {
+  componentWillRender() {
+    if (!this.isFilterIdSet) {
+      this.isFilterIdSet = true;
+      const filterItems = Object.keys(this.filterItems);
+      for (const prop of filterItems) {
+        // we set the proper filterId so there won't be any conflict when removing filters
+        this.filterId += this.filterItems[prop].length;
+      }
+    }
+  }
+  renderSelectOptions(type, isDefaultTypeRemoved = false) {
+    var _a;
     const options = [];
+    const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
+    if (!isDefaultTypeRemoved) {
+      options.push(h("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0 ? 'Add more condition...' : this.filterNames[defaultType]));
+    }
     for (let gIndex in this.filterTypes) {
-      options.push(h("option", { value: defaultType }, this.filterNames[defaultType]));
       options.push(...this.filterTypes[gIndex].map(k => (h("option", { value: k, selected: type === k }, this.filterNames[k]))));
       options.push(h("option", { disabled: true }));
     }
     return options;
   }
-  renderExtra(extra, value) {
-    this.extraElement = undefined;
-    switch (extra) {
-      case 'input':
-        return (h("input", { type: "text", value: value, onInput: (e) => this.onInput(e), onKeyDown: e => this.onKeyDown(e), ref: e => (this.extraElement = e) }));
-      default:
-        return '';
-    }
+  renderExtra(prop, index) {
+    const currentFilter = this.filterItems[prop];
+    if (!currentFilter)
+      return '';
+    if (this.filterEntities[currentFilter[index].type].extra !== 'input')
+      return '';
+    return (h("input", { id: `filter-input-${currentFilter[index].id}`, placeholder: "Enter value...", type: "text", value: currentFilter[index].value, onInput: this.onUserInput.bind(this, index, prop), onKeyDown: e => this.onKeyDown(e) }));
+  }
+  getFilterItemsList() {
+    var _a;
+    const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
+    if (!(prop || prop === 0))
+      return '';
+    const propFilters = this.filterItems[prop] || [];
+    return (h("div", { key: this.filterId },
+      propFilters.map((d, index) => {
+        let andOrButton;
+        // hide toggle button if there is only one filter and the last one
+        if (index !== this.filterItems[prop].length - 1) {
+          andOrButton = (h("div", { onClick: () => this.toggleFilterAndOr(d.id) },
+            h(AndOrButton, { isAnd: d.relation === 'and' })));
+        }
+        return (h("div", { key: d.id, class: FILTER_LIST_CLASS },
+          h("div", { class: { 'select-input': true } },
+            h("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index) }, this.renderSelectOptions(this.filterItems[prop][index].type, true)),
+            h("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton),
+            h("div", { onClick: () => this.onRemoveFilter(d.id) },
+              h(TrashButton, null))),
+          h("div", null, this.renderExtra(prop, index))));
+      }),
+      propFilters.length > 0 ? h("div", { class: "add-filter-divider" }) : ''));
   }
   render() {
-    if (!this.changes || !this.changes) {
+    if (!this.changes) {
       return h(Host, { style: { display: 'none' } });
     }
     const style = {
@@ -53,29 +107,83 @@ export class FilterPanel {
       left: `${this.changes.x}px`,
       top: `${this.changes.y}px`,
     };
+    const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
     return (h(Host, { style: style },
-      h("label", null, "Filter by condition"),
-      h("select", { class: "select-css", onChange: e => this.onFilterChange(e) }, this.renderConditions(this.changes.type)),
-      h("div", null, this.renderExtra(this.filterEntities[this.changes.type].extra, this.changes.value)),
-      h(RevoButton, { class: { green: true }, onClick: () => this.onSave() }, "Save"),
-      h(RevoButton, { class: { light: true }, onClick: () => this.onCancel() }, "Cancel")));
+      h("label", null, capts.title),
+      h("div", { class: "filter-holder" }, this.getFilterItemsList()),
+      h("div", { class: "add-filter" },
+        h("select", { id: "add-filter", class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
+      h("div", { class: "filter-actions" },
+        h(RevoButton, { class: { red: true }, onClick: () => this.onReset() }, capts.reset),
+        h(RevoButton, { class: { light: true }, onClick: () => this.onCancel() }, capts.cancel))));
   }
-  onFilterChange(e) {
-    if (!this.changes) {
-      throw new Error('Changes required per edit');
-    }
+  onFilterTypeChange(e, prop, index) {
+    const el = e.target;
+    const type = el.value;
+    this.filterItems[prop][index].type = type;
+    // this re-renders the input to know if we need extra input
+    this.filterId++;
+    // adding setTimeout will wait for the next tick DOM update then focus on input
+    setTimeout(() => {
+      const input = document.getElementById('filter-input-' + this.filterItems[prop][index].id);
+      if (input)
+        input.focus();
+    }, 0);
+    this.debouncedApplyFilter();
+  }
+  onAddNewFilter(e) {
     const el = e.target;
     const type = el.value;
-    this.changes = Object.assign(Object.assign({}, this.changes), { type });
+    this.currentFilterType = type;
+    this.addNewFilterToProp();
+    // reset value after adding new filter
+    const select = document.getElementById('add-filter');
+    if (select) {
+      select.value = defaultType;
+      this.currentFilterType = defaultType;
+    }
+    this.debouncedApplyFilter();
   }
-  onInput(e) {
-    this.changes.value = e.target.value;
-    // prevent grid focus and other unexpected events
-    e.preventDefault();
+  addNewFilterToProp() {
+    var _a;
+    const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
+    if (!(prop || prop === 0))
+      return;
+    if (!this.filterItems[prop]) {
+      this.filterItems[prop] = [];
+    }
+    if (this.currentFilterType === 'none')
+      return;
+    this.filterId++;
+    this.currentFilterId = this.filterId;
+    this.filterItems[prop].push({
+      id: this.currentFilterId,
+      type: this.currentFilterType,
+      value: '',
+      relation: 'and',
+    });
+    // adding setTimeout will wait for the next tick DOM update then focus on input
+    setTimeout(() => {
+      const input = document.getElementById('filter-input-' + this.currentFilterId);
+      if (input)
+        input.focus();
+    }, 0);
+  }
+  onUserInput(index, prop, event) {
+    // update the value of the filter item
+    this.filterItems[prop][index].value = event.target.value;
+    this.debouncedApplyFilter();
   }
   onKeyDown(e) {
     if (e.key.toLowerCase() === 'enter') {
-      this.onSave();
+      const select = document.getElementById('add-filter');
+      if (select) {
+        select.value = defaultType;
+        this.currentFilterType = defaultType;
+        this.addNewFilterToProp();
+        select.focus();
+      }
+      return;
     }
     // keep event local, don't escalate farther to dom
     e.stopPropagation();
@@ -83,19 +191,56 @@ export class FilterPanel {
   onCancel() {
     this.changes = undefined;
   }
-  onSave() {
-    var _a, _b;
+  onReset() {
+    this.assertChanges();
+    delete this.filterItems[this.changes.prop];
+    // this updates the DOM which is used by getFilterItemsList() key
+    this.filterId++;
+    this.filterChange.emit(this.filterItems);
+  }
+  onRemoveFilter(id) {
+    this.assertChanges();
+    // this is for reactivity issues for getFilterItemsList()
+    this.filterId++;
+    const prop = this.changes.prop;
+    const items = this.filterItems[prop];
+    if (!items)
+      return;
+    const index = items.findIndex(d => d.id === id);
+    if (index === -1)
+      return;
+    items.splice(index, 1);
+    // let's remove the prop if no more filters so the filter icon will be removed
+    if (items.length === 0)
+      delete this.filterItems[prop];
+    this.debouncedApplyFilter();
+  }
+  toggleFilterAndOr(id) {
+    this.assertChanges();
+    // this is for reactivity issues for getFilterItemsList()
+    this.filterId++;
+    const prop = this.changes.prop;
+    const items = this.filterItems[prop];
+    if (!items)
+      return;
+    const index = items.findIndex(d => d.id === id);
+    if (index === -1)
+      return;
+    items[index].relation = items[index].relation === 'and' ? 'or' : 'and';
+    this.debouncedApplyFilter();
+  }
+  assertChanges() {
     if (!this.changes) {
       throw new Error('Changes required per edit');
     }
-    this.filterChange.emit({
-      prop: this.changes.prop,
-      type: this.changes.type,
-      value: (_b = (_a = this.extraElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim(),
-    });
-    this.changes = undefined;
   }
   isOutside(e) {
+    const select = document.getElementById('add-filter');
+    if (select)
+      select.value = defaultType;
+    this.currentFilterType = defaultType;
+    this.changes.type = defaultType;
+    this.currentFilterId = -1;
     if (e.classList.contains(`[uuid="${this.uuid}"]`)) {
       return false;
     }
@@ -126,6 +271,26 @@ export class FilterPanel {
       "attribute": "uuid",
       "reflect": true
     },
+    "filterItems": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "MultiFilterItem",
+        "resolved": "{ [prop: string]: FilterData[]; }",
+        "references": {
+          "MultiFilterItem": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "{}"
+    },
     "filterTypes": {
       "type": "unknown",
       "mutable": false,
@@ -189,9 +354,33 @@ export class FilterPanel {
         "text": ""
       },
       "defaultValue": "{}"
+    },
+    "filterCaptions": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "FilterCaptions | undefined",
+        "resolved": "{ title: string; save: string; reset: string; cancel: string; }",
+        "references": {
+          "FilterCaptions": {
+            "location": "import",
+            "path": "./filter.plugin"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
     }
   }; }
   static get states() { return {
+    "isFilterIdSet": {},
+    "filterId": {},
+    "currentFilterId": {},
+    "currentFilterType": {},
     "changes": {}
   }; }
   static get events() { return [{
@@ -205,10 +394,10 @@ export class FilterPanel {
         "text": ""
       },
       "complexType": {
-        "original": "FilterItem",
-        "resolved": "{ prop?: ColumnProp; type?: \"none\" | \"empty\" | \"notEmpty\" | \"eq\" | \"notEq\" | \"begins\" | \"contains\" | \"notContains\" | \"eqN\" | \"neqN\" | \"gt\" | \"gte\" | \"lt\" | \"lte\"; value?: any; }",
+        "original": "MultiFilterItem",
+        "resolved": "{ [prop: string]: FilterData[]; }",
         "references": {
-          "FilterItem": {
+          "MultiFilterItem": {
             "location": "local"
           }
         }

package/dist/collection/plugins/filter/filter.style.css

@@ -52,6 +52,14 @@
   background-color: #2ee072;
   border: 1px solid #20d565;
 }
+.revo-button.red {
+  background-color: #E0662E;
+  border: 1px solid #d55920;
+}
+.revo-button:disabled, .revo-button[disabled] {
+  cursor: not-allowed !important;
+  filter: opacity(0.35) !important;
+}
 .revo-button.light {
   border: 2px solid #cedefa;
   line-height: 32px;
@@ -73,9 +81,13 @@ revogr-filter-panel {
   box-shadow: 0 5px 18px -2px rgba(0, 0, 0, 0.2);
   padding: 10px;
   border-radius: 4px;
-  min-width: 150px;
+  min-width: 220px;
   text-align: left;
 }
+revogr-filter-panel .filter-holder > div {
+  display: flex;
+  flex-direction: column;
+}
 revogr-filter-panel label {
   color: gray;
   font-size: 13px;
@@ -94,11 +106,16 @@ revogr-filter-panel input[type=text] {
   border-radius: 5px;
   padding: 0 10px;
   box-sizing: border-box;
+  width: 100%;
 }
 revogr-filter-panel button {
   margin-top: 10px;
   margin-right: 5px;
 }
+revogr-filter-panel .filter-actions {
+  text-align: right;
+  margin-right: -5px;
+}
 
 .rgHeaderCell:hover .rv-filter {
   transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -176,4 +193,47 @@ revogr-filter-panel button {
 }
 .select-css:disabled:hover, .select-css[aria-disabled=true] {
   border-color: #f1f1f1;
+}
+
+.multi-filter-list {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.multi-filter-list div {
+  white-space: nowrap;
+}
+.multi-filter-list .multi-filter-list-action {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.multi-filter-list .and-or-button {
+  margin: 0 0 0 10px;
+  min-width: 58px;
+  cursor: pointer;
+}
+.multi-filter-list .trash-button {
+  margin: 0 0 -2px 6px;
+  cursor: pointer;
+  width: 22px;
+  height: 22px;
+  color: gray;
+  font-size: 18px;
+}
+.multi-filter-list .trash-button .trash-img {
+  width: 1em;
+}
+
+.add-filter-divider {
+  display: block;
+  margin: 0 -10px 10px -10px;
+  border-bottom: 1px solid #d9d9d9;
+  height: 10px;
+  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.05);
+}
+
+.select-input {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }

package/dist/collection/plugins/groupingColumn/grouping.col.plugin.js

@@ -27,6 +27,7 @@ export default class GroupingColumnPlugin extends BasePlugin {
       res.columnGrouping[key].push(...collectionItem);
     }
     res.maxLevel = Math.max(res.maxLevel, collection.maxLevel);
+    res.sort = Object.assign(Object.assign({}, res.sort), collection.sort);
     return res;
   }
   static isColGrouping(colData) {