Progress Bar - Datatables for Laravel [ Datatables for Laravel ](/) [ 1.0.5](https://laravel-datatables.com/release-notes "Click to view release notes") Toggle main menu [Docs](https://laravel-datatables.com/docs) [Demos](/demos) [Blog](https://laravel-datatables.com/blog) [Pricing](/pricing) Search ⌘ K [ Log in ](/login) [Docs](https://laravel-datatables.com/docs) [Demos](/demos) [Blog](https://laravel-datatables.com/blog) [Pricing](/pricing) Search docs and demos Type at least 2 characters to search. Docs ### Getting Started - [ Installation ](https://laravel-datatables.com/docs/start-installation) - [ Manual Installation ](https://laravel-datatables.com/docs/start-manual-installation) - [ Dark Mode ](https://laravel-datatables.com/docs/start-dark-mode) ### Basics - [ Creating a Table ](https://laravel-datatables.com/docs/basic-creating-a-table) - [ Displaying Columns ](https://laravel-datatables.com/docs/basic-displaying-columns) - [ Data Sources ](https://laravel-datatables.com/docs/basic-data-sources) - [ Internationalisation ](https://laravel-datatables.com/docs/basic-internationalisation) - [ Styling ](https://laravel-datatables.com/docs/basic-styling) ### Features - [ Accessibility ](https://laravel-datatables.com/docs/feature-accessibility) - [ Aggregate Columns ](https://laravel-datatables.com/docs/feature-aggregate-columns) - [ Bulk Actions ](https://laravel-datatables.com/docs/feature-bulk-actions) - [ Column Reordering ](https://laravel-datatables.com/docs/feature-column-reordering) - [ Column Visibility ](https://laravel-datatables.com/docs/feature-column-visibility) - [ Custom Controls ](https://laravel-datatables.com/docs/feature-custom-controls) - [ Custom Filters ](https://laravel-datatables.com/docs/feature-custom-filters) - [ Exporting ](https://laravel-datatables.com/docs/feature-exporting) - [ Freeze Columns and Headers ](https://laravel-datatables.com/docs/feature-freeze-columns-and-headers) - [ Inline Editing ](https://laravel-datatables.com/docs/feature-inline-editing) - [ Pagination ](https://laravel-datatables.com/docs/feature-pagination) - [ Responsive Mobile ](https://laravel-datatables.com/docs/feature-responsive-mobile) - [ Row Actions ](https://laravel-datatables.com/docs/feature-row-actions) - [ Row Grouping ](https://laravel-datatables.com/docs/feature-row-grouping) - [ Row Selection ](https://laravel-datatables.com/docs/feature-row-selection) - [ Sorting and Searching ](https://laravel-datatables.com/docs/feature-sorting-and-searching) - [ State Persistence ](https://laravel-datatables.com/docs/feature-state-persistence) - [ Value Preparation ](https://laravel-datatables.com/docs/feature-value-preparation) ### Customization - [ Cell Renderer ](https://laravel-datatables.com/docs/customization-cell-renderer) - [ Columns ](https://laravel-datatables.com/docs/customization-columns) - [ Components ](https://laravel-datatables.com/docs/customization-components) - [ Data Sources ](https://laravel-datatables.com/docs/customization-data-sources) - [ Exporting ](https://laravel-datatables.com/docs/customization-exporting) - [ Filters ](https://laravel-datatables.com/docs/customization-filters) - [ Loading Indicator ](https://laravel-datatables.com/docs/customization-loading-indicator) - [ Multi Row Actions ](https://laravel-datatables.com/docs/customization-multi-row-actions) - [ Pagination ](https://laravel-datatables.com/docs/customization-pagination) - [ Row Actions ](https://laravel-datatables.com/docs/customization-row-actions) - [ Sorting Icons ](https://laravel-datatables.com/docs/customization-sorting-icons) - [ State Persistence ](https://laravel-datatables.com/docs/customization-state-persistence) - [ Value Formatter ](https://laravel-datatables.com/docs/customization-value-formatter) ### Cell Renderer - [ Action Buttons ](https://laravel-datatables.com/docs/renderer-action-buttons) - [ Avatar ](https://laravel-datatables.com/docs/renderer-avatar) - [ Checkmark ](https://laravel-datatables.com/docs/renderer-checkmark) - [ Color Sample ](https://laravel-datatables.com/docs/renderer-color-sample) - [ Email Link ](https://laravel-datatables.com/docs/renderer-email-to-link) - [ External Link ](https://laravel-datatables.com/docs/renderer-external-link) - [ Friendly Timestamp ](https://laravel-datatables.com/docs/renderer-friendly-timestamp) - [ Image ](https://laravel-datatables.com/docs/renderer-image) - [ Long Text ](https://laravel-datatables.com/docs/renderer-long-text) - [ Phone Link ](https://laravel-datatables.com/docs/renderer-phone-link) - [ Progress Bar ](https://laravel-datatables.com/docs/renderer-progress-bar) - [ Status Badge ](https://laravel-datatables.com/docs/renderer-status-badge) - [ URL Link ](https://laravel-datatables.com/docs/renderer-url-link) - [ Wire Link ](https://laravel-datatables.com/docs/renderer-wire-link) ### Value Formatter - [ Compact Number ](https://laravel-datatables.com/docs/formatter-compact-number) - [ Currency ](https://laravel-datatables.com/docs/formatter-currency) - [ Duration ](https://laravel-datatables.com/docs/formatter-duration) - [ Friendly Filesize ](https://laravel-datatables.com/docs/formatter-friendly-filesize) - [ Friendly Timestamp ](https://laravel-datatables.com/docs/formatter-friendly-timestamp) - [ Locale Timestamp ](https://laravel-datatables.com/docs/formatter-locale-timestamp) - [ Number ](https://laravel-datatables.com/docs/formatter-number) - [ Percent ](https://laravel-datatables.com/docs/formatter-percent) Progress Bar ============ ProgressBar renders numeric values as textual or horizontal-bar progress based on the selected variant. Note that unlike the [ percent formatter ](https://laravel-datatables.com/docs/formatter-percent), the progress bar expects values to represent the full percentage like 84.2, 1.23, 30, etc and not as ratios. If your source values are already percentiles, you may need to adjust them accordingly. Basic Usage ----------- Use the default variant for compact value/max display. Note that the progress is computed based on the maxValue option which is 100 by default. columns() example PHP `public function columns(): array{ return [ Column::make('completion', __('Completion')) ->renderer(new \MorrowIt\LaravelDatatable\Renderers\ProgressBar()), ];}` ``` public function columns(): array { return [ Column::make('completion', __('Completion')) ->renderer(new \MorrowIt\LaravelDatatable\Renderers\ProgressBar()), ]; } ``` Horizontal Variant and Colors ----------------------------- Use horizontal\_bar variant with textClasses, trackClasses, fillClasses and maxValue for percentage-driven displays. horizontal_bar example PHP `Column::make('completion', __('Completion'))->renderer( new \MorrowIt\LaravelDatatable\Renderers\ProgressBar( variant: 'horizontal-bar', textClasses: 'text-gray-700', trackClasses: 'bg-gray-200', fillClasses: 'bg-emerald-500', maxValue: 100 ));` ``` Column::make('completion', __('Completion'))->renderer( new \MorrowIt\LaravelDatatable\Renderers\ProgressBar( variant: 'horizontal-bar', textClasses: 'text-gray-700', trackClasses: 'bg-gray-200', fillClasses: 'bg-emerald-500', maxValue: 100 ) ); ``` Options ------- Option Description variant default \| horizontal\_bar textClasses, trackClasses, fillClasses Classes for text, bar tracker and bar fill maxValue Numeric maximum used to compute progress percentage. This is either an integer, float or the name of the column containing the maximum value. Keep maxValue aligned with your real data scale; otherwise progress bars can underflow or saturate at incorrect percentages. ### Related Documentation [Cell Renderer Customization Create your own cell renderer classes.](https://laravel-datatables.com/docs/customization-cell-renderer) ### Related Demos [Progress Bar Cell Renderer Render progress bars within table cells.](https://laravel-datatables.com/demos/cell-renderer-progress-bar) © 2026 Copyright (C) [ Morrow IT Consulting & Services ](https://morrow-it.services) [Terms of Service](https://laravel-datatables.com/legal/terms) [Privacy](https://laravel-datatables.com/legal/privacy) [Legal Disclosure](https://laravel-datatables.com/legal/disclosure)