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 ❓┊helpTailwind css not working on full-page livewire component 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

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

Jump to solution

Table CSS for Livewire Page outside Filament

@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

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

Jump to solution

Table CSS for Livewire Page outside Filament

Table CSS for Livewire Page outside Filament

Similar Threads

Similar Threads

Similar Threads