Custom Table Component

Inertia Table may be used in a fully headless mode: discard the default <Table> component, build your own Vue or React component, and still use every feature of the package through the useTable and useActions composables. This is ideal for list views, card grids, or any layout that doesn't fit a tabular shape but still needs filtering, sorting, and actions.

Alternative: For programmatic access to the default Table component's methods and state without building a custom one from scratch, use Template Refs instead. They expose the same useTable and useActions functionality.

Advanced usage

The composables on this page are stable and fully supported, but the custom components you build with them are your own. We're happy to help with questions about the useTable and useActions API itself, but we cannot debug or maintain custom table implementations.

Creating a Custom Table

Create a new React or Vue component and import the useActions and useTable composables from @inertiaui/table. useTable exposes the table state; useActions exposes Row Actions and Bulk Actions.

The React and Vue versions differ slightly.

Vue

<script setup>
import { useActions, useTable } from '@inertiaui/table-vue'

const props = defineProps('resource')

const {
    addFilter,
    hasBulkActions,
    hasFilters,
    isNavigating,
    isSortedByColumn,
    removeFilter,
    setPerPage,
    setSort,
    state,
    toggleColumn
    visitTableUrl,
} = useTable(props.resource)

const {
    allItemsAreSelected,
    isPerformingAction,
    performAction,
    selectedItems
    toggleItem,
} = useActions()
</script>

React

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

const Table = ({ resource }) => {
    const {
        addFilter,
        hasBulkActions,
        hasExports,
        hasFilters,
        isNavigating,
        isSortedByColumn,
        removeFilter,
        setFilter,
        setPerPage,
        setSearch,
        setSort,
        sortByColumn,
        state,
        toggleColumn,
        visitTableUrl,
    } = useTable(resource)

    const {
        allItemsAreSelected,
        isPerformingAction,
        performAction,
        selectedItems
        toggleItem,
    } = useActions()
}

The Resource Object

The resource prop is the data that is passed to your component, originating from the Laravel backend. The resource object contains the following data:

Key	Description
actions	The actions of the table
columns	The columns of the table
debounceTime	The debounce time for the search input and filters
defaultPerPage	The default per page value
defaultSort	The default sort value
exports	The exports of the table
filters	The filters of the table
name	The name of the table
pagination	Whether the table should paginate
perPageOptions	The options for the per page select
results	The results of the query (the actual data)
search	The attributes that are searchable
state	The state of the table

Columns

The columns key is an array of objects that define the columns of the table. Each column object has the following properties:

Key	Description
alignment	The alignment of the column (left, center, right)
attribute	The attribute of the Eloquent model
header	The title of the column
meta	The custom Metadata of the column
sortable	Whether the column is sortable
toggleable	Whether the column can be toggled
visibleByDefault	Whether the column is visible by default

Filters

The filters key is an array of objects that define the filters of the table. Each filter object has the following properties:

Key	Description
attribute	The attribute of the Eloquent model that should be filtered
clauses	The available clauses of the filter
label	The label of the filter
meta	The custom Metadata of the filter
type	The type of the filter (text, numeric, set, date, boolean)

Actions

The actions key is an array of objects that define the actions of the table. Each action object has the following properties:

Key	Description
asBulkAction	Whether the action should be displayed as a bulk action
asRowAction	Whether the action should be displayed as a row action
authorized	Whether the user is authorized to perform the action
confirmationCancelButton	The label of the confirmation dialog cancel button
confirmationConfirmButton	The label of the confirmation dialog confirm button
confirmationMessage	The message of the confirmation dialog
confirmationRequired	Whether the action requires confirmation
confirmationTitle	The title of the confirmation dialog
dataAttributes	The custom Data Attributes of the action
icon	The custom icon of the action
isLink	Whether the action is a link
label	The label of the action
meta	The custom Metadata of the action
showLabel	Whether the label should be displayed
style	The style of the action
url	The URL of the action

Exports

The exports key is an array of objects that define the exports of the table. Each export object has the following properties:

Key	Description
label	The label of the export
authorized	Whether the user is authorized to perform the export
url	The URL of the export
dataAttributes	The custom Data Attributes of the export
meta	The custom Metadata of the export

State

The state key is an object that contains the state of the table. The state object has the following properties:

Key	Description
columns	An object that contains the visibility of the columns
filters	An object that contains the filter state (enabled, value, clause)
perPage	The per page value
search	The search value
sort	The sort value

Implementing the Custom Table

With the useActions and useTable composables and the resource object in hand, you may start building your template. Studying the default Table component is highly recommended to see how the features fit together.

For example, to create the header of the table, you may combine the resource.columns object with the state.columns object to show or hide columns based on the state.

Vue

<th
    v-for="(column, key) in resource.columns"
    v-show="state.columns[column.attribute]"
    :key="key"
>

React

{resource.columns.map((column, key) => state.columns[column.attribute] && <th key={key}>{/*  */}</th>)}

Metadata

You may attach metadata to Actions and Links, Columns, Exports, and Filters. The default Table component ignores this metadata, but it's useful when building a custom Table component.