From ba42a67755627aac3133f89c3684ca6122981e83 Mon Sep 17 00:00:00 2001
From: Bryan Lee <bryanmylee@gmail.com>
Date: Sat, 28 May 2022 12:27:49 +0800
Subject: [PATCH] fix: set width on all cells

---
 src/lib/plugins/addResizedColumns.ts | 39 ++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/lib/plugins/addResizedColumns.ts b/src/lib/plugins/addResizedColumns.ts
index 0784015..31bc900 100644
--- a/src/lib/plugins/addResizedColumns.ts
+++ b/src/lib/plugins/addResizedColumns.ts
@@ -32,6 +32,14 @@ export type ResizedColumnsAttributeSet = NewTableAttributeSet<{
 			'box-sizing': 'border-box';
 		};
 	};
+	'tbody.tr.td': {
+		style?: {
+			width: string;
+			'min-width': string;
+			'max-width': string;
+			'box-sizing': 'border-box';
+		};
+	};
 }>;
 
 const getDragXPos = (event: Event): number => {
@@ -180,7 +188,7 @@ export const addResizedColumns =
 							window.removeEventListener('touchend', dragEnd);
 						}
 					};
-					const action = (node: Element) => {
+					const $props = (node: Element) => {
 						nodeForId[cell.id] = node;
 						if (cell instanceof FlatHeaderCell) {
 							columnWidths.update(($columnWidths) => ({
@@ -194,7 +202,7 @@ export const addResizedColumns =
 							},
 						};
 					};
-					action.drag = (node: Element) => {
+					$props.drag = (node: Element) => {
 						node.addEventListener('mousedown', dragStart);
 						node.addEventListener('touchstart', dragStart);
 						return {
@@ -204,12 +212,15 @@ export const addResizedColumns =
 							},
 						};
 					};
-					action.disabled = isCellDisabled(cell, disabledResizeIds);
+					$props.disabled = isCellDisabled(cell, disabledResizeIds);
 					const props = derived([], () => {
-						return action;
+						return $props;
 					});
 					const attrs = derived(columnWidths, ($columnWidths) => {
-						const width = $columnWidths[cell.id];
+						const width =
+							cell instanceof GroupHeaderCell
+								? sum(cell.ids.map((id) => $columnWidths[id]))
+								: $columnWidths[cell.id];
 						if (width === undefined) {
 							return {};
 						}
@@ -225,6 +236,24 @@ export const addResizedColumns =
 					});
 					return { props, attrs };
 				},
+				'tbody.tr.td': (cell) => {
+					const attrs = derived(columnWidths, ($columnWidths) => {
+						const width = $columnWidths[cell.id];
+						if (width === undefined) {
+							return {};
+						}
+						const widthPx = `${width}px`;
+						return {
+							style: {
+								width: widthPx,
+								'min-width': widthPx,
+								'max-width': widthPx,
+								'box-sizing': 'border-box' as const,
+							},
+						};
+					});
+					return { attrs };
+				},
 			},
 		};
 	};