# Pagination and sorting

The CarbonListComponent supports backend pagination and sorting. In order to make use of these, a couple of things need to be set up.

1. You need to specify in the `fields` which columns are sortable and set a pagination object:

   **`sample.component.ts`**

   ```typescript
   ...
   import {Pagination} from '@valtimo/components';
   ...
   export class SampleComponent{
    ...
    public pagination: Pagination = {
      collectionSize: 20,
      size: 10,
      page: 1,
    };
    public fields: Array<ColumnConfig> = [
      {
        viewType: ViewType.TEXT,
        key: 'title',
        label: 'sample.translation.title',
        sortable: true,
      },
      {
        viewType: ViewType.TEXT,
        key: 'description',
        label: 'sample.translation.description',
        sortable: true,
      },
    ]
    ...
   }
   ```
2. You need to add the output listeners for pagination and sorting in the template and pass the pagination object to the list:

   **`sample.component.html`**

   ```angular2html
   ...
    <valtimo-carbon-list
       [items]="items"
       [fields]="fields"
       [pagination]="pagination"
       (paginationClicked)="onPaginationClicked($event)"
       (paginationSet)="onPaginationSet($event)"
       (sortChanged)="onSortChanged($event)"
     ></valtimo-carbon-list>
   ...
   ```
3. Add handlers for the output listeners:

   **`sample.component.ts`**

   ```typescript
   ...
   import {SortState} from '@valtimo/config';
   ...
   export class SampleComponent{
    ...
    public onPaginationClicked(currentPage: number): void {
      // Code to process pagination change
    }

    public onPaginationSet(collectionSize: number): void {
      // Code to process pagination change
    }

    public onSortChanged(newSortState: SortState): void {
      // Code to process sort change
    }
    ...
   }
   ```

This will create a list with pagination and sorting:

![list-with-pagination-sorting.png](/files/L7fiOhCGt0Ye4G4IvUOu)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.valtimo.nl/v12/nog-een-plek-geven/reference/user-interface/list-with-pagination-sorting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.