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