Calling livewire component from xdata

I am writing a ResizeableTextColumn component for use in Filament Resource table
This is a sample of usage
return $table
            ->columns([
                ResizeableTextColumn::make('name')
                    ->searchable()
                    ->sortable(),

This is an example of my code and I need to emit back to the server to persist the user defined width (attached) and the livewire listener
<?php

namespace App\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Session;
class TableColumnResizer extends Component
{
    public $tableName;

    protected $listeners = ['updateColumnWidth']; // Listen for the emitted event

    public function mount($tableName)
    {
        $this->tableName = "column_widths";
    }

    public function updateColumnWidth(string $columnName, int $width)
    {
        // Debugging point: Check if the method is called
        dd("Column updated:", $columnName, $width);

        $userId = Auth::id();

        // Store in session
        $sessionKey = "user.{$userId}.table.{$this->tableName}.column_widths.{$columnName}";
        Session::put($sessionKey, $width);

        // Update the database
        DB::table('column_widths')->updateOrInsert(
            [
                'user_id' => $userId,
                'table_name' => $this->tableName,
                'column_name' => $columnName,
            ],
            ['width' => $width]
        );
    }

    public function render()
    {
        return view('livewire.table-column-resizer');
    }
}

I see that window.livewire is undefined so the emit never works. The objective is send the resizing info back to the listener to persist it. I am new at Laravel and filament but understand the concepts (developer for 40+ years)
Was this page helpful?