TypeScript v4

Inertia Table ships with full TypeScript support. Both the Vue and React packages include type declarations that provide autocomplete, type checking, and typed slots/render props.

Importing Types

All types are exported from the main package entry point:

Vue

import { Table, type TableResource, type TableColumn, type CellSlotProps } from '@inertiaui/table-vue'

React

import { Table, type TableResource, type TableColumn, type TableProps } from '@inertiaui/table-react'

Typed Resource Prop

Define an interface for your model and pass it as a generic to TableResource<T>. The generic flows through to slot props and render functions, so item is typed as your model:

Vue

<script setup lang="ts">
import { Table, type TableResource } from '@inertiaui/table-vue'

interface User {
    id: number
    name: string
    email: string
    is_admin: boolean
}

defineProps<{
    users: TableResource<User>
}>()
</script>

React

import { Table, type TableResource } from '@inertiaui/table-react'

interface User {
    id: number
    name: string
    email: string
    is_admin: boolean
}

export default function Users({ users }: { users: TableResource<User> }) {
    return <Table resource={users} />
}

Typed Slots (Vue)

Passing TableResource<User> to the resource prop automatically types every slot prop. The item in cell slots is typed as User, so you get autocomplete for item.name, item.email, and so on:

<Table :resource="users">
    <template #cell(name)="{ item, column, value }">
        <!-- item is typed as User; item.name, item.email autocomplete -->
        <span>{{ item.name }}</span>
    </template>

    <template #header(email)="{ column }">
        <!-- column is typed as TableColumn -->
        <span>{{ column.header }}</span>
    </template>

    <template #topbar="{ table, actions }">
        <!-- table: UseTableReturn, actions: UseActionsReturn -->
        <span v-if="table.isNavigating">Loading...</span>
    </template>
</Table>

Typed Render Props (React)

In React, the generic T is automatically inferred from the resource prop, so no explicit <Table<User>> is needed. The item in cell render functions is typed as your model:

<Table
    resource={users}
    cell={{
        name: ({ item, column, value }) => (
            // item is typed as User; item.name, item.email autocomplete
            <span>{item.name}</span>
        ),
    }}
    header={{
        email: ({ column }) => (
            <span>{column.header}</span>
        ),
    }}
    topbar={({ table, actions }) => (
        <span>{table.isNavigating ? 'Loading...' : ''}</span>
    )}
/>

Typed Callbacks

Event handlers and callbacks are also typed with your model:

Vue

<script setup lang="ts">
function handleRowClick(item: User) {
    console.log(item.name) // fully typed
}
</script>

<template>
    <Table :resource="users" :on-row-click="handleRowClick" />
</template>

React

function handleRowClick(item: User) {
    console.log(item.name) // fully typed
}

<Table resource={users} onRowClick={handleRowClick} />

Available Types

Type	Description
TableResource<T>	The full table resource passed from PHP via Inertia props
TableItem<T>	A single row item with optional _primary_key
TableColumn	Column configuration (attribute, header, sortable, toggleable, etc.)
TableFilter	Filter configuration (type, clauses, options, date picker settings)
TableAction	Action configuration (label, url, confirmation, variant, etc.)
TableExport	Export configuration (label, url)
TableState	Current table state (page, sort, search, filters, columns)
UseTableReturn	Return type of useTable() (table methods and state)
UseActionsReturn	Return type of useActions() (action methods and selection)
TableSlotProps	Base slot props (table + actions)
HeaderSlotProps	Header slot props (extends TableSlotProps with column)
CellSlotProps<T>	Cell slot props (extends TableSlotProps with item, column, value)
ImageSlotProps<T>	Image slot props (extends CellSlotProps with src)
TableProps<T>	React Table component props (render functions, callbacks)

Composable Types

The useTable and useActions composables/hooks return typed objects:

Vue

import { useTable, useActions, type UseTableReturn, type UseActionsReturn } from '@inertiaui/table-vue'

React

import { useTable, useActions, type UseTableReturn, type UseActionsReturn } from '@inertiaui/table-react'