cx 26.9.1 → 26.9.2

package/dist/widgets.js

@@ -18271,7 +18271,7 @@ class Grid extends ContainerBase$1 {
 			},
 		});
 	}
-	renderHeader(context, instance, key, fixed, fixedColumns) {
+	renderHeader(context, instance, key, fixed, fixedColumns, repeated) {
 		let { data, widget, header } = instance;
 		let { CSS, baseClass } = widget;
 		let headerRows = [];
@@ -18427,13 +18427,15 @@ class Grid extends ContainerBase$1 {
 			}
 		});
 		if (headerRows.length == 0) return null;
-		return jsx(
-			"tbody",
+		//headers repeated for each group sit between the data rows, where a second thead
+		//would not be allowed
+		return VDOM$2.createElement(
+			repeated ? "tbody" : "thead",
 			{
+				key: "h" + key,
 				className: CSS.element(baseClass, "header"),
-				children: headerRows,
 			},
-			"h" + key,
+			headerRows,
 		);
 	}
 	onHeaderMouseMove(e, column, columnInstance, gridInstance, headerLine) {
@@ -18541,6 +18543,7 @@ class Grid extends ContainerBase$1 {
 					children: jsx("tr", {
 						children: jsx("td", {
 							colSpan: 1000,
+							role: "columnheader",
 							children: caption,
 						}),
 					}),
@@ -18605,6 +18608,7 @@ class Grid extends ContainerBase$1 {
 						{
 							className: cls,
 							colSpan: colSpan,
+							role: c.caption ? "columnheader" : undefined,
 							style: style,
 							children: v,
 						},
@@ -18771,9 +18775,9 @@ class Grid extends ContainerBase$1 {
 						),
 					);
 				if (g.showHeader) {
-					record.vdom.push(this.renderHeader(context, instance, record.key + "-header", false, false));
+					record.vdom.push(this.renderHeader(context, instance, record.key + "-header", false, false, true));
 					if (hasFixedColumns)
-						record.fixedVdom.push(this.renderHeader(context, instance, record.key + "-header", false, true));
+						record.fixedVdom.push(this.renderHeader(context, instance, record.key + "-header", false, true, true));
 				}
 			}
 			if (record.type == "group-footer") {
@@ -19107,6 +19111,29 @@ class GridComponent extends VDOM$2.Component {
 			);
 		};
 	}
+	groupLooseRows(items) {
+		let { CSS, baseClass } = this.props.instance.widget;
+		let result = [];
+		for (let i = 0; i < items.length; i++) {
+			if (!items[i]?.props?.useTrTag) {
+				result.push(items[i]);
+				continue;
+			}
+			let start = i;
+			while (i + 1 < items.length && items[i + 1]?.props?.useTrTag) i++;
+			result.push(
+				jsx(
+					"tbody",
+					{
+						className: CSS.element(baseClass, "row-group"),
+						children: items.slice(start, i + 1),
+					},
+					`rows-${items[start].key}`,
+				),
+			);
+		}
+		return result;
+	}
 	render() {
 		let { instance, data, fixedFooter, fixedColumnsFixedFooter } = this.props;
 		let { widget, hasFixedColumns } = instance;
@@ -19353,6 +19380,12 @@ class GridComponent extends VDOM$2.Component {
 				if (hasFixedColumns) fixedChildren.push(fixedColumnsFixedFooter);
 			}
 		}
