Filter result count ?

[dgillier]

I'm trying to have the filters result count shown on a custom element after the filter button, but It looks the $rows variable is not accessible there ?

Any idea on how to get the Filter result count ?

Thanks :)
Denis

[lrljoe]

If you check out #1051 , I've given a method to get the currently visible IDs. You can use the same approach to get the Count.

Two different approaches depending on where you need the data

If you need it back in the DataComponent as a variable

Component will have something like

public int $rowCount = 0;

public function configure(): void
{
      $this->setComponentWrapperAttributes([
           "x-data" => "{ rowCount : \$wire.entangle('rowCount ') }"
       ])
       ->setConfigurableAreas([ 
           'before-pagination' => ['includes.areas.before-pagination']
       ]);
}

Your custom blade (includes.areas.before-pagination) will have something like

@aware(['rows','component'])
<div x-init="rowCount = {{ $rows->total() }};" ></div>

Keep in mind this will cause an additional page load, so worth using .defer on the entangle() if you want to avoid this, it will result in your first render not containing this though!

Another Blade within the Component (e.g. configurableArea or customView)

Component will have something like

public function configure(): void
{
       $this->setComponentWrapperAttributes([
          "x-data" => "{ rowCount : 0 }"
      ])
       ->setConfigurableAreas([ 
           'before-pagination' => ['includes.areas.before-pagination']
       ]);
}

Your custom blade (includes.areas.before-pagination) will have something like

@aware(['rows','component'])
<div x-init="rowCount = {{ $rows->total() }};" ></div>

You can then use the following in your blade.

<span x-text="rowCount"></span>

This approach WILL be up to date without an additional refresh.

[lrljoe]

Does this answer your question, or do you have any followup issues/questions?

I am looking at passing some pagination pieces back to the core table array, but there's a fair few PRs outstanding that I'd like added first and I don't want to add more to the plate!

[dgillier]

Thanks, I tried your solution

@aware(['rows','component'])
<div x-init="rowCount = {{ $rows->total() }};" ></div>

but $rows is always null ...
That was my problem, $rows is not available, and I don't know how to make it available in my blade file.

[lrljoe]

Where are you including your blade file? As in, which configurableArea, or are you using a customView approach?

And can you confirm if you need it back in the Component, or if you're just trying to display it on-page?

That particular blade code has to go into the configurable area

before-pagination

And requires you to setup the variable in your configure, you can then use alpine to reference it.

[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)

[dgillier]

In my Resources/Views folder… Where should it be then ? Thanks !

…

On 31 Mar 2023, at 00:53, Joe ***@***.***> wrote: Where are you including your blade file? — Reply to this email directly, view it on GitHub <#1113 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJBTUDFXUL3WD74EQ2OCM23W6YFILANCNFSM6AAAAAAWCBJIF4>. You are receiving this because you authored the thread.

[lrljoe]

Sorry, I meant where are you including your view within the data table!

Are you using one of these two configurable areas to point at your custom blade?

• before-pagination
• after-pagination

setConfigurableAreas([ 
           'before-pagination' => ['YourBladeHere']
       ]);

Can you post the contents of your custom blade?

[dgillier]

No, as I wanted to have the filter result count visible without having to scroll to the bottom of the table, I tried to use 'toolbar-left-end’.

@aware(['rows','component'])
<div >{{ $rows->total() ?? 0}}" ></div>

[lrljoe]

Yeah, that won't work I'm afraid! You'll need to pass it in via Alpine.

There are a few steps here:
1) Set up an Alpine variable
Do this in the componentWrapper (so that it is available to all of the child elements). This will hold the rowCount!

       $this->setComponentWrapperAttributes([
          "x-data" => "{ rowCount : 0 }"
      ]);

2) Set two custom views
First blade - "rowCountUpdateView" must be in before-pagination OR after-pagination areas, this is used solely for setting the Alpine variable to the correct value! I'd recommend using the before-pagination area!

Second blade - "YourOtherCustomView" Wherever you'd like to display the value!

$this->setConfigurableAreas([ 
           'before-pagination' => ['rowCountUpdateView'],
           'toolbar-left-end' => ['YourOtherCustomView']
 ]);

So your configure will have both of those methods in it:

public function configure(): void
{
       $this->setComponentWrapperAttributes([
          "x-data" => "{ rowCount : 0 }"
      ])
       ->setConfigurableAreas([ 
           'before-pagination' => ['rowCountUpdateView'],
           'toolbar-left-end' => ['YourOtherCustomView']
       ]);
}

3) Create the rowCountUpdateView blade
Create 'resources/views/rowCountUpdateView.blade.php' with just the following in it, this does receive the rows variable!

This will set the rowCount that you've created in setComponentWrapperAttributes x-data above to the correct value.

@aware(['rows','component'])
<div x-init="rowCount = {{ $rows->total() }};" ></div>

4) Output the variable in the other custom view/blade!
In YourOtherCustomView that you're using (in toolbar-left-end)), add the following where you'd like the count displayed, don't put anything else within the span!

