Pagination Options

A set of options that are related to table pagination. Each of these are optional and reasonable defaults will be used if you leave off the property.

<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    perPage: 5,
    position: 'top',
    perPageDropdown: [3, 7, 9],
    dropdownAllowAll: false,
    setCurrentPage: 2,
    nextLabel: 'next',
    prevLabel: 'prev',
    rowsPerPageLabel: 'Rows per page',
    ofLabel: 'of',
    allLabel: 'All',
  }">
</vue-good-table>

enabled

type: Boolean (default: false)

Enable Pagination for table. By default the paginator is created at the bottom of the table.

<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true
  }">
</vue-good-table>

position

type: String (default: 'bottom')

Add pagination on 'top' or 'bottom' (top and bottom) of the table (default position is bottom)

<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    position: 'top'
  }">
</vue-good-table>

perPage

type: Integer (default: 10)

Number of rows to show per page

<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    perPage: 5
  }">
</vue-good-table>

perPageDropdown

type: Array (default: [10,20,30,40,50])

Customize the dropdown options for the amount of items per page

<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    perPageDropdown: [3, 7, 9]
  }">
</vue-good-table>

type: Boolean (default: true)

enables/disables 'All' in the per page dropdown.

<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    perPageDropdown: [3, 7, 9],
    dropdownAllowAll: false,
  }">
</vue-good-table>

setCurrentPage

type: Number

set current page programmatically.

WARNING

There's no validation for number of pages so please be careful using this.

<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    setCurrentPage: 2,
  }">
</vue-good-table>

pagination label/text options

you can change one or more of the texts shown on pagination by overriding the labels in the following way:

<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    nextLabel: 'next',
    prevLabel: 'prev',
    rowsPerPageLabel: 'Rows per page',
    ofLabel: 'of',
    allLabel: 'All',
  }">
</vue-good-table>