Laravel / AdminLTE 3 Boilerplate

# 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
sum Enable sum calculation in footer for numeric columns

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

# filterOptions

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 using Moment.js formatting. This method automatically sets up date range filtering and proper date rendering.

By default, it will use the locale boilerplate::date.YmdHis defined in the date.php language file:

->dateFormat()

This renders dates using the default format YYYY-MM-DD HH:mm:ss.

You can specify a custom format using Moment.js display format (opens new window):

->dateFormat('dddd D MMMM YYYY')
// Output: "Monday 15 January 2024"

->dateFormat('DD/MM/YYYY HH:mm')
// Output: "15/01/2024 14:30"

->dateFormat('MMM Do, YYYY')
// Output: "Jan 15th, 2024"

You can also use a Closure for advanced date formatting logic:

->dateFormat(function($data) {
    return Carbon::createFromFormat('Y-m-d H:i:s', $data->created_at)->format('l F Y');
})

The boilerplate provides predefined date formats in resources/lang/{locale}/date.php:

Key Format Example Output
Ymd YYYY-MM-DD 2024-01-15
YmdHi YYYY-MM-DD HH:mm 2024-01-15 14:30
YmdHis YYYY-MM-DD HH:mm:ss 2024-01-15 14:30:25
YmdhiA YYYY-MM-DD hh:mm A 2024-01-15 02:30 PM
YmdhisA YYYY-MM-DD hh:mm:ss A 2024-01-15 02:30:25 PM
lFdY dddd, MMMM Do YYYY Monday, January 15th 2024

You can use these predefined formats:

->dateFormat(__('boilerplate::date.lFdY'))
// Renders: "Monday, January 15th 2024"
Pattern Description Example
YYYY 4-digit year 2024
YY 2-digit year 24
MMMM Full month name January
MMM Short month name Jan
MM Month number (01-12) 01
DDDD Day of year (001-366) 015
DD Day of month (01-31) 15
dddd Full day name Monday
ddd Short day name Mon
HH Hour (00-23) 14
hh Hour (01-12) 02
mm Minute (00-59) 30
ss Second (00-59) 25
A AM/PM PM

# 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(),
    ]);
})

# tooltip

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

# sum

Enables automatic sum calculation for numeric columns. When applied to a column, the sum of all visible values will be displayed in the table footer.

Column::add('Price')
    ->data('price')
    ->sum(),

Column::add('Quantity') 
    ->data('quantity')
    ->sum(),

Features

  • Automatic Calculation: Sums are calculated client-side using JavaScript for optimal performance
  • Locale Formatting: Numbers are formatted according to the user's locale (e.g., 1,234.56)
  • Dynamic Updates: Sums update automatically when filtering or searching the table
  • Current Page Only: Calculations are performed on currently visible rows only
  • The column data should contain numeric values
  • Non-numeric values are treated as zero in calculations
  • Works with both integer and decimal numbers
  • The sum is calculated using parseFloat() to handle both integers and decimals
  • Empty or non-numeric cells contribute 0 to the sum
  • The footer is automatically generated when at least one column has sum enabled
  • Multiple columns can have sum calculations simultaneously
  • HTML-formatted columns: The sum calculation automatically extracts numeric values from HTML content (e.g., <span class="badge">5</span> → 5)
  • Special handling for empty indicators: dots (.) are treated as zero values

← Button →