@progress/kendo-vue-grid 8.0.3-develop.1 → 8.0.3-develop.3
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/BasePDFExport.d.ts +59 -0
- package/Grid.d.ts +542 -0
- package/GridColumn.d.ts +18 -0
- package/GridNav.d.ts +26 -0
- package/GridSearchBox.d.ts +42 -0
- package/GridState.d.ts +234 -0
- package/GridToolbar.d.ts +32 -0
- package/RootGrid.d.ts +429 -0
- package/ScrollMode.d.ts +8 -0
- package/StatusBar.d.ts +21 -0
- package/VirtualScroll.d.ts +43 -0
- package/cells/GridCell.d.ts +123 -0
- package/cells/GridDetailCell.d.ts +38 -0
- package/cells/GridDetailHierarchyCell.d.ts +23 -0
- package/cells/GridEditCell.d.ts +86 -0
- package/cells/GridFilterCell.d.ts +60 -0
- package/cells/GridGroupCell.d.ts +68 -0
- package/cells/GridHierarchyCell.d.ts +67 -0
- package/cells/GridSelectionCell.d.ts +65 -0
- package/columnMenu/ColumnMenu.d.ts +191 -0
- package/columnMenu/ColumnMenuContent.d.ts +58 -0
- package/columnMenu/GridColumnMenuCheckboxFilter.d.ts +102 -0
- package/columnMenu/GridColumnMenuFilter.d.ts +129 -0
- package/columnMenu/GridColumnMenuFilter.mjs +5 -5
- package/columnMenu/GridColumnMenuFilterCell.d.ts +65 -0
- package/columnMenu/GridColumnMenuFilterOperators.d.ts +49 -0
- package/columnMenu/GridColumnMenuFilterUI.d.ts +59 -0
- package/columnMenu/GridColumnMenuItem.d.ts +60 -0
- package/columnMenu/GridColumnMenuItemContent.d.ts +26 -0
- package/columnMenu/GridColumnMenuItemGroup.d.ts +12 -0
- package/columnMenu/GridColumnMenuSort.d.ts +46 -0
- package/common.d.ts +184 -0
- package/components/GridDragClue.d.ts +11 -0
- package/components/GridDropClue.d.ts +11 -0
- package/components/GridLoader.d.ts +32 -0
- package/components/PagerContainer.d.ts +11 -0
- package/components/VirtualScrollHeightContainer.d.ts +11 -0
- package/components/colGroup/GridColGroup.d.ts +11 -0
- package/components/noRecords/GridNoRecords.d.ts +15 -0
- package/components/noRecords/GridNoRecordsContainer.d.ts +15 -0
- package/components/utils.d.ts +21 -0
- package/dist/cdn/js/kendo-vue-grid.js +1 -1
- package/drag/ColumnDraggable.d.ts +34 -0
- package/drag/ColumnResize.d.ts +46 -0
- package/drag/ColumnResizer.d.ts +27 -0
- package/drag/CommonDragLogic.d.ts +43 -0
- package/drag/DragClue.d.ts +18 -0
- package/drag/DropClue.d.ts +17 -0
- package/drag/GroupingIndicator.d.ts +50 -0
- package/filterCommon.d.ts +86 -0
- package/footer/Footer.d.ts +57 -0
- package/footer/FooterRow.d.ts +35 -0
- package/header/FilterRow.d.ts +65 -0
- package/header/GridHeaderCell.d.ts +34 -0
- package/header/GridHeaderSelectionCell.d.ts +25 -0
- package/header/GroupPanel.d.ts +52 -0
- package/header/Header.d.ts +70 -0
- package/header/HeaderRow.d.ts +140 -0
- package/index.d.mts +42 -3319
- package/index.d.ts +42 -3319
- package/interfaces/ColumnType.d.ts +13 -0
- package/interfaces/CompositeHighlightDescriptor.d.ts +29 -0
- package/interfaces/ExtendedColumnProps.d.ts +33 -0
- package/interfaces/GridCellProps.d.ts +176 -0
- package/interfaces/GridCellRenderModel.d.ts +15 -0
- package/interfaces/GridColSpanProps.d.ts +21 -0
- package/interfaces/GridColumnChildrenProps.d.ts +12 -0
- package/interfaces/GridColumnMenuBaseProps.d.ts +21 -0
- package/interfaces/GridColumnMenuColumnProps.d.ts +20 -0
- package/interfaces/GridColumnMenuColumnsChooserBaseProps.d.ts +22 -0
- package/interfaces/GridColumnMenuExtendedFilterProps.d.ts +49 -0
- package/interfaces/GridColumnMenuFilterBaseProps.d.ts +56 -0
- package/interfaces/GridColumnMenuFilterProps.d.ts +34 -0
- package/interfaces/GridColumnMenuFilterUIProps.d.ts +62 -0
- package/interfaces/GridColumnMenuGroupBaseProps.d.ts +26 -0
- package/interfaces/GridColumnMenuProps.d.ts +48 -0
- package/interfaces/GridColumnMenuSortBaseProps.d.ts +35 -0
- package/interfaces/GridColumnProps.d.ts +207 -0
- package/interfaces/GridColumnState.d.ts +44 -0
- package/interfaces/GridDataType.d.ts +12 -0
- package/interfaces/GridDetailExpandableSettings.d.ts +11 -0
- package/interfaces/GridDetailRowProps.d.ts +16 -0
- package/interfaces/GridEditableSettings.d.ts +16 -0
- package/interfaces/GridFilterCellProps.d.ts +86 -0
- package/interfaces/GridFilterOperator.d.ts +14 -0
- package/interfaces/GridFilterOperators.d.ts +56 -0
- package/interfaces/GridFooterCellProps.d.ts +14 -0
- package/interfaces/GridGroupExpandableSettings.d.ts +22 -0
- package/interfaces/GridGroupableSettings.d.ts +27 -0
- package/interfaces/GridHeaderCellProps.d.ts +44 -0
- package/interfaces/GridHeaderSelectionCellProps.d.ts +24 -0
- package/interfaces/GridHighlightDescriptor.d.ts +10 -0
- package/interfaces/GridNoRecordsProps.d.ts +16 -0
- package/interfaces/GridProps.d.ts +543 -0
- package/interfaces/GridReorderDropDir.d.ts +11 -0
- package/interfaces/GridRowProps.d.ts +70 -0
- package/interfaces/GridRowReorderSettings.d.ts +25 -0
- package/interfaces/GridRowSpannableSettings.d.ts +21 -0
- package/interfaces/GridRowType.d.ts +16 -0
- package/interfaces/GridRowsSettings.d.ts +15 -0
- package/interfaces/GridSelectableSettings.d.ts +25 -0
- package/interfaces/GridSortSettings.d.ts +33 -0
- package/interfaces/GridToolbarProps.d.ts +22 -0
- package/interfaces/VirtualScrollInterface.d.ts +28 -0
- package/interfaces/events.d.ts +311 -0
- package/key.d.ts +8 -0
- package/messages/main.d.ts +430 -0
- package/messages/messagesMap.d.ts +14 -0
- package/package-metadata.d.ts +12 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +20 -14
- package/paging/GridPagerSettings.d.ts +21 -0
- package/paging/Page.d.ts +11 -0
- package/rows/GridDetailRow.d.ts +12 -0
- package/rows/GridRow.d.ts +72 -0
- package/utils/browser-support.service.d.ts +14 -0
- package/utils/main.d.ts +143 -0
- package/utils/main.js +1 -1
- package/utils/main.mjs +1 -1
- package/utils/virtualColumns.d.ts +31 -0
|
@@ -0,0 +1,543 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { DataResult, SortDescriptor, CompositeFilterDescriptor, GroupDescriptor } from '@progress/kendo-data-query';
|
|
9
|
+
import { GridGroupableSettings } from './GridGroupableSettings';
|
|
10
|
+
import { GridSortChangeEvent, GridFilterChangeEvent, GridPageChangeEvent, GridExpandChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridItemChangeEvent, GridDataStateChangeEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent, GridCancelEvent, GridSaveEvent, GridRemoveEvent, GridEditEvent, GridNavigationActionEvent, GridKeyDownEvent, GridSearchChangeEvent, GridGroupExpandChangeEvent, GridDetailExpandChangeEvent } from './events';
|
|
11
|
+
import { GridCellProps } from './GridCellProps';
|
|
12
|
+
import { GridSortSettings } from './GridSortSettings';
|
|
13
|
+
import { DetailExpandDescriptor, GridPagerSettings, GroupExpandDescriptor, SearchField } from '@progress/kendo-vue-data-tools';
|
|
14
|
+
import { GridColumnProps } from '../interfaces/GridColumnProps';
|
|
15
|
+
import { GridFilterOperators } from './GridFilterOperators';
|
|
16
|
+
import { PopupAnimation } from '@progress/kendo-vue-popup';
|
|
17
|
+
import { SVGIcon } from '@progress/kendo-vue-common';
|
|
18
|
+
import { GridColumnState } from './GridColumnState';
|
|
19
|
+
import { GridRowSpannableSettings } from './GridRowSpannableSettings';
|
|
20
|
+
/**
|
|
21
|
+
* Represents the props of the [native Vue Grid component by Kendo UI]({% slug overview_grid %}).
|
|
22
|
+
*/
|
|
23
|
+
export interface GridProps {
|
|
24
|
+
/**
|
|
25
|
+
* Sets the `id` property of the top div element of the component.
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```jsx
|
|
29
|
+
* <Grid :id="'custom-grid-id' />
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
id?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Enables data-processing inside the GridComponent based on its state.
|
|
35
|
+
* Provides an easy, built-in way to handle data operations like sorting, filtering, grouping, and paging.
|
|
36
|
+
*
|
|
37
|
+
* @default false
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* ```jsx
|
|
41
|
+
* <Grid
|
|
42
|
+
* :autoProcessData="{
|
|
43
|
+
* filter: true,
|
|
44
|
+
* search: true,
|
|
45
|
+
* sort: true,
|
|
46
|
+
* group: true,
|
|
47
|
+
* page: true
|
|
48
|
+
* }}"
|
|
49
|
+
* />
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
autoProcessData?: boolean | {
|
|
53
|
+
filter?: boolean;
|
|
54
|
+
search?: boolean;
|
|
55
|
+
sort?: boolean;
|
|
56
|
+
group?: boolean;
|
|
57
|
+
page?: boolean;
|
|
58
|
+
};
|
|
59
|
+
/**
|
|
60
|
+
* Sets the Grid row key prop to the value of this field in the dataItem.
|
|
61
|
+
* If not set, the dataItem index will be used for the row key, which
|
|
62
|
+
* might lead to row not updated during paging or scrolling.
|
|
63
|
+
*/
|
|
64
|
+
dataItemKey?: string;
|
|
65
|
+
/**
|
|
66
|
+
* When set to `true` it sets the alternating of the rows per groups so each group could start
|
|
67
|
+
* with the same color row. There is a known limitation when virtual scrolling with groups and
|
|
68
|
+
* alternatePerGroup set to `true`- there may be a slight flicker of the alternating rows in
|
|
69
|
+
* groups with larger amount of items - in this case we would rather recommend
|
|
70
|
+
* using rowTemplates and set the row alternating based on the data or dataItems.
|
|
71
|
+
*/
|
|
72
|
+
alternatePerGroup?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Sets the properties of the columns that are used by the Grid.
|
|
75
|
+
*/
|
|
76
|
+
columns?: GridColumnProps[] | null;
|
|
77
|
+
/**
|
|
78
|
+
* Sets the data of the Grid ([see example]({% slug paging_grid %})). If you use paging,
|
|
79
|
+
* the `data` option has to contain only the items for the current page.
|
|
80
|
+
*/
|
|
81
|
+
dataItems?: any[] | DataResult | null;
|
|
82
|
+
/**
|
|
83
|
+
* Enables the sorting for the columns with their `field` option set
|
|
84
|
+
* ([see example]({% slug sorting_grid %})).
|
|
85
|
+
*/
|
|
86
|
+
sortable?: GridSortSettings;
|
|
87
|
+
/**
|
|
88
|
+
* Fires when the sorting of the Grid is changed ([see example]({% slug sorting_grid %})).
|
|
89
|
+
* You have to handle the event yourself and sort the data.
|
|
90
|
+
*/
|
|
91
|
+
onSortchange?: (event: GridSortChangeEvent) => void;
|
|
92
|
+
/**
|
|
93
|
+
* The descriptors by which the data is sorted.
|
|
94
|
+
* Applies the sorting styles and buttons to the affected columns.
|
|
95
|
+
*/
|
|
96
|
+
defaultSort?: SortDescriptor[];
|
|
97
|
+
/**
|
|
98
|
+
* The descriptors by which the data is sorted.
|
|
99
|
+
* Applies the sorting styles and buttons to the affected columns.
|
|
100
|
+
*/
|
|
101
|
+
sort?: SortDescriptor[];
|
|
102
|
+
/**
|
|
103
|
+
* Enables the filtering of the columns with their `field` option set
|
|
104
|
+
* ([more information and examples]({% slug filtering_grid %})).
|
|
105
|
+
*/
|
|
106
|
+
filterable?: boolean;
|
|
107
|
+
/**
|
|
108
|
+
* The descriptor by which the data is searched. Its first FilterDescriptor populates the GridSearchBox.
|
|
109
|
+
*
|
|
110
|
+
* @example
|
|
111
|
+
* ```vue
|
|
112
|
+
* <Grid :search="{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'test' }] }" />
|
|
113
|
+
* ```
|
|
114
|
+
*/
|
|
115
|
+
search?: CompositeFilterDescriptor;
|
|
116
|
+
/**
|
|
117
|
+
* The descriptor by which the data is searched by default. Its first FilterDescriptor populates the GridSearchBox.
|
|
118
|
+
*
|
|
119
|
+
* @example
|
|
120
|
+
* ```vue
|
|
121
|
+
* <Grid :default-search="{ logic: 'or', filters: [{ field: 'category', operator: 'eq', value: 'electronics' }] }" />
|
|
122
|
+
* ```
|
|
123
|
+
*/
|
|
124
|
+
defaultSearch?: CompositeFilterDescriptor;
|
|
125
|
+
/**
|
|
126
|
+
* Defines the fields of the data that are filtered by the GridSearchBox.
|
|
127
|
+
*
|
|
128
|
+
* @example
|
|
129
|
+
* ```vue
|
|
130
|
+
* <Grid :search-fields="['name', 'category']" />
|
|
131
|
+
* ```
|
|
132
|
+
*/
|
|
133
|
+
searchFields?: (string | SearchField)[];
|
|
134
|
+
/**
|
|
135
|
+
* Fires when the search descriptor of the Grid is changed.
|
|
136
|
+
* You have to handle the event yourself and search the data.
|
|
137
|
+
*/
|
|
138
|
+
onSearchchange?: (event: GridSearchChangeEvent) => void;
|
|
139
|
+
/**
|
|
140
|
+
* The default descriptor by which the data is filtered
|
|
141
|
+
* ([more information and examples]({% slug filtering_grid %})).
|
|
142
|
+
*/
|
|
143
|
+
defaultFilter?: CompositeFilterDescriptor;
|
|
144
|
+
/**
|
|
145
|
+
* The descriptor by which the data is filtered
|
|
146
|
+
* ([more information and examples]({% slug filtering_grid %})).
|
|
147
|
+
* Affects the values and buttons in the `FilterRow` of the Grid.
|
|
148
|
+
*/
|
|
149
|
+
filter?: CompositeFilterDescriptor;
|
|
150
|
+
/**
|
|
151
|
+
* The filter operators for the Grid filters.
|
|
152
|
+
*/
|
|
153
|
+
filterOperators?: GridFilterOperators;
|
|
154
|
+
/**
|
|
155
|
+
* Fires when the Grid filter is modified through the UI
|
|
156
|
+
* ([more information and examples]({% slug filtering_grid %})).
|
|
157
|
+
* You have to handle the event yourself and filter the data.
|
|
158
|
+
*/
|
|
159
|
+
onFilterchange?: (event: GridFilterChangeEvent) => void;
|
|
160
|
+
/**
|
|
161
|
+
* The collection of column states of the grid.
|
|
162
|
+
*/
|
|
163
|
+
columnsState?: GridColumnState[];
|
|
164
|
+
/**
|
|
165
|
+
* The default collection of column states of the grid.
|
|
166
|
+
*/
|
|
167
|
+
defaultColumnsState?: GridColumnState[];
|
|
168
|
+
/**
|
|
169
|
+
* Defines if the column menu will be shown for the column.
|
|
170
|
+
* Accepts Boolean, a Vue component, a `render` function, or a slot name
|
|
171
|
+
*/
|
|
172
|
+
columnMenu?: boolean | any;
|
|
173
|
+
/**
|
|
174
|
+
* Globally overrides the default(three vertical dots) column menu icon for the whole Grid. If set, the prop can be overridden on column level using the ([menuIcon]({% slug api_grid_gridcolumnprops %}#toc-menuicon)) property.
|
|
175
|
+
*/
|
|
176
|
+
columnMenuIcon?: SVGIcon;
|
|
177
|
+
/**
|
|
178
|
+
* Controls the ColumnMenu animation. By default, the opening and closing animations are enabled.
|
|
179
|
+
*/
|
|
180
|
+
columnMenuAnimate?: boolean | PopupAnimation;
|
|
181
|
+
/**
|
|
182
|
+
* The descriptor by which the group is expanded.
|
|
183
|
+
*
|
|
184
|
+
* @example
|
|
185
|
+
* ```jsx
|
|
186
|
+
* <Grid :group-expand="[{ field: 'CategoryName', expanded: true }]" />
|
|
187
|
+
* ```
|
|
188
|
+
*/
|
|
189
|
+
groupExpand?: GroupExpandDescriptor[];
|
|
190
|
+
/**
|
|
191
|
+
* The default `groupExpand` state applied to the Grid when using uncontrolled mode.
|
|
192
|
+
*
|
|
193
|
+
* @example
|
|
194
|
+
* ```jsx
|
|
195
|
+
* <Grid :default-group-expand="[{ field: 'CategoryName', expanded: true }]" />
|
|
196
|
+
* ```
|
|
197
|
+
*/
|
|
198
|
+
defaultGroupExpand?: GroupExpandDescriptor[];
|
|
199
|
+
/**
|
|
200
|
+
* Fires when the user expands or collapses a group.
|
|
201
|
+
*/
|
|
202
|
+
onGroupexpandchange?: (event: GridGroupExpandChangeEvent) => void;
|
|
203
|
+
/**
|
|
204
|
+
* The descriptor by which the detail rows are expanded.
|
|
205
|
+
*
|
|
206
|
+
* @example
|
|
207
|
+
* ```jsx
|
|
208
|
+
* <Grid :detail-expand="{ 1: true, 3: true }" />
|
|
209
|
+
* ```
|
|
210
|
+
*/
|
|
211
|
+
detailExpand?: DetailExpandDescriptor;
|
|
212
|
+
/**
|
|
213
|
+
* The default `detailExpand` state applied to the Grid when using uncontrolled mode.
|
|
214
|
+
*
|
|
215
|
+
* @example
|
|
216
|
+
* ```jsx
|
|
217
|
+
* <Grid :default-detail-expand="{ 2: true, 4: true }" />
|
|
218
|
+
* ```
|
|
219
|
+
*/
|
|
220
|
+
defaultDetailExpand?: DetailExpandDescriptor;
|
|
221
|
+
/**
|
|
222
|
+
* Fires when the user expands or collapses a detail row.
|
|
223
|
+
*/
|
|
224
|
+
onDetailexpandchange?: (event: GridDetailExpandChangeEvent) => void;
|
|
225
|
+
/**
|
|
226
|
+
* The descriptors by which the data will be grouped
|
|
227
|
+
* ([more information and examples]({% slug groupingbasics_grid %})).
|
|
228
|
+
*/
|
|
229
|
+
group?: GroupDescriptor[];
|
|
230
|
+
/**
|
|
231
|
+
* The default `group` state applied to the Grid when using uncontrolled mode.
|
|
232
|
+
*
|
|
233
|
+
* @example
|
|
234
|
+
* ```jsx
|
|
235
|
+
* <Grid defaultGroup={[{ field: 'CategoryName' }]} />
|
|
236
|
+
* ```
|
|
237
|
+
*/
|
|
238
|
+
defaultGroup?: GroupDescriptor[];
|
|
239
|
+
/**
|
|
240
|
+
* Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data
|
|
241
|
+
* ([more information and examples]({% slug groupingbasics_grid %})).
|
|
242
|
+
*/
|
|
243
|
+
onGroupchange?: (event: GridGroupChangeEvent) => void;
|
|
244
|
+
/**
|
|
245
|
+
* Configures the pager of the Grid ([see example]({% slug paging_grid %})).
|
|
246
|
+
*
|
|
247
|
+
* The available options are:
|
|
248
|
+
* - `buttonCount: Number`—Sets the maximum numeric buttons count before the buttons are collapsed.
|
|
249
|
+
* - `info: Boolean`—Toggles the information about the current page and the total number of records.
|
|
250
|
+
* - `type: PagerType`—Accepts the `numeric` (buttons with numbers)
|
|
251
|
+
* and `input` (input for typing the page number) values.
|
|
252
|
+
* - `pageSizes: Boolean` or `Array<number>`—Shows a menu for selecting the page size.
|
|
253
|
+
* - `previousNext: Boolean`—Toggles the **Previous** and **Next** buttons.
|
|
254
|
+
*/
|
|
255
|
+
pageable?: GridPagerSettings | any;
|
|
256
|
+
/**
|
|
257
|
+
* Defines the page size that is used by the Grid pager
|
|
258
|
+
* ([see example]({% slug paging_grid %})). Required by the paging functionality.
|
|
259
|
+
*/
|
|
260
|
+
pageSize?: number;
|
|
261
|
+
/**
|
|
262
|
+
* Alias of the `pageSize` property. If `take` is set, `pageSize` will be ignored.
|
|
263
|
+
*/
|
|
264
|
+
take?: number;
|
|
265
|
+
/**
|
|
266
|
+
* The default `take` state applied to the Grid when using uncontrolled mode.
|
|
267
|
+
*
|
|
268
|
+
* @example
|
|
269
|
+
* ```jsx
|
|
270
|
+
* <Grid :default-take="20" />
|
|
271
|
+
* ```
|
|
272
|
+
*/
|
|
273
|
+
defaultTake?: number;
|
|
274
|
+
/**
|
|
275
|
+
* Fires when the page of the Grid is changed ([see example]({% slug paging_grid %})).
|
|
276
|
+
* You have to handle the event yourself and page the data.
|
|
277
|
+
*/
|
|
278
|
+
onPagechange?: (event: GridPageChangeEvent) => void;
|
|
279
|
+
/**
|
|
280
|
+
* Defines the total number of data items in all pages
|
|
281
|
+
* ([see example]({% slug paging_grid %})). Required by the paging functionality.
|
|
282
|
+
*/
|
|
283
|
+
total?: number;
|
|
284
|
+
/**
|
|
285
|
+
* Defines the number of records that will be skipped by the pager
|
|
286
|
+
* ([see example]({% slug paging_grid %})). Required by the paging functionality.
|
|
287
|
+
*/
|
|
288
|
+
skip?: number;
|
|
289
|
+
/**
|
|
290
|
+
* The default `skip` state applied to the Grid when using uncontrolled mode.
|
|
291
|
+
*
|
|
292
|
+
* @example
|
|
293
|
+
* ```vue
|
|
294
|
+
* <Grid :default-skip="10" />
|
|
295
|
+
* ```
|
|
296
|
+
*/
|
|
297
|
+
defaultSkip?: number;
|
|
298
|
+
/**
|
|
299
|
+
* Deprecated. Use 'onDetailexpandchange' or 'onGroupexpandchange' instead.
|
|
300
|
+
*/
|
|
301
|
+
onExpandchange?: (event: GridExpandChangeEvent) => void;
|
|
302
|
+
/**
|
|
303
|
+
* Determines if the scroll position will be updated after a data change.
|
|
304
|
+
* If set to `true`, the scroll will remain in the same position.
|
|
305
|
+
*/
|
|
306
|
+
fixedScroll?: boolean;
|
|
307
|
+
/**
|
|
308
|
+
*
|
|
309
|
+
* `obsolete` Will be removed in the next major release. Set `dataItemKey` property instead.
|
|
310
|
+
*
|
|
311
|
+
* Specifies the name of the field which will provide a Boolean representation
|
|
312
|
+
* of the expanded state of the item ([see example]({% slug detailrow_grid %}).
|
|
313
|
+
*/
|
|
314
|
+
expandField?: string;
|
|
315
|
+
/**
|
|
316
|
+
* Specifies the name of the field which will provide a Boolean representation
|
|
317
|
+
* of the selected state of the item ([see example]({% slug selection_grid %})).
|
|
318
|
+
*/
|
|
319
|
+
selectedField?: string;
|
|
320
|
+
/**
|
|
321
|
+
* Fires when the user tries to select or deselect a row
|
|
322
|
+
* ([see example]({% slug selection_grid %})).
|
|
323
|
+
*/
|
|
324
|
+
onSelectionchange?: (event: GridSelectionChangeEvent) => void;
|
|
325
|
+
/**
|
|
326
|
+
* The descriptor by which the highlight state of an item is defined.
|
|
327
|
+
* Passing a boolean value will highlight the whole row, while passing an object will highlight individual cells by their field.
|
|
328
|
+
*
|
|
329
|
+
*/
|
|
330
|
+
highlight?: {
|
|
331
|
+
[id: string]: boolean | {
|
|
332
|
+
[id: string]: boolean;
|
|
333
|
+
};
|
|
334
|
+
};
|
|
335
|
+
/**
|
|
336
|
+
* Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField`.
|
|
337
|
+
* ([see example]({% slug selection_grid %})).
|
|
338
|
+
*/
|
|
339
|
+
onHeaderselectionchange?: (event: GridHeaderSelectionChangeEvent) => void;
|
|
340
|
+
/**
|
|
341
|
+
* Fires when the user clicks a row.
|
|
342
|
+
*/
|
|
343
|
+
onRowclick?: (event: GridRowClickEvent) => void;
|
|
344
|
+
/**
|
|
345
|
+
* Fires when the user double clicks a row.
|
|
346
|
+
*/
|
|
347
|
+
onRowdblclick?: (event: GridRowClickEvent) => void;
|
|
348
|
+
/**
|
|
349
|
+
* Fires when the user clicks a cell.
|
|
350
|
+
*/
|
|
351
|
+
onCellclick?: (event: any) => void;
|
|
352
|
+
/**
|
|
353
|
+
* Fires when Grid is scrolled.
|
|
354
|
+
*/
|
|
355
|
+
onScroll?: (event: any) => void;
|
|
356
|
+
/**
|
|
357
|
+
* Fires when the user triggers an edit operation from a cell.
|
|
358
|
+
*/
|
|
359
|
+
onEdit?: (event: GridEditEvent) => void;
|
|
360
|
+
/**
|
|
361
|
+
* Fires when the user triggers a removal operation from a cell.
|
|
362
|
+
*/
|
|
363
|
+
onRemove?: (event: GridRemoveEvent) => void;
|
|
364
|
+
/**
|
|
365
|
+
* Fires when the user triggers a saving operation from a cell.
|
|
366
|
+
*/
|
|
367
|
+
onSave?: (event: GridSaveEvent) => void;
|
|
368
|
+
/**
|
|
369
|
+
* Fires when the user triggers a canceling operation from a cell.
|
|
370
|
+
*/
|
|
371
|
+
onCancel?: (event: GridCancelEvent) => void;
|
|
372
|
+
/**
|
|
373
|
+
* Fires when the user changes the values of the item.
|
|
374
|
+
* The event is not debounced and fires on every `onChange` event of the input in the current `EditCell`.
|
|
375
|
+
* ([more information and examples]({% slug editing_inline_grid %})).
|
|
376
|
+
*/
|
|
377
|
+
onItemchange?: (event: GridItemChangeEvent) => void;
|
|
378
|
+
/**
|
|
379
|
+
* Specifies the name of the field which will provide a Boolean representation of the edit state of the current
|
|
380
|
+
* item ([more information and examples]({% slug editing_inline_grid %})).
|
|
381
|
+
*/
|
|
382
|
+
editField?: string;
|
|
383
|
+
/**
|
|
384
|
+
* Enables the built-in row span feature of the Grid.
|
|
385
|
+
*
|
|
386
|
+
* @example
|
|
387
|
+
* ```jsx
|
|
388
|
+
* <Grid rowSpannable={true} />
|
|
389
|
+
* ```
|
|
390
|
+
*/
|
|
391
|
+
rowSpannable?: boolean | GridRowSpannableSettings;
|
|
392
|
+
/**
|
|
393
|
+
* A function that returns a custom class applied to the row.
|
|
394
|
+
*
|
|
395
|
+
* @param item - the item for the row.
|
|
396
|
+
*/
|
|
397
|
+
rowClass?: Function;
|
|
398
|
+
/**
|
|
399
|
+
* Defines the scroll mode that is used by the Grid ([see example]({% slug scrollmmodes_grid %}).
|
|
400
|
+
*
|
|
401
|
+
* The available options are:
|
|
402
|
+
* - `none`—Renders no scrollbar.
|
|
403
|
+
* - `scrollable`—This is the default scroll mode. It requires the setting of the `height` option.
|
|
404
|
+
* - `virtual`—Displays no pager and renders a portion of the data (optimized rendering)
|
|
405
|
+
* while the user is scrolling the content.
|
|
406
|
+
*/
|
|
407
|
+
scrollable?: string;
|
|
408
|
+
/**
|
|
409
|
+
* Configures the `size` of the Grid.
|
|
410
|
+
*
|
|
411
|
+
* The available options are:
|
|
412
|
+
* - small
|
|
413
|
+
* - medium
|
|
414
|
+
*
|
|
415
|
+
* @default `undefined`
|
|
416
|
+
*/
|
|
417
|
+
size?: 'small' | 'medium' | string;
|
|
418
|
+
/**
|
|
419
|
+
* Defines the row height and forces an equal height to all rows
|
|
420
|
+
* ([see example]({% slug scrollmmodes_grid %})).
|
|
421
|
+
*/
|
|
422
|
+
rowHeight?: number;
|
|
423
|
+
/**
|
|
424
|
+
* Defines the height of the detail row and forces an equal height to all detail rows
|
|
425
|
+
*/
|
|
426
|
+
detailRowHeight?: number;
|
|
427
|
+
/**
|
|
428
|
+
* Specifies a custom rendering that will be cloned and rendered inside the detail rows
|
|
429
|
+
* of the currently expanded items ([see example]({% slug master_detail_grid %}).
|
|
430
|
+
* Accepts a Vue component, a `render` function, or a slot name.
|
|
431
|
+
* The expand will be active if the `dataItemKey` is set.
|
|
432
|
+
*/
|
|
433
|
+
detail?: null | any;
|
|
434
|
+
/**
|
|
435
|
+
* Defines the GridColumnProps of the expand column.
|
|
436
|
+
*/
|
|
437
|
+
expandColumn?: GridColumnProps;
|
|
438
|
+
/**
|
|
439
|
+
* Represents the `style` HTML attribute.
|
|
440
|
+
*/
|
|
441
|
+
style?: any;
|
|
442
|
+
/**
|
|
443
|
+
* Fires when the data state of the Grid is changed.
|
|
444
|
+
*/
|
|
445
|
+
onDatastatechange?: (event: GridDataStateChangeEvent) => void;
|
|
446
|
+
/**
|
|
447
|
+
* If set to `true`, the user can resize columns by dragging the edges (resize handles) of their
|
|
448
|
+
* header cells ([see example]({% slug resizing_columns_grid %}).
|
|
449
|
+
*/
|
|
450
|
+
resizable?: boolean;
|
|
451
|
+
/**
|
|
452
|
+
* If set to `true`, the user can reorder columns by dragging their
|
|
453
|
+
* header cells ([see example]({% slug reordering_columns_grid %}).
|
|
454
|
+
*/
|
|
455
|
+
reorderable?: boolean;
|
|
456
|
+
/**
|
|
457
|
+
* Determines if grouping by dragging and dropping the column headers is allowed
|
|
458
|
+
* ([more information and examples]({% slug groupingbasics_grid %})).
|
|
459
|
+
*/
|
|
460
|
+
groupable?: GridGroupableSettings | boolean;
|
|
461
|
+
/**
|
|
462
|
+
* Fires when a column is resized
|
|
463
|
+
*/
|
|
464
|
+
onColumnresize?: (event: GridColumnResizeEvent) => void;
|
|
465
|
+
/**
|
|
466
|
+
* Fires when columns are reordered.
|
|
467
|
+
*/
|
|
468
|
+
onColumnreorder?: (event: GridColumnReorderEvent) => void;
|
|
469
|
+
/**
|
|
470
|
+
* Defines the custom rendering of the row. Accepts a Vue component, a `render` function, or a slot name.
|
|
471
|
+
*/
|
|
472
|
+
rowRender?: string | boolean | ((h: any, defaultRendering: any | null, defaultSlots: any, props: any, listeners: any) => any);
|
|
473
|
+
/**
|
|
474
|
+
* Defines the custom rendering of the cell. Accepts a Vue component, a `render` function, or a slot name.
|
|
475
|
+
* ([see example]({% slug groupingaggregates_grid %})).
|
|
476
|
+
*/
|
|
477
|
+
cellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | null | boolean;
|
|
478
|
+
/**
|
|
479
|
+
* Defines the custom rendering of the filter cell. Accepts a Vue component, a `render` function, or a slot name.
|
|
480
|
+
*/
|
|
481
|
+
filterCellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | any;
|
|
482
|
+
/**
|
|
483
|
+
* Defines the custom rendering of the header cell. Accepts a Vue component, a `render` function, or a slot name.
|
|
484
|
+
*/
|
|
485
|
+
headerCellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | any;
|
|
486
|
+
/**
|
|
487
|
+
* Specifies whether the loader of the Grid will be displayed.
|
|
488
|
+
* Defaults to `false`.
|
|
489
|
+
*/
|
|
490
|
+
showLoader?: boolean;
|
|
491
|
+
/**
|
|
492
|
+
*
|
|
493
|
+
* The boolean option is `Deprecated`. Use 'showLoader' instead.
|
|
494
|
+
*
|
|
495
|
+
* Defines if the loader will be shown. Accepts a slot name, a `render` function, or a Vue component.
|
|
496
|
+
*/
|
|
497
|
+
loader?: Object | Function | string;
|
|
498
|
+
/**
|
|
499
|
+
* Defines the custom rendering of the pager. Accepts a slot name, a `render` function, or a Vue component.
|
|
500
|
+
*/
|
|
501
|
+
pager?: Object | Function | string | boolean;
|
|
502
|
+
/**
|
|
503
|
+
* Enables virtualization of the columns. If virtualization is
|
|
504
|
+
* enabled, the columns outside the view are not rendered.
|
|
505
|
+
*/
|
|
506
|
+
columnVirtualization?: boolean;
|
|
507
|
+
/**
|
|
508
|
+
* If set to `true`, the user can use dedicated shortcuts to interact with the Grid.
|
|
509
|
+
* By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.
|
|
510
|
+
*/
|
|
511
|
+
navigatable?: boolean;
|
|
512
|
+
/**
|
|
513
|
+
* Deprecated. Not needed any more.
|
|
514
|
+
*/
|
|
515
|
+
topCacheCount?: number;
|
|
516
|
+
/**
|
|
517
|
+
* Deprecated. Not needed any more.
|
|
518
|
+
*/
|
|
519
|
+
totalGroupedHeight?: number;
|
|
520
|
+
/**
|
|
521
|
+
* Deprecated. Not needed any more.
|
|
522
|
+
*/
|
|
523
|
+
allGroupedItems?: DataResult | null;
|
|
524
|
+
/**
|
|
525
|
+
*
|
|
526
|
+
*`Deprecated` Use 'groupExpand' instead.
|
|
527
|
+
*
|
|
528
|
+
* Passes the collection of all collapsed groups for every grouped level.
|
|
529
|
+
*/
|
|
530
|
+
collapsedGroups?: any[][];
|
|
531
|
+
/**
|
|
532
|
+
* Deprecated. Not needed any more. Use 'dataItemKey' instead.
|
|
533
|
+
*/
|
|
534
|
+
uniqueField?: string;
|
|
535
|
+
/**
|
|
536
|
+
* Fires when Grid keyboard navigation position is changed.
|
|
537
|
+
*/
|
|
538
|
+
onNavigationaction?: (event: GridNavigationActionEvent) => void;
|
|
539
|
+
/**
|
|
540
|
+
* Fires when the user press keyboard key.
|
|
541
|
+
*/
|
|
542
|
+
onKeydown?: (event: GridKeyDownEvent) => void;
|
|
543
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* The direction in which a row can be dragged and dropped.
|
|
10
|
+
*/
|
|
11
|
+
export type GridReorderDropPosition = 'before' | 'after' | 'forbidden';
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* The props that the Grid passes to the GridRow component when creating it.
|
|
10
|
+
* Accessible during the `rowRender` callback of the Grid.
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* @hidden
|
|
14
|
+
*/
|
|
15
|
+
export interface GridRowProps {
|
|
16
|
+
/**
|
|
17
|
+
* The 'key' prop that may be applied to the row.
|
|
18
|
+
*/
|
|
19
|
+
key?: number;
|
|
20
|
+
/**
|
|
21
|
+
* The `data` object that represents the current row.
|
|
22
|
+
*/
|
|
23
|
+
item: any;
|
|
24
|
+
/**
|
|
25
|
+
* Indicates whether the row is an alternating row.
|
|
26
|
+
*/
|
|
27
|
+
isAltRow: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Indicates if the row is hidden. The hidden row is rendered above the
|
|
30
|
+
* visible area of the Grid. Occurs when the Grid uses virtualization and
|
|
31
|
+
* the row is on the current page. When `rowHeight` is set, `isHidden` is always `true`.
|
|
32
|
+
*/
|
|
33
|
+
isHidden: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* @hidden
|
|
36
|
+
*/
|
|
37
|
+
isHighlighted?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* The event that is fired when the row is clicked.
|
|
40
|
+
*/
|
|
41
|
+
onClick: any;
|
|
42
|
+
/**
|
|
43
|
+
* The name of the field which will provide a Boolean representation of the selected state of the item.
|
|
44
|
+
*/
|
|
45
|
+
selectedField?: string;
|
|
46
|
+
/**
|
|
47
|
+
* The row height. Configuring `rowHeight` sets the height to the height of the current Grid row.
|
|
48
|
+
*/
|
|
49
|
+
rowHeight?: number;
|
|
50
|
+
/**
|
|
51
|
+
* The type of the row.
|
|
52
|
+
*/
|
|
53
|
+
rowType: string;
|
|
54
|
+
/**
|
|
55
|
+
* The method for rendering the cell.
|
|
56
|
+
*/
|
|
57
|
+
render?: any;
|
|
58
|
+
/**
|
|
59
|
+
* @hidden
|
|
60
|
+
*/
|
|
61
|
+
ariaRowIndex?: number;
|
|
62
|
+
/**
|
|
63
|
+
* @hidden
|
|
64
|
+
*/
|
|
65
|
+
absoluteRowIndex?: number;
|
|
66
|
+
/**
|
|
67
|
+
* @hidden
|
|
68
|
+
*/
|
|
69
|
+
dataIndex?: number;
|
|
70
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Represents the settings for the row reordering functionality of the Grid.
|
|
10
|
+
*/
|
|
11
|
+
export type GridRowReorderSettings = {
|
|
12
|
+
/**
|
|
13
|
+
* Determines if the row reordering functionality is enabled.
|
|
14
|
+
*
|
|
15
|
+
* @default false
|
|
16
|
+
*/
|
|
17
|
+
enabled?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Determines what the text of the drag clue will be.
|
|
20
|
+
* Can also be a function giving the dataItem as an argument and returning a new custom drag clue as a ReactNode.
|
|
21
|
+
*
|
|
22
|
+
* Default value will be the text of the first visible data column of the row.
|
|
23
|
+
*/
|
|
24
|
+
dragClue?: string | ((dataItem: any) => any);
|
|
25
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Represents the settings for the row-spanning functionality of the Grid.
|
|
10
|
+
*/
|
|
11
|
+
export type GridRowSpannableSettings = {
|
|
12
|
+
/**
|
|
13
|
+
* Determines if the row-spanning functionality is enabled or disabled
|
|
14
|
+
*/
|
|
15
|
+
enabled?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* A function that returns the value of the cell that should span the row.
|
|
18
|
+
* The value could be combined from multiple fields of the dataItem to create a unique identifier and prevent the cell from being row-spanned.
|
|
19
|
+
*/
|
|
20
|
+
valueGetter?: (dataItem: any, field: string) => any;
|
|
21
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* The type of the GridRow component.
|
|
10
|
+
*
|
|
11
|
+
* The available values are:
|
|
12
|
+
* - `groupHeader`—The row is a group header.
|
|
13
|
+
* - `groupFooter`—The row is a group footer.
|
|
14
|
+
* - `data`—The row corresponds to an item from the `data` collection which is passed to the Grid.
|
|
15
|
+
*/
|
|
16
|
+
export type GridRowType = 'groupFooter' | 'groupHeader' | 'data';
|