@zeedhi/teknisa-components-common 1.43.0 → 1.44.0

package/dist/tek-components-common.esm.js

@@ -840,7 +840,7 @@ class GridBase {
                         component: 'ZdDivider',
                         cssClass: 'toolbar-divider',
                         vertical: true,
-                        isVisible: `{{GridController_${this.grid.componentId}.showFirstDivider}}`,
+                        isVisible: `{{GridController_${this.grid.componentId}.showDivider1}}`,
                     },
                     {
                         name: `${this.grid.name}_refresh_tooltip`,
@@ -853,7 +853,7 @@ class GridBase {
                                 component: 'ZdButton',
                                 icon: true,
                                 iconName: 'refresh',
-                                isVisible: this.grid.showReload,
+                                isVisible: `{{GridController_${this.grid.componentId}.showReloadButton}}`,
                                 events: {
                                     click: this.reloadGrid.bind(this),
                                 },
@@ -865,7 +865,7 @@ class GridBase {
                         component: 'ZdDivider',
                         cssClass: 'toolbar-divider',
                         vertical: true,
-                        isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptions}`,
+                        isVisible: `{{GridController_${this.grid.componentId}.showDivider2}}`,
                     },
                     {
                         name: `${this.grid.name}_columns_button_tooltip`,
@@ -886,7 +886,7 @@ class GridBase {
                     {
                         name: `${this.grid.name}_layout_options`,
                         component: 'TekGridLayoutOptions',
-                        isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptions}}`,
+                        isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptionsButton}}`,
                     },
                     {
                         name: `${this.grid.name}_dividerActions`,
@@ -928,6 +928,7 @@ class GridBase {
                         component: 'ZdDivider',
                         cssClass: 'toolbar-divider',
                         vertical: true,
+                        isVisible: `{{GridController_${this.grid.componentId}.showDivider3}}`,
                     },
                 ],
             },
@@ -956,6 +957,7 @@ class GridBase {
             {
                 name: `${this.grid.name}_gridSearch`,
                 component: 'ZdSearch',
+                isVisible: `{{GridController_${this.grid.componentId}.showSearchInput}}`,
             },
             {
                 name: `${this.grid.name}_filter_tooltip`,
@@ -1109,10 +1111,15 @@ class GridBase {
     hideFilterModal() {
         this.filterModal.hide();
     }
+    sortFilterIndex(col1, col2) {
+        const index1 = col1.filterIndex !== undefined ? col1.filterIndex : Number.MAX_SAFE_INTEGER;
+        const index2 = col2.filterIndex !== undefined ? col2.filterIndex : Number.MAX_SAFE_INTEGER;
+        return index1 - index2;
+    }
     getFilterModalComponents() {
         const filterColumns = [];
         let columnComponentName;
-        this.grid.columns.forEach((column) => {
+        [...this.grid.columns].sort(this.sortFilterIndex).forEach((column) => {
             const filterProps = Array.isArray(column.filterProps) ? column.filterProps : [column.filterProps];
             if (column.filterable && filterProps && filterProps.length > 0) {
                 this.filterFormInputs[column.name] = [];
@@ -1590,17 +1597,28 @@ class GridController {
     get showFilterButton() {
         return this.grid.filterButton;
     }
+    get showSearchInput() {
+        return this.grid.showSearch;
+    }
+    get showReloadButton() {
+        return this.grid.showReload;
+    }
+    get showDivider2() {
+        return this.showReloadButton && (this.showLayoutOptionsButton || this.showColumnsButton
+            || this.showActionsButton || this.showExportButton || this.showSearchInput);
+    }
     get showColumnsButton() {
         return this.grid.columnsButton;
     }
     get columnsButtonIgnore() {
         return this.grid.columnsButtonIgnore;
     }
-    get showLayoutOptions() {
+    get showLayoutOptionsButton() {
         return this.grid.showLayoutOptions;
     }
-    get showFirstDivider() {
-        return this.showAddButton || this.showDeleteButton;
+    get showDivider1() {
+        return (this.showAddButton || this.showDeleteButton) && (this.showReloadButton || this.showLayoutOptionsButton || this.showColumnsButton
+            || this.showActionsButton || this.showExportButton || this.showSearchInput);
     }
     get showActionsButton() {
         return this.grid.actions.length > 0;
@@ -1609,7 +1627,10 @@ class GridController {
         return this.grid.showExport;
     }
     get showActionAndExportButton() {
-        return this.showActionsButton || this.showExportButton;
+        return (this.showLayoutOptionsButton || this.showColumnsButton) && (this.showActionsButton || this.showExportButton || this.showSearchInput);
+    }
+    get showDivider3() {
+        return (this.showActionsButton || this.showExportButton) && this.showSearchInput;
     }
     get isEditing() {
         return this.grid.editing;
@@ -2101,6 +2122,7 @@ class TekGridColumn extends GridColumnEditable {
         this.isVisible = this.getInitValue('isVisible', props.isVisible, this.isVisible);
         this.filterProps = this.getInitValue('filterProps', props.filterProps, this.filterProps);
         this.filterable = this.getInitValue('filterable', props.filterable, this.filterable);
+        this.filterIndex = this.getInitValue('filterIndex', props.filterIndex, this.filterIndex);
         this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
         this.grouped = this.getInitValue('grouped', props.grouped, this.grouped);
         this.groupOpened = this.getInitValue('groupOpened', props.groupOpened, this.groupOpened);
@@ -2176,6 +2198,16 @@ class TekGridColumn extends GridColumnEditable {
             this.changeGrouping();
         }
     }
+    get groupOpened() {
+        return this.groupOpenedValue;
+    }
+    set groupOpened(value) {
+        const changed = value !== this.groupOpenedValue;
+        this.groupOpenedValue = value;
+        if (changed) {
+            this.changeGrouping();
+        }
+    }
     get isVisible() {
         return this.isVisibleValue && !this.grouped;
     }
@@ -2209,6 +2241,8 @@ class TekGrid extends GridEditable {
         this.actions = [];
         /* Show Filter button */
         this.filterButton = false;
+        /* Show SearchInput */
+        this.showSearch = true;
         /* Show Column Filter button */
         this.columnFilterButton = false;
         /* Show Columns button */
@@ -2311,6 +2345,7 @@ class TekGrid extends GridEditable {
         this.addButton = this.getInitValue('addButton', props.addButton, this.addButton);
         this.deleteButton = this.getInitValue('deleteButton', props.deleteButton, this.deleteButton);
         this.filterButton = this.getInitValue('filterButton', props.filterButton, this.filterButton);
+        this.showSearch = this.getInitValue('showSearch', props.showSearch, this.showSearch);
         this.columnFilterButton = this.getInitValue('columnFilterButton', props.columnFilterButton, this.columnFilterButton);
         this.columnsButton = this.getInitValue('columnsButton', props.columnsButton, this.columnsButton);
         this.columnsButtonIgnore = this.getInitValue('columnsButtonIgnore', props.columnsButtonIgnore, this.columnsButtonIgnore);
@@ -3091,6 +3126,8 @@ class TekTreeGrid extends TreeGridEditable {
         this.actions = [];
         /* Show Filter button */
         this.filterButton = false;
+        /* Show search Input */
+        this.showSearch = true;
         /* Show Column Filter button */
         this.columnFilterButton = false;
         /* Show Columns button */
@@ -3142,6 +3179,7 @@ class TekTreeGrid extends TreeGridEditable {
         this.addButton = this.getInitValue('addButton', props.addButton, this.addButton);
         this.deleteButton = this.getInitValue('deleteButton', props.deleteButton, this.deleteButton);
         this.filterButton = this.getInitValue('filterButton', props.filterButton, this.filterButton);
+        this.showSearch = this.getInitValue('showSearch', props.showSearch, this.showSearch);
         this.columnFilterButton = this.getInitValue('columnFilterButton', props.columnFilterButton, this.columnFilterButton);
         this.columnsButton = this.getInitValue('columnsButton', props.columnsButton, this.columnsButton);
         this.columnsButtonIgnore = this.getInitValue('columnsButtonIgnore', props.columnsButtonIgnore, this.columnsButtonIgnore);

package/dist/tek-components-common.umd.js

@@ -846,7 +846,7 @@
                           component: 'ZdDivider',
                           cssClass: 'toolbar-divider',
                           vertical: true,
-                          isVisible: `{{GridController_${this.grid.componentId}.showFirstDivider}}`,
+                          isVisible: `{{GridController_${this.grid.componentId}.showDivider1}}`,
                       },
                       {
                           name: `${this.grid.name}_refresh_tooltip`,
@@ -859,7 +859,7 @@
                                   component: 'ZdButton',
                                   icon: true,
                                   iconName: 'refresh',
-                                  isVisible: this.grid.showReload,
+                                  isVisible: `{{GridController_${this.grid.componentId}.showReloadButton}}`,
                                   events: {
                                       click: this.reloadGrid.bind(this),
                                   },
@@ -871,7 +871,7 @@
                           component: 'ZdDivider',
                           cssClass: 'toolbar-divider',
                           vertical: true,
-                          isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptions}`,
+                          isVisible: `{{GridController_${this.grid.componentId}.showDivider2}}`,
                       },
                       {
                           name: `${this.grid.name}_columns_button_tooltip`,
@@ -892,7 +892,7 @@
                       {
                           name: `${this.grid.name}_layout_options`,
                           component: 'TekGridLayoutOptions',
-                          isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptions}}`,
+                          isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptionsButton}}`,
                       },
                       {
                           name: `${this.grid.name}_dividerActions`,
@@ -934,6 +934,7 @@
                           component: 'ZdDivider',
                           cssClass: 'toolbar-divider',
                           vertical: true,
+                          isVisible: `{{GridController_${this.grid.componentId}.showDivider3}}`,
                       },
                   ],
               },
