Merge pull request #27 from bryanmylee/fix/addResizedColumns

Fix `addResizedColumns` interaction with `addGridLayout`

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-headless-table",
-	"version": "0.10.3",
+	"version": "0.10.4",
 	"scripts": {
 		"dev": "svelte-kit dev",
 		"build": "svelte-kit build",

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 };
+				},
 			},
 		};
 	};