# Pagination
su-table
supports basic pagination. So pagination controls how many rows are displayed per page. Below attributes are needed to add to the su-table
<su-table :headers="dataHoldingsHeader" :data="dataHoldings" pagination :per-page="perPage" :current-page="currentPage">
...
</su-table>
<script>
export default {
data () {
return {
perPage: 2,
currentPage: 1,
// headers and data arrays are available in the table introduction section
dataHoldingsHeader: headers,
dataHoldings: data
}
}
}
</script>
# Demo
Symbol | Max available (₹) | Pledge Qty | Amount required (₹) |
---|---|---|---|
QUICKHEAL | 127 | 1 | 253.25 |
UPL | 367 | 1 | 734.85 |
- 1
- 2
- 3
# Pagination related props
We need to add below props to set pagination
Property | Description | Type | Default | Required |
---|---|---|---|---|
pagination | Enable pagination | Boolean | false | true |
per-page | Maximum number of rows displayed per page (Starts from 1) | Number | false | true |
current-page | Current page number (Starts from 1) | Number | false | true |
next-text | Text for the next. | String | Next | false |
prev-text | Text for the prev. | String | Prev | false |
← Search