doc: resize grid layout table

src/routes/alt-layouts.svelte

@@ -16,6 +16,7 @@
 		addGroupBy,
 		addSelectedRows,
 		addGridLayout,
+		addResizedColumns,
 	} from '$lib/plugins';
 	import { mean, sum } from '$lib/utils/math';
 	import { getShuffled } from './_getShuffled';
@@ -55,6 +56,7 @@
 		page: addPagination({
 			initialPageSize: 20,
 		}),
+		resize: addResizedColumns(),
 		layout: addGridLayout(),
 	});
 
@@ -69,6 +71,11 @@
 					isSomeSubRowsSelected,
 				});
 			},
+			plugins: {
+				resize: {
+					disable: true,
+				},
+			},
 		}),
 		table.display({
 			id: 'expanded',
@@ -83,6 +90,11 @@
 					depth: row.depth,
 				});
 			},
+			plugins: {
+				resize: {
+					disable: true,
+				},
+			},
 		}),
 		table.column({
 			header: 'Summary',
@@ -162,6 +174,9 @@
 					id: 'status',
 					accessor: (item) => item.status,
 					plugins: {
+						resize: {
+							disable: true,
+						},
 						sort: {
 							disable: true,
 						},
@@ -251,6 +266,7 @@
 								{...attrs}
 								on:click={props.sort.toggle}
 								class:sorted={props.sort.order !== undefined}
+								use:props.resize
 							>
 								<div>
 									<Render of={cell.render()} />
@@ -272,6 +288,9 @@
 								{#if props.filter !== undefined}
 									<Render of={props.filter.render} />
 								{/if}
+								{#if !props.resize.disabled}
+									<div class="resizer" on:click|stopPropagation use:props.resize.drag />
+								{/if}
 							</div>
 						</Subscribe>
 					{/each}
@@ -351,6 +370,21 @@
 		border-right: 1px solid black;
 	}
 
+	.th {
+		position: relative;
+	}
+
+	.th .resizer {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: -4px;
+		width: 8px;
+		z-index: 1;
+		background: lightgray;
+		cursor: col-resize;
+	}
+
 	.sorted {
 		background: rgb(144, 191, 148);
 	}