filtercn 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -56,7 +56,7 @@ Here is a quick example of how to wrap your data table with the filter:
|
|
|
56
56
|
```tsx
|
|
57
57
|
"use client";
|
|
58
58
|
|
|
59
|
-
import { FilterProvider,
|
|
59
|
+
import { FilterProvider, FilterBar } from "@/components/conditional-filter";
|
|
60
60
|
import type { FilterFieldDefinition } from "@/components/conditional-filter";
|
|
61
61
|
|
|
62
62
|
// 1. Define the fields your users can filter by
|
|
@@ -72,6 +72,7 @@ const filterFields: FilterFieldDefinition[] = [
|
|
|
72
72
|
]
|
|
73
73
|
},
|
|
74
74
|
{ name: "price", label: "Budget", type: "number" },
|
|
75
|
+
{ name: "created_at", label: "Created", type: "date" }, // Now supports shadcn Calendar
|
|
75
76
|
];
|
|
76
77
|
|
|
77
78
|
export default function MyPage() {
|
|
@@ -79,17 +80,31 @@ export default function MyPage() {
|
|
|
79
80
|
<div className="p-8 space-y-4">
|
|
80
81
|
<h1 className="text-2xl font-bold">Projects</h1>
|
|
81
82
|
|
|
82
|
-
{/* 2. Wrap the
|
|
83
|
-
<FilterProvider
|
|
84
|
-
|
|
83
|
+
{/* 2. Wrap the toolbar in the provider */}
|
|
84
|
+
<FilterProvider
|
|
85
|
+
config={{
|
|
86
|
+
fields: filterFields,
|
|
87
|
+
paramStyle: "underscore",
|
|
88
|
+
allowConjunctionToggle: true, // Show AND/OR toggle
|
|
89
|
+
searchParamName: "q" // Global search param tracking
|
|
90
|
+
}}
|
|
91
|
+
>
|
|
92
|
+
<FilterBar searchPlaceholder="Search projects..." />
|
|
85
93
|
</FilterProvider>
|
|
86
94
|
|
|
87
|
-
{/* Your data table goes here */}
|
|
95
|
+
{/* Your data table goes here. It should read from the URL parameters. */}
|
|
88
96
|
</div>
|
|
89
97
|
);
|
|
90
98
|
}
|
|
91
99
|
```
|
|
92
100
|
|
|
101
|
+
### New in v0.2.0
|
|
102
|
+
- **Global Search:** `FilterBar` now includes a full-text search input with a built-in 300ms debounce.
|
|
103
|
+
- **Date Pickers:** Date fields now automatically render using the `shadcn/ui` Calendar component.
|
|
104
|
+
- **Param Prefixes:** Use `paramPrefix: "filter_"` in your config to namespace all query params.
|
|
105
|
+
- **AND/OR Conjunction:** Users can now toggle between mapping filters with `AND` or `OR` logic.
|
|
106
|
+
- **Async Comboboxes:** Full debounce support for `useFilterOptions` when fetching dynamic records from your API.
|
|
107
|
+
|
|
93
108
|
## Options
|
|
94
109
|
|
|
95
110
|
If you have modified the component files and want to reset them to their original state, or if the installation failed halfway and you want to try again, use the `--force` flag:
|