Inertia Table

https://inertiaui.com/inertia-table/docs/
Admin
Inertia Table is an Eloquent-powered interactive data table component for Laravel and Inertia.js,...
Tokens:46,852
Snippets:674
Trust Score:6.6
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Eloquent Power Joins

Source: https://inertiaui.com/inertia-table/docs/sorting

To sort by columns on related models, install the Eloquent Power Joins package.

```bash
composer require kirschbaum-development/eloquent-power-joins
```

--------------------------------

### Install Laravel Excel

Source: https://inertiaui.com/inertia-table/docs/exporting

Before defining exports, ensure the Laravel Excel package is installed using Composer.

```bash
composer require maatwebsite/excel
```

--------------------------------

### Install Inertia Table Composer Package

Source: https://inertiaui.com/inertia-table/docs/installation-react

Install the Inertia Table package using Composer. Ensure your Composer authentication is correctly configured.

```bash
composer require inertiaui/table:^4.0
```

--------------------------------

### Install Inertia Table Vue NPM Package (npm)

Source: https://inertiaui.com/inertia-table/docs/installation-vue

Install the Inertia Table Vue NPM package using npm. This creates a symlink in node_modules to the vendor directory.

```bash
npm install vendor/inertiaui/table/vue
```

--------------------------------

### Install Inertia Table Vue NPM Package (pnpm)

Source: https://inertiaui.com/inertia-table/docs/installation-vue

Install the Inertia Table Vue NPM package using pnpm with the file: protocol. This ensures correct dependency resolution.

```bash
pnpm add file:vendor/inertiaui/table/vue
```

--------------------------------

### Install Inertia Table React NPM Package (npm)

Source: https://inertiaui.com/inertia-table/docs/installation-react

Install the React NPM package for Inertia Table. This command creates a symlink in node_modules to the vendor directory.

```bash
npm install vendor/inertiaui/table/react
```

--------------------------------

### Install Inertia Table React NPM Package (pnpm)

Source: https://inertiaui.com/inertia-table/docs/installation-react

Install the React NPM package for Inertia Table using pnpm. The 'file:' protocol is required for correct dependency resolution.

```bash
pnpm add file:vendor/inertiaui/table/react
```

--------------------------------

### Set Week Start Day in DateFilter

Source: https://inertiaui.com/inertia-table/docs/filtering

Configure the starting day of the week (0 for Sunday, 1 for Monday, etc.) using weekStartsOn().

```php
DateFilter::make('created_at')->weekStartsOn(0); // Sunday
```

--------------------------------

### React Custom Table Setup

Source: https://inertiaui.com/inertia-table/docs/custom-table

Imports and initializes `useActions` and `useTable` hooks for a custom React table component. Requires the `resource` prop.

```jsx
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()
}
```

--------------------------------

### Add Satis Repository to Composer

Source: https://inertiaui.com/inertia-table/docs/installation-react

Add the Inertia UI Composer repository to your composer.json file to enable package installation.

```json
{
    "repositories": [
        {
            "type": "composer",
            "url": "https://satis.inertiaui.com"
        }
    ]
}
```

--------------------------------

### Vue Custom Table Setup

Source: https://inertiaui.com/inertia-table/docs/custom-table

Imports and initializes `useActions` and `useTable` composables for a custom Vue table component. Requires the `resource` prop.

```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: Global Icon Resolver Setup

Source: https://inertiaui.com/inertia-table/docs/icons

Sets a global icon resolver for all Inertia Table components using Heroicons.

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

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

--------------------------------

### Vue: Global Icon Resolver Setup

Source: https://inertiaui.com/inertia-table/docs/icons

Sets a global icon resolver for all Inertia Table components using Heroicons.

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

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

--------------------------------

### Set Date Picker Translations

Source: https://inertiaui.com/inertia-table/docs/translations

Override date picker specific translations by prefixing keys with `date_picker_`. This example shows how to set month names, weekday abbreviations, AM/PM labels, and placeholder text.

```js
setTranslations({
    date_picker_months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
    date_picker_months_short: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
    date_picker_days: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
    date_picker_am: 'VM',
    date_picker_pm: 'NM',
    date_picker_select_date: 'Selecteer datum',
})
```

--------------------------------

### Run Database Migrations

Source: https://inertiaui.com/inertia-table/docs/views-bookmarks

Create the 'views' table in your database by running the published migration. This is required after publishing the migrations.

```bash
php artisan migrate
```

--------------------------------

### Configure Text Column Properties with Fluent Methods

Source: https://inertiaui.com/inertia-table/docs/columns

Instead of using arguments in `make()`, configure column properties like header, sorting, searching, toggling, alignment, wrapping, truncation, and CSS classes using fluent methods.

```php
TextColumn::make('name')
    ->header('Full Name')
    ->sortable()
    ->notSortable()
    ->searchable()
    ->notSearchable()
    ->toggleable()
    ->notToggleable()
    ->align(ColumnAlignment::Right)
    ->leftAligned()
    ->centerAligned()
    ->rightAligned()
    ->wrap()
    ->truncate(3)
    ->headerClass('font-semibold')
    ->cellClass('text-blue-600 font-semibold');
