Paginate table records

[Arkokeando]

How can I paginate a table where I have tons of records to show for example 20 per page?
I'm using ->paginate() in the query but I cannot show in the layout the number of pages.

namespace App\Orchid\Screens;

use App\Models\Dropshipper;
use App\Models\Product;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Str;
use Orchid\Screen\Action;
use Orchid\Screen\Actions\Button;
use Orchid\Screen\Actions\ModalToggle;
use Orchid\Screen\Fields\CheckBox;
use Orchid\Screen\Fields\Input;
use Orchid\Screen\Fields\Select;
use Orchid\Screen\Repository;
use Orchid\Screen\Screen;
use Orchid\Screen\TD;
use Orchid\Support\Color;
use Orchid\Support\Facades\Layout;
use Orchid\Support\Facades\Toast;

class ProductsScreen extends Screen
{
    /**
     * Query data.
     *
     * @return array
     */
    public function query(): iterable
    {
        $products_list = DB::table('products')->get();
        $data = array();
        foreach ($products_list as $product) {
            $data[] = new Repository([
                'id' => $product->id,
                'name' => $product->name,
                'sku' => $product->sku,
                'quantity' => $product->quantity,
                'dropshipper_id' => $product->dropshipper_id,
                'barcode' => $product->barcode,
                'shop_id' => $product->shop_id,
                'pre_orderable' => $product->pre_orderable,
                'inventory_management_shopify' => $product->inventory_management_shopify
            ]);
        }

        return [
            'table' => $data
        ];
    }

    /**
     * Display header name.
     *
     * @return string|null
     */
    public function name(): ?string
    {
        return 'Products Screen';
    }

    public function description(): ?string
    {
        return 'Products information';
    }

    /**
     * Button commands.
     *
     * @return Action[]
     */
    public function commandBar(): iterable
    {

        return [
            Button::make('Edit Products')
                ->method('saveProductChanges')
                ->type(Color::SUCCESS()),
        ];
    }

    /**
     * Views.
     *
     * @return \Orchid\Screen\Layout[]|string[]
     */
    public function layout(): iterable
    {
        return [
            Layout::modal('changeDropshipperModal', Layout::rows([
                Select::make('select')
                    ->title('Dropshipper')
                    ->empty('')
                    ->fromModel(Dropshipper::class, 'name'),
            ]))->title('Change Dropshipper')
                ->async('asyncGetProduct'),

            Layout::table('table', [
                TD::make('name', 'Name')
                    ->render(fn(Repository $model) => Str::limit($model->get('name'), 200)),
                TD::make('pre_orderable', 'Pre Orderable')
                    ->render(fn(Repository $model) => CheckBox::make("pre_orderable-checkbox[]")
                        ->sendTrueOrFalse()
                        ->value($model->get('pre_orderable'))),
                TD::make('inventory_management_shopify', 'Inventory (shopify)')
                    ->render(fn(Repository $model) => CheckBox::make("inventory_management_shopify-checkbox[]")
                        ->sendTrueOrFalse()
                        ->value($model->get('inventory_management_shopify'))),
                TD::make('id', 'Id')
                    ->defaultHidden()
                    ->cantHide()
                    ->render(fn(Repository $model) => Input::make('productIds[]')
                        ->value($model->get('id'))
                        ->hidden()),
                TD::make('sku', 'SKU')
                    ->render(fn(Repository $model) => Str::limit($model->get('sku'), 200)),
                TD::make('barcode', 'Barcode')
                    ->render(fn(Repository $model) => Str::limit($model->get('barcode'), 200)),
                TD::make('quantity', 'Quantity')
                    ->render(fn(Repository $model) => Str::limit($model->get('quantity'), 200)),
                TD::make('shop_id', 'Shop ID')
                    ->render(fn(Repository $model) => Str::limit($model->get('shop_id'), 200)),
                TD::make('dropshipper', 'Dropshipper')
                    ->render(fn(Repository $model) => ModalToggle::make($this->getDropshipperName($model))
                        ->modal('changeDropshipperModal')
                        ->method('changeDropshipper')
                        ->asyncParameters(['id' => $model->get('id')])
                        ->type(Color::DEFAULT())
                        ->icon('refresh')),
            ]),

        ];
    }

