@progress/kendo-react-grid 6.1.1 → 7.0.0-develop.1

package/dist/es/Grid.js

@@ -1,1042 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 * as PropTypes from 'prop-types';
-import { dispatchEvent, classNames, getter, guid, setScrollbarWidth, canUseDOM, memoizeOne, kendoThemeMaps } from '@progress/kendo-react-common';
-import { tableColumnsVirtualization, Pager, mapColumns, updateLeft, updateRight, isRtl, tableKeyboardNavigation, TableKeyboardNavigationContext, tableKeyboardNavigationScopeAttributes, tableKeyboardNavigationTools as navigationTools, tableKeyboardNavigationBodyAttributes, getSelectionOptions, TableSelection, DropClue, DragClue } from '@progress/kendo-react-data-tools';
-import { GridSelectionCell } from './cells/GridSelectionCell';
-import { GridHierarchyCell } from './cells/GridHierarchyCell';
-import { GridEditCell } from './cells/GridEditCell';
-import { Header } from './header/Header';
-import { HeaderRow } from './header/HeaderRow';
-import { FilterRow } from './header/FilterRow';
-import { GroupPanel } from './header/GroupPanel';
-import { Footer } from './footer/Footer';
-import { VirtualScroll } from './VirtualScroll';
-import { RowHeightService, VirtualScrollFixed } from './VirtualScrollFixed';
-import { ColumnResize } from './drag/ColumnResize';
-import { CommonDragLogic } from './drag/CommonDragLogic';
-import { getNestedValue, flatData, readColumns, autoGenerateColumns, firefox, firefoxMaxHeight, sanitizeColumns, resolveCells, getColumnWidth } from './utils/index';
-import { GridCell } from './cells/GridCell';
-import { GridGroupCell } from './cells/GridGroupCell';
-import { GridRow } from './rows/GridRow';
-import { GridHeaderSelectionCell } from './header/GridHeaderSelectionCell';
-import { GridNoRecords } from './GridNoRecords';
-import { operators } from './filterCommon';
-import { FooterRow } from './footer/FooterRow';
-import { normalize } from './paging/GridPagerSettings';
-import { pagerMessagesMap } from './messages';
-import { validatePackage, shouldShowValidationUI, WatermarkOverlay } from '@progress/kendo-react-common';
-import { packageMetadata } from './package-metadata';
-import { GridDetailCell } from './cells/GridDetailCell';
-import { GridDetailHierarchyCell } from './cells/GridDetailHierarchyCell';
-/**
- * Represents the [KendoReact Grid component]({% slug overview_grid %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    constructor(props) {
- *        super(props);
- *        this.state = {
- *            data: [
- *                { 'foo': 'A1', 'bar': 'B1' },
- *                { 'foo': 'A2', 'bar': 'B2' },
- *                { 'foo': 'A3', 'bar': 'B2' }
- *            ]
- *        };
- *    }
- *    render() {
- *        return (
- *            <Grid
- *                data={this.state.data}
- *                reorderable={true}
- *            >
- *                <GridColumn field="foo" />
- *                <GridColumn field="bar" />
- *            </Grid>
- *        );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-var Grid = /** @class */ (function (_super) {
-    __extends(Grid, _super);
-    function Grid(props) {
-        var _this = _super.call(this, props) || this;
-        _this._columns = [];
-        _this._columnsMap = [[]];
-        _this._columnsMutations = 0;
-        _this._resized = false;
-        _this._shouldUpdateLeftRight = true;
-        _this.contextStateRef = { current: undefined };
-        _this.navigationStateRef = { current: undefined };
-        _this._data = [];
-        _this._slicedData = undefined;
-        _this.wrapperScrollTop = 0;
-        _this.showLicenseWatermark = false;
-        _this.headerRef = React.createRef();
-        _this.headerElementRef = React.createRef();
-        _this._element = null;
-        _this.tableElement = null;
-        _this.containerRef = React.createRef();
-        _this.tableBodyRef = React.createRef();
-        _this._footer = null;
-        _this.forceUpdateTimeout = undefined;
-        _this.isRtl = false;
-        _this._gridId = guid();
-        _this._gridRoleElementId = guid(); // Needed for aria-control accessibility attribute
-        _this.observer = null;
-        _this.handleIntersection = function (entries) {
-            var options = { rowIndex: _this.rowIndex };
-            entries.forEach(function (entry) {
-                if (!entry.isIntersecting) {
-                    _this.setCurrentOnTop(options);
-                }
-            });
-        };
-        _this.setCurrentOnTop = function (options) {
-            if (!_this.vs.container || _this.props.scrollable === 'none') {
-                return;
-            }
-            if (_this.observer) {
-                _this.observer.disconnect();
-            }
-            var rowIndex = options.rowIndex;
-            if (_this.props.scrollable === 'virtual') {
-                _this.vs.askedSkip = rowIndex;
-                _this.vs.container.scroll(0, Math.round(_this.vs.askedSkip / _this.vs.total * _this.vs.container.scrollHeight));
-            }
-            else if (_this.element) {
-                var selectedRow = rowIndex < 1
-                    ? _this.element.querySelector("tbody > tr:nth-child(".concat(1, ")"))
-                    : _this.element.querySelector("tbody > tr:nth-child(".concat(rowIndex + 1, ")"));
-                if (selectedRow && _this.containerRef.current) {
-                    _this.containerRef.current.scrollTop = selectedRow.offsetTop;
-                }
-            }
-        };
-        /**
-         * Method to allow the scroll to be set to a specific row index when the Grid is scrollable. It is zero based.
-         *
-         * @param options - Object, containing the rowIndex to which is going to be scrolled.
-         */
-        _this.scrollIntoView = function (options) {
-            if (!_this.vs.container || _this.props.scrollable === 'none') {
-                return;
-            }
-            _this.rowIndex = options.rowIndex;
-            var rowIndex = options.rowIndex;
-            var element = _this.element;
-            if (_this.observer && element) {
-                _this.observer.disconnect();
-                var target = element.querySelector("[absolute-row-index=\"".concat(rowIndex, "\"]"));
-                if (target) {
-                    _this.observer.observe(target);
-                }
-                else {
-                    _this.setCurrentOnTop(options);
-                }
-            }
-        };
-        /**
-         * Method to fit columns according to their content.
-         *
-         * @param columnIds - Array of column ids to be fitted.
-         */
-        _this.fitColumns = function (columnIds) {
-            _this.columnResize.dblClickHandler(null, columnIds);
-        };
-        _this.onContextMenu = function (event, dataItem, field) {
-            if (_this.props.onContextMenu) {
-                var ev = {
-                    target: _this,
-                    syntheticEvent: event,
-                    nativeEvent: event.nativeEvent,
-                    dataItem: dataItem,
-                    field: field
-                };
-                _this.props.onContextMenu.call(undefined, ev);
-            }
-        };
-        _this.getVirtualScroll = function (props) {
-            var rowHeight = props.rowHeight, detailRowHeight = props.detailRowHeight, detail = props.detail, expandField = props.expandField, groupable = props.groupable;
-            var hasAllData = _this.isAllData();
-            var hasRowHeight = rowHeight !== undefined && rowHeight > 0;
-            var hasDetailRowHeight = detailRowHeight !== undefined && detailRowHeight > 0;
-            var isGroupable = groupable === true || (typeof groupable === 'object' && groupable.enabled !== false);
-            var hasDetails = Boolean(detail && expandField);
-            if (!hasRowHeight ||
-                (isGroupable && !hasAllData) ||
-                (hasDetails && (!hasDetailRowHeight || !hasAllData))) {
-                return VirtualScroll;
-            }
-            return VirtualScrollFixed;
-        };
-        _this.isAllData = function () {
-            var _a = _this.props, data = _a.data, total = _a.total;
-            if (Array.isArray(data)) {
-                return data.length === total;
-            }
-            else if (data) {
-                return total === data.total;
-            }
-            return false;
-        };
-        _this.initializeVirtualization = function (total, groupable) {
-            _this.reInitVirtualization(_this.props.scrollable === 'virtual', _this.props.total, _this.props.filter, _this.props.group, _this.props.sort, groupable || _this.props.rowHeight === undefined || _this.props.rowHeight === 0);
-            _this.vs.fixedScroll = _this.props.fixedScroll || false;
-            _this.vs.PageChange = _this.pageChange;
-            _this.vs.realSkip = _this.props.skip || 0;
-            _this.vs.pageSize = (_this.props.take !== undefined ? _this.props.take : _this.props.pageSize) || 0;
-            _this.vs.scrollableVirtual = (_this.props.scrollable === 'virtual');
-            _this.vs.total = total;
-            _this.vs.propsSkip = (_this.props.skip || 0) + (_this.props.scrollable === 'virtual' ?
-                _this.vs.topCacheCount + (_this.vs.attendedSkip - (_this.props.skip || 0)) : 0);
-            if (_this.props.rowHeight !== undefined && _this.props.rowHeight > 0 && !groupable) {
-                var containerHeight = _this.props.rowHeight * total;
-                _this.vs.containerHeight = firefox ? Math.min(firefoxMaxHeight, containerHeight) : containerHeight;
-            }
-            else {
-                _this.vs.containerHeight = 1533915;
-            }
-            _this.vs.containerRef = _this.containerRef;
-            _this.vs.tableBodyRef = _this.tableBodyRef;
-            _this.vs.table = _this.tableElement;
-            _this._slicedData = undefined;
-            if (_this.vs instanceof VirtualScrollFixed) {
-                var _a = _this.props, _b = _a.rowHeight, rowHeight = _b === void 0 ? 0 : _b, detail = _a.detail, expandField = _a.expandField;
-                var _c = _this.props.detailRowHeight, detailRowHeight = _c === void 0 ? 0 : _c;
-                detailRowHeight = Boolean(detail && expandField) ? detailRowHeight : rowHeight;
-                if (_this.isAllData()) {
-                    _this.vs.total = _this._data.length;
-                    _this._slicedData = _this._data.slice(_this.vs.realSkip, _this.vs.realSkip + _this.vs.pageSize);
-                    _this.vs.rowHeightService = _this.rowHeightService(_this.vs, _this._data.length, rowHeight, detailRowHeight, _this._data);
-                }
-                else {
-                    _this.vs.rowHeightService = new RowHeightService(total, rowHeight, detailRowHeight);
-                }
-                var containerHeight = _this.vs.rowHeightService.totalHeight();
-                _this.vs.containerHeight = firefox ? Math.min(firefoxMaxHeight, containerHeight) : containerHeight;
-            }
-        };
-        _this.scrollHandler = function (event) {
-            if (event.target !== event.currentTarget) {
-                return;
-            }
-            clearTimeout(_this.forceUpdateTimeout);
-            _this.vs.table = _this.tableElement;
-            var scrollLeft = event.currentTarget.scrollLeft;
-            var scrollTop = event.currentTarget.scrollTop;
-            if (_this.props.columnVirtualization && (!_this.vs.scrollableVirtual || scrollTop === _this.wrapperScrollTop)) {
-                _this.forceUpdateTimeout = window.setTimeout(function () { _this.forceUpdate(); }, 0);
-            }
-            if (_this._header) {
-                _this._header.setScrollLeft(scrollLeft);
-            }
-            if (_this._footer) {
-                _this._footer.setScrollLeft(scrollLeft);
-            }
-            if (_this.vs && scrollTop !== _this.wrapperScrollTop) {
-                _this.vs.scrollHandler(event);
-            }
-            dispatchEvent(_this.props.onScroll, event, _this, undefined);
-            _this.wrapperScrollTop = scrollTop;
-        };
-        _this.onKeyDown = function (event) {
-            tableKeyboardNavigation.onKeyDown(event, {
-                contextStateRef: _this.contextStateRef,
-                navigationStateRef: _this.navigationStateRef,
-                onNavigationAction: _this.onNavigationAction
-            });
-            if (_this.props.onKeyDown) {
-                var _a = getSelectionOptions(_this.props.selectable), mode = _a.mode, cell = _a.cell;
-                var ev = __assign({ dataItems: _this.getLeafDataItems(), mode: mode, cell: cell, componentId: _this._gridId, selectedField: _this.props.selectedField }, _this.getArguments(event));
-                _this.props.onKeyDown.call(undefined, ev);
-            }
-        };
-        _this.onFocus = function (event) {
-            tableKeyboardNavigation.onFocus(event, {
-                contextStateRef: _this.contextStateRef
-            });
-        };
-        _this.onNavigationAction = function (options) {
-            if (_this.props.onNavigationAction) {
-                var ev = __assign({ focusElement: options.focusElement }, _this.getArguments(options.event));
-                _this.props.onNavigationAction.call(undefined, ev);
-            }
-        };
-        _this.rowClick = function (e, item) {
-            if (_this.props.onRowClick && e.target.nodeName === 'TD') {
-                _this.props.onRowClick.call(undefined, __assign({ dataItem: item.dataItem }, _this.getArguments(e)));
-            }
-        };
-        _this.rowDblClick = function (e, item) {
-            if (_this.props.onRowDoubleClick && e.target.nodeName === 'TD') {
-                _this.props.onRowDoubleClick.call(undefined, __assign({ dataItem: item.dataItem }, _this.getArguments(e)));
-            }
-        };
-        _this.itemChange = function (event) {
-            var itemChange = _this.props.onItemChange;
-            if (event.field === _this.props.expandField || _this.props.group && event.field === undefined) {
-                var expandChange = _this.props.onExpandChange;
-                if (expandChange) {
-                    expandChange.call(undefined, __assign(__assign({}, _this.getArguments(event.syntheticEvent)), { dataItem: event.dataItem, dataIndex: event.dataIndex, value: event.value }));
-                }
-                return;
-            }
-            if (itemChange) {
-                itemChange.call(undefined, __assign(__assign({}, _this.getArguments(event.syntheticEvent)), { dataItem: event.dataItem, field: event.field, value: event.value }));
-            }
-        };
-        _this.onHeaderSelectionChange = function (event) {
-            if (_this.props.onHeaderSelectionChange) {
-                _this.props.onHeaderSelectionChange.call(undefined, {
-                    field: event.field,
-                    nativeEvent: event.syntheticEvent && event.syntheticEvent.nativeEvent,
-                    syntheticEvent: event.syntheticEvent,
-                    target: _this,
-                    dataItems: _this.getLeafDataItems(),
-                    selectedField: _this.props.selectedField
-                });
-            }
-        };
-        _this.selectionRelease = function (event) {
-            if (_this.props.onSelectionChange) {
-                var selectionEvent = __assign({ syntheticEvent: undefined, target: _this, selectedField: _this.props.selectedField || '', componentId: _this._gridId, dataItems: _this.getLeafDataItems(), dataItem: null }, event);
-                _this.props.onSelectionChange.call(undefined, selectionEvent);
-            }
-        };
-        _this.pageChange = function (page, syntheticEvent, targetEvent) {
-            _this.raiseDataEvent(_this.props.onPageChange, { page: page }, { skip: page.skip, take: page.take }, syntheticEvent, targetEvent);
-        };
-        _this.pagerPageChange = function (event) {
-            _this.pageChange({ skip: event.skip, take: event.take }, event.syntheticEvent, event.targetEvent);
-        };
-        _this.sortChange = function (sort, syntheticEvent) {
-            _this.raiseDataEvent(_this.props.onSortChange, { sort: sort }, __assign({ sort: sort }, (_this.props.scrollable === 'virtual' ? { skip: 0 } : {})), syntheticEvent);
-        };
-        _this.filterChange = function (filter, syntheticEvent) {
-            _this.raiseDataEvent(_this.props.onFilterChange, { filter: filter }, { filter: filter || undefined, skip: 0 }, syntheticEvent);
-        };
-        _this.groupChange = function (groups, event) {
-            var syntheticEvent = event.nativeEvent ?
-                event : { nativeEvent: event.nativeEvent || event.originalEvent };
-            _this.raiseDataEvent(_this.props.onGroupChange, { group: groups }, { group: groups, skip: 0 }, syntheticEvent);
-        };
-        _this.onResize = function (index, newWidth, oldWidth, nativeEvent, end, targetId) {
-            _this.resetTableWidth();
-            _this._shouldUpdateLeftRight = true;
-            _this._resized = true;
-            _this._columnsMutations++;
-            if (_this.props.onColumnResize) {
-                _this.props.onColumnResize.call(undefined, {
-                    columns: _this.columns,
-                    nativeEvent: nativeEvent,
-                    targetColumnId: targetId,
-                    index: index,
-                    newWidth: newWidth,
-                    oldWidth: oldWidth,
-                    end: end,
-                    target: _this
-                });
-            }
-        };
-        _this.reInitVirtualization = memoizeOne(function (_vScrolling, _total, _filter, _group, _sort, useCached) {
-            _this.vs.reset();
-            var VS = _this.getVirtualScroll(_this.props);
-            _this.vs = new VS(useCached);
-        });
-        _this.flatData = memoizeOne(function (propsData, groupingFooter, skip, group, expandField, _filter, _sort) {
-            var flattedData = [];
-            var resolvedGroupsCount = flatData(flattedData, propsData, groupingFooter, { index: skip }, group !== undefined, expandField);
-            return { flattedData: flattedData, resolvedGroupsCount: resolvedGroupsCount };
-        });
-        _this.rowHeightService = memoizeOne(function (_vs, total, rowHeight, detailRowHeight, data) {
-            return new RowHeightService(total, rowHeight, detailRowHeight, data);
-        });
-        _this.childrenToArray = memoizeOne(function (children) {
-            return React.Children.toArray(children);
-        });
-        _this.readColumns = memoizeOne(function (children, idPrefix, _mutationsCount) {
-            var columnElements = children.filter(function (child) { return child && child.type && child.type.displayName === 'KendoReactGridColumn'; });
-            return readColumns(columnElements, _this.columns, { prevId: 0, idPrefix: idPrefix });
-        });
-        _this.mapColumns = memoizeOne(function (columns) {
-            return mapColumns(columns);
-        });
-        _this.configureColumns = memoizeOne(function (columns, groupCount, idPrefix) {
-            if (_this.props.selectedField) {
-                columns.filter(function (c) { return c.field === _this.props.selectedField; }).forEach(function (c) {
-                    c.width = c.width || '50px';
-                    c.cell = c.cell || GridSelectionCell;
-                    c.headerCell = c.headerCell || GridHeaderSelectionCell;
-                });
-            }
-            var defaultServiceProps = {
-                id: '',
-                resizable: true,
-                width: '32px',
-                title: ' ',
-                declarationIndex: -1,
-                orderIndex: -1,
-                children: [],
-                parentIndex: -1,
-                depth: 0,
-                colSpan: 0,
-                rowSpan: 0,
-                left: 0,
-                right: 0,
-                index: 0,
-                rightBorder: false,
-                ariaColumnIndex: 0,
-                isAccessible: true
-            };
-            var columnIndexOffset = 0;
-            if (_this.props.expandField && (_this.props.onExpandChange) && _this.props.detail) {
-                columns.unshift(__assign(__assign({}, defaultServiceProps), { cell: GridHierarchyCell, field: _this.props.expandField, headerClassName: 'k-hierarchy-cell k-header', id: navigationTools.generateNavigatableId("".concat(_this._columns.length), idPrefix, 'column') }));
-                columnIndexOffset++;
-            }
-            for (var i = 0; i < groupCount; i++) {
-                columns.unshift(__assign(__assign({}, defaultServiceProps), { isAccessible: false, cell: GridGroupCell, field: 'value', locked: _this.props.lockGroups }));
-                columnIndexOffset++;
-            }
-            columns.slice(columnIndexOffset).forEach(function (c) { return c.parentIndex >= 0 && (c.parentIndex += columnIndexOffset); });
-        });
-        _this.getHeaderRow = memoizeOne(function (sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, columns, columnsMap, isHeaderRtl) {
-            return (React.createElement(HeaderRow, { cells: _this.props.cells, sort: sort, sortable: sortable, sortChange: _this.sortChange, group: group || [], groupable: groupable, groupChange: _this.groupChange, filter: filter, filterable: filterable, filterOperators: filterOperators, filterChange: _this.filterChange, columnMenu: columnMenu, selectionChange: _this.onHeaderSelectionChange, columns: columns, columnResize: _this.columnResize, pressHandler: _this.dragLogic.pressHandler, dragHandler: _this.dragLogic.dragHandler, releaseHandler: _this.dragLogic.releaseHandler, columnsMap: columnsMap, cellRender: headerCellRender, isRtl: isHeaderRtl, dragClue: _this.dragLogic.dragClueRef, headerRef: _this.headerElementRef, containerRef: _this.containerRef }));
-        });
-        _this.resolveTitle = function (field) {
-            var column = _this._columns.find(function (c) { return c.field === field; });
-            var title = column && (column.title || column.field);
-            return title === undefined ? field : title;
-        };
-        _this.getLeafDataItems = function () {
-            return _this._data.filter(function (item) { return item.rowType === 'data'; }).map(function (item) { return item.dataItem; });
-        };
-        validatePackage(packageMetadata);
-        _this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
-        var groupable = _this.props.groupable === true ||
-            (typeof _this.props.groupable === 'object') && _this.props.groupable.enabled !== false;
-        var VS = _this.getVirtualScroll(props);
-        _this.vs = new VS(groupable || props.rowHeight === undefined || props.rowHeight === 0);
-        _this.dragLogic = new CommonDragLogic(_this.columnReorder.bind(_this), _this.groupReorder.bind(_this), _this.columnToGroup.bind(_this));
-        _this.columnResize = new ColumnResize(_this.onResize);
-        tableKeyboardNavigation.onConstructor({
-            navigatable: Boolean(props.navigatable),
-            contextStateRef: _this.contextStateRef,
-            navigationStateRef: _this.navigationStateRef,
-            idPrefix: _this._gridId
-        });
-        return _this;
-    }
-    Object.defineProperty(Grid.prototype, "columns", {
-        /* eslint-disable max-len */
-        /**
-         * A getter of the current columns. Gets the current column width or current columns, or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref` callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console.
-         *
-         * @example
-         * ```jsx
-         * class App extends React.Component {
-         *     constructor(props) {
-         *         super(props);
-         *         this.state = {
-         *             data: [
-         *                 { 'foo': 'A1', 'bar': 'B1' },
-         *                 { 'foo': 'A2', 'bar': 'B2' },
-         *                 { 'foo': 'A3', 'bar': 'B2' }
-         *             ]
-         *         };
-         *         this.grid = null;
-         *     }
-         *     render() {
-         *         return (
-         *             <div>
-         *                 <Grid
-         *                     data={this.state.data}
-         *                     reorderable={true}
-         *                     ref={(g) => { this.grid = g; }}
-         *                 >
-         *                     <GridColumn field="foo" />
-         *                     <GridColumn field="bar" />
-         *                 </Grid>
-         *                 <button onClick={() => console.log(JSON.stringify(this.grid.columns))}>
-         *                     log current properties into browser console.
-         *                 </button>
-         *             </div>
-         *         );
-         *     }
-         * }
-         * ReactDOM.render(<App />, document.querySelector('my-app'));
-         * ```
-         */
-        // tslint:enable:max-line-length
-        get: function () {
-            var shuffledColumns = this._columns.filter(function (q) { return q.declarationIndex >= 0 && q.parentIndex === -1; });
-            return sanitizeColumns(shuffledColumns);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Grid.prototype, "element", {
-        /**
-         * Returns the HTML element of the Grid component.
-         */
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Grid.prototype, "document", {
-        get: function () {
-            if (!canUseDOM) {
-                return;
-            }
-            // useful only for user actions
-            return (this.element && this.element.ownerDocument) || document;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Grid.prototype, "_header", {
-        get: function () {
-            return this.headerRef.current;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    Grid.prototype.componentDidMount = function () {
-        this.resetTableWidth();
-        setScrollbarWidth();
-        var rtl = isRtl(this.element);
-        this.isRtl = rtl;
-        tableKeyboardNavigation.onComponentDidMount({
-            scope: this.element || undefined,
-            contextStateRef: this.contextStateRef,
-            navigationStateRef: this.navigationStateRef
-        });
-        if (this.isRtl) {
-            this.forceUpdate();
-        }
-        var observerOptions = {
-            rootMargin: '0px',
-            threshold: 0.9
-        };
-        this.observer = (canUseDOM && window.IntersectionObserver &&
-            new window.IntersectionObserver(this.handleIntersection, observerOptions) || null);
-    };
-    /**
-     * @hidden
-     */
-    Grid.prototype.getSnapshotBeforeUpdate = function () {
-        tableKeyboardNavigation.onGetSnapshotBeforeUpdate({
-            document: this.document,
-            contextStateRef: this.contextStateRef,
-            navigationStateRef: this.navigationStateRef
-        });
-        return null;
-    };
-    /**
-     * @hidden
-     */
-    Grid.prototype.componentDidUpdate = function () {
-        this.resetTableWidth();
-        setScrollbarWidth();
-        if (this.vs.tableTransform && this.vs.table) {
-            this.vs.table.style.transform = this.vs.tableTransform;
-            this.vs.tableTransform = '';
-        }
-        tableKeyboardNavigation.onComponentDidUpdate({
-            scope: this.element || undefined,
-            contextStateRef: this.contextStateRef,
-            navigationStateRef: this.navigationStateRef
-        });
-    };
-    /**
-     * @hidden
-     */
-    Grid.prototype.componentWillUnmount = function () {
-        clearTimeout(this.forceUpdateTimeout);
-    };
-    /**
-     * @hidden
-     */
-    Grid.prototype.render = function () {
-        var _a, _b, _c, _d;
-        var _this = this;
-        var _e;
-        var total = this.props.total || 0;
-        var idPrefix = navigationTools.getIdPrefix(this.navigationStateRef);
-        var propsData = [];
-        if (Array.isArray(this.props.data)) {
-            propsData = this.props.data;
-            total = total || this.props.data.length;
-        }
-        else if (this.props.data) {
-            propsData = this.props.data.data;
-            total = total || this.props.data.total;
-        }
-        var groupingFooter = (typeof this.props.groupable === 'object') && this.props.groupable.footer || 'none';
-        var _f = this.flatData(propsData, groupingFooter, this.props.skip || 0, this.props.group, this.props.expandField, this.props.filter, this.props.sort), resolvedGroupsCount = _f.resolvedGroupsCount, flattedData = _f.flattedData;
-        this._data = flattedData;
-        var groupable = this.props.groupable === true ||
-            (typeof this.props.groupable === 'object') && this.props.groupable.enabled !== false;
-        this.columnResize.resizable = this.props.resizable || false;
-        this.dragLogic.reorderable = this.props.reorderable || false;
-        this.dragLogic.groupable = groupable;
-        var tableUserSelect = this.props.selectable && this.props.selectable.drag ? 'none' : undefined;
-        this.initializeVirtualization(total, groupable);
-        var children = this.childrenToArray(this.props.children);
-        this.initColumns(children, resolvedGroupsCount);
-        var toolbar = children.map(function (child) {
-            if (child && child.type && child.type.displayName === 'KendoReactGridToolbar') {
-                return React.cloneElement(child, __assign(__assign({}, child.props), { ariaControls: _this._gridRoleElementId }));
-            }
-            return null;
-        });
-        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, onContextMenu: this.onContextMenu }));
-        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;
-        var header = (React.createElement(Header, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', scrollableDataElement: function () { return _this.vs.container; }, draggable: this.props.reorderable || groupable, ref: this.headerRef, elemRef: this.headerElementRef, headerRow: this.getHeaderRow(sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, this._columns, this._columnsMap, this.isRtl), filterRow: this.props.filterable && React.createElement(FilterRow, { cells: this.props.cells, size: this.props.size, columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || operators, filterChange: this.filterChange, sort: this.props.sort, cellRender: this.props.filterCellRender, isRtl: this.isRtl, ariaRowIndex: this._columnsMap.length + 1 }) || undefined, cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: getColumnWidth(column) })); }) }));
-        var scrollLeft = this.vs && this.vs.container && this.vs.container.scrollLeft || 0;
-        var tableWidth = parseFloat(((this.props.style || {}).width || '').toString());
-        var _j = tableColumnsVirtualization({
-            enabled: this.props.columnVirtualization,
-            columns: leafColumns,
-            tableViewPortWidth: tableWidth,
-            scrollLeft: scrollLeft
-        }), colSpans = _j.colSpans, isColHidden = _j.hiddenColumns;
-        var dataRow = function (item, rowId, rowDataIndex) {
-            var isInEdit = false;
-            var selectedValue = _this.props.selectedField ? getNestedValue(_this.props.selectedField, item.dataItem) : undefined;
-            return {
-                row: leafColumns.map(function (column, columnIndex) {
-                    if (isColHidden[columnIndex]) {
-                        return null;
-                    }
-                    var columnKey = column.id ? column.id : columnIndex;
-                    var className = "".concat(column.className ? column.className + ' ' : '')
-                        + "".concat(column.locked ? 'k-grid-content-sticky' : '');
-                    var style = column.left !== undefined
-                        ? !_this.isRtl
-                            ? { left: column.left, right: column.right }
-                            : { left: column.right, right: column.left }
-                        : {};
-                    var currentColumnIsInEdit = false;
-                    if (column.editable && _this.props.editField) {
-                        var inEdit = getNestedValue(_this.props.editField, item.dataItem);
-                        if (inEdit && (inEdit === true || inEdit === column.field)) {
-                            isInEdit = true;
-                            currentColumnIsInEdit = true;
-                        }
-                    }
-                    var Cell = column.cell || (currentColumnIsInEdit && GridEditCell) || GridCell;
-                    return (React.createElement(Cell, { onContextMenu: _this.onContextMenu, key: columnKey, locked: _this.props.lockGroups, id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix), colSpan: colSpans[columnIndex], dataItem: item.dataItem, field: column.field, editor: column.editor, format: column.format, className: className, render: _this.props.cellRender, cells: resolveCells(_this.props.cells, column.cells), onChange: _this.itemChange, selectionChange: (_this.props.onSelectionChange) ?
-                            (function (e) { _this.selectionChange({ event: e, dataItem: item.dataItem, dataIndex: rowDataIndex, columnIndex: columnIndex }); }) :
-                            undefined, columnIndex: columnIndex, columnsCount: leafColumns.length, rowType: item.rowType, level: item.level, expanded: item.expanded, dataIndex: item.dataIndex, style: style, ariaColumnIndex: column.ariaColumnIndex, isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(columnIndex) > -1 }));
-                }),
-                isInEdit: isInEdit,
-                isSelected: typeof selectedValue === 'boolean' && selectedValue
-            };
-        };
-        var hiddenRows = 0;
-        if (this.props.scrollable === 'virtual') {
-            for (var i = 0; i < this.vs.topCacheCount + this.vs.attendedSkip - (this.props.skip || 0); i++) {
-                var item = this._data.shift();
-                if (item) {
-                    this._data.push(item);
-                    hiddenRows++;
-                    if (item.rowType === 'groupHeader') {
-                        i--;
-                    }
-                }
-                else {
-                    break;
-                }
-            }
-        }
-        var hidden = function (index) {
-            return (index >= _this._data.length - hiddenRows);
-        };
-        var absoluteDataIndex = this.vs.realSkip || 0;
-        var body = [];
-        var rowIndexStart = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1;
-        var currentAriaRowIndex = 0;
-        if (this._data.length) {
-            var dataIndex_1 = -1;
-            var detailRowCount_1 = 0;
-            (this._slicedData || this._data).forEach(function (item, rowIndex) {
-                if (item.rowType === 'data') {
-                    absoluteDataIndex++;
-                    dataIndex_1++;
-                }
-                var isAlt = absoluteDataIndex % 2 === 0;
-                var dataItemKey = _this.props.dataItemKey && getter(_this.props.dataItemKey)(item.dataItem);
-                var absoluteIndex = rowIndex + (_this.vs.realSkip || 0);
-                var rowId = dataItemKey ? dataItemKey : 'ai' + absoluteIndex;
-                var detailRowId = rowId + '_1';
-                var gridRow = dataRow(item, rowId, dataIndex_1);
-                currentAriaRowIndex = absoluteIndex + rowIndexStart + detailRowCount_1;
-                body.push((React.createElement(GridRow, { key: rowId, dataItem: item.dataItem, isAltRow: isAlt, isInEdit: gridRow.isInEdit, rowType: item.rowType, isHidden: hidden(rowIndex), onClick: function (e) { return _this.rowClick(e, item); }, onDoubleClick: function (e) { return _this.rowDblClick(e, item); }, selectedField: _this.props.selectedField, rowHeight: _this.props.rowHeight, render: _this.props.rowRender, ariaRowIndex: currentAriaRowIndex, absoluteRowIndex: absoluteIndex, dataIndex: dataIndex_1, isSelected: gridRow.isSelected }, gridRow.row)));
-                if (_this.props.detail && item.rowType === 'data' && item.expanded) {
-                    var detailColspan = (leafColumns.length
-                        - (_this.props.expandField ? 1 : 0)
-                        - (_this.props.group ? _this.props.group.length : 0)) || 1;
-                    detailRowCount_1++;
-                    currentAriaRowIndex = absoluteIndex + rowIndexStart + detailRowCount_1;
-                    body.push((React.createElement("tr", { key: detailRowId, className: classNames('k-table-row', isAlt ? 'k-detail-row k-table-alt-row k-alt' : 'k-detail-row'), style: { visibility: hidden(rowIndex) ? 'hidden' : '', height: _this.props.detailRowHeight }, role: "row", "aria-rowindex": currentAriaRowIndex },
-                        _this.props.group && _this.props.group.map(function (gr, idx) {
-                            var _a;
-                            var columnStyle = (_a = gridRow === null || gridRow === void 0 ? void 0 : gridRow.row[idx]) === null || _a === void 0 ? void 0 : _a.props.style;
-                            var style = columnStyle
-                                ? !_this.isRtl
-                                    ? { left: columnStyle.left, right: columnStyle.right }
-                                    : { left: columnStyle.right, right: columnStyle.left }
-                                : {};
-                            return (React.createElement(GridGroupCell, { id: '', dataIndex: item.dataIndex, field: gr.field, dataItem: item.dataItem, key: idx, style: style, ariaColumnIndex: 1 + idx, isSelected: false, locked: _this.props.lockGroups, isRtl: _this.isRtl, cells: _this.props.cells }));
-                        }),
-                        _this.props.expandField &&
-                            React.createElement(GridDetailHierarchyCell, { id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dhcell"), idPrefix) }),
-                        React.createElement(GridDetailCell, { onContextMenu: _this.onContextMenu, dataItem: item.dataItem, dataIndex: item.dataIndex, colSpan: detailColspan, ariaColIndex: 2 + (_this.props.group ? _this.props.group.length : 0), detail: _this.props.detail, id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dcell"), idPrefix) }))));
-                }
-            });
-        }
-        else {
-            body.push((React.createElement("tr", { key: "no-records", className: "k-table-row k-grid-norecords", role: 'row', "aria-rowindex": rowIndexStart },
-                React.createElement("td", { className: 'k-table-td', colSpan: leafColumns.length, role: 'gridcell' }, noRecords.length ? noRecords : React.createElement(GridNoRecords, null)))));
-        }
-        var pagerProps = __assign({ size: this.props.size, onPageChange: this.pagerPageChange, total: total, dir: this.isRtl ? 'rtl' : undefined, skip: this.vs.propsSkip || 0, take: (this.props.take !== undefined ? this.props.take : this.props.pageSize) || 10, messagesMap: pagerMessagesMap }, (normalize(this.props.pageable || {})));
-        var pager = this.props.pager ? React.createElement(this.props.pager, __assign({}, pagerProps)) : React.createElement(Pager, __assign({ className: "k-grid-pager" }, pagerProps));
-        var sorted = function (field) {
-            return _this.props.sort && _this.props.sort.filter(function (descriptor) { return descriptor.field === field; }).length > 0;
-        };
-        var footerCols = function (column, index) {
-            return (React.createElement("col", { key: index.toString(), width: getColumnWidth(column) }));
-        };
-        var footer = (Boolean((_e = this.props.cells) === null || _e === void 0 ? void 0 : _e.footerCell)
-            || this._columns.some(function (c) { var _a; return Boolean(c.footerCell || Boolean((_a = c.cells) === null || _a === void 0 ? void 0 : _a.footerCell)); }))
-            ? (React.createElement(Footer, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', ref: function (f) { return _this._footer = f; }, row: React.createElement(FooterRow, { cells: this.props.cells, columns: this._columns, isRtl: this.isRtl, ariaRowIndex: currentAriaRowIndex + 1 }), cols: leafColumns.map(footerCols) })) : null;
-        var colGroups = (React.createElement("colgroup", { ref: function (c) {
-                _this.columnResize.colGroupMain = c;
-            } }, leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), className: sorted(column.field) ? 'k-sorted' : undefined, width: getColumnWidth(column) })); })));
-        var enableDragClues = this.dragLogic.reorderable || this.dragLogic.groupable;
-        var tableDisplay = this.props.columnVirtualization ? 'block' : 'table';
-        if (this.props.scrollable === 'none') {
-            return (React.createElement(TableKeyboardNavigationContext.Provider, { value: this.contextStateRef.current },
-                React.createElement("div", __assign({ id: this.props.id, style: this.props.style, className: classNames('k-grid', (_a = {
-                            'k-grid-md': !this.props.size
-                        },
-                        _a["k-grid-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                        _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("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)),
-                    enableDragClues && (React.createElement(React.Fragment, null,
-                        React.createElement(DropClue, { ref: this.dragLogic.refDropElementClue }),
-                        React.createElement(DragClue, { ref: this.dragLogic.refDragElementClue })))),
-                statusBar,
-                this.props.pageable && pager));
-        }
-        var wrapperStyle = this.props.style || {};
-        if (this.props.scrollable === 'virtual') {
-            // Set the default height for vs if not existing.
-            if (!wrapperStyle.height) {
-                wrapperStyle = Object.assign({}, wrapperStyle, { height: '450px' });
-            }
-        }
-        return (React.createElement(TableKeyboardNavigationContext.Provider, { value: this.contextStateRef.current },
-            React.createElement("div", __assign({ id: this.props.id, style: wrapperStyle, className: classNames('k-grid', (_c = {
-                        'k-grid-md': !this.props.size
-                    },
-                    _c["k-grid-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                    _c['k-grid-virtual'] = this.props.scrollable === 'virtual',
-                    _c), 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("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" },
-                            React.createElement("div", { className: 'k-grid-table-wrap', role: "presentation" },
-                                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', (_d = {
-                                                'k-table-md': !this.props.size
-                                            },
-                                            _d["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                                            _d)), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
-                                        colGroups,
-                                        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,
-                    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) {
-            var event_1 = options.event, dataItem = options.dataItem, dataIndex = options.dataIndex, columnIndex = options.columnIndex;
-            var _a = getSelectionOptions(this.props.selectable), mode = _a.mode, cell = _a.cell;
-            var selectionEvent = __assign(__assign({}, this.getArguments(event_1.syntheticEvent)), { dataItem: dataItem, startColIndex: columnIndex, endColIndex: columnIndex, startRowIndex: dataIndex, endRowIndex: dataIndex, dataItems: this.getLeafDataItems(), altKey: false, ctrlKey: false, shiftKey: false, metaKey: false, mode: mode, cell: cell, isDrag: false, componentId: this._gridId, selectedField: this.props.selectedField || '' });
-            this.props.onSelectionChange.call(undefined, selectionEvent);
-        }
-    };
-    Grid.prototype.raiseDataEvent = function (handler, data, moreData, syntheticEvent, targetEvent) {
-        var dataStateChange = this.props.onDataStateChange;
-        if (handler) {
-            var ev = __assign(__assign(__assign({}, this.getArguments(syntheticEvent)), data), { targetEvent: targetEvent });
-            handler.call(undefined, ev);
-        }
-        else if (dataStateChange) {
-            dataStateChange.call(undefined, __assign(__assign({}, this.getArguments(syntheticEvent)), { targetEvent: targetEvent || {}, dataState: __assign(__assign({}, this.getDataState()), moreData) }));
-        }
-    };
-    Grid.prototype.columnReorder = function (prev, next, nativeEvent) {
-        var _a;
-        var _this = this;
-        var column = this._columns[prev];
-        var depth = column.depth;
-        var end = function (index) {
-            do {
-                index++;
-            } while (index < _this._columns.length && _this._columns[index].depth > depth);
-            return index;
-        };
-        var spliced = this._columns.splice(prev, end(prev) - prev);
-        (_a = this._columns).splice.apply(_a, __spreadArray([prev < next ? end(next - spliced.length) : next, 0], spliced, false));
-        this._columns.filter(function (q) { return q.declarationIndex >= 0; }).forEach(function (c, i) { return c.orderIndex = i; });
-        this._columnsMutations++;
-        var shouldUpdateRL = this._columns[prev].locked && this._columns[next].locked;
-        updateLeft(this._columnsMap, this._columns, shouldUpdateRL || this._shouldUpdateLeftRight);
-        updateRight(this._columnsMap, this._columns, shouldUpdateRL || this._shouldUpdateLeftRight);
-        if (this._resized) {
-            this._shouldUpdateLeftRight = false;
-            this._resized = false;
-        }
-        var eventColumnProps = this.columns;
-        this.forceUpdate();
-        if (this.props.onColumnReorder) {
-            var reorderEvent = {
-                target: this,
-                columns: eventColumnProps,
-                columnId: column.id,
-                nativeEvent: nativeEvent
-            };
-            this.props.onColumnReorder.call(undefined, reorderEvent);
-        }
-    };
-    Grid.prototype.groupReorder = function (prevIndex, nextIndex, nativeEvent) {
-        if (this.props.group === undefined) {
-            return;
-        }
-        var group = this.props.group.slice();
-        group.splice.apply(group, __spreadArray([nextIndex, 0], group.splice(prevIndex, 1), false));
-        this.groupChange(group, nativeEvent);
-    };
-    Grid.prototype.columnToGroup = function (columnIndex, groupIndex, nativeEvent) {
-        var field = this._columns[columnIndex].field;
-        if (!field) {
-            return;
-        }
-        var group = (this.props.group || []).slice();
-        group.splice(groupIndex, 0, { field: field });
-        this.groupChange(group, nativeEvent);
-    };
-    Grid.prototype.resetTableWidth = function () {
-        var totalWidth = 0;
-        if (!this.columnResize.colGroupMain) {
-            return;
-        }
-        var colElements = this.columnResize.colGroupMain.children;
-        for (var i = 0; i < colElements.length; i++) {
-            var width = colElements[i].width;
-            if (!width) {
-                return;
-            }
-            totalWidth += parseFloat(width.toString());
-        }
-        totalWidth = Math.round(totalWidth);
-        if (this._header) {
-            this._header.setWidth(totalWidth);
-        }
-        if (this._footer) {
-            this._footer.setWidth(totalWidth);
-        }
-        if (this.tableElement) {
-            this.tableElement.style.width = totalWidth + 'px';
-        }
-    };
-    Grid.prototype.initColumns = function (children, groupCount) {
-        var idPrefix = navigationTools.getIdPrefix(this.navigationStateRef);
-        this._columns = this.readColumns(children, idPrefix, this._columnsMutations);
-        if (this._columns.length === 0) {
-            this._columns = autoGenerateColumns(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: idPrefix });
-        }
-        this.configureColumns(this._columns, groupCount, idPrefix);
-        this._columnsMap = this.mapColumns(this._columns);
-        this.columnResize.columns = this._columns;
-        this.dragLogic.columns = this._columns;
-    };
-    Grid.prototype.getDataState = function () {
-        return {
-            filter: this.props.filter,
-            sort: this.props.sort,
-            skip: this.props.skip,
-            take: (this.props.take !== undefined ? this.props.take : this.props.pageSize),
-            group: this.props.group
-        };
-    };
-    Grid.prototype.getArguments = function (syntheticEvent) {
-        return {
-            nativeEvent: syntheticEvent && syntheticEvent.nativeEvent,
-            syntheticEvent: syntheticEvent,
-            target: this
-        };
-    };
-    /**
-     * @hidden
-     */
-    Grid.displayName = 'KendoReactGrid';
-    /**
-     * @hidden
-     */
-    Grid.defaultProps = {
-    // never use this
-    };
-    /**
-     * @hidden
-     */
-    Grid.propTypes = {
-        data: PropTypes.oneOfType([
-            PropTypes.array,
-            PropTypes.shape({
-                data: PropTypes.array,
-                total: PropTypes.number
-            })
-        ]),
-        sortable: PropTypes.oneOfType([
-            PropTypes.bool,
-            PropTypes.shape({
-                mode: PropTypes.oneOf(['single', 'multiple']),
-                allowUnsort: PropTypes.bool
-            })
-        ]),
-        onSortChange: PropTypes.func,
-        sort: PropTypes.array,
-        filterable: PropTypes.bool,
-        filter: PropTypes.any,
-        onFilterChange: PropTypes.func,
-        pageable: PropTypes.oneOfType([
-            PropTypes.bool,
-            PropTypes.shape({
-                buttonCount: PropTypes.number,
-                info: PropTypes.bool,
-                type: PropTypes.oneOf(['numeric', 'input']),
-                pageSizes: PropTypes.oneOfType([
-                    PropTypes.bool,
-                    PropTypes.arrayOf(PropTypes.oneOfType([
-                        PropTypes.string,
-                        PropTypes.number
-                    ]))
-                ]),
-                previousNext: PropTypes.bool
-            })
-        ]),
-        pageSize: PropTypes.number,
-        onPageChange: PropTypes.func,
-        total: PropTypes.number,
-        skip: PropTypes.number,
-        take: PropTypes.number,
-        fixedScroll: PropTypes.bool,
-        onExpandChange: PropTypes.func,
-        expandField: PropTypes.string,
-        selectedField: PropTypes.string,
-        onSelectionChange: PropTypes.func,
-        onHeaderSelectionChange: PropTypes.func,
-        resizable: PropTypes.bool,
-        reorderable: PropTypes.bool,
-        group: PropTypes.any,
-        groupable: PropTypes.oneOfType([
-            PropTypes.bool,
-            PropTypes.shape({
-                enabled: PropTypes.bool,
-                footer: PropTypes.oneOf(['always', 'visible', 'none'])
-            })
-        ]),
-        onGroupChange: PropTypes.func,
-        onRowClick: PropTypes.func,
-        onRowDoubleClick: PropTypes.func,
-        onItemChange: PropTypes.func,
-        editField: PropTypes.string,
-        scrollable: PropTypes.oneOf(['none', 'scrollable', 'virtual']),
-        rowHeight: PropTypes.number,
-        detailRowHeight: PropTypes.number,
-        detail: PropTypes.any,
-        style: PropTypes.object,
-        onDataStateChange: PropTypes.func,
-        onColumnResize: PropTypes.func,
-        onColumnReorder: PropTypes.func,
-        dataItemKey: PropTypes.string,
-        navigatable: PropTypes.bool,
-        size: PropTypes.oneOf(['small', 'medium'])
-    };
-    /** @hidden */
-    Grid.contextType = TableKeyboardNavigationContext;
-    return Grid;
-}(React.Component));
-export { Grid };