@shotleybuilder/svelte-table-kit 0.5.0 → 0.6.0

package/README.md

@@ -60,6 +60,7 @@ Svelte Table Kit brings Airtable-like functionality to your Svelte applications
 - 📦 Built on TanStack Table v8 (battle-tested, powerful)
 - 🔒 Full TypeScript support
 - 🎛️ Feature flags for granular control
+- 🔌 **Toolbar slot** - Add custom controls to the toolbar (v0.6.0+)
 - 🚀 Zero external dependencies (except TanStack Table)
 - ♿ Accessible and keyboard-friendly
 
@@ -258,6 +259,36 @@ Listen to table events:
 />
 ```
 
+### Custom Toolbar Controls (v0.6.0+)
+
+Add custom controls to the left side of the toolbar using the `toolbar-left` slot:
+
+```svelte
+<script>
+  import { TableKit } from '@shotleybuilder/svelte-table-kit';
+  import ViewSelector from './ViewSelector.svelte';
+</script>
+
+<TableKit {data} {columns}>
+  <!-- Add custom controls to the toolbar -->
+  <svelte:fragment slot="toolbar-left">
+    <ViewSelector on:viewSelected={handleViewSelected} />
+    <button on:click={saveView} class="btn-primary">
+      Save View
+    </button>
+  </svelte:fragment>
+</TableKit>
+```
+
+**Use Cases:**
+- View management controls (save/load table configurations)
+- Custom filter presets
+- Quick action buttons
+- Export/import controls
+- Any custom toolbar buttons that should appear alongside table controls
+
+The `toolbar-left` slot is positioned on the left side of the toolbar, while the built-in table controls (Filter, Sort, Group, Columns) automatically align to the right. All controls appear on the same row, creating a unified control bar.
+
 ---
 
 ## 🎨 Styling

package/dist/TableKit.svelte

@@ -77,7 +77,11 @@ $: {
       columnVisibility.set(visibilityMap);
     }
     if (config.defaultSorting) {
-      sorting.set(config.defaultSorting);
+      const tanstackSorting = config.defaultSorting.map((sort) => ({
+        id: sort.columnId,
+        desc: sort.direction === "desc"
+      }));
+      sorting.set(tanstackSorting);
     }
     if (config.defaultFilters) {
       filterConditions.set(config.defaultFilters);
@@ -299,6 +303,11 @@ $: if (onStateChange) {
 	<!-- Filters and Controls -->
 	{#if features.filtering !== false || features.grouping !== false || features.columnVisibility !== false || (features.sorting !== false && features.sortingMode === 'control')}
 		<div class="table-kit-toolbar">
+			<!-- Slot for custom left-side controls (e.g., view selector, save buttons) -->
+			<div class="table-kit-custom-controls">
+				<slot name="toolbar-left" />
+			</div>
+
 			<!-- Filter Controls -->
 			{#if features.filtering !== false}
 				<div class="table-kit-filters">
@@ -846,6 +855,16 @@ $: if (onStateChange) {
 		justify-content: space-between;
 		gap: 1rem;
 		margin-bottom: 1rem;
+		flex-wrap: wrap;
+	}
+
+	/* Custom controls slot (left side) */
+	.table-kit-custom-controls {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex-shrink: 0;
+		margin-right: auto;
 	}
 
 	.table-kit-filters {

package/dist/TableKit.svelte.d.ts

@@ -20,6 +20,7 @@ declare class __sveltets_Render<T> {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {
+        'toolbar-left': {};
         empty: {};
         cell: {
             cell: import("@tanstack/table-core").Cell<T, unknown>;

package/package.json

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