Filament•13mo ago

Custom theme for a livewire component using a filament resource table

So I used a filament table to populate a livewire component and I'm trying to get it to display a custom theme but it doesn't work

Solution:

I needed to run php artisan filament:install --scaffold --tables npm install...

Jump to solution

9 Replies

Dennis Koch•13mo ago

Sorry can’t help a „doesn’t work“ without any Information

antiquarian_capsaicinOP•13mo ago

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
})

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
})

vite.config.js

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

#course{
    background-color: crimson;
}

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

#course{
    background-color: crimson;
}

theme.css

 public static function table(Table $table): Table
    {
        return $table
            ->contentGrid([
                'md' => 2,
                'xl' => 5,
            ])
            ->query(ModelCourse::query())
            ->columns([
                Grid::make()
                    ->columns(1)
                    ->schema([
                        ImageColumn::make('image')
                            ->toggleable()
                            ->circular(),
                        TextColumn::make('name')
                            ->size(TextColumnSize::Large)
                            ->searchable(),
                        TextColumn::make('level.name')
                            ->searchable(),
                        TextColumn::make('cost')
                            ->searchable(),
                        TextColumn::make('duration')
                            ->searchable(),
                        TextColumn::make('details')
                            ->searchable()
                            ->toggleable(isToggledHiddenByDefault: true),

                    ])->columns(2)
            ])

            ->contentGrid(['md' => 2, 'xl' => '3'])
            ->groups([
                'level.name',
            ]);
        
    }

 public static function table(Table $table): Table
    {
        return $table
            ->contentGrid([
                'md' => 2,
                'xl' => 5,
            ])
            ->query(ModelCourse::query())
            ->columns([
                Grid::make()
                    ->columns(1)
                    ->schema([
                        ImageColumn::make('image')
                            ->toggleable()
                            ->circular(),
                        TextColumn::make('name')
                            ->size(TextColumnSize::Large)
                            ->searchable(),
                        TextColumn::make('level.name')
                            ->searchable(),
                        TextColumn::make('cost')
                            ->searchable(),
                        TextColumn::make('duration')
                            ->searchable(),
                        TextColumn::make('details')
                            ->searchable()
                            ->toggleable(isToggledHiddenByDefault: true),

                    ])->columns(2)
            ])

            ->contentGrid(['md' => 2, 'xl' => '3'])
            ->groups([
                'level.name',
            ]);
        
    }

table in livewire component Trying to get it yto display as a grid in the livewire page

Dennis Koch•13mo ago

That should also work without a theme. Not sure whether it works combined with groups though. What is the issue?

antiquarian_capsaicinOP•13mo ago

First off, the styling isn't working the way it's supposed to be working. So I was trying to make it work by using a custom theme But the custom theme isn't working too

antiquarian_capsaicinOP•13mo ago

Displays like this

toeknee•13mo ago

inspect your console, what is shown

antiquarian_capsaicinOP•13mo ago

content.build.min.js:1

GET chrome-extension://njgehaondchbmjmajphnhlojfnbfokng/js/contentScripts/dom.js net::ERR_FILE_NOT_FOUND This It's been fixed

Dennis Koch•13mo ago

What was the issue?

Solution

antiquarian_capsaicin•13mo ago

I needed to run php artisan filament:install --scaffold --tables npm install

Gaming

Programming

Custom theme for a livewire component using a filament resource table