kdion4891 / laravel-livewire-tables

A dynamic, responsive Laravel Livewire table component with searching, sorting, checkboxes, and pagination.
302 stars 41 forks source link

Defer loading option #14

Closed booni3 closed 4 years ago

booni3 commented 4 years ago

Hey,

Loving the package so far! Have you considered adding a deferred loading to the package? I cannot see any negatives to doing this even by default... but you could also provide a config for it.

I have implemented it by extending your table component as follows (the below method ensures pagination is not broken during loading)

class TableComponent extends BaseTableComponent
{
    public $loaded = false;

    public function tableLoaded()
    {
        $this->loaded = true;
    }

    public function tableView()
    {
        return view('laravel-livewire-tables::table', [
            'columns' => $this->columns(),
            'models' => $this->loaded ?
                $this->models()->paginate($this->per_page)
                : $this->emptyModel(),
        ]);
    }

    private function emptyModel()
    {
        return $this->query()->paginate();
    }
}

Then at the top of the table livewire component

<div wire:init="tableLoaded"></div>

What do you think?

kejojedi commented 4 years ago

what is the benefit of this

booni3 commented 4 years ago

This is to ensure page load is not held up by data crunching. In the below example, I have set my speed to a fast 3g connection (It is running locally on valet so is actually slower than this still). Our table has about 2 million rows in total and we are showing 50 at a time. Laravel pagination is not particularly quick. Without defer loading we have a few seconds of nothing before anything loads.

Kapture 2020-04-01 at 9 48 44

kdion4891 commented 4 years ago

submit a PR pls.