svelte-tably 1.0.0-next.16 → 1.0.0-next.17

package/README.md

@@ -21,7 +21,7 @@ A high performant, feature rich, dynamic table
 - [x] Row context menus
 - [x] Expandable rows
 - [x] to CSV
-- [ ] Auto: Table based on data, sortable
+- [x] Auto: Table based on data, sortable
 
 ### Usage Notes
 
@@ -38,6 +38,9 @@ A high performant, feature rich, dynamic table
     let selected = $state([]) as typeof data
 </script>
 
+<!-- Auto: Generate Columns for you -->
+<Table auto {data} resizeable={false} filters=[...] />
+
 <Table {data} panel={activePanel} select bind:selected>
     {#snippet content({ Column, Panel, Expandable, Row, state, data })}
         <Column id='name' sticky sort>
@@ -97,14 +100,15 @@ For quick styling
 
 | CSS Variable | Description | Default |
 | - | - | - |
-| --tably-bg | background-color | `hsl(0, 0%, 100%)` |
-| --tably-color | color | `hsl(0, 0%, 0%)` |
-| --tably-border | border | `hsl(0, 0%, 90%)` |
+| --tably-bg | Background color | `hsl(0, 0%, 100%)` |
+| --tably-color | Text color | `hsl(0, 0%, 0%)` |
+| --tably-border | Border for sticky columns and header | `hsl(0, 0%, 90%)` |
+| --tably-border-grid | Border for the table-grid | `hsl(0, 0%, 98%)` |
 | --tably-statusbar | background-color for the statusbar | `hsl(0, 0%, 98%)` |
 | --tably-padding-y | Padding above/below each column | `.5rem` |
 | --tably-padding-x | Padding left of each column | `1rem` |
 | --tably-radius | Table radius | `.25rem` |
 
-Advanced styling can be done via `:global .svelte-tably`
-
-
+> [!NOTE]  
+> Advanced styling can be done via `:global(.svelte-tably)`  
+> `table > thead > tr > th, table > tbody > tr > td, table > tfoot > tr > td`

package/dist/table/Table.svelte

@@ -21,7 +21,7 @@
 	import { TableState, type HeaderSelectCtx, type RowCtx, type RowSelectCtx, type TableProps } from './table.svelte.js'
 	import Panel from '../panel/Panel.svelte'
 	import Column from '../column/Column.svelte'
-	import { assignDescriptors, fromProps, mounted } from '../utility.svelte.js'
+	import { assignDescriptors, capitalize, fromProps, mounted, segmentize } from '../utility.svelte.js'
 	import { conditional } from '../conditional.svelte.js'
 	import { ColumnState, type RowColumnCtx } from '../column/column.svelte.js'
 	import Expandable from '../expandable/Expandable.svelte'
@@ -55,7 +55,7 @@
 		panel: _panel = $bindable(),
 		data: _data = $bindable([]),
 		...restProps
-	}: TableProps<T> & { content: ContentSnippet } = $props()
+	}: TableProps<T> & { content?: ContentSnippet } = $props()
 
 	const properties = fromProps(restProps, {
 		selected: [() => _selected, v => _selected = v],
@@ -309,14 +309,18 @@
 					<tr>
 						{#each renderedColumns as column}
 							<td>
-								{@render column.snippets.row?.(row, {
-									index: i,
-									value: column.options.value?.(row),
-									isHovered: false,
-									itemState: { index: i, dragging: false, positioning: false } as ItemState<any>,
-									selected: false,
-									expanded: false
-								})}
+								{#if column.snippets.row}
+									{@render column.snippets.row(row, {
+										index: i,
+										value: column.options.value?.(row),
+										isHovered: false,
+										itemState: { index: i, dragging: false, positioning: false } as ItemState<any>,
+										selected: false,
+										expanded: false
+									})}
+								{:else}
+									{column.options.value?.(row)}
+								{/if}
 							</td>
 						{/each}
 					</tr>
@@ -346,7 +350,7 @@
 {/snippet}
 
 {#snippet dragSnippet()}
-	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style='opacity: .3'>
 		<path
 			fill="currentColor"
 			d="M5.5 5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m0 4.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m1.5 3a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0M10.5 5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M12 8a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1.5 6a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"
@@ -662,10 +666,10 @@
 			id='__fixed'
 			{table}
 			fixed
-			width={Math.max(56, 0
+			width={Math.max(48, 0
 				+ (select && show !== 'never' ? 34 : 0) 
 				+ (reorderable ? 34 : 0)
-				+ (expandable?.options.chevron !== 'never' ? 34 : 0)
+				+ (expandable && expandable?.options.chevron !== 'never' ? 34 : 0)
 			)}
 			resizeable={false}
 		>
@@ -740,6 +744,21 @@
 	{/if}
 {/if}
 
+{#if table.options.auto}
+	{#each Object.keys(data.current[0] || {}) as key}
+		<Column
+			id={key}
+			value={r => r[key]}
+			header={capitalize(segmentize(key))}
+			sort={
+				typeof data.current[0]?.[key] === 'number'
+					? (a, b) => a - b
+					: (a, b) => String(a).localeCompare(String(b))
+			}
+		/>
+	{/each}
+{/if}
+
 {@render content?.({
 	Column,
 	Panel,
@@ -1045,8 +1064,15 @@
 	}
 
 	.row > .column {
+		background-color: var(--tably-bg);
 		padding: var(--tably-padding-y) 0;
 	}
+
+	:global(#runic-drag .row) {
+		border: 1px solid var(--tably-border-grid);
+		border-top: 2px solid var(--tably-border-grid);
+	}
+
 	.row > * {
 		border-left: 1px solid var(--tably-border-grid);
 		border-bottom: 1px solid var(--tably-border-grid);

package/dist/table/table.svelte.js

@@ -28,7 +28,8 @@ export class TableState {
         resizeable: this.#props.resizeable ?? true,
         reorderable: this.#props.reorderable ?? false,
         href: this.#props.href,
-        select: this.#props.select ?? false
+        select: this.#props.select ?? false,
+        auto: this.#props.auto ?? false
     });
     add(state) {
         if (state instanceof ColumnState) {

package/dist/utility.svelte.d.ts

@@ -14,4 +14,8 @@ type SetterRecord = Record<PropertyKey, [() => any, (v: any) => void]>;
 export declare function withSetters<T extends SetterRecord>(obj: T): T;
 export declare function fromProps<T extends AnyRecord, B extends SetterRecord>(props: T, boundProps?: B): Simplify<{ [K in keyof B]: ReturnType<B[K][0]>; } & { readonly [K in keyof T]: T[K]; }>;
 export declare function assignDescriptors<T extends AnyRecord, B extends AnyRecord>(target: T, source: B): T & B;
+/** Capitalize by space */
+export declare function capitalize(str: string): string;
+/** Split words when going from lower case to uppercase; `someWords-split` -> `some Word Split...` */
+export declare function segmentize(str: string): string;
 export {};

package/dist/utility.svelte.js

@@ -78,3 +78,27 @@ export function assignDescriptors(target, source) {
     }
     return target;
 }
+/** Capitalize by space */
+export function capitalize(str) {
+    let parts = str.split(' ');
+    let result = '';
+    for (let part of parts) {
+        result += part.charAt(0).toUpperCase() + part.slice(1) + ' ';
+    }
+    return result;
+}
+/** Split words when going from lower case to uppercase; `someWords-split` -> `some Word Split...` */
+export function segmentize(str) {
+    let result = '';
+    for (let i = 0; i < str.length; i++) {
+        const char = str[i];
+        const prevChar = i > 0 ? str[i - 1] : '';
+        if ((char === '-' || char === char.toUpperCase()) && prevChar !== ' ' && prevChar !== prevChar.toUpperCase()) {
+            result += ' ';
+            if (char === '-')
+                continue;
+        }
+        result += char;
+    }
+    return result.trim();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-tably",
-	"version": "1.0.0-next.16",
+	"version": "1.0.0-next.17",
 	"repository": "github:refzlund/svelte-tably",
 	"homepage": "https://github.com/Refzlund/svelte-tably",
 	"bugs": {