Skip to content

README.md - Link to demo page and changes to table #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 22 commits into from
Jun 17, 2019
Merged

README.md - Link to demo page and changes to table #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
05b43c7
changes to README, added demo button
Jun 5, 2019
89c0f73
few markdown tests
Jun 5, 2019
7be8577
few markdown tests
Jun 5, 2019
3a6719e
few markdown tests
Jun 5, 2019
4f3f867
few markdown tests
Jun 5, 2019
ba2e2bf
few markdown tests
Jun 5, 2019
0e5a58a
few markdown tests
Jun 5, 2019
a61eeff
few markdown tests
Jun 5, 2019
8fe00e8
few markdown tests
Jun 5, 2019
16a5224
few markdown tests
Jun 5, 2019
5b6543f
few markdown tests
Jun 5, 2019
b3a700e
few markdown tests
Jun 5, 2019
7d63ee6
few markdown tests
Jun 5, 2019
f53eda1
few markdown tests
Jun 5, 2019
95c533b
few markdown tests
Jun 5, 2019
3c06ed1
few markdown tests
Jun 5, 2019
bf60773
few markdown tests
Jun 5, 2019
3d73987
few markdown tests
Jun 5, 2019
21e6850
few markdown tests
Jun 5, 2019
3548703
few markdown tests
Jun 5, 2019
79b9779
switch double quotes to single quotes
Jun 11, 2019
f58d384
added docs dist and docs src
Jun 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
351 changes: 281 additions & 70 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,29 @@

> Library is kind of unstable. Bugs, missing features might be present

## Demo

https://justice47.github.io/vue-materialize-datatable-demo-vue/

## Features
- Sorting, with numerical sorting
- Pagination
- Localization
- Fuzzy searching
- Server searching
- Excel export
- Printing
- Custom topbar buttons
- Flexible data-from-row extractor
- Follows the Material Design spec
- Really, really efficient.. handles thousands of rows flawlessly
- And much more..

- Sorting, with numerical sorting
- Pagination
- Localization
- Fuzzy searching
- Server searching
- Excel export
- Printing
- Custom topbar buttons
- Flexible data-from-row extractor
- Follows the Material Design spec
- Really, really efficient.. handles thousands of rows flawlessly
- And much more..

