Filter Panel

Component

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Filter Panel to your project and fits it to your theme.

Code

How Filter Panel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}