Columns

Types of Columns

There are several column types available out of the box:

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

Adding Columns

To add columns to your table, you can 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');

It will automatically generate a title-cased header based on the attribute name. If you want to customize the header, you can pass the header as the second argument.

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

The make() method has additional arguments that you can use to customize the column, sortable, toggleable, searchable, alignment, wrap, and truncate. It is generally recommended to use named arguments for better 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 is used to wrap the text in the column, which can be useful when the text is too long to fit within the column width, and you don't want to truncate it or make the table scroll horizontally.

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

In addition to wrapping the text, you can also truncate it by passing the number of lines to the truncate argument. This method uses CSS to truncate the text and add an ellipsis. By using truncation, it 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 can map the value of the column by using the mapAs argument in the make() method. The argument accepts a callback that receives the value of the column, as well as the Eloquent Model instance, and it 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);
});

If the column only has a limited set of values, you can use an array to map the values. The array should have the original value as the key and the mapped value as the value.

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

There's a good chance that you want to sort by the mapped value instead of the original value. You can do this by calling the sortUsingMap() method on the column. Please read the Sorting documentation to learn more about this.

Change the column properties with methods

Instead of passing the optional arguments to the make() method, you can use the methods provided by the column class to change the column properties. Note that the first argument, attribute, is required.

TextColumn::make('name')
    ->header('Full Name')
    ->sortable()
    ->notSortable()
    ->searchable()
    ->notSearchable()
    ->toggleable()
    ->notToggleable()
    ->align(ColumnAlignment::Right)
    ->leftAligned()
    ->centerAligned()
    ->rightAligned()
    ->wrap()
    ->truncate(3);

Badge Column

The BadgeColumn class can display a value as a badge. You can customize the badge by using the variant and icon methods. Both methods accept an array or a callback that returns the style or icon name.

Styling

The package comes with a Variant enum that contains five common styles: Danger, Default, Info, Success, and Warning.

What happened to the Style enum and style() method?

The Variant enum was previously named Style, but it was changed to avoid confusion with the CSS style attribute. To avoid breaking changes, the Style enum and style() method are still available, and you can still use it. However, it is recommended that you update your code to use the Variant enum and variant() method.

use InertiaUI\Table\Variant;

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

Alternatively, you can 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',
]);

In the front-end, it will add the style value to the badge element using the data-style attribute. Along with the is-badge class, you can style the badge using CSS.

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

Badge Icons

Adding icons to the badge works similarly to styling. You can use the icon method to add icons to the badge. Please read the Icons documentation to learn how to use icons in the package.

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 can customize the values by using the trueLabel and falseLabel methods.

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

If you want to set a default label for all boolean columns, you can use the static setDefaultTrueLabel and setDefaultFalseLabel methods.

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

Boolean Icons

Instead of using labels, you can use icons to represent the boolean values. You can use the trueIcon and falseIcon methods to set the icons. Check out the Icons documentation to learn how to use icons in the package.

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

Similar to default labels, you can set default icons for all boolean columns by using the static setDefaultTrueIcon and setDefaultFalseIcon methods.

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

Date Column

The DateColumn class is used to display date values. By default, it uses the Y-m-d format. You can customize the format by 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();

If you want to set a default format for all date columns, you can use the static setDefaultFormat method. Respectively, you can use the setDefaultTranslate method to set translate the date by 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 is used to add action buttons and links to the table. You can only have one ActionColumn in a table. Though it also has the make() method, there's also a static new() method that is recommended to use. You may pass the column header as the first argument.

ActionColumn::new('Actions');

Clickable Column

You can make a column clickable by using the url method or argument in the make() method. The url method accepts a callback that returns the URL to navigate to when the column is clicked.

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

The callback accepts a second argument, which is a Url object. Instead of returning a string URL, you can use the Url object to generate URLs and tweak behavior.

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

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

Clickable Row

If you want to make the entire row clickable, you can use the rowUrl method in your Table class. Similar to the url method in the example above, the rowUrl method 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

If you want to customize the behavior when the row is clicked, you can pass a callback to the Table component. The callback will receive 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 can add metadata to the column by using the meta argument in the make() method or by using the meta() method.

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

In the default Table component, this metadata is unused and not passed to any DOM element. However, this feature can be useful when extending the Table component using slots, or when you build a custom Table component.