Wrax Comments - Answer Overflow

Have you tried defining ->columnSpan(1) on the Grid's child fields? Assuming your $grid is equal to 4. You might also be better off passing an array so you can explicitly set responsive breakpoints & override the 'default'

`use Filament\Infolists\Components\Grid;
 
Grid::make([
    'default' => 1,
    'sm' => 2,
    'md' => 3,
    'lg' => 4,
    'xl' => 6,
    '2xl' => 8,
])
    ->schema([
        // ...
    ])

`use Filament\Infolists\Components\Grid;
 
Grid::make([
    'default' => 1,
    'sm' => 2,
    'md' => 3,
    'lg' => 4,
    'xl' => 6,
    '2xl' => 8,
])
    ->schema([
        // ...
    ])

more: https://filamentphp.com/docs/3.x/infolists/layout/grid#grid-component

5 replies

FFilament

•Created by RawaN on 9/23/2024 in #❓┊help

direction of the table filter

Have you tried using form layout components?
*Filament\Forms\Components\Grid * should work inside the form() method

->form([                                               Filament\Forms\Components\Grid:make([

        DatePicker::make('created_from')
          ->label(__('filters.created_from')),

        DatePicker::make('created_until')
          ->label(__('filters.created_until')),
      ]),
 ])

->form([                                               Filament\Forms\Components\Grid:make([

        DatePicker::make('created_from')
          ->label(__('filters.created_from')),

        DatePicker::make('created_until')
          ->label(__('filters.created_until')),
      ]),
 ])

6 replies

FFilament

•Created by RawaN on 9/23/2024 in #❓┊help

direction of the table filter

https://filamentphp.com/docs/3.x/tables/filters/layout

6 replies

FFilament

•Created by kalesha on 9/22/2024 in #❓┊help

text input with relation

Try explicitly passing the foreignkey on the hasOne method

`public function pricing(): HasOne
    {
        return $this-
>hasOne(ProductPricing::class, 'pricing_id');
    }

5 replies

FFilament

•Created by RawaN on 8/29/2024 in #❓┊help

How to use filament component in front-end of website?

It's not clear how you've configured your layout. There is useful information relating to layout setup here: https://filamentphp.com/docs/3.x/notifications/installation#configuring-your-layout Providing more context might help identify your issue

7 replies

FFilament

•Created by pocket.racer on 8/29/2024 in #❓┊help

How to do a ranking column in filament table that doesn't change?

I checked and the above works for your use case. Simply add the following as the first column in your table. Tables\Columns\TextColumn::make('rank')->rowIndex(),

6 replies

FFilament

•Created by pocket.racer on 8/29/2024 in #❓┊help

How to do a ranking column in filament table that doesn't change?

have you tried this: https://filamentphp.com/docs/3.x/tables/columns/text#displaying-the-row-index

6 replies

FFilament

•Created by SuperUserDo on 8/28/2024 in #❓┊help

Select Remove Button to Be disabled

https://filamentphp.com/docs/3.x/forms/fields/select#disable-placeholder-selection

4 replies

FFilament

•Created by Cushty on 8/11/2024 in #❓┊help

Reuse wizard on frontend

I'm not OP but hopfully my snippet can help @Cushty in the right direction.

11 replies

FFilament

•Created by Cushty on 8/11/2024 in #❓┊help

Reuse wizard on frontend

As it turns out I've just implemented a wizard on a frontend livewire component in my own app. Might be little different than what you're trying to do but essentially I am rendering a filament table on my front-end livewire component and then have a column act as button to open the wizard steps in a modal. Hope this helps

ListLitters.php
<?php

namespace App\Livewire\Litters;

use ...

class ListLitters extends Component implements HasForms, HasTable
{
    use InteractsWithForms;
    use InteractsWithTable;

    public LitterApplicant $applicant;

    public function create(): Action
    {
        return Action::make('create')
            ->requiresConfirmation()
            ->action(fn () => $this->applicant->create());
    }
public function table(Table $table): Table
    {
        return $table
            ->query(Litter::query())
            ->columns([
            // Other columns...
              TextColumn::make('button')
                ->state('Apply')
                ->action(                        Tables\Actions\CreateAction::make('makeLitterApplication')
                        ->model(LitterApplicant::class)
                        ->steps(LitterApplicant::getFormSteps())
                        ->requiresConfirmation()
                        ->modalHeading('Make Application')
                        ->modalDescription('Fill the form to submit')
                        ->modalIcon('heroicon-m-pencil-square')
                        ->modalWidth(MaxWidth::FiveExtraLarge)
                        ->modalIconColor('success')
                        ->successNotification(
                            Notification::make()
                                ->title('Application Received')
                                ->body('body text')
                                ->persistent()
                                ->success()
...          
public function render(): View
    {
        return view('livewire.litters.list-litters');
    }

ListLitters.php
<?php

namespace App\Livewire\Litters;

use ...

class ListLitters extends Component implements HasForms, HasTable
{
    use InteractsWithForms;
    use InteractsWithTable;

    public LitterApplicant $applicant;

    public function create(): Action
    {
        return Action::make('create')
            ->requiresConfirmation()
            ->action(fn () => $this->applicant->create());
    }
public function table(Table $table): Table
    {
        return $table
            ->query(Litter::query())
            ->columns([
            // Other columns...
              TextColumn::make('button')
                ->state('Apply')
                ->action(                        Tables\Actions\CreateAction::make('makeLitterApplication')
                        ->model(LitterApplicant::class)
                        ->steps(LitterApplicant::getFormSteps())
                        ->requiresConfirmation()
                        ->modalHeading('Make Application')
                        ->modalDescription('Fill the form to submit')
                        ->modalIcon('heroicon-m-pencil-square')
                        ->modalWidth(MaxWidth::FiveExtraLarge)
                        ->modalIconColor('success')
                        ->successNotification(
                            Notification::make()
                                ->title('Application Received')
                                ->body('body text')
                                ->persistent()
                                ->success()
...          
public function render(): View
    {
        return view('livewire.litters.list-litters');
    }

11 replies

FFilament

•Created by Cushty on 8/11/2024 in #❓┊help

Reuse wizard on frontend

You shouldn't need to make a duplicate wizard. Just call the same form method in your livewire component class. https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component#adding-the-form

11 replies

FFilament

•Created by Cushty on 8/11/2024 in #❓┊help

Reuse wizard on frontend

extract the form from the resource to a method on a class (Model will do) and call it from both your filament resource and your front-end livewire component class

11 replies

FFilament

•Created by Cushty on 8/2/2024 in #❓┊help

filament, liveire full page compnent and larave breeze css issue

I did something similar recently and had a brief issue with styling. Here is my config:

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import preset from './vendor/filament/support/tailwind.config.preset'

/** @type {import('tailwindcss').Config} */
export default {
    presets: [preset],
    content: [...

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import preset from './vendor/filament/support/tailwind.config.preset'

/** @type {import('tailwindcss').Config} */
export default {
    presets: [preset],
    content: [...

Addtionally I wasn't using dark styles on my front-end so I also had to remove some dark references in my layout's Alpine. I think filament scans for dark references in order to decide what styles to serve the table in.

`<body class="antialiased"
      x-cloak
      x-data="{
{{-- removed darkMode: $persist(false),--}}
            scrolled: false, mobileOpen: false,
            showContact: $persist(false),
            viewing: $persist('training'),
            filterLevel: $persist('all'),
            selectedService: $persist(''),
        }"
      x-init="window.addEventListener('scroll', () => { scrolled = (window.scrollY > 0) })"
{{--removed :class="{'dark': darkMode === false}"--}} 
>

