Skip to content

Commit 0d178d7

Browse files
justice47Yousef Sultan
justice47
authored and
Yousef Sultan
committed
Add demo
1 parent 31a148d commit 0d178d7

30 files changed

+3937
-70
lines changed

‎README.md‎

Lines changed: 281 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,29 @@
66

77
> Library is kind of unstable. Bugs, missing features might be present
88
9+
## Demo
10+
11+
https://justice47.github.io/vue-materialize-datatable-demo-vue/
912

1013
## Features
11-
- Sorting, with numerical sorting
12-
- Pagination
13-
- Localization
14-
- Fuzzy searching
15-
- Server searching
16-
- Excel export
17-
- Printing
18-
- Custom topbar buttons
19-
- Flexible data-from-row extractor
20-
- Follows the Material Design spec
21-
- Really, really efficient.. handles thousands of rows flawlessly
22-
- And much more..
14+
15+
- Sorting, with numerical sorting
16+
- Pagination
17+
- Localization
18+
- Fuzzy searching
19+
- Server searching
20+
- Excel export
21+
- Printing
22+
- Custom topbar buttons
23+
- Flexible data-from-row extractor
24+
- Follows the Material Design spec
25+
- Really, really efficient.. handles thousands of rows flawlessly
26+
- And much more..
2327

