Create pagination component

[permafrost06]

Pagination may be done in two ways: client-side or server-side

Client-side pagination:

A JS array is passed to the table component, the array is filtered as needed to paginate.

Server-side pagination:

Instructions to fetch data from server is passed to the table component, data is fetched as needed to paginate.

Suggested component API

<TableComponent
    page-size="10"
/>

when page-size is provided, number of pages will be determined by the component.

<TableComponent
    pages="5"
/>

when pages is provided, number of items in one page will be determined by component.

prop current-page will be the displayed page.

prop max-visible is the maximum number of visible buttons.

<TableComponent
    page-size="10"
    max-visible="5"
/>

In this example, there may be fewer than 5 buttons shown but not more than 5.

Expected code for handling page change

<TableComponent :data=dataPage />
<Pagination v-model="currentPage" ... />

const allData = ref([ ... ]);
const currentPage = ref(1);
const pageSize = 10;
const dataPage = computed(() => {
  return allData.value.slice(
    pageSize * (currentPage.value - 1),
    pageSize * currentPage.value
  );
});

[permafrost06]

Design inspiration: credits: https://dribbble.com/dimagroshev

[permafrost06]

Suggested component API

<TableComponent
    page-size="10"
/>

when page-size is provided, number of pages will be determined by the component.

<TableComponent
    pages="5"
/>

when pages is provided, number of items in one page will be determined by component.

prop current-page will be the displayed page.

[permafrost06]

The pagination component should show the page status beside the buttons. For example:

Showing 11-20 of 34 < 1 [2] 3 4 >

[protibimbok]

How about we create a separate Component for Pagination? Given that the Table component is already getting bloated. And Pagination can be used in other places too...

[permafrost06]

How about we create a separate Component for Pagination? Given that the Table component is already getting bloated. And Pagination can be used in other places too...

Good thinking! You can go ahead with a separate component.

[permafrost06]

Example API for handling page change

<TableComponent :data=dataPage />
<Pagination v-model="currentPage" ... />

const allData = ref([ ... ]);
const currentPage = ref(1);
const pageSize = 10;
const dataPage = computed(() => {
  return allData.value.slice(
    pageSize * (currentPage.value - 1),
    pageSize * currentPage.value
  );
});

[permafrost06]

Add a prop max-visible. This will be the maximum number of visible buttons.

<TableComponent
    page-size="10"
    max-visible="5"
/>

In this example, there may be fewer than 5 buttons shown but not more than 5.

By default, no more than 1 button on each side should be shown. A prop may be used to modify this, but the default should be 1 button on each side.

[protibimbok]

Shouldn't this issue be closed?