Hook System

The hook system connects PHP tableSettings to frontend behaviour - enabling features like realtime updates without modifying the package.

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 '@forjedio/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

<!-- Coming soon -->

Page Component

No realtime code needed - the hook handles it:

React

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

Vue

<!-- Coming soon -->

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

import { clearTableHooks } from '@forjedio/inertia-table-react';

afterEach(() => clearTableHooks());