Input search range ( example for price min & max) about inertiajs-tables-laravel-query-builder

[darkons]

That is not related to this package. You have to use Spatie Query Builder filters.
https://spatie.be/docs/laravel-query-builder/v5/features/filtering#content-scope-filters

Just create your range inputs and make a request to your controller with the filter:

const minPrice = ref()
const maxPrice = ref()

this.$inertia.get(route('your-table-controller-route'), {
  'fields[products]': 'id,name,price',
  'filter[price_range]': `${minPrice.value},${maxPrice.value}`,
})

[darkons]

class ProductIndexController
{
    public function __invoke()
    {
        $products = QueryBuilder::for(Product::class)
            ->defaultSort('name')
            ->allowedSorts(['name', 'price'])
            ->allowedFilters(['name', 'price', AllowedFilter::scope('price_between')])
            ->paginate()
            ->withQueryString();

        return Inertia::render('Products/Index', [
            'products' => $products,
        ])->table(function (InertiaTable $table) {
            $table
              ->defaultSort('name')
              ->column(key: 'name', searchable: true, sortable: true, canBeHidden: false)
              ->column(key: 'price', searchable: true, sortable: true)
              ->column(label: 'Actions');
    }
}

class Product extends Model 
{
    public function scopePriceBetween(Builder $query, $minPrice, $maxPrice): Builder
    {
        return $query->whereBetween('price', [$minPrice, $maxPrice]);
    }
}

<script setup>
import { Inertia } from '@inertiajs/inertia'
import { Table } from '@protonemedia/inertiajs-tables-laravel-query-builder'
import { ref } from 'vue'

defineProps({
  products: Object,
})

const minPrice = ref()
const maxPrice = ref()

const filterByPriceRange = () => {
  Inertia.get(route('your-product-index-route'), {
    'filter[price_between]': `${minPrice.value},${maxPrice.value}`,
  })
}
</script>

<template>
<div id="filters">
  <label>Min price</label>
  <input type="text" v-model="minPrice" />

  <label>Max price</label>
  <input type="text" v-model="maxPrice" />
    
  <button type="button" @click="filterByPriceRange">Filter by price range</button>
</div>

<Table :resource="products" />
</template>

[BenOussama180]

@darkons is there a way to integrate them nicely inside the filters dropdown in the table component ?

[BenOussama180]

@darkons i didnt really get the method u talked about can you please give me more details for backend & frontend ^^thank u

[BenOussama180]

@darkons thank you very much for explainiing the code works perfectly and it helped undrestood the process, the only thing is when i change the page ( in pagination table ) i lose the price filters , & when i input price between filters i lose old filters provided by table api, is there a way to merge them together ? ( im new to inertia )

[darkons]

You must rebuild the current URL query string

const filterByPriceRange = () => {
  var queryParams = new URLSearchParams(window.location.search)
  queryParams.set('filter[price_between]', `${minPrice.value},${maxPrice.value}`)

  Inertia.get(route('your-product-index-route'), {
    queryParams.toString(),
  })
}

[mbeckerle-xqueue]

With a few modifications to write back the parameters to my model values (in your case minPrice and maxPrice refs) it worked also for my usecase.

However, it looks not very integrated. Is there a nice way to integrate such custom filter forms into the tables search interface that is rendered when I set the field to searchable?

[BenOussama180]

@mbeckerle-xqueue please let me know if you managed to do that