@zeedhi/teknisa-components-common 1.107.1 → 1.108.0

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

@@ -810,6 +810,7 @@
   class GridBase {
       constructor(grid) {
           this.exportConfigButtons = [];
+          this.defaultToolbar = {};
           this.atoms = {
               TITLE: '_gridTitle',
               HIDE_BUTTON: '_hideButton',
@@ -831,6 +832,7 @@
           };
           this.grid = grid;
           this.exportConfigButtons = this.getExportConfigButtons();
+          this.initializeDefaultToolbarItems();
       }
       getOption(config) {
           if (config.multiOption)
@@ -843,17 +845,17 @@
               return option.buildComponent(this.grid);
           });
       }
-      createToolbarProps() {
-          return [
-              {
-                  name: `${this.grid.name}_gridTitle`,
+      initializeDefaultToolbarItems() {
+          this.defaultToolbar = {
+              title: () => ({
+                  name: `${this.grid.name}_title`,
                   component: 'ZdText',
                   cssClass: 'toolbar-title',
                   tag: 'h2',
                   text: this.grid.title,
                   title: this.grid.title,
-              },
-              {
+              }),
+              hideButton: () => ({
                   name: `${this.grid.name}_hideTooltip`,
                   component: 'ZdTooltip',
                   label: `{{GridController_${this.grid.componentId}.tooltipName}}`,
@@ -863,213 +865,260 @@
                           name: `${this.grid.name}_hideButton`,
                           component: 'ZdIcon',
                           iconName: 'mdi-chevron-right',
-                          isVisible: `{{GridController_${this.grid.componentId}.isNotEditing}}`,
+                          isVisible: true,
                           cssClass: `{{GridController_${this.grid.componentId}.toolbarStyle}}`,
                           events: {
                               click: this.hideButtonClick.bind(this),
                           },
                       },
                   ],
-              },
-              {
-                  name: `${this.grid.name}_toolbarDiv`,
-                  component: 'ZdTag',
-                  tag: 'div',
-                  cssStyle: 'display: flex; align-items: center',
-                  isVisible: `{{GridController_${this.grid.componentId}.showToolbar}}`,
+              }),
+              addButton: () => ({
+                  name: `${this.grid.name}_add_tooltip`,
+                  component: 'ZdTooltip',
+                  label: 'TEKGRID_ADD',
+                  bottom: true,
                   children: [
                       {
-                          name: `${this.grid.name}_notEditingSpan`,
-                          component: 'ZdTag',
-                          tag: 'span',
-                          cssStyle: 'display: flex',
-                          isVisible: `{{GridController_${this.grid.componentId}.isNotEditing}}`,
-                          children: [
-                              {
-                                  name: `${this.grid.name}_add_tooltip`,
-                                  component: 'ZdTooltip',
-                                  label: 'TEKGRID_ADD',
-                                  bottom: true,
-                                  children: [
-                                      {
-                                          name: `${this.grid.name}_addButton`,
-                                          component: 'ZdButton',
-                                          icon: true,
-                                          iconName: 'add',
-                                          isVisible: `{{GridController_${this.grid.componentId}.showAddButton}}`,
-                                          events: {
-                                              click: this.addButtonClick.bind(this),
-                                          },
-                                      },
-                                  ],
-                              },
-                              {
-                                  name: `${this.grid.name}_delete_tooltip`,
-                                  component: 'ZdTooltip',
-                                  label: 'TEKGRID_DELETE',
-                                  bottom: true,
-                                  children: [
-                                      {
-                                          name: `${this.grid.name}_deleteButton`,
-                                          component: 'ZdButton',
-                                          icon: true,
-                                          iconName: 'delete',
-                                          isVisible: `{{GridController_${this.grid.componentId}.showDeleteButton}}`,
-                                          disabled: `{{GridController_${this.grid.componentId}.disableDeleteButton}}`,
-                                          events: {
-                                              click: this.deleteButtonClick.bind(this),
-                                          },
-                                      },
-                                  ],
-                              },
-                              {
-                                  name: `${this.grid.name}_divider1`,
-                                  component: 'ZdDivider',
-                                  cssClass: 'toolbar-divider',
-                                  vertical: true,
-                                  isVisible: `{{GridController_${this.grid.componentId}.showDivider1}}`,
-                              },
-                              {
-                                  name: `${this.grid.name}_refresh_tooltip`,
-                                  component: 'ZdTooltip',
-                                  label: 'TEKGRID_REFRESH',
-                                  bottom: true,
-                                  children: [
-                                      {
-                                          name: `${this.grid.name}_refreshButton`,
-                                          component: 'ZdButton',
-                                          icon: true,
-                                          iconName: 'refresh',
-                                          isVisible: `{{GridController_${this.grid.componentId}.showReloadButton}}`,
-                                          events: {
-                                              click: this.reloadGrid.bind(this),
-                                          },
-                                      },
-                                  ],
-                              },
-                              {
-                                  name: `${this.grid.name}_divider2`,
-                                  component: 'ZdDivider',
-                                  cssClass: 'toolbar-divider',
-                                  vertical: true,
-                                  isVisible: `{{GridController_${this.grid.componentId}.showDivider2}}`,
-                              },
-                              {
-                                  name: `${this.grid.name}_columns_button_tooltip`,
-                                  component: 'ZdTooltip',
-                                  label: 'TEKGRID_COLUMNS',
-                                  bottom: true,
-                                  children: [
-                                      {
-                                          name: `${this.grid.name}_columnsButton`,
-                                          component: 'TekGridColumnsButton',
-                                          isVisible: `{{GridController_${this.grid.componentId}.showColumnsButton}}`,
-                                          iterableComponentName: this.grid.name,
-                                          hideGroups: !(this.grid instanceof TekGrid),
-                                          ignoreColumns: `{{GridController_${this.grid.componentId}.columnsButtonIgnore}}`,
-                                      },
-                                  ],
-                              },
-                              {
-                                  name: `${this.grid.name}_layout_options`,
-                                  component: 'TekGridLayoutOptions',
-                                  isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptionsButton}}`,
-                              },
-                              {
-                                  name: `${this.grid.name}_dividerActions`,
-                                  component: 'ZdDivider',
-                                  cssClass: 'toolbar-divider',
-                                  vertical: true,
-                                  isVisible: `{{GridController_${this.grid.componentId}.showActionAndExportButton}}`,
-                              },
-                              {
-                                  name: `${this.grid.name}_export_dropdown`,
-                                  component: 'ZdDropdown',
-                                  cssClass: 'tekgrid-actions-dropdown',
-                                  offsetY: true,
-                                  activator: {
-                                      name: `${this.grid.name}_exportButton`,
-                                      component: 'ZdButton',
-                                      icon: true,
-                                      iconName: 'fileDownload',
-                                      isVisible: `{{GridController_${this.grid.componentId}.showExportButton}}`,
-                                  },
-                                  children: this.grid.exportActions || this.exportConfigButtons,
-                              },
-                              {
-                                  name: `${this.grid.name}_actions_dropdown`,
-                                  component: 'ZdDropdown',
-                                  cssClass: 'tekgrid-actions-dropdown',
-                                  offsetY: true,
-                                  activator: {
-                                      name: `${this.grid.name}_actionsButton`,
-                                      component: 'ZdButton',
-                                      icon: true,
-                                      iconName: 'more',
-                                      isVisible: `{{GridController_${this.grid.componentId}.showActionsButton}}`,
-                                  },
-                                  children: this.grid.actions,
-                              },
-                              {
-                                  name: `${this.grid.name}_divider3`,
-                                  component: 'ZdDivider',
-                                  cssClass: 'toolbar-divider',
-                                  vertical: true,
-                                  isVisible: `{{GridController_${this.grid.componentId}.showDivider3}}`,
-                              },
-                          ],
+                          name: `${this.grid.name}_addButton`,
+                          component: 'ZdButton',
+                          icon: true,
+                          iconName: 'add',
+                          isVisible: `{{GridController_${this.grid.componentId}.showAddButton}}`,
+                          events: {
+                              click: this.addButtonClick.bind(this),
+                          },
                       },
+                  ],
+              }),
+              deleteButton: () => ({
+                  name: `${this.grid.name}_delete_tooltip`,
+                  component: 'ZdTooltip',
+                  label: 'TEKGRID_DELETE',
+                  bottom: true,
+                  children: [
                       {
-                          name: `${this.grid.name}_saveButton`,
+                          name: `${this.grid.name}_deleteButton`,
                           component: 'ZdButton',
-                          label: 'TEKGRID_SAVE',
-                          isVisible: `{{GridController_${this.grid.componentId}.showEditButtons}}`,
-                          small: true,
+                          icon: true,
+                          iconName: 'delete',
+                          isVisible: `{{GridController_${this.grid.componentId}.showDeleteButton}}`,
+                          disabled: `{{GridController_${this.grid.componentId}.disableDeleteButton}}`,
                           events: {
-                              click: this.saveChanges.bind(this),
+                              click: this.deleteButtonClick.bind(this),
                           },
                       },
+                  ],
+              }),
+              divider: (index) => ({
+                  name: `${this.grid.name}_divider${index}`,
+                  component: 'ZdDivider',
+                  cssClass: 'toolbar-divider',
+                  vertical: true,
+                  isVisible: `{{GridController_${this.grid.componentId}.showDivider}}`,
+              }),
+              refreshButton: () => ({
+                  name: `${this.grid.name}_refresh_tooltip`,
+                  component: 'ZdTooltip',
+                  label: 'TEKGRID_REFRESH',
+                  bottom: true,
+                  children: [
                       {
-                          name: `${this.grid.name}_cancelButton`,
+                          name: `${this.grid.name}_refreshButton`,
                           component: 'ZdButton',
-                          label: 'TEKGRID_CANCEL',
-                          outline: true,
-                          cssClass: 'zd-mx-2',
-                          isVisible: `{{GridController_${this.grid.componentId}.showEditButtons}}`,
-                          small: true,
+                          icon: true,
+                          iconName: 'refresh',
+                          isVisible: `{{GridController_${this.grid.componentId}.showReloadButton}}`,
                           events: {
-                              click: this.cancelChanges.bind(this),
+                              click: this.reloadGrid.bind(this),
                           },
                       },
+                  ],
+              }),
+              columnsButton: () => ({
+                  name: `${this.grid.name}_columns_button_tooltip`,
+                  component: 'ZdTooltip',
+                  label: 'TEKGRID_COLUMNS',
+                  bottom: true,
+                  children: [
                       {
-                          name: `${this.grid.name}_gridSearch`,
-                          component: 'ZdSearch',
-                          cssClass: 'zd-grid-search',
-                          iterableComponentName: `${this.grid.name}`,
-                          isVisible: `{{GridController_${this.grid.componentId}.showSearchInput}}`,
+                          name: `${this.grid.name}_columnsButton`,
+                          component: 'TekGridColumnsButton',
+                          isVisible: `{{GridController_${this.grid.componentId}.showColumnsButton}}`,
+                          iterableComponentName: this.grid.name,
+                          hideGroups: !(this.grid instanceof TekGrid),
+                          ignoreColumns: `{{GridController_${this.grid.componentId}.columnsButtonIgnore}}`,
                       },
+                  ],
+              }),
+              layoutOptions: () => ({
+                  name: `${this.grid.name}_layout_options`,
+                  component: 'TekGridLayoutOptions',
+                  isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptionsButton}}`,
+              }),
+              exportDropdown: () => ({
+                  name: `${this.grid.name}_export_dropdown`,
+                  component: 'ZdDropdown',
+                  cssClass: 'tekgrid-actions-dropdown',
+                  offsetY: true,
+                  activator: {
+                      name: `${this.grid.name}_exportButton`,
+                      component: 'ZdButton',
+                      icon: true,
+                      iconName: 'fileDownload',
+                      isVisible: `{{GridController_${this.grid.componentId}.showExportButton}}`,
+                  },
+                  children: this.grid.exportActions || this.exportConfigButtons,
+              }),
+              actionsDropdown: () => ({
+                  name: `${this.grid.name}_actions_dropdown`,
+                  component: 'ZdDropdown',
+                  cssClass: 'tekgrid-actions-dropdown',
+                  offsetY: true,
+                  activator: {
+                      name: `${this.grid.name}_actionsButton`,
+                      component: 'ZdButton',
+                      icon: true,
+                      iconName: 'more',
+                      isVisible: `{{GridController_${this.grid.componentId}.showActionsButton}}`,
+                  },
+                  children: this.grid.actions,
+              }),
+              saveButton: () => ({
+                  name: `${this.grid.name}_saveButton`,
+                  component: 'ZdButton',
+                  label: 'TEKGRID_SAVE',
+                  isVisible: `{{GridController_${this.grid.componentId}.showEditButtons}}`,
+                  small: true,
+                  events: {
+                      click: this.saveChanges.bind(this),
+                  },
+              }),
+              cancelButton: () => ({
+                  name: `${this.grid.name}_cancelButton`,
+                  component: 'ZdButton',
+                  label: 'TEKGRID_CANCEL',
+                  outline: true,
+                  cssClass: 'zd-mx-2',
+                  isVisible: `{{GridController_${this.grid.componentId}.showEditButtons}}`,
+                  small: true,
+                  events: {
+                      click: this.cancelChanges.bind(this),
+                  },
+              }),
+              gridSearch: () => ({
+                  name: `${this.grid.name}_gridSearch`,
+                  component: 'ZdSearch',
+                  cssClass: 'zd-grid-search',
+                  iterableComponentName: `${this.grid.name}`,
+                  isVisible: `{{GridController_${this.grid.componentId}.showSearchInput}}`,
+              }),
+              filterButton: () => ({
+                  name: `${this.grid.name}_filter_tooltip`,
+                  component: 'ZdTooltip',
+                  label: 'TEKGRID_FILTER',
+                  bottom: true,
+                  children: [
                       {
-                          name: `${this.grid.name}_filter_tooltip`,
-                          component: 'ZdTooltip',
-                          label: 'TEKGRID_FILTER',
-                          bottom: true,
-                          children: [
-                              {
-                                  name: `${this.grid.name}_filterButton`,
-                                  component: 'TekGridFilterButton',
-                                  grid: this.grid,
-                                  gridName: this.grid.name,
-                                  showCheckboxAll: this.grid.showCheckboxAllFilter,
-                                  isVisible: `{{GridController_${this.grid.componentId}.showFilterButton}}`,
-                                  events: {
-                                      onCreated: this.loadFilterButton.bind(this),
-                                  },
-                              },
-                          ],
+                          name: `${this.grid.name}_filterButton`,
+                          component: 'TekGridFilterButton',
+                          grid: this.grid,
+                          gridName: this.grid.name,
+                          showCheckboxAll: this.grid.showCheckboxAllFilter,
+                          isVisible: `{{GridController_${this.grid.componentId}.showFilterButton}}`,
+                          events: {
+                              onCreated: this.loadFilterButton.bind(this),
+                          },
                       },
                   ],
-              },
+              }),
+          };
+      }
+      processUserToolbarItems(toolbarDivChildren) {
+          this.grid.toolbarConfig.forEach((item, index) => {
+              if (typeof item === 'object' && item.component) {
+                  toolbarDivChildren.push(item);
+              }
+              else if (typeof item === 'string') {
+                  const toolbarToPropertyMap = {
+                      addButton: 'addButton',
+                      deleteButton: 'deleteButton',
+                      refreshButton: 'refreshButton',
+                      columnsButton: 'columnsButton',
+                      layoutOptions: 'layoutButton',
+                      exportDropdown: 'exportButton',
+                      actionsDropdown: 'actionsButton',
+                      gridSearch: 'searchInput',
+                      filterButton: 'filterButton',
+                  };
+                  const gridProperty = toolbarToPropertyMap[item];
+                  if (gridProperty && !this.grid[gridProperty]) {
+                      this.grid[gridProperty] = true;
+                  }
+                  const itemFactory = this.defaultToolbar[item];
+                  if (itemFactory) {
+                      const predefinedItem = itemFactory(index);
+                      if (predefinedItem) {
+                          toolbarDivChildren.push(predefinedItem);
+                      }
+                  }
+                  else {
+                      console.warn(`Predefined toolbar item "${item}" not found.`);
+                  }
+              }
+              else {
+                  console.warn('Invalid item in toolbarConfig:', item);
+              }
+          });
+      }
+      /**
+       * Adiciona os itens padrão da toolbar quando nenhuma configuração é fornecida.
+       * @param toolbarDivChildren Array para adicionar os componentes da toolbar.
+       */
+      addDefaultToolbarItems(toolbarDivChildren) {
+          const defaultItems = [
+              'addButton', 'deleteButton', 'divider', 'refreshButton', 'divider',
+              'columnsButton', 'layoutOptions', 'exportDropdown', 'divider', 'actionsDropdown',
+              'saveButton', 'cancelButton', 'divider', 'gridSearch', 'filterButton',
           ];
+          defaultItems.forEach((itemName, index) => {
+              const itemFactory = this.defaultToolbar[itemName];
+              if (itemFactory) {
+                  const predefinedItem = itemFactory(index);
+                  if (predefinedItem) {
+                      toolbarDivChildren.push(predefinedItem);
+                  }
+              }
+          });
+      }
+      /**
+       * Cria os componentes que serão renderizados na toolbar do grid.
+       */
+      createToolbarProps() {
+          var _a, _b, _c, _d;
+          const toolbarItems = [];
+          const toolbarDivChildren = [];
+          const title = (_b = (_a = this.defaultToolbar).title) === null || _b === void 0 ? void 0 : _b.call(_a);
+          const hideButton = (_d = (_c = this.defaultToolbar).hideButton) === null || _d === void 0 ? void 0 : _d.call(_c);
+          if (title)
+              toolbarItems.push(title);
+          if (hideButton)
+              toolbarItems.push(hideButton);
+          if (this.grid.toolbarConfig && this.grid.toolbarConfig.length > 0) {
+              this.processUserToolbarItems(toolbarDivChildren);
+          }
+          else {
+              this.addDefaultToolbarItems(toolbarDivChildren);
+          }
+          toolbarItems.push({
+              name: `${this.grid.name}_toolbarDiv`,
+              component: 'ZdTag',
+              tag: 'div',
+              cssStyle: 'display: flex; align-items: center',
+              isVisible: `{{GridController_${this.grid.componentId}.showToolbar}}`,
+              children: toolbarDivChildren,
+          });
+          return toolbarItems;
       }
       loadFilterButton({ component }) {
           this.filterButton = component;
@@ -1258,7 +1307,6 @@
               TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Ano Atual',
               TEKGRID_WITH_GROUPS: '(Com grupos)',
               TEKGRID_GRID_MIRROR: '(Espelho do grid)',
-              TEKGRID_NO_DATA: 'Não há dados para gerar o relatório',
           },
       },
       'en-US': {
@@ -1331,7 +1379,6 @@
               TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Current Year',
               TEKGRID_WITH_GROUPS: '(With groups)',
               TEKGRID_GRID_MIRROR: '(Grid mirror)',
-              TEKGRID_NO_DATA: 'There is no data to generate the report',
           },
       },
       'es-CL': {
@@ -1404,7 +1451,6 @@
               TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Año actual',
               TEKGRID_WITH_GROUPS: '(Con grupos)',
               TEKGRID_GRID_MIRROR: '(Espejo de grid)',
-              TEKGRID_NO_DATA: 'No hay datos para generar el reporte',
           },
       },
   });
