# vue-md-powerful-datatable
> A powerful table component based on material design for VueJS 2
Latest version **0.18.2** (published 2018-10-16) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install vue-md-powerful-datatable
pnpm add vue-md-powerful-datatable
yarn add vue-md-powerful-datatable
bun add vue-md-powerful-datatable
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 0.18.2 |
| Published | 2018-10-16 |
| First published | 2017-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 5 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Mark Labenski |
| Maintainers | mlabenski |
| Keywords | vuejs, vue, material-design, md, datatable, table |
## Links
- npm: https://www.npmjs.com/package/vue-md-powerful-datatable
- Repository: https://github.com/kmhgmbh/vue-md-powerful-datatable
- Homepage: https://github.com/kmhgmbh/vue-md-powerful-datatable#readme
- Issues: https://github.com/kmhgmbh/vue-md-powerful-datatable/issues
- npm.io page: https://npm.io/package/vue-md-powerful-datatable
## Dependencies (5)
- [vue](https://npm.io/package/vue.md) ^2.0.1
- [uuid](https://npm.io/package/uuid.md) ^3.2.1
- [vue-mdl](https://npm.io/package/vue-mdl.md) ^1.1.1
- [vue-material](https://npm.io/package/vue-material.md) ^0.8.1
- [material-design-lite](https://npm.io/package/material-design-lite.md) ^1.3.0
## Alternatives
- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads
## Recent versions
- 0.18.2 (latest) — 2018-10-16
- 0.18.1 — 2018-10-16
- 0.18.0 — 2018-06-15
- 0.17.0 — 2018-04-26
- 0.16.3 — 2018-04-19
- 0.16.2 — 2018-03-15
- 0.16.1 — 2018-02-12
- 0.16.0 — 2018-02-12
- 0.15.0 — 2018-02-06
- 0.14.4 — 2018-02-05
- 0.14.3 — 2018-02-05
- 0.14.2 — 2018-02-05
- 0.14.1 — 2018-02-02
- 0.14.0 — 2018-02-02
- 0.13.2 — 2018-01-31
- … 17 more at https://npm.io/package/vue-md-powerful-datatable/versions
## 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);
},
...
}
...
```
---
_Source: https://npm.io/package/vue-md-powerful-datatable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._