feat: Enhance table filter UI by removing default date type selection, setting filter layout above content, and standardizing date/select input styles.

This commit is contained in:
Yoga Pangestu 2026-01-30 14:50:22 +07:00
parent 01fe159d52
commit ebd748fe83
5 changed files with 34 additions and 27 deletions

View File

@ -26,6 +26,7 @@
use Filament\Schemas\Components\Utilities\Get; use Filament\Schemas\Components\Utilities\Get;
use Filament\Support\Icons\Heroicon; use Filament\Support\Icons\Heroicon;
use Filament\Tables\Columns\TextColumn; use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Enums\FiltersLayout;
use Filament\Tables\Filters\Filter; use Filament\Tables\Filters\Filter;
use Filament\Tables\Filters\SelectFilter; use Filament\Tables\Filters\SelectFilter;
use Filament\Tables\Filters\TrashedFilter; use Filament\Tables\Filters\TrashedFilter;
@ -178,12 +179,14 @@ public static function configure(Table $table): Table
'year' => 'Tahun', 'year' => 'Tahun',
'range' => 'Rentang Tanggal', 'range' => 'Rentang Tanggal',
]) ])
->default('date') ->live()
->live(), ->native(false),
DatePicker::make('specific_date') DatePicker::make('specific_date')
->label('Tanggal') ->label('Tanggal')
->visible(fn (Get $get) => $get('date_type') === 'date'), ->visible(fn (Get $get) => $get('date_type') === 'date')
->native(false)
->displayFormat('l, d F Y'),
Select::make('month') Select::make('month')
->label('Bulan') ->label('Bulan')
@ -201,7 +204,8 @@ public static function configure(Table $table): Table
11 => 'November', 11 => 'November',
12 => 'Desember', 12 => 'Desember',
]) ])
->visible(fn (Get $get) => $get('date_type') === 'month'), ->visible(fn (Get $get) => $get('date_type') === 'month')
->native(false),
Select::make('year') Select::make('year')
->label('Tahun') ->label('Tahun')
@ -210,15 +214,20 @@ public static function configure(Table $table): Table
return array_combine($years, $years); return array_combine($years, $years);
}) })
->visible(fn (Get $get) => in_array($get('date_type'), ['month', 'year'])), ->visible(fn (Get $get) => in_array($get('date_type'), ['month', 'year']))
->native(false),
DatePicker::make('start_date') DatePicker::make('start_date')
->label('Mulai Tanggal') ->label('Mulai Tanggal')
->visible(fn (Get $get) => $get('date_type') === 'range'), ->visible(fn (Get $get) => $get('date_type') === 'range')
->native(false)
->displayFormat('l, d F Y'),
DatePicker::make('end_date') DatePicker::make('end_date')
->label('Sampai Tanggal') ->label('Sampai Tanggal')
->visible(fn (Get $get) => $get('date_type') === 'range'), ->visible(fn (Get $get) => $get('date_type') === 'range')
->native(false)
->displayFormat('l, d F Y'),
]) ])
->query(function (Builder $query, array $data): Builder { ->query(function (Builder $query, array $data): Builder {
$type = $data['date_type'] ?? null; $type = $data['date_type'] ?? null;
@ -240,7 +249,8 @@ public static function configure(Table $table): Table
return $query; return $query;
}), }),
]) ], FiltersLayout::AboveContentCollapsible)
->filtersFormColumns(3)
->recordActions([ ->recordActions([
ViewAction::make(), ViewAction::make(),

View File

@ -108,7 +108,6 @@ public static function configure(Table $table): Table
'year' => 'Tahun', 'year' => 'Tahun',
'range' => 'Rentang Tanggal', 'range' => 'Rentang Tanggal',
]) ])
->default('date')
->live() ->live()
->native(false), ->native(false),

View File

@ -123,7 +123,6 @@ public static function configure(Table $table): Table
'year' => 'Tahun', 'year' => 'Tahun',
'range' => 'Rentang Tanggal', 'range' => 'Rentang Tanggal',
]) ])
->default('date')
->live() ->live()
->native(false), ->native(false),

View File

@ -135,7 +135,6 @@ public static function configure(Table $table): Table
'year' => 'Tahun', 'year' => 'Tahun',
'range' => 'Rentang Tanggal', 'range' => 'Rentang Tanggal',
]) ])
->default('date')
->live() ->live()
->native(false), ->native(false),