Follow these steps to add a new component page to a laravel project with intertia which shows the database in a React Component using the backend Laravel SQL Database.

Source:/g/xampp8/htdocs/noprem/SELECTED-Version/inertia/inertia-shop-vuejs_FINAL/dices-pizza


php artisan make:model Example --migration
php artisan make:controller ExampleController
sleep 3
code database/migrations/*_create_examples_table.php

ADD: up

            $table -> id();
            $table -> timestamps();
            $table -> string('name');
            $table -> text('details');

$ php artisan migrate

$ php artisan make:factory ExampleFactory --model=Example
$ code database/factories/ExampleFactory.php

        return [
            'name' => fake()->name(),
            'details' => fake()->text(),

        ];


$ code database/seeders/DatabaseSeeder.php
ADD:

Example::factory(20)->create();

php artisan db:seed

code routes/web.php
ADD:

Route::get('/example', [ExampleController::class, 'index'])->name('example.index');

$ code app/Http/controllers/ExampleController.php 

use Inertia\Inertia;
...
  public function index() {
        $examples = Example::all();
        return Inertia::render('Examples/All', [
            'examples' => $examples,
        ]);
    }

$ mkdir resources/js/Pages/Examples; code resources/js/Pages/Examples/All.jsx

import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head } from '@inertiajs/react';
import Table from "@/Components/Table.jsx";

const columns = [
    'name',
    'details'
];
export default function All({auth,examples}){
    return(
        <AuthenticatedLayout
            user={auth.user}
            header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Pizzas</h2>}
        >
            <Head title="All Pizzas" />

            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <Table items={examples} columns={columns} primary="Order Number" action="pizzas.edit"></Table>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    )
}

 

Done

SOurce: https://youtu.be/hWFP9DeB7KA?si=lMEE0DMIj34Tmqdc&t=1109

https://flowbite.com/docs/components/tables/