Pagination Example Limitation

Current Behavior

The "Paginated Data Table" example shows pagination UI controls but doesn't actually paginate the data in the table. All 100 posts are displayed at once.

Why?

The example has three components:

pan-data-connector - Fetches all posts from JSONPlaceholder (100 items)

pan-data-table - Displays ALL items it receives

pan-pagination - Shows page controls and publishes pagination events

The Gap

✅ Pagination controls work (click pages, see PAN messages)
✅ Data fetches correctly (all 100 posts)
❌ Table doesn't filter/slice data based on current page

The pan-data-table component doesn't have built-in pagination support - it renders whatever data it receives from {resource}.list.state.

Solutions

Option 1: Server-Side Pagination (Best)

The API should return paginated data:

// pan-data-connector would need to:
// 1. Listen to pagination.changed events
// 2. Append page/limit params to API request
// 3. Fetch only one page at a time

GET /posts?_page=1&_limit=10  // Returns posts 1-10
GET /posts?_page=2&_limit=10  // Returns posts 11-20

Status: Requires pan-data-connector enhancement to support query params from PAN topics.

Option 2: Client-Side Pagination with Computed State

Use pan-computed-state to slice the data:

<!-- Fetch all data -->
<pan-data-connector
  resource="posts"
  base-url="https://jsonplaceholder.typicode.com">
</pan-data-connector>

<!-- Slice data based on current page -->
<pan-computed-state
  sources="posts.list.state,pagination.changed"
  output="posts.page.state">
  <script>
    (postsState, paginationEvent) => {
      const items = postsState?.items || [];
      const page = paginationEvent?.page || 1;
      const pageSize = paginationEvent?.pageSize || 10;

      const start = (page - 1) * pageSize;
      const end = start + pageSize;
      const pageItems = items.slice(start, end);

      return { items: pageItems };
    }
  </script>
</pan-computed-state>

<!-- Display paginated data -->
<pan-data-table
  resource="posts.page"
  columns="id,title,body">
</pan-data-table>

<!-- Pagination controls -->
<pan-pagination
  total-items="100"
  page-size="10"
  topic="pagination">
</pan-pagination>

Status: Requires playground support for adding