```

--------------------------------

### Before and After Callbacks for Bulk Actions

Source: https://inertiaui.com/inertia-table/docs/bulk-actions

Use `before` and `after` callbacks to execute logic before and after a bulk action. Both callbacks receive an array of model IDs.

```php
Action::make(
    label: 'Activate',
    before: fn (array $ids) => Log::info('Activating users...', ['ids' => $ids]),
    handle: fn (User $user) => $user->activate(),
    after: fn () => session()->flash('success', 'Users activated successfully')
)->asBulkAction();
```

--------------------------------

### Configure Row Action Confirmation via make() Method

Source: https://inertiaui.com/inertia-table/docs/row-actions

Alternatively, confirmation can be configured directly within the `make()` method by setting `confirmationRequired` to `true` and providing the confirmation texts as named arguments. This approach consolidates configuration.

```php
Action::make(
    label: 'Delete',
    handle: fn (User $user) => $user->delete(),
    confirmationRequired: true,
    confirmationTitle: 'Delete User',
    confirmationMessage: 'Are you sure you want to delete this user?',
    confirmationConfirmButton: 'Delete',
    confirmationCancelButton: 'Cancel'
);
```

--------------------------------

### Configure Prefetching for Row Links

Source: https://inertiaui.com/inertia-table/docs/row-links

Instruct Inertia to prefetch link URLs before a user clicks by calling `prefetch()` on the Url object. This can improve perceived performance.

```php
Action::make('Edit', fn (User $user, Url $url) => $url
    ->route('users.edit', $user)
    ->prefetch()
);
```

```php
->prefetch('hover')  // prefetch on hover
->prefetch('mount')  // prefetch when the component mounts
->prefetch('click')  // prefetch on mousedown, before click fires
```

```php
->prefetch('hover', cacheFor: '1m')            // cache for 1 minute
->prefetch('hover', cacheFor: ['30s', '1m'])   // stale after 30s, expire after 1m
```

--------------------------------

### Basic Usage with Template Refs

Source: https://inertiaui.com/inertia-table/docs/template-refs

Demonstrates how to attach a template ref to the default `<Table>` component and call its exposed methods.

```APIDOC
## Basic Usage with Template Refs

This section shows how to use template refs to access the table's methods.

### Vue Example
```vue
<script setup>
import { ref } from 'vue'
import { Table } from '@inertiaui/table-vue'

const props = defineProps({
    users: Object,
})

const tableRef = ref()

function addFilter() {
    const filter = props.users.filters.find(f => f.attribute === 'status')
    tableRef.value.addFilter(filter)
}

function selectAll() {
    tableRef.value.toggleItem('*')
}
</script>

<template>
    <Table ref="tableRef" :resource="users" />
</template>
```

### React Example
```jsx
import { useRef } from 'react'
import { Table } from '@inertiaui/table-react'

export default function Users({ users }) {
    const tableRef = useRef()

    function addFilter() {
        const filter = users.filters.find(f => f.attribute === 'status')
        tableRef.current.addFilter(filter)
    }

    function selectAll() {
        tableRef.current.toggleItem('*')
    }

    return <Table ref={tableRef} resource={users} />
}
```
```

--------------------------------

### Apply Helper Button Styles to Row Action

Source: https://inertiaui.com/inertia-table/docs/row-actions

Use the provided helper methods like `asDangerButton()`, `asSuccessButton()`, etc., to quickly apply predefined styles to a row action button. These methods offer a concise way to set button variants.

```php
Action::make(...)->asDangerButton();
```

```php
Action::make(...)->asDefaultButton();
```

```php
Action::make(...)->asInfoButton();
```

```php
Action::make(...)->asPrimaryButton();
```

```php
Action::make(...)->asSuccessButton();
```

```php
Action::make(...)->asWarningButton();
```

--------------------------------

### Use Helper Methods for Row Link Variants

Source: https://inertiaui.com/inertia-table/docs/row-links

Employ helper methods like `asDangerLink()` or `asSuccessLink()` for quick styling of row links. Note that `asPrimaryLink()` is an alias for `asInfoLink()`.

```php
Action::make(...)->asDangerLink();
Action::make(...)->asDefaultLink();
Action::make(...)->asInfoLink();
Action::make(...)->asPrimaryLink(); // alias of asInfoLink()
Action::make(...)->asSuccessLink();
Action::make(...)->asWarningLink();
```

--------------------------------

### Make Rows Unselectable

Source: https://inertiaui.com/inertia-table/docs/bulk-actions

Implement the `isSelectable` method to control row selectability. This example makes trashed rows unselectable.

```php
use Illuminate\Database\Eloquent\Model;

class Users extends Table
{
    public function isSelectable(Model $model): bool
    {
        return ! $model->trashed();
    }
}
```

--------------------------------

### Configure Modal Options with ModalVisit Builder

Source: https://inertiaui.com/inertia-table/docs/inertia-modal-integration

Utilize the `ModalVisit` and `ModalConfig` classes for typed control over modal options. This approach offers better code completion and type safety when configuring modals.

```php
use InertiaUI\Modal\ModalConfig;
use InertiaUI\Modal\ModalVisit;

$url->route('users.edit', $user)->modal(
    ModalVisit::make()
        ->navigate()
        ->config(ModalConfig::make()->slideover())
);
```

--------------------------------

### Custom User ID Resolver

Source: https://inertiaui.com/inertia-table/docs/views-bookmarks

Provide a custom closure to resolve the user ID for Views, allowing for non-standard authentication setups.

```php
Views::make(userResolver: fn () => current_user()->uuid);

Views::make()->userResolver(fn () => current_user()->uuid);
```

--------------------------------

### Publish Inertia Table Migrations

Source: https://inertiaui.com/inertia-table/docs/views-bookmarks

Publish the database migration for the views table to your project. This command should be run before migrating.

```bash
php artisan vendor:publish --tag=inertia-table-migrations
```

--------------------------------

### Define Inertia Table Class

Source: https://inertiaui.com/inertia-table/docs/introduction

Example of a typical Inertia Table class definition. This class configures columns, filters, and actions for the data table.

```php
class Users extends Table
{
    protected ?string $resource = User::class;

