PHPackages sinensia/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. [Utility & Helpers](/categories/utility) 4. / 5. sinensia/nova-detached-filters ActiveLibrary[Utility & Helpers](/categories/utility) sinensia/nova-detached-filters ============================== Enhanced Laravel Nova detached filters with tabs and filter badges. v1.0.12(3mo ago)0341MITPHPPHP >=8.0 Since Dec 18Pushed 3mo agoCompare [ Source](https://github.com/SINENSIA/nova-detached-filters)[ Packagist](https://packagist.org/packages/sinensia/nova-detached-filters)[ RSS](/packages/sinensia-nova-detached-filters/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (6)Versions (17)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 Extended Features (by SINENSIA) ------------------------------- [](#extended-features-by-sinensia) - Group filters into tabbed sections - Active filter count badge per tab (optional) Screenshots ----------- [](#screenshots) [![Large Card](docs/Large.png)](docs/Large.png) [![Small Cards](docs/Small.png)](docs/Small.png) [![Tabs](docs/tabs.png)](docs/tabs.png) Installation ------------ [](#installation) Install the package in a Laravel Nova project via Composer: ``` composer require sinensia/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'), ]), ]; } ``` ### Grouping Filters into Tabs [](#grouping-filters-into-tabs) You can optionally group filters into tabs using `DetachedFilterTabGroup`: ``` use Outl1ne\NovaDetachedFilters\DetachedFilterTabGroup; new NovaDetachedFilters([ new DetachedFilterTabGroup('Main Info', [ new MyFilter(), new AnotherFilter(), ]), new DetachedFilterTabGroup('Advanced Search', [ new MyOtherFilter(), ]), ]) ``` Each `DetachedFilterTabGroup` will render a separate tab in the UI. You can combine tabbed and non-tabbed filters freely. #### Show Active Filter Badge (default: true) [](#show-active-filter-badge-default-true) A badge will appear on each tab indicating the number of active filters. You can disable this feature: ``` ->withMeta(['showFilterBadge' => false]) ``` --- ### Filter Column Grouping (legacy usage) [](#filter-column-grouping-legacy-usage) You can still use `DetachedFilterColumn` to organize filters in columns: ``` use Outl1ne\NovaDetachedFilters\DetachedFilterColumn; new NovaDetachedFilters([ new DetachedFilterColumn([ new MyFilter(), new AnotherFilter(), ], 'w-1/2') ]) ``` --- ### Tailwind Width Control [](#tailwind-width-control) You can pass custom Tailwind widths via `withMeta(['width' => 'w-1/3'])` per filter. These will be applied correctly in responsive grid layouts. --- ### Development [](#development) To rebuild assets: ``` npm install npm run dev ``` --- ### License [](#license) MIT © [Outl1ne](https://github.com/outl1ne) / Extended by [Sinensia](https://github.com/SINENSIA) with tab support. ### 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) ### Health Score 41 — FairBetter than 89% of packages Maintenance78 Regular maintenance activity Popularity13 Limited adoption so far Community12 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 55.7% 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 ~23 days Recently: every ~0 days Total 13 Last Release 113d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/f26994a328c68329ab2f4fd07d0c967855ef5b43b0fd8a60a9b6101eafcded7c?d=identicon)[SINENSIA](/maintainers/SINENSIA) --- Top Contributors [![KasparRosin](https://avatars.githubusercontent.com/u/33309407?v=4)](https://github.com/KasparRosin "KasparRosin (44 commits)")[![Tarpsvo](https://avatars.githubusercontent.com/u/2018660?v=4)](https://github.com/Tarpsvo "Tarpsvo (27 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 laraveluitailwindfiltersnovauxtabsnova cardnova-component ### Code Quality TestsPHPUnit Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/sinensia-nova-detached-filters/health.svg) ``` [![Health](https://phpackages.com/badges/sinensia-nova-detached-filters/health.svg)](https://phpackages.com/packages/sinensia-nova-detached-filters) ``` ### Alternatives [dillingham/nova-attach-many Attach Many Nova field 2712.0M2](/packages/dillingham-nova-attach-many)[sbine/route-viewer A Laravel Nova tool to view your registered routes. 57215.9k](/packages/sbine-route-viewer)[markwalet/nova-modal-response A Laravel Nova asset for Modal responses on an action. 14720.0k](/packages/markwalet-nova-modal-response)[stepanenko3/nova-cards A Laravel Nova info cards. 33143.0k](/packages/stepanenko3-nova-cards)[digital-creative/resource-navigation-link Create links to internal or external resources. 1044.0k](/packages/digital-creative-resource-navigation-link) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)