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')

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>

<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!

2 Replies

Saade•13mo ago

https://filamentphp.com/docs/3.x/support/assets#registering-javascript-files

Assets - Core Concepts - Filament

Timster8989OP•13mo ago

Thanks Saade! However, my problem is not loading the script for Filament in general, for this I use exactly the AppProvider to register it. It's loaded on the page. Problem is, that my Column view file is unable to use it (I believe it's a LiveWire component, which loads via ajax after all).

Gaming

Programming

Custom table component + javascript library