<span x-text="rowCount"></span>

The x-text="rowCount" is an AlpineJS reference to the rowCount variable that we've set in the ComponentWrapper, and updated in the rowCountUpdateView . The count will update as soon as the rowCountUpdateView blade loads.

[dgillier]

Yes the count is correctly displayed :)
but I can't open the filters anymore with a js error ??

Uncaught ReferenceError: filtersOpen is not defined
    at eval (eval at <anonymous> (cdn.min.js:5:637), <anonymous>:3:32)
    at cdn.min.js:5:974
    at Xt (cdn.min.js:1:4899)
    at cdn.min.js:5:31963
    at r (cdn.min.js:5:16414)
    at Object.jr [as effect] (cdn.min.js:5:16202)
    at P (cdn.min.js:1:398)
    at cdn.min.js:1:511
    at Function.<anonymous> (cdn.min.js:5:31957)
    at r (cdn.min.js:5:2173)

[lrljoe]

Which version of alpinejs are you using?

Are you including it from a CDN or as part of your bundle?

I believe you're tailwind rather than bootstrap, so that won't be an issue, but have you included jQuery anywhere else in your layout/subsequent blades?

[dgillier]

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
I'm using tailwind...

And there is probably some jquery code somewhere...

[lrljoe]

It's actually my fault completely after a second glance. I've made an adjustment to allow for this in the next version, and I didn't remember that it wasn't released yet! I'm assuming you're using the slide-down approach to filters?

If so - using the following will sort you out, as it currently uses the same spot to determine if the filters are open or not, which I've fixed in the next version to avoid this kind of clash!

       $this->setComponentWrapperAttributes([
          "x-data" => "{ rowCount : 0, filtersOpen: \$wire.filterSlideDownDefaultVisible }"
      ])

[dgillier]

Yes I'm using slide-down filters...

Thanks ++

Maybe I should wait for the next released then ?

[lrljoe]

If you wait for the next release, then you'll be able to access the count of currently visible items by calling the following from anywhere within your datatable component, or any blade included within the component. Purely as you asked nicely, and it seemed sensible!

    {{ $this->paginationCurrentCount }}

Alternatively you can of course just add the extra filtersOpen: item into your current configure() method, as otherwise it will generate the error when it can't figure out how to set whether the filters are open or not.

If you want to test this in a non production environment, then you could try using the "dev-develop" version of the package, which has a number of changes in it (See Dev Changelog for details)

[dgillier]

Great !
Any chance to also get something as {{ $this->rowsCount }} then ?

FYI I'm adding the filter result count on the right of it with your solution...
(notice one of your custom filter in it ;)

[lrljoe]

I'll be honest, I'm not sure about the "Total Rows Count" - for this release anyway! I've still got to do some final reviews of the code commits from myself and others, and add a note for Anthony so that he knows why I've changed certain things, which I promised myself I'd do by yesterday evening!

I'm fully aware that this is the first time that Anthony has let me pull so much into a release, and he may well want to revert some of the changes. There's a significant amount in there, GitHub reports (110 changed files with 3,658 additions and 1,014 deletions.) and some of it is a significant tweak to how particular elements work (e.g. filter labels now reside within the filters, rather than seperately)

What I may propose is a "stable" branch of the development tree, which will have new features/items that are working, but not necessarily ready for the "master" branch (e.g. missing tests/documentation etc), which should allow for greater community testing/opinions on certain new features, without impacting on the "Pending Release" or "Production" elements.

If I don't manage to stick it into develop with a test today, then it'll be in the next version almost certainly, as it is literally two lines of code to implement

I'm always glad to see someone else getting benefit out of things I've stuck together for myself/customers!
For your languages filter, I did write a "smartSelect" version which has the country flags in it. If that's interesting then I'll double check what I did with the documentation.

Worth noting that the next version (if all pulls are accepted), also has a CustomPills method for the filters, so you can use a custom blade to display the filter pills function
(i.e this bit)

[lrljoe]

The next release also allows you to specify rows and column spans for filters when using the slide down method, so plenty in store for you!

[dgillier]

Don't worry, you are doing an amazing job to add new features to this great component !
Again, many thanks for doing it :)

(Yep I'm looking for the coming "spans" features on filter ;)

[lrljoe]

Awesome, and it's a pleasure, @rappasoft has done amazing work to bring us to this point, I'm just adding little sprinkles where I can.
If you have any ideas/thoughts, I really would encourage opening a feature request, as it'll help drive the direction massively.

There's a few things on my to-do list at the mo, in addition to exposing the full count:

• cursor pagination
• fully replace BulkActions frontend with Alpine (already complete, just not adding into the mix this time)
• extra common relationships by default
• sortable labels (already complete, just not adding into the mix this time)

I do need to chat to Anthony to see how we can ensure that multiple people don't try to build the same feature at the same time! Maybe wiki pages or similar