@progress/kendo-react-grid 5.19.0-dev.202309211619 → 5.19.0-dev.202309211913

package/dist/es/Grid.js

@@ -634,6 +634,8 @@ var Grid = /** @class */ (function (_super) {
         });
         var noRecords = children.filter(function (child) { return child && child.type &&
             child.type.displayName === 'KendoReactGridNoRecords'; });
+        var statusBar = children.filter(function (child) { return child && child.type &&
+            child.type.displayName === 'KendoReactGridStatusBar'; });
         var leafColumns = this._columns.filter(function (c) { return c.children.length === 0; });
         var groupingPanel = groupable && (React.createElement(GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle, ariaControls: this._gridRoleElementId }));
         var _g = this.props, sort = _g.sort, sortable = _g.sortable, group = _g.group, filter = _g.filter, filterable = _g.filterable, _h = _g.filterOperators, filterOperators = _h === void 0 ? operators : _h, headerCellRender = _g.headerCellRender, columnMenu = _g.columnMenu;
@@ -770,18 +772,17 @@ var Grid = /** @class */ (function (_super) {
                         _a), this.props.className), ref: function (el) { _this._element = el; }, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, tableKeyboardNavigationScopeAttributes),
                     toolbar,
                     groupingPanel,
-                    React.createElement(TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
-                            _this.tableElement = table;
-                        } },
+                    React.createElement(TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) { _this.tableElement = table; } },
                         React.createElement("table", { className: classNames('k-table k-grid-table', (_b = {}, _b["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size, _b)), style: { userSelect: tableUserSelect, display: tableDisplay } },
                             colGroups,
                             header,
                             React.createElement("tbody", __assign({ role: 'rowgroup', className: 'k-table-tbody' }, tableKeyboardNavigationBodyAttributes), body),
                             footer)),
-                    this.props.pageable && pager,
                     enableDragClues && (React.createElement(React.Fragment, null,
                         React.createElement(DropClue, { ref: this.dragLogic.refDropElementClue }),
-                        React.createElement(DragClue, { ref: this.dragLogic.refDragElementClue }))))));
+                        React.createElement(DragClue, { ref: this.dragLogic.refDragElementClue })))),
+                statusBar,
+                this.props.pageable && pager));
         }
         var wrapperStyle = this.props.style || {};
         if (this.props.scrollable === 'virtual') {
@@ -801,7 +802,7 @@ var Grid = /** @class */ (function (_super) {
                 }, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, tableKeyboardNavigationScopeAttributes),
                 toolbar,
                 groupingPanel,
-                React.createElement("div", { role: "grid", className: "k-grid-aria-root", id: this._gridRoleElementId, "aria-colcount": leafColumns.length, "aria-rowcount": total },
+                React.createElement("div", { className: 'k-grid-aria-root', role: "grid", "aria-colcount": leafColumns.length, "aria-rowcount": total, id: this._gridRoleElementId },
                     header,
                     React.createElement("div", { className: "k-grid-container", role: "presentation" },
                         React.createElement("div", { ref: this.containerRef, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
@@ -818,13 +819,14 @@ var Grid = /** @class */ (function (_super) {
                                         React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: this.tableBodyRef, role: 'rowgroup' }, tableKeyboardNavigationBodyAttributes), body)))),
                             React.createElement("div", { className: "k-height-container", role: "presentation" },
                                 React.createElement("div", { style: this.props.scrollable === 'virtual' ?
-                                        { 'height': (this.vs.containerHeight) + 'px' } : {} }))),
-                        footer)),
-                this.props.pageable && pager,
-                enableDragClues && (React.createElement(React.Fragment, null,
-                    React.createElement(DropClue, { ref: this.dragLogic.refDropElementClue }),
-                    React.createElement(DragClue, { ref: this.dragLogic.refDragElementClue }))),
-                this.showLicenseWatermark && React.createElement(WatermarkOverlay, null))));
+                                        { 'height': (this.vs.containerHeight) + 'px' } : {} })),
+                            footer)),
+                    enableDragClues && (React.createElement(React.Fragment, null,
+                        React.createElement(DropClue, { ref: this.dragLogic.refDropElementClue }),
+                        React.createElement(DragClue, { ref: this.dragLogic.refDragElementClue }))),
+                    this.showLicenseWatermark && React.createElement(WatermarkOverlay, null)),
+                statusBar,
+                this.props.pageable && pager)));
     };
     Grid.prototype.selectionChange = function (options) {
         if (this.props.onSelectionChange) {

package/dist/es/StatusBar.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { GridSelectionChangeEvent } from './interfaces/events';
+import { GridColumnProps } from './interfaces/GridColumnProps';
+/**
+ * Represents the KendoReact Grid's StatusItem object.
+ */
+export interface StatusItem {
+    /**
+     * The type of the status item.
+     * Could be `sum`, `min`, `max`, `average`, `count`, `isTrue`, `isFalse`, `earliest` or `latest`.
+     */
+    type: string;
+    /**
+     * The calculated value of the status item.
+     */
+    value: number | boolean | Date;
+    /**
+     * The formatted value of the status item.
+     */
+    formattedValue: string;
+}
+/**
+ * Represents the props of the KendoReact Grid's StatusBar component.
+ */
+export interface StatusBarProps {
+    data: StatusItem[];
+}
+/**
+ * Represents the KendoReact Grid's StatusBar component.
+ */
+export declare const StatusBar: React.FunctionComponent<StatusBarProps>;
+/**
+ * @hidden
+ */
+export declare const leafColumns: (columns: GridColumnProps[]) => GridColumnProps[];
+/**
+ * Represents the arguments of the getStatusData function.
+ */
+export interface StatusDataArgs extends Pick<GridSelectionChangeEvent, 'dataItems' | 'target' | 'startColIndex' | 'endColIndex' | 'startRowIndex' | 'endRowIndex' | 'cell'> {
+}
+/**
+ * Calculates the status data.
+ *
+ * @param args StatusDataArgs
+ * @returns StatusItem[]
+ */
+export declare const getStatusData: (args: StatusDataArgs) => StatusItem[];

package/dist/es/StatusBar.js

@@ -0,0 +1,109 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import { getter } from '@progress/kendo-react-common';
+/**
+ * Represents the KendoReact Grid's StatusBar component.
+ */
+export var StatusBar = function (props) {
+    var _a = props.data, data = _a === void 0 ? [] : _a;
+    return (React.createElement("div", { className: "k-selection-aggregates k-grid-selection-aggregates" }, data.map(function (item, index) { return (React.createElement("div", { key: index },
+        React.createElement("span", { className: "k-selection-aggregates-item-text" },
+            item.type,
+            ": "),
+        React.createElement("span", { className: "k-selection-aggregates-item-value" }, item.formattedValue))); })));
+};
+StatusBar.displayName = 'KendoReactGridStatusBar';
+;
+;
+/**
+ * @hidden
+ */
+export var leafColumns = function (columns) {
+    var _a;
+    var result = columns.slice();
+    for (var i = 0; i < result.length; i++) {
+        while (result[i] && ((_a = result[i].children) === null || _a === void 0 ? void 0 : _a.length)) {
+            result.splice.apply(result, __spreadArray([i, 1], result[i].children, false));
+        }
+    }
+    return result;
+};
+;
+/**
+ * Calculates the status data.
+ *
+ * @param args StatusDataArgs
+ * @returns StatusItem[]
+ */
+export var getStatusData = function (args) {
+    var dataItems = args.dataItems, target = args.target, startColIndex = args.startColIndex, endColIndex = args.endColIndex, startRowIndex = args.startRowIndex, endRowIndex = args.endRowIndex;
+    var columns = leafColumns(target.columns);
+    if (args.cell) {
+        columns = columns.slice(startColIndex, endColIndex + 1);
+    }
+    var getters = columns.map(function (c) { return c.field; }).filter(function (f) { return f && typeof f === 'string'; }).map(function (f) { return getter(f); });
+    var data = dataItems.slice(startRowIndex, endRowIndex + 1);
+    var grouped = { dates: [], numbers: [], booleans: [], others: [] };
+    var add = function (value) {
+        if (typeof value === 'number') {
+            grouped.numbers.push(value);
+        }
+        else if (typeof value === 'boolean') {
+            grouped.booleans.push(value);
+        }
+        else if (value instanceof Date) {
+            grouped.dates.push(value);
+        }
+        else if (value) {
+            grouped.others.push(value);
+        }
+    };
+    data.forEach(function (item) {
+        getters.forEach(function (fieldGetter) {
+            add(fieldGetter(item));
+        });
+    });
+    var datesAsNumbers = grouped.dates.map(function (d) { return d.getTime(); });
+    var isTrueCount = grouped.booleans.filter(function (bool) { return bool; }).length;
+    var isFalseCount = grouped.booleans.filter(function (bool) { return !bool; }).length;
+    var sum = grouped.numbers.length ? grouped.numbers.reduce(function (acc, curr) { return acc += curr; }, 0) : undefined;
+    var aggregates = {
+        sum: sum,
+        average: typeof sum === 'number' ? sum / grouped.numbers.length : undefined,
+        min: grouped.numbers.length ? Math.min.apply(Math, grouped.numbers) : undefined,
+        max: grouped.numbers.length ? Math.max.apply(Math, grouped.numbers) : undefined,
+        count: grouped.numbers.length + grouped.booleans.length + grouped.dates.length + grouped.others.length,
+        isTrue: isTrueCount > 0 ? isTrueCount : undefined,
+        isFalse: isFalseCount > 0 ? isFalseCount : undefined,
+        earliest: grouped.dates.length ? new Date(Math.min.apply(Math, datesAsNumbers)) : undefined,
+        latest: grouped.dates.length ? new Date(Math.max.apply(Math, datesAsNumbers)) : undefined
+    };
+    var format = function (value, key) {
+        if ((key === 'sum' || key === 'average') && typeof value === 'number') {
+            return value.toFixed(2);
+        }
+        else if ((key === 'earliest' || key === 'latest') && value instanceof Date) {
+            return value.toLocaleDateString();
+        }
+        else {
+            return String(value);
+        }
+    };
+    var result = [];
+    Object.keys(aggregates).forEach(function (a) {
+        var type = a;
+        var value = aggregates[type];
+        if (value !== undefined) {
+            result.push({ type: type, value: value, formattedValue: format(value, type) });
+        }
+    });
+    return result;
+};

package/dist/es/drag/GroupingIndicator.js

@@ -15,8 +15,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import * as React from 'react';
 import { Draggable, IconWrap } from '@progress/kendo-react-common';
-import { ungroupColumn, messages } from '../messages';
-import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
+import { registerForLocalization } from '@progress/kendo-react-intl';
 import { sortAscSmallIcon, sortDescSmallIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
@@ -71,7 +70,6 @@ var GroupingIndicator = /** @class */ (function (_super) {
     }
     GroupingIndicator.prototype.render = function () {
         var _this = this;
-        var localizationService = provideLocalizationService(this);
         var dir = this.props.dir;
         return (React.createElement(Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, ref: function (component) { _this.draggable = component; } },
             React.createElement("div", { className: "k-chip k-chip-md k-chip-solid k-chip-solid-base k-rounded-md", onClick: this.sortChange, role: "button", style: { touchAction: 'none' } },
@@ -79,7 +77,7 @@ var GroupingIndicator = /** @class */ (function (_super) {
                     React.createElement(IconWrap, { name: 'sort-' + dir + '-small', icon: dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon, size: 'small' })),
                 React.createElement("span", { className: 'k-chip-content' }, this.props.title),
                 React.createElement("span", { className: "k-chip-actions" },
-                    React.createElement("span", { className: "k-chip-action k-chip-remove-action", onClick: this.groupRemove, "aria-label": localizationService.toLanguageString(ungroupColumn, messages[ungroupColumn]) },
+                    React.createElement("span", { className: "k-chip-action k-chip-remove-action", onClick: this.groupRemove },
                         React.createElement(IconWrap, { name: 'x-circle', icon: xCircleIcon, size: 'small' }))))));
     };
     return GroupingIndicator;

package/dist/es/footer/FooterRow.js

@@ -46,9 +46,8 @@ var FooterRow = /** @class */ (function (_super) {
                         : {},
                     className: classNames('k-table-td', column.locked && column.left !== undefined ? 'k-grid-footer-sticky' : ''),
                     key: index,
-                    role: 'columnfooter'
+                    role: 'gridcell'
                 },
-                _a['aria-selected'] = false,
                 _a['aria-colindex'] = column.ariaColumnIndex,
                 _a);
             var cellProps = __assign({ field: column.field, ariaColumnIndex: column.ariaColumnIndex }, tdProps);

package/dist/es/header/GroupPanel.js

@@ -45,7 +45,7 @@ var GroupPanel = /** @class */ (function (_super) {
             }, onSortChange: function (event, dir) {
                 _this.onGroupSortChange(event, index, groupDesc, dir);
             }, onPress: _this.props.pressHandler, onDrag: _this.props.dragHandler, onRelease: _this.props.releaseHandler })); });
-        return (React.createElement("div", { ref: this.props.refCallback, className: "k-grouping-header", role: "toolbar", "aria-label": intl(this).toLanguageString(groupPanelAriaLabel, messages[groupPanelAriaLabel]), "aria-controls": this.props.ariaControls },
+        return (React.createElement("div", { ref: this.props.refCallback, className: "k-grouping-header", role: "toolbar", "aria-label": intl(this).toLanguageString(groupPanelAriaLabel, messages[groupPanelAriaLabel]), "aria-controls": this.props.ariaControls || '' },
             React.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, groups),
             React.createElement("div", { className: "k-grouping-drop-container" },
                 !groups.length && intl(this).toLanguageString(messageKey, messages[messageKey]),

package/dist/es/main.d.ts

@@ -34,6 +34,7 @@ import { GridNoRecordsProps } from './interfaces/GridNoRecordsProps';
 export * from './interfaces/events';
 export * from './interfaces/GridCellsSettings';
 export { messages as gridMessages, pagerInfo, pagerFirstPage, pagerPreviousPage, pagerNextPage, pagerLastPage, pagerItemPerPage } from './messages';
+export * from './StatusBar';
 import { GridSortSettings } from './interfaces/GridSortSettings';
 import { GridPagerSettings } from './paging/GridPagerSettings';
 import { GridGroupableSettings } from './interfaces/GridGroupableSettings';
@@ -41,10 +42,10 @@ import { GridColumnMenuItem } from './columnMenu/GridColumnMenuItem';
 import { GridColumnMenuItemContent } from './columnMenu/GridColumnMenuItemContent';
 import { GridColumnMenuItemGroup } from './columnMenu/GridColumnMenuItemGroup';
 import { GridFooterCellProps } from './interfaces/GridFooterCellProps';
-import { GridSelectableMode } from './interfaces/GridSelectableSettings';
+import { GridSelectableMode, GridSelectableSettings } from './interfaces/GridSelectableSettings';
 import { GridColumnMenuFilterUIProps } from './interfaces/GridColumnMenuFilterUIProps';
 import { GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE } from './constants';
 import { getSelectedState, getSelectedStateFromKeyDown, setSelectedState } from '@progress/kendo-react-data-tools';
 import { CommonDragLogic as GridCommonDragLogic } from './drag/CommonDragLogic';
 import { booleanFilterValues, operators } from './filterCommon';
-export { Grid, GridProps, GridColumn, GridColumnProps, GridCellProps, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridDetailRowProps, GridRow, GridRowProps, GridFilterCell, GridFilterCellProps, GridHeaderCell, GridHeaderCellProps, GridSelectionCell, GridColumnMenuProps, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterUIProps, GridColumnMenuFilterCell, GridColumnMenuFilterCellProps, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps, GridColumnMenuColumnsList, GridColumnMenuColumnsListProps, GridToolbar, GridToolbarProps, GridNoRecords, GridNoRecordsProps, GridSortSettings, GridPagerSettings, GridGroupableSettings, GridFooterCellProps, GridSelectableMode, GridFilterOperators, GridFilterOperator, GridColumnMenuWrapper, GridColumnMenuWrapperProps, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE, GridCommonDragLogic, rootFilterOrDefault, filterGroupByField, GridColumnMenuFilterProps, booleanFilterValues, operators };
+export { Grid, GridProps, GridColumn, GridColumnProps, GridCellProps, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridDetailRowProps, GridRow, GridRowProps, GridFilterCell, GridFilterCellProps, GridHeaderCell, GridHeaderCellProps, GridSelectionCell, GridColumnMenuProps, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterUIProps, GridColumnMenuFilterCell, GridColumnMenuFilterCellProps, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps, GridColumnMenuColumnsList, GridColumnMenuColumnsListProps, GridToolbar, GridToolbarProps, GridNoRecords, GridNoRecordsProps, GridSortSettings, GridPagerSettings, GridGroupableSettings, GridFooterCellProps, GridSelectableMode, GridSelectableSettings, GridFilterOperators, GridFilterOperator, GridColumnMenuWrapper, GridColumnMenuWrapperProps, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE, GridCommonDragLogic, rootFilterOrDefault, filterGroupByField, GridColumnMenuFilterProps, booleanFilterValues, operators };

package/dist/es/main.js

@@ -22,6 +22,7 @@ import { GridNoRecords } from './GridNoRecords';
 export * from './interfaces/events';
 export * from './interfaces/GridCellsSettings';
 export { messages as gridMessages, pagerInfo, pagerFirstPage, pagerPreviousPage, pagerNextPage, pagerLastPage, pagerItemPerPage } from './messages';
+export * from './StatusBar';
 import { GridColumnMenuItem } from './columnMenu/GridColumnMenuItem';
 import { GridColumnMenuItemContent } from './columnMenu/GridColumnMenuItemContent';
 import { GridColumnMenuItemGroup } from './columnMenu/GridColumnMenuItemGroup';

package/dist/es/messages/index.d.ts

@@ -30,6 +30,10 @@ export declare const pagerItemPerPage = "grid.pagerItemsPerPage";
  * @hidden
  */
 export declare const pagerPage = "grid.pagerPage";
+/**
+ * @hidden
+ */
+export declare const pagerPageSizeAriaLabel = "grid.pagerPageSizeAriaLabel";
 /**
  * @hidden
  */
@@ -144,6 +148,7 @@ export declare const messages: {
     "grid.pagerNextPage": string;
     "grid.pagerLastPage": string;
     "grid.pagerPage": string;
+    "grid.pagerPageSizeAriaLabel": string;
     "grid.pagerOf": string;
     "grid.pagerTotalPages": string;
     "grid.searchPlaceholder": string;

package/dist/es/messages/index.js

@@ -31,6 +31,10 @@ export var pagerItemPerPage = 'grid.pagerItemsPerPage';
  * @hidden
  */
 export var pagerPage = 'grid.pagerPage';
+/**
+ * @hidden
+ */
+export var pagerPageSizeAriaLabel = 'grid.pagerPageSizeAriaLabel';
 /**
  * @hidden
  */
@@ -145,6 +149,7 @@ export var messages = (_a = {},
     _a[pagerNextPage] = 'Go to the next page',
     _a[pagerLastPage] = 'Go to the last page',
     _a[pagerPage] = 'Page',
+    _a[pagerPageSizeAriaLabel] = 'Page size',
     _a[pagerOf] = 'of',
     _a[pagerTotalPages] = '{0}',
     _a[searchPlaceholder] = 'Search',

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1695311831,
+    publishDate: 1695321920,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/Grid.js

@@ -637,6 +637,8 @@ var Grid = /** @class */ (function (_super) {
         });
         var noRecords = children.filter(function (child) { return child && child.type &&
             child.type.displayName === 'KendoReactGridNoRecords'; });
+        var statusBar = children.filter(function (child) { return child && child.type &&
+            child.type.displayName === 'KendoReactGridStatusBar'; });
         var leafColumns = this._columns.filter(function (c) { return c.children.length === 0; });
         var groupingPanel = groupable && (React.createElement(GroupPanel_1.GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle, ariaControls: this._gridRoleElementId }));
         var _g = this.props, sort = _g.sort, sortable = _g.sortable, group = _g.group, filter = _g.filter, filterable = _g.filterable, _h = _g.filterOperators, filterOperators = _h === void 0 ? filterCommon_1.operators : _h, headerCellRender = _g.headerCellRender, columnMenu = _g.columnMenu;
@@ -773,18 +775,17 @@ var Grid = /** @class */ (function (_super) {
                         _a), this.props.className), ref: function (el) { _this._element = el; }, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, kendo_react_data_tools_1.tableKeyboardNavigationScopeAttributes),
                     toolbar,
                     groupingPanel,
-                    React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
-                            _this.tableElement = table;
-                        } },
+                    React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) { _this.tableElement = table; } },
                         React.createElement("table", { className: (0, kendo_react_common_1.classNames)('k-table k-grid-table', (_b = {}, _b["k-table-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size, _b)), style: { userSelect: tableUserSelect, display: tableDisplay } },
                             colGroups,
                             header,
                             React.createElement("tbody", __assign({ role: 'rowgroup', className: 'k-table-tbody' }, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes), body),
                             footer)),
-                    this.props.pageable && pager,
                     enableDragClues && (React.createElement(React.Fragment, null,
                         React.createElement(kendo_react_data_tools_1.DropClue, { ref: this.dragLogic.refDropElementClue }),
-                        React.createElement(kendo_react_data_tools_1.DragClue, { ref: this.dragLogic.refDragElementClue }))))));
+                        React.createElement(kendo_react_data_tools_1.DragClue, { ref: this.dragLogic.refDragElementClue })))),
+                statusBar,
+                this.props.pageable && pager));
         }
         var wrapperStyle = this.props.style || {};
         if (this.props.scrollable === 'virtual') {
@@ -804,7 +805,7 @@ var Grid = /** @class */ (function (_super) {
                 }, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, kendo_react_data_tools_1.tableKeyboardNavigationScopeAttributes),
                 toolbar,
                 groupingPanel,
-                React.createElement("div", { role: "grid", className: "k-grid-aria-root", id: this._gridRoleElementId, "aria-colcount": leafColumns.length, "aria-rowcount": total },
+                React.createElement("div", { className: 'k-grid-aria-root', role: "grid", "aria-colcount": leafColumns.length, "aria-rowcount": total, id: this._gridRoleElementId },
                     header,
                     React.createElement("div", { className: "k-grid-container", role: "presentation" },
                         React.createElement("div", { ref: this.containerRef, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
@@ -821,13 +822,14 @@ var Grid = /** @class */ (function (_super) {
                                         React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: this.tableBodyRef, role: 'rowgroup' }, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes), body)))),
                             React.createElement("div", { className: "k-height-container", role: "presentation" },
                                 React.createElement("div", { style: this.props.scrollable === 'virtual' ?
-                                        { 'height': (this.vs.containerHeight) + 'px' } : {} }))),
-                        footer)),
-                this.props.pageable && pager,
-                enableDragClues && (React.createElement(React.Fragment, null,
-                    React.createElement(kendo_react_data_tools_1.DropClue, { ref: this.dragLogic.refDropElementClue }),
-                    React.createElement(kendo_react_data_tools_1.DragClue, { ref: this.dragLogic.refDragElementClue }))),
-                this.showLicenseWatermark && React.createElement(kendo_react_common_2.WatermarkOverlay, null))));
+                                        { 'height': (this.vs.containerHeight) + 'px' } : {} })),
+                            footer)),
+                    enableDragClues && (React.createElement(React.Fragment, null,
+                        React.createElement(kendo_react_data_tools_1.DropClue, { ref: this.dragLogic.refDropElementClue }),
+                        React.createElement(kendo_react_data_tools_1.DragClue, { ref: this.dragLogic.refDragElementClue }))),
+                    this.showLicenseWatermark && React.createElement(kendo_react_common_2.WatermarkOverlay, null)),
+                statusBar,
+                this.props.pageable && pager)));
     };
     Grid.prototype.selectionChange = function (options) {
         if (this.props.onSelectionChange) {

package/dist/npm/StatusBar.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { GridSelectionChangeEvent } from './interfaces/events';
+import { GridColumnProps } from './interfaces/GridColumnProps';
+/**
+ * Represents the KendoReact Grid's StatusItem object.
+ */
+export interface StatusItem {
+    /**
+     * The type of the status item.
+     * Could be `sum`, `min`, `max`, `average`, `count`, `isTrue`, `isFalse`, `earliest` or `latest`.
+     */
+    type: string;
+    /**
+     * The calculated value of the status item.
+     */
+    value: number | boolean | Date;
+    /**
+     * The formatted value of the status item.
+     */
+    formattedValue: string;
+}
+/**
+ * Represents the props of the KendoReact Grid's StatusBar component.
+ */
+export interface StatusBarProps {
+    data: StatusItem[];
+}
+/**
+ * Represents the KendoReact Grid's StatusBar component.
+ */
+export declare const StatusBar: React.FunctionComponent<StatusBarProps>;
+/**
+ * @hidden
+ */
+export declare const leafColumns: (columns: GridColumnProps[]) => GridColumnProps[];
+/**
+ * Represents the arguments of the getStatusData function.
+ */
+export interface StatusDataArgs extends Pick<GridSelectionChangeEvent, 'dataItems' | 'target' | 'startColIndex' | 'endColIndex' | 'startRowIndex' | 'endRowIndex' | 'cell'> {
+}
+/**
+ * Calculates the status data.
+ *
+ * @param args StatusDataArgs
+ * @returns StatusItem[]
+ */
+export declare const getStatusData: (args: StatusDataArgs) => StatusItem[];

package/dist/npm/StatusBar.js

@@ -0,0 +1,115 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStatusData = exports.leafColumns = exports.StatusBar = void 0;
+var React = require("react");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+/**
+ * Represents the KendoReact Grid's StatusBar component.
+ */
+var StatusBar = function (props) {
+    var _a = props.data, data = _a === void 0 ? [] : _a;
+    return (React.createElement("div", { className: "k-selection-aggregates k-grid-selection-aggregates" }, data.map(function (item, index) { return (React.createElement("div", { key: index },
+        React.createElement("span", { className: "k-selection-aggregates-item-text" },
+            item.type,
+            ": "),
+        React.createElement("span", { className: "k-selection-aggregates-item-value" }, item.formattedValue))); })));
+};
+exports.StatusBar = StatusBar;
+exports.StatusBar.displayName = 'KendoReactGridStatusBar';
+;
+;
+/**
+ * @hidden
+ */
+var leafColumns = function (columns) {
+    var _a;
+    var result = columns.slice();
+    for (var i = 0; i < result.length; i++) {
+        while (result[i] && ((_a = result[i].children) === null || _a === void 0 ? void 0 : _a.length)) {
+            result.splice.apply(result, __spreadArray([i, 1], result[i].children, false));
+        }
+    }
+    return result;
+};
+exports.leafColumns = leafColumns;
+;
+/**
+ * Calculates the status data.
+ *
+ * @param args StatusDataArgs
+ * @returns StatusItem[]
+ */
+var getStatusData = function (args) {
+    var dataItems = args.dataItems, target = args.target, startColIndex = args.startColIndex, endColIndex = args.endColIndex, startRowIndex = args.startRowIndex, endRowIndex = args.endRowIndex;
+    var columns = (0, exports.leafColumns)(target.columns);
+    if (args.cell) {
+        columns = columns.slice(startColIndex, endColIndex + 1);
+    }
+    var getters = columns.map(function (c) { return c.field; }).filter(function (f) { return f && typeof f === 'string'; }).map(function (f) { return (0, kendo_react_common_1.getter)(f); });
+    var data = dataItems.slice(startRowIndex, endRowIndex + 1);
+    var grouped = { dates: [], numbers: [], booleans: [], others: [] };
+    var add = function (value) {
+        if (typeof value === 'number') {
+            grouped.numbers.push(value);
+        }
+        else if (typeof value === 'boolean') {
+            grouped.booleans.push(value);
+        }
+        else if (value instanceof Date) {
+            grouped.dates.push(value);
+        }
+        else if (value) {
+            grouped.others.push(value);
+        }
+    };
+    data.forEach(function (item) {
+        getters.forEach(function (fieldGetter) {
+            add(fieldGetter(item));
+        });
+    });
+    var datesAsNumbers = grouped.dates.map(function (d) { return d.getTime(); });
+    var isTrueCount = grouped.booleans.filter(function (bool) { return bool; }).length;
+    var isFalseCount = grouped.booleans.filter(function (bool) { return !bool; }).length;
+    var sum = grouped.numbers.length ? grouped.numbers.reduce(function (acc, curr) { return acc += curr; }, 0) : undefined;
+    var aggregates = {
+        sum: sum,
+        average: typeof sum === 'number' ? sum / grouped.numbers.length : undefined,
+        min: grouped.numbers.length ? Math.min.apply(Math, grouped.numbers) : undefined,
+        max: grouped.numbers.length ? Math.max.apply(Math, grouped.numbers) : undefined,
+        count: grouped.numbers.length + grouped.booleans.length + grouped.dates.length + grouped.others.length,
+        isTrue: isTrueCount > 0 ? isTrueCount : undefined,
+        isFalse: isFalseCount > 0 ? isFalseCount : undefined,
+        earliest: grouped.dates.length ? new Date(Math.min.apply(Math, datesAsNumbers)) : undefined,
+        latest: grouped.dates.length ? new Date(Math.max.apply(Math, datesAsNumbers)) : undefined
+    };
+    var format = function (value, key) {
+        if ((key === 'sum' || key === 'average') && typeof value === 'number') {
+            return value.toFixed(2);
+        }
+        else if ((key === 'earliest' || key === 'latest') && value instanceof Date) {
+            return value.toLocaleDateString();
+        }
+        else {
+            return String(value);
+        }
+    };
+    var result = [];
+    Object.keys(aggregates).forEach(function (a) {
+        var type = a;
+        var value = aggregates[type];
+        if (value !== undefined) {
+            result.push({ type: type, value: value, formattedValue: format(value, type) });
+        }
+    });
+    return result;
+};
+exports.getStatusData = getStatusData;

package/dist/npm/drag/GroupingIndicator.js

@@ -18,7 +18,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GroupingIndicator = void 0;
 var React = require("react");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
-var messages_1 = require("../messages");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
@@ -74,7 +73,6 @@ var GroupingIndicator = /** @class */ (function (_super) {
     }
     GroupingIndicator.prototype.render = function () {
         var _this = this;
-        var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var dir = this.props.dir;
         return (React.createElement(kendo_react_common_1.Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, ref: function (component) { _this.draggable = component; } },
             React.createElement("div", { className: "k-chip k-chip-md k-chip-solid k-chip-solid-base k-rounded-md", onClick: this.sortChange, role: "button", style: { touchAction: 'none' } },
@@ -82,7 +80,7 @@ var GroupingIndicator = /** @class */ (function (_super) {
                     React.createElement(kendo_react_common_1.IconWrap, { name: 'sort-' + dir + '-small', icon: dir === 'asc' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.sortDescSmallIcon, size: 'small' })),
                 React.createElement("span", { className: 'k-chip-content' }, this.props.title),
                 React.createElement("span", { className: "k-chip-actions" },
-                    React.createElement("span", { className: "k-chip-action k-chip-remove-action", onClick: this.groupRemove, "aria-label": localizationService.toLanguageString(messages_1.ungroupColumn, messages_1.messages[messages_1.ungroupColumn]) },
+                    React.createElement("span", { className: "k-chip-action k-chip-remove-action", onClick: this.groupRemove },
                         React.createElement(kendo_react_common_1.IconWrap, { name: 'x-circle', icon: kendo_svg_icons_1.xCircleIcon, size: 'small' }))))));
     };
     return GroupingIndicator;

package/dist/npm/footer/FooterRow.js

@@ -49,9 +49,8 @@ var FooterRow = /** @class */ (function (_super) {
                         : {},
                     className: (0, kendo_react_common_1.classNames)('k-table-td', column.locked && column.left !== undefined ? 'k-grid-footer-sticky' : ''),
                     key: index,
-                    role: 'columnfooter'
+                    role: 'gridcell'
                 },
-                _a['aria-selected'] = false,
                 _a['aria-colindex'] = column.ariaColumnIndex,
                 _a);
             var cellProps = __assign({ field: column.field, ariaColumnIndex: column.ariaColumnIndex }, tdProps);

package/dist/npm/header/GroupPanel.js

@@ -48,7 +48,7 @@ var GroupPanel = /** @class */ (function (_super) {
             }, onSortChange: function (event, dir) {
                 _this.onGroupSortChange(event, index, groupDesc, dir);
             }, onPress: _this.props.pressHandler, onDrag: _this.props.dragHandler, onRelease: _this.props.releaseHandler })); });
-        return (React.createElement("div", { ref: this.props.refCallback, className: "k-grouping-header", role: "toolbar", "aria-label": (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.groupPanelAriaLabel, messages_1.messages[messages_1.groupPanelAriaLabel]), "aria-controls": this.props.ariaControls },
+        return (React.createElement("div", { ref: this.props.refCallback, className: "k-grouping-header", role: "toolbar", "aria-label": (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.groupPanelAriaLabel, messages_1.messages[messages_1.groupPanelAriaLabel]), "aria-controls": this.props.ariaControls || '' },
             React.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, groups),
             React.createElement("div", { className: "k-grouping-drop-container" },
                 !groups.length && (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.groupPanelEmpty, messages_1.messages[messages_1.groupPanelEmpty]),