Server side pagination (Hybrid type) in Tanstack LIT Grid

[NavneetVaid]

Hi, I was trying to create a web component with the help of tanstack lit flavour, i was adding few features and i want to add server side pagination to it but a hybrid one, I am facing one issue as of now and need help with below question urgently. Any help would be highly appreciated

So basically what i want is that i will on initial load fetch 100 records and my records per page is 10, so now for the next 10 pages my grid would be client side as we have 100 records, now when i go to page 11 i hit the api and bring records from 50-150 basically page 5th to 15th because my user when on page 11 can go back and forth so i want record for both sides. What problem i am facing that when i set the pagination state in this scenario the tanstack grid is behaving weird and is not able to map data correctly. Sometime it jumps to page 1, sometimes it just doesnt show data at all in grid. What i was wondering if we support this kind of pagination ? if yes do we have any example for this hybrid pagination ?

[amasen02]

Why this happens

There are two distinct mechanisms in TanStack Table causing the "jumps to page 1" and "empty grid" issues:

1. autoResetPageIndex resets to page 1 whenever data changes

By default, whenever the reference to the data array changes, TanStack Table assumes the dataset has been re-queried or filtered and resets pageIndex back to 0. When page 11 triggers a fetch and updates your state, TanStack resets the table to page 1.

2. Index mismatch in Client-Side Slicing

In client-side pagination (manualPagination: false), TanStack Table extracts the current page by slicing the data array:
$$\text{sliceIndex} = [\text{pageIndex} \times \text{pageSize}, (\text{pageIndex} + 1) \times \text{pageSize}]$$

When you are on page 11 (pageIndex = 10) with pageSize = 10, TanStack looks for items at indices 100..109 of the data array. If your buffer from the server contains records 50–150 (an array of length 100), its valid indices are only 0..99. Accessing index 100+ returns undefined, causing the grid to show empty rows or fail to render.

---

Solutions

Approach 1: Sparse Cache Array (Recommended)

Keep a persistent array representing all records (totalServerRecords). Pre-fill it or populate slots as chunks arrive. TanStack Table can then safely slice [pageIndex * 10 .. (pageIndex + 1) * 10] while keeping client-side sorting and navigation working:

import { TableController } from '@tanstack/lit-table';

// 1. Disable auto reset
const table = new TableController(this, {
  data: cachedRecords, // Array of total length, with indices populated
  columns,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  autoResetPageIndex: false, // Prevents snapping back to page 0 on fetch
  state: {
    pagination,
  },
  onPaginationChange: (updater) => {
    // Check if next pageIndex needs a chunk fetch before updating
    const nextPagination = typeof updater === 'function' ? updater(pagination) : updater;
    ensureChunkLoaded(nextPagination.pageIndex);
    pagination = nextPagination;
  },
});

When fetching records from 50..150:

function onChunkLoaded(chunkStart: number, records: Item[]) {
  // Mutate or immutably merge into the master cache at the correct offset
  records.forEach((item, idx) => {
    cachedRecords[chunkStart + idx] = item;
  });
  // Trigger Lit reactive update
  this.requestUpdate();
}

---

Approach 2: manualPagination: true with Local Window Slice

Alternatively, tell TanStack Table that pagination is manual (manualPagination: true) and pass only the 10 records for the current page into data. This completely bypasses TanStack's array slicing:

// Calculate slice from your local 100-item buffer
const bufferStart = 50; // e.g. records 50 to 150
const pageStartIndex = (pagination.pageIndex * pagination.pageSize) - bufferStart;
const visiblePageData = buffer.slice(pageStartIndex, pageStartIndex + pagination.pageSize);

const table = new TableController(this, {
  data: visiblePageData, // Always exactly 10 items
  columns,
  rowCount: totalServerCount, // Sets total pages in pagination controls
  manualPagination: true,
  autoResetPageIndex: false,
  state: {
    pagination,
  },
  onPaginationChange: (updater) => { ... },
});

This guarantees:

1. The table never jumps back to page 1 unexpectedly (autoResetPageIndex: false).
2. The grid always receives valid items mapped to the active page index.
3. Users can paginate back and forth within the 100-record buffer instantly without triggering redundant network requests.