shadcn.io is not affiliated with official shadcn/ui
Advanced Filters CRUD Block for React Aria
A CRM's contract filter built from rules, with a live match count and saved views you can apply, update with the current rules, rename in place and delete with Undo; a changed rule marks the applied view Modified.
Installation
Overview
Let a filter be something people keep, change and throw away, with this saved-views block for React with React Aria. A hairline frame with a plus mark on each corner splits into two panes. At the start is a rule builder over twelve contracts: a Segment Group that says whether All of or Any of the rules must match, and a rule per row made of a field (Status, Annual value, Renews, Account, Owner), an operator that fits the field's type and a value control that fits it too, a Native Select, a text or number Input or a date, with Add rule and Remove. Below it the matching contracts list follows every change, and the status line says "5 of 12 contracts match". At the end, Save as view asks a name (unique, the only Shine Button) and keeps the current rules. A view can be Applied, which loads its rules; Updated with the current rules; renamed where it sits with an Editable; and deleted, with "Deleted Big accounts." in the foot beside Undo. Change a rule after applying a view and it is marked Modified. The bands are ruled by Guides and deleting every view shows an Empty state. For CRMs, ticket queues, reports and any list people filter the same way twice.
FAQ
How do I fill it with my own records and fields?
Edit CONTRACTS (an account, owner, renews date, status and value), FIELDS (the fields a rule can use, each with a kind of choice, number, date or text and its options) and OPS (the operators each kind offers). VIEWS holds the saved views. Rules are checked by passes, one small function per operator, and everything on screen is derived from the contracts and the rules.
How are the rules combined and what if a value is empty?
With All of, a contract must pass every rule; with Any of, one is enough. A rule with no value is ignored, which is why the builder says so, and a rule with no rules at all matches every contract. Changing a rule's field resets its operator and value to ones that fit, so a number operator never meets a text value.
When is a view marked Modified, and what does Update do?
After you apply a view its rules are copied into the builder. If the builder's match mode, fields, operators or values then differ from the view's, the view reads "Applied, Modified" and its Update button becomes usable; Update replaces the view's rules with the current ones and clears the mark. Update is a guarded button: pressing it on another view says to apply that view and change a rule first.
What does Undo restore?
The last deleted view, along with which view was applied at the time. Saving, applying, updating or renaming a view replaces that Undo. Nothing times out.
What stays local, and how do I wire a real save?
The views and rules live in state in this tab and a reload brings the original three views back; nothing is queried. In your app send the rules of a view to your API as data, run the filter on the server, and replace matching with its answer. Keep the rules as plain data so a saved view can be shared by link.