+		//grids with merged cells render rows as tr elements, as rowspan cannot cross row group
+		//boundaries, so consecutive rows have to share a tbody instead of getting one each
+		if (instance.row.hasMergedCells) {
+			children = this.groupLooseRows(children);
+			if (hasFixedColumns) fixedChildren = this.groupLooseRows(fixedChildren);
+		}
 		let shouldRenderFixedFooter = widget.scrollable && (fixedFooter || fixedColumnsFixedFooter);
 		if (hasFixedColumns) {
 			fixedColumnsContent.push(
@@ -20250,16 +20283,18 @@ class GridComponent extends VDOM$2.Component {
 					if (this.state.focused && !this.state.cellEdit && wasCellEditing) FocusManager.focus(this.dom.el);
 					if (scrollIntoView) {
 						let record = this.getRecordAt(index);
-						let item = record && this.dom.table.querySelector(`tbody[data-record-key="${record.key}"]`);
+						//rows are tbody elements, except in grids with merged cells, where they are tr
+						let cellsOf = (rowEl) => (rowEl.tagName == "TR" ? rowEl : rowEl.firstChild).children;
+						let item = record && this.dom.table.querySelector(`[data-record-key="${record.key}"]`);
 						let hscroll = false;
 						if (item) {
 							if (widget.cellEditable)
 								if (this.state.cursorCellIndex >= this.props.instance.fixedColumnCount) {
 									hscroll = true;
-									item = item.firstChild.children[this.state.cursorCellIndex - this.props.instance.fixedColumnCount];
+									item = cellsOf(item)[this.state.cursorCellIndex - this.props.instance.fixedColumnCount];
 								} else {
-									let fixedItem = this.dom.fixedTable.querySelector(`tbody[data-record-key="${record.key}"]`);
-									let cell = fixedItem && fixedItem.firstChild.children[this.state.cursorCellIndex];
+									let fixedItem = this.dom.fixedTable.querySelector(`[data-record-key="${record.key}"]`);
+									let cell = fixedItem && cellsOf(fixedItem)[this.state.cursorCellIndex];
 									if (cell) scrollElementIntoView(cell, false, true, 10);
 								}
 							scrollElementIntoView(item, true, hscroll, widget.cellEditable ? 10 : 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.9.1",
+  "version": "26.9.2",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {

package/src/widgets/grid/Grid.tsx

@@ -1280,7 +1280,14 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
       );
    }
 
-   renderHeader(context: RenderingContext, instance: GridInstance, key: any, fixed: any, fixedColumns: any) {
+   renderHeader(
+      context: RenderingContext,
+      instance: GridInstance,
+      key: any,
+      fixed: any,
+      fixedColumns: any,
+      repeated?: boolean,
+   ) {
       let { data, widget, header } = instance;
 
       let { CSS, baseClass } = widget;
@@ -1458,10 +1465,12 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
 
       if (headerRows.length == 0) return null;
 
-      return (
-         <tbody key={"h" + key} className={CSS.element(baseClass, "header")}>
-            {headerRows}
-         </tbody>
+      //headers repeated for each group sit between the data rows, where a second thead
+      //would not be allowed
+      return VDOM.createElement(
+         repeated ? "tbody" : "thead",
+         { key: "h" + key, className: CSS.element(baseClass, "header") },
+         headerRows,
       );
    }
 
@@ -1582,7 +1591,9 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
                data-group-element={`group-caption-${level}`}
             >
                <tr>
-                  <td colSpan={1000}>{caption}</td>
+                  <td colSpan={1000} role="columnheader">
+                     {caption}
+                  </td>
                </tr>
             </tbody>
          );
@@ -1644,7 +1655,13 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
                if (pad !== false) cls += (cls ? " " : "") + CSS.state("pad");
 
                return (
-                  <td key={i} className={cls} colSpan={colSpan} style={style}>
+                  <td
+                     key={i}
+                     className={cls}
+                     colSpan={colSpan}
+                     role={c.caption ? "columnheader" : undefined}
+                     style={style}
+                  >
                      {v}
                   </td>
                );
@@ -1820,9 +1837,11 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
                );
 
             if (g.showHeader) {
-               record.vdom.push(this.renderHeader(context, instance, record.key + "-header", false, false));
+               record.vdom.push(this.renderHeader(context, instance, record.key + "-header", false, false, true));
                if (hasFixedColumns)
-                  record.fixedVdom.push(this.renderHeader(context, instance, record.key + "-header", false, true));
+                  record.fixedVdom.push(
+                     this.renderHeader(context, instance, record.key + "-header", false, true, true),
+                  );
             }
          }
 
@@ -2242,6 +2261,25 @@ class GridComponent extends VDOM.Component<GridComponentProps, GridComponentStat
       };
    }
 
+   groupLooseRows(items: any[]): any[] {
+      let { CSS, baseClass } = this.props.instance.widget;
+      let result: any[] = [];
+      for (let i = 0; i < items.length; i++) {
+         if (!items[i]?.props?.useTrTag) {
+            result.push(items[i]);
+            continue;
+         }
+         let start = i;
+         while (i + 1 < items.length && items[i + 1]?.props?.useTrTag) i++;
+         result.push(
+            <tbody key={`rows-${items[start].key}`} className={CSS.element(baseClass, "row-group")}>
+               {items.slice(start, i + 1)}
+            </tbody>,
+         );
+      }
+      return result;
+   }
+
    render() {
       let { instance, data, fixedFooter, fixedColumnsFixedFooter } = this.props;
       let { widget, hasFixedColumns } = instance;
@@ -2495,6 +2533,13 @@ class GridComponent extends VDOM.Component<GridComponentProps, GridComponentStat
          }
       }
 
+      //grids with merged cells render rows as tr elements, as rowspan cannot cross row group
+      //boundaries, so consecutive rows have to share a tbody instead of getting one each
+      if (instance.row.hasMergedCells) {
+         children = this.groupLooseRows(children);
+         if (hasFixedColumns) fixedChildren = this.groupLooseRows(fixedChildren);
+      }
+
       let shouldRenderFixedFooter = widget.scrollable && (fixedFooter || fixedColumnsFixedFooter);
 
       if (hasFixedColumns) {
@@ -3526,20 +3571,23 @@ class GridComponent extends VDOM.Component<GridComponentProps, GridComponentStat
                if (scrollIntoView) {
                   let record = this.getRecordAt(index)!;
 
-                  let item = record && this.dom.table!.querySelector(`tbody[data-record-key="${record.key}"]`);
+                  //rows are tbody elements, except in grids with merged cells, where they are tr
+                  let cellsOf = (rowEl: Element) =>
+                     (rowEl.tagName == "TR" ? rowEl : (rowEl.firstChild as HTMLElement)).children;
+
+                  let item = record && this.dom.table!.querySelector(`[data-record-key="${record.key}"]`);
 
                   let hscroll = false;
                   if (item) {
                      if (widget.cellEditable)
                         if (this.state.cursorCellIndex >= this.props.instance.fixedColumnCount) {
                            hscroll = true;
-                           item = (item.firstChild as HTMLElement)!.children[
+                           item = cellsOf(item)[
                               this.state.cursorCellIndex - this.props.instance.fixedColumnCount
                            ] as Element;
                         } else {
-                           let fixedItem = this.dom.fixedTable!.querySelector(`tbody[data-record-key="${record.key}"]`);
-                           let cell =
-                              fixedItem && (fixedItem.firstChild as HTMLElement)!.children[this.state.cursorCellIndex];
+                           let fixedItem = this.dom.fixedTable!.querySelector(`[data-record-key="${record.key}"]`);
+                           let cell = fixedItem && cellsOf(fixedItem)[this.state.cursorCellIndex];
                            if (cell) scrollElementIntoView(cell, false, true, 10);
                         }