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,
    mode: 'records',
    perPage: 5,
    position: 'top',
    perPageDropdown: [3, 7, 9],
    dropdownAllowAll: false,
    setCurrentPage: 2,
    nextLabel: 'next',
    prevLabel: 'prev',
    rowsPerPageLabel: 'Rows per page',
    ofLabel: 'of',
    pageLabel: 'page', // for 'pages' mode
    allLabel: 'All',
    infoFn: (params) => `my own page ${params.firstRecordOnPage}`, 
  }">
</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>

mode

type: String (default: 'records')

You can render pagination controls in two modes - 'records' and 'pages'. Below, you'll find examples of both.

Tips

For tables that may have many pages, 'pages' mode offers the ability to jump to any valid page.

records mode (default)

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

Name	Age	Created On	Percent
John	20	Jul 2nd 11	3.34%
Jane	24	Oct 31st 11	3.34%
Susan	16	Oct 30th 11	3.34%
Chris	55	Oct 11th 11	3.34%
Dan	40	Oct 21st 11	3.34%
John	20	Oct 31st 11	3.34%

pages mode

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

Name	Age	Created On	Percent
John	20	Jul 2nd 11	3.34%
Jane	24	Oct 31st 11	3.34%
Susan	16	Oct 30th 11	3.34%
Chris	55	Oct 11th 11	3.34%
Dan	40	Oct 21st 11	3.34%
John	20	Oct 31st 11	3.34%

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>

perPageDropdownEnabled

type: Boolean (default: true)

Show or hide the per page dropdown

<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    perPageDropdownEnabled: false,
  }">
</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>

dropdownAllowAll

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',
    pageLabel: 'page', // for 'pages' mode
    allLabel: 'All',
  }">
</vue-good-table>

InfoFn

Provide your own function to lay out pagination info how you like:

<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    infoFn: (params) => `Showing ${params.firstRecordOnPage} to ${params.lastRecordOnPage} of page ${params.currentPage}`,
  }">
</vue-good-table>

the parameters passed to infoFn are the following:

{
  firstRecordOnPage: 'index of the first record on the current page',
  lastRecordOnPage: 'index of the last record on the current page',
  totalRecords: 'total number of records',
  currentPage: 'current page',
  totalPage: 'total number of pages',
}

Replace Pagination Component

you can also replace the pagination component with your own component - Custom Pagination