## Requirements
- [`materialize-css`](https://www.npmjs.com/package/materialize-css) (and **NOT** any other MD library!)
- VueJS 2

- [`materialize-css`](https://www.npmjs.com/package/materialize-css) (and **NOT** any other MD library!)
- VueJS 2

## Installation

Expand Down Expand Up @@ -85,47 +90,256 @@ And then.. use the component:

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

```
Prop name => Description => Example

title => The title of the datatable => "Todos" // Name in top
columns => Columns. => [ // Array of objects
{
label: 'Name', // Column name
field: 'name', // Field name from row
// Use dot for nested props
// Can be function with row as 1st param
numeric: false, // Affects sorting
html: false, // Escapes output if false.
}
]
rows => Rows. => [ // Array of objects
{
name: "test", // Whatever.
...
}
]
perPage => Numbers of rows per page => [10, 20, 30, 40, 50] (default) // Results per page
defaultPerPage => Default rows per page => 10 (default) // Default results per page, otherwise it will be the first value of perPage
onClick => Func. to execute on click => console.log // Function, row 1st param
clickable => Rows are clickable. => true (default) // Row is passed in the event payload
Will fire `row-click` event // See react to click on row (below)
sortable => Cause column-click to sort => true (default) // Whether sortable
searchable => Add fuzzy search functionality => true (default) // Whether searchable
exactSearch => Disable fuzzy search => true (default) // Whether only exact matches are returned
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.
serverSearchFunc => Function for search search => function // For this searchSearch criteria is must.
paginate => Add footer next/prev. btns => true (default) // Whether paginated
exportable => Add button to export to Excel => true (default) // Whether exportable
printable => Add printing functionality => true (default) // Whether printable
customButtons => Custom buttons thingy => [ // Array of objects
{
hide: false, // Whether to hide the button
icon: 'search', // Materialize icon
onclick: aFunc, // Click handler
}
]
```
<table>
<tr>
<th>
Prop name
</th>
<th>
Description
</th>
<th>
Example
</th>
</tr>
<tr>
<td>
<code>title</code>
</td>
<td>
The title of the datatable
</td>
<td>
<pre>
"Todos" // Name in top
</pre>
</td>
</tr>
<tr>
<td>
<code>columns</code>
</td>
<td>
Columns
</td>
<td>
<pre>
<code>
[ // Array of objects
{
label: "Name", // Column name
field: "name", // Field name from row
// Use dot for nested props
// Can be function with row as 1st param
numeric: false,// Affects sorting
html: false // Escapes output if false.
}
];
</code>
</pre>
</td>
</tr>
<tr>
<td>
<code>rows</code>
</td>
<td>
Rows
</td>
<td>
<pre>
<code>
[ // Array of objects
{
name: 'test', // Whatever
...
}
];
</code>
</pre>
</td>
</tr>
<tr>
<td>
<code>perPage</code>
</td>
<td>
Numbers of rows per page
</td>
<td>
<pre>
[10, 20, 30, 40, 50] (default) // Results per page
</pre>
</td>
</tr>
<tr>
<td>
<code>defaultPerPage</code>
</td>
<td>
Default rows per page
</td>
<td>
<pre>
10 (default) // Default results per page, otherwise it will be the
first value of perPage
</pre>
</td>
</tr>
<tr>
<td>
<code>onClick</code>
</td>
<td>
Function to execute on click
</td>
<td>
<pre>
console.log('hey') // Function, row 1st param
</pre>
</td>
</tr>
<tr>
<td>
<code>clickable</code>
</td>
<td>
Clickable rows. Will fire row-click event
</td>
<td>
<pre>
true (default) // Row is passed in the event payload
</pre>
</td>
</tr>
<tr>
<td>
<code>sortable</code>
</td>
<td>
Cause column-click to sort
</td>
<td>
<pre>
true (default) // Whether sortable
</pre>
</td>
</tr>
<tr>
<td>
<code>searchable</code>
</td>
<td>
Add fuzzy search functionality
</td>
<td>
<pre>
true (default) // Whether searchable
</pre>
</td>
</tr>
<tr>
<td>
<code>exactSearch</code>
</td>
<td>
Disable fuzzy search
</td>
<td>
<pre>
true (default) // Whether only exact matches are returned
</pre>
</td>
</tr>
<tr>
<td>
<code>serverSearch</code>
</td>
<td>
Server search is used to fetch data from server
</td>
<td>
<pre>
false (default) // If you wanna do server search then searchable and
serverSearch must be true and use serverSearchFunc as callback.
</pre>
</td>
</tr>
<tr>
<td>
<code>serverSearchFunc</code>
</td>
<td>
Function for search search
</td>
<td>
<pre>
function // For this searchSearch criteria is must.
</pre>
</td>
</tr>
<tr>
<td>
<code>paginate</code>
</td>
<td>
Add footer next/prev. buttons
</td>
<td>
<pre>
true (default) // Whether paginated
</pre>
</td>
</tr>
<tr>
<td>
<code>exportable</code>
</td>
<td>
Add button to export to Excel
</td>
<td>
<pre>
true (default) // Whether exportable
</pre>
</td>
</tr>
<tr>
<td>
<code>printable</code>
</td>
<td>
Add printing functionality
</td>
<td>
<pre>
true (default) // Whether printable
</pre>
</td>
</tr>
<tr>
<td>
<code>customButtons</code>
</td>
<td>
Custom buttons thingy
</td>
<td>
<pre>
<code>
// Array of objects
[
{
hide: false, // Whether to hide the button
icon: "search", // Materialize icon
onclick: aFunc() // Click handler
}
];
</code>
</pre>
</td>
</tr>
</table>

### Localization

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

<script>
var app = new Vue({
el: '#app',
...
methods: {
onRowClick: function (row) {
//row contains the clicked object from `rows`
console.log(row)
  }
},
})
var app = new Vue({
el: '#app',
...
methods: {
onRowClick: function (row) {
//row contains the clicked object from `rows`
console.log(row)
  }
},
})
</script>
...

```

### Rows per page

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.
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.

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

```

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

```

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

Feel free to copy paste the code above, heh.
Feel free to copy paste the code above, heh.
Loading