docs: update docs for filtering and improve version generation

Author: geodask

sites/docs/.gitignore

@@ -9,6 +9,9 @@ node_modules
 /build
 /.velite
 
+# Generated files
+src/lib/shared/config/version.ts
+
 # OS
 .DS_Store
 Thumbs.db

sites/docs/package.json

@@ -13,7 +13,7 @@
 		"dev": "vite dev",
 		"build": "velite && vite build",
 		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
+		"prepare": "node scripts/generate-version.js && svelte-kit sync || true",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --config ../../.prettierrc --write .",

sites/docs/src/lib/shared/config/version.ts

@@ -56,11 +56,11 @@
 		'Row and cell generation',
 		'Column visibility toggling',
 		'Pagination (page size, navigation, reactive state)',
-		'Column sorting (single and multi-column)'
+		'Column sorting (single and multi-column)',
+		'Filtering (global and column-based)'
 	];
 
 	const comingSoon = [
-		'Filtering (global and column-based)',
 		'Row selection (single, multi, range)',
 		'Column resizing and reordering',
 		'Custom cell and header rendering',

sites/docs/src/routes/+page.svelte

@@ -18,6 +18,7 @@ This example demonstrates how to combine all the plugins of svelte-reactive-tabl
 The full-featured table includes:
 
 - Column visibility toggles
+- Name filtering with real-time search
 - Pagination with configurable page sizes
 - Multi-column sorting
 - All plugins working together seamlessly
@@ -40,10 +41,12 @@ The full-featured table includes:
 		ChevronRight,
 		ChevronsLeft,
 		ChevronsRight,
+		Search,
 		SlidersHorizontal
 	} from '@lucide/svelte';
 	import {
 		reactiveColumnVisibility,
+		reactiveFiltering,
 		reactivePagination,
 		reactiveSorting,
 		reactiveTable,
@@ -64,6 +67,8 @@ The full-featured table includes:
 				hiddenColumns: [] // No hidden columns by default
 			})
 		)
+		// Add filtering plugin
+		.use(reactiveFiltering())
 		// Add pagination plugin
 		.use(
 			reactivePagination({
@@ -81,6 +86,12 @@ The full-featured table includes:
 			})
 		);
 
+	// Access the filtering API
+	const { filtering } = table.plugins;
+
+	// Reactive state for name search
+	let nameSearch = $state('');
+
 	// Page size options
 	const pageSizeOptions = [3, 5, 10];
 
@@ -106,6 +117,11 @@ The full-featured table includes:
 		const { sorting } = table.plugins;
 		return sorting.getSortDirection(accessor);
 	}
+
+	// Sync name search with filtering
+	$effect(() => {
+		filtering.setFilter('name', nameSearch.trim());
+	});
 </script>
 
 <!-- Table Component with Integrated Controls -->
@@ -114,9 +130,25 @@ The full-featured table includes:
 	<div class="px-4 py-4 bg-muted/30 border-b flex flex-wrap justify-between items-center gap-3">
 		<div class="flex items-center gap-2">
 			<h2 class="text-sm font-medium">Svelte Reactive Table</h2>
+			{#if filtering.hasActiveFilters}
+				<span class="text-xs text-muted-foreground">
+					({table.rows.length} of {table.allRows.length} shown)
+				</span>
+			{/if}
 		</div>
 
 		<div class="flex items-center gap-2">
+			<!-- Search Input -->
+			<div class="relative">
+				<Search class="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+				<input
+					type="text"
+					bind:value={nameSearch}
+					placeholder="Search names..."
+					class="h-8 w-[200px] rounded-md border border-input bg-background pl-8 pr-3 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+				/>
+			</div>
+
 			<!-- Column Visibility Dropdown -->
 			<DropdownMenu.Root>
 				<DropdownMenu.Trigger>

sites/docs/src/routes/docs/examples/full-featured-table/+page.md

@@ -11,10 +11,12 @@
 		ChevronRight,
 		ChevronsLeft,
 		ChevronsRight,
+		Search,
 		SlidersHorizontal
 	} from '@lucide/svelte';
 	import {
 		reactiveColumnVisibility,
+		reactiveFiltering,
 		reactivePagination,
 		reactiveSorting,
 		reactiveTable
@@ -34,6 +36,8 @@
 				hiddenColumns: [] // No hidden columns by default
 			})
 		)
+		// Add filtering plugin
+		.use(reactiveFiltering())
 		.use(
 			reactivePagination({
 				pageSize: 5, // Default page size
@@ -49,6 +53,12 @@
 			})
 		);
 
+	// Access the filtering API
+	const { filtering } = table.plugins;
+
+	// Reactive state for name search
+	let nameSearch = $state('');
+
 	// Page size options
 	const pageSizeOptions = [3, 5, 10];
 
@@ -74,6 +84,11 @@
 		const { sorting } = table.plugins;
 		return sorting.getSortDirection(accessor);
 	}
+
+	// Sync name search with filtering
+	$effect(() => {
+		filtering.setFilter('name', nameSearch.trim());
+	});
 </script>
 
 <!-- Table Component with Integrated Controls -->
@@ -82,9 +97,25 @@
 	<div class="px-4 py-4 bg-muted/30 border-b flex flex-wrap justify-between items-center gap-3">
 		<div class="flex items-center gap-2">
 			<h2 class="text-sm font-medium">Svelte Reactive Table</h2>
+			{#if filtering.hasActiveFilters}
+				<span class="text-xs text-muted-foreground">
+					({table.rows.length} of {table.allRows.length} shown)
+				</span>
+			{/if}
 		</div>
 
 		<div class="flex items-center gap-2">
+			<!-- Search Input -->
+			<div class="relative">
+				<Search class="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+				<input
+					type="text"
+					bind:value={nameSearch}
+					placeholder="Search names..."
+					class="h-8 w-[200px] rounded-md border border-input bg-background pl-8 pr-3 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+				/>
+			</div>
+
 			<!-- Column Visibility Dropdown -->
 			<DropdownMenu.Root>
 				<DropdownMenu.Trigger>