Filament Create Form and Table on the Same Page

The inspiration for this page is from a WordPress page:

The whole logic is in a custom Filament page. First, the form is initialized in the mount() method.

app/Filament/Pages/Category.php:

public function mount(): void
{
    $this->form->fill();
}

Then, the form has a name field that is live but only on blur. After the state is updated, a slug is generated from its state and set to a slug field.

The select field have options set manually. When options are in closure after the form is saved, the options are reloaded.

app/Filament/Pages/Category.php:

use Filament\Forms\Form;
use Illuminate\Support\Str;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\Section;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\TextInput;
 
public function form(Form $form): Form
{
    return $form
        ->schema([
            Section::make()
                ->schema([
                    TextInput::make('name')
                    // ...

Next, we will create:

• Automatic slug generation
• A table component