Skip to main content

Customers by Stage: Tabs with Numbers

Premium
3 min read

Since our Customer table can have thousands of entries - we need a way to filter them by something. In our case, we will create tabs to group them by their Pipeline Stage like this:

In this lesson, we will do the following:

  • Dynamically create tabs for each Pipeline Stage
  • Create a new tab called All to show all Customers
  • Add counters to each tab to show how many Customers are in each group

Let's get started!


Creating the Tabs

To make tabs, we will modify...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (36 h 00 min)

You also get:

61 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Pavel avatar

Thank you for the very useful tutorials. I have a question. How to control the visibility of a table column depending on the active tab?

Pavel avatar

I found a solution ->visible(fn ($livewire) => $livewire->activeTab !== 'all')

Oscar Berrocal avatar

Get only the pipelines that have clients:

$pipelineStages = PipelineStage::whereHas('customers')
        ->orderBy('position')
        ->withCount('customers')
        ->get();
anjanesh avatar

I found this redundant :

->modifyQueryUsing(function ($query) use ($pipelineStage) {
return $query->where('pipeline_stage_id', $pipelineStage->id);
})
Modestas avatar

Why?

This applies the pipeline_stage_id filter on the selected tab :) Without it - it wouldn't filter the records once you click, no?

anjanesh avatar

I think I've not understood what it does then because

$tabs[str($pipelineStage->name)->slug()->toString()] = Tab::make($pipelineStage->name)
->badge($pipelineStage->customers_count)

is returning the correct customer count for each pipeline stage anyway.

Modestas avatar

So there's a few functions that this does. Especially if we are talking about tags:

  1. The ->badge() just displays the amount of people with that status
  2. The ->modifyQueryUsing() allows you to click on the tab and filter records based on the filter

That way, you don't just get plain information, but also an additional filter on the table

anjanesh avatar

Oh I see - this was new to me - thanks for the clarification.

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.