https://github.com/futurelife365/Laravel_React_DataTable-

Laravel_React_DataTable
https://github.com/futurelife365/Laravel_React_DataTable-

admin-dashboard api blade bootstrap html javascript laravel php react react-bootstrap react-router-dom voyager

Last synced: 3 months ago
JSON representation

Laravel_React_DataTable

• Host: GitHub
• URL: https://github.com/futurelife365/Laravel_React_DataTable-
• Owner: futurelife365
• Created: 2023-01-13T06:17:59.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-13T16:07:36.000Z (over 2 years ago)
• Last Synced: 2025-07-20T02:55:26.653Z (3 months ago)
• Topics: admin-dashboard, api, blade, bootstrap, html, javascript, laravel, php, react, react-bootstrap, react-router-dom, voyager
• Language: PHP
• Homepage:
• Size: 965 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Dynamic data table component with Laravel 8 & React JS with Hooks, Bootstrap 5

### Installation Setup Laravel + InertiaJS + React, Install Admin Panel - https://voyager.devdojo.com/

-   git clone `https://github.com/futuresea-dev/Laravel_React_DataTable-.git`

-   `cd Laravel_React_DataTable-`

-   `cp .env.example .env` and update database credentials `php artisan key:generate`

-   Install the dependencies: `composer install`

-   Install frontend dependencies: `yarn`

-   Compile the code: `yarn dev` or `yarn watch`

-   Boot the server: `php artisan serve`

-   Access: `http://localhost:8000`

### Created 3 Models with migrations:

- Hero [name, health]

- Weapon [name, damage, is_range]

- HeroWeapons

### In Voyager create BREAD for Hero and Weapon Models to manage them (after should be visible in admin menu). Fill some data (5 heroes, 10 weapons). Add weapons to heroes.

![alt text](https://github.com/futuresea-dev/Laravel_React_DataTable-/blob/main/image/admin-hero.png?raw=true)

![alt text](https://github.com/futuresea-dev/Laravel_React_DataTable-/blob/main/image/admin-weapon.png?raw=true)

### Create pages for users in REACT part of app. Use https://react-bootstrap.github.io/getting-started/introduction for UI.

/heroes - bootstrap table with off all heroes + their sum damage (implement method for Hero : getDamage)

/weapons - bootstrap table of weapons and how many are used by heroes

![alt text](https://github.com/futuresea-dev/Laravel_React_DataTable-/blob/main/image/heroes.png?raw=true)

![alt text](https://github.com/futuresea-dev/Laravel_React_DataTable-/blob/main/image/weapons.png?raw=true)