Inkline

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

Disable Pagination

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

Data Table Disabled Pagination

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

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!