Icons

At several places in the package, such as Row Links and Actions and the Badge Column, you can add icons to provide additional context to the user. The package doesn't come with a built-in icon set, but it provides a way to resolve icons from any icon set that you want to use.

Heroicons example

Let's take the Heroicons set as an example. On your Page, you can import the icon set and define a resolver method that will be used to resolve the icon name to the actual icon component. This method should be passed 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 can do it inline without defining a separate method:

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]} />
    );
}

Resolve icons globally

To prevent defining the icon resolver method on each Page, you can define it globally in your app.js file. You can import the setIconResolver function and pass the resolver method to it.

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])

Note that the resolver method receives a second argument, context, which is an object passed from the component, such as an Action or Badge Column. This can be useful if you want to resolve the icon based on the label or other properties. Check out the Custom Table documentation for more information about the properties.

Use multiple icon sets

If you want to use multiple icon sets, you can define a resolver method that will resolve the icon based on the icon set. Here's an example using the Heroicons and Bootstrap Icons set:

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

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

Of course, there are many other ways to resolve icons. If you use a limited set of icons, you can define a mapping object that maps the icon names to the actual components.

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

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