Create Dynamic, Reusable DataTable Component with Laravel 8, ReactJS, Hooks & Bootstrap 5
In this video we will learn how to implement Custom, Reusable DataTable component with #laravel8, #reactJS, #Bootstrap5 from scratch.
Fetch data for provided url
Set columns dynamically
Search, Sort the data
Add a loader
Link to github repository 👉: https://github.com/sadhakbj/react-lar...
Complete API implementation from scratch 👉: • Create custom DataTable Component usi...
Paginator component for vue 👉: • 4. Add Paginator component from scrat...
#laravel
#reactJs
#reactWithLaravel
#reactDataTableComponent
Timestamp:
[00:00]: Introduction
[01:00]: API Implementation Reacap
[06:10]: Install frontend dependencies (react, react-dom, bootstrap 5)
[12:30]: Start creating DataTable.js component
[19:10]: Show loading when data is being fetched
[24:00]: Render data with table
[28:30]: Use useEffect hook to load the data
[35:00]: Implement sorting
[45:00]: Implement searching with debounce
[53:30]: Change data per page
[56:05]: Paginator component