Table

<?php

namespace App\View\Pages\Backend\Users;

use Neura\Kit\Components\Atoms\Table as BaseTable;
use Neura\Kit\Support\Table\Column;
use Illuminate\Database\Eloquent\Builder;
use App\Models\User;

class UserTable extends BaseTable
{
    public int $perPage = 10;

    public function query(): Builder
    {
        return User::query()->latest();
    }

    public function columns(): array
    {
        return [
            Column::text('name', 'Name')
                ->sortable()
                ->searchable(),

            Column::text('email', 'Email')
                ->sortable()
                ->searchable(),

            Column::humanDiff('created_at', 'Created')
                ->sortable(),
        ];
    }
}

<livewire:backend.users.user-table />

use Neura\Kit\Enum\Table\{Variant, Rounded, Shadow, Density};

class ProductTable extends BaseTable
{
    public function variant(): Variant { return Variant::STRIPED; }
    public function rounded(): Rounded { return Rounded::LG; }
    public function shadow(): Shadow   { return Shadow::MD; }
    public function density(): Density { return Density::COMPACT; }
    public function hoverable(): bool  { return true; }
    public function bordered(): bool   { return true; }   // false = no borders
    public function fullHeight(): bool { return false; }  // true = fill viewport, scroll body

    // ...
}

public function variant(): string { return 'striped'; }
public function rounded(): string { return 'lg'; }

use Neura\Kit\Enum\Table\Variant;

// Striped rows
public function variant(): Variant { return Variant::STRIPED; }

// Minimal — no wrapper border, transparent
public function variant(): Variant { return Variant::MINIMAL; }

// Elevated — pair with Shadow::LG or Shadow::XL
public function variant(): Variant { return Variant::ELEVATED; }

public function bordered(): bool
{
    return false;  // borderless table
}

use Neura\Kit\Enum\Table\Variant;

// Full-height table in a dashboard layout
public function fullHeight(): bool
{
    return true;
}

// In your Blade: wrap in a flex container with height
// <div class="flex flex-col h-[calc(100vh-4rem)] min-h-0">
//     <livewire:backend.users.user-table />
// </div>

use Neura\Kit\Enum\Table\{Variant, Rounded, Shadow, Density};

// Dashboard analytics — compact, no rounded
class AnalyticsTable extends BaseTable
{
    public function variant(): Variant { return Variant::STRIPED; }
    public function rounded(): Rounded { return Rounded::NONE; }
    public function shadow(): Shadow   { return Shadow::NONE; }
    public function density(): Density { return Density::COMPACT; }
}

// Product catalog — elevated, prominent shadow
class ProductTable extends BaseTable
{
    public function variant(): Variant { return Variant::ELEVATED; }
    public function rounded(): Rounded { return Rounded::XL2; }
    public function shadow(): Shadow   { return Shadow::LG; }
    public function density(): Density { return Density::COMFORTABLE; }
}

// Embedded inside a card — minimal, no border
class LogTable extends BaseTable
{
    public function variant(): Variant { return Variant::MINIMAL; }
    public function rounded(): Rounded { return Rounded::NONE; }
    public function shadow(): Shadow   { return Shadow::NONE; }
    public function density(): Density { return Density::COMPACT; }
}

<?php

namespace App\View\Pages\Backend\Customer\Teams;

use App\Models\Team;
use App\View\Modals\Teams\{Create, Edit, Invite};
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Facades\Auth;
use Neura\Kit\Components\Atoms\Table as BaseTable;
use Neura\Kit\Concerns\InteractsWithNeuraKit;
use Neura\Kit\Enum\Table\{Variant, Rounded, Shadow, Density};
use Neura\Kit\Support\Table\{Action, Column, EmptyState};

class Table extends BaseTable
{
    use InteractsWithNeuraKit;

    public int $perPage = 10;

    public function variant(): Variant { return Variant::DEFAULT; }
    public function rounded(): Rounded { return Rounded::XL; }
    public function shadow(): Shadow   { return Shadow::SM; }
    public function density(): Density { return Density::NORMAL; }

    public function query(): Builder
    {
        return Team::accessibleByUser(Auth::user())
            ->with(['owner', 'members.user'])
            ->withCount('members')
            ->latest();
    }

    public function columns(): array
    {
        return [
            Column::text('name', 'Team name')
                ->editable()
                ->searchable()
                ->sortable(),

            Column::text('owner_name', 'Owner')
                ->sortable(),

            Column::text('members_count', 'Members')
                ->sortable(),

            Column::status('current_role', 'Your role')
                ->sortable()
                ->format(fn($state) => match ($state) {
                    'owner' => 'Owner',
                    'member' => 'Member',
                    default => 'Not member',
                })
                ->filterable('select', [
                    'owner' => 'Owner',
                    'member' => 'Member',
                ]),

            Column::humanDiff('created_at', 'Created at')
                ->sortable(),

            Column::actions('actions', 'Actions', $this->getColumnActions())
                ->resizable(false),
        ];
    }

    public function actions(): array
    {
        return [
            Action::make('Create team')
                ->icon('plus')
                ->variant('primary')
                ->wireClick('create')
                ->visible(fn() => $this->data()->total() > 0),
        ];
    }

