shapla-data-table v1.4.0

shapla-data-table

A simple data table component for VueJS based on Material Design Lite Data Table.

Supports:

• Row Actions with Slot Support
• Custom Column Slot
• Sorting

Table of contents

• Installation
• Usage

Installation

npm install --save shapla-data-table

Usage

Add the component:

import dataTable from 'shapla-data-table';

export default {
  name: 'Hello',

  components: {
    dataTable
  },

  data () {
    return {
        selectedItems:[],
        columns:[
            {key:'title', label: 'Title', sortable: true },
            {key:'author', label: 'Author'}
        ],
        actions:[
            { key: 'edit', label: 'Edit' },
            { key: 'trash', label: 'Delete' }
        ],
        items:[
            {
                id: 1,
                title: 'Wings of Fire: An Autobiography',
                author: ['A.P.J. Abdul Kalam'],
                image: 'https://images.gr-assets.com/books/1295670969l/634583.jpg'
            },
            {
                id: 2,
                title: 'Who Moved My Cheese?',
                author: ['Spencer Johnson', 'Kenneth H. Blanchard'],
                image: 'https://images.gr-assets.com/books/1388639717l/4894.jpg'
            },
            {
                id: 3,
                title: 'Option B',
                author: ['Sheryl Sandberg', 'Adam Grant', 'Adam M. Grant'],
                image: 'https://images.gr-assets.com/books/1493998427l/32938155.jpg'
            }
        ]
    };
  },
}

<data-table
  :columns="columns"
  :items="items"
  :actions="actions"
  :show-cb="true"
  action-column="title"
  @action:click="onActionClick"
>
  <template slot="title" slot-scope="data">
    <img :src="data.row.image" :alt="data.row.title" width="50">
    <strong><a href="#">{{ data.row.title }}</a></strong>
  </template>

  <template slot="author" slot-scope="data">
    {{ data.row.author.join(', ') }}
  </template>
</data-table>

Props

columns data object

actions data object

Listeners

The table component fires the following events:

action:click: When a row action is clicked, it fires the event. The action name and the current row will be passed.

<!-- template -->
<data-table
  @action:click="onActionClick"
</data-table>


<!-- method -->
methods: {
  onActionClick(action, row) {
    if ( 'trash' === action ) {
      if ( confirm('Are you sure to delete?') ) {
        alert('deleted: ' + row.title);
      }
    }
  }
}

sort: When a sorted column is clicked

<!-- template -->
<data-table
  @sort="sortCallback"
</data-table>

<!-- method -->
methods: {
  sortCallback(column, order) {
    this.sortBy = column;
    this.sortOrder = order;

    // this.loadItems(column, order);
  }
}

item:select: When an item or all items are selected. Array of selected items will be passed.

<!-- template -->
<data-table
  @item:select="onItemSelect"
</data-table>


<!-- method -->
methods: {
  onItemSelect(ids) {
    this.selectedItems = ids;
  }
}