    public function columns(): array
    {
        return [
            Columns\TextColumn::make('id', 'ID', toggleable: false),
            Columns\TextColumn::make('name', 'Full Name', sortable: true),
            Columns\TextColumn::make('email', sortable: true),
            Columns\DateColumn::make('email_verified_at'),
            Columns\ActionColumn::new(),
        ];
    }

    public function filters(): array
    {
        return [
            Filters\TextFilter::make('name', 'Full Name'),
            Filters\TextFilter::make('email'),
            Filters\BooleanFilter::make('is_admin', 'Admin'),
            Filters\DateFilter::make('email_verified_at')->nullable(),
        ];
    }

    public function actions(): array
    {
        return [
            Action::make('Deactivate', handle: fn (User $user) => $user->deactivate())
                ->asDangerButton()
                ->asBulkAction()
                ->confirm(
                    title: 'Deactivate User',
                    message: 'Are you sure you want to deactivate this user? This will remove their verified email status.',
                    confirmButton: 'Deactivate',
                )
        ];
    }
}
```

--------------------------------

### Add Icon to Row Link

Source: https://inertiaui.com/inertia-table/docs/row-links

Incorporate an icon into a row link using the `icon()` method or the `icon` argument in `make()`. Refer to the Icons documentation for setup details.

```php
Action::make(
    label: 'Edit',
    url: fn (User $user) => route('users.edit', $user),
    icon: 'PencilIcon'
);
```

--------------------------------

### Custom Export Redirect Response

Source: https://inertiaui.com/inertia-table/docs/exporting

Use `asDownload(false)` to prevent direct download and instead redirect the user. The `using` callback should return a redirect response.

```php
Export::make()
    ->asDownload(false)
    ->using(function () {
        return to_route('dashboard');
    });
```

--------------------------------

### Target Row Links with CSS using Data Attributes

Source: https://inertiaui.com/inertia-table/docs/row-links

Style row links by targeting their data attributes directly in CSS. For example, to style a link with `data-action="edit-user"`.

```css
button[data-action="edit-user"] {
    /* ... */
}
```

--------------------------------

### Set HTTP Method for Row Actions

Source: https://inertiaui.com/inertia-table/docs/row-actions

Override the default GET method for row actions to use POST, DELETE, or other HTTP verbs. Ensure your backend route supports the specified method.

```php
Action::make('Approve')
    ->url(fn (User $user) => route('users.approve', $user))
    ->method('POST');

Action::make('Delete')
    ->url(fn (User $user) => route('users.destroy', $user))
    ->method('DELETE')
    ->asDangerButton();
```

--------------------------------

### Configure Set Filter Options

Source: https://inertiaui.com/inertia-table/docs/filtering

Populate the select options for a SetFilter by passing an array of key-value pairs to the `options` method.

```php
SetFilter::make('status')->options([
    'active' => 'Active',
    'inactive' => 'Inactive',
]);
```

--------------------------------

### Set Default Queue Name and Disk

Source: https://inertiaui.com/inertia-table/docs/exporting

Configure default queue names and disks for all exports globally using static methods on the `Export` class, typically in `AppServiceProvider`.

```php
use InertiaUI\Table\Export;

Export::defaultQueueName('exports');
Export::defaultQueueDisk('s3');
```

--------------------------------

### Target Rows With CSS Using Data Attributes

Source: https://inertiaui.com/inertia-table/docs/row-data-attributes

You may target rows by their data attributes using CSS selectors. This example shows how to style rows with the `data-user-type="admin"` attribute.

```css
tr[data-user-type="admin"] {
    /* ... */
}
```

--------------------------------

### Customize Global Slots in Vue and React

Source: https://inertiaui.com/inertia-table/docs/slots

Use the 'filters' slot in Vue or the 'filters' render prop in React to inject custom content into the filters area. This example shows how to display messages based on the filter state and selection status.

```vue
<Table :resource="users">
    <template #filters="{ table, actions }">
        <p v-if="!table.hasFilters">No filters applied.</p>
        <p v-if="actions.allItemsAreSelected">All items are selected!</p>
    </template>
</Table>
```

```jsx
<Table
    resource={users}
    filters={({ table, actions }) => (
        <>
            <p>{table.hasFilters ? 'Filters applied!' : 'No filters applied.'}</p>
            <p>{actions.allItemsAreSelected ? 'All items are selected!' : ''}</p>
        </>
    )}
/>
```

--------------------------------

### Configure Text Column Options

Source: https://inertiaui.com/inertia-table/docs/columns

Pass additional named arguments to `TextColumn::make()` to enable sorting, searching, and toggling, or to set alignment and text wrapping/truncation.

```php
TextColumn::make('name', 'Full Name', sortable: false, searchable: true, toggleable: true);
```

--------------------------------

### Transform Eloquent Model Data in Inertia Table

Source: https://inertiaui.com/inertia-table/docs/transform-eloquent-model-data

Implement `transformModel` to return a completely new array of transformed data for each model. This method receives the Eloquent model instance and the auto-derived data array. Use this to fully control the row payload, for example, to mask emails or generate full names.

```php
use Illuminate\Support\Str;

