© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•3y ago•
3 replies
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')
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!
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

Custom table Group component
FilamentFFilament / ❓┊help
5mo ago
component javascript
FilamentFFilament / ❓┊help
3y ago
Showing Table in Wizard (Custom Livewire component)
FilamentFFilament / ❓┊help
5mo ago
Using Resource table in custom livewire component
FilamentFFilament / ❓┊help
2y ago