PHPackages workup/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. workup/nova-detached-filters ActiveLibrary[Search & Filtering](/categories/search) workup/nova-detached-filters ============================ This Laravel Nova package allows you to detach filters from the filter dropdown 2.0.3.002(2y ago)01.3kMITPHPPHP >=8.0 Since Oct 5Pushed 2y agoCompare [ Source](https://github.com/workupsrl/nova-detached-filters)[ Packagist](https://packagist.org/packages/workup/nova-detached-filters)[ RSS](/packages/workup-nova-detached-filters/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (3)Dependencies (4)Versions (20)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 (forked from optimistdigital). 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 workup/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 Workup\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 Workup\NovaDetachedFilters\NovaDetachedFilters; use Workup\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'), ]), ]; } ``` 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 31 — LowBetter than 68% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity14 Limited adoption so far Community13 Small or concentrated contributor base Maturity67 Established project with proven stability Bus Factor1 Top contributor holds 57.6% 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 ~59 days Recently: every ~214 days Total 19 Last Release 971d ago Major Versions 1.x-dev → 2.0.3.0012023-09-05 PHP version history (3 changes)1.0.0PHP >=7.1.0 1.1.0.001PHP ^8.0 2.0.3.001PHP >=8.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/f39fbc2fe4ec64f1aa658f8b66206ce0a476d16eac277fb809b19a4c4421fcb5?d=identicon)[workup](/maintainers/workup) --- Top Contributors [![KasparRosin](https://avatars.githubusercontent.com/u/33309407?v=4)](https://github.com/KasparRosin "KasparRosin (34 commits)")[![Tarpsvo](https://avatars.githubusercontent.com/u/2018660?v=4)](https://github.com/Tarpsvo "Tarpsvo (11 commits)")[![rslanzi](https://avatars.githubusercontent.com/u/7341598?v=4)](https://github.com/rslanzi "rslanzi (5 commits)")[![rubinred](https://avatars.githubusercontent.com/u/13568158?v=4)](https://github.com/rubinred "rubinred (2 commits)")[![ndrez-outl1ne](https://avatars.githubusercontent.com/u/117165508?v=4)](https://github.com/ndrez-outl1ne "ndrez-outl1ne (2 commits)")[![LorenzoSapora](https://avatars.githubusercontent.com/u/25519274?v=4)](https://github.com/LorenzoSapora "LorenzoSapora (2 commits)")[![maherelgamil](https://avatars.githubusercontent.com/u/6294478?v=4)](https://github.com/maherelgamil "maherelgamil (2 commits)")[![eugenefvdm](https://avatars.githubusercontent.com/u/1836436?v=4)](https://github.com/eugenefvdm "eugenefvdm (1 commits)") --- Tags laravelfiltercardnovaPersist ### Code Quality TestsPHPUnit Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/workup-nova-detached-filters/health.svg) ``` [![Health](https://phpackages.com/badges/workup-nova-detached-filters/health.svg)](https://phpackages.com/packages/workup-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)[optimistdigital/nova-detached-filters This Laravel Nova package allows you to detach filters from the filter dropdown 64235.5k](/packages/optimistdigital-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) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)