rubanraj54 / vue-bootstrap4-table

Advanced table based on Vue 2 and Bootstrap 4 ⚡️
MIT License
219 stars 57 forks source link

prop 'totalRows' should be case insensitive when 'server_mode' is true #63

Closed norangit closed 4 years ago

norangit commented 4 years ago

Hi,

If server_mode is true, then prop 'totalRows' is needed, but it does not work. It will be parsed as 'totalrows', because attribute name in HTML is case insensitive. So prop 'totalRows' in file VueBootstrap4Table.vue should be update:

props: { rows: { type: Array, required: true }, columns: { type: Array, required: true }, //should be totalrows totalRows: { type: Number, default: 0 }, config: { type: Object, default: function () { return {}; } }, classes: { type: Object, default: function () { return {}; } }, actions: { type: Array, default: function () { return []; } }, customFilters: { type: Array, default: function () { return []; } }, }

vue: 2.6.10 vue-bootstrap4-table: latest

norangit commented 4 years ago

props: { rows: { type: Array, required: true }, columns: { type: Array, required: true }, //should be totalrows totalRows: { type: Number, default: 0 }, config: { type: Object, default: function () { return {}; } }, classes: { type: Object, default: function () { return {}; } }, actions: { type: Array, default: function () { return []; } }, customFilters: { type: Array, default: function () { return []; } }, }

rubanraj54 commented 4 years ago

Hey @norangit

Thanks for reporting this.

I made a mistake when I wrote the documentation.

Actually, in JavaScript scope it should be "totalRows" which is correct in the current code. But when you pass the prop the table component, you should use "total-rows". You can see the example here https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended

I will update the documentation in the next release.

Also you can refer this example.

<template>
    <div id="app">
        <vue-bootstrap4-table :rows="rows"
                              :columns="columns"
                              :config="config"
                              @on-change-query="onChangeQuery"
                              :total-rows="total_rows">
        </vue-bootstrap4-table>
    </div>
</template>
norangit commented 4 years ago

@rubanraj54 Thanks very much!