{{ $slot }}

@filamentScripts
@livewireScripts
@vite('resources/js/app.js')
</body>

27 replies

FFilament

•Created by Tjiel on 7/11/2024 in #❓┊help

Updating placeholder text afterStateUpdated

Select::make('product_id')
    ->relationship('product', 'name')
    ->live()
    ->afterStateUpdated(fn (callable $set, $state) =>
        $set('relatedProductName', optional(Product::find($state))->name)
    ),

TextInput::make('name')
    ->placeholder(fn ($get) => $get('relatedProductName') ?? 'Enter name')
    ->afterStateHydrated(fn (callable $set, $state) =>
        $set('relatedProductName', null)
    ),

Select::make('product_id')
    ->relationship('product', 'name')
    ->live()
    ->afterStateUpdated(fn (callable $set, $state) =>
        $set('relatedProductName', optional(Product::find($state))->name)
    ),

TextInput::make('name')
    ->placeholder(fn ($get) => $get('relatedProductName') ?? 'Enter name')
    ->afterStateHydrated(fn (callable $set, $state) =>
        $set('relatedProductName', null)
    ),

6 replies

FFilament

•Created by hentiru on 7/9/2024 in #❓┊help

Numeric TextColumn: sortable() not working properly

FYI I tried to replicate this in my app but cannot reproduce the described behaviour. My test was in the context of a RelationManager $table on a field using tinyint unsigned in the db.

return $table
            ->recordUrl(fn (Dog $record): string => EditDog::getUrl(['record' => $record]))
            //->reorderable('litter_position')
            ->heading('Registered Whelps')
            //->recordTitleAttribute('full_name')
           // ->defaultSort('litter_position')

            ->columns([
                TextColumn::make('litter_position')
                    ->label('litter pos')
                    ->html()
                    ->state('&#x25CF;')
                    ->sortable(),

return $table
            ->recordUrl(fn (Dog $record): string => EditDog::getUrl(['record' => $record]))
            //->reorderable('litter_position')
            ->heading('Registered Whelps')
            //->recordTitleAttribute('full_name')
           // ->defaultSort('litter_position')

            ->columns([
                TextColumn::make('litter_position')
                    ->label('litter pos')
                    ->html()
                    ->state('&#x25CF;')
                    ->sortable(),

In my test, the table loads with no defaultSort() applied to the table so the UI shows an inactive state (greyed out down arrow) to indicate no active sorting on the sortable() column. Clicking the column sort once changes to the up arrow in an active state on the column UI and correctly sorts by Asc value. Second click changes column UI to active down arrow and correctly sorts by Desc values. A third click cycles the column sorting back to the initial inactive state with no sorting applied and inactive UI sort state.

15 replies

FFilament

•Created by hentiru on 7/9/2024 in #❓┊help

Numeric TextColumn: sortable() not working properly

is priority a numeric type in the db schema?

15 replies

Gaming

Programming