Table

• Cells
• Alignment
• Sorting
• Width
• Show and hide columns
• Data output
• Table options
• Total row
• Column Expansion

The table layout is used to display minimal information for viewing and selection.

To create, run the command:

php artisan orchid:table PatientListLayout

Example:

namespace App\Layouts\Clinic\Patient;

use Orchid\Screen\TD;
use Orchid\Screen\Actions\Link;
use Orchid\Screen\Actions\ModalToggle;
use Orchid\Screen\Layouts\Table;
use Orchid\Platform\Http\Filters\SearchFilter;
use App\Http\Filters\LastNamePatient;

class PatientListLayout extends Table
{
    /**
     * Data source.
     *
     * The name of the key to fetch it from the query.
     * The results of which will be elements of the table.
     *
     * @var string
     */
    protected $target = 'patients';

    /**
     * @return TD[]
     */
    protected function columns() : array
    {
        return [
            TD::set('last_name','Last name')
                ->align('center')
                ->width('100px')
                ->render(function ($patient) {
                    return Link::make($patient->last_name)
                        ->route('platform.clinic.patient.edit', $patient);
                }),

            TD::set('first_name', 'First Name')
                ->sort()
                ->render(function ($patient) {
                    return Link::make($patient->first_name)
                        ->route('platform.clinic.patient.edit', $patient);
                }),

            TD::set('phone','Phone')
                ->render(function ($patient){
                    return ModalToggle::make($patient->phone)
                        ->modal('oneAsyncModal')
                        ->modalTitle('Phone')
                        ->method('saveUser')
                        ->asyncParameters([
                            'id' => $patient->id,
                        ]);
                }),

            TD::set('email','Email'),
            TD::set('created_at','Date of publication'),
        ];
    }
}

Tables also support writing through short syntax without creating a class:

use Orchid\Support\Facades\Layout;
use Orchid\Screen\TD;

Layout::table('clients', [
    TD::set('name'),
    TD::set('created_at')->sort(),
]);

Cells

A table is only a general wrapper for which you need to specify TD classes. Designed to create a single cell.

use Orchid\Screen\TD;

TD::set('last_name');

The set method is the main method, sets the key name from the array and the display name.

TD::set('last_name', 'Last name');

Alignment

Content alignment control can be controlled using the align method:

TD::set('last_name')->align(TD::ALIGN_LEFT);
TD::set('last_name')->align(TD::ALIGN_CENTER);
TD::set('last_name')->align(TD::ALIGN_RIGHT);

Sorting

Sorting the selection should be done in the query screen, for models, you can use automatic http sorting and filtering

To enable active sorting by this column you must specify the sort method:

TD::set('last_name')->sort();

Width

You can control the width of the cell using the width method:

TD::set('last_name')->width('100px');

Show and hide columns

By default, the user can hide any column for himself, but you can prohibit doing this by specifying:

TD::set('last_name')->cantHide();

And also hide by default, but can be shown at the request of the user.

TD::set('last_name')->defaultHidden();

Data output

In some cases, you may need to display combined   data, the render method is for this purpose intended. It implements the ability to generate cells according to the function:

TD::set('full_name')
    ->render(function ($user) {
        return $user->firt_name . ' ' . $user->last_name;
    });

The loopback function must return any string value:

TD::set('full_name')
    ->render(function ($user) {
        return view('blade_template', [
            'user' => $user
        ]);
    });

Please note that you can use fields and actions:

use Orchid\Screen\Actions\Link;

TD::set('full_name')
    ->render(function ($user) {
        return Link::make($user->last_name)
               ->route('platform.user.edit', $user);
    });

Sometimes it may be necessary to get the value from the query screen, rather than relying only on the target. You can get the value as follows:

use Orchid\Screen\Actions\Link;

TD::set('price')
    ->render(function ($product) {
        return $product->price + $this->query->get('tax');
    });

Table options

You can specify the text to be displayed if the table is empty specifying methods:

/**
 * @return string
 */
protected function iconNotFound(): string
{
    return 'table';
}

/**
 * @return string
 */
protected function textNotFound(): string
{
    return __('There are no records in this view');
}

/**
 * @return string
 */
protected function subNotFound(): string
{
    return '';
}

If the table rows do not seem contrasting to you, then you can enable striped mode:

/**
 * @return bool
 */
protected function striped(): bool
{
    return false;
}

Total row

Adds a summary row at the bottom of the table, for this you need to define the total method and describe the required cells. For example:

public function total():array
{
    return [
        TD::set('total')
            ->align(TD::ALIGN_RIGHT)
            ->colspan(2)
            ->render(function () {
                return 'Total:';
            }),

        TD::set('total_count')
            ->align(TD::ALIGN_RIGHT),

        TD::set('total_active_count')
            ->align(TD::ALIGN_RIGHT),
    ];
}

This line will ignore the specified target based on the result of the query screen:

public function query(): array
{
    return [
        'total_active_count' => '$93 960',
        'total_count' => '$103 783',
        // ...
    ];
}

Column Expansion

When working with the same type of data, it is often required to process it in the same way, in order not to duplicate the code in the layers, it is possible to extend the TD class using its own methods. To do this, it is necessary to register the closure function in the service provider.

Registration example:

// AppServiceProvider.php
TD::macro('bool', function () {

    $column = $this->column;

    $this->render(function ($datum) use ($column) {
        return view('bool',[
            'bool' => $datum->$column
        ]);
    });

    return $this;
});

Template example:

// bool.blade.php

@if($bool)
    <i class="icon-check text-success"></i>
@else
    <i class="icon-close text-danger"></i>
@endif

Usage example:

public function grid(): array
{
    return [
        TD::set('status')->bool(),
    ];
}