Let’s create Dynamic, Reusable DataTable Component with Laravel 8, Bootstrap 5, ReactJS : With Pagination, Sort, Search Functionality

Schema::create('users', function (Blueprint $table) {  $table->id();  $table->string('name');  $table->string('email')->unique();  $table->timestamp('email_verified_at')->nullable();  $table->string('password');  $table->string('address');  $table->rememberToken();  $table->timestamps();});
return [ 'name'              => $this->faker->name,'email'             => $this->faker->unique()->safeEmail,'address'           => $this->faker->address,'email_verified_at' => now(),'password'          => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password'remember_token'    => Str::random(10),];
\App\Models\User::factory(500)->create();
<?phpnamespace App\Http\Controllers;use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Routing\Controller as BaseController;
class Controller extends BaseController
{
public const PER_PAGE = 10;
public const DEFAULT_SORT_FIELD = 'created_at';
public const DEFAULT_SORT_ORDER = 'asc';
use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
}
<?phpnamespace App\Http\Controllers;use App\Http\Resources\UserResource;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Http\Resources\Json\AnonymousResourceCollection;
class UsersController extends Controller
{
/**
* @var string[]
*/
protected array $sortFields = ['name', 'address', 'email'];
/**
* UsersController constructor.
*
* @param User $user
*/
public function __construct(public User $user)
{
}
/**
* Display a listing of the resource.
*
* @param Request $request
*
* @return AnonymousResourceCollection
*/
public function index(Request $request): AnonymousResourceCollection
{
$sortFieldInput = $request->input('sort_field', self::DEFAULT_SORT_FIELD);
$sortField = in_array($sortFieldInput, $this->sortFields) ? $sortFieldInput : self::DEFAULT_SORT_FIELD;
$sortOrder = $request->input('sort_order', self::DEFAULT_SORT_ORDER);
$searchInput = $request->input('search');
$query = $this->user->orderBy($sortField, $sortOrder);
$perPage = $request->input('per_page') ?? self::PER_PAGE;
if (!is_null($searchInput)) {
$searchQuery = "%$searchInput%";
$query = $query->where('name', 'like', $searchQuery)->orWhere('email', 'like', $searchQuery)->orWhere(
'address',
'like',
$searchQuery
);
}
$users = $query->paginate((int)$perPage);
return UserResource::collection($users);
}
}
<?phpnamespace App\Http\Resources;use App\Models\User;
use Carbon\Carbon;
use Illuminate\Http\Request;
use Illuminate\Http\Resources\Json\JsonResource;
class UserResource extends JsonResource
{
/**
* Transform the resource into an array.
*
* @param $request
*
* @return array
*/
public function toArray($request): array
{
/** @var User $this */
return [
'name' => $this->name,
'email' => $this->email,
'address' => $this->address,
'created_at' => Carbon::parse($this->created_at)->toDayDateTimeString(),
];
}
}
Route::get('/users', [UsersController::class, 'index']);
  • Install required dependencies for bootstrap: yarn add bootstrap@next react react-dom @babel/preset-react — dev
  • Update webpack.mix.js file:
mix.js("resources/js/app.js", "public/js").react().sass("resources/sass/app.scss", "public/css");
  • Let’s create two new components inside resources/js/components:

--

--

--

Full stack Software Engineer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How Experienced Developers Get Up to Speed with a Complex Project

Automating AppSec with Contrast Security

The Discomfort of Being a Prude Who’s Also a Feminist

How to Deactivate Plugins When Not Able to Access WordPress Admin

Database Set up for Asp.NET API with SQL Server and Entity Framework

How to make HTTP requests with Flutter and parse JSON result data

Breaking down containers

How We Used Transfer Learning to Create an Image Classifier in the Browser

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bijaya Prasad Kuikel

Bijaya Prasad Kuikel

Full stack Software Engineer.

More from Medium

Polycam can export to several different file formats. What are they?

Simple Mail Notifications using SMTP protocol on Linux systems

Reasons To Migrate Codeigniter to Laravel

Simple way to use uuid in Laravel