Frontend Hooks

Frontend hooks connect PHP tableSettings to frontend behaviour - enabling features like realtime updates without modifying the package. For PHP-side hooks that modify queries and data, see Table Hooks.

How It Works

1. PHP - define $tableSettings on your table class
2. Frontend (boot) - register hooks with registerTableHook(key, callback)
3. Frontend (mount) - when <InertiaTable> mounts, hooks fire for matching keys
4. Frontend (unmount) - cleanup functions are called

Example: Realtime Updates

PHP

class ServerTable extends Table
{
    protected array $tableSettings = [
        'realtime' => [
            'channel' => 'servers',
            'events'  => ['ServerCreated', 'ServerUpdated', 'ServerDeleted'],
            'debounce' => 500,
        ],
    ];
}

Frontend

Register once at app boot:

React

// app.tsx
import { registerTableHook } from 'inertia-table-react';

registerTableHook('realtime', ({ value, refresh }) => {
    const config = value as { channel: string; events: string[]; debounce?: number };
    const echoChannel = window.Echo.private(config.channel);

    let timer: ReturnType<typeof setTimeout> | null = null;
    const doRefresh = config.debounce
        ? () => { if (timer) clearTimeout(timer); timer = setTimeout(refresh, config.debounce); }
        : refresh;

    config.events.forEach(e => echoChannel.listen(`.${e}`, doRefresh));

    return () => {
        if (timer) clearTimeout(timer);
        config.events.forEach(e => echoChannel.stopListening(`.${e}`));
        window.Echo.leave(config.channel);
    };
});

Vue

// app.ts
import { registerTableHook } from 'inertia-table-vue';

registerTableHook('realtime', ({ value, refresh }) => {
    const config = value as { channel: string; events: string[]; debounce?: number };
    const echoChannel = window.Echo.private(config.channel);

    let timer: ReturnType<typeof setTimeout> | null = null;
    const doRefresh = config.debounce
        ? () => { if (timer) clearTimeout(timer); timer = setTimeout(refresh, config.debounce); }
        : refresh;

    config.events.forEach(e => echoChannel.listen(`.${e}`, doRefresh));

    return () => {
        if (timer) clearTimeout(timer);
        config.events.forEach(e => echoChannel.stopListening(`.${e}`));
        window.Echo.leave(config.channel);
    };
});

Page Component

No realtime code needed - the hook handles it:

React

export default function Servers({ servers }) {
    return <InertiaTable tableData={servers} />;
}

Vue

<script setup lang="ts">
import { InertiaTable } from 'inertia-table-vue';

defineProps<{ servers: any }>();
</script>

<template>
    <InertiaTable :table-data="servers" />
</template>

Every table with realtime in its tableSettings automatically connects.

Hook Context

interface TableHookContext {
    value: unknown;               // tableSettings[key] value
    tableData: InertiaTableData;  // full table data
    refresh: () => void;          // trigger Inertia reload
}

Cleanup

Hook callbacks can return a cleanup function, called when the component unmounts:

registerTableHook('analytics', ({ value }) => {
    const interval = setInterval(() => track(value), 30000);
    return () => clearInterval(interval);
});

Testing

Clear hooks between tests to prevent leakage:

import { clearTableHooks } from 'inertia-table-react';

afterEach(() => clearTableHooks());           // clear all hooks
afterEach(() => clearTableHooks('realtime')); // clear only 'realtime' hooks

clearTableHooks(key?) accepts an optional key to clear hooks for a specific setting. Without a key, it clears all registered hooks.