@shotleybuilder/svelte-table-kit 0.1.0 → 0.4.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,17 @@ 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
+- ⬆️ **Flexible sorting** - Column header or Airtable-style sort control
 - 📄 Pagination with customizable page sizes
 - 💾 LocalStorage persistence for all user preferences
+- ✂️ Text truncation with ellipsis for long content
+- 📋 **Column context menu** - Quick access to sort, filter, group, and hide actions
 
 **Advanced Filtering:**
 - 12 filter operators: equals, contains, starts with, greater than, etc.
@@ -28,6 +32,13 @@ Svelte Table Kit brings Airtable-like functionality to your Svelte applications
 - Active filter count badge
 - Real-time filtering as you type
 
+**Sorting Options:**
+- **Column header mode** (default) - Click headers to sort with ↑↓↕ indicators
+- **Airtable-style control** - Dedicated sort dropdown with multi-level sorting
+- Choose column and direction (A → Z or Z → A)
+- Multiple sort levels applied top to bottom
+- Collapsible SortBar UI
+
 **Grouping & Hierarchy:**
 - Group by up to 3 columns simultaneously
 - Expand/collapse groups with chevron buttons
@@ -35,6 +46,15 @@ Svelte Table Kit brings Airtable-like functionality to your Svelte applications
 - Item count per group
 - Collapsible GroupBar UI
 
+**Column Context Menu:**
+- Hover over column headers to reveal menu trigger (chevron icon)
+- **Sort A → Z / Sort Z → A** - Quick sort with active state indication
+- **Filter by this field** - Creates pre-filled filter condition
+- **Group by this field** - Adds column to grouping configuration
+- **Hide field** - Remove column from view
+- Actions conditionally shown based on feature flags
+- Seamlessly integrates with existing controls
+
 **Developer Experience:**
 - 🎨 Headless design - style it your way
 - 📦 Built on TanStack Table v8 (battle-tested, powerful)
@@ -56,13 +76,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 +91,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 },
@@ -104,19 +124,21 @@ The simplest way to use TableKit:
 
 ### With Configuration
 
-Use AI-generated or predefined configurations:
+Customize initial table state programmatically:
 
 ```svelte
 <script>
-  import { TableKit, presets } from '@sertantai/svelte-table-kit';
-
-  const config = presets.dashboard; // or generate with AI
+  import { TableKit } from '@shotleybuilder/svelte-table-kit';
 </script>
 
 <TableKit
   {data}
   {columns}
-  {config}
+  config={{
+    defaultColumnOrder: ['name', 'role', 'age', 'id'],  // Set initial column order
+    defaultColumnSizing: { name: 200, role: 150 },      // Set initial column widths
+    defaultVisibleColumns: ['name', 'role', 'age']      // Hide 'id' column initially
+  }}
   features={{
     columnVisibility: true,
     filtering: true,
@@ -140,6 +162,7 @@ Control which features are enabled:
     columnReordering: true,
     filtering: true,
     sorting: true,
+    sortingMode: 'control',  // 'header' (default) or 'control' (Airtable-style)
     pagination: true,
     rowSelection: false,
     grouping: false
@@ -147,6 +170,10 @@ Control which features are enabled:
 />
 ```
 
+**Sorting Modes:**
+- `sortingMode: 'header'` - Click column headers to sort (default behavior)
+- `sortingMode: 'control'` - Use Airtable-style sort dropdown with multi-level support
+
 ### Event Handlers
 
 Listen to table events:
@@ -203,6 +230,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 +264,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)
 
 ---