Hey there! If you're looking to add pagination to your Laravel 10 project with a React JS frontend using Vite, you're in the right place. Pagination is a crucial feature for managing large datasets and improving user experience by breaking down content into manageable chunks.
In this step-by-step guide, I'll walk you through the process of implementing pagination seamlessly. You can use it in laravel 8, laravel 9, and laravel 10.
So, let's see laravel 10 react js pagination using vite, laravel pagination, react js pagination in laravel 10 using vite, how to create pagination in react.js, react.js pagination example.
Let's start by creating a new Laravel 10 project. In your terminal, navigate to the directory where you want to create the project and run:
laravel new laravel-react-pagination
Now, we'll install Breeze using the following command.
composer require laravel/breeze --dev
Now, we need to create authentication using the below command. you can create basic login, register, and email verification using React JS.
php artisan breeze:install react
Now, install node.js package.
npm install
npm run dev
After that, migrate the table using the following command.
php artisan migrate
Now, we'll create a migration and model for the post.
php artisan make:migration create_posts_table
Migration:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('body');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
After that, run the migration using the following command.
php artisan migrate
Then, we'll create a Post.php model using the following command.
php artisan make:model Post
App/Models/Post.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'title', 'body'
];
}
Add the following code to the web.php file
routes/web.php
<?php
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Controllers\PostController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('posts', [PostController::class, 'index'])->name('posts.index');
Route::get('/', function () {
return Inertia::render('Welcome', [
'canLogin' => Route::has('login'),
'canRegister' => Route::has('register'),
'laravelVersion' => Application::VERSION,
'phpVersion' => PHP_VERSION,
]);
});
Route::get('/dashboard', function () {
return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
require __DIR__.'/auth.php';
Create PostController and add the following code.
app/Http/Controllers/PostController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\Post;
class PostController extends Controller
{
/**
* Show the form for creating a new resource.
*
* @return Response
*/
public function index()
{
$posts = Post::latest()->paginate(1);
return Inertia::render('Posts/Index', ['posts' => $posts]);
}
}
In this step, we will create a react js file for Index.jsx and Pagination.jsx component files.
resources/js/Pages/Posts/Index.jsx
import React from 'react';
import Authenticated from '@/Layouts/Authenticated';
import { Inertia } from "@inertiajs/inertia";
import { Head, usePage, Link } from '@inertiajs/inertia-react';
import Pagination from '@/Components/Pagination';
export default function Dashboard(props) {
const { posts } = usePage().props
return (
<Authenticated
auth={props.auth}
errors={props.errors}
header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Posts</h2>}
>
<Head title="Laravel 10 React JS Pagination using Vite - Vidvatek.com" />
<div className="py-12">
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div className="p-6 bg-white border-b border-gray-200">
<table className="table-fixed w-full">
<thead>
<tr className="bg-gray-100">
<th className="px-4 py-2 w-20">No.</th>
<th className="px-4 py-2">Title</th>
<th className="px-4 py-2">Body</th>
</tr>
</thead>
<tbody>
{posts.data.map(({ id, title, body }) => (
<tr>
<td className="border px-4 py-2">{ id }</td>
<td className="border px-4 py-2">{ title }</td>
<td className="border px-4 py-2">{ body }</td>
</tr>
))}
</tbody>
</table>
<Pagination class="mt-6" links={posts.links} />
</div>
</div>
</div>
</div>
</Authenticated>
);
}
resources/js/Components/Pagination.jsx
import React from 'react';
import { Link } from '@inertiajs/inertia-react';
export default function Pagination({ links }) {
function getClassName(active) {
if(active) {
return "mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-primary focus:text-primary bg-blue-700 text-white";
} else{
return "mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-primary focus:text-primary";
}
}
return (
links.length > 3 && (
<div className="mb-4">
<div className="flex flex-wrap mt-8">
{links.map((link, key) => (
link.url === null ?
(<div
className="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
>{link.label}</div>) :
(<Link
className={getClassName(link.active)}
href={ link.url }
>{link.label}</Link>)
))}
</div>
</div>
)
);
}
Now, run the laravel 10 react js application using the following command.
php artisan serve
npm run dev
You might also like:
- Read Also: How to Create Bootstrap Progress Bar in React JS
- Read Also: How to Delete Relationship Records in Laravel 10
- Read Also: How to use Unique Validation on Update in Laravel 10
- Read Also: How to Validate Form using Validate.js in Laravel 10