TypeScript Types

All types are exported from @/types/table-builder.

import type {
    TableData,
    Column,
    PaginationData,
    PaginationLink,
    Filter,
    SearchInput,
    BulkAction,
    RowAction,
    EmptyState,
    ReorderConfig,
    QueryKeys,
    Totals,
    ExportConfig,
    DateRangePreset,
} from '@/types/table-builder'

TableData

The top-level prop type for <TableBuilder>. Matches the array returned by TableBuilder::toArray().

interface TableData {
    data: any[]                         // each row carries its raw row key as __key
    columns: Column[]
    pagination?: PaginationData
    filters: Filter[]
    searchInputs: Record<string, SearchInput>
    perPageOptions: number[]
    defaultSort: string
    bulkActions: BulkAction[]
    rowLinks: (string | null)[]
    rowLinkType: 'modal' | 'link' | ''
    cellClass?: string
    headClass?: string
    rowActions?: RowAction[][]          // one list per row
    emptyState?: EmptyState
    rowKey?: string                     // the field that identifies a row, 'id' when missing
    reorder?: ReorderConfig | null
    queryKeys?: QueryKeys
    totals?: Totals | null
    export?: ExportConfig | null
    columnToggle?: boolean              // false hides the "Columns" menu
    poll?: number                       // seconds between reloads, only with ->poll()
}

interface RowAction {
    key: string
    label: string
    url: string
    method: 'get' | 'post' | 'put' | 'patch' | 'delete'
    confirm: string | null              // already resolved for this row
    variant: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
    disabled: boolean
    disabledReason: string | null
    download?: boolean | string         // only on download actions
    icon?: string                       // only on actions with an icon
}

interface Totals {
    label: string | null
    values: Record<string, string | number | null>
}

interface ExportConfig {
    label: string
    url: string | null
}

interface DateRangePreset {
    key: string
    label: string
}

interface EmptyState {
    title?: string | null
    description?: string | null
    filteredTitle?: string | null
    filteredDescription?: string | null
}

interface ReorderConfig {
    column: string
    key: string           // the row property sent as id
    url: string | null
}

interface QueryKeys {
    sort: string
    filter: string
    page: string
    perPage: string
    columns: string
}

Column

interface Column {
    key: string
    label: string
    can_be_hidden: boolean
    hidden: boolean
    sortable: boolean
    sorted: 'asc' | 'desc' | false
    highlight: boolean
    class: string
    alignment: string
    clickable: boolean
    boolean: boolean
}

PaginationData

Present when the resource was paginated. Absent when using noPagination() or a plain collection.

interface PaginationData {
    current_page: number
    from: number | null
    to: number | null
    total: number
    per_page: number
    last_page: number
    links: PaginationLink[]
    first_page_url: string | null
    last_page_url: string | null
    next_page_url: string | null
    prev_page_url: string | null
}

interface PaginationLink {
    url: string | null
    label: string
    active: boolean
}

Filter

interface Filter {
    key: string
    label: string
    options: Record<string, string>   // { value: 'Label' }
    value?: string | null
    type: 'select' | 'text' | 'date' | 'date_range'   // a date_range value is 'from..to'
}

SearchInput

interface SearchInput {
    key: string
    label: string
    value?: string | null
}

BulkAction

interface BulkAction {
    key: string
    label: string
    url: string              // signed POST URL
    confirm: boolean | string
    confirmText: string
    confirmButton: string
    cancelButton: string
    requirePassword: boolean | string
    choices?: BulkActionChoice[]
    choicesLabel?: string
}

interface BulkActionChoice {
    value: string
    label: string
}

interface ConfirmDetails {
    text: string | null          // confirmText of a bulk action
    confirmButton: string | null
    cancelButton: string | null
}

Transport Types

Exported from @/composables for the http transport. See HTTP Transport.

import type {
    TableAdapter,
    TableFetcher,
    TableQuery,
    TableResponse,
    TableTransport,
} from '@/composables'

type TableTransport = 'inertia' | 'http'

interface TableQuery {
    sort: string | null
    filters: Record<string, string>
    search: string
    page: number
    perPage: number | null
}

interface TableResponse {
    data: any[]
    pagination?: PaginationData | null
}

type TableFetcher = (query: TableQuery, source: string) => Promise<unknown>

type TableAdapter = (payload: any) => TableResponse

Usage in Vue Pages

<script setup lang="ts">
import type { TableData } from '@/types/table-builder'

defineProps<{
    table: TableData
}>()
</script>

Typing Table Data from Inertia

When using usePage() to access Inertia shared props:

import { usePage } from '@inertiajs/vue3'
import type { TableData } from '@/types/table-builder'

const page = usePage<{ table: TableData }>()
const table = page.props.table