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

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 the create function for our user paginated table. The React Datatable supports Pagination, Modal Form to perform CRUD operations - Create Read Update Delete using the Laravel Backend REST API. We're adding a form create modal component here to add users to our database.

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

0:46 - Create the FormModal component
2:03 - Copy the HTML code form Pastebin
3:00 - Create component state variables to handle form field data
3:35 - Add the create user function
5:54 - Pass the prop variable to control the visibility of the FormModal
11:33 - Create the handleChange function to handle the changes of each text field values
19:30 - Create the function that will actually save the users to the database via our REST API endpoint
24:07 - Create the function that creates that refreshes values of the form states

Relevant Links:

#react #datatable #pagination #modal #createModal #addButton #createUser