Skip to content

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.

php
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.

php
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.

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

The alignment argument accepts the ColumnAlignment enum:

php
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.

php
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.

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

Here are the default values for each argument:

ArgumentDefault Value
searchablefalse
sortablefalse
toggleabletrue
visibletrue
alignmentColumnAlignment::Left
wrapfalse
truncatenull

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.

php
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.

php
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.

php
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.

php
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:

php
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>
jsx
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.

php
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.

php
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.

php
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.

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

Date Time Column

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

php
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.

php
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.

php
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.