[SOLVED ERROR] yajrabox column image add | sparti datatable image rendring full exmpale

how to use yajrabox DataTables with the Laravel framework to render images in a DataTable.

Step 1: Install Required Packages

Make sure you have a Laravel project set up and running. Then, install the required packages using Composer and npm:

Step 2: Configure DataTables

In your config/datatables.php configuration file, set the default driver to "datatablesbuttons":

Step 3: Create Admin Model and Migration

Create an Admin model and corresponding migration to store admin information, including the profile_picture field:

In the migration file, add the profile_picture field:

Run the migration to create the admins table:

Step 4: Seed Sample Data (Optional)

If you want to test with some sample data, you can create a seeder to populate the admins table:

php artisan make:seeder AdminSeeder

In the seeder, add sample data including image URLs:

<?php

// database/seeders/AdminSeeder.php

use App\Models\Admin;

use Illuminate\Database\Seeder;

class AdminSeeder extends Seeder

{

    public function run()

    {

        Admin::create([

            'name' => 'John Doe',

            'email' => 'john@example.com',

            'profile_picture' => 'http://example.com/sample1.jpg',

        ]);

        Admin::create([

            'name' => 'Jane Doe',

            'email' => 'jane@example.com',

            'profile_picture' => 'http://example.com/sample2.jpg',

        ]);

        // Add more sample data as needed...

    }

}

    php artisan db:seed --class=AdminSeeder

Step 5: Create DataTable Class

Create a new AdminDataTable class that extends the Yajra DataTable class:

    php artisan make:data-table AdminDataTable

In the AdminDataTable class, define the dataTable and query methods to handle the DataTable configuration and data retrieval:

<?php

// app/DataTables/AdminDataTable.php

namespace App\DataTables;

use App\Models\Admin;

use Illuminate\Support\HtmlString;

use Yajra\DataTables\Html\Column;

use Yajra\DataTables\Services\DataTable;

class AdminDataTable extends DataTable

{

    public function dataTable($query)

    {

        return datatables()

            ->eloquent($query)

            ->addColumn('image', function (Admin $admin) {

                return new HtmlString('<img src="' .

                $admin->profile_picture . '" width="100"

                 height="100">');

            })

            ->addColumn('action', 'admin.action');

    }

    public function query(Admin $model)

    {

        return $model->newQuery();

    }

    public function html()

    {

        return $this->builder()

            ->setTableId('admin-table')

            ->columns($this->getColumns())

            ->minifiedAjax()

            ->dom('Bfrtip')

            ->orderBy(0)

            ->buttons([

                'excel',

                'csv',

                'pdf',

                'print',

                'reset',

                'reload',

            ]);

    }

    protected function getColumns()

    {

        return [

            Column::make('id'),

            Column::make('image')->title('Profile Picture'),

            Column::make('name'),

            Column::make('email'),

            Column::make('created_at'),

            Column::make('updated_at'),

            Column::computed('action')

                ->exportable(false)

                ->printable(false)

                ->width(60)

                ->addClass('text-center'),

        ];

    }

}

Step 6: Create a Route to Render the DataTable

In your routes/web.php file, define a route to render the DataTable:

<?php

use App\DataTables\AdminDataTable;

Route::get('/admins', function (AdminDataTable $dataTable) {

    return $dataTable->render('admin.index');

});

Step 7: Create a Blade View

Create a Blade view file admin.index.blade.php to display the DataTable:

// resources/views/admin/index.blade.php

@extends('layouts.app')

@section('content')

    <h1>Admins DataTable</h1>

    {!! $dataTable->table(['class' => 'table table-bordered table-striped']) !!}

@endsection

@push('scripts')

    {!! $dataTable->scripts() !!}

@endpush

Step 8: Render the DataTable

Finally, visit the /admins route in your browser, and the DataTable with image rendering should be displayed.