Custom Table Component

Introduction

If you want to use this package in a headless way, you can totally discard the default Table component and create your own while still using all the features of the package. This way you can create a table that fits your design perfectly. It's also great for creating other components like a list or a grid view, and still use the filtering and sorting logic.

Creating a Custom Table

To create a custom table, you need to create a new React or Vue component and import the useActions and useTable composable functions from the inertiaui/table package. You can then use the useTable function to interact with the table state and the useActions function to interact with the Row Actions and Bulk Actions.

Please note that the React and Vue versions slightly differ.

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

How to implement the Custom Table

Now that you have the useActions and useTable composable functions and the resource object, you can start implementing the template of your custom table. It is highly recommended to study the default Table component to see how the table is structured and how the features are implemented.

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 can add metadata to Actions and Links, Columns, Exports, and Filters. This metadata is not used in the default Table component but can be useful when building a custom Table component.