Columns

Types of Columns

There are several column types available out of the box:

• TextColumn
• 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

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

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): string
{
    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'

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'

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

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

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

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

If you want to set a default format for all date columns, you can use the static setDefaultFormat method.

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

Date Time Column

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

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

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

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.