Icons

Inertia Table doesn't ship a built-in icon set. Instead, it lets you wire up any icon library (like Heroicons, Bootstrap Icons, your own, etc.) through a resolver function that maps icon name strings to Vue or React components. Set the resolver per page on the <Table> component, or globally in your app.js so every action, badge column, and empty state in your app uses the same icons.

Icons appear in several places across the UI, including Row Links and Actions, the Badge Column, and the Empty State.

Heroicons Example

Take the Heroicons set as an example. On your page, import the icon set and define a resolver function that maps an icon name to the actual component. Pass this function to the Table component:

Vue

<script setup>
import { Table } from '@inertiaui/table-vue'
import * as Icons from '@heroicons/vue/24/outline'

defineProps({
    users: Object,
})

function resolveIcon(icon) {
    return Icons[icon]
}
</script>

<template>
    <Table :resource="users" :icon-resolver="resolveIcon" />
</template>

React

import { Table } from '@inertiaui/table-react'
import * as Icons from '@heroicons/react/24/outline'

export default function Users({ users }) {
    function resolveIcon(icon) {
        return Icons[icon]
    }

    return (
        <Table resource={users} iconResolver={resolveIcon} />
    )
}

Alternatively, you may do it inline without defining a separate function:

Vue

<template>
    <Table :resource="users" :icon-resolver="(icon) => Icons[icon]" />
</template>

React

export default function Users({ users }) {
    return (
        <Table resource={users} iconResolver={(icon) => Icons[icon]} />
    )
}

Resolving Icons Globally

To avoid defining the resolver on every page, register it globally in your app.js file by importing setIconResolver and passing it the resolver function:

Vue

import { setIconResolver } from '@inertiaui/table-vue'
import * as Icons from '@heroicons/vue/24/outline'

setIconResolver((icon, context) => Icons[icon])

React

import { setIconResolver } from '@inertiaui/table-react'
import * as Icons from '@heroicons/react/24/outline'

setIconResolver((icon, context) => Icons[icon])

The resolver receives a second argument, context, which is an object passed from the component (such as an Action or Badge Column). This is useful for resolving the icon based on the label or other properties. See the Custom Table documentation for the full list of properties.

Using Multiple Icon Sets

To mix icon sets, define a resolver that picks the correct one per icon. Here's an example combining Heroicons and Bootstrap Icons:

import * as BootstrapIcons from 'bootstrap-icons-vue'
import * as Heroicons from '@heroicons/vue/24/outline'

setIconResolver(icon => icon.startsWith('BIcon') ? BootstrapIcons[icon] : Heroicons[icon])

There are many other ways to resolve icons. For a small, fixed set, you may define a mapping object that maps icon names to components:

import { BIconTrashFill } from 'bootstrap-icons-vue'
import { PencilIcon } from '@heroicons/vue/24/outline'

setIconResolver(icon => ({
    Pencil: PencilIcon,
    Trash: BIconTrashFill,
}[icon]))