PHPackages                             tapp/filament-progress-bar-column - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility &amp; Helpers](/categories/utility)
4. /
5. tapp/filament-progress-bar-column

ActiveLibrary[Utility &amp; Helpers](/categories/utility)

tapp/filament-progress-bar-column
=================================

Add beautiful, color-coded progress bars to your Filament table columns. Perfect for inventory, tasks, storage, and any progress metrics without writing custom views.

v1.0.3(3mo ago)124.5k—4.8%5[2 PRs](https://github.com/TappNetwork/filament-progress-bar-column/pulls)MITPHPPHP ^8.3|^8.2CI passing

Since Oct 20Pushed 2mo agoCompare

[ Source](https://github.com/TappNetwork/filament-progress-bar-column)[ Packagist](https://packagist.org/packages/tapp/filament-progress-bar-column)[ Docs](https://github.com/tapp/filament-progress-bar-column)[ GitHub Sponsors](https://github.com/TappNetwork)[ RSS](/packages/tapp-filament-progress-bar-column/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (4)Dependencies (12)Versions (6)Used By (0)

Filament Progress Column
========================

[](#filament-progress-column)

[![Latest Version on Packagist](https://camo.githubusercontent.com/e588ed684f4b92b6c09867ca19bcf22c5f05d6810685edf9df7a020c00a82248/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f746170702f66696c616d656e742d70726f67726573732d6261722d636f6c756d6e2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/tapp/filament-progress-bar-column)[![Total Downloads](https://camo.githubusercontent.com/b7eea1e1911df596863d2ba5dc002abe8a81aa5b6f82df160e2b14fe3d981f4d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f746170702f66696c616d656e742d70726f67726573732d6261722d636f6c756d6e2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/tapp/filament-progress-bar-column)

Visualize progress at a glance with color-coded progress bars for your Filament table. Perfect for inventory tracking, task completion, storage usage, event capacity, budget monitoring, and more with customizable thresholds and automatic status indicators.

[![Progress Column Screenshot](https://raw.githubusercontent.com/TappNetwork/filament-progress-bar-column/main/docs/column.png)](https://raw.githubusercontent.com/TappNetwork/filament-progress-bar-column/main/docs/column.png)

Features
--------

[](#features)

- Visual progress bar representation
- Automatic status detection based on customizable thresholds
- Customizable colors for each status (danger/warning/success)
- Customizable labels for each status
- Works for any use case: inventory, tasks, storage, capacity, budgets, etc.
- Accessible with proper ARIA attributes

Installation
------------

[](#installation)

You can install the package via Composer:

```
composer require tapp/filament-progress-bar-column
```

Integrate plugin's Tailwind classes
-----------------------------------

[](#integrate-plugins-tailwind-classes)

### Filament 3

[](#filament-3)

To include the TailwindCSS plugin classes, add the plugin to `content` in your `tailwindcss.config.js` file:

```
export default {
    // ...
    content: [
        // ...
        './vendor/tapp/filament-progress-bar-column/resources/views/**/*.blade.php',
        './vendor/tapp/filament-progress-bar-column/src/**/*.php',
    ],
    // ...
}
```

### Filament 4 or 5

[](#filament-4-or-5)

Filament recommends developers create a custom theme to better support plugin's additional Tailwind classes. After you have created your custom theme, add the Filament Progress Bar vendor path to your `theme.css` file, usually located in `resources/css/filament/admin/theme.css`:

```
@source '../../../../vendor/tapp/filament-progress-bar-column';
```

Usage
-----

[](#usage)

The column is simple by design. Just two required things:

1. The database column name (e.g., `'stock'`, `'quantity'`, `'tasks_completed'`)
2. The `maxValue()` method to calculate percentages

Everything else has sensible defaults but can be customized!

### Basic Usage

[](#basic-usage)

Add the `ProgressBarColumn` column to your Filament table:

```
use Tapp\FilamentProgressBarColumn\Tables\Columns\ProgressBarColumn;

public static function table(Table $table): Table
{
    return $table
        ->columns([
            // ... other columns

            ProgressBarColumn::make('stock')
                ->maxValue(100),
        ]);
}
```

### With Low Threshold

[](#with-low-threshold)

Define when the value should be considered "low" (warning state):

```
ProgressBarColumn::make('stock')
    ->maxValue(100)
    ->lowThreshold(10),
```

### Custom Colors

[](#custom-colors)

Customize the colors for each status:

```
ProgressBarColumn::make('stock')
    ->maxValue(100)
    ->lowThreshold(10)
    ->dangerColor('rgb(239, 68, 68)')  // Red - when value ≤ 0
    ->warningColor('rgb(245, 158, 11)') // Amber - when value ≤ threshold
    ->successColor('rgb(34, 197, 94)'), // Green - when value > threshold
```

You can use any valid CSS color format (hex, rgb, rgba, etc.):

```
ProgressBarColumn::make('stock')
    ->maxValue(100)
    ->dangerColor('#ef4444')
    ->warningColor('#f59e0b')
    ->successColor('#22c55e'),
```

### Custom Labels

[](#custom-labels)

Customize the labels displayed for each status:

```
ProgressBarColumn::make('stock')
    ->maxValue(100)
    ->lowThreshold(10)
    ->dangerLabel(fn ($state) => 'Out of stock')
    ->warningLabel(fn ($state) => "{$state} low stock")
    ->successLabel(fn ($state) => "{$state} in stock"),
```

### Dynamic Values

[](#dynamic-values)

Use closures for dynamic max values and thresholds:

```
ProgressBarColumn::make('stock')
    ->maxValue(fn ($record) => $record->warehouse_capacity)
    ->lowThreshold(fn ($record) => $record->reorder_point),
```

### Multiple Use Cases

[](#multiple-use-cases)

#### Inventory/Stock Tracking

[](#inventorystock-tracking)

```
ProgressBarColumn::make('quantity')
    ->label('Stock')
    ->maxValue(100)
    ->lowThreshold(15)
    ->dangerLabel(fn ($state) => 'Out of stock')
    ->warningLabel(fn ($state) => "{$state} low stock")
    ->successLabel(fn ($state) => "{$state} in stock"),
```

#### Task Completion

[](#task-completion)

```
ProgressBarColumn::make('tasks_completed')
    ->label('Progress')
    ->maxValue(fn ($record) => $record->total_tasks)
    ->lowThreshold(fn ($record) => $record->total_tasks * 0.3)
    ->successLabel(fn ($state, $record) => "{$state}/{$record->total_tasks} tasks"),
```

#### Storage Usage

[](#storage-usage)

```
ProgressBarColumn::make('storage_used_gb')
    ->label('Storage')
    ->maxValue(fn ($record) => $record->storage_quota_gb)
    ->lowThreshold(fn ($record) => $record->storage_quota_gb * 0.8)
    ->successLabel(fn ($state, $record) => "{$state}GB / {$record->storage_quota_gb}GB"),
```

#### Event Capacity

[](#event-capacity)

```
ProgressBarColumn::make('registered_attendees')
    ->label('Capacity')
    ->maxValue(fn ($record) => $record->max_capacity)
    ->lowThreshold(fn ($record) => $record->max_capacity * 0.9)
    ->dangerLabel(fn ($state) => "No registration")
    ->warningLabel(fn ($state) => "{$state} - Almost full!")
    ->successLabel(fn ($state) => "{$state} registered"),
```

### Complete Example

[](#complete-example)

```
use Tapp\FilamentProgressBarColumn\Tables\Columns\ProgressBarColumn;

public static function table(Table $table): Table
{
    return $table
        ->columns([
            TextColumn::make('id'),

            TextColumn::make('name'),

            ProgressBarColumn::make('stock')
                ->label('Current Stock')
                ->maxValue(fn ($record) => $record->max_capacity)
                ->lowThreshold(20)
                ->dangerColor('#dc2626')
                ->warningColor('#f97316')
                ->successColor('#16a34a')
                ->dangerLabel(fn ($state) => 'Out of stock')
                ->warningLabel(fn ($state) => "{$state} low stock")
                ->successLabel(fn ($state) => "{$state} in stock"),

            TextColumn::make('price')
                ->money('usd'),
        ]);
}
```

### Methods

[](#methods)

#### `maxValue(int | Closure $value)`

[](#maxvalueint--closure-value)

Set the maximum value for the progress bar. This is used to calculate the percentage.

#### `lowThreshold(int | Closure $value)`

[](#lowthresholdint--closure-value)

Set the threshold below which the status is considered "warning". If not set, only "danger" (≤0) and "success" (&gt;0) states are used.

#### `dangerColor(string | array | Closure $color)`

[](#dangercolorstring--array--closure-color)

Set the color for the danger state (when value ≤ 0). Default: `rgb(244, 63, 94)` (pink/red).

#### `warningColor(string | array | Closure $color)`

[](#warningcolorstring--array--closure-color)

Set the color for the warning state (when value ≤ threshold). Default: `rgb(251, 146, 60)` (orange).

#### `successColor(string | array | Closure $color)`

[](#successcolorstring--array--closure-color)

Set the color for the success state (when value &gt; threshold). Default: `rgb(34, 197, 94)` (green).

#### `dangerLabel(string | Closure $label)`

[](#dangerlabelstring--closure-label)

Set the label for danger state. The closure receives the current value as `$state`. Default: `fn ($state) => "{$state}"`.

#### `warningLabel(string | Closure $label)`

[](#warninglabelstring--closure-label)

Set the label for warning state. The closure receives the current value as `$state`. Default: `fn ($state) => "{$state}"`.

#### `successLabel(string | Closure $label)`

[](#successlabelstring--closure-label)

Set the label for success state. The closure receives the current value as `$state`. Default: `fn ($state) => "{$state}"`.

### Status Logic

[](#status-logic)

The column automatically determines the status based on the current value:

- **Danger**: Current value ≤ 0
- **Warning**: Current value &gt; 0 AND current value ≤ low threshold (if set)
- **Success**: Current value &gt; low threshold (or &gt; 0 if no threshold is set)

### Progress Bar Calculation

[](#progress-bar-calculation)

The progress bar width is calculated as:

```
percentage = (currentValue / maxValue) * 100

```

The percentage is clamped between `0` and `100`.

Testing
-------

[](#testing)

```
composer test
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Tapp Network](https://github.com/TappNetwork)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

50

—

FairBetter than 96% of packages

Maintenance83

Actively maintained with recent releases

Popularity34

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity54

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 66.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~30 days

Total

4

Last Release

117d ago

PHP version history (2 changes)v1.0.0PHP ^8.1|^8.2|^8.3

v1.0.2PHP ^8.3|^8.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/d72a8c345b7f4205dc1edaff8d05ce78f7fe1ec93dce0e52d29f18e885508d4f?d=identicon)[tapp](/maintainers/tapp)

![](https://www.gravatar.com/avatar/4c469e4e441a135287b2154a0a39f543893cbe1e2c3ab066e3e7c66a974a39e2?d=identicon)[scottgrayson](/maintainers/scottgrayson)

![](https://www.gravatar.com/avatar/5d0402fb770bca016dd6ee6a925501e0224783f1e5907788aee0ba7bc31c01ee?d=identicon)[andreiabohner](/maintainers/andreiabohner)

![](https://www.gravatar.com/avatar/5ac72d31fcf96191b82f452d6df6990219c5ffdfd7673859d3fa46cf1dd6193b?d=identicon)[johnwesely](/maintainers/johnwesely)

---

Top Contributors

[![andreia](https://avatars.githubusercontent.com/u/38911?v=4)](https://github.com/andreia "andreia (20 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (5 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (3 commits)")[![swilla](https://avatars.githubusercontent.com/u/304159?v=4)](https://github.com/swilla "swilla (2 commits)")

---

Tags

laravelstatusprogressbarprogressindicatorfilamentfilament-pluginthresholdprogress barfilament-column

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/tapp-filament-progress-bar-column/health.svg)

```
[![Health](https://phpackages.com/badges/tapp-filament-progress-bar-column/health.svg)](https://phpackages.com/packages/tapp-filament-progress-bar-column)
```

###  Alternatives

[schmeits/filament-character-counter

This is a Filament character counter TextField and Textarea form field for Filament v4 and v5

33184.7k6](/packages/schmeits-filament-character-counter)[howdu/filament-record-switcher

Resource level navigation with search

1512.5k](/packages/howdu-filament-record-switcher)[wallacemartinss/filament-icon-picker

A beautiful icon picker component for Filament v5 using blade-ui-kit/blade-icons

467.1k17](/packages/wallacemartinss-filament-icon-picker)[fauzie811/filament-list-entry

List Entry for Filament Infolist

1517.4k](/packages/fauzie811-filament-list-entry)[thiktak/filament-simple-list-entry

Simple List Entry for Infolist

223.9k](/packages/thiktak-filament-simple-list-entry)[wsmallnews/filament-nestedset

Filament nestedset tree builder powered by kalnoy/nestedset with Filament v4 and v5 support

163.0k8](/packages/wsmallnews-filament-nestedset)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
