React Datatable with Pagination, Modal (CRUD) - Create Read Update Delete - Laravel REST API Part1

In this Laravel API Tutorial video, we are going to activate Laravel Sanctum in our Laravel 8 Project, and create the CRUD Create, Read, Update, Delete endpoints. This time, we are going to build a React datatable with pagination and form modal for the update and delete user. The React Datatable supports Pagination, Modal Form to perform CRUD operations - Create Read Update Delete using the Laravel Backend REST API.

You can easily implement token based user authentication using Laravel Sanctum. You can follow this Laravel API Tutorial video as a starting project for your Rest API projects. This Laravel API Tutorial video will assist you in making your first Rest API. The React Datatable that supports Pagination, Modal Form to perform CRUD operations source code is an amazing headstart especially when you Create Read Update Delete operations using the Laravel Backend REST API.

Most of the backend data from a backend of any enterprise application need datatables to represent the list of records from a Datatabase Model. Most of the time, a pagination feature is needed to navigate through the list of items. Pagination is very important as it helps with optimizing the performance of both your frontend and backend.

Using Laravel 8.54

2:03 - Create the Users route and it's related components
5:00 - Create the datatable component
7:47 - Design the UI of the Datable using Tailwind CSS
18:24 - Create the user's state
19:00 - Add the fetch users function
23:40 - Update the Laravel user list endpoint
29:30 - Adding the config, Headers, Bearer Token
33:18 - Display the list of uses as list of user records in the datatable
37:43 - Why we use the Async await in retrieving the data from response

Relevant Links:

#react #datatable #pagination #modal