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 three additional arguments that you can use to customize the column, sortable
, toggleable
, searchable
, and alignment
. 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);
Here are the default values for each argument:
Argument | Default Value |
---|---|
sortable | true |
toggleable | false |
searchable | false |
alignment | ColumnAlignment::Left |
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();
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');