class Users extends Table
{
    public function transformModel(Model $model, array $data): array
    {
        return [
            'key' => $model->id,
            'name' => $model->generateFullName(),
            'email' => Str::mask($model->email),
        ];
    }
}
```

--------------------------------

### Configure Composer Global Authentication

Source: https://inertiaui.com/inertia-table/docs/installation-react

Configure Composer globally to authenticate with the Satis repository using your email and license key. This stores credentials in ~/.composer/auth.json.

```bash
composer config --global --auth http-basic.satis.inertiaui.com "your-email-address" "your-license-key"
```

--------------------------------

### ActionColumn Initialization

Source: https://inertiaui.com/inertia-table/docs/columns

Initialize an `ActionColumn` using the static `new()` method, providing the column header text as an argument. This column type is used for action buttons and links.

```php
ActionColumn::new('Actions');
```

--------------------------------

### Configure Composer Server Authentication

Source: https://inertiaui.com/inertia-table/docs/installation-react

Configure Composer on a server to authenticate with the Satis repository. This is typically done via environment variables or build scripts.

```bash
composer config http-basic.satis.inertiaui.com "your-email-address" "your-license-key"
```

--------------------------------

### Configure Modal Options with ModalConfig Builder

Source: https://inertiaui.com/inertia-table/docs/inertia-modal-integration

When only modal configuration is needed, use the `ModalConfig` class directly. This simplifies the process for common slideover or modal settings.

```php
use InertiaUI\Modal\ModalConfig;

$url->route('users.edit', $user)->modal(
    ModalConfig::make()->slideover()
);
```

--------------------------------

### Configure Row Links for File Downloads

Source: https://inertiaui.com/inertia-table/docs/row-links

To enable file downloads via row links, use `asDownload()` on the Action or Url object, or specify `downloadUrl` when making the action.

```php
// Call 'asDownload()' on the Action object
Action::make('Invoice', fn (Order $order) => $order->invoice_url)->asDownload();
```

```php
// Call 'asDownload()' on the Url object
Action::make('Invoice', fn (Order $order, Url $url) => $url->to($order->invoice_url)->asDownload());
```

```php
// Use the 'downloadUrl' argument in the 'make()' method
Action::make('Invoice', downloadUrl: fn (Order $order) => $order->invoice_url);
```

--------------------------------

### Namespacing Tables in Controller (PHP)

Source: https://inertiaui.com/inertia-table/docs/multiple-tables

Use the `as()` method on subsequent tables to give them unique URL prefixes. This prevents query string conflicts when multiple tables are present on the same page.

```php
use App\Tables\Crons;
use App\Tables\Daemons;

class UsersController
{
    public function index()
    {
        return inertia('Users', [
            'crons' => Crons::make(),
            'daemons' => Daemons::make()->as('daemons'),
        ]);
    }
}
```

--------------------------------

### Make Column Stickable via Method

Source: https://inertiaui.com/inertia-table/docs/sticky-columns-and-header

Call the `stickable()` method on a column instance to make it stickable.

```php
TextColumn::make('name')->stickable();
```

--------------------------------

### Queued Export with Filename and Disk

Source: https://inertiaui.com/inertia-table/docs/exporting

Queue exports for large datasets using the `queue()` method, specifying the filename and storage disk. This shows a dialog to the user while processing.

```php
Export::make()->queue(
    filename: 'data-export.xlsx',
    disk: 's3'
);
```

--------------------------------

### Render Image in TextColumn

Source: https://inertiaui.com/inertia-table/docs/images

Use the `image()` method on a `TextColumn` to prepend an image to the text. Configure the image URL using a callback that receives the model and an `Image` instance.

```php
use InertiaUI\Table\Image;

TextColumn::make('name')->image(function (User $user, Image $image) {
    return $image->url($user->avatar_url);
});
```

--------------------------------

### Configure Composer Project Authentication

Source: https://inertiaui.com/inertia-table/docs/installation-react

Configure Composer for a specific project to authenticate with the Satis repository. This stores credentials in the project's auth.json file.

```json
{
    "http-basic": {
        "satis.inertiaui.com": {
            "username": "your-email-address",
            "password": "your-license-key"
        }
    }
}
```

--------------------------------

### Combine All DateFilter Options

Source: https://inertiaui.com/inertia-table/docs/filtering

Demonstrates combining multiple DateFilter options for comprehensive date filtering capabilities, including time, timezone, range constraints, presets, and display settings.

```php
DateFilter::make('created_at')
    ->withTime(time24h: true)
    ->browserTimezone()
    ->minDate('2020-01-01')
    ->maxDate('2030-12-31')
    ->numberOfMonths(2)
    ->showWeekNumbers()
    ->clearable()
    ->presets([
        'Today' => now(),
        'This week' => [now()->startOfWeek(), now()->endOfWeek()],
        'This month' => [now()->startOfMonth(), now()->endOfMonth()],
        'This year' => [now()->startOfYear(), now()->endOfYear()],
    ]);
```

--------------------------------

### Enable Prefetching for Row Actions

Source: https://inertiaui.com/inertia-table/docs/row-actions

Instruct Inertia to prefetch the action URL before user interaction using the prefetch() method on the Url object. This can improve perceived performance.

```php
Action::make('Edit')
    ->url(fn (User $user, Url $url) => $url->route('users.edit', $user)->prefetch());
```

--------------------------------

### Define a Bulk Action

Source: https://inertiaui.com/inertia-table/docs/bulk-actions

Define a bulk action using the `asBulkAction` method. This action will be available in the bulk-action menu when rows are selected.

```php
use App\Models\User;
use InertiaUI\Table\Action;

