Cutomer List View (override)

Chelsea

How can I overwrite the Blade view of the customer list to add a new custom column without touching the core view or copying it to my new package?

01aviral-webkul

@Chelsea said in Cutomer List View (override):

How can I overwrite the Blade view of the customer list to add a new custom column without touching the core view or copying it to my new package?

You're on the right track by trying to avoid copying the entire view. Bagisto provides an official extension mechanism for this, but the customer list is a special case, so here's the complete picture.

Using `view_render_event` hooks

Bagisto includes view_render_event hooks throughout the admin panel, allowing you to inject additional content into core views without modifying or copying them.

For the customer list (packages/Webkul/Admin/src/Resources/views/customers/index.blade.php), the available hooks are:

bagisto.admin.customers.customers.list.before
bagisto.admin.customers.customers.list.after

You can register a listener in your package like this:

use Illuminate\Support\Facades\Event;

public function boot()
{
    Event::listen(
        'bagisto.admin.customers.customers.list.before',
        function ($viewRenderEventManager) {
            $viewRenderEventManager->addTemplate('yourpackage::customers.extra');
        }
    );
}

This injects your Blade template before the customer list without overriding the core view.

The limitation for adding a new column

The customer list differs from most Bagisto grids. Although it uses a DataGrid, the table itself is rendered using custom Vue slots (#header and #body) defined directly in the Blade view.

The available view_render_event hooks are only placed before and after the grid—they don't exist inside the table header or row templates. Because of this, you cannot inject an additional table column using only render events.

Step 1: Add the data (no view override required)

To make your custom field available in the grid, extend the CustomerDataGrid and bind your implementation in your package:

// Service Provider
$this->app->bind(
    \Webkul\Admin\DataGrids\Customers\CustomerDataGrid::class,
    \YourPackage\DataGrids\CustomerDataGrid::class
);

Then extend the DataGrid:

class CustomerDataGrid extends \Webkul\Admin\DataGrids\Customers\CustomerDataGrid
{
    public function prepareQueryBuilder()
    {
        $queryBuilder = parent::prepareQueryBuilder();

        $queryBuilder->addSelect('customers.your_field');

        return $queryBuilder;
    }

    public function prepareColumns()
    {
        parent::prepareColumns();

        $this->addColumn([
            'index' => 'your_field',
            'label' => 'Your Column',
            'type'  => 'string',
        ]);
    }
}

After this, your value is available on the frontend as record.your_field.

Note: For most Bagisto DataGrids, adding a column in the DataGrid class is enough—the UI renders it automatically. The customer grid is an exception because its table layout is manually defined using Vue slots.

Step 2: Display the column

Since the customer grid's row and header are hardcoded in the Blade template and there are no render hooks inside those slots, there isn't a supported way to inject a new <th> or <td> without overriding the view.

The recommended approach is to override only this single Blade file from your package by registering your package's views with higher priority. This keeps the core untouched while allowing you to add your custom column.

Alternatively, if you'd like to avoid maintaining an overridden view in the future, you could contribute a new view_render_event hook inside the customer grid to Bagisto, which would make this kind of customization possible without any view override.

Summary

Inject content around the customer list: Use view_render_event hooks.
Add custom data to the grid: Extend and rebind CustomerDataGrid.
Add a new table column to the customer list: The current implementation requires overriding the customer list Blade view, as there are no extension hooks inside the custom Vue row/header templates.

So, while Bagisto provides clean extension points for many scenarios, adding a new in-row column to the customer list cannot currently be achieved without overriding that specific Blade view.

Thanks
Aviral