0

Good afternoon everyone, all right? I hope so

well, i'm doing a little project with laravel, but in terms of styling some things i'm getting lost, i've been trying for 5 days straight but i can't, i've tried the official doc, youtube, forums, stack overflow and also programming with chatGpt, so I decided to ask here because really, my options ran out. about the project i have this screen

I will also pass here my UserResource file, which is the file that builds the first screen:

UserResource

<?php

namespace App\Filament\Resources;


use App\Filament\Resources\UserResource\Pages;
use App\Filament\Resources\UserResource\RelationManagers;
use Filament\Tables\Actions\ActionGroup;
use Filament\Tables\Actions\EditAction;
use App\Models\User;
use Filament\Tables\Actions\Position;
use Filament\Forms;
use Filament\Resources\Form;
use Filament\Resources\Resource;
use Filament\Resources\Table;
use Filament\Tables;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;

class UserResource extends Resource
{
    protected static ?string $model = User::class;

    protected static ?string $navigationIcon = 'heroicon-o-collection';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('name')
                    ->required()
                    ->maxLength(255),
                Forms\Components\TextInput::make('email')
                    ->email()
                    ->required()
                    ->maxLength(255),
                Forms\Components\DateTimePicker::make('email_verified_at'),
                Forms\Components\TextInput::make('password')
                    ->password()
                    ->required()
                    ->maxLength(255),
            ]);
    }

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

                Tables\Columns\TextColumn::make('name'),
                Tables\Columns\TextColumn::make('email'),
                Tables\Columns\TextColumn::make('email_verified_at')
                    ->dateTime(),
                Tables\Columns\TextColumn::make('created_at')
                    ->dateTime(),
                Tables\Columns\TextColumn::make('updated_at')
                    ->dateTime(),







            ])
            ->filters([
                //

            ])
            ->actions([

                EditAction::make('Editar'),
                Tables\Actions\DeleteAction::make(),
            ])

            ->bulkActions([
                Tables\Actions\DeleteBulkAction::make(),
            ]);
    }
    protected function getTableActions(): array
    {
        return [
            Tables\Actions\ActionGroup::make([
                Tables\Actions\ViewAction::make(),
                Tables\Actions\EditAction::make('edit', 'Editar'),
                Tables\Actions\DeleteAction::make(),
            ])->dropdown(),
        ];
    }
    protected function getTableActionsPosition(): ?string
    {
        return Position::BeforeCells;
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ManageUsers::route('/'),
        ];
    }
}


tela projeto I wanted to be able to remove the edit name next to the 3 dots and put it as the column name, but I'm not succeeding, I also wanted to put an icon next to each column name, I also wanted to put a filter by date, where a calendar would appear . anyway, my problem is stylizing things and some functionalities, I'm going to show another screen, showing how I wanted it to look just below, remembering that I'm not using css, html, etc., I'm using only Filament.

2

  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community May 03 '23 at 23:42

1 Answers1

0

I think this will help (question is not very clear)

Filament has IconColumns but also IconButtons(actions) however you do not have to use it like a component as in the docs

Any Action has the iconButton function available to them so you can simply do

    EditAction::make('Editar')
           ->iconButton(),

For the filter you should first get a normal working filter, after that you can add a custom form, either make your own datepicker or use the one Filament provides (make sure you have the forms package installed in your project since this is a forms component)

I have no example of a working datepick filter of my own but this one is straight from the documentation

    Filter::make('created_at')
    ->form([
        Forms\Components\DatePicker::make('created_from'),
        Forms\Components\DatePicker::make('created_until'),
    ])
    ->query(function (Builder $query, array $data): Builder {
        return $query
            ->when(
                $data['created_from'],
                fn (Builder $query, $date): Builder => $query->whereDate('created_at', '>=', $date),
            )
            ->when(
                $data['created_until'],
                fn (Builder $query, $date): Builder => $query->whereDate('created_at', '<=', $date),
            );
    })

I also advise you to take the time to look through the models of the base components like the Column, Action and Filter.. all variations like the EditAction or SelectFilter extend these base models. So the functions on the base model are always available

Jordy
  • 73
  • 6