From 5af397a98ae5a1795f66197f54eafc23ef50c3ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Zimbr=C3=B3n?= <pptavozl@gmail.com>
Date: Fri, 16 Feb 2024 14:29:17 -0600
Subject: [PATCH 1/5] feat(DataGrid): :sparkles: Add resizable columns

Now you can set resizable columns or all columns resizable prop
---
 .../src/lib/actions/dragAndDrop.ts            | 19 ++++-
 .../src/lib/actions/resizeColumn.ts           | 58 ++++++++++++++
 .../src/lib/components/Datagrid.svelte        | 77 +++++++++++++++++--
 .../src/lib/components/TextboxCell.svelte     |  2 +-
 packages/svelte-datagrid/src/lib/types.ts     |  1 +
 5 files changed, 145 insertions(+), 12 deletions(-)
 create mode 100644 packages/svelte-datagrid/src/lib/actions/resizeColumn.ts

diff --git a/packages/svelte-datagrid/src/lib/actions/dragAndDrop.ts b/packages/svelte-datagrid/src/lib/actions/dragAndDrop.ts
index 0ac828a..039938b 100644
--- a/packages/svelte-datagrid/src/lib/actions/dragAndDrop.ts
+++ b/packages/svelte-datagrid/src/lib/actions/dragAndDrop.ts
@@ -12,9 +12,23 @@ export const dragAndDrop: Action<HTMLElement, ActionParams> = (
 	{ draggable, dragEnd, dragStart }: ActionParams = {}
 ) => {
 	if (draggable) {
-		node.draggable = true;
-
 		node.addEventListener('dragstart', (e) => {
+			const div = e.target as HTMLElement;
+			const isRezisable = div.classList.contains('resizable');
+
+			if (isRezisable) {
+				const resizableWidth = parseInt(
+					window.getComputedStyle(div, '::after').width.replace('px', '')
+				);
+
+				const clickPosition = e.clientX - div.getBoundingClientRect().left;
+
+				if (clickPosition >= div.offsetWidth - resizableWidth - 2) {
+					e.preventDefault();
+					return;
+				}
+			}
+
 			dragStart && dragStart(e);
 			node.classList.add('dragging');
 		});
@@ -27,7 +41,6 @@ export const dragAndDrop: Action<HTMLElement, ActionParams> = (
 
 	return {
 		destroy() {
-			node.draggable = false;
 			node.removeEventListener('dragstart', () => {});
 			node.removeEventListener('dragend', () => {});
 		}
diff --git a/packages/svelte-datagrid/src/lib/actions/resizeColumn.ts b/packages/svelte-datagrid/src/lib/actions/resizeColumn.ts
new file mode 100644
index 0000000..d99e3b9
--- /dev/null
+++ b/packages/svelte-datagrid/src/lib/actions/resizeColumn.ts
@@ -0,0 +1,58 @@
+import type { Action } from 'svelte/action';
+
+interface ActionParams {
+	resizable?: boolean;
+	startResize?: () => void;
+	endResize?: () => void;
+	onResize?: (data: number) => void;
+}
+
+export const reziseColumn: Action<HTMLElement, ActionParams> = (
+	node,
+	{ resizable, onResize, startResize, endResize }: ActionParams = {}
+) => {
+	if (!resizable) return;
+
+	let lastX = 0;
+
+	const mouseMoveEvent = (e: MouseEvent) => {
+		if (!onResize) return;
+		if (e.clientX === lastX) return;
+		lastX = e.clientX;
+		onResize(lastX - node.getBoundingClientRect().left);
+	};
+
+	const mouseDownEvent = (e: MouseEvent) => {
+		if (e.button !== 0) {
+			return;
+		}
+		lastX = e.clientX;
+
+		// get node width and style ::after
+		const nodeAfterWidth = parseInt(
+			window.getComputedStyle(node, ':after').width.replace('px', '')
+		);
+		const clickPosition = e.clientX - node.getBoundingClientRect().left;
+
+		if (clickPosition < node.offsetWidth - nodeAfterWidth - 2) return;
+
+		startResize && startResize();
+
+		document.addEventListener('mousemove', mouseMoveEvent);
+		document.addEventListener('mouseup', mouseUpEvent);
+	};
+
+	const mouseUpEvent = () => {
+		endResize && endResize();
+		document.removeEventListener('mousemove', mouseMoveEvent);
+	};
+
+	node.addEventListener('mousedown', mouseDownEvent);
+
+	return {
+		destroy() {
+			document.removeEventListener('mousedown', mouseDownEvent);
+			node.removeEventListener('mouseup', () => mouseUpEvent);
+		}
+	};
+};
diff --git a/packages/svelte-datagrid/src/lib/components/Datagrid.svelte b/packages/svelte-datagrid/src/lib/components/Datagrid.svelte
index ce58bec..fec02cc 100644
--- a/packages/svelte-datagrid/src/lib/components/Datagrid.svelte
+++ b/packages/svelte-datagrid/src/lib/components/Datagrid.svelte
@@ -1,4 +1,6 @@
 <script lang="ts" generics="T">
+	import { reziseColumn } from '$lib/actions/resizeColumn.js';
+
 	import { MIN_ROW_HEIGHT } from '$lib/configurations.js';
 
 	import type { GridProps } from '$lib/DataGridProps.js';
@@ -14,6 +16,7 @@
 		calculateXPositions,
 		getRowTop,
 		getVisibleRowsIndexes,
+		MIN_COLUMN_WIDTH,
 		updateColumnWidths
 	} from '$lib/functions/calculateFunctions.js';
 
@@ -55,6 +58,11 @@
 		 */
 		extraRows?: number;
 
+		/**
+		 * Set all columns draggable by default, ignoring the `draggable` property of each column
+		 */
+		allColumnsResizable?: boolean;
+
 		/**
 		 * Set all columns draggable by default, ignoring the `draggable` property of each column
 		 */
@@ -91,12 +99,19 @@
 	export let extraRows = 0;
 	export let rowsPerPage = calculateDefaultRowsPerPage(rows.length);
 	export let allColumnsDraggable = false;
+	export let allColumnsResizable = false;
 	export let animationParams: FlipParams = {
 		duration: 150,
 		delay: 0,
 		easing: quadIn
 	};
 
+	const NO_TRANSITION_EFFECT = {
+		duration: 0,
+		delay: 0,
+		easing: undefined
+	};
+
 	if (!columns || columns.length < 1) {
 		throw new Error('Columns are required');
 	}
@@ -105,11 +120,11 @@
 		throw new Error('Rows are required');
 	}
 
-	export const scrollToRow = (rowIndex: number) => {
+	export const scrollToRow = (rowIndex: number, behavior: ScrollBehavior = 'smooth') => {
 		if (!gridBody) return;
 		gridBody.scrollTo({
 			top: rowIndex * rowHeight,
-			behavior: 'smooth'
+			behavior
 		});
 	};
 
@@ -128,6 +143,7 @@
 	let isResizing = false;
 	let isDragging = false;
 	let columnDragging = -1;
+	let columnResizing = -1;
 	let yScrollPercent = 0;
 	let xScrollPercent = 0;
 
@@ -238,6 +254,12 @@
 	class:resizing={isResizing || isDragging}
 	class:isDragging
 >
+	{#if columnResizing != -1}
+		<div
+			class="resizingbar"
+			style:left="{columnWidths[columnResizing] + xPositions[columnResizing]}px"
+		></div>
+	{/if}
 	<div class="svelte-grid-head" role="rowgroup">
 		<div role="row" class="header-row" style:left="{scrollLeft * -1}px">
 			{#each columns as column, i (i)}
@@ -249,9 +271,27 @@
 					role="columnheader"
 					style:width="{columnWidths[i]}px"
 					style:left="{xPositions[i]}px"
-					class:draggable={allColumnsDraggable || column.draggable}
-					class:dragging={false}
-					animate:flip={animationParams}
+					draggable={!isResizing && (allColumnsDraggable || column.draggable)}
+					class:draggable={!isResizing && (allColumnsDraggable || column.draggable)}
+					class:resizable={!isResizing && (allColumnsResizable || column.resizable)}
+					class:dragging={isDragging && columnDragging == i}
+					animate:flip={isResizing ? NO_TRANSITION_EFFECT : animationParams}
+					use:reziseColumn={{
+						resizable: allColumnsResizable || column.resizable,
+						startResize() {
+							columnResizing = i;
+							isResizing = true;
+						},
+						endResize() {
+							columnResizing = -1;
+							isResizing = false;
+						},
+						onResize(data) {
+							if (data < MIN_COLUMN_WIDTH) return;
+
+							columnWidths[i] = data;
+						}
+					}}
 					use:dragAndDrop={{
 						draggable: allColumnsDraggable || column.draggable,
 						dragStart: () => {
@@ -319,7 +359,7 @@
 						style="width:{columnWidths[j]}px"
 						style:left="{xPositions[j]}px"
 						class:draggableColumnCell={allColumnsDraggable || column.draggable}
-						animate:flip={animationParams}
+						animate:flip={isResizing ? NO_TRANSITION_EFFECT : animationParams}
 					>
 						<div class="cell-container" class:cell-default={!column.cellComponent}>
 							{#if column.cellComponent}
@@ -343,6 +383,15 @@
 </div>
 
 <style lang="postcss">
+	.resizingbar {
+		position: absolute;
+		top: 0;
+		width: 2px;
+		height: 100%;
+		background-color: var(--header-border-color, #666);
+		transform: translate(-50%, 0);
+		z-index: 3;
+	}
 	.resizing * {
 		user-select: none;
 	}
@@ -369,7 +418,18 @@
 		background-color: var(--no-draggable-fg, rgba(66, 66, 66, 0.5));
 	}
 
-	.draggable :hover {
+	.columnheader.resizable:hover::after {
+		content: '';
+		cursor: ew-resize;
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 2px;
+		height: 100%;
+		z-index: 3;
+	}
+
+	.columnheader.draggable:not(.dragging):hover {
 		content: '';
 		position: absolute;
 		background-color: var(--draggable-bg, rgba(33, 248, 255, 0.5));
@@ -377,9 +437,10 @@
 		right: 0;
 		width: 100%;
 		height: 100%;
+		cursor: move;
 	}
 
-	.columnheader.dragging {
+	.columnheader.dragging:hover {
 		border: var(--border, 1px solid #666);
 		background-color: var(--dragging-bg, rgba(33, 255, 151, 0.5));
 	}
diff --git a/packages/svelte-datagrid/src/lib/components/TextboxCell.svelte b/packages/svelte-datagrid/src/lib/components/TextboxCell.svelte
index df4c0d2..a027055 100644
--- a/packages/svelte-datagrid/src/lib/components/TextboxCell.svelte
+++ b/packages/svelte-datagrid/src/lib/components/TextboxCell.svelte
@@ -93,7 +93,7 @@
 		width: 100%;
 		height: 100%;
 		background: var(--textbox-cell-bg, var(--cell-bg, white));
-		z-index: 3;
+		z-index: 2;
 	}
 	input {
 		height: 100%;
diff --git a/packages/svelte-datagrid/src/lib/types.ts b/packages/svelte-datagrid/src/lib/types.ts
index 2d7c3ca..96b61d8 100644
--- a/packages/svelte-datagrid/src/lib/types.ts
+++ b/packages/svelte-datagrid/src/lib/types.ts
@@ -10,6 +10,7 @@ export type GridColumn<T> = {
 	cellComponent?: CustomCellComponent<T>;
 	options?: GridColumnOption[];
 	draggable?: boolean;
+	resizable?: boolean;
 };
 
 export type GridColumnOption = {

From 8512ab530f05098bce5d621c9862b4df4bd494d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Zimbr=C3=B3n?= <pptavozl@gmail.com>
Date: Fri, 16 Feb 2024 14:30:01 -0600
Subject: [PATCH 2/5] docs(README): :memo: Add Resizable docs

---
 README.md | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 9a3eb33..f40a33f 100644
--- a/README.md
+++ b/README.md
@@ -6,11 +6,11 @@ Svelte DataGrid is a high-performance, feature-rich grid component for Svelte. I
 
 It's based on the excellent (but deprecated) [svelte-data-grid](https://github.com/bsssshhhhhhh/svelte-data-grid).
 
-## Demo website
+## 👀 Demo website
 
 [![Demo website](./assets/demo-screenshot.webp)](https://gzimbron.github.io/svelte-datagrid)
 
-## Features
+## 🚀 Features
 
 - High scrolling performance
 - ARIA attributes set on elements
@@ -18,14 +18,14 @@ It's based on the excellent (but deprecated) [svelte-data-grid](https://github.c
 - Column headers remain fixed at the top of the grid
 - Custom components can be specified to control how individual table cells or column headers are displayed
 
-## TODO
+## 📋 TODO
 
 - [x] Demo website
 - [x] Re-ordering columns
-- [ ] Resizing columns
-- [ ] Feel free to suggest more features or contribute to the project
+- [x] Resizing columns
+- ⭐️ Feel free to suggest more features or contribute to the project
 
-## Usage:
+## ℹ️ Usage:
 
 If using within Sapper:
 
@@ -85,7 +85,7 @@ Datagrid requires 2 properties to be passed in order to display data: `rows` and
 ];
 ```
 
-## Editing Data
+## 📝 Editing Data
 
 You can use this 3 componets as cellComponent to edit data:
 
@@ -156,7 +156,7 @@ CheckboxCell will set the checked state of the checkbox depending on the boolean
 }
 ```
 
-## Custom Cell Components
+## ✨ Custom Cell Components
 
 To create a custom cell component, create a new Svelte component following the example below.
 
@@ -220,7 +220,7 @@ import MyCustomCell from './MyCustomCell.svelte';
 ]
 ```
 
-## Custom Header Components
+## ✨ Custom Header Components
 
 Header components can also be specified in `columns` entries as the `headerComponent` property. Header components are only passed `column`, the column object from `columns`.
 
@@ -240,11 +240,11 @@ Header components can also be specified in `columns` entries as the `headerCompo
 </style>
 ```
 
-## Properties:
+## 🛠️ Options and Functions:
 
 Datagrid provides a few options for controlling the grid and its interactions:
 
-### Configurations
+### ⚙️ Properties
 
 - `rowHeight` - The row height in pixels _(Default: 24)_
 - `headerRowHeight` - The row height in pixels _(Default: 24)_
@@ -252,7 +252,7 @@ Datagrid provides a few options for controlling the grid and its interactions:
 - `extraRows` - Add extra rows to the virtual list to improve scrolling performance _(Default: 0)_
 - `allColumnsDraggable` - Set all columns draggable by default, ignoring the `draggable` property of each column _(Default: false)_
 
-### Functions exported
+### 💫 Functions exported
 
 Yoy can bind to the following functions to control the grid:
 
@@ -274,10 +274,10 @@ const getGridState: () => {
 - `scrollToRow` - A function that scrolls the grid to a specific row index.
 
 ```typescript
-const scrollToRow: (rowIndex: number) => void;
+const scrollToRow: (rowIndex: number, behavior: ScrollBehavior = 'smooth') => void;
 ```
 
-### Styling
+### 💄 Styling
 
 - `--border` Css: Custom style for grid borders _(Default: 1px)_
 - `--header-border` Custom width for header row border bottom _(Default: 2px)_

From 4db5914ad9846946f369de3afee328264a68d0ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Zimbr=C3=B3n?= <pptavozl@gmail.com>
Date: Fri, 16 Feb 2024 14:30:56 -0600
Subject: [PATCH 3/5] refactor(Website): :rocket: Add resizable example

---
 apps/website/src/routes/+page.svelte | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/website/src/routes/+page.svelte b/apps/website/src/routes/+page.svelte
index fc22c0b..a3e2861 100644
--- a/apps/website/src/routes/+page.svelte
+++ b/apps/website/src/routes/+page.svelte
@@ -35,7 +35,8 @@
 			dataKey: 'firstName',
 			width: 200,
 			cellComponent: TextboxCell,
-			draggable: true
+			draggable: true,
+			resizable: true
 		},
 		{
 			label: 'Last Name',
@@ -130,6 +131,7 @@
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	let getGridState: () => any | undefined;
 	let scrollToRow: (index: number) => void | undefined;
+	let allColumnsResizable = true;
 </script>
 
 <Progressbar {progress}></Progressbar>
@@ -145,6 +147,7 @@
 		on:valueUpdated={onValueUpdated}
 		on:scroll={gridScrolled}
 		on:columnsSwapped={({ detail }) => console.log(detail)}
+		{allColumnsResizable}
 	/>
 </section>
 
@@ -175,6 +178,10 @@
 	</div>
 
 	<div class="flexy">
+		<label for="allColumnsResizable">
+			<p>Resizable Columns</p>
+			<input type="checkbox" id="allColumnsResizable" bind:checked={allColumnsResizable} />
+		</label>
 		<label for="rowheight">
 			<p>Row Height: {rowHeight}</p>
 			<input type="range" min={20} max={50} step={1} id="rowheight" bind:value={rowHeight} />
@@ -198,4 +205,8 @@
 	.flexy {
 		@apply flex flex-wrap gap-4 justify-center;
 	}
+
+	.flexy label {
+		@apply flex flex-col items-center gap-2;
+	}
 </style>

From fb7fccd48a8269621cdf77cda54ea0560843fd96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Zimbr=C3=B3n?= <pptavozl@gmail.com>
Date: Fri, 16 Feb 2024 14:31:57 -0600
Subject: [PATCH 4/5] changesets

---
 .changeset/kind-trees-walk.md        | 5 +++++
 .changeset/metal-seahorses-tickle.md | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/kind-trees-walk.md
 create mode 100644 .changeset/metal-seahorses-tickle.md

diff --git a/.changeset/kind-trees-walk.md b/.changeset/kind-trees-walk.md
new file mode 100644
index 0000000..9eecc90
--- /dev/null
+++ b/.changeset/kind-trees-walk.md
@@ -0,0 +1,5 @@
+---
+"website": patch
+---
+
+Add resizable columns example
diff --git a/.changeset/metal-seahorses-tickle.md b/.changeset/metal-seahorses-tickle.md
new file mode 100644
index 0000000..ede745a
--- /dev/null
+++ b/.changeset/metal-seahorses-tickle.md
@@ -0,0 +1,5 @@
+---
+"@gzim/svelte-datagrid": minor
+---
+
+Add resizable columns feature

From d974e502f8f01581448cefa888c5f504af543910 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Zimbr=C3=B3n?= <pptavozl@gmail.com>
Date: Fri, 16 Feb 2024 14:37:43 -0600
Subject: [PATCH 5/5] fix lint

---
 packages/svelte-datagrid/src/lib/components/Datagrid.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/svelte-datagrid/src/lib/components/Datagrid.svelte b/packages/svelte-datagrid/src/lib/components/Datagrid.svelte
index fec02cc..592526e 100644
--- a/packages/svelte-datagrid/src/lib/components/Datagrid.svelte
+++ b/packages/svelte-datagrid/src/lib/components/Datagrid.svelte
@@ -120,6 +120,7 @@
 		throw new Error('Rows are required');
 	}
 
+	// eslint-disable-next-line no-undef
 	export const scrollToRow = (rowIndex: number, behavior: ScrollBehavior = 'smooth') => {
 		if (!gridBody) return;
 		gridBody.scrollTo({