FilamentF
Filament•3y ago
Timster8989

Custom table component + javascript library

I'm leveraging a custom view renderer in my table view:

Tables\Columns\ViewColumn::make('company')
                        ->view('tables.columns.company-record')


and I'd like to use it to display Apex chart. I can of course include Apex chart for this view file, this way it works, but is hardly the way it should be done. If it was just another Livewire component that I could init myself, I could use x-init property. But as this is "Filament magic" that's happening here, I have not found a sensible way to include this script just once and make it work inside my custom view. If you want to test, here is a minimum example of a blade file to use:

<div>
    @php
    $data = $getRecord();
    $id = $data->id;
    @endphp

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <div id="chart{{$id}}"></div>

    <script>
        var options = {
            chart: {
                type: 'bar',
            },
            series: [{
                data: [12, 14]
            }],
            xaxis: {
                categories: ['2021', '2022']
            }
        }

        var chart = new ApexCharts(document.querySelector("#chart{{$id}}"), options);
        chart.render();
    </script>
</div>


As always, any help is greatly appreciated!
Was this page helpful?