Package Exports

@rebelcode/vue-wp-list-table

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rebelcode/vue-wp-list-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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.
`rowClass`	Function	no	`(row) => ''`	Function for customizing a row's class name.

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);
  }
}

checked: When rows are selected using checkbox

<!-- template -->
<list-table
  @checked="itemsChecked"
</list-table>

<!-- method -->
methods: {
  itemsChecked(ids) {
    console.info('these ids are selected:', ids);
    // Output: these ids are selected: [247, 123]
  }
}

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

@rebelcode/vue-wp-list-table