# Column

To display a column to your table, include a new Column::add() in the columns() method.

Place your code inside the method's return [] statement.

Example:

public function columns(): array
{
  return [
    Column::add('Id')
        ->data('id'),

    Column::add('Last Name')
        ->data('last_name'),

    Column::add('Created At')
        ->data('created_at')
        ->dateFormat(),
        
    Column::add()
        ->actions(function(User $user) {
            return join([
                Button::edit('boilerplate.users.edit', $user),          
                Button::delete('boilerplate.users.edit', $user),          
            ]);
        }),
  ];
}

method	description
add	Adds a new column
data	Links the column to an existing Datasource field
name	Relation name to use for eager loading relationships
filter	Implements a custom search for a specific column
filterOptions	Select options for the column filter
filterType	Select the type of the filter to apply
order	Allow to set a specific order query
fromNow	For dates, replace the date by a “from now” text
dateFormat	For dates, will replace the date by the localized date
notSearchable	Disables search (and filter) of the column
notSortable	Disables the sorting of the column
notOrderable	Alias of notSortable
actions	Specific method to add actions buttons as a string
tooltip	Displays a tooltip when hovering over the column title
class	Sets the column class
width	Sets the column width
hidden	Hide the column

# add

Adds a new column to your DataTable. The method take one argument as column title, default is an empty string.

Column::add('My column title')

# data

Links the column to an existing Datasource field.

->data('last_name')

You can use a Closure to edit the column content.

->data('last_name', function(User $user) {
    return Str::title($user->last_name);
})

Or to create a custom column

->data('custom_name', function(User $user) {
    return $user->first_name.' '.$user->last_name;
})

In this case, you have to define a filter or disable the column filtering.

# name

When using Eloquent and eager loading relationships you have to specify the relation.column_name.

You also have to specify fields to get to avoid integrity constraints.

Example:

public function datasource()
{
    return User::with('roles')->select('users.*');
}

Then to filter roles by name:

->name('roles.name')

# filter

In some cases, we need to implement a custom search for a specific column. To achieve this, you can use the filter method.

->filter(function ($query, $q) {
    return $query->where(DB::raw('CONCAT_WS(first_name, " ", last_name)'), 'LIKE', "%$q%");
})

Specific case to filter on eager loaded model:

use Illuminate\Database\Eloquent\Builder;

->filter(function($query, $q) {
    $query->whereHas('roles', function(Builder $query) use ($q) {
        $query->where('name', '=', $q);
    });
})

Replaces the input text field by a select containing the options returned by this method.

->filterOptions(function () {
    return Role::all()->pluck('display_name', 'name')->toArray();
})

If select must be multiple, set the second argument to true.

->filterOptions(function () {
    return Role::all()->pluck('display_name', 'name')->toArray();
}, true)

# filterType

Sets the filter type to use.

->filterType('daterangepicker')

# order

In some cases, we need to implement a custom order query for a specific column. To achieve this, you can use the order method.

->order(function ($query, $direction) {
    return $query->orderBy('field', $direction);
})

Authorized types are : text, daterangepicker, select, select-multiple

# fromNow

For dates, replace the date by a "from now" text.

->fromNow()

# dateFormat

For dates, will replace the date by the localized date. By default, it will use the locale boilerplate::date.YmdHis defined in the file date.php

->dateFormat()

You can also specify the format to use, this will use the momentjs displaying format (opens new window)

->dateFormat('dddd D MMMM YYYY')

# notSearchable

Disables search (and filter) of the column.

->notSearchable()

# notSortable

Disables the sorting of the column.

->notSortable()

# notOrderable

Alias of notSortable

->notOrderable()

# actions

Specific method to add actions buttons as a string

->actions(function (User $user) {
    return '<button type="button" data-id="'.$user->id.'">Edit</button>';
})

Or use the Button class

->actions(function (User $user) {
    return join([
        Button::show('boilerplate.users.show', $user),
        Button::edit('boilerplate.users.edit', $user),
        Button::add()
            ->link('https://sebastienheyd.github.io/boilerplate/')
            ->icon('help')
            ->color('info')
            ->make(),
    ]);
})

Displays a tooltip when hovering over the column title

->tooltip('My tooltip content')

# class

Sets the column class.

->class('text-primary text-nowrap')

# width

Sets the column width.

->width('40px')

# hidden

Hide the column.

->hidden()

← Options Button →