How to Build Search filtering and sorting with V0

1// Paste this prompt into V0's AI chat:
2// Create a Supabase schema for a searchable product catalog:
3// 1. items table: id (uuid PK), title (text), description (text), category (text), price (numeric), tags (text array), created_at (timestamptz), search_vector (tsvector)
4// 2. Add a GIN index on search_vector and btree indexes on category and price
5// 3. Create a trigger that auto-updates search_vector from title and description using to_tsvector('english', title || ' ' || description)
6// 4. filter_options table: id (uuid PK), filter_group (text), label (text), value (text) for dynamic filter definitions
7// 5. Seed with 20 sample products across 4 categories with varied prices
8// 6. Add RLS policies allowing public read access
9// Generate the SQL migration.

1'use client'
2
3import { useSearchParams, useRouter, usePathname } from 'next/navigation'
4import { useCallback, useState, useEffect } from 'react'
5import { Input } from '@/components/ui/input'
6
7export function SearchBar() {
8  const searchParams = useSearchParams()
9  const router = useRouter()
10  const pathname = usePathname()
11  const [query, setQuery] = useState(searchParams.get('q') ?? '')
12
13  const updateSearch = useCallback(
14    (value: string) => {
15      const params = new URLSearchParams(searchParams.toString())
16      if (value) {
17        params.set('q', value)
18      } else {
19        params.delete('q')
20      }
21      params.delete('page')
22      router.push(`${pathname}?${params.toString()}`)
23    },
24    [searchParams, router, pathname]
25  )
26
27  useEffect(() => {
28    const timer = setTimeout(() => updateSearch(query), 300)
29    return () => clearTimeout(timer)
30  }, [query, updateSearch])
31
32  return (
33    <Input
34      placeholder="Search products..."
35      value={query}
36      onChange={(e) => setQuery(e.target.value)}
37      className="w-full max-w-md"
38    />
39  )
40}

1'use client'
2
3import { useSearchParams, useRouter, usePathname } from 'next/navigation'
4import { Checkbox } from '@/components/ui/checkbox'
5import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
6import { Badge } from '@/components/ui/badge'
7import { Button } from '@/components/ui/button'
8
9interface FilterOption {
10  filter_group: string
11  label: string
12  value: string
13}
14
15export function FilterSidebar({ options }: { options: FilterOption[] }) {
16  const searchParams = useSearchParams()
17  const router = useRouter()
18  const pathname = usePathname()
19
20  const groups = options.reduce((acc, opt) => {
21    if (!acc[opt.filter_group]) acc[opt.filter_group] = []
22    acc[opt.filter_group].push(opt)
23    return acc
24  }, {} as Record<string, FilterOption[]>)
25
26  function toggleFilter(group: string, value: string) {
27    const params = new URLSearchParams(searchParams.toString())
28    const current = params.getAll(group)
29    if (current.includes(value)) {
30      params.delete(group)
31      current.filter((v) => v !== value).forEach((v) => params.append(group, v))
32    } else {
33      params.append(group, value)
34    }
35    params.delete('page')
36    router.push(`${pathname}?${params.toString()}`)
37  }
38
39  function clearAll() {
40    router.push(pathname)
41  }
42
43  return (
44    <aside className="w-64 space-y-6">
45      <div className="flex items-center justify-between">
46        <h3 className="font-semibold">Filters</h3>
47        <Button variant="ghost" size="sm" onClick={clearAll}>Clear all</Button>
48      </div>
49      {Object.entries(groups).map(([group, opts]) => (
50        <div key={group} className="space-y-2">
51          <h4 className="text-sm font-medium capitalize">{group}</h4>
52          {opts.map((opt) => (
53            <label key={opt.value} className="flex items-center gap-2 text-sm">
54              <Checkbox
55                checked={searchParams.getAll(group).includes(opt.value)}
56                onCheckedChange={() => toggleFilter(group, opt.value)}
57              />
58              {opt.label}
59            </label>
60          ))}
61        </div>
62      ))}
63    </aside>
64  )
65}

