F
Filament•4w ago
403gtfo

Table CSS for Livewire Page outside Filament

Hi team, apologies if there is a thread for this but I couldn't find anything to fix it. What I am trying to do: I have a page outside the Filament generated pages. Let's call this Posts. On this page I have a livewire table component I created suing this documentation: https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component I am basically using Filament to do all the admin and this one public facing page, but the rest of the public facing components I am customizing. The problem / What I need: Is there any way to get that this page to load the table CSS from Filament? The rest of the components that are public facing I will be customizing myself. Can I publish and link the table css and or JS to make the table work or something? Any help would be greatly appreciated. What I tried: I tried your instructions from https://discord.com/channels/883083792112300104/1331028366178128015 but it doesnt seem to do anything. Simple post.blade.php: 
@extends('components.layouts.app')
<h2>Posts</h2>
@section('content')
    // I need the table styles for this. 
    @livewire('list-records')
@endsection
@extends('components.layouts.app')
<h2>Posts</h2>
@section('content')
    // I need the table styles for this. 
    @livewire('list-records')
@endsection
Adding a table to a Livewire component - Table Builder - Filament
Solution:
```php <!DOCTYPE html> <html lang="{{ strreplace('', '-', app()->getLocale()) }}"> <head>...
Jump to solution
9 Replies
rhysleesdev
rhysleesdev•4w ago
403gtfo
403gtfoOP•4w ago
I'll try give it another run through... but it all works normally once you are in the normal filament area /admin/.... iit's just this one table embedded in a view.
rhysleesdev
rhysleesdev•4w ago
Can you share the layouts.app file
403gtfo
403gtfoOP•4w ago
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{{ $title ?? 'Page Title' }}</title>

    @vite('resources/css/app.css')
</head>

<body>
    @yield('title')
    @yield('content')

    @vite('resources/js/app.js')
</body>

</html>
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{{ $title ?? 'Page Title' }}</title>

    @vite('resources/css/app.css')
</head>

<body>
    @yield('title')
    @yield('content')

    @vite('resources/js/app.js')
</body>

</html>
Solution
rhysleesdev
rhysleesdev•4w ago
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{{ $title ?? 'Page Title' }}</title>

    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body>
    @yield('title')
    @yield('content')

    @filamentScripts
    @vite('resources/js/app.js')
</body>

</html>
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{{ $title ?? 'Page Title' }}</title>

    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body>
    @yield('title')
    @yield('content')

    @filamentScripts
    @vite('resources/js/app.js')
</body>

</html>
403gtfo
403gtfoOP•4w ago
I just used the one the filament guys wrote (may be out of date now)?
rhysleesdev
rhysleesdev•4w ago
403gtfo
403gtfoOP•4w ago
OTL of course.... I can't believe I missed that.... it works now. Thank you!
rhysleesdev
rhysleesdev•4w ago
No problem 😄 , make sure you mark the post as solved 🙂

Did you find this page helpful?