Do you have a UX team? I Would really appreciate their feedback on my new product - UserBit

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',
  }">
</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.

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>
NameAgeCreated OnPercent
John 20 3.34%
Jane 24 Oct 304th 11 3.34%
Susan 16 Oct 303rd 11 3.34%
Chris 55 Oct 284th 11 3.34%
Dan 40 Oct 294th 11 3.34%
John 20 Oct 304th 11 3.34%

pages mode

<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    mode: 'pages'
  }">
</vue-good-table>
NameAgeCreated OnPercent
John 20 3.34%
Jane 24 Oct 304th 11 3.34%
Susan 16 Oct 303rd 11 3.34%
Chris 55 Oct 284th 11 3.34%
Dan 40 Oct 294th 11 3.34%
John 20 Oct 304th 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>

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.

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>

Replace Pagination Component

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

Last Updated: 7/4/2019, 7:48:15 PM