1import { createClient } from '@/lib/supabase/server'
2import { SearchBar } from '@/components/search-bar'
3import { FilterSidebar } from '@/components/filter-sidebar'
4import { Badge } from '@/components/ui/badge'
5import { Button } from '@/components/ui/button'
6import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
7import Link from 'next/link'
8
9export default async function SearchPage({
10  searchParams,
11}: {
12  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
13}) {
14  const params = await searchParams
15  const q = typeof params.q === 'string' ? params.q : ''
16  const sort = typeof params.sort === 'string' ? params.sort : 'created_at'
17  const order = params.order === 'asc' ? true : false
18  const categories = Array.isArray(params.category)
19    ? params.category
20    : params.category
21      ? [params.category]
22      : []
23
24  const supabase = await createClient()
25
26  let query = supabase.from('items').select('*', { count: 'exact' })
27  if (q) query = query.textSearch('search_vector', q)
28  if (categories.length > 0) query = query.in('category', categories)
29  query = query.order(sort, { ascending: order }).limit(20)
30
31  const { data: items, count } = await query
32  const { data: filterOptions } = await supabase.from('filter_options').select('*')
33
34  return (
35    <div className="flex gap-8 p-6">
36      <FilterSidebar options={filterOptions ?? []} />
37      <main className="flex-1 space-y-4">
38        <SearchBar />
39        <div className="flex gap-2 flex-wrap">
40          {categories.map((cat) => (
41            <Badge key={cat} variant="secondary">{cat}</Badge>
42          ))}
43        </div>
44        <p className="text-sm text-muted-foreground">{count ?? 0} results</p>
45        <Table>
46          <TableHeader>
47            <TableRow>
48              <TableHead>
49                <Link href={`?${new URLSearchParams({ ...params as any, sort: 'title', order: sort === 'title' && !order ? 'asc' : 'desc' }).toString()}`}>
50                  <Button variant="ghost" size="sm">Title</Button>
51                </Link>
52              </TableHead>
53              <TableHead>Category</TableHead>
54              <TableHead>
55                <Link href={`?${new URLSearchParams({ ...params as any, sort: 'price', order: sort === 'price' && !order ? 'asc' : 'desc' }).toString()}`}>
56                  <Button variant="ghost" size="sm">Price</Button>
57                </Link>
58              </TableHead>
59            </TableRow>
60          </TableHeader>
61          <TableBody>
62            {items?.map((item) => (
63              <TableRow key={item.id}>
64                <TableCell className="font-medium">{item.title}</TableCell>
65                <TableCell><Badge variant="outline">{item.category}</Badge></TableCell>
66                <TableCell>${(item.price / 100).toFixed(2)}</TableCell>
67              </TableRow>
68            ))}
69          </TableBody>
70        </Table>
71      </main>
72    </div>
73  )
74}

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3
4const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function GET(req: NextRequest) {
10  const { searchParams } = new URL(req.url)
11  const q = searchParams.get('q') ?? ''
12  const page = parseInt(searchParams.get('page') ?? '1')
13  const limit = 20
14  const offset = (page - 1) * limit
15
16  if (!q) {
17    const { data, count } = await supabase
18      .from('items')
19      .select('*', { count: 'exact' })
20      .order('created_at', { ascending: false })
21      .range(offset, offset + limit - 1)
22    return NextResponse.json({ data, total: count })
23  }
24
25  const { data, error } = await supabase.rpc('search_items', {
26    search_query: q,
27    result_limit: limit,
28    result_offset: offset,
29  })
30
31  if (error) {
32    return NextResponse.json({ error: error.message }, { status: 500 })
33  }
34
35  return NextResponse.json({ data, total: data?.length ?? 0 })
36}

1'use server'
2
3import { createClient } from '@/lib/supabase/server'
4import { revalidatePath } from 'next/cache'
5
6export async function saveSearchPreset(
7  name: string,
8  params: Record<string, string | string[]>
9) {
10  const supabase = await createClient()
11  const { data: { user } } = await supabase.auth.getUser()
12
13  if (!user) {
14    return { error: 'Must be logged in to save presets' }
15  }
16
17  const { error } = await supabase.from('search_presets').insert({
18    user_id: user.id,
19    name,
20    params,
21  })
22
23  if (error) {
24    return { error: error.message }
25  }
26
27  revalidatePath('/search')
28  return { success: true }
29}