Filter select is not working

[ArielMejiaDev]

I did not know if it is an issue or just a edge case or a bad implementation of mine.

I can not make work the filter select:

Backend code:

    public function index(): \Inertia\Response
    {
        $globalSearch = AllowedFilter::callback('global', function ($query, $value) {
            $query->where(function ($query) use ($value) {
                $query->where('name', 'LIKE', "%{$value}%")->orWhere('email', 'LIKE', "%{$value}%");
            });
        });

        $users = QueryBuilder::for(User::class)
            ->defaultSort('name')
            ->allowedSorts(['name', 'email', 'id'])
            ->allowedFilters(['name', 'email', 'id', $globalSearch])
            ->paginate()
            ->withQueryString();

        return Inertia::render('Users', [
            'users' => $users,
        ])->table(function (InertiaTable $table) {
            $table->addSearchRows([
                'name' => 'Name',
                'email' => 'Email address',
            ])->addFilter('name', 'Name', [
                'Ariel' => 'ariel',
            ])->addColumns([
                'email' => 'Email address',
                'id' => 'ID',
            ]);
        });
    }

Vue component

<template>
    <breeze-authenticated-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Users
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

                <Table
                    :filters="queryBuilderProps.filters"
                    :search="queryBuilderProps.search"
                    :columns="queryBuilderProps.columns"
                    :on-update="setQueryBuilder"
                    :meta="users"
                >
                    <template #head>
                        <tr>
                            <th @click.prevent="sortBy('name')">Name</th>
                            <th v-show="showColumn('email')" @click.prevent="sortBy('email')">Email</th>
                            <th v-show="showColumn('id')" @click.prevent="sortBy('id')">ID</th>
                        </tr>
                    </template>

                    <template #body>
                        <tr v-for="user in users.data" :key="user.id">
                            <td>{{ user.name }}</td>
                            <td v-show="showColumn('email')">{{ user.email }}</td>
                            <td v-show="showColumn('id')">{{ user.id }}</td>
                        </tr>
                    </template>
                </Table>

            </div>
        </div>

    </breeze-authenticated-layout>
</template>

<script>
    import BreezeAuthenticatedLayout from '@/Layouts/Authenticated'
    import { InteractsWithQueryBuilder, Tailwind2 } from '@protonemedia/inertiajs-tables-laravel-query-builder';

    export default {
        components: {
            BreezeAuthenticatedLayout,
            Table: Tailwind2.Table,
        },

        mixins: [InteractsWithQueryBuilder],

        props: {
            auth: Object,
            errors: Object,
            users: Object | Array,
        },
    }
</script>

I am using Breeze, but maybe there is something that I miss.

[bogordesaincom]

i have same issue, and solve with :

return Inertia::render('Users'

change with :

return Inertia::render('Users/Index'

change name and folder like that.

[ArielMejiaDev]

i have same issue, and solve with :

return Inertia::render('Users'

change with :

return Inertia::render('Users/Index'

change name and folder like that.

I was really using the component Users.vue that is why do not reference a folder, but maybe if I retry, thanks 😊