WordPress List Table component for Vue.js.
Supports:
- Row Actions with Slot Support
- Bulk Actions
- Pagination
- Custom Column Slot
- Custom Filter Slot
- Sorting
npm install --save vue-wp-list-table 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>| 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 |
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); } }<!-- 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); } }Want to get started with WordPress Plugin development with Vue.js? Take a look at Vue Starter Plugin