Datatable for VueJS with Materialize
npm install vue-materialize-datatable> A fancy Materialize CSS datatable VueJS component
> BTC donations: 16dt5DdjGvduZ3KZcFrwsBA82qqfrcbeUQ
https://microdroid.github.io/vue-materialize-datatable/
- 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..
- materialize-css (and NOT any other MD library!)
- VueJS 2
``bash`
npm i vue-materialize-datatable --save
You also need to include Material Design icons. You have two ways of doing this:
The first and the recommended way is loading via Google's CDN, by adding this tag to your HTML
`HTML`
Or this in your CSS/Sass files:
`CSS`
@import url(http://fonts.googleapis.com/icon?family=Material+Icons);
Alternatively, you can use the NPM package and add the font to your bundle by:
``
npm i material-design-icons-iconfont -S
and then include it in your Sass/CSS files
`CSS`
@import "~material-design-icons-iconfont/dist/material-design-icons";
Include the component,
`javascript`
import DataTable from "vue-materialize-datatable";
Then, register the component, however you like:
`javascript`
{
...
components: {
...
"datatable": DataTable
}
}
And then.. use the component:
`xml`
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 |
|
columns | Columns |
|
rows | Rows |
|
perPage | Numbers of rows per page |
|
defaultPerPage | Default rows per page |
|
initSortCol | Default column for sorting on component initialization |
|
onClick | Function to execute on click |
|
clickable | Clickable rows. Will fire row-click event |
|
sortable | Cause column-click to sort |
|
searchable | Add fuzzy search functionality |
|
exactSearch | Disable fuzzy search |
|
serverSearch | Server search is used to fetch data from server |
|
serverSearchFunc | Function for search search |
|
paginate | Add footer next/prev. buttons |
|
exportable | Add button to export to Excel |
|
printable | Add printing functionality |
|
customButtons | Custom buttons thingy |
|
You can use the property locale to set the display language. Available languages:
- en (English, default)ar
- (Arabic)es
- (Spanish)cat
- (Catalan)br
- (Brazilian Portuguese)nl
- (Netherlands)fr
- (French)de
- (German)
> You can very easily contribute a locale. Just clone locales/en.json and require in locales/index.js
The datatable will emit the row-click event if clickable is set to true (default).
The events payload will contain the row object, you can bind to the event like this:
`html
...
`
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 options will be rendered as [10, 20, 50, 100, 500]
Otherwise, you can specify the default rows per page with the defaultPerPage prop.
`html`
Alright actually this is a hack. We probably should've implemented actual support for this but for now, here's an example on how to achieve something similar to the screenshot above:
`HTML``
Actions
@click="(e) => deleteItem(props.row, e)">
delete
Feel free to copy paste the code above, heh.