Data Table Pagination

Inkline's Data Table provides you with efficient automated pagination features.

Basic Pagination

Pagination is enabled by default and can be changed using the pagination attribute if needed.

Data Table Default Pagination
Showentries
# Name Email Age
1 Erlich Bachman erlich.bachman@email.com 32
2 Richard Hendricks richard.hendricks@email.com 26
3 Dinesh Chugtai dinesh.chugtai@email.com 30
4 Jared Dunn jared.dunn@email.com 35
5 Erlich Bachman erlich.bachman@email.com 32
6 Nelson Bighetti nelson.bighetti@email.com 26
7 Richard Hendricks richard.hendricks@email.com 26
8 Bertram Gilfoyle bertram.gilfoyle@email.com 30
9 Dinesh Chugtai dinesh.chugtai@email.com 30
10 Jared Dunn jared.dunn@email.com 35
# Name Email Age

Disable Pagination

Pagination can be disabled by setting the pagination attribute to false.

Data Table Disabled Pagination
# Name Email Age
1 Richard Hendricks richard.hendricks@email.com 26
2 Bertram Gilfoyle bertram.gilfoyle@email.com 30
3 Dinesh Chugtai dinesh.chugtai@email.com 30
4 Jared Dunn jared.dunn@email.com 35
5 Erlich Bachman erlich.bachman@email.com 32
6 Nelson Bighetti nelson.bighetti@email.com 26
7 Richard Hendricks richard.hendricks@email.com 26
8 Bertram Gilfoyle bertram.gilfoyle@email.com 30
9 Dinesh Chugtai dinesh.chugtai@email.com 30
10 Jared Dunn jared.dunn@email.com 35
# Name Email Age

Pagination Configuration

Pagination can be configured by providing an object for the pagination attribute. The default configuration is as follows:

export default {
    ...
    data() {
        return {
            pagination: {
                limit: { xs: 3, sm: 5 },
                size: 'md',
                variant: 'light',
                rowsPerPage: 10,
                rowsPerPageOptions: [10, 25, 50, 100]
            }
        };
    }
}       
<i-datatable :columns="columns" :rows="rows" :pagination="pagination" />

Async Pagination

Pagination can be handled asynchronously by setting the async attribute to true and providing an appropriate rows-count attribute.

This will tell the DataTable component to only display the rows and let the pagination handling be done asynchronously and externally using the update event.

The first update event occurs when the DataTable is created.

Data Table Async Pagination
Showentries
# Name Email Age
# Name Email Age