@svelte-lean/table 0.16.1 → 0.16.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @svelte-lean/table
 
+## 0.16.3
+
+### Patch Changes
+
+- @svelte-lean/core@0.16.3
+
+## 0.16.2
+
+### Patch Changes
+
+- 6c7e253: `Column.wrap`: in grid layout a column of text that may break onto more lines (a description, a note) no longer pushes a table that fits its card into a sideways scroll. The column stands at its measured content while there is room and narrows down to its `minWidth` (160 by default) before the rows scroll, its cells taking `white-space: normal` (`td[data-wrap]`); it is never clipped. Without `wrap` a column is still never narrower than its one-line content, and a screen too narrow for every column's floor still scrolls sideways.
+- @svelte-lean/core@0.16.2
+
 ## 0.16.1
 
 ### Patch Changes

package/dist/style.css

@@ -1165,6 +1165,23 @@
 		text-overflow: ellipsis;
 		display: block;
 	}
+	/* A `wrap` column's text breaks onto more lines as its track narrows (`Column.wrap`). */
+	:where(
+		.slean-table[data-layout='grid'] > .slean-table-scroll > table > tbody > tr > td[data-wrap]
+	),
+	:where(
+		.slean-table[data-layout='grid']
+			> .slean-table-scroll
+			> table
+			> tbody
+			> tr
+			> td[data-wrap]
+			> .slean-table-cell
+	) {
+		white-space: normal;
+		overflow-wrap: break-word;
+		min-width: 0;
+	}
 	:where(.slean-table-scroll > table[data-measuring]) {
 		display: block;
 		width: max-content;

package/dist/table/data-table.svelte

@@ -515,6 +515,7 @@
 						pin: pin?.pin,
 						edge: pin?.edge,
 						clip: clipped.has(col.id) || undefined,
+						wrap: col.wrap || undefined,
 						className: typeof col.class === 'string' ? col.class : undefined,
 						gridClass: `slean-table-cell${typeof col.class === 'string' ? ` ${col.class}` : ''}`,
 						style: pin?.style
@@ -588,6 +589,11 @@
 	 */
 	const GRID_MAX = 480;
 	const GRID_MIN = 48;
+	/**
+	 * The narrowest a `wrap` column is squeezed to before the rows scroll sideways (unless its
+	 * `minWidth` says otherwise): room for a few words a line.
+	 */
+	const WRAP_MIN = 160;
 	const MEASURE_ROWS = 30;
 	/** The most placeholder rows a loading page draws when `skeletonRows` is not given. */
 	const MAX_PLACEHOLDERS = 25;
@@ -605,7 +611,9 @@
 			grid
 				? cols
 						.filter(
-							(col) => (measured[col.id] ?? 0) > Math.max(col.maxWidth ?? GRID_MAX, col.width ?? 0)
+							(col) =>
+								!col.wrap &&
+								(measured[col.id] ?? 0) > Math.max(col.maxWidth ?? GRID_MAX, col.width ?? 0)
 						)
 						.map((col) => col.id)
 				: []
@@ -890,9 +898,12 @@
 	 * The grid track list, and the width below which the rows scroll sideways. A column is never
 	 * narrower than its content (its measured width, a declared `width` or `minWidth`); spare width
 	 * is shared in proportion to the content (`fr`). Header labels count with their longest word
-	 * (they wrap), so a long label does not widen a column of short values. When the content does
-	 * not fit, the rows scroll sideways. Pinned and resized columns keep their exact width, which
-	 * the sticky offsets are computed from.
+	 * (they wrap), so a long label does not widen a column of short values. A `wrap` column is the
+	 * exception: it stands at its content while there is room, and gives way down to its
+	 * `minWidth` (default `WRAP_MIN`), its text breaking onto more lines, before the rows scroll —
+	 * so one long description does not push a table that fits its card into a sideways scroll.
+	 * When the content does not fit even so (a phone), the rows scroll sideways. Pinned and
+	 * resized columns keep their exact width, which the sticky offsets are computed from.
 	 */
 	const tracksNext = $derived.by(() => {
 		if (!grid) return null;
@@ -906,7 +917,7 @@
 				min += width;
 				continue;
 			}
-			const floor = width;
+			const floor = col.wrap ? Math.min(width, col.minWidth ?? WRAP_MIN) : width;
 			parts.push(`minmax(${floor}px, ${width}fr)`);
 			min += floor;
 		}
@@ -1498,6 +1509,7 @@
 				data-pin={meta[col.id]!.pin}
 				data-pin-edge={meta[col.id]!.edge}
 				data-clip={meta[col.id]!.clip}
+				data-wrap={meta[col.id]!.wrap}
 				class={meta[col.id]!.gridClass}
 				style={meta[col.id]!.style}>{@render (col.cell ?? plainCell)(contexts[col.id]!)}</td
 			>{/each}</tr
@@ -1630,6 +1642,7 @@
 								data-cell
 								role={grid ? 'cell' : undefined}
 								data-clip={clipped.has(col.id) || undefined}
+								data-wrap={col.wrap || undefined}
 								data-column={col.id}
 								data-align={col.align !== 'start' ? col.align : undefined}
 								data-pin={pin?.pin}
@@ -1713,6 +1726,7 @@
 							data-cell
 							role={grid ? 'cell' : undefined}
 							data-clip={meta[col.id]!.clip}
+							data-wrap={meta[col.id]!.wrap}
 							data-column={col.id}
 							data-align={meta[col.id]!.align}
 							data-pin={meta[col.id]!.pin}
@@ -1730,6 +1744,7 @@
 						data-pin={meta[col.id]!.pin}
 						data-pin-edge={meta[col.id]!.edge}
 						data-clip={meta[col.id]!.clip}
+						data-wrap={meta[col.id]!.wrap}
 						class={meta[col.id]!.gridClass}
 						style={meta[col.id]!.style}>{@render (col.cell ?? plainCell)(contexts[col.id]!)}</td
 					>{/each}{:else}{#each cols as col (col.id)}<td

package/dist/types.d.ts

@@ -61,6 +61,13 @@ export interface Column<T> {
     width?: number;
     minWidth?: number;
     maxWidth?: number;
+    /**
+     * Text that may break onto more lines (a description, a note). In grid layout the column
+     * stands at its content while there is room and narrows down to `minWidth` (default 160)
+     * before the rows scroll sideways, its text wrapping; it is never clipped. Without it a
+     * column is never narrower than its one-line content.
+     */
+    wrap?: boolean;
     align?: 'start' | 'center' | 'end';
     sortable?: boolean;
     /** The first activation sorts descending: descending → ascending → none. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-lean/table",
-  "version": "0.16.1",
+  "version": "0.16.3",
   "description": "A Svelte-native table and data-grid engine that ships only the features you use.",
   "license": "MIT",
   "author": "Ömer Say",
@@ -91,7 +91,7 @@
     "headless"
   ],
   "dependencies": {
-    "@svelte-lean/core": "^0.16.1",
+    "@svelte-lean/core": "^0.16.3",
     "esm-env": "^1.2.2"
   }
 }