In this tutorial, we will explore how to integrate Laravel Datatables Yajra with Vite to create powerful and efficient data tables in your Laravel application. Laravel Datatables Yajra is a popular package that allows you to easily create interactive and responsive datatables in Laravel. Vite is a build tool that can significantly improve the performance of your frontend development workflow.
Step 1: Set up a new Laravel project
First, you need to set up a new Laravel project. You can do this by running the following command in your terminal:
laravel new datatable-demoThis will create a new Laravel project called datatable-demo in your current directory.
Step 2: Install Laravel Datatables Yajra
Next, you need to install the Laravel Datatables Yajra package. You can do this by running the following command in your terminal:
composer require yajra/laravel-datatables-oracleThis will install the package and all its dependencies in your Laravel project.
Step 3: Generate a new DataTable
Now that you have installed the Laravel Datatables Yajra package, you can generate a new DataTable class using the following command:
php artisan make:datatable UsersDataTable --model=UserThis will create a new DataTable class called UsersDataTable in your app/DataTables directory.
Step 4: Implement DataTable logic
Next, you need to implement the logic for your DataTable in the UsersDataTable class. You can define columns, custom filters, and other functionalities in this class to customize the behavior of your data table.
Step 5: Create a new controller method
After creating the DataTable class, you need to create a new controller method that will fetch and return the data for your data table. You can do this by adding a new method in your controller that will use the DataTable class to fetch the data:
public function getUsersData(Request $request, UsersDataTable $dataTable)
{
return $dataTable->render('users.index');
}Step 6: Create a new route
Next, you need to create a new route that will point to the controller method you just created. You can do this by adding a new route in your routes/web.php file:
Route::get('/users/data', 'UserController@getUsersData');Step 7: Create a new view
Finally, you need to create a new view where you will display the data table. You can create a new view called users/index.blade.php in your resources/views directory:
<!DOCTYPE html>
<html>
<head>
<title>Data Tables Yajra Example</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
</head>
<body>
<table id="users-table" class="display">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
</table>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: '/users/data',
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
]
});
});
</script>
</body>
</html>Step 8: Install Vite
Now that you have set up your Laravel datatables, you can further improve the performance of your frontend development workflow by installing Vite. You can do this by running the following command in your terminal:
npm install viteStep 9: Configure Vite
Next, you need to configure Vite to work with your Laravel project. You can do this by creating a new vite.config.js file in the root of your project with the following content:
import { defineConfig } from 'vite'
export default defineConfig({
server: {
proxy: {
'/users/data': 'http://localhost:8000'
}
}
})This configuration will proxy requests to ‘/users/data’ to your Laravel server running on localhost:8000.
Step 10: Start Vite server
Finally, you can start the Vite server by running the following command in your terminal:
npm run devThis will start the Vite server and compile your frontend assets. Your Laravel datatables integrated with Vite are now ready to use!
In this tutorial, we have covered how to integrate Laravel Datatables Yajra with Vite to create powerful and efficient data tables in your Laravel application. By following these steps, you can create interactive and responsive datatables with ease. Happy coding!
Punya saya kok gada folder sass ya bang padahal install baru laravel
👍