F
Filament•2y ago
Cer Tain Lee

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
Dennis Koch•2y ago
Sorry can’t help a „doesn’t work“ without any Information
Cer Tain Lee
Cer Tain LeeOP•2y 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
Dennis Koch•2y ago
That should also work without a theme. Not sure whether it works combined with groups though. What is the issue?
Cer Tain Lee
Cer Tain LeeOP•2y 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
Cer Tain Lee
Cer Tain LeeOP•2y ago
Displays like this
No description
toeknee
toeknee•2y ago
inspect your console, what is shown
Cer Tain Lee
Cer Tain LeeOP•2y 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
Dennis Koch•2y ago
What was the issue?
Solution
Cer Tain Lee
Cer Tain Lee•2y ago
I needed to run php artisan filament:install --scaffold --tables npm install

Did you find this page helpful?