Columns

Columns describe how each cell in an Inertia Table is rendered. Inertia Table ships with column types for the common cases (text, numeric, date, boolean, badge, image, and action), and every column supports sorting, alignment, custom headers, conditional visibility, and per-row formatting.

Types of Columns

Inertia Table ships with the following column types:

• TextColumn
• BadgeColumn
• NumericColumn
• DateColumn
• DateTimeColumn
• BooleanColumn
• ImageColumn
• ActionColumn

Adding Columns

To add columns to your table, use the make method on the column class and pass the attribute of the Eloquent model you want to display. Add the column to the array returned by the columns() method in your Table class.

TextColumn::make('name');

Inertia Table automatically generates a title-cased header based on the attribute name. You may customize the header by passing it as the second argument.

TextColumn::make('name', 'Full Name');

The make() method accepts additional arguments to customize the column: sortable, toggleable, searchable, alignment, wrap, and truncate. Named arguments are recommended for readability.

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

The alignment argument accepts the ColumnAlignment enum:

use InertiaUI\Table\Columns\ColumnAlignment;

TextColumn::make('total_amount', 'Total Amount', alignment: ColumnAlignment::Right);

The wrap argument wraps long text inside the cell instead of truncating it or forcing a horizontal scroll.

TextColumn::make('description', 'Description', wrap: true);

You may also truncate the text by passing the number of lines to the truncate argument. This uses CSS to add an ellipsis and automatically sets wrap to true.

TextColumn::make('description', 'Description', truncate: 3);

Here are the default values for each argument:

Argument	Default Value
searchable	false
sortable	false
toggleable	true
visible	true
alignment	ColumnAlignment::Left
wrap	false
truncate	null

Map Value

You may map the value of a column using the mapAs argument on the make() method. The argument accepts a callback that receives the column value and the Eloquent model instance, and should return the mapped value.

TextColumn::make('order_reference', mapAs: fn (string $ref) => '#'.strtoupper($ref));

You may also use the mapAs() method:

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

For columns with a limited set of values, you may pass an array instead of a callback. The original value is the key, the mapped value is the value.

TextColumn::make('status', mapAs: [
    'is_approved' => __('Approved'),
    'is_pending' => __('Waiting'),
    'is_rejected' => __('Rejected'),
]);

To sort by the mapped value instead of the original, call the sortUsingMap() method on the column. See the Sorting documentation for details.

Column Tooltips v4

You may add a tooltip to a column header using the tooltip() method or the tooltip argument:

TextColumn::make('ltv')
    ->header('LTV')
    ->tooltip('Lifetime value across all orders');

Header and Cell Classes

You may add CSS classes to the header and cell elements via the headerClass and cellClass arguments on the make() method. Both accept a string or an array of classes.

TextColumn::make('name', headerClass: 'font-semibold', cellClass: ['text-blue-600', 'font-semibold']);

Classes provided via headerClass() and cellClass() are merged with the default Tailwind classes using tailwind-merge, so conflicting utility classes (e.g. a custom text-* color) override the defaults instead of both being applied.

Make sure your Table class path is included via an @source directive in your CSS file so Tailwind detects these classes during the build. See the detecting classes in source files documentation for details.

Changing Column Properties With Methods

Instead of passing optional arguments to make(), you may use the fluent methods on the column class. The first argument, attribute, is still required.

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');

Badge Column

The BadgeColumn class displays a value as a badge. You may customize the badge via the variant and icon methods. Both accept an array or a callback that returns the style or icon name.

Styling

Inertia Table ships with a Variant enum containing five common styles: Danger, Default, Info, Success, and Warning.

use InertiaUI\Table\Variant;

BadgeColumn::make('status')->variant([
    'is_approved' => Variant::Success,
    'is_pending' => Variant::Warning,
    'is_rejected' => Variant::Danger,
]);

Alternatively, you may use a callback to return the variant:

use InertiaUI\Table\Variant;

BadgeColumn::make('status')->variant(fn (string $status) => match ($status) {
    'is_approved' => Variant::Success,
    'is_pending' => Variant::Warning,
    'is_rejected' => Variant::Danger,
});

You may also choose to use a custom style by passing a different value than those provided by the Variant enum:

BadgeColumn::make('status')->variant([
    'is_approved' => 'primary',
    'is_pending' => 'secondary',
    'is_rejected' => 'danger',
]);

On the frontend, the style value is added to the badge element via the data-style attribute. Combined with the is-badge class, you may style the badge using CSS.

.it-badge[data-style="secondary"] {
    /* Your custom style */
}

Badge Icons

