Filament•15mo ago

Multiple tables on same page

I have a parent Livewire component with 2 child components that are using the Table builder (outside the Filament panel). The problem is after a page load the last loaded table overrides first tables data and after using pagination on the first table it loads the data back correctly.

16 Replies

EDOP•15mo ago

Also same issue with extending TableWidget vs TableComponent

cheesegrits•15mo ago

Advanced - Table Builder - Filament

EDOP•15mo ago

Unfortunately this is not it.

cheesegrits•15mo ago

Can you describe "overrides first tables data" a little more? Are the tables on the same model? What are the exact symptoms? Maybe a screencast.

EDOP•15mo ago

lets say table1 has 20 records and table2 has 680 records, when the page loads table1 shows 680 records with blank values becouse columns are different in each table, but after I start paginating table1 with empty records it loads correct 30 records in to it...

EDOP•15mo ago

This is the look of a table1 with 680 records that are in table2

EDOP•15mo ago

I assume there is some sort Alpine/Livewire event that loads table data in to these tables and this might be the issue in my case since bouth of my tables get's triggered on page load...

cheesegrits•15mo ago

Are the tables on the same model? Not sure if it would have any effect, just a data point for triaging. I have several pages with multiple tables (outside the admin panel) which work just fine, so I'm trying to figure out how I might replicate this issue.

EDOP•15mo ago

these tables lives on a fullpage Livewire component. At the beginning I thought it was because of the defferLoading() enabled but that seems doesn't effect my issue. Also tried adding key="table1".

cheesegrits•15mo ago

You still haven't answered my question. Can you provide some code? The view and the component class(es)? As per #✅┊rules, use gist if it's long.

EDOP•15mo ago

https://gist.github.com/EdOzolins/340950655896db6d7ae36fb2472c3458

cheesegrits•15mo ago

Ah, Sushi. So if you test with standard models, no Sushi, with the same setup, do you get the same issue? I'm guessing not. Pretty sure this will be something to do with Sushi. So I presume ProductService and InventoryService are getting data from some kind of API? But you use the same base SushiModel for the row handling?

EDOP•15mo ago

If I leave only one table component on the page it works as expected. Sushi has cache disabled.

class SushiModel extends Model
{
    use \Sushi\Sushi;

    private static array $rows;

    public static function setRows(array $rows): self
    {
        self::$rows = collect($rows)->map(function (array $row) {
            return collect($row)->map(fn (mixed $value) => is_array($value) ? json_encode($value) : $value);
        })->toArray();

        return new self;
    }

    protected function sushiShouldCache(): bool
    {
        return false;
    }

    public function getRows(): array
    {
        return self::$rows;
    }
}

class SushiModel extends Model
{
    use \Sushi\Sushi;

    private static array $rows;

    public static function setRows(array $rows): self
    {
        self::$rows = collect($rows)->map(function (array $row) {
            return collect($row)->map(fn (mixed $value) => is_array($value) ? json_encode($value) : $value);
        })->toArray();

        return new self;
    }

    protected function sushiShouldCache(): bool
    {
        return false;
    }

    public function getRows(): array
    {
        return self::$rows;
    }
}

cheesegrits•15mo ago

Sure, in theory it should probably work. But given that multiple tables on the same page work fine in Filament with standard models, that does rather point to Sushi as the problem. There's nothing in Filament which would just null out row content like you are seeing, so it pretty much has to be deeper than Filament, in whatever is providing the data. Have you delved into Sushi with maybe some ray() or dd() to see what's going on under the hood?

EDOP•15mo ago

Yup, confirming that without sushi it works. So instead of using the same Sushi model for each table (created separate one) did solve the problem. Thank you @cheesegrits

cheesegrits•15mo ago

Thought it might. 🙂

Gaming

Programming

Multiple tables on same page