Styling - Datatables for Laravel [ Datatables for Laravel ](/) 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) Styling ======= Datatables for Laravel ships with two built-in themes: Tailwind and Bootstrap. The active theme controls which table Blade view and base CSS are used during rendering. This reference covers theme resolution, style loading, and safe override patterns for project-specific design systems. Choose the Active Theme ----------------------- The active theme determines which CSS and Blade templates are used for rendering tables. Configure the type of theme in your config/laravel-datatable.php file. config/laravel-datatable.php PHP `return [ 'theme' => 'tailwind', // or: 'bootstrap'];` ``` return [ 'theme' => 'tailwind', // or: 'bootstrap' ]; ``` Import Package Styles in Your App CSS ------------------------------------- Import the package stylesheet that matches your selected theme. Keep this import above your project-specific override styles. resources/css/app.css (tailwind theme) CSS `@import 'tailwindcss';@import './laravel-datatable/tailwind/laravel-datatable.css';/* Your project overrides should come after the package import */.laravel-datatable[datatable-theme='tailwind'] .ldt-price-cell { @apply text-right font-semibold;}` ``` @import 'tailwindcss'; @import './laravel-datatable/tailwind/laravel-datatable.css'; /* Your project overrides should come after the package import */ .laravel-datatable[datatable-theme='tailwind'] .ldt-price-cell { @apply text-right font-semibold; } ``` resources/css/app.css (bootstrap theme) CSS `@import 'bootstrap';@import './laravel-datatable/bootstrap/laravel-datatable.css';/* Your project overrides should come after the package import */.laravel-datatable[datatable-theme='bootstrap'] .ldt-price-cell { font-weight: 600; text-align: right;}` ``` @import 'bootstrap'; @import './laravel-datatable/bootstrap/laravel-datatable.css'; /* Your project overrides should come after the package import */ .laravel-datatable[datatable-theme='bootstrap'] .ldt-price-cell { font-weight: 600; text-align: right; } ``` Override Package Styles safely ------------------------------ Do not edit files in `vendor/`. Add your overrides in your own stylesheet and scope them to the table theme selector to prevent unwanted global side effects. Scoped override example CSS `.laravel-datatable[datatable-theme="tailwind"] { div.table-container { div.table-wrapper { table { tbody { tr { td { .ldt-status-badge { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium; } .ldt-status-badge.is-active { @apply bg-emerald-100 text-emerald-700; } .ldt-status-badge.is-inactive { @apply bg-zinc-200 text-zinc-700; } } } } } } }}` ``` .laravel-datatable[datatable-theme="tailwind"] { div.table-container { div.table-wrapper { table { tbody { tr { td { .ldt-status-badge { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium; } .ldt-status-badge.is-active { @apply bg-emerald-100 text-emerald-700; } .ldt-status-badge.is-inactive { @apply bg-zinc-200 text-zinc-700; } } } } } } } } ``` Customize Renderer-Specific CSS ------------------------------- When creating custom renderers, use a dedicated class prefix such as ldt-\* and keep renderer styles grouped. This reduces collisions and keeps overrides easy to maintain. Example tailwind renderer CSS CSS `.ldt-status-badge { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium;}.ldt-status-badge.is-active { @apply bg-emerald-100 text-emerald-700;}.ldt-status-badge.is-inactive { @apply bg-zinc-200 text-zinc-700;}` ``` .ldt-status-badge { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium; } .ldt-status-badge.is-active { @apply bg-emerald-100 text-emerald-700; } .ldt-status-badge.is-inactive { @apply bg-zinc-200 text-zinc-700; } ``` Example renderer markup BLADE ` @{{ $row['is_active'] ? 'Active' : 'Inactive' }}` ``` @{{ $row['is_active'] ? 'Active' : 'Inactive' }} ``` Optional: Publish views for structural changes ---------------------------------------------- Use CSS overrides for visual changes. Publish package views only when you need structural markup changes that cannot be solved with classes alone. terminal `php artisan vendor:publish --tag="laravel-datatable-views" --provider="MorrowIt\LaravelDatatable\LaravelDatatableServiceProvider"` ``` php artisan vendor:publish --tag="laravel-datatable-views" --provider="MorrowIt\LaravelDatatable\LaravelDatatableServiceProvider" ``` Optional: Publish package css stylesheets for easy override ----------------------------------------------------------- Publish the package CSS stylesheets to easily override the default styles without modifying the original files. The stylesheets will be published into your projects resource/css/laravel-datatable/<theme>/ folder when executing the following command where <theme> should be replaced with your active theme (bootstrap, tailwind, etc.). This command will publish all the package CSS stylesheets for all themes into your project's resource/css/laravel-datatable/<theme>/ folders. terminal `php artisan vendor:publish --tag="laravel-datatable-styles" --provider="MorrowIt\LaravelDatatable\LaravelDatatableServiceProvider"` ``` php artisan vendor:publish --tag="laravel-datatable-styles" --provider="MorrowIt\LaravelDatatable\LaravelDatatableServiceProvider" ``` If you prefer to only publish the base and theme specific stylesheets, you can use either of the following commands instead. terminal `php artisan vendor:publish --tag="laravel-datatable-tailwind-styles" --provider="MorrowIt\LaravelDatatable\LaravelDatatableServiceProvider"` ``` php artisan vendor:publish --tag="laravel-datatable-tailwind-styles" --provider="MorrowIt\LaravelDatatable\LaravelDatatableServiceProvider" ``` terminal `php artisan vendor:publish --tag="laravel-datatable-bootstrap-styles" --provider="MorrowIt\LaravelDatatable\LaravelDatatableServiceProvider"` ``` php artisan vendor:publish --tag="laravel-datatable-bootstrap-styles" --provider="MorrowIt\LaravelDatatable\LaravelDatatableServiceProvider" ``` ### Related Documentation [Dark Mode Getting Started Enable and configure Dark Mode for your Livewire datatables.](https://laravel-datatables.com/docs/start-dark-mode) [Sorting Icons Customization Customize sorting icons.](https://laravel-datatables.com/docs/customization-sorting-icons) © 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)