@@ -962,6 +963,7 @@
               {
                   name: `${this.grid.name}_gridSearch`,
                   component: 'ZdSearch',
+                  isVisible: `{{GridController_${this.grid.componentId}.showSearchInput}}`,
               },
               {
                   name: `${this.grid.name}_filter_tooltip`,
@@ -1115,10 +1117,15 @@
       hideFilterModal() {
           this.filterModal.hide();
       }
+      sortFilterIndex(col1, col2) {
+          const index1 = col1.filterIndex !== undefined ? col1.filterIndex : Number.MAX_SAFE_INTEGER;
+          const index2 = col2.filterIndex !== undefined ? col2.filterIndex : Number.MAX_SAFE_INTEGER;
+          return index1 - index2;
+      }
       getFilterModalComponents() {
           const filterColumns = [];
           let columnComponentName;
-          this.grid.columns.forEach((column) => {
+          [...this.grid.columns].sort(this.sortFilterIndex).forEach((column) => {
               const filterProps = Array.isArray(column.filterProps) ? column.filterProps : [column.filterProps];
               if (column.filterable && filterProps && filterProps.length > 0) {
                   this.filterFormInputs[column.name] = [];
@@ -1596,17 +1603,28 @@
       get showFilterButton() {
           return this.grid.filterButton;
       }
+      get showSearchInput() {
+          return this.grid.showSearch;
+      }
+      get showReloadButton() {
+          return this.grid.showReload;
+      }
+      get showDivider2() {
+          return this.showReloadButton && (this.showLayoutOptionsButton || this.showColumnsButton
+              || this.showActionsButton || this.showExportButton || this.showSearchInput);
+      }
       get showColumnsButton() {
           return this.grid.columnsButton;
       }
       get columnsButtonIgnore() {
           return this.grid.columnsButtonIgnore;
       }
-      get showLayoutOptions() {
+      get showLayoutOptionsButton() {
           return this.grid.showLayoutOptions;
       }
-      get showFirstDivider() {
-          return this.showAddButton || this.showDeleteButton;
+      get showDivider1() {
+          return (this.showAddButton || this.showDeleteButton) && (this.showReloadButton || this.showLayoutOptionsButton || this.showColumnsButton
+              || this.showActionsButton || this.showExportButton || this.showSearchInput);
       }
       get showActionsButton() {
           return this.grid.actions.length > 0;
@@ -1615,7 +1633,10 @@
           return this.grid.showExport;
       }
       get showActionAndExportButton() {
-          return this.showActionsButton || this.showExportButton;
+          return (this.showLayoutOptionsButton || this.showColumnsButton) && (this.showActionsButton || this.showExportButton || this.showSearchInput);
+      }
+      get showDivider3() {
+          return (this.showActionsButton || this.showExportButton) && this.showSearchInput;
       }
       get isEditing() {
           return this.grid.editing;
@@ -2107,6 +2128,7 @@
           this.isVisible = this.getInitValue('isVisible', props.isVisible, this.isVisible);
           this.filterProps = this.getInitValue('filterProps', props.filterProps, this.filterProps);
           this.filterable = this.getInitValue('filterable', props.filterable, this.filterable);
+          this.filterIndex = this.getInitValue('filterIndex', props.filterIndex, this.filterIndex);
           this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
           this.grouped = this.getInitValue('grouped', props.grouped, this.grouped);
           this.groupOpened = this.getInitValue('groupOpened', props.groupOpened, this.groupOpened);
@@ -2182,6 +2204,16 @@
               this.changeGrouping();
           }
       }
+      get groupOpened() {
+          return this.groupOpenedValue;
+      }
+      set groupOpened(value) {
+          const changed = value !== this.groupOpenedValue;
+          this.groupOpenedValue = value;
+          if (changed) {
+              this.changeGrouping();
+          }
+      }
       get isVisible() {
           return this.isVisibleValue && !this.grouped;
       }
@@ -2215,6 +2247,8 @@
           this.actions = [];
           /* Show Filter button */
           this.filterButton = false;
+          /* Show SearchInput */
+          this.showSearch = true;
           /* Show Column Filter button */
           this.columnFilterButton = false;
           /* Show Columns button */
@@ -2317,6 +2351,7 @@
           this.addButton = this.getInitValue('addButton', props.addButton, this.addButton);
           this.deleteButton = this.getInitValue('deleteButton', props.deleteButton, this.deleteButton);
           this.filterButton = this.getInitValue('filterButton', props.filterButton, this.filterButton);
+          this.showSearch = this.getInitValue('showSearch', props.showSearch, this.showSearch);
           this.columnFilterButton = this.getInitValue('columnFilterButton', props.columnFilterButton, this.columnFilterButton);
           this.columnsButton = this.getInitValue('columnsButton', props.columnsButton, this.columnsButton);
           this.columnsButtonIgnore = this.getInitValue('columnsButtonIgnore', props.columnsButtonIgnore, this.columnsButtonIgnore);
@@ -3097,6 +3132,8 @@
           this.actions = [];
           /* Show Filter button */
           this.filterButton = false;
+          /* Show search Input */
+          this.showSearch = true;
           /* Show Column Filter button */
           this.columnFilterButton = false;
           /* Show Columns button */
@@ -3148,6 +3185,7 @@
           this.addButton = this.getInitValue('addButton', props.addButton, this.addButton);
           this.deleteButton = this.getInitValue('deleteButton', props.deleteButton, this.deleteButton);
           this.filterButton = this.getInitValue('filterButton', props.filterButton, this.filterButton);
+          this.showSearch = this.getInitValue('showSearch', props.showSearch, this.showSearch);
           this.columnFilterButton = this.getInitValue('columnFilterButton', props.columnFilterButton, this.columnFilterButton);
           this.columnsButton = this.getInitValue('columnsButton', props.columnsButton, this.columnsButton);
           this.columnsButtonIgnore = this.getInitValue('columnsButtonIgnore', props.columnsButtonIgnore, this.columnsButtonIgnore);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.43.0",
+  "version": "1.44.0",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -28,5 +28,5 @@
   "peerDependencies": {
     "@zeedhi/core": "*"
   },
-  "gitHead": "dff21e134017e20c4de440406daf73031653df60"
+  "gitHead": "f58aaa0da52de553088e6eb5bb4567293553e44a"
 }

package/tests/unit/components/tek-grid/grid.spec.ts

@@ -31,6 +31,7 @@ describe('TekGrid', () => {
       expect(instance.dragColumns).toBeTruthy();
       expect(instance.resizeColumns).toBeTruthy();
       expect(instance.showLayoutOptions).toBeTruthy();
+      expect(instance.showSearch).toBeTruthy();
       expect(instance.showSummaryTotal).toBeTruthy();
       expect(instance.showReload).toBeTruthy();
       expect(instance.columnsButton).toBeFalsy();
@@ -49,6 +50,7 @@ describe('TekGrid', () => {
         dragColumns: false,
         resizeColumns: false,
         showLayoutOptions: false,
+        showSearch: false,
         showSummaryTotal: false,
         showReload: false,
         columns: [
@@ -65,6 +67,7 @@ describe('TekGrid', () => {
       expect(instance.dragColumns).toBeFalsy();
       expect(instance.resizeColumns).toBeFalsy();
       expect(instance.showLayoutOptions).toBeFalsy();
+      expect(instance.showSearch).toBeFalsy();
       expect(instance.showSummaryTotal).toBeFalsy();
       expect(instance.showReload).toBeFalsy();
       expect(instance.columns[0]).toBeInstanceOf(TekGridColumn);
@@ -1436,6 +1439,50 @@ describe('TekGrid', () => {
         done();
       }, 1000);
     });
+
+    it('should call debounced updateGroupData', async (done) => {
+      const flushPromises = () => new Promise(setImmediate);
+      const instance = new TekGrid({
+        name: 'grid_grouping_1',
+        component: 'TekGrid',
+        columns: [
+          {
+            name: 'id',
+            label: 'id',
+          },
+          {
+            name: 'name',
+            label: 'name',
+          },
+          {
+            name: 'department',
+            label: 'department',
+            grouped: true,
+          },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          order: ['name.asc'],
+          data: [
+            { id: 2, name: 'employee 2', department: 1 },
+            { id: 5, name: 'employee 5', department: 2 },
+            { id: 4, name: 'employee 4', department: 2 },
+            { id: 3, name: 'employee 3', department: 1 },
+            { id: 1, name: 'employee 1', department: 1 },
+          ],
+        },
+      });
+
+      await flushPromises();
+
+      instance.updateGroupedData = jest.fn();
+      instance.columns[2].groupOpened = true;
+
+      setTimeout(() => {
+        expect(instance.updateGroupedData).toBeCalled();
+        done();
+      }, 1000);
+    });
   });
 
   describe('filterClick()', () => {
@@ -1564,6 +1611,54 @@ describe('TekGrid', () => {
       spy.mockClear();
     });
 
+    it('should create modal with filterable and ordered form elements', () => {
+      const instance = new TekGrid({
+        name: 'grid-filter-order',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          {
+            name: 'first_name',
+            filterable: true,
+            filterProps: [{ name: 'first_name_edit', label: 'first_name' }],
+          },
+          {
+            name: 'last_name',
+            filterable: true,
+            filterIndex: 1,
+            filterProps: [{ name: 'last_name_edit', label: 'last_name' }],
+          },
+          {
+            name: 'dob',
+            filterable: true,
+            filterIndex: 0,
+            filterProps: [{ name: 'dob_edit', label: 'dob' }],
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        if (modal.children && modal.children.length > 1) {
+          const form = modal.children[1];
+          formElements = form.children;
+        }
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+      const filterTooltip = instance.toolbarSlot[6];
+      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
+        const button = new Button(filterTooltip.children[0]);
+        const event = new Event('click');
+        button.click(event, {} as HTMLElement);
+        expect(formElements[0].name).toBe('grid-filter-order-filter-AND-CONTAINS-dob-0');
+        expect(formElements[1].name).toBe('grid-filter-order-filter-AND-CONTAINS-last_name-0');
+        expect(formElements[2].name).toBe('grid-filter-order-filter-AND-CONTAINS-first_name-0');
+      }
+      spy.mockClear();
+    });
+
     it('should create modal with filterable form elements and TekRestDatasource', () => {
       const instance = new TekGrid({
         name: 'grid_filterClick6',

package/tests/unit/utils/grid-base/grid-controller.spec.ts

@@ -15,7 +15,8 @@ describe('GridController', () => {
         filterButton: true,
         columnsButton: true,
         showExport: true,
-        showLayoutOptions: true,
+        showLayoutOptionsButton: true,
+        showReloadButton: true,
         actions: [{ name: 'button', component: 'ZdButton' }],
       });
       const instance = new GridController(grid);
@@ -27,10 +28,14 @@ describe('GridController', () => {
       expect(instance.showActionsButton).toBeTruthy();
       expect(instance.showExportButton).toBeTruthy();
       expect(instance.showActionAndExportButton).toBeTruthy();
+      expect(instance.showSearchInput).toBeTruthy();
+      expect(instance.showDivider2).toBeTruthy();
+      expect(instance.showDivider3).toBeTruthy();
       expect(instance.showColumnsButton).toBeTruthy();
       expect(instance.columnsButtonIgnore).toEqual([]);
-      expect(instance.showLayoutOptions).toBeTruthy();
-      expect(instance.showFirstDivider).toBeTruthy();
+      expect(instance.showLayoutOptionsButton).toBeTruthy();
+      expect(instance.showReloadButton).toBeTruthy();
+      expect(instance.showDivider1).toBeTruthy();
       expect(instance.isEditing).toBeFalsy();
       expect(instance.isNotEditing).toBeTruthy();
       expect(instance.disableDeleteButton).toBeTruthy();
@@ -38,12 +43,110 @@ describe('GridController', () => {
       grid.datasource.currentRow = { id: '1' };
       expect(instance.disableDeleteButton).toBeFalsy();
       grid.showExport = false;
+      grid.showLayoutOptions = false;
+      grid.showReload = false;
+      grid.columnsButton = false;
       grid.actions = [];
       grid.deleteButton = 'selection';
       grid.selectedRows = [{ id: '1' }];
       expect(instance.disableDeleteButton).toBeFalsy();
       expect(instance.showExportButton).toBeFalsy();
       expect(instance.showActionAndExportButton).toBeFalsy();
+      expect(instance.showLayoutOptionsButton).toBeFalsy();
+    });
+
+    it('should verify if showDivider3 is visibility', () => {
+      const grid = new TekGrid({
+        name: 'Grid',
+        component: 'TekGrid',
+        addButton: false,
+        deleteButton: 'none',
+        filterButton: false,
+        columnsButton: false,
+        showReload: false,
+        showLayoutOptions: false,
+        showReloadButton: true,
+        showSearch: false,
+        showExport: false,
+        actions: [],
+      });
+      const instance = new GridController(grid);
+
+      expect(instance.showDivider3).toBeFalsy();
+      expect(instance.showActionsButton).toBeFalsy();
+      expect(instance.showExportButton).toBeFalsy();
+      expect(instance.showSearchInput).toBeFalsy();
+    });
+
+    it('should verify if showActionAndExportButton is visibility', () => {
+      const grid = new TekGrid({
+        name: 'Grid',
+        component: 'TekGrid',
+        addButton: false,
+        deleteButton: 'none',
+        filterButton: false,
+        columnsButton: true,
+        showReload: false,
+        showLayoutOptions: true,
+        showReloadButton: true,
+        showSearch: false,
+        showExport: false,
+        actions: [],
+      });
+      const instance = new GridController(grid);
+
+      expect(instance.showActionAndExportButton).toBeFalsy();
+      expect(instance.showActionsButton).toBeFalsy();
+      expect(instance.showSearchInput).toBeFalsy();
+      expect(instance.showExportButton).toBeFalsy();
+    });
+
+    it('should verify if showDivider2 is visibility', () => {
+      const grid = new TekGrid({
+        name: 'Grid',
+        component: 'TekGrid',
+        addButton: false,
+        deleteButton: 'none',
+        filterButton: false,
+        columnsButton: false,
+        showReload: true,
+        showLayoutOptions: false,
+        showSearch: false,
+        showExport: false,
+        actions: [],
+      });
+      const instance = new GridController(grid);
+
+      expect(instance.showDivider2).toBeFalsy();
+      expect(instance.showActionsButton).toBeFalsy();
+      expect(instance.showSearchInput).toBeFalsy();
+      expect(instance.showColumnsButton).toBeFalsy();
+      expect(instance.showExportButton).toBeFalsy();
+      expect(instance.showReloadButton).toBeTruthy();
+    });
+
+    it('should verify if showDivider1 is visibility', () => {
+      const grid = new TekGrid({
+        name: 'Grid',
+        component: 'TekGrid',
+        addButton: true,
+        deleteButton: 'selection',
+        filterButton: false,
+        columnsButton: false,
+        showReload: false,
+        showLayoutOptions: false,
+        showSearch: false,
+        showExport: false,
+        actions: [],
+      });
+      const instance = new GridController(grid);
+
+      expect(instance.showDivider1).toBeFalsy();
+      expect(instance.showActionsButton).toBeFalsy();
+      expect(instance.showSearchInput).toBeFalsy();
+      expect(instance.showColumnsButton).toBeFalsy();
+      expect(instance.showExportButton).toBeFalsy();
+      expect(instance.showReloadButton).toBeFalsy();
     });
   });
 });

package/types/components/tek-grid/grid-column.d.ts

@@ -7,9 +7,10 @@ import { IFilterPropsComponent, ITekGridColumn, ITekGridColumnAggregation } from
 export declare class TekGridColumn extends GridColumnEditable implements ITekGridColumn {
     filterProps: IFilterPropsComponent | IFilterPropsComponent[];
     filterable: boolean;
+    filterIndex?: number;
     fixed: boolean;
     private groupedValue;
-    groupOpened?: boolean;
+    private groupOpenedValue?;
     groupLabelForEmptyValue: string;
     private aggregationValue?;
     private isVisibleValue;
@@ -33,6 +34,8 @@ export declare class TekGridColumn extends GridColumnEditable implements ITekGri
     set grouped(value: boolean);
     get aggregation(): ITekGridColumnAggregation;
     set aggregation(value: ITekGridColumnAggregation);
+    get groupOpened(): boolean | undefined;
+    set groupOpened(value: boolean | undefined);
     get isVisible(): boolean;
     set isVisible(value: boolean);
     private changeGrouping;

package/types/components/tek-grid/grid.d.ts

@@ -10,6 +10,7 @@ export declare class TekGrid extends GridEditable implements ITekGrid {
     deleteButton: 'none' | 'currentRow' | 'selection';
     actions: IComponentRender[];
     filterButton: boolean;
+    showSearch: boolean;
     columnFilterButton: boolean;
     columnsButton: boolean;
     columnsButtonIgnore: string[];

package/types/components/tek-grid/interfaces.d.ts

@@ -38,6 +38,7 @@ export interface ITekGrid extends IGridEditable {
     deleteButton?: 'none' | 'currentRow' | 'selection';
     events?: ITekGridEvents;
     filterButton?: boolean;
+    showSearch?: boolean;
     showLayoutOptions?: boolean;
     title?: string;
     showExport?: boolean;
@@ -96,6 +97,7 @@ export interface IFilterPropsComponent extends IComponent {
 export interface ITekGridColumn extends IGridColumnEditable {
     filterProps?: IFilterPropsComponent | IFilterPropsComponent[];
     filterable?: boolean;
+    filterIndex?: number;
     fixed?: boolean;
     grouped?: boolean;
     aggregation?: ITekGridColumnAggregation;

package/types/components/tek-tree-grid/interfaces.d.ts

@@ -10,6 +10,7 @@ export interface ITekTreeGrid extends ITreeGridEditable {
     deleteButton?: 'none' | 'currentRow' | 'selection';
     events?: ITekGridEvents;
     filterButton?: boolean;
+    showSearch?: boolean;
     showLayoutOptions?: boolean;
     title?: string;
     showExport?: boolean;