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