Filament•7mo ago

Custom styles

public function table(Table $table): Table
    {
        return $table
            ->query(Course::query())
            ->columns([

                Stack::make([
                    ImageColumn::make('image')
                        ->width(400)
                        ->height(300)
//->extraAttributes(['class' => 'h-auto', 'm-auto', 'rounded-lg', 'sm:w-32'])
                        ->toggleable(),
                    // ->size(370),
                    Grid::make([
                        'sm' => 2,
                        'xl' => 2,
                        '2xl' => 2,
                    ])->schema([
                                ImageColumn::make('image')->circular()->extraAttributes(['class' => 'mt-2', 'sm:w-80', 'sm:m-0']),
                                TextColumn::make('name')
->extraAttributes(['class' => 'mt-2', 'text-4xl'])
->weight(FontWeight::Black)
->size(TextColumnSize::Large)
->searchable(),
])->extraAttributes(['class' => 'gap-0']),

TextColumn::make('details')
->searchable()
->weight(FontWeight::SemiBold)
->size(TextColumnSize::Medium)
->toggleable(isToggledHiddenByDefault: true)
                        ->extraAttributes(['class' => 'my-4']),
                ])->extraAttributes(['style' => 'max-width:720px', 'max-w-screen-lg', 'class' => 'bg-blue-200']),

            ])
            ->contentGrid([
                'md' => 3,
                'sm' => 2,
            ])
            
    }

public function table(Table $table): Table
    {
        return $table
            ->query(Course::query())
            ->columns([

                Stack::make([
                    ImageColumn::make('image')
                        ->width(400)
                        ->height(300)
//->extraAttributes(['class' => 'h-auto', 'm-auto', 'rounded-lg', 'sm:w-32'])
                        ->toggleable(),
                    // ->size(370),
                    Grid::make([
                        'sm' => 2,
                        'xl' => 2,
                        '2xl' => 2,
                    ])->schema([
                                ImageColumn::make('image')->circular()->extraAttributes(['class' => 'mt-2', 'sm:w-80', 'sm:m-0']),
                                TextColumn::make('name')
->extraAttributes(['class' => 'mt-2', 'text-4xl'])
->weight(FontWeight::Black)
->size(TextColumnSize::Large)
->searchable(),
])->extraAttributes(['class' => 'gap-0']),

TextColumn::make('details')
->searchable()
->weight(FontWeight::SemiBold)
->size(TextColumnSize::Medium)
->toggleable(isToggledHiddenByDefault: true)
                        ->extraAttributes(['class' => 'my-4']),
                ])->extraAttributes(['style' => 'max-width:720px', 'max-w-screen-lg', 'class' => 'bg-blue-200']),

            ])
            ->contentGrid([
                'md' => 3,
                'sm' => 2,
            ])
            
    }

extraAttributes for image column doesn't work. How do i make it work? Also some just don't work

5 Replies

antiquarian_capsaicin•7mo ago

Also it's for a livewire page So I'm using the table for the livewire page

Dennis Koch•7mo ago

If you use custom Tailwind classes you need to use a custom theme

antiquarian_capsaicin•7mo ago

So when creating the theme do i add the specific filename to the command or...?

Dennis Koch•7mo ago

You need to make sure your files are in your tailwind and vite config. But the docs on themes should explain this

antiquarian_capsaicin•7mo ago

ok thanks

Gaming

Programming

Custom styles