@progress/kendo-react-grid 5.10.0-dev.202301031638 → 5.10.0-dev.202301091032
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-react-grid.js +1 -1
- package/dist/es/Grid.d.ts +6 -0
- package/dist/es/Grid.js +71 -67
- package/dist/es/GridToolbar.js +5 -1
- package/dist/es/VirtualScroll.d.ts +2 -2
- package/dist/es/VirtualScroll.js +38 -30
- package/dist/es/cells/GridCell.js +1 -1
- package/dist/es/cells/GridDetailCell.js +1 -1
- package/dist/es/cells/GridDetailHierarchyCell.js +1 -1
- package/dist/es/cells/GridEditCell.js +1 -1
- package/dist/es/cells/GridFilterCell.js +8 -8
- package/dist/es/cells/GridGroupCell.js +3 -3
- package/dist/es/cells/GridHierarchyCell.js +3 -2
- package/dist/es/columnMenu/GridColumnMenuWrapper.d.ts +2 -2
- package/dist/es/columnMenu/GridColumnMenuWrapper.js +1 -1
- package/dist/es/drag/ColumnDraggable.js +1 -1
- package/dist/es/footer/Footer.d.ts +2 -0
- package/dist/es/footer/Footer.js +7 -3
- package/dist/es/footer/FooterRow.js +3 -2
- package/dist/es/header/FilterRow.d.ts +2 -1
- package/dist/es/header/FilterRow.js +4 -3
- package/dist/es/header/Header.d.ts +2 -0
- package/dist/es/header/Header.js +7 -4
- package/dist/es/header/HeaderRow.js +25 -31
- package/dist/es/interfaces/GridColumnProps.d.ts +1 -1
- package/dist/es/interfaces/GridFilterCellProps.d.ts +12 -0
- package/dist/es/interfaces/GridProps.d.ts +10 -0
- package/dist/es/interfaces/GridToolbarProps.d.ts +16 -0
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/rows/GridRow.js +2 -2
- package/dist/es/utils/index.d.ts +8 -0
- package/dist/es/utils/index.js +9 -0
- package/dist/npm/Grid.d.ts +6 -0
- package/dist/npm/Grid.js +69 -65
- package/dist/npm/GridToolbar.js +5 -1
- package/dist/npm/VirtualScroll.d.ts +2 -2
- package/dist/npm/VirtualScroll.js +38 -30
- package/dist/npm/cells/GridCell.js +1 -1
- package/dist/npm/cells/GridDetailCell.js +1 -1
- package/dist/npm/cells/GridDetailHierarchyCell.js +1 -1
- package/dist/npm/cells/GridEditCell.js +1 -1
- package/dist/npm/cells/GridFilterCell.js +7 -7
- package/dist/npm/cells/GridGroupCell.js +3 -3
- package/dist/npm/cells/GridHierarchyCell.js +3 -2
- package/dist/npm/columnMenu/GridColumnMenuWrapper.d.ts +2 -2
- package/dist/npm/columnMenu/GridColumnMenuWrapper.js +1 -1
- package/dist/npm/drag/ColumnDraggable.js +1 -1
- package/dist/npm/footer/Footer.d.ts +2 -0
- package/dist/npm/footer/Footer.js +7 -3
- package/dist/npm/footer/FooterRow.js +3 -2
- package/dist/npm/header/FilterRow.d.ts +2 -1
- package/dist/npm/header/FilterRow.js +4 -3
- package/dist/npm/header/Header.d.ts +2 -0
- package/dist/npm/header/Header.js +6 -3
- package/dist/npm/header/HeaderRow.js +25 -31
- package/dist/npm/interfaces/GridColumnProps.d.ts +1 -1
- package/dist/npm/interfaces/GridFilterCellProps.d.ts +12 -0
- package/dist/npm/interfaces/GridProps.d.ts +10 -0
- package/dist/npm/interfaces/GridToolbarProps.d.ts +16 -0
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/rows/GridRow.js +2 -2
- package/dist/npm/utils/index.d.ts +8 -0
- package/dist/npm/utils/index.js +10 -1
- package/dist/systemjs/kendo-react-grid.js +1 -1
- package/package.json +18 -18
|
@@ -41,7 +41,7 @@ export var GridGroupCell = function (props) {
|
|
|
41
41
|
var renderCellCollapse = function (colspan, styles) {
|
|
42
42
|
var baseMessage = expanded ? groupCollapse : groupExpand;
|
|
43
43
|
var message = localization.toLanguageString(baseMessage, messages[baseMessage]);
|
|
44
|
-
return (React.createElement("td", __assign({ style: __assign(__assign({}, props.style), styles), colSpan: colspan, key: 'g-colspan', role: 'gridcell', "aria-selected": false, "aria-expanded": expanded, "aria-colindex": ariaColumnIndex, onKeyDown: onKeyDownHandler }, navigationAttributes),
|
|
44
|
+
return (React.createElement("td", __assign({ className: 'k-table-td', style: __assign(__assign({}, props.style), styles), colSpan: colspan, key: 'g-colspan', role: 'gridcell', "aria-selected": false, "aria-expanded": expanded, "aria-colindex": ariaColumnIndex, onKeyDown: onKeyDownHandler }, navigationAttributes),
|
|
45
45
|
React.createElement("p", { className: "k-reset" },
|
|
46
46
|
React.createElement("a", { onClick: function (e) {
|
|
47
47
|
e.preventDefault();
|
|
@@ -61,7 +61,7 @@ export var GridGroupCell = function (props) {
|
|
|
61
61
|
};
|
|
62
62
|
if (columnIndex === undefined || level === undefined || columnIndex < level ||
|
|
63
63
|
columnsCount === undefined || rowType !== 'groupHeader' || dataItem[definedField] === undefined) {
|
|
64
|
-
defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: classNames('k-group-cell', { 'k-grid-content-sticky': props.locked }), role: "
|
|
64
|
+
defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: classNames('k-table-td', 'k-group-cell', { 'k-grid-content-sticky': props.locked }), role: "gridcell" }));
|
|
65
65
|
}
|
|
66
66
|
else if (columnIndex <= level && !props.locked) {
|
|
67
67
|
defaultRendering = renderCellCollapse(columnsCount - columnIndex, {});
|
|
@@ -69,7 +69,7 @@ export var GridGroupCell = function (props) {
|
|
|
69
69
|
else if (columnIndex <= level && props.locked) {
|
|
70
70
|
defaultRendering = (React.createElement(React.Fragment, null,
|
|
71
71
|
renderCellCollapse(0, { position: 'sticky', zIndex: 2 }),
|
|
72
|
-
React.createElement("td", { colSpan: (columnsCount - columnIndex), style: { borderLeftWidth: 0, borderRightWidth: 0 } })));
|
|
72
|
+
React.createElement("td", { className: 'k-table-td', role: 'gridcell', colSpan: (columnsCount - columnIndex), style: { borderLeftWidth: 0, borderRightWidth: 0 } })));
|
|
73
73
|
}
|
|
74
74
|
return render ?
|
|
75
75
|
render.call(undefined, defaultRendering, props) :
|
|
@@ -39,13 +39,14 @@ export var GridHierarchyCell = function (props) {
|
|
|
39
39
|
}
|
|
40
40
|
}, [props.dataItem, props.dataIndex, props.field, props.onChange, expanded]);
|
|
41
41
|
if (props.rowType === 'groupFooter') {
|
|
42
|
-
defaultRendering =
|
|
42
|
+
defaultRendering =
|
|
43
|
+
React.createElement("td", __assign({ className: "k-table-td k-hierarchy-cell", role: 'gridcell' }, navigationAttributes));
|
|
43
44
|
}
|
|
44
45
|
else if (props.rowType !== 'groupHeader') {
|
|
45
46
|
var className = expanded ? 'k-icon k-i-minus' : 'k-icon k-i-plus';
|
|
46
47
|
var baseMessage = expanded ? detailCollapse : detailExpand;
|
|
47
48
|
var message = localization.toLanguageString(baseMessage, messages[baseMessage]);
|
|
48
|
-
defaultRendering = (React.createElement("td", __assign({ className: "k-hierarchy-cell", onKeyDown: onKeyDownHandler, "aria-expanded": expanded ? 'true' : 'false', role: 'gridcell', "aria-colindex": props.ariaColumnIndex }, navigationAttributes),
|
|
49
|
+
defaultRendering = (React.createElement("td", __assign({ className: "k-table-td k-hierarchy-cell", onKeyDown: onKeyDownHandler, "aria-expanded": expanded ? 'true' : 'false', role: 'gridcell', "aria-colindex": props.ariaColumnIndex }, navigationAttributes),
|
|
49
50
|
React.createElement("a", { onClick: function (e) {
|
|
50
51
|
e.preventDefault();
|
|
51
52
|
if (props.onChange) {
|
|
@@ -22,7 +22,7 @@ export declare class GridColumnMenuWrapper extends React.Component<GridColumnMen
|
|
|
22
22
|
/** @hidden */
|
|
23
23
|
readonly state: ColumnMenuStateProps;
|
|
24
24
|
/** @hidden */
|
|
25
|
-
_anchor:
|
|
25
|
+
_anchor: HTMLAnchorElement | null;
|
|
26
26
|
/** @hidden */
|
|
27
27
|
_content: HTMLDivElement | null;
|
|
28
28
|
/** @hidden */
|
|
@@ -38,6 +38,6 @@ export declare class GridColumnMenuWrapper extends React.Component<GridColumnMen
|
|
|
38
38
|
/** @hidden */
|
|
39
39
|
closeMenu: () => void;
|
|
40
40
|
/** @hidden */
|
|
41
|
-
onAnchorMouseDown: (event: React.MouseEvent<
|
|
41
|
+
onAnchorMouseDown: (event: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
42
42
|
render(): JSX.Element;
|
|
43
43
|
}
|
|
@@ -87,7 +87,7 @@ var GridColumnMenuWrapper = /** @class */ (function (_super) {
|
|
|
87
87
|
var _this = this;
|
|
88
88
|
var _a = this.props, ColumnMenu = _a.columnMenu, others = __rest(_a, ["columnMenu"]);
|
|
89
89
|
return (React.createElement(React.Fragment, null,
|
|
90
|
-
React.createElement("
|
|
90
|
+
React.createElement("a", { className: 'k-grid-header-menu k-grid-column-menu', ref: function (e) { return _this._anchor = e; }, onClick: this.anchorClick, onMouseDown: this.onAnchorMouseDown, href: "#" },
|
|
91
91
|
React.createElement("span", { className: 'k-icon k-i-more-vertical' })),
|
|
92
92
|
React.createElement(Popup, { anchor: this._anchor, show: this.state.show },
|
|
93
93
|
React.createElement("div", { ref: function (e) { return _this._content = e; }, className: 'k-grid-columnmenu-popup', tabIndex: 0, onBlur: this.blur, onFocus: this.focus, style: { outline: 'none' } }, ColumnMenu && (React.createElement(ColumnMenu, __assign({}, others, { onCloseMenu: this.closeMenu })))))));
|
|
@@ -55,7 +55,7 @@ var ColumnDraggable = /** @class */ (function (_super) {
|
|
|
55
55
|
ColumnDraggable.prototype.render = function () {
|
|
56
56
|
var _this = this;
|
|
57
57
|
return (React.createElement(Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, hint: this.props.dragClue, autoScroll: { boundaryElementRef: this.props.headerRef, direction: { horizontal: true, vertical: false } }, scrollContainer: this.props.containerRef || undefined, ref: function (component) { _this.draggable = component; } },
|
|
58
|
-
React.createElement("tr", { style: { touchAction: 'none' }, role: "row", "aria-rowindex": this.props.ariaRowIndex }, this.props.children)));
|
|
58
|
+
React.createElement("tr", { className: 'k-table-row', style: { touchAction: 'none' }, role: "row", "aria-rowindex": this.props.ariaRowIndex }, this.props.children)));
|
|
59
59
|
};
|
|
60
60
|
return ColumnDraggable;
|
|
61
61
|
}(React.PureComponent));
|
package/dist/es/footer/Footer.js
CHANGED
|
@@ -15,6 +15,7 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
15
15
|
})();
|
|
16
16
|
import { getScrollbarWidth } from '@progress/kendo-react-common';
|
|
17
17
|
import * as React from 'react';
|
|
18
|
+
import { classNames, kendoThemeMaps } from '@progress/kendo-react-common';
|
|
18
19
|
/**
|
|
19
20
|
* @hidden
|
|
20
21
|
*/
|
|
@@ -49,15 +50,18 @@ var Footer = /** @class */ (function (_super) {
|
|
|
49
50
|
}
|
|
50
51
|
};
|
|
51
52
|
Footer.prototype.render = function () {
|
|
53
|
+
var _a;
|
|
52
54
|
var _this = this;
|
|
53
55
|
if (!this.props.staticHeaders) {
|
|
54
|
-
return (React.createElement("tfoot", { className: "k-
|
|
56
|
+
return (React.createElement("tfoot", { className: "k-table-tfoot" }, this.props.row));
|
|
55
57
|
}
|
|
56
58
|
return (React.createElement("div", { className: "k-grid-footer", role: "presentation" },
|
|
57
59
|
React.createElement("div", { ref: function (div) { _this.footerWrap = div; }, className: "k-grid-footer-wrap", style: this.scrollbarWidth ? {} : { borderWidth: 0 }, role: "presentation" },
|
|
58
|
-
React.createElement("table", { ref: function (table) { _this.table = table; },
|
|
60
|
+
React.createElement("table", { ref: function (table) { _this.table = table; }, className: classNames('k-table k-grid-footer-table', (_a = {},
|
|
61
|
+
_a["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
|
|
62
|
+
_a), this.props.className), role: "presentation" },
|
|
59
63
|
React.createElement("colgroup", { ref: function (e) { _this.props.columnResize.colGroupFooter = e; }, role: "presentation" }, this.props.cols),
|
|
60
|
-
React.createElement("tfoot", { role: "presentation" }, this.props.row)))));
|
|
64
|
+
React.createElement("tfoot", { className: "k-table-tfoot", role: "presentation" }, this.props.row)))));
|
|
61
65
|
};
|
|
62
66
|
return Footer;
|
|
63
67
|
}(React.Component));
|
|
@@ -26,6 +26,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
26
26
|
};
|
|
27
27
|
import * as React from 'react';
|
|
28
28
|
import { footerColumns } from './../utils';
|
|
29
|
+
import { classNames } from '@progress/kendo-react-common';
|
|
29
30
|
/**
|
|
30
31
|
* @hidden
|
|
31
32
|
*/
|
|
@@ -42,7 +43,7 @@ var FooterRow = /** @class */ (function (_super) {
|
|
|
42
43
|
? { left: column.left, right: column.right }
|
|
43
44
|
: { left: column.right, right: column.left }
|
|
44
45
|
: {},
|
|
45
|
-
className: column.locked && column.left !== undefined ? 'k-grid-footer-sticky' : ''
|
|
46
|
+
className: classNames('k-table-td', column.locked && column.left !== undefined ? 'k-grid-footer-sticky' : '')
|
|
46
47
|
};
|
|
47
48
|
var cellProps = __assign({ field: column.field, ariaColumnIndex: column.ariaColumnIndex }, tdProps);
|
|
48
49
|
return (column.footerCell && React.createElement(column.footerCell, __assign({}, cellProps, { key: index }))) || (React.createElement("td", __assign({ key: index }, tdProps, { role: 'columnfooter', "aria-selected": false, "aria-colindex": column.ariaColumnIndex })));
|
|
@@ -57,7 +58,7 @@ var FooterRow = /** @class */ (function (_super) {
|
|
|
57
58
|
configurable: true
|
|
58
59
|
});
|
|
59
60
|
FooterRow.prototype.render = function () {
|
|
60
|
-
return React.createElement("tr", { role: "row", "aria-rowindex": this.props.ariaRowIndex }, footerColumns(this.props.columns).map(this.renderCell));
|
|
61
|
+
return React.createElement("tr", { className: 'k-table-row', role: "row", "aria-rowindex": this.props.ariaRowIndex }, footerColumns(this.props.columns).map(this.renderCell));
|
|
61
62
|
};
|
|
62
63
|
return FooterRow;
|
|
63
64
|
}(React.Component));
|
|
@@ -6,7 +6,7 @@ import { GridFilterOperators } from '../interfaces/GridFilterOperators';
|
|
|
6
6
|
/**
|
|
7
7
|
* @hidden
|
|
8
8
|
*/
|
|
9
|
-
export declare const FILTER_ROW_CLASS = "k-filter-row";
|
|
9
|
+
export declare const FILTER_ROW_CLASS = "k-table-row k-filter-row";
|
|
10
10
|
/**
|
|
11
11
|
* @hidden
|
|
12
12
|
*/
|
|
@@ -19,6 +19,7 @@ export interface FilterRowProps {
|
|
|
19
19
|
cellRender?: (defaultRendering: React.ReactElement<any> | null, props: GridFilterCellProps) => React.ReactElement<any> | null;
|
|
20
20
|
isRtl?: boolean;
|
|
21
21
|
ariaRowIndex?: number;
|
|
22
|
+
size?: null | 'small' | 'medium' | 'large';
|
|
22
23
|
}
|
|
23
24
|
/**
|
|
24
25
|
*
|
|
@@ -30,10 +30,11 @@ import { GridFilterCell } from '../cells/GridFilterCell';
|
|
|
30
30
|
import { operatorMap, booleanFilterValues, getFilterType } from '../filterCommon';
|
|
31
31
|
import { tableKeyboardNavigationTools as navigationTools, HeaderThElement } from '@progress/kendo-react-data-tools';
|
|
32
32
|
import { filterAriaLabel, messages } from '../messages';
|
|
33
|
+
import { classNames } from '@progress/kendo-react-common';
|
|
33
34
|
/**
|
|
34
35
|
* @hidden
|
|
35
36
|
*/
|
|
36
|
-
export var FILTER_ROW_CLASS = 'k-filter-row';
|
|
37
|
+
export var FILTER_ROW_CLASS = 'k-table-row k-filter-row';
|
|
37
38
|
/**
|
|
38
39
|
*
|
|
39
40
|
* @hidden
|
|
@@ -118,9 +119,9 @@ var FilterRow = /** @class */ (function (_super) {
|
|
|
118
119
|
? { left: column.left, right: column.right }
|
|
119
120
|
: { left: column.right, right: column.left }
|
|
120
121
|
: {};
|
|
121
|
-
return (React.createElement(HeaderThElement, __assign({ key: key, columnId: navigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: _this.headerCellClassName(column.field, column.locked) || undefined, role: "columnheader" }, ariaAttrs), filterCellProps && (column.filterCell ?
|
|
122
|
+
return (React.createElement(HeaderThElement, __assign({ key: key, columnId: navigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: classNames('k-header', _this.headerCellClassName(column.field, column.locked) || undefined), role: "columnheader" }, ariaAttrs), filterCellProps && (column.filterCell ?
|
|
122
123
|
React.createElement(column.filterCell, __assign({}, filterCellProps)) :
|
|
123
|
-
React.createElement(GridFilterCell, __assign({}, filterCellProps)))));
|
|
124
|
+
React.createElement(GridFilterCell, __assign({ size: _this.props.size }, filterCellProps)))));
|
|
124
125
|
});
|
|
125
126
|
return React.createElement("tr", { className: FILTER_ROW_CLASS, "aria-rowindex": this.props.ariaRowIndex, role: "row" }, filterCells);
|
|
126
127
|
};
|
package/dist/es/header/Header.js
CHANGED
|
@@ -25,7 +25,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
25
25
|
return __assign.apply(this, arguments);
|
|
26
26
|
};
|
|
27
27
|
import * as React from 'react';
|
|
28
|
-
import { classNames, getScrollbarWidth } from '@progress/kendo-react-common';
|
|
28
|
+
import { classNames, getScrollbarWidth, kendoThemeMaps } from '@progress/kendo-react-common';
|
|
29
29
|
import { isRtl, tableKeyboardNavigationHeaderAttributes } from '@progress/kendo-react-data-tools';
|
|
30
30
|
/**
|
|
31
31
|
* @hidden
|
|
@@ -88,17 +88,20 @@ var Header = /** @class */ (function (_super) {
|
|
|
88
88
|
}
|
|
89
89
|
};
|
|
90
90
|
Header.prototype.render = function () {
|
|
91
|
+
var _a;
|
|
91
92
|
var _this = this;
|
|
92
93
|
if (!this.props.staticHeaders) {
|
|
93
|
-
return (React.createElement("thead", __assign({ role: "presentation", className: classNames('k-
|
|
94
|
+
return (React.createElement("thead", __assign({ role: "presentation", className: classNames('k-table-thead', { 'k-grid-draggable-header': this.props.draggable }) }, tableKeyboardNavigationHeaderAttributes),
|
|
94
95
|
this.props.headerRow,
|
|
95
96
|
this.props.filterRow));
|
|
96
97
|
}
|
|
97
98
|
return (React.createElement("div", { ref: this.props.elemRef, className: classNames('k-grid-header', { 'k-grid-draggable-header': this.props.draggable }), role: "presentation" },
|
|
98
99
|
React.createElement("div", { ref: function (div) { _this.headerWrap = div; }, className: "k-grid-header-wrap", style: this.scrollbarWidth ? {} : { borderWidth: 0 }, onScroll: this.onScroll, role: "presentation" },
|
|
99
|
-
React.createElement("table", { ref: function (table) { _this.table = table; },
|
|
100
|
+
React.createElement("table", { ref: function (table) { _this.table = table; }, className: classNames('k-table k-grid-header-table', (_a = {},
|
|
101
|
+
_a["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
|
|
102
|
+
_a), this.props.className), role: "presentation" },
|
|
100
103
|
React.createElement("colgroup", { ref: function (e) { _this.props.columnResize.colGroupHeader = e; } }, this.props.cols),
|
|
101
|
-
React.createElement("thead", __assign({ role: "rowgroup" }, tableKeyboardNavigationHeaderAttributes),
|
|
104
|
+
React.createElement("thead", __assign({ className: 'k-table-thead', role: "rowgroup" }, tableKeyboardNavigationHeaderAttributes),
|
|
102
105
|
this.props.headerRow,
|
|
103
106
|
this.props.filterRow)))));
|
|
104
107
|
};
|
|
@@ -93,36 +93,27 @@ var HeaderRow = /** @class */ (function (_super) {
|
|
|
93
93
|
} : {
|
|
94
94
|
'role': 'presentation'
|
|
95
95
|
};
|
|
96
|
-
var columnMenuWrapperProps = {
|
|
97
|
-
column: {
|
|
98
|
-
field: column.field,
|
|
99
|
-
filter: column.filter
|
|
100
|
-
},
|
|
101
|
-
sortable: sortable && _this.props.sortable,
|
|
102
|
-
sort: _this.props.sort,
|
|
103
|
-
onSortChange: _this.props.sortChange,
|
|
104
|
-
filter: _this.props.filter,
|
|
105
|
-
filterable: _this.props.filterable && column.filterable,
|
|
106
|
-
filterOperators: _this.props.filterOperators,
|
|
107
|
-
onFilterChange: _this.props.filterChange,
|
|
108
|
-
group: _this.props.group,
|
|
109
|
-
groupable: _this.props.groupable,
|
|
110
|
-
onGroupChange: _this.props.groupChange,
|
|
111
|
-
columnMenu: columnMenu
|
|
112
|
-
};
|
|
113
|
-
var headerCellProps = {
|
|
114
|
-
field: column.field,
|
|
115
|
-
onClick: sortable && (function (e) { return _this.cellClick(e, column); }) || undefined,
|
|
116
|
-
selectionChange: _this.props.selectionChange,
|
|
117
|
-
title: column.title,
|
|
118
|
-
selectionValue: column.headerSelectionValue,
|
|
119
|
-
render: _this.props.cellRender,
|
|
120
|
-
children: _this.sortIcon(sortIndex),
|
|
121
|
-
columnMenuWrapperProps: columnMenuWrapperProps
|
|
122
|
-
};
|
|
123
96
|
var key = (column.declarationIndex >= 0) ? ++_this.index : --_this.serviceIndex;
|
|
97
|
+
var HeaderCell = column.headerCell ? column.headerCell : GridHeaderCell;
|
|
98
|
+
var headerCell = (React.createElement(HeaderCell, { field: column.field, onClick: sortable && (function (e) { return _this.cellClick(e, column); }) || undefined, selectionChange: _this.props.selectionChange, title: column.title, selectionValue: column.headerSelectionValue, render: _this.props.cellRender, children: _this.sortIcon(sortIndex), columnMenuWrapperProps: {
|
|
99
|
+
column: {
|
|
100
|
+
field: column.field,
|
|
101
|
+
filter: column.filter
|
|
102
|
+
},
|
|
103
|
+
sortable: sortable && _this.props.sortable,
|
|
104
|
+
sort: _this.props.sort,
|
|
105
|
+
onSortChange: _this.props.sortChange,
|
|
106
|
+
filter: _this.props.filter,
|
|
107
|
+
filterable: _this.props.filterable && column.filterable,
|
|
108
|
+
filterOperators: _this.props.filterOperators,
|
|
109
|
+
onFilterChange: _this.props.filterChange,
|
|
110
|
+
group: _this.props.group,
|
|
111
|
+
groupable: _this.props.groupable,
|
|
112
|
+
onGroupChange: _this.props.groupChange,
|
|
113
|
+
columnMenu: columnMenu
|
|
114
|
+
} }));
|
|
124
115
|
return (React.createElement(HeaderThElement, __assign({}, ariaAttrs, { key: key, colSpan: column.colSpan, rowSpan: column.rowSpan, className: className, style: style, columnId: column.id, navigatable: column.navigatable, onKeyDown: sortable && (function (e) { return _this.cellKeyDown(e, column); }) || undefined, role: "columnheader" }),
|
|
125
|
-
|
|
116
|
+
headerCell,
|
|
126
117
|
_this.props.columnResize && _this.props.columnResize.resizable && column.resizable &&
|
|
127
118
|
React.createElement(ColumnResizer, { key: 2, resize: function (e, element, end) {
|
|
128
119
|
return _this.props.columnResize &&
|
|
@@ -155,8 +146,11 @@ var HeaderRow = /** @class */ (function (_super) {
|
|
|
155
146
|
return null;
|
|
156
147
|
}
|
|
157
148
|
return sortIndex >= 0 && [
|
|
158
|
-
React.createElement("span", { key: 1, className: 'k-
|
|
159
|
-
|
|
149
|
+
React.createElement("span", { key: 1, className: 'k-sort-icon' },
|
|
150
|
+
React.createElement("span", { className: 'k-icon k-i-sort-' + this.props.sort[sortIndex].dir + '-small' })),
|
|
151
|
+
this.props.sort.length > 1 &&
|
|
152
|
+
React.createElement("span", { key: 2, className: 'k-sort-icon' },
|
|
153
|
+
React.createElement("span", { className: "k-sort-order" }, sortIndex + 1))
|
|
160
154
|
];
|
|
161
155
|
};
|
|
162
156
|
HeaderRow.prototype.render = function () {
|
|
@@ -164,7 +158,7 @@ var HeaderRow = /** @class */ (function (_super) {
|
|
|
164
158
|
this.serviceIndex = 0;
|
|
165
159
|
this.index = -1;
|
|
166
160
|
return this.props.columnsMap.map(function (rowIndexes, i) {
|
|
167
|
-
return _this.props.pressHandler && (React.createElement(ColumnDraggable, { key: i, pressHandler: _this.props.pressHandler, dragHandler: _this.props.dragHandler, releaseHandler: _this.props.releaseHandler, ariaRowIndex: i + 1, dragClue: _this.props.dragClue, headerRef: _this.props.headerRef, containerRef: _this.props.containerRef }, _this.cells(rowIndexes))) || React.createElement("tr", { role: "row", "aria-rowindex": i + 1 }, _this.cells(rowIndexes));
|
|
161
|
+
return _this.props.pressHandler && (React.createElement(ColumnDraggable, { key: i, pressHandler: _this.props.pressHandler, dragHandler: _this.props.dragHandler, releaseHandler: _this.props.releaseHandler, ariaRowIndex: i + 1, dragClue: _this.props.dragClue, headerRef: _this.props.headerRef, containerRef: _this.props.containerRef }, _this.cells(rowIndexes))) || React.createElement("tr", { className: 'k-table-row', role: "row", "aria-rowindex": i + 1 }, _this.cells(rowIndexes));
|
|
168
162
|
});
|
|
169
163
|
};
|
|
170
164
|
return HeaderRow;
|
|
@@ -74,7 +74,7 @@ export interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
|
|
|
74
74
|
* ```jsx-no-run
|
|
75
75
|
* <GridColumn
|
|
76
76
|
* footerCell={props => (
|
|
77
|
-
* <td colSpan={props.colSpan} style={props.style}>Sum: 50</td>
|
|
77
|
+
* <td className='k-table-td' colSpan={props.colSpan} style={props.style} role={'gridcell'}>Sum: 50</td>
|
|
78
78
|
* )}
|
|
79
79
|
* />
|
|
80
80
|
* ```
|
|
@@ -50,4 +50,16 @@ export interface GridFilterCellProps {
|
|
|
50
50
|
* Accessible label of the filter.
|
|
51
51
|
*/
|
|
52
52
|
ariaLabel?: string;
|
|
53
|
+
/**
|
|
54
|
+
* Configures the `size` of the cell.
|
|
55
|
+
*
|
|
56
|
+
* The available options are:
|
|
57
|
+
* - small
|
|
58
|
+
* - medium
|
|
59
|
+
* - large
|
|
60
|
+
* - null—Does not set a size `className`.
|
|
61
|
+
*
|
|
62
|
+
* @default `medium`
|
|
63
|
+
*/
|
|
64
|
+
size?: null | 'small' | 'medium' | 'large';
|
|
53
65
|
}
|
|
@@ -291,4 +291,14 @@ export interface GridProps extends KendoReactComponentBaseProps {
|
|
|
291
291
|
* Defaults to `false`.
|
|
292
292
|
*/
|
|
293
293
|
lockGroups?: boolean;
|
|
294
|
+
/**
|
|
295
|
+
* Configures the `size` of the Grid.
|
|
296
|
+
*
|
|
297
|
+
* The available options are:
|
|
298
|
+
* - small
|
|
299
|
+
* - medium
|
|
300
|
+
*
|
|
301
|
+
* @default `medium`
|
|
302
|
+
*/
|
|
303
|
+
size?: 'small' | 'medium';
|
|
294
304
|
}
|
|
@@ -7,4 +7,20 @@ export interface GridToolbarProps {
|
|
|
7
7
|
* The React elements that will be rendered inside the toolbar of the Grid.
|
|
8
8
|
*/
|
|
9
9
|
children?: React.ReactNode;
|
|
10
|
+
/**
|
|
11
|
+
* Specifies the name of the CSS class which is set to the GridToolbar.
|
|
12
|
+
*/
|
|
13
|
+
className?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Configures the `size` of the Toolbar.
|
|
16
|
+
*
|
|
17
|
+
* The available options are:
|
|
18
|
+
* - small
|
|
19
|
+
* - medium
|
|
20
|
+
* - large
|
|
21
|
+
* - null—Does not set a size `className`.
|
|
22
|
+
*
|
|
23
|
+
* @default `medium`
|
|
24
|
+
*/
|
|
25
|
+
size?: null | 'small' | 'medium' | 'large';
|
|
10
26
|
}
|
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-react-grid',
|
|
6
6
|
productName: 'KendoReact',
|
|
7
7
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1673259545,
|
|
9
9
|
version: '',
|
|
10
10
|
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'
|
|
11
11
|
};
|
package/dist/es/rows/GridRow.js
CHANGED
|
@@ -40,12 +40,12 @@ var GridRow = /** @class */ (function (_super) {
|
|
|
40
40
|
*/
|
|
41
41
|
GridRow.prototype.render = function () {
|
|
42
42
|
var _a;
|
|
43
|
-
var className = classNames({
|
|
43
|
+
var className = classNames('k-table-row', {
|
|
44
44
|
'k-grouping-row': this.props.rowType === 'groupHeader',
|
|
45
45
|
'k-group-footer': this.props.rowType === 'groupFooter',
|
|
46
46
|
'k-master-row': this.props.rowType !== 'groupHeader' &&
|
|
47
47
|
this.props.rowType !== 'groupFooter',
|
|
48
|
-
'k-alt': this.props.rowType !== 'groupHeader' &&
|
|
48
|
+
'k-table-alt-row k-alt': this.props.rowType !== 'groupHeader' &&
|
|
49
49
|
this.props.rowType !== 'groupFooter' &&
|
|
50
50
|
this.props.isAltRow,
|
|
51
51
|
'k-selected': this.props.isSelected,
|
package/dist/es/utils/index.d.ts
CHANGED
|
@@ -50,3 +50,11 @@ export declare const footerColumns: (columns: ExtendedColumnProps[]) => Extended
|
|
|
50
50
|
* @hidden
|
|
51
51
|
*/
|
|
52
52
|
export declare const sanitizeColumns: (columns: ExtendedColumnProps[]) => GridColumnProps[];
|
|
53
|
+
/**
|
|
54
|
+
* @hidden
|
|
55
|
+
*/
|
|
56
|
+
export declare const firefox: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* @hidden
|
|
59
|
+
*/
|
|
60
|
+
export declare const firefoxMaxHeight = 17895697;
|
package/dist/es/utils/index.js
CHANGED
|
@@ -227,3 +227,12 @@ export var sanitizeColumns = function (columns) {
|
|
|
227
227
|
return children.length ? __assign({ children: sanitizeColumns(children) }, props) : props;
|
|
228
228
|
});
|
|
229
229
|
};
|
|
230
|
+
/**
|
|
231
|
+
* @hidden
|
|
232
|
+
*/
|
|
233
|
+
export var firefox = typeof window !== 'undefined' &&
|
|
234
|
+
/Firefox/.test(window.navigator.userAgent);
|
|
235
|
+
/**
|
|
236
|
+
* @hidden
|
|
237
|
+
*/
|
|
238
|
+
export var firefoxMaxHeight = 17895697;
|
package/dist/npm/Grid.d.ts
CHANGED
|
@@ -100,12 +100,14 @@ export declare class Grid extends React.Component<GridProps, {}> {
|
|
|
100
100
|
onColumnReorder: PropTypes.Requireable<(...args: any[]) => any>;
|
|
101
101
|
dataItemKey: PropTypes.Requireable<string>;
|
|
102
102
|
navigatable: PropTypes.Requireable<boolean>;
|
|
103
|
+
size: PropTypes.Requireable<string>;
|
|
103
104
|
};
|
|
104
105
|
/** @hidden */
|
|
105
106
|
static contextType: React.Context<TableKeyboardNavigationContextType | undefined>;
|
|
106
107
|
protected dragLogic: CommonDragLogic;
|
|
107
108
|
private _columns;
|
|
108
109
|
private _columnsMap;
|
|
110
|
+
private _columnsMutations;
|
|
109
111
|
private contextStateRef;
|
|
110
112
|
private navigationStateRef;
|
|
111
113
|
private _data;
|
|
@@ -221,7 +223,11 @@ export declare class Grid extends React.Component<GridProps, {}> {
|
|
|
221
223
|
private columnToGroup;
|
|
222
224
|
private resetTableWidth;
|
|
223
225
|
private onResize;
|
|
226
|
+
private childrenToArray;
|
|
227
|
+
private readColumns;
|
|
228
|
+
private mapColumns;
|
|
224
229
|
private initColumns;
|
|
230
|
+
private getHeaderRow;
|
|
225
231
|
private resolveTitle;
|
|
226
232
|
private getDataState;
|
|
227
233
|
private getArguments;
|