    /**
     * @param Request $request
     * @param Product $product
     * @return void
     */
    public function changeDropshipper(Request $request, Product $product): void
    {
        $request->validate(['select' => 'required']);
        $selected_dropshipper = ['dropshipper_id' => $request->input('select')];
        $product->fill($selected_dropshipper)->save();

        Toast::info(__('Dropshipper changed successfully.'));
    }

    /**
     * @param Request $request
     * @return void
     */
    public function saveProductChanges(Request $request)
    {
        $productIds = $request->input('productIds');
        $preOrderable = $this->filter_array($request->input('pre_orderable-checkbox'));
        $inventoryManagementShopify = $this->filter_array($request->input('inventory_management_shopify-checkbox'));

        for ($i = 0; $i < count($productIds); $i++) {
            $product = Product::find($productIds[$i]);
            $product->pre_orderable = $preOrderable[$i];
            $product->inventory_management_shopify = $inventoryManagementShopify[$i];
            $product->save();
        }
        Toast::success('Product changes saved successfully!');
    }

    function filter_array(array $array_to_filter): array
    {
        $final_array = [];
        for ($i = 0; $i < count($array_to_filter); $i++) {
            if ($i + 1 < count($array_to_filter)) {
                if ($array_to_filter[$i] == 1 || ($array_to_filter[$i] == 0 && $array_to_filter[$i + 1] == 0)) {
                    $final_array[] = $array_to_filter[$i];
                }
            } else {
                $final_array[] = $array_to_filter[$i];
            }
        }
        return $final_array;
    }

    /**
     * @param Repository $model
     * @return string
     */
    public function getDropshipperName(Repository $model): string
    {
        $dropshipper_info = Dropshipper::query()->findOrFail($model->get('dropshipper_id'));

        return $dropshipper_info['name'];
    }

    /**
     * @param Product $model
     * @return iterable
     */
    public function asyncGetProduct(Product $model): iterable
    {
        return ['model' => $model];
    }

}

[c-gross]

Why are using such a complex way to load the data?
You should use the object model of products to load the product list. The pagination is working out of the box in Orchid.

[c-gross]

When you have proper relationships set up in the models, it's no problem to load and display them in the table.
Filter and sorting will not work out of the box for data from relationships.

My product screen has only one relation so far and looks like this:

public function query(): iterable
    {
        return [
            'products' => Product::filters()->with('partner')->defaultSort('created_at', 'desc')->paginate()
        ];
    }

Using with will load the relationship to avoid loading the data one by one when the table is getting rendered.

To access the partner data in the table I'm using this:

TD::make('partner_id', __('Partner'))
                ->sort()
                ->filter(TD::FILTER_SELECT, Partner::all()->pluck('name','id'))
                ->width('200px')
                ->render(function (Product $product) {
                    return $product->partner->name;
                })

[Arkokeando]

As I understand, you are using filters, and you have the model according to that use, in my case, I do not need it. (Maybe I do, I don't know, I have null experience in this)
My question is how can I implement the pagination and navigation (right no I can only see the first one) having this table.

[c-gross]

Ya I saw it wrong in your code. You don't use any relationship but doesn't change my answer. Use the model and not a Laravel DB query.

[Arkokeando]

Thank you, I will do it like this and I hope I can make it work as I want.

[peyman-pourkermani]

If I may give some feedback:

From the documentation:

"Screens do not need to be concerned with where the data comes from, as it can be retrieved from a database, API, or any other external source. Instead, screens focus on defining the appearance of the page using provided templates (called “layouts”), and specifying which data should be displayed in each layout."

As it stands, in order for screen layouts or many other features to work out of the box then we need to use Eloquent Models or Resource objects. So that's fine. You don't want to use Models (maybe because you can't or don't need to) then use Resource objects. Now if you need to paginate ... again it seems that Orchid works out of the box with Eloquent Model pagination. So do we need to create a Paginator on the fly if we don't use models ? Again that's fine but there is no documentation on this and without looking into the source code one can't figure anything out.