How to customize grid UI ?

[wynn8488]

Hi guys,
Do you know customize grid ui? such us insert select box?

[suraj-webkul]

Hello @wynn8488,

You can customize the DataGrid UI using slots, and also listen to Vue slot events for further customization. Here’s how to set up the slot structure:

<x-slot:toolbar-left-before>
</x-slot>

<x-slot:toolbar-left-after>
</x-slot>

<x-slot:toolbar-right-before>
</x-slot>

<x-slot:toolbar-right-after>
</x-slot>

To integrate this with your DataGrid component:

<x-admin::datagrid
    src="{{ route('admin.contacts.persons.index') }}"
    :isMultiRow="true"
    ref="datagrid"
>
    <template #header="{
        isLoading,
        available,
        applied,
        selectAll,
        sort,
        performAction
    }">
        <!-- Header content goes here -->
    </template>

    <template #body="{
        isLoading,
        available,
        applied,
        selectAll,
        sort,
        performAction
    }">
        <!-- Body content goes here -->
    </template>
</x-admin::datagrid>

This approach allows for flexibility in customizing different toolbar sections and provides access to key properties and actions within both the header and body slots.

To implement this customization, you can refer to the following files for guidance:

packages/Webkul/Admin/src/Resources/views/contacts/persons/index.blade.php

packages/Webkul/Admin/src/Resources/views/leads/index/table.blade.php

These files contain similar slot structures and DataGrid configurations, which can serve as useful references for setting up and customizing your UI.

Let me know if you need further clarification or assistance!

Best regards,
Suraj