PowerGrid Action Buttons Showing as "undefined"

[ByounghoPark]

PowerGrid Action Buttons Showing as "undefined"

Hello everyone,

I'm encountering an issue where the action buttons in my PowerGrid table are not rendering correctly
and instead display as "undefined". The rest of the data grid seems to be working fine.

I've also tried running npm run build and clearing my browser cache, but the problem persists.

Has anyone else experienced this or have any suggestions on how to resolve it?

Here's the relevant code from my Livewire component (FarmersTable.php):

public function columns(): array
{
return [
Column::make('Id', 'id'),
Column::make('Name', 'name')->sortable()->searchable(),
// ... other columns ...
Column::action('Action')
];
}

public function actions(Farmer $row): array
{
return [
Button::add('edit')
->slot('Edit: '.$row->id)
->id()
->class('pg-btn-white dark:ring-pg-primary-600 dark:border-pg-primary-600 dark:hover:bg-pg-primary-700 dark:ring-offset-pg-primary-800 dark:text-pg-primary-300 dark:bg-pg-primary-700')
->dispatch('edit', ['rowId' => $row->id])
];
}

And my resources/js/app.js currently looks like this:

import './bootstrap';

import './../../vendor/power-components/livewire-powergrid/dist/powergrid';

And my resources/css/app.css currently looks like this:

@import 'tailwindcss';
@import '../../vendor/power-components/livewire-powergrid/resources/css/tailwind4.css';

/** enable dark mode */
@custom-variant dark (&:where(.dark, .dark *));

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/.blade.php';
@source '../../storage/framework/views/.php';
@source '..//*.blade.php';
@source '..//*.js';

@source '../../app/Livewire/Table.php';
@source '../../app/Livewire//*Table.php';
@source '../../vendor/power-components/livewire-powergrid/src/Themes/Tailwind.php';
@source '../../vendor/power-components/livewire-powergrid/resources/views//.php';

@theme {
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';

--color-pg-primary-50: oklch(0.985 0 0);
--color-pg-primary-100: oklch(0.97 0 0);
--color-pg-primary-200: oklch(0.922 0 0);
--color-pg-primary-300: oklch(0.87 0 0);
--color-pg-primary-400: oklch(0.708 0 0);
--color-pg-primary-500: oklch(0.556 0 0);
--color-pg-primary-600: oklch(0.439 0 0);
--color-pg-primary-700: oklch(0.371 0 0);
--color-pg-primary-800: oklch(0.269 0 0);
--color-pg-primary-900: oklch(0.205 0 0);
--color-pg-primary-950: oklch(0.145 0 0);

}

[Roboroads]

I have this same problem - the second render (after selecting a filter or something) the actions start showing