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. Documentation menu ### Getting Started - [ Installation ](https://laravel-datatables.com/docs) - [ Dark Mode ](https://laravel-datatables.com/docs/dark-mode) ### Basics - [ Creating a Table ](https://laravel-datatables.com/docs/creating-a-table) - [ Displaying Columns ](https://laravel-datatables.com/docs/displaying-columns) - [ Data Sources ](https://laravel-datatables.com/docs/data-sources) - [ Internationalisation ](https://laravel-datatables.com/docs/internationalisation) - [ Multi-Language ](https://laravel-datatables.com/docs/multi-language) - [ Styling ](https://laravel-datatables.com/docs/styling) ### Customization - [ Columns ](https://laravel-datatables.com/docs/customization-columns) - [ Cell Renderer ](https://laravel-datatables.com/docs/customization-cell-renderer) - [ Value Formatter ](https://laravel-datatables.com/docs/customization-value-formatter) - [ Filters ](https://laravel-datatables.com/docs/customization-filters) - [ Pagination ](https://laravel-datatables.com/docs/customization-pagination) - [ Sorting Icons ](https://laravel-datatables.com/docs/customization-sorting-icons) - [ Row Actions ](https://laravel-datatables.com/docs/customization-row-actions) - [ Multi Row Actions ](https://laravel-datatables.com/docs/customization-multi-row-actions) - [ Loading Indicator ](https://laravel-datatables.com/docs/customization-loading-indicator) - [ Exporting ](https://laravel-datatables.com/docs/customization-exporting) - [ Components ](https://laravel-datatables.com/docs/customization-components) - [ Data Sources ](https://laravel-datatables.com/docs/customization-data-sources) - [ State Persistence ](https://laravel-datatables.com/docs/customization-state-persistence) ### Features - [ Accessibility ](https://laravel-datatables.com/docs/feature-accessibility) - [ Actions and Forms ](https://laravel-datatables.com/docs/actions-and-forms) - [ Aggregate Columns ](https://laravel-datatables.com/docs/feature-aggregate-columns) - [ Column Reordering ](https://laravel-datatables.com/docs/feature-column-reordering) - [ Column Visibility ](https://laravel-datatables.com/docs/feature-column-visibility) - [ Custom Filters ](https://laravel-datatables.com/docs/feature-custom-filters) - [ Custom Controls ](https://laravel-datatables.com/docs/feature-custom-controls) - [ Exporting ](https://laravel-datatables.com/docs/feature-exporting) - [ Freeze Columns and Headers ](https://laravel-datatables.com/docs/feature-freeze-columns-and-headers) - [ Pagination ](https://laravel-datatables.com/docs/feature-pagination) - [ Responsive Mobile ](https://laravel-datatables.com/docs/feature-responsive-mobile) - [ 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/sorting-and-searching) - [ State Persistence ](https://laravel-datatables.com/docs/feature-state-persistence) - [ Value Preparation ](https://laravel-datatables.com/docs/feature-value-preparation) ### 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. 1. Choose the Active Theme -------------------------- Set the theme in config/laravel-datatable.php. This decides which theme template and package stylesheet are expected. config/laravel-datatable.php PHP `return [ 'theme' => 'tailwind', // or: 'bootstrap'];` ``` return [ 'theme' => 'tailwind', // or: 'bootstrap' ]; ``` 2. 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; } ``` 3. 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; } } } } } } } } ``` 4. 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 renderer markup BLADE ` @{{ $row['is_active'] ? 'Active' : 'Inactive' }}` ``` @{{ $row['is_active'] ? 'Active' : 'Inactive' }} ``` 5. 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" ``` Styling Checklist ----------------- Use this checklist when implementing theme or styling changes: Step What to Verify config/laravel-datatable.php Theme is set to tailwind or bootstrap and matches your imported stylesheet. resources/css/app.css Package CSS is imported before your overrides. Selector scope Overrides are scoped to .laravel-datatable\[datatable-theme='...'\] to avoid affecting unrelated UI. Renderer classes Custom renderer elements use ldt-\* class names for predictable style targeting. Cache refresh If changes do not appear, clear caches and rebuild assets before debugging selectors. terminal `php artisan optimize:clear` ``` php artisan optimize:clear ``` For sort icon configuration and component-level overrides, continue with [ Customization: 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)