Custom Search
The built-in search bar works out of the box - it appears in the toolbar when your PHP table has searchable() fields defined. But you can move it outside the table, restyle it within the toolbar, or replace the entire toolbar.
External Search Input
Sometimes the search input needs to live outside the table - in a page header, a sidebar filter panel, or alongside other form controls. The searchRef prop connects any <input> element to the table's search logic. The built-in search bar hides automatically, and your input gets the same debounce behaviour.
import { useRef } from 'react';
import { InertiaTable } from 'inertia-table-react';
export default function Servers({ servers }) {
const searchRef = useRef<HTMLInputElement>(null);
return (
<div>
{/* Search input in the page header */}
<div className="flex items-center justify-between mb-6">
<h1 className="text-2xl font-bold">Servers</h1>
<input
ref={searchRef}
type="text"
placeholder="Search servers..."
className="w-64 rounded-lg border px-4 py-2"
/>
</div>
{/* Built-in search bar is hidden automatically */}
<InertiaTable tableData={servers} searchRef={searchRef} />
</div>
);
}<script setup lang="ts">
import { ref } from 'vue';
import { InertiaTable } from 'inertia-table-vue';
defineProps<{ servers: any }>();
const searchInputRef = ref<HTMLInputElement | null>(null);
</script>
<template>
<div>
<!-- Search input in the page header -->
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold">Servers</h1>
<input
ref="searchInputRef"
type="text"
placeholder="Search servers..."
class="w-64 rounded-lg border px-4 py-2"
/>
</div>
<!-- Built-in search bar is hidden automatically -->
<InertiaTable :table-data="servers" :search-ref="searchInputRef" />
</div>
</template>This works with any input element - a plain <input>, a shadcn <Input>, or any component that forwards a ref. The debounce time comes from the PHP search_debounce config (300ms by default). The current URL search value is synced into your input on mount and on browser back/forward navigation.
Inline Search Override
To keep the search inside the table toolbar but change how it looks, use renderSearch (React) or the #search slot (Vue). The search stays in the same position but you control the markup and styling.
<InertiaTable
tableData={servers}
renderSearch={({ searchTerm, onSearch, placeholder }) => (
<input
value={searchTerm}
onChange={(e) => onSearch(e.target.value)}
placeholder={placeholder}
className="rounded-full px-4 py-2 border"
/>
)}
/><InertiaTable :table-data="servers">
<template #search="{ searchTerm, onSearch, placeholder }">
<input
:value="searchTerm"
@input="onSearch(($event.target as HTMLInputElement).value)"
:placeholder="placeholder"
class="rounded-full px-4 py-2 border"
/>
</template>
</InertiaTable>The render prop (React) or scoped slot (Vue) receives:
interface SearchRenderProps {
searchTerm: string; // current search value
onSearch: (term: string) => void; // debounced search handler
placeholder: string; // default placeholder text
}Custom Toolbar
The toolbar is the area above the table that contains the search input and any action buttons. Use renderToolbar (React) or the #toolbar slot (Vue) to replace it entirely - you control the layout, but the table provides the search state and any toolbar action children.
<InertiaTable
tableData={servers}
renderToolbar={({ searchable, searchTerm, onSearch, children }) => (
<div className="flex items-center gap-4 p-4 border-b bg-gray-50 dark:bg-gray-800">
{searchable && (
<input
value={searchTerm}
onChange={(e) => onSearch(e.target.value)}
placeholder="Search..."
className="flex-1 rounded border px-3 py-2"
/>
)}
{children}
</div>
)}
/><InertiaTable :table-data="servers">
<template #toolbar="{ searchable, searchTerm, onSearch }">
<div class="flex items-center gap-4 p-4 border-b bg-gray-50 dark:bg-gray-800">
<input
v-if="searchable"
:value="searchTerm"
@input="onSearch(($event.target as HTMLInputElement).value)"
placeholder="Search..."
class="flex-1 rounded border px-3 py-2"
/>
<slot />
</div>
</template>
</InertiaTable>In React, the children prop contains any content from renderToolbarActions. In Vue, use the default <slot /> within the #toolbar slot to render #toolbar-actions content.
Toolbar Actions
Add buttons or controls alongside the built-in search input without replacing the toolbar. Use renderToolbarActions (React) or the #toolbar-actions slot (Vue). This is the simplest way to add export buttons, create links, or filter toggles next to the search bar.
<InertiaTable
tableData={servers}
renderToolbarActions={() => (
<div className="flex gap-2">
<button className="px-3 py-1.5 border rounded text-sm">Export</button>
<button className="px-3 py-1.5 bg-blue-600 text-white rounded text-sm">
Create Server
</button>
</div>
)}
/><InertiaTable :table-data="servers">
<template #toolbar-actions>
<div class="flex gap-2">
<button class="px-3 py-1.5 border rounded text-sm">Export</button>
<button class="px-3 py-1.5 bg-blue-600 text-white rounded text-sm">
Create Server
</button>
</div>
</template>
</InertiaTable>Summary
| Prop | What it does |
|---|---|
searchRef | Moves search to an external input anywhere on the page |
renderSearch (React) / #search slot (Vue) | Restyles the search input within the toolbar |
renderToolbar (React) / #toolbar slot (Vue) | Replaces the entire toolbar (search + actions) |
renderToolbarActions (React) / #toolbar-actions slot (Vue) | Adds buttons alongside the built-in search |