kmhgmbh / vue-md-powerful-datatable

Vue.js 2 table/datagrid component with selection, sort and search

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

  $ npm i vue-material

• VueJS material-design-lite

  $ npm install vue-mdl

Usage

Installation

$ npm install vue-md-powerful-datatable

$ yarn add vue-md-powerful-datatable

Use component

• add material design icons to html

  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

• add to components:

  import VueMdPowerfulDatatable from 'vue-md-powerful-datatable';
  ...
  components: {
      VueMdPowerfulDatatable,
  },

• add md libs to Vue init script:

  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:

  <vue-md-powerful-datatable
      :headData="birdsHeadData"
      :data="birds"
      max=10>
  </vue-md-powerful-datatable>

• data and headData in parent component

  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:

  <vue-md-powerful-datatable
      :headData="birdsHeadData"
      :data="birds"
      max=10
  
      selectable="true"
      selectedRowIndexKey="name"
      v-on:rowSelectionChange="selectedRowsChanged"
      > <!-- last 3 attributes to use feature -->
  </vue-md-powerful-datatable>

• in methods:

  ...
  methods: {
    ...
    selectedRowsChanged(selectedRows) {
      console.log(selectedRows);
    },
    ...
  }
  ...

vue-md-powerful-datatable's Issues

lodash orderBy does not work well with the table

A requirement in my project is, that selected lines need to be placed on the top of the table.
e.g.

page [3] line 4 "mike" -> check -> page [1] line 1 "mike"

page [5] line 9 "Ben" -> check -> page [1] line 1 "ben", page [1] line 2 "mike"

To order the table by selection I used the lodash function order by.

With the version 0.12.0 order by works. Now with 0.13.2 I have some strange effects that multiple lines are selected.

Elenore -> $isSelected property does not exist
Petra -> $isSelected = true

I made the following modifications:

main.vue:

<VueMdPowerfulDatatable
          :headData="birdsHeadData"
          :data="birds | sortSelected"
          selectable=true
          selectedRowIndexKey="name"
          max=10
          v-on:rowSelectionChange="selectedRowsChanged">
        </VueMdPowerfulDatatable>

dev.js

/* eslint-disable */
Vue.filter('sortSelected', function (value) {
  return _.orderBy(value, ['$isSelected'], ['desc'])
});
/* eslint-enable */

Can not filter in number columns

If the datatype of a column is number, it is impossible to use the filterfunction. Adding two single quouts (2 + '') to the number, bring back the filterfunction. In my view it is more useful to put numbers in the table instead of converting all values to strings.

can not sort in 0.13.0

I generated a table with 20 Birds. If i press the sorting button (in the tablehead), nothing happen and firefox throw a warning.

[Vue warn]: You may have an infinite update loop in watcher with expression "data"

found in

---> <VueMdPowerfulDatatable> at /Users/wrk/dev/kmh/vue-md-powerful-datatable/src/data-table/VueMdPowerfulDatatable.vue
       <MdLayout>
         <Root>

Interesting hint: in my project I also use the 0.13.0, and there firefox does not throw the warning and sorting works well.

sorting does not have an effect on the selected rows

Changing the sorting direction does not have an effect on selected row.

rows still selected after switching to the next page

I select some rows.
If I switch to the next page, the selection in a line is still active.
But if I switch to the last page (with less items), only the last rows are selected.
Back to the first page (where I did the selection), the pagination works perfect on the other pages.

here is my main.vue:

main.txt

Invalid default value for prop "addRowButton": Props with type Object/Array must use a factory function to return the default value.

[Vue warn]: Invalid default value for prop "addRowButton": Props with type Object/Array must use a factory function to return the default value.

found in

---> <VueMdPowerfulDatatable>
       <Permission> at resources\assets\js\components\Permission\index.vue
         <Root>
app.js:7272:7
15:01:36.352
[Vue warn]: Unknown custom element: <md-layout> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VueMdPowerfulDatatable>
       <Permission> at resources\assets\js\components\Permission\index.vue
         <Root>
app.js:7272:7 
15:03:18.716
[Vue warn]: Unknown custom element: <md-input-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VueMdPowerfulDatatable>
       <Permission> at resources\assets\js\components\Permission\index.vue
         <Root>
app.js:7272:7
15:03:18.719
[Vue warn]: Unknown custom element: <md-layout> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VueMdPowerfulDatatable>
       <Permission> at resources\assets\js\components\Permission\index.vue
         <Root>
app.js:7272:7
15:03:18.721
[Vue warn]: Injection "MdField" not found