Adding "Showing 1 to 10 from 57 items"

[rexdarel]

Most tables does have something like this. How to add this?

[GerkinDev]

Hi,

Actually, there is no super simple way to do this for now. But you can achieve this in the following way:

<datatable :columns="columns" :data="rows" :filter="filter" :per-page="25" name="myDatatableName" ref="myDatatableRef">
    <template slot="footer">
        <p>Showing {{start + 1}} to {{start + displayed}} of {{total}} entries</p>
    </template>
</datatable>
<datatable-pager v-model="page" table="myDatatableName""></datatable-pager>

new Vue( {
    data: {
        ready: false,
    },

    computed: {
        start(){
            if(!this.ready){
                return 0;
            }
            return ((this.$refs.myDatatableRef.page) - 1) * this.$refs.myDatatableRef.perPage;
        },
        displayed(){
            if(!this.ready){
                return 0;
            }
            return this.$refs.myDatatableRef.displayedRows.length;
        },
        total(){
            if(!this.ready){
                return 0;
            }
            return this.$refs.myDatatableRef.totalRows;
        }
    },

    created(){
        this.$on( 'vue-datatable::ready', tableName => {
            if ( tableName === 'myDatatableName' ) {
                this.ready = true;
            }
        } )
    }
} )

I will check how to simplify this for the next versions

Cheers ! ;)

[rexdarel]

Hi @GerkinDev thanks for this solution. However, it still show 0 values

[GerkinDev]

Can you please post a minimal repro ?

[GerkinDev]

For follow up, please look at 📚 the tutorials.