Skip to main content

Index tabs

Index tabs are tabs that are used on the Resource Index page. These tabs will apply specific sorting and filters to the table.

Creating an Index Tab​

You can create an Index Tab:

class HighPerformers extends IndexTab
{
    public function name(): string
    {
        return __('High performers');
    }

    public function searchColumns(): array
    {
        return ['price' => ['>', 250]];
    }

    public function query(): Builder
    {
        return Employee::where('price', '>', 250);
    }
}

Query & Search columns​

The query method is only used to display a little (badge) number above each tab and has no impact on the actual filter.

The searchColumns however does get applied in the table. The value of each field should be compatible with the filterUsing from each field.

Applying sorting​

You can also apply a sort & sort direction:

public function ascending(): ?bool
{
    return false;
}

public function sortBy(): ?string
{
    return 'price';
}

Registering an Index Tab​

You can register your Index Tab in your resource:

public function indexTabs(): IndexTabCollection
{
    return new IndexTabCollection(
        new LowPerformers(),
        new HighPerformers()
    );
}

Tabs with no filtering​

Sometimes you may need a tab that has no filtering whatsoever:

public function indexTabs(): IndexTabCollection
{
    return new IndexTabCollection(
        new All($this->model()),
        new LowPerformers(),
        new HighPerformers()
    );
}

Show result label in tab​

If you want to show a label on the index tab with the number of results of the query you can set the $showLabel variable to true, this will show a badge with the number of results.

class LowPerformers extends IndexTab
{
    /**
     * Show or hide Label on indexTab
     * 
     * @return bool
     */
    public bool $showLabel = true;