Laravel Yajra Datatables Export to Excel CSV Button Example

Hi Dev,

Today, laravel datatables export excel is our main topic. you can see laravel datatables export csv. if you want to see example of how to add export button in yajra datatable then you are a right place. you'll learn yajra laravel datatables export to excel csv.

So, let's follow few step to create example of yajra datatables export csv in laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11.

In this post, i will show you step by step how to add CSV Excel buttons in Laravel Yajra Datatables. we will use yajra/laravel-datatables-buttons package to adding export button in your datatables. you can easily export table data into xlsx file and csv file so it can help you to export it.

So, let's follow few step to done how to export csv excel file from datatable in laravel application.

So let's follow this tutorial and you will get layout as like bellow:

Preview:

Step 1: Install Laravel

In this step, if you haven't laravel application setup then we have to get fresh laravel 7 application. So run bellow command and get clean fresh laravel 7 application.

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Install Yajra Datatable

We need to install yajra datatable composer package for datatable and yajra/laravel-datatables-buttons export buttons, so you can install using following command:

composer require yajra/laravel-datatables-oracle
composer require yajra/laravel-datatables-buttons

After that you need to set providers and alias.

config/app.php

.....
'providers' => [
	....
	Yajra\DataTables\DataTablesServiceProvider::class,
	Yajra\DataTables\ButtonsServiceProvider::class,
]
'aliases' => [
	....
	'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
.....

Now you have to run bellow command to get configuration file, so let's run bellow command:

php artisan vendor:publish --tag=datatables-buttons

Step 3: Add Dummy Records

In this step, we will create some dummy users using tinker factory. so let's create dummy records using bellow command:

php artisan tinker
factory(App\User::class, 200)->create();

Step 4: Create DataTable Class

Here, we need to create User DataTable class using Yajra Datatable command. so let's run bellow command:

php artisan datatables:make Users

you have created new class file for DataTable. so let's update following file. here we will add display column, buttons and all then things.

app/DataTables/UsersDataTable.php

<?php
  
namespace App\DataTables;
  
use App\User;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;
  
class UsersDataTable extends DataTable
{
    /**
     * Build DataTable class.
     *
     * @param mixed $query Results from query() method.
     * @return \Yajra\DataTables\DataTableAbstract
     */
    public function dataTable($query)
    {
        return datatables()
            ->eloquent($query);
    }
  
    /**
     * Get query source of dataTable.
     *
     * @param \App\User $model
     * @return \Illuminate\Database\Eloquent\Builder
     */
    public function query(User $model)
    {
        return $model->newQuery();
    }
  
    /**
     * Optional method if you want to use html builder.
     *
     * @return \Yajra\DataTables\Html\Builder
     */
    public function html()
    {
        return $this->builder()
                    ->setTableId('users-table')
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->orderBy(1)
                    ->parameters([
                        'dom'          => 'Bfrtip',
                        'buttons'      => ['excel', 'csv'],
                    ]);
    }
  
    /**
     * Get columns.
     *
     * @return array
     */
    protected function getColumns()
    {
        return [
            Column::make('id'),
            Column::make('name'),
            Column::make('email'),
        ];
    }
  
    /**
     * Get filename for export.
     *
     * @return string
     */
    protected function filename()
    {
        return 'Users_' . date('YmdHis');
    }
}

Step 5: Add Route

In this is step we need to create route for datatables layout file and another one for getting data. so open your routes/web.php file and add following route.

routes/web.php

Route::get('users', 'UserController@index');

Step 6: Create Controller

In this point, now we should create new controller as UserController. this controller will manage layout and getting data request and return response, so put bellow content in controller file:

app/Http/Controllers/UserController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\DataTables\UsersDataTable;
  
class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(UsersDataTable $dataTable)
    {
        return $dataTable->render('users');
    }
}

Step 7: Create View

In Last step, let's create users.blade.php(resources/views/users.blade.php) for layout and we will write design code here and put following code:

resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Yajra Datatables Export to Excel Button Example - ItSolutionStuff.com</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
    <script src="/vendor/datatables/buttons.server-side.js"></script>
</head>
<body>
      
<div class="container">
    <h1>Laravel Yajra Datatables Export to Excel Button Example - ItSolutionStuff.com</h1>
  
    {!! $dataTable->table() !!}
</div>
     
</body>
     
{!! $dataTable->scripts() !!}
  
</html>

Now we are ready to run our example so run bellow command ro quick run:

php artisan serve

Now you can open bellow url on your browser:

http://localhost:8000/users

I hope it can help you...