Feature: Custom Controls - 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) Custom Controls =============== Custom controls let you inject interactive UI components into a datatable component and bind it directly to the Livewire instance that owns the table state. 1. Register the Control ----------------------- Register one or more blade views in mount() or any other initialization method using addCustomTableControl() so the datatable can render additional toolbar controls. You can pass a simple string or array of controls to the method including attributes per control which will automatically be bound to any @props defined in the component. If you need specific data-dependent evaluations you can either pass them as attributes, use @entangle to bind to the Livewire state directly, or compute them within the component itself. This allows you to create highly dynamic and interactive controls that respond to the current state of the datatable. You can also register the control in the render() method if you need it to be evaluated on every render cycle. If you do so then you must make sure to call parent::render() at the end of your render() method. Datatable mount() PHP `/*** Register the demo custom control.*/public function mount(?string $tableId = null): void{ parent::mount($tableId); $this->addCustomTableControl('demos.table-actions.hello-world');}` ``` /** * Register the demo custom control. */ public function mount(?string $tableId = null): void { parent::mount($tableId); $this->addCustomTableControl('demos.table-actions.hello-world'); } ``` Options ------- Option Details `control` A string or array listing the custom controls to be added to the datatable toolbar using dot-notation. See examples below. `attributes` An array of attributes to be passed to the custom control blade view. These attributes will be automatically bound to any `@props` defined in the component. Examples of addCustomTableControl() calls PHP `// -- Adding a single custom control$this->addCustomTableControl('demos.table-actions.hello-world');// -- Adding a single custom control with attributes$this->addCustomTableControl('demos.table-actions.hello-world', ['class' => 'btn btn-primary']);// -- Adding multiple custom controls$this->addCustomTableControl([ 'demos.table-actions.hello-world', 'demos.table-actions.another-control', 'demos.table-actions.yet-another-control']);// -- Adding multiple custom controls with attributes$this->addCustomTableControl( [ 'demos.table-actions.hello-world' => [ 'class' => 'btn btn-primary', 'id' => 'hello-world-btn', ], 'demos.table-actions.another-control', 'demos.table-actions.yet-another-control' => [ 'my-custom-attribute' => 'hello-world', ], ]);` ``` // -- Adding a single custom control $this->addCustomTableControl('demos.table-actions.hello-world'); // -- Adding a single custom control with attributes $this->addCustomTableControl('demos.table-actions.hello-world', ['class' => 'btn btn-primary']); // -- Adding multiple custom controls $this->addCustomTableControl([ 'demos.table-actions.hello-world', 'demos.table-actions.another-control', 'demos.table-actions.yet-another-control' ]); // -- Adding multiple custom controls with attributes $this->addCustomTableControl( [ 'demos.table-actions.hello-world' => [ 'class' => 'btn btn-primary', 'id' => 'hello-world-btn', ], 'demos.table-actions.another-control', 'demos.table-actions.yet-another-control' => [ 'my-custom-attribute' => 'hello-world', ], ] ); ``` 2. Bind a Control to Datatable State ------------------------------------ Because custom controls render inside the datatable Livewire component, their wire actions can call public methods on the same table instance. Use custom controls for context-specific actions, toggles, or modal launchers that belong to the table itself rather than the surrounding page. resources/views/components/demos/table-actions/hello-world.blade.php BLADE ` Say 'Hello World' Hello World This is a dummy custom control modal rendered from the datatable component. Close ` ``` Say 'Hello World' Hello World This is a dummy custom control modal rendered from the datatable component. Close ``` 3. To render or not to render... -------------------------------- Again, custom controls belong to the table itself and therefore any wire actions will trigger a request roundtrip to the livewire component, trigger a fresh render which in turn triggers a data query refresh! If your custom control does not require a data refresh or re-rendering of the component, then ensure to use Livewire's \#\[Renderless\] attribute, like in the case of the related demo page. Related demos [Custom Controls](https://laravel-datatables.com/demos/features-custom-controls) © 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)