I want to render blade component in column closure. #1054

tahaRazaTalibi · 2023-07-08T05:09:49Z

tahaRazaTalibi
Jul 8, 2023

⚡ PowerGrid ⚡ Feature Request

Summary

I would like to request the ability to render Blade components within column closures in Livewire's PowerGrid.

Why is this needed?

Currently, column closures in PowerGrid only support raw HTML or simple PHP rendering logic. However, using Blade components within column closures would provide several benefits. It would enhance modularity, promote consistent UI patterns, improve readability and reusability, and seamlessly integrate with the existing Laravel ecosystem.

Related issue(s)/PR(s)

N/A

luanfreitasdev · 2023-07-10T14:34:01Z

luanfreitasdev
Jul 10, 2023
Maintainer

Hello!, Can you give more examples and what would that affect the powergrid?. Thanks

1 reply

MGeurts Nov 5, 2023

Me too I stumbled on this issue.

I wanted to show icons in the user->sex column. These icons are blade components used all over the application.

->addColumn('sex', function (User $user) { return $user->sex == 'm' ? '<x-icon.tabler icon="gender-male" />' : '<x-icon.tabler icon="gender-female" />'; })

This does not work because the <x-icon.tabler icon="gender-male" /> is rendered as <x-icon.tabler icon="gender-male" ></x-icon.tabler>.

Thanks for considering.

lsmedia · 2024-03-03T14:01:59Z

lsmedia
Mar 3, 2024

Thumbs up for this feature request!

I would like to render a blade component with a selectbox in a table cell and would be very happy if this could be done easily.

Has anyone already found a solution or workaround for this?

0 replies

abhaypithadiya · 2024-03-04T04:54:10Z

abhaypithadiya
Mar 4, 2024

Hey @lsmedia!

You could do something like this:

            ->addColumn('status', function (OrderProduct $model) {

                $this->status[$model->id] = $model->status;

                return Blade::render(
                    <<<HTML
                <select wire:model="status.{$model->id}" wire:change="updateStatus('{$model->id}')" class="form-select cursor-pointer" style="width:auto;">
                    <option value="P">Pending</option>
                    <option value="M">In Manufacturing</option>
                    <option value="D">Delivered</option>
                    <option value="C">Cancelled</option>
                </select>
                HTML
                );
            })

Hope this help!

2 replies

lsmedia Mar 4, 2024

Thank you very much for this solution, @abhaypithadiya!

I only had to make a few adjustments to my component to be able to use it in this way. Even your example with a selectbox for updating the status fits my initial situation perfectly ;)

return Blade::render(
   <<<HTML
      <x-input-status-select modelId="$model->id"
                             statusNum="$model->status_num"
                             onChangeCallback="update-my-model-status"
                             :candidates="MyModel::allStatus()" />
   HTML
);

This solution could also be suitable for @tahaRazaTalibi and @MGeurts needs.

abhaypithadiya Mar 4, 2024

That's great to hear! Glad the adjustments worked well for you.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

I want to render blade component in column closure. #1054

{{title}}

Replies: 3 comments 3 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

I want to render blade component in column closure. #1054

tahaRazaTalibi Jul 8, 2023

⚡ PowerGrid ⚡ Feature Request

Summary

Why is this needed?

Suggested Solution(s)

Related issue(s)/PR(s)

Replies: 3 comments · 3 replies

luanfreitasdev Jul 10, 2023 Maintainer

MGeurts Nov 5, 2023

lsmedia Mar 3, 2024

abhaypithadiya Mar 4, 2024

lsmedia Mar 4, 2024

abhaypithadiya Mar 4, 2024

tahaRazaTalibi
Jul 8, 2023

Replies: 3 comments 3 replies

luanfreitasdev
Jul 10, 2023
Maintainer

lsmedia
Mar 3, 2024

abhaypithadiya
Mar 4, 2024