Data tables are powerful for listing data, but adding some colors would help users better visually filter the data. One of the most common examples is to display the recording status, with a background color. This article will show you how.

This example will be based on two Datatables generated with our QuickAdminPanel, but you don’t need to use our tool, it should be applicable to any Datatables.net implementation with Laravel.

Case 1. Simple non-AJAX data table

If you have a simple

without any server side rendering, the solution is quite simple.

1. Configure the color in the template

Here is an example app/Project.php (see complete file):


class Project extends Model
{
    const STATUS_COLOR = [
        'pending'  => '#FFFF99',
        'active'   => '#90EE90',
        'archived' => '#00BFFF',
    ];

    // ... other Model properties

2. Put the background color in CSS in the cell

In the table, for example, resources/views/admin/projects/index.blade.php (see complete file):


<td style="background-color: {{ App\Project::STATUS_COLOR[$project->status] ?? 'none' }};">

Case 2. AJAX server-side data tables

For a larger amount of data, you will surely use AJAX data tables. How to add color to it?

Short version: see the code here.

The secret is to add a “hidden” color column and then use its value in the actual status column.

So let’s take another example.
We add the same color configuration in app/Client.php model (see complete file):


class Customer extends Model
{
    const STATUS_COLOR = [
        'pending'  => '#FFFF99',
        'active'   => '#90EE90',
        'archived' => '#00BFFF',
    ];
    
    // ... other model properties

Next we come to the controller.

app/Http/Controller/Admin/CustomersController.php (see complete file):


$table = Datatables::of($query);

// ... other columns

// New "hidden" column
$table->addColumn('status_color', ' ');

// ... other columns

// We add "status_color" value but it won't be visible
$table->editColumn('status_color', function ($row) {
    return $row->status && Customer::STATUS_COLOR[$row->status] ? Customer::STATUS_COLOR[$row->status] : 'none';
});

return $table->make(true);

Finally, we specify the value of the “status” column.
Here is resources/views/admin/customers/index.blade.php (see complete file):


// our Datatables settings object
let dtOverrideGlobals = {
    processing: true,
    serverSide: true,
    retrieve: true,
    aaSorting: [],
    ajax: "{{ route('admin.customers.index') }}",

    // So in the columns we don't show "status_color"
    columns: [ 
	{ data: 'placeholder', name: 'placeholder' },
	{ data: 'id', name: 'id' },
	{ data: 'name', name: 'name' },
	{ data: 'status', name: 'status' },
	{ data: 'actions', name: '{{ trans('global.actions') }}' }
    ],

    // ... other Datatable properties

    // But we do have value, so we can add CSS from data.status_color value
    createdRow: (row, data, dataIndex, cells) => {
        $(cells[3]).css('background-color', data.status_color)
    }
};

$('.datatable-Customer').DataTable(dtOverrideGlobals);

And that’s it! See the full repository: LaravelDaily/Laravel-Datatables-Column-Colors



Technology

Another Tech Information

Similar Posts