class Users extends Table
{
    public function actions(): array
    {
        return [
            Action::make('Activate', handle: fn (User $user) => $user->activate())->asBulkAction(),
        ];
    }
}
```

--------------------------------

### Redirect Back with Dialog

Source: https://inertiaui.com/inertia-table/docs/exporting

Use `redirectBackWithDialog()` to stay on the same page and display a confirmation dialog. Custom titles and messages can be provided.

```php
Export::make()->redirectBackWithDialog();
```

```php
// With custom title and message
Export::make()->redirectBackWithDialog(
    title: 'Exporting your data',
    message: 'The export is being processed.'
);
```

--------------------------------

### Set Image URL with Image Class Methods

Source: https://inertiaui.com/inertia-table/docs/images

The `Image` class provides several methods to set the image URL, including direct URLs, named routes, signed routes, and temporary signed routes.

```php
$image
    ->url($user->avatar_url)
    ->to($user->avatar_url) // Alias of url()
    ->route('users.avatar', $user) // Equivalent to URL::route()
    ->signedRoute('users.avatar', $user) // Equivalent to URL::signedRoute()
    ->temporarySignedRoute('users.avatar', now()->addHour(), $user); // Equivalent to URL::temporarySignedRoute()
```

--------------------------------

### Style Image with Image Class Methods

Source: https://inertiaui.com/inertia-table/docs/images

Style images using predefined enums or helper methods for rounding, size, and position. Custom classes can also be added.

```php
use InertiaUI\Table\ImagePosition;
use InertiaUI\Table\ImageSize;

// Render the image fully rounded (applies the 'rounded-full' class)
$image->rounded();

// Set the image size using the ImageSize enum
$image->size(ImageSize::Large);

// Helper methods to set image size
$image->small(); // Uses the 'size-4' class
$image->medium(); // Uses the 'size-6' class
$image->large(); // Uses the 'size-8' class
$image->extraLarge(); // Uses the 'size-10' class

// Position the image at the start or end of the cell
$image->position(ImagePosition::Start);

// Helper methods to set image position
$image->start();
$image->end();
```

--------------------------------

### Reinstall NPM Package (React)

Source: https://inertiaui.com/inertia-table/docs/upgrading

Reinstall the Inertia Table NPM package for React after upgrading the Composer package. For pnpm users, use the 'file:' protocol.

```bash
npm install vendor/inertiaui/table/react
```

```bash
pnpm add file:vendor/inertiaui/table/react
```

--------------------------------

### Render Row Links as Buttons

Source: https://inertiaui.com/inertia-table/docs/row-links

Use the `asButton()` method to render row links as buttons instead of text links. This is the default behavior.

```php
Action::make('Edit', fn (User $user) => route('users.edit', $user))->asButton();
```

--------------------------------

### Reinstall NPM Package (Vue)

Source: https://inertiaui.com/inertia-table/docs/upgrading

Reinstall the Inertia Table NPM package for Vue after upgrading the Composer package. For pnpm users, use the 'file:' protocol.

```bash
npm install vendor/inertiaui/table/vue
```

```bash
pnpm add file:vendor/inertiaui/table/vue
```

--------------------------------

### Queued Export with Queue and Delay

Source: https://inertiaui.com/inertia-table/docs/exporting

Configure the queue name and delay for a queued export job using the `withQueuedJob` argument with a Closure.

```php
Export::make()->queue(
    withQueuedJob: fn ($job) => $job->onQueue('exports')->delay(now()->addMinutes(5))
);
```

--------------------------------

### Import UI Primitives for Inertia Table

Source: https://inertiaui.com/inertia-table/docs/slots

Import shared UI components like Button and Dropdown from the Inertia Table package to maintain consistent styling in custom topbar additions.

```js
import { Button, Dropdown, DropdownButton, DropdownHeader, DropdownItem, DropdownSeparator } from '@inertiaui/table-vue'
```

```js
import { Button, Dropdown, DropdownButton, DropdownHeader, DropdownItem, DropdownSeparator } from '@inertiaui/table-react'
```

--------------------------------

### Inject Stateful Resource via Constructor

Source: https://inertiaui.com/inertia-table/docs/eloquent-resource

Inject dependencies like Eloquent models into the Table's constructor to create stateful resources. Ensure the Table component is rendered within a route protected by authentication middleware.

```php
use App\Models\Company;
use App\Tables\Employees;

class CompaniesController
{
    public function show(Company $company)
    {
        return inertia('Companies/Show', [
            'employees' => new Employees($company),
        ]);
    }
}
```

--------------------------------

### Dynamic Row Action Labels

Source: https://inertiaui.com/inertia-table/docs/row-actions

Create dynamic labels for row actions using a closure that receives the model instance. For bulk actions, the closure receives `null` and should provide a generic label.

```php
use App\Models\User;
use InertiaUI\Table\Action;

Action::make(fn (?User $user) => $user ? "Notifications ({$user->unread_count})" : 'Notifications')
    ->handle(fn (User $user) => $user->markNotificationsAsRead());
```

--------------------------------

### Enable Simple Pagination in Inertia Table

Source: https://inertiaui.com/inertia-table/docs/pagination

Switch to simple pagination by setting the `$paginationType` property to `PaginationType::Simple`. This mode displays only the current page number and lacks direct navigation to the last page.

```php
use InertiaUI\Table\PaginationType;

class Users extends Table
{
    protected PaginationType $paginationType = PaginationType::Simple;
}
```

--------------------------------

### Define Dynamic Eloquent Resource with Query Scoping

Source: https://inertiaui.com/inertia-table/docs/eloquent-resource

Use the `resource()` method to return an Eloquent Builder instance for dynamic resource definitions with custom query constraints.

```php
use Illuminate\Database\Eloquent\Builder;

