Data Tables
Pre-composed business data tables — recent transactions, CRM deal pipeline and LMS course progress.
Preview
resources/views/blocks/data-tables-deal-pipeline.blade.php
@props([
'title' => null,
'deals' => null,
])
@php
$title ??= __('Deals pipeline');
$deals ??= [
[
'name' => 'Enterprise SaaS Rollout',
'company' => 'Momentum Co.',
'initials' => 'MC',
'contact' => 'Sarah Chen',
'owner' => 'Alex Rivera',
'ownerInitials'=> 'AR',
'value' => '$48,000',
'stage' => 'Proposal',
'closeDate' => 'Jul 15, 2026',
],
[
'name' => 'SMB CRM Licence',
'company' => 'BrightEdge Ltd.',
'initials' => 'BE',
'contact' => 'Tom Walsh',
'owner' => 'Priya Nair',
'ownerInitials'=> 'PN',
'value' => '$8,500',
'stage' => 'Qualified',
'closeDate' => 'Jun 30, 2026',
],
[
'name' => 'Annual Platform Deal',
'company' => 'Vertigo Inc.',
'initials' => 'VI',
'contact' => 'Dana Kim',
'owner' => 'Alex Rivera',
'ownerInitials'=> 'AR',
'value' => '$24,500',
'stage' => 'Won',
'closeDate' => 'Jun 2, 2026',
],
[
'name' => 'Startup Starter Pack',
'company' => 'Launchpad HQ',
'initials' => 'LH',
'contact' => 'Jess Moore',
'owner' => 'Sam Torres',
'ownerInitials'=> 'ST',
'value' => '$3,200',
'stage' => 'Lead',
'closeDate' => 'Aug 1, 2026',
],
[
'name' => 'Analytics Upgrade',
'company' => 'DataSync Corp.',
'initials' => 'DS',
'contact' => 'Raj Patel',
'owner' => 'Priya Nair',
'ownerInitials'=> 'PN',
'value' => '$15,000',
'stage' => 'Proposal',
'closeDate' => 'Jul 28, 2026',
],
[
'name' => 'Legacy Migration',
'company' => 'OldStack SA',
'initials' => 'OS',
'contact' => 'Claire Bell',
'owner' => 'Sam Torres',
'ownerInitials'=> 'ST',
'value' => '$6,750',
'stage' => 'Lost',
'closeDate' => 'May 20, 2026',
],
[
'name' => 'Pro Tier Expansion',
'company' => 'Nexus Digital',
'initials' => 'ND',
'contact' => 'Owen Blake',
'owner' => 'Alex Rivera',
'ownerInitials'=> 'AR',
'value' => '$32,000',
'stage' => 'Qualified',
'closeDate' => 'Aug 12, 2026',
],
];
$stageVariant = [
'Lead' => 'outline',
'Qualified' => 'secondary',
'Proposal' => 'default',
'Won' => 'success',
'Lost' => 'destructive',
];
// Summary chips computed from deal data
$totalValue = '$137,950';
$wonCount = collect($deals)->where('stage', 'Won')->count();
$openCount = collect($deals)->whereNotIn('stage', ['Won', 'Lost'])->count();
@endphp
<x-ui.section space="xl" {{ $attributes }}>
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
<x-ui.card>
{{-- Card header --}}
<div class="flex flex-wrap items-center justify-between gap-4 border-b border-border px-6 py-4">
<h2 class="text-base font-semibold">{{ $title }}</h2>
{{-- Summary chips --}}
<div class="flex flex-wrap items-center gap-2">
<span class="inline-flex items-center gap-2 rounded-md border border-border bg-muted/50 px-4 py-2 text-xs font-medium">
<span class="text-muted-foreground">{{ __('Total value') }}</span>
<span class="tabular-nums text-foreground">{{ $totalValue }}</span>
</span>
<span class="inline-flex items-center gap-2 rounded-md border border-border bg-muted/50 px-4 py-2 text-xs font-medium">
<span class="text-muted-foreground">{{ __('Won') }}</span>
<span class="tabular-nums text-foreground">{{ $wonCount }}</span>
</span>
<span class="inline-flex items-center gap-2 rounded-md border border-border bg-muted/50 px-4 py-2 text-xs font-medium">
<span class="text-muted-foreground">{{ __('Open') }}</span>
<span class="tabular-nums text-foreground">{{ $openCount }}</span>
</span>
</div>
</div>
{{-- Table --}}
<div class="overflow-x-auto">
<x-ui.table>
<x-ui.table.header>
<x-ui.table.row>
<x-ui.table.head scope="col">{{ __('Deal / Company') }}</x-ui.table.head>
<x-ui.table.head scope="col">{{ __('Owner') }}</x-ui.table.head>
<x-ui.table.head scope="col" class="text-end">{{ __('Value') }}</x-ui.table.head>
<x-ui.table.head scope="col">{{ __('Stage') }}</x-ui.table.head>
<x-ui.table.head scope="col">{{ __('Close date') }}</x-ui.table.head>
</x-ui.table.row>
</x-ui.table.header>
<x-ui.table.body>
@foreach ($deals as $deal)
<x-ui.table.row>
{{-- Deal / Company --}}
<x-ui.table.cell>
<div class="flex items-center gap-4">
<x-ui.avatar
:fallback="$deal['initials']"
size="sm"
class="shrink-0"
:alt="$deal['company']"
/>
<div class="min-w-0">
<p class="truncate text-sm font-medium">{{ $deal['name'] }}</p>
<p class="truncate text-xs text-muted-foreground">
{{ $deal['company'] }} , {{ $deal['contact'] }}
</p>
</div>
</div>
</x-ui.table.cell>
{{-- Owner --}}
<x-ui.table.cell>
<div class="flex items-center gap-2">
<x-ui.avatar
:fallback="$deal['ownerInitials']"
size="xs"
class="shrink-0"
:alt="$deal['owner']"
/>
<span class="text-sm">{{ $deal['owner'] }}</span>
</div>
</x-ui.table.cell>
{{-- Value --}}
<x-ui.table.cell class="text-end tabular-nums text-sm font-medium">
{{ $deal['value'] }}
</x-ui.table.cell>
{{-- Stage --}}
<x-ui.table.cell>
<x-ui.badge :variant="$stageVariant[$deal['stage']] ?? 'secondary'">
{{ __($deal['stage']) }}
</x-ui.badge>
</x-ui.table.cell>
{{-- Close date --}}
<x-ui.table.cell class="text-sm text-muted-foreground whitespace-nowrap">
{{ $deal['closeDate'] }}
</x-ui.table.cell>
</x-ui.table.row>
@endforeach
</x-ui.table.body>
</x-ui.table>
</div>
</x-ui.card>
</div>
</x-ui.section>Installation
terminal
php artisan ui:add blocks/data-tables-deal-pipelineRegistry contract
Install confidence
php artisan ui:add blocks/data-tables-deal-pipeline
writes only the generated targets below. The CLI validates each file hash before writing and
prompts before replacing local changes unless --force is used.
- Version
- 1.0.4
- License
- open
- Stability
- stable
- Contract
- v1
- Foundation
- ≥ 1.0.0
| Type | Generated target |
|---|---|
| blade | resources/views/blocks/data-tables-deal-pipeline.blade.php |
Registry dependencies
avatar
badge
card
section
table
Package dependencies
composer: jml/brok:^0.2
Use with AI
A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.
data-tables-deal-pipeline.md
# Brok UI block: Deal Pipeline Table (`data-tables-deal-pipeline`)
CRM deal pipeline table with Total value / Won / Open summary chips, company avatar, owner avatar, deal value, stage badge, and close date.
Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.
## Install
```bash
php artisan ui:add blocks/data-tables-deal-pipeline
```
## Render it
```blade
<x-blocks.data-tables-deal-pipeline />
```
## Props
- `title` (mixed|null, default `null`)
- `deals` (mixed|null, default `null`)
## Use when
- Listing CRM deals in a table with total/won/open summary chips, company and owner avatars, deal value and stage badge.
- Fitting a sales dashboard that needs a scannable pipeline view rather than a generic data grid.
## Avoid when
- Use data-tables-course-progress for an LMS course-progress table instead of a sales pipeline.
## Rules
- Render the installed block with `<x-blocks.data-tables-deal-pipeline />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.
## Links
- Docs: https://brokui.dev/blocks/data-tables-deal-pipeline
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/data-tables-deal-pipeline.json
Ask about Deal Pipeline Table in
Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.
Guidance
Use when
- Listing CRM deals in a table with total/won/open summary chips, company and owner avatars, deal value and stage badge.
- Fitting a sales dashboard that needs a scannable pipeline view rather than a generic data grid.
Avoid when
- Use data-tables-course-progress for an LMS course-progress table instead of a sales pipeline.
Anti-patterns
- Do not replace semantic props with conflicting utility classes.
- Do not remove labels, focus styles, or state attributes.
Usage
Render the block as a component, passing data where useful:
resources/views/welcome.blade.php
<x-blocks.data-tables-deal-pipeline />Built from primitives
This block composes installed <brok:*> primitives and semantic design
tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by
editing CSS variables; flip the preview to RTL to confirm it mirrors.
Source
The exact, editable file ui:add writes
into your app. The preview above renders this same source — there are no preview-only blocks.
resources/views/blocks/data-tables-deal-pipeline.blade.php
@props([
'title' => null,
'deals' => null,
])
@php
$title ??= __('Deals pipeline');
$deals ??= [
[
'name' => 'Enterprise SaaS Rollout',
'company' => 'Momentum Co.',
'initials' => 'MC',
'contact' => 'Sarah Chen',
'owner' => 'Alex Rivera',
'ownerInitials'=> 'AR',
'value' => '$48,000',
'stage' => 'Proposal',
'closeDate' => 'Jul 15, 2026',
],
[
'name' => 'SMB CRM Licence',
'company' => 'BrightEdge Ltd.',
'initials' => 'BE',
'contact' => 'Tom Walsh',
'owner' => 'Priya Nair',
'ownerInitials'=> 'PN',
'value' => '$8,500',
'stage' => 'Qualified',
'closeDate' => 'Jun 30, 2026',
],
[
'name' => 'Annual Platform Deal',
'company' => 'Vertigo Inc.',
'initials' => 'VI',
'contact' => 'Dana Kim',
'owner' => 'Alex Rivera',
'ownerInitials'=> 'AR',
'value' => '$24,500',
'stage' => 'Won',
'closeDate' => 'Jun 2, 2026',
],
[
'name' => 'Startup Starter Pack',
'company' => 'Launchpad HQ',
'initials' => 'LH',
'contact' => 'Jess Moore',
'owner' => 'Sam Torres',
'ownerInitials'=> 'ST',
'value' => '$3,200',
'stage' => 'Lead',
'closeDate' => 'Aug 1, 2026',
],
[
'name' => 'Analytics Upgrade',
'company' => 'DataSync Corp.',
'initials' => 'DS',
'contact' => 'Raj Patel',
'owner' => 'Priya Nair',
'ownerInitials'=> 'PN',
'value' => '$15,000',
'stage' => 'Proposal',
'closeDate' => 'Jul 28, 2026',
],
[
'name' => 'Legacy Migration',
'company' => 'OldStack SA',
'initials' => 'OS',
'contact' => 'Claire Bell',
'owner' => 'Sam Torres',
'ownerInitials'=> 'ST',
'value' => '$6,750',
'stage' => 'Lost',
'closeDate' => 'May 20, 2026',
],
[
'name' => 'Pro Tier Expansion',
'company' => 'Nexus Digital',
'initials' => 'ND',
'contact' => 'Owen Blake',
'owner' => 'Alex Rivera',
'ownerInitials'=> 'AR',
'value' => '$32,000',
'stage' => 'Qualified',
'closeDate' => 'Aug 12, 2026',
],
];
$stageVariant = [
'Lead' => 'outline',
'Qualified' => 'secondary',
'Proposal' => 'default',
'Won' => 'success',
'Lost' => 'destructive',
];
// Summary chips computed from deal data
$totalValue = '$137,950';
$wonCount = collect($deals)->where('stage', 'Won')->count();
$openCount = collect($deals)->whereNotIn('stage', ['Won', 'Lost'])->count();
@endphp
<x-ui.section space="xl" {{ $attributes }}>
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
<x-ui.card>
{{-- Card header --}}
<div class="flex flex-wrap items-center justify-between gap-4 border-b border-border px-6 py-4">
<h2 class="text-base font-semibold">{{ $title }}</h2>
{{-- Summary chips --}}
<div class="flex flex-wrap items-center gap-2">
<span class="inline-flex items-center gap-2 rounded-md border border-border bg-muted/50 px-4 py-2 text-xs font-medium">
<span class="text-muted-foreground">{{ __('Total value') }}</span>
<span class="tabular-nums text-foreground">{{ $totalValue }}</span>
</span>
<span class="inline-flex items-center gap-2 rounded-md border border-border bg-muted/50 px-4 py-2 text-xs font-medium">
<span class="text-muted-foreground">{{ __('Won') }}</span>
<span class="tabular-nums text-foreground">{{ $wonCount }}</span>
</span>
<span class="inline-flex items-center gap-2 rounded-md border border-border bg-muted/50 px-4 py-2 text-xs font-medium">
<span class="text-muted-foreground">{{ __('Open') }}</span>
<span class="tabular-nums text-foreground">{{ $openCount }}</span>
</span>
</div>
</div>
{{-- Table --}}
<div class="overflow-x-auto">
<x-ui.table>
<x-ui.table.header>
<x-ui.table.row>
<x-ui.table.head scope="col">{{ __('Deal / Company') }}</x-ui.table.head>
<x-ui.table.head scope="col">{{ __('Owner') }}</x-ui.table.head>
<x-ui.table.head scope="col" class="text-end">{{ __('Value') }}</x-ui.table.head>
<x-ui.table.head scope="col">{{ __('Stage') }}</x-ui.table.head>
<x-ui.table.head scope="col">{{ __('Close date') }}</x-ui.table.head>
</x-ui.table.row>
</x-ui.table.header>
<x-ui.table.body>
@foreach ($deals as $deal)
<x-ui.table.row>
{{-- Deal / Company --}}
<x-ui.table.cell>
<div class="flex items-center gap-4">
<x-ui.avatar
:fallback="$deal['initials']"
size="sm"
class="shrink-0"
:alt="$deal['company']"
/>
<div class="min-w-0">
<p class="truncate text-sm font-medium">{{ $deal['name'] }}</p>
<p class="truncate text-xs text-muted-foreground">
{{ $deal['company'] }} , {{ $deal['contact'] }}
</p>
</div>
</div>
</x-ui.table.cell>
{{-- Owner --}}
<x-ui.table.cell>
<div class="flex items-center gap-2">
<x-ui.avatar
:fallback="$deal['ownerInitials']"
size="xs"
class="shrink-0"
:alt="$deal['owner']"
/>
<span class="text-sm">{{ $deal['owner'] }}</span>
</div>
</x-ui.table.cell>
{{-- Value --}}
<x-ui.table.cell class="text-end tabular-nums text-sm font-medium">
{{ $deal['value'] }}
</x-ui.table.cell>
{{-- Stage --}}
<x-ui.table.cell>
<x-ui.badge :variant="$stageVariant[$deal['stage']] ?? 'secondary'">
{{ __($deal['stage']) }}
</x-ui.badge>
</x-ui.table.cell>
{{-- Close date --}}
<x-ui.table.cell class="text-sm text-muted-foreground whitespace-nowrap">
{{ $deal['closeDate'] }}
</x-ui.table.cell>
</x-ui.table.row>
@endforeach
</x-ui.table.body>
</x-ui.table>
</div>
</x-ui.card>
</div>
</x-ui.section>
Ownership & lifecycle
Owner, release state, review evidence and adoption for this item.
- Owner
- Platform UI (@JoshJML)
- Current version
-
1.0.4 - Status
- Stable
- License
-
open - Deprecation
- Not deprecated
- Contract
-
v1 - Foundation
-
≥ 1.0.0