TableSort() — supabase Function Reference

Source Code

apps/design-system/registry/default/example/table-sort.tsx lines 62–142

export default function TableSort() {
  const [sort, setSort] = useState<ProductSort>('name:asc')

  const handleSortChange = (column: ProductSortColumn) => {
    const [currentCol, currentOrder] = sort.split(':') as [ProductSortColumn, ProductSortOrder]
    if (currentCol === column) {
      // Cycle through: asc -> desc -> no sort (default)
      if (currentOrder === 'asc') {
        setSort(`${column}:desc` as ProductSort)
      } else {
        // Reset to default sort (name:asc)
        setSort('name:asc')
      }
    } else {
      // New column, start with asc
      setSort(`${column}:asc` as ProductSort)
    }
  }

  const sortedProducts = useMemo(() => {
    const [sortCol, sortOrder] = sort.split(':') as [ProductSortColumn, ProductSortOrder]
    const orderMultiplier = sortOrder === 'asc' ? 1 : -1

    return [...products].sort((a, b) => {
      if (sortCol === 'name') {
        return a.name.localeCompare(b.name) * orderMultiplier
      }
      if (sortCol === 'category') {
        return a.category.localeCompare(b.category) * orderMultiplier
      }
      if (sortCol === 'price') {
        return (a.price - b.price) * orderMultiplier
      }
      return 0
    })
  }, [sort])

  return (
    <Card className="w-full">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>
              <TableHeadSort column="name" currentSort={sort} onSortChange={handleSortChange}>
                Product
              </TableHeadSort>
            </TableHead>
            <TableHead>
              <TableHeadSort column="category" currentSort={sort} onSortChange={handleSortChange}>
                Category
              </TableHeadSort>
            </TableHead>
            <TableHead className="hidden md:table-cell">Description</TableHead>
            <TableHead className="text-right">
              <TableHeadSort
                className="justify-end"
                column="price"
                currentSort={sort}
                onSortChange={handleSortChange}
              >
                Price
              </TableHeadSort>
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {sortedProducts.map((product) => (
            <TableRow key={product.name}>
              <TableCell className="text-foreground">{product.name}</TableCell>
              <TableCell className="text-foreground-lighter">{product.category}</TableCell>
              <TableCell className="hidden md:table-cell text-foreground-muted">
                {product.description}
              </TableCell>
              <TableCell className="text-right">${product.price.toFixed(2)}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Card>
  )
}