PHPackages optimistdigital/nova-detached-filters - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Search & Filtering](/categories/search) 4. / 5. optimistdigital/nova-detached-filters ActiveLibrary[Search & Filtering](/categories/search) optimistdigital/nova-detached-filters ===================================== This Laravel Nova package allows you to detach filters from the filter dropdown 3.0.1(1y ago)64235.5k↓17.1%27[2 PRs](https://github.com/outl1ne/nova-detached-filters/pulls)MITPHPPHP >=8.0.0CI failing Since Oct 5Pushed 8mo ago5 watchersCompare [ Source](https://github.com/outl1ne/nova-detached-filters)[ Packagist](https://packagist.org/packages/optimistdigital/nova-detached-filters)[ RSS](/packages/optimistdigital-nova-detached-filters/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (5)Versions (25)Used By (0) Nova Detached Filters ===================== [](#nova-detached-filters) [![Latest Version on Packagist](https://camo.githubusercontent.com/3c927ecf921bfd771ef8818917c3802e9274786d77db24df4a4e14b3407da777/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f75746c316e652f6e6f76612d64657461636865642d66696c746572732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/outl1ne/nova-detached-filters)[![Total Downloads](https://camo.githubusercontent.com/4e83ea48d8f10f5efc3a84b583e22833032cc380a7cc3ebbdcbcbe1a9c6093a0/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6f75746c316e652f6e6f76612d64657461636865642d66696c746572732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/outl1ne/nova-detached-filters) This [Laravel Nova](https://nova.laravel.com/) package allows you to place filters in Nova cards detached from the filter dropdown. Features -------- [](#features) - Saving filter state - Reset all and single filters - Customizable - Change width of individual filter - Create columns for stacked filters Screenshots ----------- [](#screenshots) [![Large Card](docs/Large.png)](docs/Large.png) [![Small Cards](docs/Small.png)](docs/Small.png) Installation ------------ [](#installation) Install the package in a Laravel Nova project via Composer: ``` composer require outl1ne/nova-detached-filters ``` Usage ----- [](#usage) Pass the filters you wish to detach from the filter menu and show on a card to `NovaDetachedFilters` class. ``` use Outl1ne\NovaDetachedFilters\NovaDetachedFilters; public function filters() { return $this->myFilters(); } public function cards() { return [ new NovaDetachedFilters($this->myFilters()), ]; } protected function myFilters() { return [ new BooleanFilter(), new SelectFilter(), new PillFilter(), // ... ]; } ``` HasDetachedFilters ------------------ [](#hasdetachedfilters) If you only wish to show some filters on `DetachedFilters` card, you must use `HasDetachedFilters` trait. ``` use Outl1ne\NovaDetachedFilters\NovaDetachedFilters; use \Outl1ne\NovaDetachedFilters\HasDetachedFilters; class ExampleResource extends Resource { use HasDetachedFilters; // Needs to have this trait public function cards() { return [ new NovaDetachedFilters([ new SelectFilter, // Showed only on card new SelectFilter2, // Showed both in dropdown menu and on card ]), ]; } public function filters() { return [ new SelectFilter2, // Showed both in dropdown menu and on card new SelectFilter3 // Shown only in dropdown menu ]; } } ``` Customization ------------- [](#customization) ### Widths [](#widths) You can define the width of the filter using `withMeta()`. To see available width options, check out [Tailwind width classes](https://tailwindcss.com/docs/width#app) ``` public function cards(Request $request) { return [ new NovaDetachedFilters([ (new SelectFilter())->withMeta(['width' => 'w-1/3']), (new AnotherSelectFilter())->withMeta(['width' => 'w-2/3']), ]), ]; } ``` Define the width of the card if you wish to have multiple filter cards side-by-side. **Width classes should be passed without `w-` in front of it.** ``` public function cards(Request $request) { return [ (new NovaDetachedFilters([ new SelectFilter(), new AnotherSelectFilter() ]))->width('1/3'), (new NovaDetachedFilters([ new SelectFilter(), new AnotherSelectFilter() ]))->width('2/3'), ]; } ``` ### Resetting filter values [](#resetting-filter-values) If you have bigger filters that take longer to clear manually, you can define `withReset` in filters metadata, that will render a button to easily clear the filters value without affecting other filters. ``` public function cards(Request $request) { return [ new NovaDetachedFilters([ (new SelectFilter())->withMeta(['withReset' => true]), ]), ]; } ``` If you want to clear all filters, you can call `withReset()` on `NovaDetachedFilters` class. This will render a button on the top-left corner that will clear all filter values. ``` public function cards(Request $request) { return [ (new NovaDetachedFilters([ new SelectFilter(), ]))->withReset(), ]; } ``` ### Storing filter state [](#storing-filter-state) When you are working with multiple resources and large group of filters, assigning them every time you navigate is a hassle. You can call `persistFilters()` function on `NovaDetachedFilters` that will render a lock button top-right corner of the card. Upon clicking the button, the lock will turn green stating that current filters are saved to `localStorage`. ArgumentDefaultDescriptionpersitFilters`true`Defines whether persist filters button should be shown.isPersistingDefault`false`Optionally define whether filters should be persisted by default``` public function cards(Request $request) { return [ (new NovaDetachedFilters([ new SelectFilter(), ]))->persistFilters(), ]; } ``` ### Collapsing card [](#collapsing-card) If you want to allow collapsing filter card you can call `withToggle()` on`NovaDetachedFilters`. By default, this is `false`. ``` public function cards(Request $request) { return [ (new NovaDetachedFilters([ new SelectFilter(), ]))->withToggle(), ]; } ``` ### Columns [](#columns) When working with large boolean filters or pill filters that are the height of multiple regular filters, you can wrap filters inside `DetachedFiltersColumn` to easily wrap them in columns. `DetachedFilterColumn` class takes two arguments `$filters` and `$width`. Width of the column will default to `w-auto` if not passed. Example of this can be seen in [Screenshots section](#Screenshots) ``` public function cards(Request $request) { return [ new NovaDetachedFilters([ new BooleanFilter(), new DetachedFilterColumn([ new SelectFilter(), new SelectFilter(), new SelectFilter(), new SelectFilter() ], 'w-2/3'), ]), ]; } ``` ### Demo [](#demo) You can preview the application via workbench by running the following commands on your local machine. This will assume you have installed the required software on your pc. ``` composer install composer serve ``` Credits ------- [](#credits) - [Kaspar Rosin](https://github.com/kasparrosin) License ------- [](#license) Nova Detached Filters is open-sourced software licensed under the [MIT license](LICENSE.md). ### Health Score 51 — FairBetter than 96% of packages Maintenance52 Moderate activity, may be stable Popularity48 Moderate usage in the ecosystem Community21 Small or concentrated contributor base Maturity69 Established project with proven stability Bus Factor1 Top contributor holds 58.5% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~72 days Recently: every ~147 days Total 23 Last Release 466d ago Major Versions 1.1.0 → 2.0.02022-06-29 2.1.0 → 3.0.02024-12-18 PHP version history (2 changes)1.0.0PHP >=7.1.0 2.0.0PHP >=8.0.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/5c80ca2be0e3f88f4422fae771026154c71332ad8b4dde5ea4fd41807dbbabba?d=identicon)[KasparRosin](/maintainers/KasparRosin) --- Top Contributors [![KasparRosin](https://avatars.githubusercontent.com/u/33309407?v=4)](https://github.com/KasparRosin "KasparRosin (48 commits)")[![Tarpsvo](https://avatars.githubusercontent.com/u/2018660?v=4)](https://github.com/Tarpsvo "Tarpsvo (26 commits)")[![ndrez-outl1ne](https://avatars.githubusercontent.com/u/117165508?v=4)](https://github.com/ndrez-outl1ne "ndrez-outl1ne (2 commits)")[![maherelgamil](https://avatars.githubusercontent.com/u/6294478?v=4)](https://github.com/maherelgamil "maherelgamil (2 commits)")[![LorenzoSapora](https://avatars.githubusercontent.com/u/25519274?v=4)](https://github.com/LorenzoSapora "LorenzoSapora (2 commits)")[![eugenefvdm](https://avatars.githubusercontent.com/u/1836436?v=4)](https://github.com/eugenefvdm "eugenefvdm (1 commits)")[![zsoltjanes](https://avatars.githubusercontent.com/u/7995436?v=4)](https://github.com/zsoltjanes "zsoltjanes (1 commits)") --- Tags laravelfiltercardnovaPersist ### Code Quality Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/optimistdigital-nova-detached-filters/health.svg) ``` [![Health](https://phpackages.com/badges/optimistdigital-nova-detached-filters/health.svg)](https://phpackages.com/packages/optimistdigital-nova-detached-filters) ``` ### Alternatives [outl1ne/nova-detached-filters This Laravel Nova package allows you to detach filters from the filter dropdown 64343.5k](/packages/outl1ne-nova-detached-filters)[nrml-co/nova-big-filter A nice looking filter menu thats always open. 35310.9k](/packages/nrml-co-nova-big-filter)[outl1ne/nova-multiselect-filter Multiselect filter for Laravel Nova. 45802.7k3](/packages/outl1ne-nova-multiselect-filter)[digital-creative/nova-mega-filter Allows you to control the columns and filters shown on your nova resources. 87159.3k](/packages/digital-creative-nova-mega-filter)[awesome-nova/filter-card A Laravel Nova card. 25126.1k](/packages/awesome-nova-filter-card)[outl1ne/nova-input-filter An input filter for Laravel Nova 24822.7k](/packages/outl1ne-nova-input-filter) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)