Custom Search & Pagination

Custom Search

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

<!-- Coming soon -->

Custom Pagination

React

<InertiaTable
    tableData={servers}
    renderPagination={({ links, meta, onPageChange, isFetching }) => (
        <div className="flex items-center justify-between px-4 py-4 border-t">
            <span className="text-sm text-gray-500">
                Showing {meta.from} to {meta.to}
                {meta.total != null && <> of {meta.total} results</>}
            </span>
            <div className="flex gap-2">
                <button disabled={!links.prev || isFetching} onClick={() => onPageChange(meta.current_page - 1)}>
                    Previous
                </button>
                <button disabled={!links.next || isFetching} onClick={() => onPageChange(meta.current_page + 1)}>
                    Next
                </button>
            </div>
        </div>
    )}
/>

Vue

<!-- Coming soon -->

Custom Empty State

React

<InertiaTable
    tableData={servers}
    renderEmpty={() => (
        <div className="p-12 text-center">
            <h3 className="text-lg font-medium">No servers yet</h3>
            <p className="text-gray-500">Create your first server to get started.</p>
            <button className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md">
                Create Server
            </button>
        </div>
    )}
/>

Vue

<!-- Coming soon -->

Toolbar Actions

Add buttons alongside the search without replacing it:

React

<InertiaTable
    tableData={servers}
    renderToolbarActions={() => (
        <div className="flex gap-2">
            <button className="px-3 py-1.5 border rounded">Export</button>
            <button className="px-3 py-1.5 bg-blue-600 text-white rounded">Create</button>
        </div>
    )}
/>

Vue

<!-- Coming soon -->