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