vue-wp-list-table

WordPress List Table component for Vue.js.

Supports:

• Row Actions with Slot Support
• Bulk Actions
• Pagination
• Custom Column Slot
• Custom Filter Slot
• Sorting

Table of contents

• Installation
• Usage

Installation

npm install --save vue-wp-list-table

Usage

Add the component:

import ListTable from 'vue-wp-list-table';
import 'vue-wp-list-table/dist/vue-wp-list-table.css';

export default {
  name: 'Hello',

  components: {
    ListTable
  },

  data () {
    return {

    };
  },
}

<list-table
  :columns="{
    'title': {
      label: 'Title',
      sortable: true
    },
    'author': {
      label: 'Author'
    }
  }"
  :loading="false"
  :rows="[
    {
      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'
    }
  ]"
  :actions="[
    {
      key: 'edit',
      label: 'Edit'
    },
    {
      key: 'trash',
      label: 'Delete'
    }
  ]"
  :show-cb="true"
  :total-items="15"
  :bulk-actions="[
    {
      key: 'trash',
      label: 'Move to Trash'
    }
  ]"
  :total-pages="5"
  :per-page="3"
  :current-page="1"
  action-column="title"
  @pagination="goToPage"
  @action:click="onActionClick"
  @bulk:click="onBulkAction"
>
  <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="filters">
    <select>
      <option value="All Dates">All Dates</option>
    </select>

    <button class="button">Filter</button>
  </template>

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

Props

| Property | Type | Required | Default | Description | |----------------|---------|----------|---------------------------------------|-------------------------------------------------------------------------| | columns | Object | yes | {} | | | rows | Array | yes | [] | | | notFound | String | no | No items found. | Shows if no items are found | | index | String | no | id | The index identifier of the row | | showCb | Boolean | no | true | Wheather to show the bulk checkbox in each rows | | loading | Boolean | no | false | To show the loading effect, pass true | | actionColumn | String | no | (empty) | Define which is the action column so we could place action items there. | | actions | Array | no | [] | If you want to show row actions, pass an Array of Objects | | bulkActions | Array | no | [] | Wheather to show the bulk actions | | tableClass | String | no | wp-list-table widefat fixed striped | The table classes | | totalItems | Number | no | 0 | Total count of rows in the database | | totalPages | Number | no | 1 | How many pages are there for pagination | | perPage | Number | no | 20 | Items to show per page | | currentPage | Number | no | 1 | Current page we are in | | sortBy | String | no | null | The property in data on which to initially sort. | | sortOrder | String | no | asc | The initial sort order. | | text | Object | no | {loading: 'Loading', select_bulk_action: 'Select bulk action', bulk_actions: 'Bulk Actions', items: 'items', apply: 'Apply'} | All static text |

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 -->
<list-table
  @action:click="onActionClick"
</list-table>


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

bulk:click: When a bulk action is performed, this event is fired. The action name and the selected items will be passed as parameters.

<!-- template -->
<list-table
  @bulk:click="onBulkAction"
</list-table>

<!-- method -->
methods: {
  onBulkAction(action, items) {
    console.log(action, items);
    alert(action + ': ' + items.join(', ') );
  }
}

pagination: When a pagination link is clicked, this event is fired.

<!-- template -->
<list-table
  @pagination="goToPage"
</list-table>

<!-- method -->
methods: {
  goToPage(page) {
    console.log('Going to page: ' + page);
    this.currentPage = page;
    this.loadItems(page);
  }
}

sort: When a sorted column is clicked

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

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

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

Loading via Ajax

<!-- template -->
<list-table
  :loading="loading"
  :rows="items"
  @pagination="goToPage"
</list-table>

<!-- method -->
data: {
  return {
    loading: false,
    items: []
  }
},

created() {
  this.loadItems();
},

methods: {

  loadItems() {
    let self = this;

    self.loading = true;

    api.get('/items')
    .then(response, function(data) {
      self.loading = false;
      self.items = data;
    });
  },


  goToPage(page) {
    console.log('Going to page: ' + page);
    this.currentPage = page;
    this.loadItems(page);
  }

}

⛑ Extra Goodies

Want to get started with WordPress Plugin development with Vue.js? Take a look at Vue Starter Plugin

License

MIT