Skip to content

Commit fd196e8

Browse files
thepillthepill
authored
Merge pull request #17 from DaniloPolani/fix-perPage
perPage & defaultPerPage
2 parents b315784 + 01624ab commit fd196e8

File tree

2 files changed

+65
-22
lines changed

2 files changed

+65
-22
lines changed

‎README.md

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,10 @@ And then.. use the component:
6666
Of course, code above will render garbage. Here are the props it accepts to render some sensible data:
6767

6868
```
69-
Prop name => Description => Example
69+
Prop name => Description => Example
7070
71-
title => The title of the datatable => "Todos" // Name in top
72-
columns => Columns. => [ // Array of objects
71+
title => The title of the datatable => "Todos" // Name in top
72+
columns => Columns. => [ // Array of objects
7373
{
7474
label: 'Name', // Column name
7575
field: 'name', // Field name from row
@@ -79,23 +79,24 @@ columns => Columns. => [
7979
html: false, // Escapes output if false.
8080
}
8181
]
82-
rows => Rows. => [ // Array of objects
82+
rows => Rows. => [ // Array of objects
8383
{
8484
name: "test", // Whatever.
8585
...
8686
}
8787
]
88-
perPage => Number of rows per.. page => 10 (default) // Results per page
89-
onClick => Func. to execute on click => console.log // Function, row 1st param
90-
clickable => Rows are clickable. => true (default) // Row is passed in the event payload
91-
Will fire `row-click` event // See react to click on row (below)
92-
sortable => Cause column-click to sort => true (default) // Whether sortable
93-
searchable => Add fuzzy search functionality => true (default) // Whether searchable
94-
exactSearch => Disable fuzzy search => true (default) // Whether only exact matches are returned
95-
paginate => Add footer next/prev. btns => true (default) // Whether paginated
96-
exportable => Add button to export to Excel => true (default) // Whether exportable
97-
printable => Add printing functionality => true (default) // Whether printable
98-
customButtons => Custom buttons thingy => [ // Array of objects
88+
perPage => Numbers of rows per page => [10, 20, 30, 40, 50] (default) // Results per page
89+
defaultPerPage => Default rows per page => 10 (default) // Default results per page, otherwise it will be the first value of perPage
90+
onClick => Func. to execute on click => console.log // Function, row 1st param
91+
clickable => Rows are clickable. => true (default) // Row is passed in the event payload
92+
Will fire `row-click` event // See react to click on row (below)
93+
sortable => Cause column-click to sort => true (default) // Whether sortable
94+
searchable => Add fuzzy search functionality => true (default) // Whether searchable
95+
exactSearch => Disable fuzzy search => true (default) // Whether only exact matches are returned
96+
paginate => Add footer next/prev. btns => true (default) // Whether paginated
97+
exportable => Add button to export to Excel => true (default) // Whether exportable
98+
printable => Add printing functionality => true (default) // Whether printable
99+
customButtons => Custom buttons thingy => [ // Array of objects
99100
{
100101
hide: false, // Whether to hide the button
101102
icon: 'search', // Materialize icon
@@ -128,3 +129,25 @@ var app = new Vue({
128129
...
129130

130131
```
132+
133+
### Rows per page
134+
135+
You can specify the options of rows per page with the `perPage` prop. The first value will be the default value and the array will be sorted, so you can put whatever number you want.
136+
137+
```html
138+
<!-- The default value will be 100 -->
139+
<datatable :perPage="[100, 10, 25, 50, 500]"></datatable>
140+
141+
```
142+
143+
The options will be rendered as `[10, 20, 50, 100, 500]`
144+
145+
![Rows per page](http://i.imgur.com/kPtppKz.png)
146+
147+
Otherwise, you can specify the default rows per page with the `defaultPerPage` prop.
148+
149+
```html
150+
<!-- The default value will be 100 -->
151+
<datatable :perPage="[10, 25, 50, 100, 500]" :defaultPerPage="100"></datatable>
152+
153+
```

‎src/DataTable.vue

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,9 @@
7171
<label>
7272
<span>Rows per page:</span>
7373
<select class="browser-default" @change="onTableLength">
74-
<option value="10">10</option>
75-
<option value="20">20</option>
76-
<option value="30">30</option>
77-
<option value="40">40</option>
78-
<option value="50">50</option>
79-
<option value="-1">All</option>
74+
<option v-for="option in perPageOptions" :value="option" :selected="option == currentPerPage">
75+
{{ option === -1 ? 'All' : option }}
76+
</option>
8077
</select>
8178
</label>
8279
</div>
@@ -112,7 +109,8 @@
112109
rows: {},
113110
clickable: {default: true},
114111
customButtons: {default: () => []},
115-
perPage: {default: 10},
112+
perPage: {default: [10, 20, 30, 40, 50]},
113+
defaultPerPage: {default: null},
116114
sortable: {default: true},
117115
searchable: {default: true},
118116
exactSearch: {
@@ -255,6 +253,28 @@
255253
},
256254
257255
computed: {
256+
perPageOptions: function() {
257+
var options = (Array.isArray(this.perPage) && this.perPage) || [10, 20, 30, 40, 50];
258+
259+
// Force numbers
260+
options = options.map( v => parseInt(v));
261+
262+
// Set current page to first value
263+
this.currentPerPage = options[0];
264+
265+
// Sort options
266+
options.sort((a,b) => a - b);
267+
268+
// And add "All"
269+
options.push(-1);
270+
271+
// If defaultPerPage is provided and it's a valid option, set as current per page
272+
if (options.indexOf(this.defaultPerPage) > -1) {
273+
this.currentPerPage = parseInt(this.defaultPerPage);
274+
}
275+
276+
return options;
277+
},
258278
processedRows: function() {
259279
var computedRows = this.rows;
260280

0 commit comments

Comments
 (0)