@shapla/vue-table v1.0.0

Shapla Data Table

A simple responsive data table component for Vue 3

Supports:

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

Table of contents

• Installation
• Usage

Installation

npm install --save @shapla/vue-table

Usage

Styles

with Sass:

import '@shapla/vue-table/src/index.scss';

with CSS:

import '@shapla/vue-table/dist/style.css';

Note: @shapla/vue-table component has dependency over @shapla/vue-checkbox, also remember to include that style

Javascript Instantiation

import ShaplaTable from '@shapla/vue-table';

export default {
  name: 'Hello',

  components: {
    ShaplaTable
  },

  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'
        }
      ]
    };
  },
}

<shapla-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>
</shapla-table>

Props

columns data object

actions data object

Listeners

The table component fires the following events:

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

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


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

click:sort: When a sorted column is clicked

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

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

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

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

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

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

Extra components

import {Pagination} from '@shapla/vue-table';

export default {
  components: {
    Pagination
  },
  methods: {
    paginate(nextPage){
      // Handle pagination event
    }
  }
}

<pagination @paginate="paginate"></pagination>

Props

Listeners

The pagination component fires the following events:

paginate: When any navigation icon is clicked, it fires the event and it gives current page number.

<!-- template -->
<pagination @paginate="paginate"></pagination>


<!-- method -->
methods: {
  paginate(NextPage){
    // Handle click event
  }
}

import {StatusList} from '@shapla/vue-table';

export default {
  name: 'Hello',

  components: {
    StatusList
  }
}

  <status-list :statuses="statuses"/>

Props

statuses data object