Custom Controls - 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)

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.

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',
        ],
    ]
);
```

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

```

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.

   © 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)