PHP code example of centrex / tallui

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

centrex / tallui example snippets

// config/tallui.php
'prefix' => 'tallui',   // '' → <x-button />, 'tallui' → <x-tallui-button />

// In any Livewire component
$this->dispatch('notify', type: 'success', message: 'Saved!');
$this->dispatch('notify', type: 'error',   message: 'Something went wrong.');

'searchable_models' => [
    'customer' => [
        'model' => App\Models\Customer::class,
        'label' => 'name',
        'sublabel' => 'email',
        'value' => 'id',
        'search_columns' => ['name', 'email', 'phone'],
        'order_by' => 'name',
        'order_direction' => 'asc',
        'limit' => 25,
    ],
],

use Centrex\TallUi\DataTable\Column;
use Centrex\TallUi\Livewire\DataTable;
use Illuminate\Database\Eloquent\Builder;

class CustomerTable extends DataTable
{
    public string $defaultSortBy = 'name';

    public function columns(): array
    {
        return [
            Column::make('Name', 'name')->searchable()->sortable(),
            Column::make('Email', 'email')->searchable(),
            Column::make('Balance', 'outstanding_balance')->sortable(),
            Column::make('Status', 'status')->badge('neutral', ['active' => 'success', 'inactive' => 'error']),
            Column::make('Actions')->actions([...]),
        ];
    }

    public function query(): Builder
    {
        return Customer::query();
    }
}

class CustomerTable extends DataTable
{
    public string $mobileBreakpoint = 'lg';   // cards below 1024 px
    // public string $mobileBreakpoint = '';  // disable card stack
}

Column::make('Name',   'name')->searchable()->sortable(),   // always visible
Column::make('Email',  'email')->hideOnMobile(),             // hidden below md
Column::make('Phone',  'phone')->visibleFrom('lg'),          // hidden below lg
Column::make('Tax ID', 'tax_id')->visibleFrom('xl'),         // hidden below xl

$series = [
    ['name' => 'Revenue',  'type' => 'bar',  'data' => [50000, 70000, 80000, 60000]],
    ['name' => 'Trend',    'type' => 'line', 'data' => [55000, 65000, 75000, 70000]],
    ['name' => 'Forecast', 'type' => 'area', 'data' => [48000, 68000, 78000, 72000]],
];
$months = ['Jan', 'Feb', 'Mar', 'Apr'];

$series = [
    [
        'name' => 'Electronics',
        'data' => [
            ['x' => 'Phones',   'y' => 90],
            ['x' => 'Laptops',  'y' => 75],
            ['x' => 'Tablets',  'y' => 40],
        ],
    ],
    [
        'name' => 'Clothing',
        'data' => [
            ['x' => 'Shirts',   'y' => 55],
            ['x' => 'Shoes',    'y' => 38],
        ],
    ],
];

$series = [
    ['name' => 'Model A', 'data' => [80, 50, 30, 40, 100, 20]],
    ['name' => 'Model B', 'data' => [60, 85, 70, 55,  75, 60]],
];

$series = [
    [
        'name' => 'Temperature',
        'data' => [
            ['x' => 'Jan', 'y' => [2,  12]],
            ['x' => 'Feb', 'y' => [3,  15]],
            ['x' => 'Mar', 'y' => [8,  22]],
            ['x' => 'Apr', 'y' => [13, 28]],
        ],
    ],
];

use Centrex\TallUi\Contracts\ChartDataProvider;

class RevenueDataProvider implements ChartDataProvider
{
    public function getData(): array
    {
        return [
            'series'     => [['name' => 'Revenue', 'data' => [50, 70, 80]]],
            'categories' => ['Jan', 'Feb', 'Mar'],
        ];
    }
}

blade
{{-- layout.blade.php --}}
<x-tallui-notification position="top-right" :timeout="4000" />

blade
<x-tallui-file
    name="avatar"
    label="Profile Photo"
    accept="image/*"
    :

blade
<x-tallui-pin
    name="otp"
    label="Verification code"
    :length="6"
    :masked="false"
    :numeric="true"
    size="md"
    helper="Check your email for the 6-digit code."
/>

blade
<livewire:tallui-line-chart  :series="$series" :categories="$months" title="Revenue" />
<livewire:tallui-bar-chart   :series="$series" :categories="$months" :horizontal="false" />
<livewire:tallui-area-chart  :series="$series" :categories="$months" :smooth="true" />
<livewire:tallui-pie-chart   :series="$values" :categories="$labels" />
<livewire:tallui-pie-chart   :series="$values" :categories="$labels" :donut="true" />