When coming from jQuery with its DataTables, you will wonder what to use in VueJS land. There are some implementations but none of them come close to it. In my opinion the best option so far is the DataTable from Spatie , its slick, fast and well documented and if you know Spatie, you can imagine that they are behind there stuff.
That beeing said, I am using it for a while and as the amount of rows in the current project grows, I needed a total of all rows in the footer. The demo page shows an example with the sum of all songs. A bit too much for me as I just wanted to show the overall count of rows, but I got the idea: Just display the length of the array, which I passed to the component and voilá the footer showed the
30 items correctly.
But … this works until you have a filter like in the demo page; than the sum still shows
30 even you filtered your table down to
10 (or as in the example, where it kept showing the overall count of the songs). Ok, you can pass a
scope to the footer template with the rows as shown here … but this also holds the original data but not the filtered data.
Note: In VueJS 2.5 or above use
slot-scope instead of
After a peek in the code, I figured out that the component provides a computed property called
displayedRows, which - as the name already says–keeps the displayed rows or in other words, the filtered rows. How can I access this?
First, I added the
ref property to the table component:
table-component(ref="table"). This acts as a gateway to the internals of the table. With
this.$refs.table.displayedRows.length I get the current amount of the filtered rows, which kind of worked. To proceed, you should keep in mind
- it is not possible to access
$refsin a computed property, because the child component might not be loaded at the time the computed property is built
- even 1) would not be true, using it in a computed property won’t work because
$refsis not reactive, meaning it will stay with the initial value forever
- And because of 2) you can not use it in
mounted()and assign the value to a local data variable
What about a watcher, you may asked. Yeah, close, but a normal watcher won’t work, because
$refs may undefined when mounted, as already mentioned. So, how can I watch it as soon it is mounted? Lets have a look of the final code:
Now the footer row shows the current filtered row count.