# Server Pagination Example (Reqres)

### Static content

This example demonstrates how to implement **server-side pagination** using an external API (`reqres.in`).
When "Server Pagination" is enabled in the widget configuration, the script receives `page` and `pageElements` parameters.

### Function Explanation

1.  **Page Parameters**: The `page` and `pageElements` arguments act as the current page number and the page size (limit), respectively.
2.  **API Request**: The code constructs a request to `reqres.in` passing `page` and `per_page` query parameters.
3.  **Callback**: The function processes the response and sends the array of users to the widget via the `callback`.

### Code

```javascript
// Main function executed by the Custom Table widget
// parameters: entityData, filters, page, pageElements, callback

// 1. Prepare Pagination Parameters
// Ensure we have defaults if arguments are missing (safeguard)
const currentPage = page || 1;
const perPage = pageElements || 5;

// 2. Construct URL with pagination params
// reqres.in uses 'page' (1-based) and 'per_page'
const url = `https://reqres.in/api/users?page=${currentPage}&per_page=${perPage}`;

try {
  // 3. Fetch Data
  const response = await http(url);
  
  // 4. Extract Data
  // reqres.in returns: { page: 1, per_page: 6, total: 12, total_pages: 2, data: [...] }
  let users = [];
  
  // Check various response wrappers as 'http' might auto-parse JSON
  if (response && response.data && Array.isArray(response.data)) {
      users = response.data;
  } else if (response && response.json) {
      const json = await response.json();
      users = json.data || [];
  } else if (response && Array.isArray(response)) {
      users = response;
  }

  // 5. Format for Table
  // Configured Columns hint: 'id', 'avatar', 'first_name', 'last_name'
  const tableData = users.map(user => {
    return {
      id: user.id,
      avatar: `<img src="${user.avatar}" style="width: 30px; border-radius: 50%;">`,
      first_name: user.first_name,
      last_name: user.last_name,
      email: user.email
    };
  });

  // 6. Return Data
  // We return the array of items for the current page.
  callback(tableData);

} catch (error) {
  console.error("Error fetching paged data:", error);
  callback([]);
}

```