class ActiveAdministrators extends Table
{
    public function resource(): Builder|string
    {
        return User::where('role', 'admin')->whereNotNull('activated_at');
    }
}
```

--------------------------------

### Style Row Action Button with asButton() Method

Source: https://inertiaui.com/inertia-table/docs/row-actions

The `asButton()` method provides a flexible way to style action buttons. It accepts either a `Variant` enum for predefined styles or a custom class name for bespoke styling.

```php
Action::make('Mail Invoice')->asButton(Variant::Success);
```

```php
Action::make('Special Action')->asButton('btn-special');
```

--------------------------------

### JavaScript: Mapping Icon Names to Components

Source: https://inertiaui.com/inertia-table/docs/icons

Defines a resolver using an object map for a small, fixed set of icons.

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

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

--------------------------------

### Define Custom Actions in Frontend

Source: https://inertiaui.com/inertia-table/docs/row-actions

Omit the 'handle' argument in PHP to define custom actions that are managed entirely on the frontend. The frontend callback receives the action, keys, and an onFinish callback.

```php
Action::make('Custom Action');
```

--------------------------------

### Select Specific Columns for Inertia Table Resource

Source: https://inertiaui.com/inertia-table/docs/eloquent-resource

Specify columns to select within the `resource()` method to optimize data retrieval for the table.

```php
public function resource(): Builder|string
{
    return User::select(['id', 'name']);
}
```

--------------------------------

### DateTimeColumn Default Settings

Source: https://inertiaui.com/inertia-table/docs/columns

Configure default format and translation settings for all `DateTimeColumn` instances globally using static methods.

```php
DateTimeColumn::setDefaultFormat('d/m/Y H:i:s');
DateTimeColumn::setDefaultTranslate(true);
```

--------------------------------

### Define Basic Table Export

Source: https://inertiaui.com/inertia-table/docs/exporting

Define export options for a table by returning an Export instance from the `exports()` method in your Table class.

```php
use InertiaUI\Table\Table;

class Users extends Table
{
    public function exports(): array
    {
        return [
            Export::make(),
        ];
    }
}
```

--------------------------------

### Control Column Toggling with Methods

Source: https://inertiaui.com/inertia-table/docs/toggle-columns

Use the `toggleable()` and `notToggleable()` methods for more explicit control over column toggling. `toggleable()` ensures a column can be toggled, while `notToggleable()` explicitly disables it.

```php
TextColumn::make('name')->toggleable();
```

```php
TextColumn::make('name')->notToggleable();
```

--------------------------------

### Make Column Stickable via Argument

Source: https://inertiaui.com/inertia-table/docs/sticky-columns-and-header

Pass the `stickable` argument to the `make()` method when creating a column to make it stickable.

```php
TextColumn::make('name', stickable: true);
```

--------------------------------

### Use `chunk` Method Instead of `chunkById`

Source: https://inertiaui.com/inertia-table/docs/bulk-actions

To use the `chunk` method instead of the default `chunkById` for bulk actions, pass `eachById: false` to the `make()` method.

```php
Action::make(
    label: 'Activate',
    handle: fn (User $user) => $user->activate(),
    eachById: false
)->asBulkAction();
```

--------------------------------

### Generate Inertia Table Class

Source: https://inertiaui.com/inertia-table/docs/generating-tables

Use the `make:inertia-table` Artisan command to scaffold a new Table class. The command infers the Eloquent model name from the table name.

```bash
php artisan make:inertia-table Users
```

--------------------------------

### Table Methods

Source: https://inertiaui.com/inertia-table/docs/template-refs

Lists and describes the methods exposed by the Inertia Table component that can be accessed via a template ref.

```APIDOC
## Table Methods

These methods can be called on the table instance obtained via a template ref.

### Method List

| Method | Description |
|---|---|
| `addFilter(filter)` | Add a filter |
| `removeFilter(filter)` | Remove a filter |
| `resetAllFilters()` | Remove all active filters |
| `setFilter(attribute, clause, value)` | Set a filter by attribute, clause, and value |
| `setSearch(search)` | Set the search query |
| `toggleColumn(column)` | Show/hide a column |
| `setSort(sort)` | Set the table sort |
| `setPerPage(perPage)` | Change items per page |
| `makeSticky(column)` | Make columns sticky |
| `undoSticky(column)` | Remove sticky positioning |
| `putState(newState)` | Replace the table state |
| `toggleItem(key)` | Toggle item selection (use `'*'` for all) |
| `performAction(action, keys)` | Execute an action |
```

--------------------------------

### Set Alt and Title Attributes for Image

Source: https://inertiaui.com/inertia-table/docs/images

Configure the `alt` and `title` attributes for the image using the `alt()` and `title()` methods on the `Image` instance.

```php
$image->alt($user->name);
$image->title($user->name);
```

--------------------------------

### Configure Modal Options with an Array

Source: https://inertiaui.com/inertia-table/docs/inertia-modal-integration

Pass an array to the `modal()` method to customize modal behavior, such as enabling navigation or setting slideover configuration. This provides a quick way to adjust modal settings.

```php
$url->route('users.edit', $user)->modal([
    'navigate' => true,
    'config' => ['slideover' => true],
]);
```

--------------------------------

### Display Multiple Images with Limit

Source: https://inertiaui.com/inertia-table/docs/images

Render multiple images in a cell by passing an array of URLs to `image()->url()`. Use `limit()` to restrict the number of visible images and show an overflow indicator.

```php
$image->url([...])->limit(3);
```

--------------------------------

### Add Date Presets to DateFilter

Source: https://inertiaui.com/inertia-table/docs/filtering

Use the presets() method to add shortcut buttons for common date ranges. Presets can accept Carbon instances, date strings, or arrays for ranges.

```php
DateFilter::make('created_at')->presets([
    'Today' => now(),
    'Yesterday' => now()->subDay(),
    'Last 7 days' => [now()->subDays(7), now()],
    'This month' => [now()->startOfMonth(), now()->endOfMonth()],
    'This year' => [now()->startOfYear(), now()->endOfYear()],
]);
```

--------------------------------

### Enable Global Search on a Column

Source: https://inertiaui.com/inertia-table/docs/search

Use the `searchable` argument in the `make()` method to enable global search for a specific column.

```php
TextColumn::make('name', searchable: true);
```

--------------------------------

### Customize Global Search Query

Source: https://inertiaui.com/inertia-table/docs/search

Use the `withQueryBuilder()` method and `searchUsing()` to define a custom search logic. The callback receives the query builder, raw search term, and parsed terms.

```php
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Collection;
use InertiaUI\Table\QueryBuilder;

