New: NativePHP Starter-Kit

Laravel Livewire Tables Documentation
Sponsors Demo Support

Edit

🎉 Enjoying this package? Consider sponsoring me on GitHub or buying me a beer.

This is the documentation for v3. You can switch versions in the menu at the top. Check your current version with the following command:

composer show rappasoft/laravel-livewire-tables

Number Filters

Number filters are just HTML number inputs.

1public function filters(): array
2{
3    return [
4        NumberFilter::make('Amount')
5            ->filter(function(Builder $builder, string $value) {
6                $builder->where('amount', '<', $value);
7            }),
8    ];
9}

Historically, min/max/placeholders were set using the "config" option, which is still available. However, it is strongly recommended to use the new setInputAttributes for enhanced customisation.

Old Behaviour

The following would:

  • Set a min of 0
  • Set a max of 100
  • Add a placeholder
  • Keep the default colors & styling
 1public function filters(): array
 2{
 3    return [
 4        NumberFilter::make('Amount')
 5            ->config([
 6                'min' => 0, // Minimum Value Accepted
 7                'max' => 100, // Maximum Value Accepted
 8                'placeholder' => 'Enter Number 0 - 100', // A placeholder value
 9            ])
10            ->filter(function(Builder $builder, string $value) {
11                $builder->where('amount', '<', $value);
12            }),
13    ];
14}

New Behaviour

The following would:

  • Set a min of 5
  • Set a max of 20
  • Set steps to be 0.5
  • Add a placeholder
  • Keep the default colors & styling
 1public function filters(): array
 2{
 3    return [
 4        NumberFilter::make('Age')
 5        ->setInputAttributes([
 6            'min' => '5', // Minimum Value Accepted
 7            'max' => '20', // Maximum Value Accepted
 8            'step' => '0.5', // Set step
 9            'placeholder' => 'Enter Number 0 - 100', // A placeholder value
10            'default-colors' => true,
11            'default-styling' => true,
12        ]),
13    ];
14}