A popover filter builder for a data table or list — add field/operator/value condition rows, choose match-all or match-any, and apply the filter as a draft that only commits on Apply.
"use client";
import FilterPanel from "@/components/ui/filter-panel";
import { useState } from "react";
const FIELDS = [
{
id: "status",
label: "Status",
kind: "select",
options: [
{ value: "open", label: "Open", tone: "sky" },
{ value: "in_progress", label: "In progress", tone: "amber" },
{ value: "resolved", label: "Resolved", tone: "emerald" },
{ value: "closed", label: "Closed", tone: "slate" },
],
},
{
id: "priority",
label: "Priority",
kind: "select",
options: [
{ value: "low", label: "Low", tone: "slate" },
{ value: "medium", label: "Medium", tone: "amber" },
{ value: "high", label: "High", tone: "rose" },
],
},
{ id: "assignee", label: "Assignee", kind: "text" },
{ id: "ticketCount", label: "Replies", kind: "number" },
{ id: "createdAt", label: "Created", kind: "date" },
{ id: "isArchived", label: "Archived", kind: "bool" },
];
export default function FilterPanelDemo() {
const [conditions, setConditions] = useState([
{ field: "status", op: "contains", value: "open,in_progress" },
{ field: "priority", op: "is", value: "high" },
]);
const [match, setMatch] = useState("all");
return (
<div className="flex w-full items-start justify-center bg-background p-10">
<FilterPanel
fields={FIELDS}
conditions={conditions}
match={match}
onApply={(next, nextMatch) => {
setConditions(next);
setMatch(nextMatch);
}}
title="Tickets"
/>
</div>
);
}