useTable Hook

For full control over the table markup, use useTable directly. It provides all the logic while you control the rendering.

React

import { useTable } from '@forjedio/inertia-table-react';
import { flexRender } from '@tanstack/react-table';

function CustomTable({ tableData }) {
    const {
        table,          // TanStack table instance
        columns,        // BuiltColumn[] for simple iteration
        searchTerm,
        onSearch,
        onPageChange,
    } = useTable({ tableData });

    return (
        <div>
            <input
                value={searchTerm}
                onChange={(e) => onSearch(e.target.value)}
            />
            <table>
                <thead>
                    {table.getHeaderGroups().map((hg) => (
                        <tr key={hg.id}>
                            {hg.headers.map((h) => (
                                <th key={h.id}>
                                    {flexRender(h.column.columnDef.header, h.getContext())}
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody>
                    {table.getRowModel().rows.map((row) => (
                        <tr key={row.id}>
                            {row.getVisibleCells().map((cell) => (
                                <td key={cell.id}>
                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}

Vue

<!-- Coming soon -->

Return Value

Property	Type	Description
table	TanStack Table<Row>	Full TanStack table instance
columns	BuiltColumn[]	Simple array with renderHeader() and renderCell()
classNames	ClassNames	Merged default + custom class names
searchTerm	string	Current search value
onSearch	(term) => void	Debounced search handler
sortBy	string | null	Active sort column
sortDir	'asc' | 'desc'	Sort direction
onSort	(sortKey) => void	Sort toggle handler
getSortState	(sortKey) => SortState	Get sort state for a column
onPageChange	(page) => void	Navigate to page

Simple Iteration

If you don't need TanStack features, use columns directly:

React

const { columns } = useTable({ tableData });

<table>
    <thead>
        <tr>
            {columns.map((col) => <th key={col.id}>{col.renderHeader()}</th>)}
        </tr>
    </thead>
    <tbody>
        {tableData.data.map((row, i) => (
            <tr key={row.id}>
                {columns.map((col) => <td key={col.id}>{col.renderCell(row, i)}</td>)}
            </tr>
        ))}
    </tbody>
</table>

Vue

<!-- Coming soon -->