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 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.

vue

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

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>

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
`sortable`	Whether the column is sortable
`toggleable`	Whether the column can be toggled

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
`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
`isLink`	Whether the action is a link
`label`	The label of the action
`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

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"
>

Custom Table Component ​

Introduction ​

Creating a Custom Table ​

The Resource Object ​

Columns ​

Filters ​

Actions ​

Exports ​

State ​

How to implement the Custom Table ​