@progress/kendo-react-grid 9.4.0-develop.17 → 9.4.0-develop.19

package/index.d.mts

@@ -1408,6 +1408,20 @@ export declare interface GridCustomHeaderCellProps extends GridHeaderCellProps {
     index?: number;
 }
 
+/**
+ * The properties of the default Grid Row.
+ */
+export declare interface GridCustomRowProps extends GridRowProps {
+    /**
+     * The props and attributes that are applied to the tr element by default.
+     */
+    trProps?: React.HTMLAttributes<HTMLTableRowElement> | null;
+    /**
+     * The default children of the table row.
+     */
+    children?: React.ReactNode | React.ReactNode[];
+}
+
 /**
  * Represents the object of the `onDataStateChange` Grid event.
  */
@@ -2103,6 +2117,10 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * Sets a set of custom components that the Grid will render instead of the built-in cell.
      */
     cells?: GridCellsSettings;
+    /**
+     * Sets a set of custom components that the Grid will render instead of the built-in row.
+     */
+    rows?: GridRowsSettings;
     /**
      * Sets the data of the Grid ([see example]({% slug paging_grid %})). If you use paging, the `data` option has to contain only the items for the current page. It takes values of type null, any or [DataResult]({% slug api_kendo-data-query_dataresult%})
      */
