Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kmhgmbh/vue-md-powerful-datatable
Vue.js 2 table/datagrid component with selection, sort and search
https://github.com/kmhgmbh/vue-md-powerful-datatable
datagrid table vue vuejs vuejs-material vuejs2
Last synced: 1 day ago
JSON representation
Vue.js 2 table/datagrid component with selection, sort and search
- Host: GitHub
- URL: https://github.com/kmhgmbh/vue-md-powerful-datatable
- Owner: kmhgmbh
- Created: 2017-12-28T13:49:18.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-10-16T15:23:27.000Z (almost 6 years ago)
- Last Synced: 2024-09-23T04:32:27.989Z (5 days ago)
- Topics: datagrid, table, vue, vuejs, vuejs-material, vuejs2
- Language: Vue
- Homepage:
- Size: 2.22 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# vue-md-powerful-datatable
> A Vue.js 2.0 Component
## Development
### Roadmap
- [ ] Refactor general code (from ugly for loops to array functions etc 🙄)
- [ ] Add tests (jest maybe?)
- [ ] Refactor prop names
- [ ] Refactor CSS
### Prerequisites
- nodeJS
- VueJS material-design
```bash
$ npm i vue-material
```
- VueJS material-design-lite
```bash
$ npm install vue-mdl
```
## Usage
### Installation
```bash
$ npm install vue-md-powerful-datatable
```
```bash
$ yarn add vue-md-powerful-datatable
```
### Use component
- add material design icons to html
```html
```
- add to components:
```javascript
import VueMdPowerfulDatatable from 'vue-md-powerful-datatable';
...
components: {
VueMdPowerfulDatatable,
},
```
- add md libs to Vue init script:
```javascript
import VueMdl from 'vue-mdl';
import VueMaterial from 'vue-material';
require('vue-material/dist/vue-material.css');
Vue.use(VueMaterial);
Vue.material.registerTheme('blue', {});
require('material-design-lite/material.min.js');
require('material-design-lite/material.min.css');
```
- in template:
```html
```
- data and headData in parent component
```javascript
birds: [
{
name: 'Birdy',
variety: 'Eagle',
size: 330,
wingCount: 1.5,
},
{
name: 'Rosa',
variety: 'Peacock',
size: 630,
wingCount: 2,
},
],
birdsHeadData: [
{
key: 'name',
name: 'Birds Name',
}, {
key: 'variety',
name: 'Birds variety',
}, {
key: 'size',
name: 'Size of Bird',
format: (value) => { // dynamically change format
if (value) {
return `${value} mm`;
}
return '';
},
}, {
key: 'wingCount',
name: 'Number of wings',
},
],
```
#### Props
|property name|description|type|example|
|-------|-----|------|----|
| data | actual table data | Array | `[{ name: 'test', anotherKey: 'asd', ... }, ...]` |
| headData | table header information | Array | `[{`
` key: 'name', // object's key`
` name: 'Birds Name' // column title }]` |
| max | number of rows per page, default: ***20*** | Number | Â |
| ignoreColumns | hide data columns | Array|`['anotherKey', ...]` |
| search | enable search, default: ***true*** | Boolean | |
| pager | enable pagination, default: ***true*** | Boolean | |
| sortable | enable sort, default: ***true***| Boolean |Â |
| selectable | enable selectable rows (selectedRowIndexKey must be provided on true), default: ***false***| Boolean |Â |Â
| selectedRowIndexKey | key name for selecting lines | String | `'name'`|
| selectAllOnlyOnPage | the "select all" checkbox in table header will only select rows on current page | Boolean | `false`|
#### Events
|event name|description|arguments|
|----------|-----------|---------|
|rowSelectionChange|Will be emitted everytime a row is selected or deselected|Array of keys of selected lines|
#### Use selectable feature
- in template:
```html
```
- in methods:
```javascript
...
methods: {
...
selectedRowsChanged(selectedRows) {
console.log(selectedRows);
},
...
}
...
```