Is there a way to get all the ids for the rows that are showing on the current table page?

[SimonMacIntyre]

For example, 100 rows and I am only looking at page 2, elements 10-20, and I want to always know the IDs on the current page view?

[SimonMacIntyre]

Follow-up question: is there an event to hook into for onPageChange? I cannot find it!

[lrljoe]

Few options off the top of my head, but easiest one would be:

• Hook into the Bulk Actions Helper, use the

setAllSelected()

Then use getSelected elsewhere to get the IDs.

As for pagination, it depends whether you're using Tailwind or Bootstrap, but the pagination is standard and you can override gotoPage in your component and just make sure you call the original method at the end.

[SimonMacIntyre]

Thanks for the insight, here is what I ended up using:

   public function mount()
    {
        $this->currentPageUuids         = $this->builder()->paginate(
            perPage: $this->perPage,
            columns: ['uuid'],
            page: $this->page
        )->pluck('uuid')->toArray();
    }

    public function updatedPage($page) {
        $this->currentPageUuids = $this->builder()->paginate(
            perPage: $this->perPage,
            columns: ['uuid'],
            page: $page
        )->pluck('uuid')->toArray();
    }

The mount takes care of the first-load (including working if you are already in page 2 or something, by referencing $this->page. Then we hook into the updatedPage() to update our own property we created to track this.

[lrljoe]

Depending on what exactly you're wanting to do with the IDs, you could just hook into the $rows variable within datatable.blade and fire that to whatever you desire, saving you a query (depending on complexity of your filters etc).

Perhaps stick a feature request in, if anyone else can see a use case then I'd be happy to do a PR for a function to return it, saving everyone a tiny bit of pain, as it'd just be a line of code and a couple of test functions.

If you can't wait for that, then you could do the following, keep in mind that this isn't in any way supported, and using render() yourself may result in unexpected happenings!

    /**
     * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
     */
    public function render()
    {
        $this->setupColumnSelect();
        $this->setupPagination();
        $this->setupSecondaryHeader();
        $this->setupFooter();
        $this->setupReordering();

        $rows = $this->getRows();
        $this->currentPageUuids = $rows->pluck($this->getPrimaryKey())->toArray();
        return view('livewire-tables::datatable')
            ->with([
                'columns' => $this->getColumns(),
                'rows' => $rows,
                'customView' => $this->customView(),
            ]);
    }

Saves you running the query, and lets you get access to the data more expediently.

[SimonMacIntyre]

Ooooo this is really interesting, will give this a try tomorrow! Thanks again friend!

[lrljoe]

No problem, if there seems to be appetite then I'll issue a PR, @rappasoft any big concerns or existing method of doing this? I'll obviously adjust to naming convention and write tests etc

[SimonMacIntyre]

If anyone cares on the why behind such a use case, if it helps: basically we have some columns that are dynamic. Dynamic In the sense that, on the current page in view, we want to lets say, listen to data streams for the 10 rows currently in view, via a shared websocket connection, and dynamically updating the column (and using wire:ignore on this column component). On changing the table page, we want to stop listening to the last pages rows related data streams and start listening to the streams related to the new 10 now in view. Thus, we basically just want to efficiently know the current ids of the rows in scope, so that the component doing the switching of data streams can just be fed that list, and update accordingly.

[lrljoe]

I've come across another solution for this while doing some modifications to the Bulk Actions if you're interested, it involves a modification to the pagination blade, but then will give you the current IDs for the page.

[SimonMacIntyre]

Definitely interested! 🙏

[lrljoe]

So advise caution as there's an active PR for the Bulk Actions, which uses a similar behaviour, if that's implemented then my guidance below will change as it'll be easier.

First create a public array to use to store/pass the IDs back and forward in your DataTableComponent.
e.g.

    public array $visibleRowIds = [];

Next, you need to setup an appropriate mapping in Alpine, so in your configure() method, add the following. Making sure that visibleRowIds matches your public array name, taking care to include the escape \ for $wire, and the opening/closing { } within the quote marks.

$this->setComponentWrapperAttributes([
          "x-data" => "{ visibleRowIds: \$wire.entangle('visibleRowIds') }"
      ])

Finally, one of two options
Option 1)
Preferred! Set a "before-pagination" area to a custom blade in your configure()

  $this->setConfigurableAreas([ 
      'before-pagination' => ['includes.areas.your-before-pagination-blade']
  ])

Populate this blade with the following

@aware(['rows','component'])
<div x-init="visibleRowIds = @js($rows->pluck($component->getPrimaryKey())->toArray());" ></div>

Option 2)
Less appetising choice - edit pagination.blade.php
Replace the first line under your theme to include the following init function, i.e.

@if ($theme === 'tailwind')
<div>

With the following, making sure that visibleRowIds matches the array name.

@if ($theme === 'tailwind')
<div x-init="visibleRowIds = @js($rows->pluck($component->getPrimaryKey())->toArray());">

Now, on render, your $visibleRowIds will be populated with an array of the visible IDs, using the Primary Key of your model.

[lrljoe]

I've made some tweaks to avoid you needing to edit any package blades

[lrljoe]

The downside to this is that it will cause an additional render. If you are happy to wait until the next render to have the IDs, then set your x-data to be .defer at the end, i.e.

$this->setComponentWrapperAttributes([
          "x-data" => "{ visibleRowIds: \$wire.entangle('visibleRowIds').defer }"
      ])

This will mean that it'll be out of sync until they either sort/search/filter or refresh the page, if you have polling enabled then it'll be updated after the next poll.

[lrljoe]

I will look at populating this by default if the primaryKey is set, just to save everyone some pain!

[SimonMacIntyre]

Thanks Joe!

[lrljoe]

Expect this functionality, not in the next release, but the one after. I've already stuck far too much in the next release!

[lrljoe]

One other quick note.

If you don't need it in the data table component, and just need it in a blade or another component then you can do away with the entangle piece and access the array via alpine elsewhere.

[lrljoe]

This may make it into the next release yet, I've just added it into the development branch

• Added getPerPageDisplayedItemIds() and getPerPageDisplayedItemCount() along with public variables to allow retrieval of currently paginated PrimayKey and Item Count https://github.com/rappasoft/laravel-livewire-tables/pull/1136
  

If you're using the develop branch then you should see two new public variables:

• array $paginationCurrentItems (array of PrimaryKey of all displayed items)
  and
• int $paginationCurrentCount (number of displayed items)

[lrljoe]

Available in v2.12.0 let me know if you need clarification!