class Users extends Table
{
    public function withQueryBuilder(QueryBuilder $queryBuilder): ?QueryBuilder
    {
        $queryBuilder->searchUsing(function (Builder $query, string $search, Collection $terms) {
            $locale = app()->getLocale();

            $query->where("name->{$locale}", 'like', "%{$search}%");
        });

        return $queryBuilder;
    }
}
```

--------------------------------

### Define Custom Export Logic

Source: https://inertiaui.com/inertia-table/docs/exporting

Provide custom export logic by using the `using` argument or the `using()` method in `Export::make()`, allowing full control over the export process.

```php
use App\Tables\Users;
use InertiaUI\Table\Export;
use InertiaUI\Table\Http\ExportRequest;
use Illuminate\Contracts\Database\Eloquent\Builder;

Export::make()->using(function (Users $table, Export $export, ExportRequest $request, Builder $query) {
    // return response()->download(...);
});
```

```php
Export::make(using: new CustomUserExport);
```

--------------------------------

### Enable Multiple Selections for Set Filter

Source: https://inertiaui.com/inertia-table/docs/filtering

Allow multiple selections in a SetFilter by passing the `multiple` argument to the `make` method or by calling the `multiple()` method.

```php
SetFilter::make('tags')->multiple();
```

--------------------------------

### Control Default Column Visibility with Methods

Source: https://inertiaui.com/inertia-table/docs/toggle-columns

Employ the `visible()` and `hidden()` methods to manage a column's default visibility. `visible(false)` hides the column initially, while `hidden()` achieves the same result.

```php
TextColumn::make('name')->visible(false);
```

```php
TextColumn::make('name')->hidden();
```

--------------------------------

### Map Text Column Values with Method

Source: https://inertiaui.com/inertia-table/docs/columns

Alternatively, use the `mapAs()` fluent method to map column values using a callback. This provides a more fluent API for transformations.

```php
TextColumn::make('order_reference')->mapAs(function (string $ref, Invoice $model) {
    return $model->formatOrderReference($ref);
});
```

--------------------------------

### Enable Global Search via Table Class Property

Source: https://inertiaui.com/inertia-table/docs/search

Set the `$search` property in your Table class to an array of column names to enable global search for those columns.

```php
class Users extends Table
{
    protected array|string $search = ['name', 'email'];
}
```

--------------------------------

### Use Callback Functions for Dynamic Translations

Source: https://inertiaui.com/inertia-table/docs/translations

Provide a function to `setTranslations` to dynamically generate translation strings based on provided parameters.

```js
setTranslations({
    selected_rows: (params) => `${params.count} of ${params.total} rows selected`,
})
```

```js
setTranslations({
    selected_rows: ({ count, total }) => `${count} of ${total} rows selected`,
})
```

--------------------------------

### Enable Stickable Columns Globally

Source: https://inertiaui.com/inertia-table/docs/sticky-columns-and-header

Call the static `defaultStickable()` method on the `Column` class, typically in `AppServiceProvider`, to make all columns stickable by default.

```php
use InertiaUI\Table\Columns\Column;

Column::defaultStickable();
```

--------------------------------

### Enable Time Selection in DateFilter

Source: https://inertiaui.com/inertia-table/docs/filtering

Use withTime() to enable time selection alongside dates. Pass true for 24-hour format; otherwise, it defaults to 12-hour.

```php
DateFilter::make('created_at')->withTime();
```

```php
DateFilter::make('created_at')->withTime(time24h: true);
```

--------------------------------

### Alternative Syntax for Image URL

Source: https://inertiaui.com/inertia-table/docs/images

Pass the Eloquent attribute name directly to `image()` for simple URL assignments. A callback can be provided as a second argument for customization.

```php
TextColumn::make('name')->image('avatar_url');
```

```php
TextColumn::make('name')->image('avatar_url', fn (Image $image) => $image->rounded());
```

--------------------------------

### Apply Variant or Custom Class with asLink()

Source: https://inertiaui.com/inertia-table/docs/row-links

The `asLink()` method allows applying either a `Variant` enum or a custom class name for flexible row link styling.

```php
Action::make('Status overview')->asLink(Variant::Info);
Action::make('Secret link')->asLink('link-special-purple');
```

--------------------------------

### Customize Empty State Title and Message

Source: https://inertiaui.com/inertia-table/docs/empty-state

Customize the title and message of the empty state by passing arguments to the `make()` method or using the dedicated fluent methods `title()` and `message()`.

```php
EmptyState::make(
    title: 'No users found',
    message: 'Whoops! It looks like there are no users to display.',
);

