Filament HUB
Hero background

Table tabs

Transform your data tables with intelligent status-based filtering that goes far beyond basic pagination. Filament's status tabs create intuitive navigation experiences that help users quickly find exactly what they're looking for, whether it's active customers, pending orders, or draft posts. These powerful filtering mechanisms combine visual appeal with functional efficiency, turning overwhelming data sets into organized, scannable information that drives user engagement and productivity.

# Basic status filtering with query scoping

Basic status filtering with query scoping

Create clean, intuitive filters that automatically modify your table's underlying query based on user selection. Each tab acts as a pre-configured filter that eliminates the need for complex filter dropdowns while providing instant visual feedback about data segments.

// List class
class ListCategories extends ListRecords
{
    // ...

    public function getTabs(): array
    {
        return [
            'all' => Tab::make(),
            'active' => Tab::make()
                ->modifyQueryUsing(fn (Builder $query) => 
                    // ...
                ),
            'inactive' => Tab::make('Inactive Categories')
                ->modifyQueryUsing(fn (Builder $query) => 
                    // ...
                ),
        ];
    }
}

# Icon-enhanced status tabs

Icon-enhanced status tabs

Add meaningful visual indicators that help users quickly identify tab purposes without reading labels. Icons create faster cognitive processing and improved accessibility, especially useful in multi-language environments or when space is limited.

public function getTabs(): array
{
    return [
        'all' => Tab::make('All Adjustments')
            ->icon('heroicon-m-clipboard-document-list'),
        'increase' => Tab::make('Stock Increases')
            ->icon('heroicon-m-arrow-trending-up')
            ->modifyQueryUsing(function (Builder $query) {
                // ...
            }),
        'decrease' => Tab::make('Stock Reductions')
            ->icon('heroicon-m-arrow-trending-down')
            ->modifyQueryUsing(function (Builder $query) {
                // ...
            }),
        'correction' => Tab::make('Corrections')
            ->icon('heroicon-m-wrench-screwdriver')
            ->modifyQueryUsing(function (Builder $query) {
                // ...
            }),
    ];
}

# Real-time badge count displays

Real-time badge count displays

Show live record counts that update automatically as data changes, providing immediate insight into data distribution across different statuses. These dynamic indicators help users understand data volume at a glance and make informed decisions about which tab to explore.

public function getTabs(): array
{
    return [
        'all' => Tab::make('All Adjustments')
            ->badge(StockAdjustment::count()),
        'increase' => Tab::make('Stock Increases')
            ->badge(StockAdjustment::where('type', 'increase')->count())
            ->modifyQueryUsing(function (Builder $query) {
                // ...
            }),
        'decrease' => Tab::make('Stock Reductions')
            ->badge(StockAdjustment::where('type', 'decrease')->count())
            ->modifyQueryUsing(function (Builder $query) {
                // ...
            }),
        'correction' => Tab::make('Corrections')
            ->badge(StockAdjustment::where('type', 'correction')->count())
            ->modifyQueryUsing(function (Builder $query) {
                // ...
            }),
    ];
}