@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
644 lines (643 loc) • 26.5 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as i from "react";
import { uGrid as zt, hasValidLicense as Lt, getLicenseMessage as Mt, validatePackage as Bt, getter as R, classNames as f, WatermarkOverlay as Ye } from "@progress/kendo-react-common";
import { process as Ft } from "@progress/kendo-data-query";
import { combineFilters as Ot, getDetailExpandableOptions as _t, getGroupExpandableOptions as Vt, getSelectionOptions as $t, tableKeyboardNavigationTools as M, Pager as jt, tableKeyboardNavigationBodyAttributes as Ut, tableKeyboardNavigationScopeAttributes as Ze } from "@progress/kendo-react-data-tools";
import { GridHierarchyCell as qt } from "./cells/hierarchycell/GridHierarchyCell.mjs";
import { GridEditCell as Jt } from "./cells/editcell/GridEditCell.mjs";
import { Header as Qt } from "./header/Header.mjs";
import { HeaderRow as Xt } from "./header/HeaderRow.mjs";
import { FilterRow as Yt } from "./header/FilterRow.mjs";
import { GroupPanel as Zt } from "./header/GroupPanel.mjs";
import { Footer as pt } from "./footer/Footer.mjs";
import { isRowReorderEnabled as ea, getRowSpanOptions as pe, getColumnWidth as ne, isSorted as et, flatData as ta, autoGenerateColumns as aa, mapColumns as la, clientColumn as ia, getFlatColumnsState as na, getColumnState as re, getColSpan as ra, resolveCells as oa, readColumns as da } from "./utils/index.mjs";
import { GridCell as ma } from "./cells/datacell/GridCell.mjs";
import { GridGroupCell as tt } from "./cells/groupcell/GridGroupCell.mjs";
import { GridRow as sa } from "./rows/GridRow.mjs";
import { GridHeaderSelectionCell as ca } from "./header/GridHeaderSelectionCell.mjs";
import { GridNoRecords as at } from "./components/noRecords/GridNoRecords.mjs";
import { operators as lt } from "./filterCommon.mjs";
import { FooterRow as ua } from "./footer/FooterRow.mjs";
import { normalize as fa } from "./paging/GridPagerSettings.mjs";
import { packageMetadata as oe } from "./package-metadata.mjs";
import { GridDetailCell as ga } from "./cells/detailcell/GridDetailCell.mjs";
import { GridDetailHierarchyCell as ha } from "./cells/GridDetailHierarchyCell.mjs";
import { GridNoRecordsContainer as it } from "./components/noRecords/GridNoRecordsContainer.mjs";
import { GridClientWrapper as nt } from "./GridClientWrapper.mjs";
import { GridColGroup as ba } from "./components/colGroup/GridColGroup.mjs";
import { GridTable as ya } from "./components/table/GridTable.mjs";
import { GridDropClue as rt } from "./components/GridDropClue.mjs";
import { GridDragClue as ot } from "./components/GridDragClue.mjs";
import { GridTableBody as dt } from "./components/table/GridTableBody.mjs";
import { PagerContainer as Ca } from "./components/PagerContainer.mjs";
import { GridTableScrollable as wa } from "./components/table/GridTableScrollable.mjs";
import { GridElementContainer as mt } from "./components/GridElementContainer.mjs";
import { GridContainerElementContainer as Ea } from "./components/GridContainerElementContainer.mjs";
import { VirtualScrollHeightContainer as Ia } from "./components/VirtualScrollHeightContainer.mjs";
import { gridAriaLabel as st, messages as Sa } from "./messages/index.mjs";
import { GridReorderableRowsContainer as va } from "./components/GridDraggableRowsContainer.mjs";
import { GridRowReorderCell as Ra } from "./cells/rowreordercell/GridRowReorderCell.mjs";
import { GridHeaderRowReorderCell as Ga } from "./header/client/GridHeaderRowReorderCell.mjs";
import { GridLoader as ct } from "./components/GridLoader.mjs";
import { gridPremiumFeatures as xa } from "./utils/premium.mjs";
import { LocalizationService as ka, IntlService as Na } from "@progress/kendo-react-intl";
import { getVirtualCellsToRender as Da } from "./utils/virtualColumns.mjs";
import { GridEditDialog as Ha } from "./components/GridEditDialog.mjs";
import { GridCellServer as Ta } from "./cells/datacell/GridCellServer.mjs";
import { GridEditCellServer as Pa } from "./cells/editcell/GridEditCellServer.mjs";
import { GridSelectionCellServer as Ka } from "./cells/selectioncell/GridSelectionCellServer.mjs";
import { GridSelectionCell as Aa } from "./cells/selectioncell/GridSelectionCell.mjs";
import { GridHierarchyCellServer as Wa } from "./cells/hierarchycell/GridHierarchyCellServer.mjs";
import { GridRowReorderCellServer as za } from "./cells/rowreordercell/GridRowReorderCellServer.mjs";
import { GridDetailCellServer as La } from "./cells/detailcell/GridDetailCellServer.mjs";
import { GridGroupCellServer as Ma } from "./cells/groupcell/GridGroupCellServer.mjs";
const Ba = i.forwardRef((e, ut) => {
var Ke, Ae, We, ze, Le, Me, Be, Fe, Oe, _e, Ve, $e;
const K = e.id + "-role-element-id", N = e.navigatable ? K : "";
let y = e.columnsState || [];
const ft = (t, o, r, d, a, l, m) => {
const c = [], b = ta(
c,
t,
o,
{ index: r },
d !== void 0,
a,
l,
kt.defaultExpand,
m
);
return { flattedData: c, resolvedGroupsCount: b };
}, gt = (t) => {
const o = t.filter(
(r) => r && r.type && r.type.displayName === "KendoReactGridColumn"
);
return da(o, y, { prevId: 0, idPrefix: N });
}, ht = () => {
const t = [], o = (r, d) => r == null ? void 0 : r.forEach((a) => {
const l = a.hidden || d;
t.push({
...a,
hidden: l
}), o(a.children, l);
});
return o(y, !1), t;
}, bt = (t) => {
const o = ht();
return [
t.filter((r) => {
var d;
return !r.hidden && !((d = o.find((a) => a.id === r.id)) != null && d.hidden);
}),
t.filter((r) => {
var d;
return r.hidden || ((d = o.find((a) => a.id === r.id)) == null ? void 0 : d.hidden);
})
];
}, yt = (t, o) => {
s = gt(t), s.filter((a) => !a.hidden).length === 0 && (s = aa(
w,
e.group,
{
column: W.column
},
{
prevId: 0,
idPrefix: N
}
)), wt(s, o);
const [r, d] = bt(s);
s = r, se = d, A = la(s, y, !0), ce = s.map(ia);
}, Ct = (t, o) => {
const r = (d) => {
var l;
const a = o.find((m) => m.id === d.id);
if (a) {
const m = { ...a };
return m.children = (l = d.children) == null ? void 0 : l.map(r), m;
}
return re(d);
};
y = t.filter((d) => d.parentIndex === -1).map(r);
}, wt = (t, o) => {
t.filter((l) => l.columnType === "checkbox").forEach((l) => {
l.width = l.width || "50px", l.defaultCell = e.isClient ? Aa : Ka, l.defaultHeaderCell = ca, l._type = "edit";
}), H !== void 0 && t.filter((l) => l.columnType === "reorder").forEach((l) => {
l.width = l.width || "50px", l.defaultCell = e.isClient ? Ra : za, l.defaultHeaderCell = Ga, l.sortable = !1, l.filterable = !1, l.editable = !1;
});
const r = na(y);
Ct(t, r);
const d = {
id: "",
resizable: !0,
width: "32px",
title: " ",
declarationIndex: -1,
orderIndex: -1,
children: [],
parentIndex: -1,
depth: 0,
colSpan: 0,
headerColSpan: 0,
rowSpan: 0,
left: 0,
right: 0,
index: 0,
rightBorder: !1,
ariaColumnIndex: 0,
isAccessible: !0
};
let a = 0;
if (W.enabled && e.detail) {
const l = {
...d,
_type: "expand",
id: M.generateNavigatableId(`${a++}`, "expand", "column"),
defaultCell: e.isClient ? qt : Wa,
field: W.column,
headerClassName: f(u.hierarchyCell({}))
};
t.unshift(l), y.unshift(r.find((m) => m.id === l.id) || re(l));
}
for (let l = 0; l < o; l++) {
const m = {
...d,
isAccessible: !1,
defaultCell: e.isClient ? tt : Ma,
id: M.generateNavigatableId(`${a++}`, "group", "column"),
field: "value",
locked: e.lockGroups
};
t.unshift(m), y.unshift(r.find((c) => c.id === m.id) || re(m));
}
t.slice(a).forEach((l) => {
l.parentIndex >= 0 && (l.parentIndex += a), l.rowSpannable = l.rowSpannable !== void 0 ? pe(l.rowSpannable) : be;
});
}, de = () => e.isClient ? s : ce, me = (t) => {
const o = [];
let r = null, d = 0;
if (h.forEach((a, l) => {
let m = parseFloat((a.width || "").toString()) || 10;
if (typeof (a == null ? void 0 : a.width) == "number" && (a != null && a.minResizableWidth) && (a == null ? void 0 : a.width) < (a == null ? void 0 : a.minResizableWidth) && (m = a == null ? void 0 : a.minResizableWidth), typeof (a == null ? void 0 : a.width) == "number" && (a != null && a.minWidth) && (a == null ? void 0 : a.width) < (a == null ? void 0 : a.minWidth) ? m = a == null ? void 0 : a.minWidth : typeof (a == null ? void 0 : a.width) == "number" && (a != null && a.maxWidth) && (a == null ? void 0 : a.width) > (a == null ? void 0 : a.maxWidth) && (m = a == null ? void 0 : a.maxWidth), d) {
d--, r && (r.width += m);
return;
}
const c = Math.min(ra(a, t), h.length - l);
d = c - 1, r = {
width: m,
colSpan: c,
columnIndex: l
}, o.push(r);
}), e.columnVirtualization) {
const a = It.current || 0, l = St.current || parseFloat(((e.style || {}).width || "").toString());
return Da({
cellModels: o,
columns: h,
tableViewPortWidth: l,
scrollLeft: a
});
}
return o;
}, Et = () => {
const { pageable: t, take: o, pageSize: r } = e;
if (!E)
return 0;
if (!t) {
if (o)
return o;
if (r)
return r;
}
const d = e.rowHeight || Rt.current, a = vt.current;
return a && d ? Math.ceil(a / d * 1.5) : 0;
};
let g = [], j, s = [], se = [], ce = [], A = [[]];
const It = e.scrollLeftRef || { current: 0 }, St = e.widthRef || { current: 0 }, vt = e.containerHeightRef || { current: 0 }, Rt = e.minRowHeightRef || { current: 0 }, B = e.localization || new ka(e.language), Gt = e.intl || new Na((Ke = e.locale) != null ? Ke : "en"), D = e.unstyled, u = D && D.uGrid ? D.uGrid : zt, H = ea(e.rowReorderable), E = e.scrollable === "virtual" || e.scrollable === void 0 && e.isClient && Lt(oe) || !1, ue = Mt(oe), T = e.autoProcessData === !0 ? {
group: !0,
sort: !0,
filter: !0,
search: !0,
page: !0
} : e.autoProcessData;
let w, G;
if (Array.isArray(e.data) ? (w = e.data, G = (Ae = e.total) != null ? Ae : w.length) : (w = ((We = e.data) == null ? void 0 : We.data) || [], G = (Me = (Le = e.total) != null ? Le : (ze = e.data) == null ? void 0 : ze.total) != null ? Me : w.length), T) {
const t = T.page && !(E && !e.pageable), { data: o, total: r } = Ft(w, {
group: T.group ? e.group : void 0,
sort: T.sort ? e.sort : void 0,
filter: Ot(
T.filter ? e.filter : void 0,
T.search ? e.search : void 0
),
...t ? {
take: e.pageable ? e.take || 10 : e.take,
skip: e.skip || 0
} : {}
});
w = o, G = (Be = e.total) != null ? Be : r;
}
const F = w.length === G, { size: I = "medium" } = e, xt = typeof e.groupable == "object" && e.groupable.footer || "none", O = e.groupable === !0 || typeof e.groupable == "object" && e.groupable.enabled !== !1, W = _t(!!e.detail), kt = Vt(
typeof e.groupable == "object" && e.groupable.enabled !== !1 ? e.groupable.expandable : e.groupable
), fe = !!((Fe = e.group) != null && Fe.length), { resolvedGroupsCount: Nt, flattedData: Dt } = ft(
w,
xt,
F ? 0 : e.skip || 0,
e.group,
e.detailExpand,
e.groupExpand,
e.dataItemKey
);
g = Dt;
const U = Et(), q = ((Oe = e.virtualSkipRef) == null ? void 0 : Oe.current) || 0;
let ge = G;
if (E) {
let t = e.skip || 0;
if ((fe || e.pageable) && (t = q, ge = g.length), F || fe || e.pageable)
if (U === 0) {
const o = Math.min(e.take || e.pageSize || 20, g.length);
j = g.slice(t, t + o);
} else
j = g.slice(t, t + U);
}
const he = $t(e.selectable), be = pe(e.rowSpannable), Ht = he && he.drag ? "none" : void 0, _ = i.useMemo(() => i.Children.toArray(e.children), [e.children]);
yt(_, Nt);
const J = i.useMemo(() => {
const t = xa(e, s);
return {
premium: t.length > 0,
features: t
};
}, [e, s]), ye = i.useMemo(() => J.premium ? !Bt(oe, { component: "Grid", features: J.features }) : !1, [J.premium]), Ce = _.map((t) => t && t.type && t.type.displayName === "KendoReactGridToolbar" ? i.cloneElement(t, { ...t.props, _ariaControls: K, ariaLabel: "Top toolbar" }) : null), V = _.filter((t) => t && t.type && t.type.displayName === "KendoReactGridNoRecords"), we = _.filter(
(t) => t && t.type && t.type.displayName === "KendoReactGridStatusBar"
), h = s.filter((t) => t.children.length === 0), Ee = O && /* @__PURE__ */ i.createElement(Zt, { columns: de(), group: e.group || [], ariaControls: K }), Ie = /* @__PURE__ */ i.createElement(
Qt,
{
size: I,
staticHeaders: e.scrollable !== "none",
draggable: e.reorderable || O,
headerRow: /* @__PURE__ */ i.createElement(
Xt,
{
cells: e.cells,
sort: e.sort,
sortable: e.sortable,
group: e.group || [],
groupable: O,
filter: e.filter,
filterable: e.filterable,
filterOperators: e.filterOperators || lt,
columnMenu: e.columnMenu,
columnMenuIcon: e.columnMenuIcon,
columns: s,
columnsMap: A,
navigatable: !!e.navigatable,
localization: B,
unstyled: D,
columnsState: y,
headerSelectionValue: !!(e.select && g.filter((t) => t.rowType === "data").every(
(t) => e.select && e.dataItemKey && R(e.dataItemKey)(t.dataItem) !== void 0 ? e.select[R(e.dataItemKey)(t.dataItem)] : void 0
))
}
),
filterRow: e.filterable && /* @__PURE__ */ i.createElement(
Yt,
{
cells: e.cells,
size: I,
columns: s,
filter: e.filter,
filterOperators: e.filterOperators || lt,
sort: e.sort,
navigatable: !!e.navigatable,
ariaRowIndex: A.length + 1,
localization: B
}
) || void 0,
cols: h.map((t, o) => /* @__PURE__ */ i.createElement("col", { key: o.toString(), width: ne(t) }))
}
), Se = h.findIndex((t) => typeof t.colSpan == "function") > -1;
let Q;
Se || (Q = me(null));
const X = ((_e = e.editable) == null ? void 0 : _e.mode) === "dialog", Tt = (Ve = e.editable) == null ? void 0 : Ve.enabled, Pt = (t, o, r, d, a) => {
let l = !1;
const m = e.select && e.dataItemKey && R(e.dataItemKey)(t.dataItem) !== void 0 ? e.select[R(e.dataItemKey)(t.dataItem)] : void 0, c = e.highlight && e.dataItemKey && R(e.dataItemKey)(t.dataItem) !== void 0 ? e.highlight[R(e.dataItemKey)(t.dataItem)] : void 0;
return Se && (Q = me(t.dataItem)), {
row: Q.map(({ columnIndex: b, colSpan: P }) => {
var je, Ue, qe, Je, Qe, Xe;
const n = h[b], x = y[b], C = (Ue = (je = n.locked) != null ? je : x == null ? void 0 : x.locked) != null ? Ue : !1;
let S;
if ((qe = n.rowSpannable) != null && qe.enabled && t.rowType === "data" && n.field && a) {
const v = n.field ? (Qe = (Je = n.rowSpannable).valueGetter) == null ? void 0 : Qe.call(Je, t.dataItem, n.field) : null;
S = { value: v, count: 1 }, a[n.field] && ((Xe = a[n.field]) == null ? void 0 : Xe.value) === v && a[n.field] !== null ? (a[n.field].count++, S.count = null) : a[n.field] = S;
}
const ee = n.id ? n.id : b, te = f(u.contentSticky({ locked: C }), n.className), ae = n.left !== void 0 ? { left: n.left, right: n.right } : {};
let k = !1;
if (n.editable && e.editable) {
const v = e.edit && e.dataItemKey ? e.edit[R(e.dataItemKey)(t.dataItem)] : void 0, ie = typeof v == "boolean" ? v : Array.isArray(v) ? n.field && v.indexOf(n.field) > -1 : n.field !== void 0 && v === n.field;
ie && n.columnType === "data" && (ie === !0 || ie === n.field) && (l = !0, X || (k = !0));
}
const L = n._type === "expand", le = {
locked: e.lockGroups,
id: M.generateNavigatableId(
`${o}-${String(b)}`,
N,
L || t.rowType === "groupHeader" || t.rowType === "groupFooter" || n.field === "value" ? "nodata" : "cell"
),
colSpan: P,
dataItem: t.dataItem,
field: n.field,
editor: n.editor,
format: n.format,
columnType: n.columnType,
rowReorderable: H,
className: te,
cells: oa(e.cells, n.cells),
columnIndex: b,
columnsCount: h.length,
rowType: t.rowType,
level: t.level,
expanded: t.expanded,
dataIndex: t.dataIndex,
rowDataIndex: r,
columnPosition: ae,
style: {},
ariaColumnIndex: n.ariaColumnIndex,
isSelected: !!((n == null ? void 0 : n._type) === "edit" ? m : Array.isArray(m) && m.indexOf(b) > -1),
isHighlighted: !!((n == null ? void 0 : n._type) === "edit" ? c : Array.isArray(c) && c.indexOf(b) > -1),
isSorted: !!et(n.field, e.sort),
isInEdit: k,
isAlt: d,
unstyled: D,
group: t.group,
localization: B,
intl: Gt,
_rowSpan: S
}, $ = n.defaultCell || k && (e.isClient ? Jt : Pa) || (e.isClient ? ma : Ta);
return /* @__PURE__ */ i.createElement($, { key: ee, cellProps: le });
}),
isInEdit: l,
isSelected: typeof m == "boolean" && m,
isHighlighted: typeof c == "boolean" && c
};
}, Kt = 0;
let Y = null;
const ve = (t) => t >= g.length - Kt, Z = [], Re = !g.length;
let z = 0;
if (g.length) {
const t = A.length + (e.filterable ? 1 : 0) + 1;
let o = e.skip || 0, r = -1, d = 0;
const a = be.enabled ? {} : void 0;
if (E) {
if (q > 0) {
const l = g.slice(0, q).filter((m) => m.rowType === "data").length;
r += l, o += l;
}
!e.pageable && F && (r += e.skip || 0);
}
(j || g).forEach((l, m) => {
var S;
l.rowType === "data" && r++;
const c = l.dataIndex % 2 !== 0, b = e.dataItemKey && R(e.dataItemKey)(l.dataItem), P = m + o, n = b || "ai" + P, x = n + "_1", C = Pt(l, n, r, c, a);
if (z = P + t + d, X && Tt && C.isInEdit && (Y = l.dataItem), Z.push(
/* @__PURE__ */ i.createElement(
sa,
{
key: n,
dataItem: l.dataItem,
isAltRow: c,
isInEdit: C.isInEdit && !X,
rowType: l.rowType,
isRowReorderable: H,
isHidden: ve(m),
onClick: null,
onDoubleClick: null,
rowHeight: e.rowHeight,
ariaRowIndex: z,
absoluteRowIndex: P,
dataIndex: r,
isSelected: C.isSelected,
isHighlighted: C.isHighlighted,
rows: e.rows
},
C.row
)
), e.detail && l.rowType === "data" && l.expanded) {
const ee = h.length - (W.enabled ? 1 : 0) - (e.group ? e.group.length : 0) || 1;
d++, z = P + t + d;
const te = e.isClient ? ga : La;
Z.push(
/* @__PURE__ */ i.createElement(
"tr",
{
key: x,
className: f(u.detailTr({ isAlt: c })),
style: {
visibility: ve(m) ? "hidden" : "",
height: e.detailRowHeight
},
role: "row",
"aria-rowindex": z
},
(S = e == null ? void 0 : e.group) == null ? void 0 : S.map((ae, k) => {
var $;
const L = ($ = C == null ? void 0 : C.row[k]) == null ? void 0 : $.props.style, le = L ? { left: L.left, right: L.right } : {};
return /* @__PURE__ */ i.createElement(
tt,
{
key: k,
cellProps: {
id: "",
dataItem: l.dataItem,
field: ae.field,
dataIndex: l.dataIndex,
columnPosition: le,
style: {},
ariaColumnIndex: 1 + k,
isSelected: !1,
locked: e.lockGroups,
cells: e.cells,
group: l.group
}
}
);
}),
W.enabled && /* @__PURE__ */ i.createElement(
ha,
{
unstyled: D,
id: M.generateNavigatableId(`${x}-dhcell`, N)
}
),
/* @__PURE__ */ i.createElement(
te,
{
dataItem: l.dataItem,
dataIndex: l.dataIndex,
colSpan: ee,
ariaColIndex: 2 + (e.group ? e.group.length : 0),
detail: e.detail,
id: M.generateNavigatableId(`${x}-dcell`, N)
}
)
)
);
}
});
}
const Ge = {
size: I,
total: G,
skip: e.skip || 0,
take: (e.take !== void 0 ? e.take : e.pageSize) || 10,
...fa(e.pageable || {})
}, xe = /* @__PURE__ */ i.createElement(Ca, null, e.pager ? /* @__PURE__ */ i.createElement(e.pager, { ...Ge }) : /* @__PURE__ */ i.createElement(jt, { className: f(u.pager({})), ...Ge })), At = (t, o) => /* @__PURE__ */ i.createElement("col", { key: o.toString(), width: ne(t) }), ke = ($e = e.cells) != null && $e.footerCell || s.some((t) => {
var o;
return !!((o = t.cells) != null && o.footerCell);
}) ? /* @__PURE__ */ i.createElement(
pt,
{
size: I,
staticHeaders: e.scrollable !== "none",
row: /* @__PURE__ */ i.createElement(
ua,
{
cells: e.cells,
idPrefix: N,
columns: s,
ariaRowIndex: z + 1
}
),
cols: h.map(At)
}
) : null, Ne = /* @__PURE__ */ i.createElement(ba, null, h.map((t, o) => /* @__PURE__ */ i.createElement(
"col",
{
key: o.toString(),
className: et(t.field, e.sort) ? f(u.sorted({})) : void 0,
width: ne(t)
}
))), De = e.reorderable || O, { detail: Fa, cells: Oa, rows: _a, ...Wt } = e, He = /* @__PURE__ */ i.createElement(
"tbody",
{
role: "rowgroup",
className: f(u.tbody({})),
...Ut
},
Z
), Te = Y ? /* @__PURE__ */ i.createElement(Ha, { columns: h, customEditDialog: e.editDialog, dataItem: Y }) : null;
let p = He;
H && (p = /* @__PURE__ */ i.createElement(
va,
{
unstyled: u,
columns: s,
rowReorderSettings: e.rowReorderable
},
He
));
const Pe = {
gridRef: ut,
innerGrid: e.innerGrid,
gridProps: Wt,
columnsRef: de(),
hiddenColumnsRef: se,
columnsMapRef: A,
columnsState: y,
dataRef: g,
id: K,
virtualTotal: ge,
isAllData: F,
virtualPageSize: U,
isVirtualScroll: E,
detailExpandable: !!e.detail
};
return e.scrollable === "none" ? /* @__PURE__ */ i.createElement(nt, { ...Pe }, /* @__PURE__ */ i.createElement(mt, null, /* @__PURE__ */ i.createElement(
"div",
{
id: e.id,
style: e.style,
className: f(u.wrapper({ size: I }), e.className),
...Ze
},
Ce,
Ee,
/* @__PURE__ */ i.createElement(
ya,
{
selectable: e.selectable,
className: f(u.table({ size: I }))
},
Ne,
Ie,
/* @__PURE__ */ i.createElement(dt, { rowReorderable: H }, p),
ke
),
Re && /* @__PURE__ */ i.createElement(it, null, V.length ? V : /* @__PURE__ */ i.createElement(at, null)),
De && /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(rt, null), /* @__PURE__ */ i.createElement(ot, null))
)), we, e.pageable && xe, /* @__PURE__ */ i.createElement(ct, { loader: e.loader, showLoader: e.showLoader }), Te, ye && /* @__PURE__ */ i.createElement(Ye, { message: ue })) : /* @__PURE__ */ i.createElement(nt, { ...Pe }, /* @__PURE__ */ i.createElement(mt, null, /* @__PURE__ */ i.createElement(
"div",
{
id: e.id,
style: e.style,
className: f(
u.wrapper({
size: I,
virtual: E
}),
e.className
),
...Ze
},
Ce,
Ee,
/* @__PURE__ */ i.createElement(
"div",
{
className: f(u.ariaRoot({})),
role: "grid",
"aria-colcount": h.length,
"aria-rowcount": G,
id: K,
"aria-label": B.toLanguageString(st, Sa[st])
},
Ie,
/* @__PURE__ */ i.createElement("div", { className: f(u.container({})), role: "presentation" }, /* @__PURE__ */ i.createElement(Ea, null, /* @__PURE__ */ i.createElement("div", { className: f(u.content({})), role: "presentation" }, /* @__PURE__ */ i.createElement("div", { className: f(u.tableWrap({})), role: "presentation" }, /* @__PURE__ */ i.createElement(
wa,
{
selectable: e.selectable,
tableClassName: f(
u.table({
size: I
})
),
tableStyle: { userSelect: Ht }
},
Ne,
/* @__PURE__ */ i.createElement(dt, { rowReorderable: H }, p)
), Re && /* @__PURE__ */ i.createElement(it, null, V.length ? V : /* @__PURE__ */ i.createElement(at, null))), E && /* @__PURE__ */ i.createElement(
"div",
{
className: f(u.heightContainer({})),
role: "presentation"
},
/* @__PURE__ */ i.createElement(Ia, { isVirtualScroll: E })
)))),
ke,
De && /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(rt, null), /* @__PURE__ */ i.createElement(ot, null)),
ye && /* @__PURE__ */ i.createElement(Ye, { message: ue })
),
we,
e.pageable && xe,
/* @__PURE__ */ i.createElement(ct, { loader: e.loader, showLoader: e.showLoader }),
Te
)));
});
Ba.displayName = "KendoReactGridComponent";
export {
Ba as GridComponent
};