@@ -1419,19 +1465,19 @@
           return this.grid.title;
       }
       get showAddButton() {
-          return this.grid.addButton;
+          return this.grid.addButton && !this.isEditing && this.openToolbar;
       }
       get showDeleteButton() {
-          return this.grid.deleteButton !== 'none';
+          return this.grid.deleteButton !== 'none' && !this.isEditing && this.openToolbar;
       }
       get showFilterButton() {
-          return this.grid.filterButton;
+          return this.grid.filterButton && this.openToolbar;
       }
       get showModalFilterProps() {
           return this.grid.modalFilterProps;
       }
       get showSearchInput() {
-          return this.grid.showSearch;
+          return this.grid.showSearch && this.openToolbar;
       }
       get showToolbar() {
           return this.openToolbar;
@@ -1446,46 +1492,29 @@
           return !this.openToolbar ? 'TEKGRID_SHOW' : 'TEKGRID_HIDE';
       }
       get showReloadButton() {
-          return this.grid.showReload;
-      }
-      get showDivider2() {
-          return (this.showReloadButton
-              && (this.showLayoutOptionsButton
-                  || this.showColumnsButton
-                  || this.showActionsButton
-                  || this.showExportButton
-                  || this.showSearchInput));
+          return this.grid.showReload && !this.isEditing && this.openToolbar;
       }
       get showColumnsButton() {
-          return this.grid.columnsButton;
+          return this.grid.columnsButton && !this.isEditing && this.openToolbar;
       }
       get columnsButtonIgnore() {
           return this.grid.columnsButtonIgnore;
       }
       get showLayoutOptionsButton() {
-          return this.grid.showLayoutOptions;
+          return this.grid.showLayoutOptions && !this.isEditing && this.openToolbar;
       }
