docs: update docs to include filtering

Author: geodask

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "svelte-reactive-table",
+	"name": "svelte-reactive-table-monorepo",
 	"version": "1.0.0",
 	"description": "Monorepo for svelte-reactive-table",
 	"main": "index.js",

pnpm-lock.yaml

@@ -27,15 +27,15 @@
 	"devDependencies": {
 		"@hbsnow/rehype-sectionize": "^1.0.7",
 		"@internationalized/date": "^3.8.2",
-		"@lucide/svelte": "^0.516.0",
+		"@lucide/svelte": "^0.544.0",
 		"@shikijs/transformers": "^3.6.0",
 		"@sveltejs/adapter-auto": "^6.0.1",
 		"@sveltejs/adapter-vercel": "^5.7.2",
 		"@sveltejs/kit": "^2.21.5",
 		"@sveltejs/vite-plugin-svelte": "^5.1.0",
 		"@tailwindcss/typography": "^0.5.16",
 		"@tailwindcss/vite": "^4.1.10",
-		"bits-ui": "^2.8.0",
+		"bits-ui": "^2.14.1",
 		"clsx": "^2.1.1",
 		"mdsvex": "^0.12.6",
 		"mode-watcher": "1.0.8",
@@ -44,7 +44,7 @@
 		"shiki": "^3.6.0",
 		"svelte": "5.34.4",
 		"svelte-check": "^4.2.1",
-		"svelte-reactive-table": "^0.5.0",
+		"svelte-reactive-table": "workspace:*",
 		"tailwind-merge": "^3.3.1",
 		"tailwind-variants": "^1.0.0",
 		"tailwindcss": "^4.1.10",

sites/docs/package.json

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import MinusIcon from "@lucide/svelte/icons/minus";
+	import { cn, type WithoutChildrenOrChild } from "$lib/shared/lib/shadcn.js";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
+	class={cn(
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<CheckIcon class="size-3.5" />
+			{:else if indeterminate}
+				<MinusIcon class="size-3.5" />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>

sites/docs/src/lib/shared/ui/shadcn/checkbox/checkbox.svelte

@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox,
+};

sites/docs/src/lib/shared/ui/shadcn/checkbox/index.ts

@@ -45,6 +45,10 @@ export const data = {
 					title: 'Column Visibility',
 					url: '/docs/column-visibility'
 				},
+				{
+					title: 'Filtering',
+					url: '/docs/filtering'
+				},
 				{
 					title: 'Pagination',
 					url: '/docs/pagination'
@@ -67,6 +71,10 @@ export const data = {
 					title: 'Column Visibility',
 					url: '/docs/examples/column-visibility'
 				},
+				{
+					title: 'Filtering',
+					url: '/docs/examples/filtering'
+				},
 				{
 					title: 'Pagination',
 					url: '/docs/examples/pagination'
@@ -89,14 +97,18 @@ export const data = {
 					title: 'reactiveTable',
 					url: '/docs/api/reactive-table'
 				},
-				{
-					title: 'reactivePagination',
-					url: '/docs/api/reactive-pagination'
-				},
 				{
 					title: 'reactiveColumnVisibility',
 					url: '/docs/api/reactive-column-visibility'
 				},
+				{
+					title: 'reactiveFiltering',
+					url: '/docs/api/reactive-filtering'
+				},
+				{
+					title: 'reactivePagination',
+					url: '/docs/api/reactive-pagination'
+				},
 				{
 					title: 'reactiveSorting',
 					url: '/docs/api/reactive-sorting'

sites/docs/src/lib/widgets/menu-sidebar/model/index.ts

@@ -258,3 +258,31 @@ const table = reactiveTable<User>(users, columns).use(
 // TypeScript will infer the correct column visibility state type
 const { columnVisibility } = table.plugins;
 ```
+
+## Integration with Other Plugins
+
+Column visibility works seamlessly with all other plugins:
+
+```ts
+const table = reactiveTable(data, columns)
+	.use(reactiveColumnVisibility({ hiddenColumns: ['email'] }))
+	.use(reactiveFiltering())
+	.use(reactiveSorting())
+	.use(reactivePagination({ pageSize: 10 }));
+
+// Column visibility affects all plugins:
+// - Hidden columns are not sortable
+// - Hidden columns are not included in table.rows cells
+// - All other plugins work with visible columns only
+```
+
+When combined with other plugins:
+- Hidden columns are excluded from all plugin operations
+- Only visible columns appear in `table.columns` and `table.headers`
+- Hidden columns remain in `table.allColumns` for reference
+
+## Related
+
+- [Column Visibility Guide](/docs/column-visibility) - Comprehensive guide with examples
+- [Column Visibility Example](/docs/examples/column-visibility) - Interactive example
+- [Column Definition](/docs/column-definition) - Learn about column configuration