PHPackages slym758/filament-mobile-table - 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. slym758/filament-mobile-table ActiveLibrary[Utility & Helpers](/categories/utility) slym758/filament-mobile-table ============================= Mobile responsive card view for Filament tables with featured fields, layouts, and colors v1.1.0(2mo ago)8163↓50%[2 issues](https://github.com/slym758/filament-mobile-table/issues)MITCSSPHP ^8.1|^8.2|^8.3 Since Dec 2Pushed 2mo agoCompare [ Source](https://github.com/slym758/filament-mobile-table)[ Packagist](https://packagist.org/packages/slym758/filament-mobile-table)[ RSS](/packages/slym758-filament-mobile-table/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (4)Versions (4)Used By (0) Filament Mobile Table Cards =========================== [](#filament-mobile-table-cards) [![Latest Version on Packagist](https://camo.githubusercontent.com/6ba754cf8f70399be559fc0102c13d4fa391639e08511e661069b3cc4ddd3742/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d6f62696c652d63617264732f66696c616d656e742d6d6f62696c652d7461626c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/mobile-cards/filament-mobile-table)[![Total Downloads](https://camo.githubusercontent.com/9e988803ed12d6d6e7260dac08f23e041f09a7dbdd7378fa74a2fe0301b35683/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d6f62696c652d63617264732f66696c616d656e742d6d6f62696c652d7461626c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/mobile-cards/filament-mobile-table) Transform your Filament tables into beautiful, responsive card layouts on mobile devices. Automatically converts table rows to cards with featured fields, custom colors, and multiple layout options. Features -------- [](#features) - 🎨 **Featured Fields** - Highlight important data with gradient colors (20+ Tailwind colors) - 🎭 **Multiple Layouts** - Default, Compact, and Minimal card styles - 🌈 **Full Color Palette** - Supports all Tailwind CSS colors - πŸ“± **Responsive Grid** - Configurable 1-3 column layouts for tablets - πŸŒ“ **Dark Mode** - Full dark mode support out of the box - ⚑ **Zero Config** - Works immediately with one method call - πŸ”§ **Filament v4** - β™Ώ **Accessible** - Maintains all Filament table features (sorting, actions, bulk actions) Screenshots ----------- [](#screenshots) *Desktop View (Normal Table)*[![Desktop](screenshots/desktop.png)](screenshots/desktop.png) *Mobile View (Card Layout)*[![Mobile](screenshots/mobile.png)](screenshots/mobile.png) *Featured Field with Custom Color*[![Featured](screenshots/featured.png)](screenshots/featured.png) Requirements ------------ [](#requirements) - PHP 8.1 or higher - Laravel 10.x or 11.x - Filament 3.x or 4.x Installation ------------ [](#installation) Install the package via composer: ``` composer require mobile-cards/filament-mobile-table ``` ### Automatic Setup [](#automatic-setup) The package will automatically register itself via Laravel's package discovery. ### Manual Setup (Optional) [](#manual-setup-optional) If auto-discovery is disabled, add the service provider to `config/app.php`: ``` 'providers' => [ // ... MobileCards\FilamentMobileTable\FilamentMobileTableServiceProvider::class, ], ``` ### Admin Panel Provider (Not Required) [](#admin-panel-provider-not-required) **No additional configuration needed!** The plugin automatically registers its assets. However, if you want to manually register assets in your `AdminPanelProvider`, you can: ``` use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... other config ->plugins([ // Plugin automatically loads, no registration needed ]); } ``` Usage ----- [](#usage) ### Basic Implementation [](#basic-implementation) The simplest way to enable mobile cards: ``` use Filament\Tables\Table; use Filament\Tables\Columns\TextColumn; public static function table(Table $table): Table { return $table ->mobileCards() // Enable mobile cards ->columns([ TextColumn::make('name'), TextColumn::make('email'), TextColumn::make('status'), ]); } ``` That's it! Your table will now display as cards on mobile devices (screens < 1024px). ### Featured Field [](#featured-field) Highlight an important field with a colored gradient background: ``` public static function table(Table $table): Table { return $table ->mobileCards() ->mobileCardFeatured('price', 'emerald') // Column name, color ->columns([ TextColumn::make('product_name'), TextColumn::make('price')->money('TRY'), TextColumn::make('stock'), ]); } ``` **Default color:** `blue` (if no color specified) ### Available Colors [](#available-colors) All Tailwind CSS colors are supported: `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`, `slate`, `gray`, `zinc`, `neutral`, `stone` ### Layout Options [](#layout-options) Choose from 3 different card layouts: ``` public static function table(Table $table): Table { return $table ->mobileCards([ 'layout' => 'compact', // default, compact, minimal 'columns' => 2, // Tablet columns: 1, 2, or 3 ]) ->columns([...]); } ``` **Layout Types:** 1. **default** - Standard card with labels and values side-by-side 2. **compact** - Smaller padding and font sizes for more content density 3. **minimal** - Clean layout without field labels ### Tablet Column Grid [](#tablet-column-grid) Control how many columns appear on tablet devices (640px - 1024px): ``` ->mobileCards([ 'columns' => 1, // Single column (default: 2) ]) ->mobileCards([ 'columns' => 3, // Three columns for larger tablets ]) ``` ### Complete Example [](#complete-example) ``` use Filament\Tables\Table; use Filament\Tables\Columns\TextColumn; use Filament\Tables\Columns\BadgeColumn; public static function table(Table $table): Table { return $table ->mobileCards([ 'layout' => 'default', 'columns' => 2, ]) ->mobileCardFeatured('total_price', 'green') ->columns([ TextColumn::make('order_number') ->label('Order #') ->searchable(), TextColumn::make('customer.name') ->label('Customer'), TextColumn::make('total_price') ->money('TRY') ->sortable(), BadgeColumn::make('status') ->colors([ 'success' => 'completed', 'warning' => 'pending', 'danger' => 'cancelled', ]), TextColumn::make('created_at') ->dateTime('d/m/Y H:i'), ]) ->filters([...]) ->actions([...]) ->bulkActions([...]); } ``` How It Works ------------ [](#how-it-works) ### Responsive Behavior [](#responsive-behavior) - **Desktop (β‰₯ 1024px):** Normal Filament table - **Tablet (640px - 1023px):** Card grid (configurable columns) - **Mobile (< 640px):** Single column card layout ### Feature Preservation [](#feature-preservation) All Filament table features work in card mode: - βœ… Sorting - βœ… Searching - βœ… Filtering - βœ… Actions (View, Edit, Delete) - βœ… Bulk Actions - βœ… Pagination - βœ… Record selection ### CSS Classes [](#css-classes) The plugin adds these classes for custom styling: ``` .fi-mobile-card-table /* Main table wrapper */ .fi-mobile-layout-{name} /* Layout modifier */ [data-featured="true"] /* Featured field */ [data-featured-color="{color}"] /* Color attribute */ ``` Customization ------------- [](#customization) ### Override Styles [](#override-styles) Create a custom CSS file and register it in your panel provider: ``` use Filament\Support\Assets\Css; public function panel(Panel $panel): Panel { return $panel ->assets([ Css::make('custom-mobile-cards', resource_path('css/custom-mobile-cards.css')), ]); } ``` Example custom CSS: ``` @media (max-width: 1024px) { .fi-mobile-card-table tr { border-radius: 16px !important; /* More rounded corners */ } .fi-mobile-card-table td[data-featured="true"] { padding: 2rem !important; /* More padding on featured */ } } ``` Troubleshooting --------------- [](#troubleshooting) ### Cards not showing on mobile [](#cards-not-showing-on-mobile) 1. Clear your browser cache 2. Run: `php artisan filament:cache-components` 3. Check browser console for JavaScript errors ### Styles not applying [](#styles-not-applying) 1. Clear Laravel cache: `php artisan cache:clear` 2. Clear view cache: `php artisan view:clear` 3. Rebuild assets: `npm run build` ### Featured field not highlighted [](#featured-field-not-highlighted) Check that the column name matches exactly (case-sensitive): ``` ->mobileCardFeatured('price') // Column must be named 'price' ->columns([ TextColumn::make('price'), // βœ… Matches ]) ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for recent changes. Contributing ------------ [](#contributing) Contributions are welcome! Please see [CONTRIBUTING](CONTRIBUTING.md) for details. Security -------- [](#security) If you discover any security issues, please email . Credits ------- [](#credits) - [SΓΌleyman ArdΔ±Γ§](https://github.com/slym758) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 43 β€” FairBetter than 91% of packages Maintenance81 Actively maintained with recent releases Popularity20 Limited adoption so far Community6 Small or concentrated contributor base Maturity52 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 ~47 days Total 3 Last Release 66d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/ca4318ff39536aa8b86e6bd41e6494a46875c191cbd5e430f03ffda9423800dd?d=identicon)[slym758](/maintainers/slym758) --- Top Contributors [![slym758](https://avatars.githubusercontent.com/u/108395841?v=4)](https://github.com/slym758 "slym758 (6 commits)") --- Tags laravelmobileresponsivetablefilamentcards ### Embed Badge ![Health badge](/badges/slym758-filament-mobile-table/health.svg) ``` [![Health](https://phpackages.com/badges/slym758-filament-mobile-table/health.svg)](https://phpackages.com/packages/slym758-filament-mobile-table) ``` ### Alternatives [pboivin/filament-peek Full-screen page preview modal for Filament 253319.6k12](/packages/pboivin-filament-peek)[dotswan/filament-map-picker Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications. 124139.3k2](/packages/dotswan-filament-map-picker)[creagia/filament-code-field A Filamentphp input field to edit or view code data. 58289.3k3](/packages/creagia-filament-code-field)[jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12247.8k](/packages/jibaymcs-filament-tour)[aymanalhattami/filament-context-menu context menu (right click menu) for filament 9838.0k](/packages/aymanalhattami-filament-context-menu)[schmeits/filament-character-counter This is a Filament character counter TextField and Textarea form field for Filament v4 and v5 33184.7k6](/packages/schmeits-filament-character-counter) PHPackages Β© 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)