EmptyState::make()
    ->title('No users found')
    ->message('Whoops! It looks like there are no users to display.');
```

--------------------------------

### Customize Export Options

Source: https://inertiaui.com/inertia-table/docs/exporting

Customize the export label, filename, type, authorization, and events using arguments in the `Export::make()` method.

```php
use Maatwebsite\Excel\Excel;

Export::make(
    label: 'CSV Export',
    filename: 'users.csv',
    type: Excel::CSV,
    authorize: true,
    events: []
);
```

--------------------------------

### Upgrade Composer Package

Source: https://inertiaui.com/inertia-table/docs/upgrading

Upgrade the InertiaUI Table Composer package to version 2.0 or higher using the provided command.

```bash
composer require inertiaui/table:^2.0
```

--------------------------------

### Scope Views by Stateful Resources

Source: https://inertiaui.com/inertia-table/docs/views-bookmarks

Enable Views to be scoped by stateful resources passed to the Table class constructor, ensuring views are specific to resource instances.

```php
Views::make(scopeStatefulResources: true);

Views::make()->scopeStatefulResources(true);
```

--------------------------------

### Define Empty State Method

Source: https://inertiaui.com/inertia-table/docs/empty-state

Implement the `emptyState()` method in your Table class to return an instance of the `EmptyState` class. This method is used to define the default empty state UI.

```php
use InertiaUI\Table\EmptyState;

class Users extends Table
{
    public function emptyState(): ?EmptyState
    {
        return EmptyState::make();
    }
}
```

--------------------------------

### Multiple Sticky Columns

Source: https://inertiaui.com/inertia-table/docs/sticky-columns-and-header

Multiple adjacent columns can be made sticky on either side, and their offsets will stack automatically.

```php
public function columns(): array
{
    return [
        TextColumn::make('id'),
        TextColumn::make('name'),
        TextColumn::make('email'),
        BooleanColumn::make('is_admin')->sticky(),
        ActionColumn::new()->sticky(),
    ];
}
```

--------------------------------

### Define a Basic Row Action

Source: https://inertiaui.com/inertia-table/docs/row-actions

Define a row action by providing a label and a `handle` callback. The callback receives the model instance and executes the action logic. Ensure actions complete quickly or dispatch queued jobs for long-running tasks.

```php
use App\Models\User;
use InertiaUI\Table\Action;

class Users extends Table
{
    public function actions(): array
    {
        return [
            Action::make('Activate', handle: fn (User $user) => $user->activate()),
        ];
    }
}
```

--------------------------------

### Lazy Load SetFilter Options

Source: https://inertiaui.com/inertia-table/docs/filtering

For filters with many options, use lazy() to defer loading until the filter popover is opened. Options are fetched via an Inertia partial reload on first open.

```php
SetFilter::make('company')
    ->pluckOptionsFromModel(Company::class)
    ->lazy();
```

--------------------------------

### Include All Props in Partial Reload

Source: https://inertiaui.com/inertia-table/docs/partial-reloads

Call `reloadAllProps()` on the Table instance to ensure all props are included in the partial reload.

```php
Users::make()->reloadAllProps();
```

--------------------------------

### Add Action Button to Empty State

Source: https://inertiaui.com/inertia-table/docs/empty-state

Add action buttons to the empty state using the `action()` method. You can specify a label, URL, icon, and button variant.

```php
EmptyState::make()->action('Create User', route('users.create'));
```

```php
use InertiaUI\Table\Variant;

EmptyState::make()->action(
    label: 'Create User',
    url: route('users.create'),
    variant: Variant::Info,
    icon: 'UserAddIcon'
);
```

```php
EmptyState::make()->action(
    label: 'Create User',
    url: route('users.create'),
    buttonClass: 'custom-class',
    dataAttributes: ['button-type' => 'create'],
    meta: ['key' => 'value'],
);
```

```php
use InertiaUI\Table\Url;

EmptyState::make()->action(
    label: 'Create User',
    url: fn (Url $url) => $url->route('users.create')->openInNewTab(),
);
```

--------------------------------

### Attach Metadata to Empty State

Source: https://inertiaui.com/inertia-table/docs/empty-state

Attach metadata to the empty state using the `meta` argument on `make()` or the `meta()` method. This metadata is ignored by the default Table component but can be used with custom components.

```php
EmptyState::make()->meta([
    'key' => 'value',
]);
```

--------------------------------

### Customize Empty State Icon

Source: https://inertiaui.com/inertia-table/docs/empty-state

Customize the icon displayed in the empty state by passing an icon name to the `icon` argument or the `icon()` method. Pass `false` to hide the icon.

```php
EmptyState::make(icon: 'UsersIcon');

EmptyState::make()->icon(false);
```

--------------------------------

### Configure ImageColumn

Source: https://inertiaui.com/inertia-table/docs/images

The `ImageColumn` class is specifically for image-only cells. It also accepts the `image()` method for configuration, similar to `TextColumn`.

```php
ImageColumn::make('avatar_url', header: '')->image(function (User $user, Image $image) {
    return $image->rounded()->large();
});
```

--------------------------------

### Enable Cursor Pagination in Inertia Table

Source: https://inertiaui.com/inertia-table/docs/pagination

Utilize cursor-based pagination for efficient handling of large datasets by setting `$paginationType` to `PaginationType::Cursor`. Note that cursor pagination does not support knowing the total number of pages or jumping to the last page.

```php
use InertiaUI\Table\PaginationType;

class Users extends Table
{
    protected PaginationType $paginationType = PaginationType::Cursor;
}
```
Tokens:
Raw