Closed norangit closed 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 []; } }, }
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>
@rubanraj54 Thanks very much!
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