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? (30 h 50 min)

You also get:

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

Already a member? Login here

Comments & Discussion

P
Pavel ✓ Link copied!

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?

P
Pavel ✓ Link copied!

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

OB
Oscar Berrocal ✓ Link copied!

Get only the pipelines that have clients:

$pipelineStages = PipelineStage::whereHas('customers')
        ->orderBy('position')
        ->withCount('customers')
        ->get();
A
anjanesh ✓ Link copied!

I found this redundant :

->modifyQueryUsing(function ($query) use ($pipelineStage) {
return $query->where('pipeline_stage_id', $pipelineStage->id);
})
M
Modestas ✓ Link copied!

Why?

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

A
anjanesh ✓ Link copied!

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.

M
Modestas ✓ Link copied!

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

A
anjanesh ✓ Link copied!

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.