README

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

• 🎨 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

Desktop View (Normal Table)

Mobile View (Card Layout)

Featured Field with Custom Color

Requirements

• PHP 8.1 or higher
• Laravel 10.x or 11.x
• Filament 3.x or 4.x

Installation

Install the package via composer:

composer require mobile-cards/filament-mobile-table

Automatic Setup

The package will automatically register itself via Laravel's package discovery.

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)

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

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

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

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

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

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

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

Responsive Behavior

• Desktop (≥ 1024px): Normal Filament table
• Tablet (640px - 1023px): Card grid (configurable columns)
• Mobile (< 640px): Single column card layout

Feature Preservation

All Filament table features work in card mode:

• ✅ Sorting
• ✅ Searching
• ✅ Filtering
• ✅ Actions (View, Edit, Delete)
• ✅ Bulk Actions
• ✅ Pagination
• ✅ Record selection

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

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

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

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

Check that the column name matches exactly (case-sensitive):

->mobileCardFeatured('price')  // Column must be named 'price'
->columns([
    TextColumn::make('price'),  // ✅ Matches
])

Changelog

Please see CHANGELOG for recent changes.

Contributing

Contributions are welcome! Please see CONTRIBUTING for details.

Security

If you discover any security issues, please email security@example.com.

Credits

• Süleyman Ardıç

License

The MIT License (MIT). Please see License File for more information.