Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Blear's avatar
Level 1

Problem with ag grid after using livewire

After using livewire the table component stopped working, it generates pagination sections but does not render columns with data, data is available in both places. Pagination shows the number of addresses correctly. There is code for x-table component and livewire component:


<div>
<button onclick="my_modal_3.showModal()" class="btn btn-primary">Add</button>
    <dialog id="my_modal_3" class="modal w-auto">
  <div class="modal-box">
    <form method="dialog">
      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
    </form>
    @include('addresses.add')
  </div>
</dialog>
    <div id="myGrid" style="height: calc(100% - 2.5rem);" class="ag-theme-quartz"></div>
    <dialog id="my_modal_4" class="modal w-auto">
</dialog>
@script
<script  type="module">
    
        let gridApi;
        var filterParams = {
            maxNumConditions: 1,
            comparator: (filterLocalDateAtMidnight, cellValue) => {
                var dateAsString = cellValue;
                if (dateAsString == null) return -1;
                var dateParts = dateAsString.split('/');
                var cellDate = new Date(
                Number(dateParts[2]),
                Number(dateParts[1]) - 1,
                Number(dateParts[0])
                );

                if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
                return 0;
                }

                if (cellDate < filterLocalDateAtMidnight) {
                return -1;
                }

                if (cellDate > filterLocalDateAtMidnight) {
                return 1;
                }
                return 0;
            },
        };

        window.onload = function() {
            // Grid Options: Contains all of the grid configurations
            const gridOptions = {
                rowData: {!! $dane !!},
                
                // Column Definitions: Defines & controls grid columns.
                columnDefs: [
                    @foreach($columns as $index => $column)
                        { field: "{{ $column }}" },
                    @endforeach
                    { headerName: 'Options',
                        children: [
                            { 
                                field: 'id', 
                                headerName: 'Edit',
                                cellRenderer: 'btnCellRenderer', 
                                cellRendererParams: {
                                    buttonName: 'Edit',
                                    buttonClasses: ['bg-blue-500', 'hover:bg-blue-700', 'text-white', 'font-bold', 'px-2', 'rounded', 'mr-2'],
                                    clicked: function(field) {
                                        fetch(`/{!! $url !!}/` + field + '/edit')
                    .then(response => response.text())
                    .then(data => {
                       
                        // window.history.pushState(null,null, '/addresses/' + field + '/edit');
                        document.getElementById('my_modal_4').innerHTML = data;
                        my_modal_4.showModal()
                    })
                    .catch(error => console.error('Error:', error));
                                    }
                                },
                            },

                            { 
                                    field: 'id', 
                                    headerName: 'Delete',
                                    cellRenderer: 'btnCellRenderer', 
                                    cellRendererParams: {
                                        buttonName: 'Delete',
                                        url: "{!! $url !!}",
                                        isDeleteButton: true,
                                        buttonClasses: ['bg-red-500', 'hover:bg-red-700', 'text-white', 'font-bold', 'px-2', 'rounded', 'mr-2'],
                                        clicked: function(field) {
                                             // Pobierz aktualne dane z grida
                                                const currentData = gridApi.getModel().rowsToDisplay.map(row => row.data);
                                            // Znajdź index elementu do usunięcia
                                            const indexToRemove = currentData.findIndex(item => item.id === field);

                                            // Jeśli element został znaleziony, usuń go
                                            if (indexToRemove !== -1) {
                                                currentData.splice(indexToRemove, 1);

                                                // Zaktualizuj dane wewnątrz grida
                                                gridApi.setGridOption('rowData', currentData)
                                            }
                                            }
                                        } 
                            }
                ]},
                        
                    
                ],
                defaultColDef: {
                    flex: 1,
                    filter: true,
                },
                components: {
                            btnCellRenderer: BtnCellRenderer
                },
            };
            // Your Javascript code to create the grid
            const myGridElement = document.querySelector('#myGrid');
            gridApi = Grid(myGridElement, gridOptions);
        };
        </script>
@endscript
    </div>

livewire  component:
<div>
    <!-- Table is not rendering for some reason -->
    <x-table.table :url='"addresses"' :dane="$addresses" :columns="['street', 'country', 'city', 'zip_code']" ></x-table.table>
    
@script
<script type="module">
    const myGridElement = document.querySelector('#myGrid');              
</script>
 @endscript
</div>

There is php code:

<?php

namespace App\Livewire\Addresses;

use Livewire\Component;
use App\Models\Address;

class Index extends Component
{
    public function render()
    {
        $addresses = Address::where('is_active', 1)->get();
        // Trzeba zmienić render w controlerze ale nie generuje się tablica
        return view('livewire.addresses.index', [
            'addresses' => Address::where('is_active', 1)->get()
        ])->extends('layouts.main');
    }
}
0 likes
7 replies
vincent15000's avatar

Can you explain the problem with more details please ?

1 like
Blear's avatar
Level 1

@vincent15000 yes so, data from the controller is available in the addresses and x-table components (checked using console.log), but ag-grid does not render any table. Oddly enough, all this worked and still works when I use regular Laravel controllers, the only change required is adding or removing @script. I've been trying to solve this problem for a few days now and nothing has helped so far.

1 like
vincent15000's avatar

@Blear

Oddly enough, all this worked and still works when I use regular Laravel controllers ...

What do you mean when you write regular Laravel controller ... is there any no regular Laravel controller ?

1 like
Blear's avatar
Level 1

@vincent15000 What I meant was that when using livewire I use the app/livewire/addresses file to download data to the component and without livewire I used app/https/controllers/addressControler

1 like
vincent15000's avatar
Level 63

@Blear There is perhaps a conflict between the Livewire script and the AG Grid script.

You should ask to AG Grid if they know some issues with Livewire.

1 like
Blear's avatar
Level 1

@vincent15000 I just found out the table is rendered but it is so thin that you can't see anything and tailwind styles like h-full etc. don't help

1 like
Blear's avatar
Level 1

The problem was that livewire changed the styles for some reason and the component with the table did not have the height of its parent component, it was solved by adding the h-full class to all components

1 like

Please or to participate in this conversation.