# 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

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