@shotleybuilder/svelte-table-kit 0.1.0 → 0.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 **A comprehensive, AI-configurable data table component for Svelte and SvelteKit, built on TanStack Table v8.**
 
-[![npm version](https://img.shields.io/npm/v/@sertantai/svelte-table-kit.svg)](https://www.npmjs.com/package/@sertantai/svelte-table-kit)
+[![npm version](https://img.shields.io/npm/v/@shotleybuilder/svelte-table-kit.svg)](https://www.npmjs.com/package/@shotleybuilder/svelte-table-kit)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 Svelte Table Kit brings Airtable-like functionality to your Svelte applications with a headless, fully customizable table component. Perfect for dashboards, data grids, and complex data visualization needs.
@@ -13,13 +13,16 @@ Svelte Table Kit brings Airtable-like functionality to your Svelte applications
 
 **Core Table Features:**
 - 🎯 Column visibility picker with show/hide controls
-- 📏 Column resizing with drag handles
+- 📏 Column resizing with drag handles (62px-1000px range)
 - 🔄 Column reordering via native HTML5 drag & drop
+- 📐 **Row height control** - 4 sizes: short, medium, tall, extra tall
+- ↔️ **Column spacing control** - 3 sizes: narrow, normal, wide
 - 🔍 **Advanced filtering** - 12 operators with AND/OR logic
 - 📊 **Multi-level grouping** - Up to 3 nested levels (like Airtable)
 - ⬆️ Multi-column sorting with visual indicators
 - 📄 Pagination with customizable page sizes
 - 💾 LocalStorage persistence for all user preferences
+- ✂️ Text truncation with ellipsis for long content
 
 **Advanced Filtering:**
 - 12 filter operators: equals, contains, starts with, greater than, etc.
@@ -56,13 +59,13 @@ Svelte Table Kit brings Airtable-like functionality to your Svelte applications
 ## 📦 Installation
 
 ```bash
-npm install @sertantai/svelte-table-kit
+npm install @shotleybuilder/svelte-table-kit
 ```
 
 Or using pnpm:
 
 ```bash
-pnpm add @sertantai/svelte-table-kit
+pnpm add @shotleybuilder/svelte-table-kit
 ```
 
 ---
@@ -71,7 +74,7 @@ pnpm add @sertantai/svelte-table-kit
 
 ```svelte
 <script>
-  import { TableKit } from '@sertantai/svelte-table-kit';
+  import { TableKit } from '@shotleybuilder/svelte-table-kit';
 
   const data = [
     { id: 1, name: 'Alice', role: 'Developer', age: 28 },
@@ -108,7 +111,7 @@ Use AI-generated or predefined configurations:
 
 ```svelte
 <script>
-  import { TableKit, presets } from '@sertantai/svelte-table-kit';
+  import { TableKit, presets } from '@shotleybuilder/svelte-table-kit';
 
   const config = presets.dashboard; // or generate with AI
 </script>
@@ -203,6 +206,9 @@ TableKit is headless by default. You can:
 | `storageKey` | `string` | `undefined` | LocalStorage key for persistence |
 | `persistState` | `boolean` | `true` | Enable state persistence |
 | `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Theme mode |
+| `align` | `'left' \| 'center' \| 'right'` | `'left'` | Column text alignment |
+| `rowHeight` | `'short' \| 'medium' \| 'tall' \| 'extra_tall'` | `'medium'` | Row height preset |
+| `columnSpacing` | `'narrow' \| 'normal' \| 'wide'` | `'normal'` | Column horizontal spacing |
 | `onRowClick` | `(row: T) => void` | `undefined` | Row click handler |
 | `onRowSelect` | `(rows: T[]) => void` | `undefined` | Row selection handler |
 | `onStateChange` | `(state: TableState) => void` | `undefined` | State change handler |
@@ -234,7 +240,7 @@ MIT © [Sertantai](https://github.com/shotleybuilder)
 ## 🔗 Links
 
 - [GitHub Repository](https://github.com/shotleybuilder/svelte-table-kit)
-- [npm Package](https://www.npmjs.com/package/@sertantai/svelte-table-kit)
+- [npm Package](https://www.npmjs.com/package/@shotleybuilder/svelte-table-kit)
 - [Issue Tracker](https://github.com/shotleybuilder/svelte-table-kit/issues)
 
 ---

package/dist/TableKit.svelte

@@ -27,6 +27,9 @@ export let data = [];
 export let columns = [];
 export let storageKey = "table-kit";
 export let persistState = true;
+export let align = "left";
+export let rowHeight = "medium";
+export let columnSpacing = "normal";
 export let features = {
   columnVisibility: true,
   columnResizing: true,
@@ -55,6 +58,8 @@ let filterConditions = writable([]);
 let filterLogic = writable("and");
 let grouping = writable([]);
 let expanded = writable(true);
+$: horizontalPadding = columnSpacing === "narrow" ? 0.5 : columnSpacing === "wide" ? 2 : 1;
+$: verticalPadding = rowHeight === "short" ? 0.375 : rowHeight === "tall" ? 1 : rowHeight === "extra_tall" ? 1.5 : 0.75;
 $: filteredData = applyFilters(data, $filterConditions, $filterLogic);
 $: if (persistState && storageKey && isBrowser) {
   saveColumnVisibility(storageKey, $columnVisibility);
@@ -63,6 +68,8 @@ $: if (persistState && storageKey && isBrowser) {
   saveColumnOrder(storageKey, $columnOrder);
 }
 let showColumnPicker = false;
+let showRowHeightMenu = false;
+let showColumnSpacingMenu = false;
 let draggedColumnId = null;
 const options = writable({
   data: filteredData,
@@ -70,6 +77,11 @@ const options = writable({
   columnResizeMode: "onChange",
   enableColumnResizing: features.columnResizing !== false,
   enableGrouping: features.grouping !== false,
+  defaultColumn: {
+    size: 180,
+    minSize: 62,
+    maxSize: 1e3
+  },
   state: {
     sorting: $sorting,
     columnVisibility: $columnVisibility,
@@ -194,7 +206,7 @@ $: if (onStateChange) {
 }
 </script>
 
-<div class="table-kit-container">
+<div class="table-kit-container align-{align}">
 	<!-- Filters and Controls -->
 	{#if features.filtering !== false || features.grouping !== false || features.columnVisibility !== false}
 		<div class="table-kit-toolbar">
@@ -222,6 +234,172 @@ $: if (onStateChange) {
 				</div>
 			{/if}
 
+			<!-- View Controls: Row Height and Column Spacing -->
+			<div class="table-kit-view-controls">
+				<!-- Row Height Button -->
+				<div class="relative">
+					<button
+						on:click={() => (showRowHeightMenu = !showRowHeightMenu)}
+						class="view-control-btn"
+						title="Row Height"
+					>
+						<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
+							/>
+						</svg>
+					</button>
+
+					{#if showRowHeightMenu}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div class="backdrop" on:click={() => (showRowHeightMenu = false)} />
+						<div class="dropdown-menu">
+							<div class="dropdown-header">
+								<span>Row Height</span>
+							</div>
+							<button
+								class="dropdown-item"
+								class:active={rowHeight === 'short'}
+								on:click={() => {
+									rowHeight = 'short';
+									showRowHeightMenu = false;
+								}}
+							>
+								<span class="item-icon">
+									<svg class="icon-sm" viewBox="0 0 16 16" fill="currentColor">
+										<rect x="2" y="7" width="12" height="2" />
+									</svg>
+								</span>
+								Short
+							</button>
+							<button
+								class="dropdown-item"
+								class:active={rowHeight === 'medium'}
+								on:click={() => {
+									rowHeight = 'medium';
+									showRowHeightMenu = false;
+								}}
+							>
+								<span class="item-icon">
+									<svg class="icon-sm" viewBox="0 0 16 16" fill="currentColor">
+										<rect x="2" y="6" width="12" height="4" />
+									</svg>
+								</span>
+								Medium
+							</button>
+							<button
+								class="dropdown-item"
+								class:active={rowHeight === 'tall'}
+								on:click={() => {
+									rowHeight = 'tall';
+									showRowHeightMenu = false;
+								}}
+							>
+								<span class="item-icon">
+									<svg class="icon-sm" viewBox="0 0 16 16" fill="currentColor">
+										<rect x="2" y="4" width="12" height="8" />
+									</svg>
+								</span>
+								Tall
+							</button>
+							<button
+								class="dropdown-item"
+								class:active={rowHeight === 'extra_tall'}
+								on:click={() => {
+									rowHeight = 'extra_tall';
+									showRowHeightMenu = false;
+								}}
+							>
+								<span class="item-icon">
+									<svg class="icon-sm" viewBox="0 0 16 16" fill="currentColor">
+										<rect x="2" y="2" width="12" height="12" />
+									</svg>
+								</span>
+								Extra Tall
+							</button>
+						</div>
+					{/if}
+				</div>
+
+				<!-- Column Spacing Button -->
+				<div class="relative">
+					<button
+						on:click={() => (showColumnSpacingMenu = !showColumnSpacingMenu)}
+						class="view-control-btn"
+						title="Column Spacing"
+					>
+						<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
+							/>
+						</svg>
+					</button>
+
+					{#if showColumnSpacingMenu}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div class="backdrop" on:click={() => (showColumnSpacingMenu = false)} />
+						<div class="dropdown-menu">
+							<div class="dropdown-header">
+								<span>Column Spacing</span>
+							</div>
+							<button
+								class="dropdown-item"
+								class:active={columnSpacing === 'narrow'}
+								on:click={() => {
+									columnSpacing = 'narrow';
+									showColumnSpacingMenu = false;
+								}}
+							>
+								<span class="item-icon">
+									<svg class="icon-sm" viewBox="0 0 16 16" fill="currentColor">
+										<rect x="6" y="2" width="4" height="12" />
+									</svg>
+								</span>
+								Narrow
+							</button>
+							<button
+								class="dropdown-item"
+								class:active={columnSpacing === 'normal'}
+								on:click={() => {
+									columnSpacing = 'normal';
+									showColumnSpacingMenu = false;
+								}}
+							>
+								<span class="item-icon">
+									<svg class="icon-sm" viewBox="0 0 16 16" fill="currentColor">
+										<rect x="4" y="2" width="8" height="12" />
+									</svg>
+								</span>
+								Normal
+							</button>
+							<button
+								class="dropdown-item"
+								class:active={columnSpacing === 'wide'}
+								on:click={() => {
+									columnSpacing = 'wide';
+									showColumnSpacingMenu = false;
+								}}
+							>
+								<span class="item-icon">
+									<svg class="icon-sm" viewBox="0 0 16 16" fill="currentColor">
+										<rect x="2" y="2" width="12" height="12" />
+									</svg>
+								</span>
+								Wide
+							</button>
+						</div>
+					{/if}
+				</div>
+			</div>
+
 			<!-- Column Picker -->
 			{#if features.columnVisibility !== false}
 				<div class="table-kit-column-picker">
@@ -293,26 +471,31 @@ $: if (onStateChange) {
 						<tr>
 							{#each headerGroup.headers as header}
 								<th
-									draggable={features.columnReordering !== false}
-									on:dragstart={() => handleDragStart(header.column.id)}
 									on:dragover={handleDragOver}
 									on:drop|preventDefault={() => handleDrop(header.column.id)}
 									class:dragging={draggedColumnId === header.column.id}
-									style="width: {header.getSize()}px; cursor: {features.columnReordering !==
-									false
-										? 'grab'
-										: 'default'};"
+									style="width: {header.getSize()}px;"
 								>
 									{#if !header.isPlaceholder}
-										<div class="th-content">
+										<div
+											class="th-content"
+											style="padding: {verticalPadding}rem {horizontalPadding}rem; cursor: {features.columnReordering !==
+											false
+												? 'grab'
+												: 'default'};"
+											draggable={features.columnReordering !== false}
+											on:dragstart={() => handleDragStart(header.column.id)}
+										>
 											<button
 												class="sort-btn"
 												class:sortable={header.column.getCanSort()}
 												on:click={header.column.getToggleSortingHandler()}
 											>
-												<svelte:component
-													this={flexRender(header.column.columnDef.header, header.getContext())}
-												/>
+												<span class="header-text">
+													<svelte:component
+														this={flexRender(header.column.columnDef.header, header.getContext())}
+													/>
+												</span>
 												{#if features.sorting !== false && header.column.getCanSort()}
 													<span class="sort-icon">
 														{{
@@ -327,8 +510,14 @@ $: if (onStateChange) {
 										{#if features.columnResizing !== false && header.column.getCanResize()}
 											<!-- svelte-ignore a11y-no-static-element-interactions -->
 											<div
-												on:mousedown={header.getResizeHandler()}
-												on:touchstart={header.getResizeHandler()}
+												on:mousedown={(e) => {
+													e.stopPropagation();
+													header.getResizeHandler()(e);
+												}}
+												on:touchstart={(e) => {
+													e.stopPropagation();
+													header.getResizeHandler()(e);
+												}}
 												class="resize-handle"
 												class:resizing={header.column.getIsResizing()}
 											/>
@@ -345,9 +534,10 @@ $: if (onStateChange) {
 							class:clickable={onRowClick !== undefined && !row.getIsGrouped()}
 							class:group-row={row.getIsGrouped()}
 							on:click={() => onRowClick && !row.getIsGrouped() && onRowClick(row.original)}
+							style="--cell-padding-vertical: {verticalPadding}rem; --cell-padding-horizontal: {horizontalPadding}rem;"
 						>
 							{#each row.getVisibleCells() as cell}
-								<td style="padding-left: {row.depth * 2}rem">
+								<td style="text-align: {align}; width: {cell.column.getSize()}px;">
 									{#if cell.getIsGrouped()}
 										<!-- Grouping column - show expand/collapse button -->
 										<div class="group-cell">
@@ -396,11 +586,13 @@ $: if (onStateChange) {
 										<!-- Placeholder cell - empty -->
 									{:else}
 										<!-- Normal cell -->
-										<slot name="cell" {cell} column={cell.column.id}>
-											<svelte:component
-												this={flexRender(cell.column.columnDef.cell, cell.getContext())}
-											/>
-										</slot>
+										<div class="cell-content">
+											<slot name="cell" {cell} column={cell.column.id}>
+												<svelte:component
+													this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+												/>
+											</slot>
+										</div>
 									{/if}
 								</td>
 							{/each}
@@ -473,6 +665,7 @@ $: if (onStateChange) {
 	/* Container */
 	.table-kit-container {
 		width: 100%;
+		overflow-x: auto;
 	}
 
 	/* Toolbar */
@@ -511,6 +704,28 @@ $: if (onStateChange) {
 		position: relative;
 	}
 
+	.table-kit-view-controls {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.view-control-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.5rem;
+		color: #374151;
+		background: white;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: background 0.15s;
+	}
+
+	.view-control-btn:hover {
+		background: #f9fafb;
+	}
+
 	.column-picker-btn {
 		display: inline-flex;
 		align-items: center;
@@ -534,6 +749,72 @@ $: if (onStateChange) {
 		height: 1rem;
 	}
 
+	.icon-sm {
+		width: 0.875rem;
+		height: 0.875rem;
+	}
+
+	.dropdown-menu {
+		position: absolute;
+		top: calc(100% + 0.25rem);
+		right: 0;
+		min-width: 10rem;
+		background: white;
+		border: 1px solid #d1d5db;
+		border-radius: 0.5rem;
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+		z-index: 20;
+		overflow: hidden;
+	}
+
+	.dropdown-header {
+		padding: 0.5rem 0.75rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: #6b7280;
+		border-bottom: 1px solid #e5e7eb;
+	}
+
+	.dropdown-item {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		width: 100%;
+		padding: 0.625rem 0.75rem;
+		font-size: 0.875rem;
+		color: #374151;
+		background: white;
+		border: none;
+		text-align: left;
+		cursor: pointer;
+		transition: background 0.15s;
+	}
+
+	.dropdown-item:hover {
+		background: #f9fafb;
+	}
+
+	.dropdown-item.active {
+		background: #eff6ff;
+		color: #2563eb;
+		font-weight: 500;
+	}
+
+	.item-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.25rem;
+		height: 1.25rem;
+		color: #9ca3af;
+	}
+
+	.dropdown-item.active .item-icon {
+		color: #2563eb;
+	}
+
 	.backdrop {
 		position: fixed;
 		inset: 0;
@@ -629,8 +910,9 @@ $: if (onStateChange) {
 	}
 
 	.table-kit-table {
-		width: 100%;
+		width: auto;
 		border-collapse: collapse;
+		table-layout: fixed;
 	}
 
 	thead {
@@ -639,7 +921,7 @@ $: if (onStateChange) {
 
 	th {
 		position: relative;
-		padding: 0.75rem 1.5rem;
+		padding: 0;
 		text-align: left;
 		font-size: 0.75rem;
 		font-weight: 500;
@@ -649,6 +931,18 @@ $: if (onStateChange) {
 		transition: opacity 0.2s;
 	}
 
+	.table-kit-container.align-left th {
+		text-align: left !important;
+	}
+
+	.table-kit-container.align-center th {
+		text-align: center !important;
+	}
+
+	.table-kit-container.align-right th {
+		text-align: right !important;
+	}
+
 	th.dragging {
 		opacity: 0.5;
 	}
@@ -657,6 +951,21 @@ $: if (onStateChange) {
 		display: flex;
 		align-items: center;
 		gap: 0.25rem;
+		justify-content: flex-start;
+		overflow: hidden;
+		min-width: 0;
+	}
+
+	.table-kit-container.align-left .th-content {
+		justify-content: flex-start !important;
+	}
+
+	.table-kit-container.align-center .th-content {
+		justify-content: center !important;
+	}
+
+	.table-kit-container.align-right .th-content {
+		justify-content: flex-end !important;
 	}
 
 	.sort-btn {
@@ -671,6 +980,18 @@ $: if (onStateChange) {
 		color: inherit;
 		text-transform: inherit;
 		letter-spacing: inherit;
+		overflow: hidden;
+		min-width: 0;
+		flex: 1;
+	}
+
+	.header-text {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+		max-width: 100%;
 	}
 
 	.sort-btn.sortable {
@@ -688,21 +1009,31 @@ $: if (onStateChange) {
 	.resize-handle {
 		position: absolute;
 		top: 0;
-		right: 0;
+		right: -0.375rem;
 		height: 100%;
-		width: 0.25rem;
+		width: 0.75rem;
 		cursor: col-resize;
 		user-select: none;
 		touch-action: none;
 		background: transparent;
-		opacity: 0;
-		transition: opacity 0.2s, background 0.2s;
+		z-index: 10;
+		transition: background 0.15s;
+	}
+
+	.resize-handle:hover {
+		background: rgba(79, 70, 229, 0.1);
 	}
 
-	.resize-handle:hover,
-	.resize-handle.resizing {
+	.resize-handle:hover::after,
+	.resize-handle.resizing::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		height: 100%;
+		width: 0.125rem;
 		background: #4f46e5;
-		opacity: 1;
 	}
 
 	tbody tr {
@@ -718,9 +1049,32 @@ $: if (onStateChange) {
 	}
 
 	td {
-		padding: 1rem 1.5rem;
 		font-size: 0.875rem;
 		color: #111827;
+		text-align: left;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 0;
+	}
+
+	.table-kit-container.align-left td {
+		text-align: left !important;
+	}
+
+	.table-kit-container.align-center td {
+		text-align: center !important;
+	}
+
+	.table-kit-container.align-right td {
+		text-align: right !important;
+	}
+
+	.cell-content {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		padding: var(--cell-padding-vertical, 1rem) var(--cell-padding-horizontal, 1rem);
 	}
 
 	/* Group Rows */

package/dist/TableKit.svelte.d.ts

@@ -7,6 +7,9 @@ declare class __sveltets_Render<T> {
         columns?: ColumnDef<T>[] | undefined;
         storageKey?: TableKitProps<T_1>["storageKey"];
         persistState?: TableKitProps<T_1>["persistState"];
+        align?: TableKitProps<T_1>["align"];
+        rowHeight?: TableKitProps<T_1>["rowHeight"];
+        columnSpacing?: TableKitProps<T_1>["columnSpacing"];
         features?: TableKitProps<T_1>["features"];
         onRowClick?: ((row: T) => void) | undefined;
         onRowSelect?: ((rows: T[]) => void) | undefined;

package/dist/types.d.ts

@@ -8,6 +8,9 @@ export interface TableKitProps<T = any> {
     persistState?: boolean;
     theme?: 'light' | 'dark' | 'auto';
     classNames?: Partial<ClassNameMap>;
+    align?: 'left' | 'center' | 'right';
+    rowHeight?: 'short' | 'medium' | 'tall' | 'extra_tall';
+    columnSpacing?: 'narrow' | 'normal' | 'wide';
     onRowClick?: (row: T) => void;
     onRowSelect?: (rows: T[]) => void;
     onStateChange?: (state: TableState) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotleybuilder/svelte-table-kit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A comprehensive, AI-configurable data table component for Svelte and SvelteKit, built on TanStack Table v8",
   "author": "Sertantai",
   "license": "MIT",