FLOW-957 f-table grid template creation bug fixed for vue 3 (#184)

* FLOW-957 f-table grid template creation bug fixed for vue 3 * FLOW-957 f-table grid template creation bug fixed for vue 3
ollionorg · Nov 1, 2023 · 3c9ef64 · 3c9ef64
1 parent 0346277
commit 3c9ef64
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/packages/flow-table/CHANGELOG.md b/packages/flow-table/CHANGELOG.md
@@ -1,8 +1,13 @@
 <h4 className="margin-btm-8">Release Notes</h4>
 
-
 # Change Log
 
+## [2.0.5] - 2023-11-01
+
+### Bug Fixes
+
+- Vue : `f-table` gridTemplate creation fixed
+
 ## [2.0.4] - 2023-10-16
 
 ### Improvements

diff --git a/packages/flow-table/package.json b/packages/flow-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-table",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Table component for flow library",
   "module": "dist/flow-table.es.js",
   "main": "dist/flow-table.cjs.js",

diff --git a/packages/flow-table/src/components/f-table/f-table.ts b/packages/flow-table/src/components/f-table/f-table.ts
@@ -55,6 +55,7 @@ export class FTable extends FRoot {
 				@selected-column=${this.toggleColumnSelected}
 				@highlight-column=${this.toggleColumnHighlight}
 				@selected-row=${this.handleHeaderRowSelection}
+				@slotchange=${this.updateGridTemplateColumns}
 			></slot>
 			<slot @slotchange=${this.propogateProps} @selected-row=${this.handleRowSelection}></slot>`;
 	}
@@ -90,19 +91,25 @@ export class FTable extends FRoot {
 
 	updateGridTemplateColumns() {
 		const firstRow = this.querySelector(":scope > f-trow");
-		const firstRowCells = firstRow?.querySelectorAll<FTcell>(":scope > f-tcell");
-		const noOfCells = firstRowCells?.length ?? 0;
-		let gridColumnTemplate = ``;
-		for (let i = 0; i < noOfCells; i++) {
-			const cellElement = firstRowCells?.item(i);
-			if (cellElement?.width) {
-				gridColumnTemplate += `${cellElement?.width} `;
-			} else {
-				gridColumnTemplate += `auto `;
+		if (firstRow !== null) {
+			/**
+			 * following query is not working vue app so replaced with firstRow.children
+			 * firstRow?.querySelectorAll<FTcell>(":scope > f-tcell");
+			 * */
+			const firstRowCells = firstRow.children;
+			const noOfCells = firstRowCells.length;
+			let gridColumnTemplate = ``;
+			for (let i = 0; i < noOfCells; i++) {
+				const cellElement = firstRowCells.item(i) as FTcell;
+				if (cellElement.width) {
+					gridColumnTemplate += `${cellElement?.width} `;
+				} else {
+					gridColumnTemplate += `auto `;
+				}
 			}
-		}
 
-		this.style.gridTemplateColumns = gridColumnTemplate;
+			this.style.gridTemplateColumns = gridColumnTemplate;
+		}
 	}
 
 	/**