Adding icons to the badge works similarly to styling. Use the icon method to add icons to the badge. See the Icons documentation for details on wiring up an icon library.

BadgeColumn::make('status')->icon([
    'is_approved' => 'CheckCircleIcon',
    'is_pending' => 'ClockIcon',
    'is_rejected' => 'XCircleIcon',
]);

Boolean Column

The BooleanColumn class displays boolean values as Yes or No by default. You may customize the labels using the trueLabel and falseLabel methods.

BooleanColumn::make('is_active')
    ->trueLabel('Active')
    ->falseLabel('Inactive');

To set a default label for all boolean columns, use the static setDefaultTrueLabel and setDefaultFalseLabel methods.

BooleanColumn::setDefaultTrueLabel('Absolutely');
BooleanColumn::setDefaultFalseLabel('Definitely Not');

Boolean Icons

Instead of labels, you may use icons to represent boolean values via the trueIcon and falseIcon methods. See the Icons documentation for details on wiring up an icon library.

BooleanColumn::make('is_active')
    ->trueIcon('CheckCircleIcon')
    ->falseIcon('XCircleIcon');

Similar to default labels, you may set default icons for all boolean columns via the static setDefaultTrueIcon and setDefaultFalseIcon methods.

BooleanColumn::setDefaultTrueIcon('CheckCircleIcon');
BooleanColumn::setDefaultFalseIcon('XCircleIcon');

Image Column

The ImageColumn class is used to render images in the table.

ImageColumn::make('avatar_url');

See the Images documentation for more on ImageColumn and rendering images in other column types.

Date Column

The DateColumn class displays date values. By default, it uses the Y-m-d format. You may customize the format using the format method.

DateColumn::make('created_at')
    ->format('d/m/Y');

You may also instruct Carbon to translate the date by using the translate method.

DateColumn::make('created_at')
    ->format('d M Y')
    ->translate();

To set a default format for all date columns, use the static setDefaultFormat method. The setDefaultTranslate method sets translation as the default.

DateColumn::setDefaultFormat('d/m/Y');
DateColumn::setDefaultTranslate(true);

Date Time Column

Just like the DateColumn class, the DateTimeColumn class has similar methods to customize the format and translation.

DateTimeColumn::make('created_at')
    ->format('d/m/Y H:i:s')
    ->translate();

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

Action Column

The ActionColumn class adds action buttons and links to the table. A table may only contain one ActionColumn. The ActionColumn exposes the usual make() method, but you should use the static new() method instead, which accepts the column header as its first argument.

ActionColumn::new('Actions');

Clickable Column

You may make a column clickable by passing a url argument to make() or by calling the url() method. The method accepts a callback that returns the URL to navigate to when the cell is clicked.

TextColumn::make('name')
    ->url(fn (User $user) => '/users/'.$user->id.'/edit'),

The callback accepts a second argument: a Url object. Instead of returning a string, you may use this object to generate URLs and tweak navigation behavior.

TextColumn::make('name')
    ->url(fn (User $user, Url $url) => $url
        ->route('users.edit', $user)
        ->openInNewTab()
    );

You may find all available methods on the Url class in the Row Links documentation.

Clickable Row

To make the entire row clickable, implement the rowUrl method on your Table class. Like the url method above, it accepts a callback that returns the URL to navigate to when the row is clicked.

class Users extends Table
{
    public function rowUrl(Model $model, Url $url): string
    {
        return '/users/'.$model->id.'/edit';
    }
}

Just like the url method, you may also return the Url object:

public function rowUrl(Model $model, Url $url): Url
{
    return $url->route('users.edit', $model);
}

Custom Handling

To customize the behavior when a row is clicked, pass a callback to the Table component. The callback receives the row and column as arguments.

Vue

<script setup>
import { Table } from '@inertiaui/table-vue'

function handleRowClick(row, column) {
    alert(`Row: ${row.id}, Column: ${column.attribute}`)
}
</script>

<template>
    <Table :resource="users" @row-click="handleRowClick" />
</template>

React

import { Table } from '@inertiaui/table-react'

function handleRowClick(row, column) {
    alert(`Row: ${row.id}, Column: ${column.attribute}`)
}

export default function Users({ users }) {
    return (
        <Table resource={users} onRowClick={handleRowClick} />
    )
}

Metadata

You may attach metadata to a column via the meta argument on make() or the meta() method.

TextColumn::make('name')->meta([
    'key' => 'value',
]);

The default Table component ignores this metadata and does not pass it to any DOM element. It becomes useful when extending the Table component using slots, or when building a custom Table component.