-      get showDivider1() {
-          return ((this.showAddButton || this.showDeleteButton)
-              && (this.showReloadButton
-                  || this.showLayoutOptionsButton
-                  || this.showColumnsButton
-                  || this.showActionsButton
-                  || this.showExportButton
-                  || this.showSearchInput));
+      get showDivider() {
+          return !this.isEditing && this.openToolbar;
       }
       get showActionsButton() {
-          return this.grid.actions.length > 0;
+          return this.grid.actions.length > 0 && !this.isEditing && this.openToolbar;
       }
       get showExportButton() {
-          return this.grid.showExport;
+          return this.grid.showExport && !this.isEditing && this.openToolbar;
       }
       get showActionAndExportButton() {
           return ((this.showLayoutOptionsButton || this.showColumnsButton)
-              && (this.showActionsButton || this.showExportButton || this.showSearchInput));
-      }
-      get showDivider3() {
-          return ((this.showActionsButton || this.showExportButton) && this.showSearchInput);
+              && (this.showActionsButton || this.showExportButton || this.showSearchInput)) && !this.isEditing && this.openToolbar;
       }
       get isEditing() {
           return this.grid.editing;
@@ -2247,6 +2276,10 @@
            * @public
            */
           this.dragColumns = true;
+          /**
+           * Components that will be rendered on toolbar slot
+           */
+          this.toolbarConfig = [];
           /**
            * Enables column resizing
            * @public
@@ -2328,8 +2361,8 @@
           this.groupColumnNames = [];
           this.summaryColumns = [];
           this.groupColumns = [];
-          this.groupedData = [];
           this.toolbarSlotProps = false;
+          this.groupedData = [];
           this.editNewRowsOnly = false;
           this.showCheckboxAllFilter = core.Config.gridShowCheckboxAllFilter || false;
           this.defaultFilter = {};
@@ -2368,6 +2401,7 @@
           this.showSummaryTotal = this.getInitValue('showSummaryTotal', props.showSummaryTotal, this.showSummaryTotal);
           this.showCheckboxAllFilter = this.getInitValue('showCheckboxAllFilter', props.showCheckboxAllFilter, this.showCheckboxAllFilter);
           this.defaultFilter = this.getInitValue('defaultFilter', props.defaultFilter, this.defaultFilter);
+          this.toolbarConfig = this.getInitValue('toolbarConfig', props.toolbarConfig, this.toolbarConfig);
           this.toolbarOpened = this.getInitValue('toolbarOpened', props.toolbarOpened, this.toolbarOpened);
           this.editNewRowsOnly = this.getInitValue('editNewRowsOnly', props.editNewRowsOnly, this.editNewRowsOnly);
           this.mainGrid = this.getInitValue('mainGrid', props.mainGrid, this.mainGrid);
@@ -2665,8 +2699,9 @@
           });
           if (this.groupedData.length > 0) {
               this.addGroupFooters(0);
-              if (this.showSummaryTotal) {
-                  this.addSummary();
+              if (this.showSummaryTotal && this.summaryColumns.length > 0) {
+                  const summaryRow = this.getSummary();
+                  this.groupedData.push(summaryRow);
               }
           }
       }
@@ -2718,14 +2753,79 @@
           for (let i = this.groups.length - 1; i >= groupIndex; i -= 1) {
               if (!this.groups[i].initialized)
                   return;
-              const groupFooterRow = Object.assign({ groupFooter: true, groupIndex: i, groupHeaders: [], groupLabel: this.groups[i].lastGroupHeaderRow.groupLabel, groupValue: this.groups[i].lastGroupHeaderRow.groupValue }, this.summaryData(this.groups[i].footer));
-              // add header for outer groups
-              for (let g = 0; g < i; g += 1) {
-                  groupFooterRow.groupHeaders.push(this.groups[g].lastGroupHeaderRow);
-              }
+              const groupFooterRow = this.getGroupFooter(this.groups[i], i);
+              groupFooterRow.groupHeaders = this.getGroupHeaders(groupIndex);
               this.groupedData.push(groupFooterRow);
           }
       }
+      /**
+       * Creates a group footer, calculating its summary data
+       * @param group Group to which this footer is related
+       * @param groupIndex Index of the group
+       * @returns new group footer
+       */
+      getGroupFooter(group, groupIndex) {
+          const groupFooterRow = Object.assign({ groupIndex, groupFooter: true, groupHeaders: [], groupLabel: group.lastGroupHeaderRow.groupLabel, groupValue: group.lastGroupHeaderRow.groupValue }, this.getSummaryData(group.footer));
+          return groupFooterRow;
+      }
+      /**
+       * Gets all of the group headers that belong to the group at the specified index
+       * This method should be called only during the groups creation process because it depends on the
+       * group creation order (because it accesses lastGroupHeaderRow that changes during the creation process)
+       * @param groupIndex
+       * @returns
+       */
+      getGroupHeaders(groupIndex) {
+          const groupHeaders = [];
+          for (let i = 0; i <= groupIndex; i += 1) {
+              groupHeaders.push(this.groups[i].lastGroupHeaderRow);
+          }
+          return groupHeaders;
+      }
+      /**
+       * Updates all footers summary data and the summary total
+       */
+      updateSummary() {
+          this.summary = {};
+          this.groups.forEach((group) => {
+              this.resetFooterVariables(group);
+          });
+          this.groupedData.forEach((row) => {
+              if (this.isGroupHeader(row))
+                  return;
+              if (this.isGroupFooter(row)) {
+                  this.updateGroupFooterSummary(row);
+                  this.resetFooterVariables(this.groups[row.groupIndex]);
+                  return;
+              }
+              if (this.isGroupSummary(row)) {
+                  this.updateSummaryTotal(row);
+                  return;
+              }
+              this.calcSummary(row);
+          });
+      }
+      /**
+       * Takes a group footer and updates its summary data
+       */
+      updateGroupFooterSummary(groupFooter) {
+          const group = this.groups[groupFooter.groupIndex];
+          const summary = this.getSummaryData(group.footer);
+          Object.keys(summary).forEach((key) => {
+              // change properties one by one to avoid changing the object reference
+              groupFooter[key] = summary[key];
+          });
+      }
+      /**
+       * Updates the total summary data
+       */
+      updateSummaryTotal(summaryTotal) {
+          const summary = this.getSummaryData(this.summary);
+          Object.keys(summary).forEach((key) => {
+              // change properties one by one to avoid changing the object reference
+              summaryTotal[key] = summary[key];
+          });
+      }
       resetFooterVariables(group) {
           this.summaryColumns.forEach((column) => {
               group.footer[column.name] = {
@@ -2762,33 +2862,31 @@
           }
       }
       calcSummary(row) {
-          if (this.summaryColumns.length > 0) {
-              this.summaryColumns.forEach((column) => {
-                  const columnName = column.name;
-                  const rowValue = row[columnName];
-                  if (this.isUndefined(this.summary[columnName])) {
-                      this.summary[columnName] = {
-                          count: 0,
-                          sum: undefined,
-                          avg: undefined,
-                          min: undefined,
-                          max: undefined,
-                      };
-                  }
-                  this.calcSummaryValues(columnName, this.summary[columnName], rowValue);
-                  this.groups.forEach((group) => {
-                      this.calcSummaryValues(columnName, group.footer[columnName], rowValue);
-                  });
-              });
-          }
-      }
-      addSummary() {
           if (this.summaryColumns.length === 0)
               return;
-          const summaryRow = Object.assign({ groupFooter: true, groupSummary: true }, this.summaryData(this.summary));
-          this.groupedData.push(summaryRow);
+          this.summaryColumns.forEach((column) => {
+              const columnName = column.name;
+              const rowValue = this.getVisibleValue(row, column);
+              if (this.isUndefined(this.summary[columnName])) {
+                  this.summary[columnName] = {
+                      count: 0,
+                      sum: undefined,
+                      avg: undefined,
+                      min: undefined,
+                      max: undefined,
+                  };
+              }
+              this.calcSummaryValues(columnName, this.summary[columnName], rowValue);
+              this.groups.forEach((group) => {
+                  this.calcSummaryValues(columnName, group.footer[columnName], rowValue);
+              });
+          });
       }
-      summaryData(group) {
+      getSummary() {
+          const summaryRow = Object.assign({ groupFooter: true, groupSummary: true }, this.getSummaryData(this.summary));
+          return summaryRow;
+      }
+      getSummaryData(group) {
           const summaryData = {};
           this.summaryColumns.forEach((column) => {
               const { aggregation } = column;
@@ -3181,12 +3279,32 @@
       isGroupHeader(row) {
           return row.groupHeader;
       }
+      /**
+       * Checks if a row is a group footer, adding typescript type-checking
+       */
+      isGroupFooter(row) {
+          return row.groupFooter && !row.groupSummary;
+      }
+      /**
+       * Checks if a row is a summary, adding typescript type-checking
+       */
+      isGroupSummary(row) {
+          return row.groupSummary;
+      }
       /**
        * Checks if a row is the last grouping of the grid (the most internal grouping)
        */
       isLastGrouping(group) {
           return group.groupColumnName === this.groupColumns[this.groupColumns.length - 1].name;
       }
+      /**
+       * change event of editable components
+       * - override to call updateSummary on change
+       */
+      changeEditableComponent(column, row, value, component) {
+          super.changeEditableComponent(column, row, value, component);
+          this.updateSummary();
+      }
   }
 
   class TekGridColumnsButtonController extends common.IterableColumnsButtonController {
@@ -3829,6 +3947,10 @@
           this.title = '';
           /* Show Add button */
           this.addButton = false;
+          /**
+           * Components that will be rendered on toolbar slot
+           */
+          this.toolbarConfig = [];
           /* Show edit buttons */
           this.showEditButtons = true;
           /* Show Delete button */
@@ -3947,6 +4069,7 @@
           this.exportConfig = this.getInitValue('exportConfig', props.exportConfig, this.exportConfig);
           this.showCheckboxAllFilter = this.getInitValue('showCheckboxAllFilter', props.showCheckboxAllFilter, this.showCheckboxAllFilter);
           this.defaultFilter = this.getInitValue('defaultFilter', props.defaultFilter, this.defaultFilter);
+          this.toolbarConfig = this.getInitValue('toolbarConfig', props.toolbarConfig, this.toolbarConfig);
           this.toolbarOpened = this.getInitValue('toolbarOpened', props.toolbarOpened, this.toolbarOpened);
           this.exportActions = props.exportActions || this.exportActions;
           this.reportTitle = this.getInitValue('reportTitle', props.reportTitle, this.reportTitle);