    protected function getColumnActions(): array
    {
        return [
            Action::make('Invite user')
                ->icon('user-plus')
                ->wireClick('invite')
                ->variant('soft')
                ->visible(fn($team) => $team->canManage(Auth::user()))
                ->tooltip('Invite a user'),

            Action::make('Edit team')
                ->icon('pencil')
                ->wireClick('edit')
                ->variant('soft')
                ->visible(fn($team) => $team->canManage(Auth::user())),

            Action::make('Delete team')
                ->icon('trash')
                ->variant('danger-soft')
                ->wireClick('delete')
                ->visible(fn($team) => $team->canManage(Auth::user())),
        ];
    }

    public function bulkActions(): array
    {
        return [
            Action::make('Delete selected')
                ->icon('trash')
                ->variant('danger-ghost')
                ->wireClick('bulkDelete'),
        ];
    }

    public function create(): void
    {
        $this->modal(Create::class)->open();
    }

    public function edit($team): void
    {
        $this->modal(Edit::class)->with('team', $team)->open();
    }

    public function delete($team): void
    {
        $this->dialog('Delete team?')
            ->danger()
            ->message('This action cannot be undone.')
            ->confirmText('Delete team')
            ->onConfirm('confirmDelete', $team)
            ->show();
    }

    public function emptyState(): EmptyState
    {
        return EmptyState::make()
            ->message('No teams found')
            ->wireClick('Create your first team', 'create');
    }
}

// Text (default)
Column::text('name', 'Name')->editable(),

// Specific type
Column::text('price', 'Price')->editable('number'),
Column::text('bio', 'Bio')->editable('textarea'),
Column::date('due_date', 'Due')->editable(),

// Select with options
Column::text('status', 'Status')->editable('select', [
    'active' => 'Active',
    'draft' => 'Draft',
    'archived' => 'Archived',
]),

// Boolean (toggles on click)
Column::boolean('is_active', 'Active')->editable(),

public function updateField(string|int $rowId, string $column, mixed $value): void
{
    // Custom validation
    if ($column === 'price' && $value < 0) {
        $this->addError('field', 'Price cannot be negative');
        return;
    }

    // Call parent for default persistence
    parent::updateField($rowId, $column, $value);

    // Or handle it entirely yourself
    $model = Product::findOrFail($rowId);
    $model->update([$column => $value]);

    $this->dispatch('notify', message: 'Updated successfully');
}

public function actions(): array
{
    return [
        Action::make('Create team')
            ->icon('plus')
            ->variant('primary')
            ->wireClick('create'),

        Action::make('Export')
            ->icon('arrow-down-tray')
            ->variant('outline')
            ->wireClick('export'),
    ];
}

Column::actions('actions', 'Actions', [
    Action::make('Edit')
        ->icon('pencil')
        ->wireClick('edit')
        ->variant('soft')
        ->tooltip('Edit this item'),

    Action::make('Delete')
        ->icon('trash')
        ->variant('danger-soft')
        ->wireClick('delete')
        ->visible(fn($row) => $row->canDelete()),
])->resizable(false),

public function bulkActions(): array
{
    return [
        Action::make('Delete selected')
            ->icon('trash')
            ->variant('danger-ghost')
            ->wireClick('bulkDelete'),

        Action::make('Export selected')
            ->icon('arrow-down-tray')
            ->variant('soft')
            ->wireClick('bulkExport'),
    ];
}

// Text filter (default)
Column::text('name', 'Name')->filterable(),

// Select filter
Column::text('status', 'Status')->filterable('select', [
    'active' => 'Active',
    'inactive' => 'Inactive',
]),

// Boolean filter
Column::boolean('is_active', 'Active')->filterable('boolean'),

// Date filter
Column::date('created_at', 'Created')->filterable('date'),

// Custom filter query
Column::text('name', 'Name')->filterable('select', $options, function ($query, $value) {
    $query->where('name', 'like', "%{$value}%");
}),

use Neura\Kit\Support\Table\EmptyState;

public function emptyState(): EmptyState
{
    return EmptyState::make()
        ->message('No teams found')
        ->wireClick('Create your first team', 'create');
}

table/
├── index.blade.php              # Main orchestrator
├── columns/                     # Column type templates
│   ├── column.blade.php         # Default text column
│   ├── boolean.blade.php        # Boolean indicator
│   ├── status.blade.php         # Status badge
│   ├── badge.blade.php          # Configurable badge
│   ├── date.blade.php           # Formatted date
│   ├── human-diff.blade.php     # Relative time
│   ├── image.blade.php          # Image thumbnail
│   ├── icon.blade.php           # Dynamic icon
│   ├── color.blade.php          # Color swatch
│   ├── link.blade.php           # Clickable link
│   ├── actions.blade.php        # Row action buttons
│   └── ...                      # Other column types
└── parts/                       # Structural sub-components
    ├── toolbar.blade.php        # Search, filters, actions
    ├── header.blade.php         # <thead> with sorting & resizing
    ├── row.blade.php            # <tr> with bulk checkbox
    ├── cell.blade.php           # <td> with inline editing
    ├── bulk-banner.blade.php    # Selected rows banner
    ├── empty.blade.php          # Empty state display
    ├── pagination.blade.php     # Pagination links
    ├── filter-input.blade.php   # Filter input controls
    └── action.blade.php         # Action button template