1.0.0 • Published 5 years ago
shapla-data-table-pagination v1.0.0
shapla-data-table-pagination
A simple pagination based on WordPress list table pagination specially for data table.
Table of contents
Installation
npm install --save shapla-data-table-pagination
Usage
Add the component:
import pagination from 'shapla-data-table-pagination';
export default {
name: 'Hello',
components: {
pagination
},
methods: {
paginate(){
// Handle pagination event
}
}
}
<pagination @pagination="paginate"></pagination>
Props
Property | Type | Required | Default | Description |
---|---|---|---|---|
total_items | Number | Yes | 0 | Total number of items. |
per_page | Number | Yes | 20 | Number of items to show per page. |
current_page | Number | Yes | 1 | Current page number. |
size | String | No | default | Pagination button size. Value can be default , small , medium , large |
textName | String | No | items | Plural name of item. |
textNameSingular | String | No | item | Singular name of item. |
textCurrentPage | String | No | Current Page | Screen reader text for current page. |
textFirstPage | String | No | First Page | Screen reader text for first page. |
textPreviousPage | String | No | Previous Page | Screen reader text for previous page. |
textNextPage | String | No | Next Page | Screen reader text for next page. |
textLastPage | String | No | Last Page | Screen reader text for last page. |
textOf | String | No | of | Screen reader text for 'of' text. |
Listeners
The pagination component fires the following events:
pagination
: When any navigation icon is clicked, it fires the event and it gives current page number.
<!-- template -->
<pagination @pagination="close"></pagination>
<!-- method -->
methods: {
paginate(page){
// Handle click event
}
}
1.0.0
5 years ago