Searching

Enabling Search

Override searchable() to return the database columns to search across:

class ServerTable extends Table
{
    protected function searchable(): array
    {
        return ['name', 'ip', 'hostname'];
    }
}

Return [] (the default) to disable search. When disabled, the search input is hidden.

How It Works

• Uses WHERE ... LIKE '%term%' with OR across all listed fields
• Conditions are wrapped in a grouped WHERE clause (won't interfere with other query scopes)
• The search term is read from ?search= in the URL (or ?{identifier}Search= when using an identifier)
• Frontend debounces input - 300ms by default (configurable via search_debounce config)
• Page resets to 1 when the search term changes

External Search Input

Use the searchRef prop to connect your own search input anywhere on the page. The built-in search bar is hidden and your input gets automatic debounce:

React

import { useRef } from 'react';

const searchRef = useRef<HTMLInputElement>(null);

<input ref={searchRef} type="text" placeholder="Search..." />
<InertiaTable tableData={servers} searchRef={searchRef} />

Vue

<script setup lang="ts">
import { ref } from 'vue';

const searchInputRef = ref<HTMLInputElement | null>(null);
</script>

<template>
    <input ref="searchInputRef" type="text" placeholder="Search..." />
    <InertiaTable :table-data="servers" :search-ref="searchInputRef" />
</template>

See Custom Search for more examples.

Inline Search Override

To restyle the search within the toolbar, use renderSearch (React) or the #search slot (Vue):

React

<InertiaTable
    tableData={servers}
    renderSearch={({ searchTerm, onSearch }) => (
        <input
            value={searchTerm}
            onChange={(e) => onSearch(e.target.value)}
            placeholder="Filter servers..."
            className="rounded-full px-4 py-2 border"
        />
    )}
/>

Vue

<InertiaTable :table-data="servers">
    <template #search="{ searchTerm, onSearch }">
        <input
            :value="searchTerm"
            @input="onSearch(($event.target as HTMLInputElement).value)"
            placeholder="Filter servers..."
            class="rounded-full px-4 py-2 border"
        />
    </template>
</InertiaTable>