data table custom FooterCommponent feature not working

[Asinging]

i don't know if any one has successfully added the custom FooterComponent to the table. i have been trying it since last and i have read through the docs still not can't make a headway

[resuldeger]

here is my code I prepared the component prepared as an example. I prepared a datatable again as in the example I included the component.

[Asinging]

i practically copied the code in the docs, but still didn't work. i don't know if the css framework has anything to do with this, cus i am using vuetify, and from your example i can see that your are using bootstrap.

[Asinging]

Please if you can share just your footerComponent code (the exported code )that will be greatly helpful.

[uwla]

Hi @Asinging ! Thanks for the question

So, what part from the docs you didn't get it?

Remember:

The footerComponent must be a <tfoot> HTML element and it must have the properties data, dataDisplayed, dataFiltered

The property data correspond to all data passed to VueDataTable. The dataDisplayed corresponds to all data that is currently visible on the table. The dataFiltered corresponds to all data that was filtered by a search query. These properties can be used to perform common operations such as calculating the sum of the values of the total rows of a certain column.

Suppose we have a table that of fruits. The data is an array of objects whose properties are name, price, and amount. We can provide a custom footer to show the total amount of fruits bought and the total price.

The footer component would be something like:

<template>
  <tfoot v-show="dataDisplayed.length > 0">
    <td>Total</td>
    <td></td> 
    <td>{{ totalAmount }}</td> 
    <td>{{ totalPrice }}</td>
  </tfoot>  
</template>
<script>
export default {
  name: "TableFooter",
  computed: {
    totalPrice() {
      let s = 0;
      for (let f of this.dataDisplayed)
        s += f.price * f.amount;
      return s;
    }, 
    totalAmount() {
      let s = 0;
      for (let f of this.dataDisplayed)
        s += f.amount;
      return s;
    }
  },
  props: {
    data: Array,
    dataDisplayed: Array,
    dataFiltered: Array,
  }
}
</script>

And we pass this component as follow:

<template>
    <data-table v-bind="tableProps"/>
</template>
<script>
import TableFooter from './TableFooter.vue'

export default {
    /* ... some code */
    data() {
        return {
            tableProps: {
                columns: [ /* ... code */ ],
                data: [ /* ... more code */ ],
                footerComponent: TableFooter,
            }
        }
    }
}
</script>

[uwla]

I'll add a demo app on codesandbox using VueDataTable with custom footer

[Asinging]

@AndreSouzaAbreu , if you can add a demo app regarding the custom footer, it wil be great. i think the docs is simple and straight forward, i still don't get why is not working. i had to copy everything on docs as for the custom footer into my app, still not working. `here is my folder structure !(https://user-images.githubusercontent.com/39298294/150882592-8e73663a-e451-463b-9aef-86a8e2b07dcd.PNG)

custom footer file

`