2428
## Requirements
25-
- [`materialize-css`](https://www.npmjs.com/package/materialize-css) (and **NOT** any other MD library!)
26-
- VueJS 2
29+
30+
- [`materialize-css`](https://www.npmjs.com/package/materialize-css) (and **NOT** any other MD library!)
31+
- VueJS 2
2732

2833
## Installation
2934

@@ -85,47 +90,256 @@ And then.. use the component:
8590

8691
Of course, code above will render garbage. Here are the props it accepts to render some sensible data:
8792

88-
```
89-
Prop name => Description => Example
90-
91-
title => The title of the datatable => "Todos" // Name in top
92-
columns => Columns. => [ // Array of objects
93-
{
94-
label: 'Name', // Column name
95-
field: 'name', // Field name from row
96-
// Use dot for nested props
97-
// Can be function with row as 1st param
98-
numeric: false, // Affects sorting
99-
html: false, // Escapes output if false.
100-
}
101-
]
102-
rows => Rows. => [ // Array of objects
103-
{
104-
name: "test", // Whatever.
105-
...
106-
}
107-
]
108-
perPage => Numbers of rows per page => [10, 20, 30, 40, 50] (default) // Results per page
109-
defaultPerPage => Default rows per page => 10 (default) // Default results per page, otherwise it will be the first value of perPage
110-
onClick => Func. to execute on click => console.log // Function, row 1st param
111-
clickable => Rows are clickable. => true (default) // Row is passed in the event payload
112-
Will fire `row-click` event // See react to click on row (below)
113-
sortable => Cause column-click to sort => true (default) // Whether sortable
114-
searchable => Add fuzzy search functionality => true (default) // Whether searchable
115-
exactSearch => Disable fuzzy search => true (default) // Whether only exact matches are returned
116-
serverSearch => Server search is used to fetch data from server => false (default) // If you wanna do server search then searchable and serverSearch must be true and use serverSearchFunc as callback.
117-
serverSearchFunc => Function for search search => function // For this searchSearch criteria is must.
118-
paginate => Add footer next/prev. btns => true (default) // Whether paginated
119-
exportable => Add button to export to Excel => true (default) // Whether exportable
120-
printable => Add printing functionality => true (default) // Whether printable
121-
customButtons => Custom buttons thingy => [ // Array of objects
122-
{
123-
hide: false, // Whether to hide the button
124-
icon: 'search', // Materialize icon
125-
onclick: aFunc, // Click handler
126-
}
127-
]
128-
```
93+
<table>
94+
<tr>
95+
<th>
96+
Prop name
97+
</th>
98+
<th>
99+
Description
100+
</th>
101+
<th>
102+
Example
103+
</th>
104+
</tr>
105+
<tr>
106+
<td>
107+
<code>title</code>
108+
</td>
109+
<td>
110+
The title of the datatable
111+
</td>
112+
<td>
113+
<pre>
114+
"Todos" // Name in top
115+
</pre>
116+
</td>
117+
</tr>
118+
<tr>
119+
<td>
120+
<code>columns</code>
121+
</td>
122+
<td>
123+
Columns
124+
</td>
125+
<td>
126+
<pre>
127+
<code>
128+
[ // Array of objects
129+
{
130+
label: "Name", // Column name
131+
field: "name", // Field name from row
132+
// Use dot for nested props
133+
// Can be function with row as 1st param
134+
numeric: false,// Affects sorting
135+
html: false // Escapes output if false.
136+
}
137+
];
138+
</code>
139+
</pre>
140+
</td>
141+
</tr>
142+
<tr>
143+
<td>
144+
<code>rows</code>
145+
</td>
146+
<td>
147+
Rows
148+
</td>
149+
<td>
150+
<pre>
151+
<code>
152+
[ // Array of objects
153+
{
154+
name: 'test', // Whatever
155+
...
156+
}
157+
];
158+
</code>
159+
</pre>
160+
</td>
161+
</tr>
162+
<tr>
163+
<td>
164+
<code>perPage</code>
165+
</td>
166+
<td>
167+
Numbers of rows per page
168+
</td>
169+
<td>
170+
<pre>
171+
[10, 20, 30, 40, 50] (default) // Results per page
172+
</pre>
173+
</td>
174+
</tr>
175+
<tr>
176+
<td>
177+
<code>defaultPerPage</code>
178+
</td>
179+
<td>
180+
Default rows per page
181+
</td>
182+
<td>
183+
<pre>
184+
10 (default) // Default results per page, otherwise it will be the
185+
first value of perPage
186+
</pre>
187+
</td>
188+
</tr>
189+
<tr>
190+
<td>
191+
<code>onClick</code>
192+
</td>
193+
<td>
194+
Function to execute on click
195+
</td>
196+
<td>
197+
<pre>
198+
console.log('hey') // Function, row 1st param
199+
</pre>
200+
</td>
201+
</tr>
202+
<tr>
203+
<td>
204+
<code>clickable</code>
205+
</td>
206+
<td>
207+
Clickable rows. Will fire row-click event
208+
</td>
209+
<td>
210+
<pre>
211+
true (default) // Row is passed in the event payload
212+
</pre>
213+
</td>
214+
</tr>
215+
<tr>
216+
<td>
217+
<code>sortable</code>
218+
</td>
219+
<td>
220+
Cause column-click to sort
221+
</td>
222+
<td>
223+
<pre>
224+
true (default) // Whether sortable
225+
</pre>
226+
</td>
227+
</tr>
228+
<tr>
229+
<td>
230+
<code>searchable</code>
231+
</td>
232+
<td>
233+
Add fuzzy search functionality
234+
</td>
235+
<td>
236+
<pre>
237+
true (default) // Whether searchable
238+
</pre>
239+
</td>
240+
</tr>
241+
<tr>
242+
<td>
243+
<code>exactSearch</code>
244+
</td>
245+
<td>
246+
Disable fuzzy search
247+
</td>
248+
<td>
249+
<pre>
250+
true (default) // Whether only exact matches are returned
251+
</pre>
252+
</td>
253+
</tr>
254+
<tr>
255+
<td>
256+
<code>serverSearch</code>
257+
</td>
258+
<td>
259+
Server search is used to fetch data from server
260+
</td>
261+
<td>
262+
<pre>
263+
false (default) // If you wanna do server search then searchable and
264+
serverSearch must be true and use serverSearchFunc as callback.
265+
</pre>
266+
</td>
267+
</tr>
268+
<tr>
269+
<td>
270+
<code>serverSearchFunc</code>
271+
</td>
272+
<td>
273+
Function for search search
274+
</td>
275+
<td>
276+
<pre>
277+
function // For this searchSearch criteria is must.
278+
</pre>
279+
</td>
280+
</tr>
281+
<tr>
282+
<td>
283+
<code>paginate</code>
284+
</td>
285+
<td>
286+
Add footer next/prev. buttons
287+
</td>
288+
<td>
289+
<pre>
290+
true (default) // Whether paginated
291+
</pre>
292+
</td>
293+
</tr>
294+
<tr>
295+
<td>
296+
<code>exportable</code>
297+
</td>
298+
<td>
299+
Add button to export to Excel
300+
</td>
301+
<td>
302+
<pre>
303+
true (default) // Whether exportable
304+
</pre>
305+
</td>
306+
</tr>
307+
<tr>
308+
<td>
309+
<code>printable</code>
310+
</td>
311+
<td>
312+
Add printing functionality
313+
</td>
314+
<td>
315+
<pre>
316+
true (default) // Whether printable
317+
</pre>
318+
</td>
319+
</tr>
320+
<tr>
321+
<td>
322+
<code>customButtons</code>
323+
</td>
324+
<td>
325+
Custom buttons thingy
326+
</td>
327+
<td>
328+
<pre>
329+
<code>
330+
// Array of objects
331+
[
332+
{
333+
hide: false, // Whether to hide the button
334+
icon: "search", // Materialize icon
335+
onclick: aFunc() // Click handler
336+
}
337+
];
338+
</code>
339+
</pre>
340+
</td>
341+
</tr>
342+
</table>
129343

130344
### Localization
131345

@@ -151,29 +365,27 @@ The events payload will contain the `row object`, you can bind to the event like
151365
<datatable v-on:row-click="onRowClick"></datatable>
152366

153367
<script>
154-
var app = new Vue({
155-
el: '#app',
156-
...
157-
methods: {
158-
onRowClick: function (row) {
159-
//row contains the clicked object from `rows`
160-
console.log(row)
161-
  }
162-
},
163-
})
368+
var app = new Vue({
369+
el: '#app',
370+
...
371+
methods: {
372+
onRowClick: function (row) {
373+
//row contains the clicked object from `rows`
374+
console.log(row)
375+
  }
376+
},
377+
})
164378
</script>
165379
...
166-
167380
```
168381

169382
### Rows per page
170383

171-
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.
384+
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.
172385

173386
```html
174387
<!-- The default value will be 100 -->
175388
<datatable :perPage="[100, 10, 25, 50, 500]"></datatable>
176-
177389
```
178390

179391
The options will be rendered as `[10, 20, 50, 100, 500]`
@@ -185,7 +397,6 @@ Otherwise, you can specify the default rows per page with the `defaultPerPage` p
185397
```html
186398
<!-- The default value will be 100 -->
187399
<datatable :perPage="[10, 25, 50, 100, 500]" :defaultPerPage="100"></datatable>
188-
189400
```
190401

191402
### Row buttons
@@ -208,4 +419,4 @@ Alright actually this is a hack. We probably should've implemented actual suppor
208419
</datatable>
209420
```
210421

211-
Feel free to copy paste the code above, heh.
422+
Feel free to copy paste the code above, heh.

0 commit comments

Comments
 (0)