@@ -2523,6 +2541,10 @@ export declare interface GridRowProps extends KendoReactComponentBaseProps {
      * A function for overriding the default rendering of the row.
      */
     render?: (row: React.ReactElement<HTMLTableRowElement>, props: GridRowProps) => React.ReactNode;
+    /**
+     * Sets a set of rows components that the Grid will render instead of the built-in row.
+     */
+    rows?: GridRowsSettings;
     /**
      * The index to be applied to the `aria-rowindex` attribute.
      */
@@ -2621,6 +2643,15 @@ export declare type GridRowSpannableSettings = {
     valueGetter?: (dataItem: any, field: string) => any;
 };
 
+/**
+ * The settings of the rows prop options.
+ */
+export declare interface GridRowsSettings {
+    groupHeader?: ComponentType<GridCustomRowProps>;
+    data?: ComponentType<GridCustomRowProps>;
+    groupFooter?: ComponentType<GridCustomRowProps>;
+}
+
 /**
  * The type of the GridRow component.
  *

package/index.d.ts

@@ -1408,6 +1408,20 @@ export declare interface GridCustomHeaderCellProps extends GridHeaderCellProps {
     index?: number;
 }
 
+/**
+ * The properties of the default Grid Row.
+ */
+export declare interface GridCustomRowProps extends GridRowProps {
+    /**
+     * The props and attributes that are applied to the tr element by default.
+     */
+    trProps?: React.HTMLAttributes<HTMLTableRowElement> | null;
+    /**
+     * The default children of the table row.
+     */
+    children?: React.ReactNode | React.ReactNode[];
+}
+
 /**
  * Represents the object of the `onDataStateChange` Grid event.
  */
@@ -2103,6 +2117,10 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * Sets a set of custom components that the Grid will render instead of the built-in cell.
      */
     cells?: GridCellsSettings;
+    /**
+     * Sets a set of custom components that the Grid will render instead of the built-in row.
+     */
+    rows?: GridRowsSettings;
     /**
      * Sets the data of the Grid ([see example]({% slug paging_grid %})). If you use paging, the `data` option has to contain only the items for the current page. It takes values of type null, any or [DataResult]({% slug api_kendo-data-query_dataresult%})
      */
@@ -2523,6 +2541,10 @@ export declare interface GridRowProps extends KendoReactComponentBaseProps {
      * A function for overriding the default rendering of the row.
      */
     render?: (row: React.ReactElement<HTMLTableRowElement>, props: GridRowProps) => React.ReactNode;
+    /**
+     * Sets a set of rows components that the Grid will render instead of the built-in row.
+     */
+    rows?: GridRowsSettings;
     /**
      * The index to be applied to the `aria-rowindex` attribute.
      */
@@ -2621,6 +2643,15 @@ export declare type GridRowSpannableSettings = {
     valueGetter?: (dataItem: any, field: string) => any;
 };
 
+/**
+ * The settings of the rows prop options.
+ */
+export declare interface GridRowsSettings {
+    groupHeader?: ComponentType<GridCustomRowProps>;
+    data?: ComponentType<GridCustomRowProps>;
+    groupFooter?: ComponentType<GridCustomRowProps>;
+}
+
 /**
  * The type of the GridRow component.
  *

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-grid",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1738828684,version:"9.4.0-develop.17",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-grid",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1738842030,version:"9.4.0-develop.19",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1738828684,
-  version: "9.4.0-develop.17",
+  publishDate: 1738842030,
+  version: "9.4.0-develop.19",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-grid",
-  "version": "9.4.0-develop.17",
+  "version": "9.4.0-develop.19",
   "description": "React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -28,17 +28,17 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.21.2",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "9.4.0-develop.17",
-    "@progress/kendo-react-buttons": "9.4.0-develop.17",
-    "@progress/kendo-react-common": "9.4.0-develop.17",
-    "@progress/kendo-react-data-tools": "9.4.0-develop.17",
-    "@progress/kendo-react-dateinputs": "9.4.0-develop.17",
-    "@progress/kendo-react-indicators": "9.4.0-develop.17",
-    "@progress/kendo-react-dropdowns": "9.4.0-develop.17",
-    "@progress/kendo-react-inputs": "9.4.0-develop.17",
-    "@progress/kendo-react-intl": "9.4.0-develop.17",
-    "@progress/kendo-react-popup": "9.4.0-develop.17",
-    "@progress/kendo-react-layout": "9.4.0-develop.17",
+    "@progress/kendo-react-animation": "9.4.0-develop.19",
+    "@progress/kendo-react-buttons": "9.4.0-develop.19",
+    "@progress/kendo-react-common": "9.4.0-develop.19",
+    "@progress/kendo-react-data-tools": "9.4.0-develop.19",
+    "@progress/kendo-react-dateinputs": "9.4.0-develop.19",
+    "@progress/kendo-react-indicators": "9.4.0-develop.19",
+    "@progress/kendo-react-dropdowns": "9.4.0-develop.19",
+    "@progress/kendo-react-inputs": "9.4.0-develop.19",
+    "@progress/kendo-react-intl": "9.4.0-develop.19",
+    "@progress/kendo-react-popup": "9.4.0-develop.19",
+    "@progress/kendo-react-layout": "9.4.0-develop.19",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
@@ -84,7 +84,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1738828684,
+      "publishDate": 1738842030,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },

package/rows/GridRow.js

@@ -6,4 +6,4 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),a=require("@progress/kendo-react-common"),C=require("../constants/index.js"),k=require("../GridClientWrapper.js");function O(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const t=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,t.get?t:{enumerable:!0,get:()=>e[o]})}}return r.default=e,Object.freeze(r)}const d=O(v),T=e=>{var g;const r=d.useContext(k.GridContext),{reorderRowDropTargetRef:o,reorderRowDragTargetRef:t,activeDragRowDataItemRef:R}=r,{rowType:i,isAltRow:w,isInEdit:f,isSelected:b}=e,c=a.useUnstyled(),D=c&&c.uGrid?c.uGrid:a.uGrid,m=a.classNames(D.tr({selected:b,isHeader:i==="groupHeader",isFooter:i==="groupFooter",isMaster:i!=="groupHeader"&&i!=="groupFooter",isAltRow:w,isInEdit:f})),l=d.useRef(null),y=n=>{if(e.isRowReorderable&&R.current){const x=n.originalEvent.target;o.current=x.closest(".k-table-row")}},I=()=>{t.current&&e.isRowReorderable&&(t.current.style.userSelect="")};a.useDroppable(l,{onDragOver:y,onDrop:I});const s={onClick:n=>r.rowClick(n,e.dataItem),onDoubleClick:n=>r.rowDblClick(n,e.dataItem)},u=d.createElement("tr",{ref:l,id:e.id,...s,className:m,style:{height:e.rowHeight?e.rowHeight+"px":"",visibility:e.isHidden?"hidden":"",userSelect:(g=t==null?void 0:t.current)==null?void 0:g.style.userSelect},role:"row","aria-rowindex":e.ariaRowIndex,"absolute-row-index":e.absoluteRowIndex,key:e.absoluteRowIndex,[C.GRID_ROW_INDEX_ATTRIBUTE]:e.rowType==="data"?e.dataIndex:void 0},e.children);return e.render?e.render.call(void 0,u,{...e,...s}):u};exports.GridRow=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),a=require("@progress/kendo-react-common"),h=require("../constants/index.js"),O=require("../GridClientWrapper.js");function S(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const c=S(v),G=e=>{var f;const r=c.useContext(O.GridContext),{reorderRowDropTargetRef:n,reorderRowDragTargetRef:t,activeDragRowDataItemRef:b}=r,{rowType:i,isAltRow:m,isInEdit:y,isSelected:D}=e,d=a.useUnstyled(),I=d&&d.uGrid?d.uGrid:a.uGrid,x=a.classNames(I.tr({selected:D,isHeader:i==="groupHeader",isFooter:i==="groupFooter",isMaster:i!=="groupHeader"&&i!=="groupFooter",isAltRow:m,isInEdit:y})),s=c.useRef(null),C=o=>{if(e.isRowReorderable&&b.current){const k=o.originalEvent.target;n.current=k.closest(".k-table-row")}},T=()=>{t.current&&e.isRowReorderable&&(t.current.style.userSelect="")};a.useDroppable(s,{onDragOver:C,onDrop:T});const u={onClick:o=>r.rowClick(o,e.dataItem),onDoubleClick:o=>r.rowDblClick(o,e.dataItem)},w={ref:s,id:e.id,...u,className:x,style:{height:e.rowHeight?e.rowHeight+"px":"",visibility:e.isHidden?"hidden":"",userSelect:(f=t==null?void 0:t.current)==null?void 0:f.style.userSelect},role:"row","aria-rowindex":e.ariaRowIndex,"absolute-row-index":e.absoluteRowIndex,[h.GRID_ROW_INDEX_ATTRIBUTE]:e.rowType==="data"?e.dataIndex:void 0},R=e.rowType||"data",l=e.rows;if(l&&l[R]){const o=l[R];return c.createElement(o,{key:e.absoluteRowIndex,...e,trProps:w},e.children)}const g=c.createElement("tr",{key:e.absoluteRowIndex,...w},e.children);return e.render?e.render.call(void 0,g,{...e,...u}):g};exports.GridRow=G;

package/rows/GridRow.mjs

@@ -7,61 +7,61 @@
  */
 "use client";
 import * as n from "react";
-import { useUnstyled as x, uGrid as b, classNames as h, useDroppable as v } from "@progress/kendo-react-common";
-import { GRID_ROW_INDEX_ATTRIBUTE as y } from "../constants/index.mjs";
-import { GridContext as C } from "../GridClientWrapper.mjs";
-const O = (e) => {
-  var s;
-  const a = n.useContext(C), {
-    reorderRowDropTargetRef: u,
-    reorderRowDragTargetRef: t,
-    activeDragRowDataItemRef: R
-  } = a, { rowType: o, isAltRow: w, isInEdit: g, isSelected: D } = e, i = x(), m = i && i.uGrid ? i.uGrid : b, f = h(
-    m.tr({
-      selected: D,
+import { useUnstyled as h, uGrid as v, classNames as C, useDroppable as T } from "@progress/kendo-react-common";
+import { GRID_ROW_INDEX_ATTRIBUTE as k } from "../constants/index.mjs";
+import { GridContext as E } from "../GridClientWrapper.mjs";
+const N = (e) => {
+  var R;
+  const a = n.useContext(E), {
+    reorderRowDropTargetRef: g,
+    reorderRowDragTargetRef: r,
+    activeDragRowDataItemRef: m
+  } = a, { rowType: o, isAltRow: D, isInEdit: f, isSelected: I } = e, i = h(), x = i && i.uGrid ? i.uGrid : v, y = C(
+    x.tr({
+      selected: I,
       isHeader: o === "groupHeader",
       isFooter: o === "groupFooter",
       isMaster: o !== "groupHeader" && o !== "groupFooter",
-      isAltRow: w,
-      isInEdit: g
+      isAltRow: D,
+      isInEdit: f
     })
-  ), d = n.useRef(null);
-  v(d, {
-    onDragOver: (r) => {
-      if (e.isRowReorderable && R.current) {
-        const I = r.originalEvent.target;
-        u.current = I.closest(".k-table-row");
+  ), l = n.useRef(null);
+  T(l, {
+    onDragOver: (t) => {
+      if (e.isRowReorderable && m.current) {
+        const b = t.originalEvent.target;
+        g.current = b.closest(".k-table-row");
       }
     },
     onDrop: () => {
-      t.current && e.isRowReorderable && (t.current.style.userSelect = "");
+      r.current && e.isRowReorderable && (r.current.style.userSelect = "");
     }
   });
-  const l = {
-    onClick: (r) => a.rowClick(r, e.dataItem),
-    onDoubleClick: (r) => a.rowDblClick(r, e.dataItem)
-  }, c = /* @__PURE__ */ n.createElement(
-    "tr",
-    {
-      ref: d,
-      id: e.id,
-      ...l,
-      className: f,
-      style: {
-        height: e.rowHeight ? e.rowHeight + "px" : "",
-        visibility: e.isHidden ? "hidden" : "",
-        userSelect: (s = t == null ? void 0 : t.current) == null ? void 0 : s.style.userSelect
-      },
-      role: "row",
-      "aria-rowindex": e.ariaRowIndex,
-      "absolute-row-index": e.absoluteRowIndex,
-      key: e.absoluteRowIndex,
-      [y]: e.rowType === "data" ? e.dataIndex : void 0
+  const c = {
+    onClick: (t) => a.rowClick(t, e.dataItem),
+    onDoubleClick: (t) => a.rowDblClick(t, e.dataItem)
+  }, s = {
+    ref: l,
+    id: e.id,
+    ...c,
+    className: y,
+    style: {
+      height: e.rowHeight ? e.rowHeight + "px" : "",
+      visibility: e.isHidden ? "hidden" : "",
+      userSelect: (R = r == null ? void 0 : r.current) == null ? void 0 : R.style.userSelect
     },
-    e.children
-  );
-  return e.render ? e.render.call(void 0, c, { ...e, ...l }) : c;
+    role: "row",
+    "aria-rowindex": e.ariaRowIndex,
+    "absolute-row-index": e.absoluteRowIndex,
+    [k]: e.rowType === "data" ? e.dataIndex : void 0
+  }, u = e.rowType || "data", d = e.rows;
+  if (d && d[u]) {
+    const t = d[u];
+    return /* @__PURE__ */ n.createElement(t, { key: e.absoluteRowIndex, ...e, trProps: s }, e.children);
+  }
+  const w = /* @__PURE__ */ n.createElement("tr", { key: e.absoluteRowIndex, ...s }, e.children);
+  return e.render ? e.render.call(void 0, w, { ...e, ...c }) : w;
 };
 export {
-  O as GridRow
+  N as GridRow
 };