github-repos-js — GitHub Repositories (continuation-URL pagination)

A demo of vanilla-grid against a public REST API that paginates via the HTTP Link header (rel="next" continuation URLs). Implements a custom DataManager that stores the next URL in its own state and ignores the grid's (skip, pageSize) hint entirely.

What it shows

Custom DataManager subclass — GitHubReposDataManager extends window.DataManager and overrides fetchRows() / fetchMoreRows().
Continuation URL pagination — parses Link: <url>; rel="next" and re-issues GET on it for each subsequent page.
Optional total count — GitHub Search returns the real total_count (millions); the status bar uses the "loaded N/total" format when known. Note: the GitHub Search API itself only allows pagination through the first 1,000 matching results — past that the Link: rel="next" header is no longer returned and our pagination naturally stops, even though total_count is much larger.
<vn-grid-toolbar> status bar — a src/vanilla-grid-toolbar/ linked to the grid: standard auto-fit / reset / clear-filters / reload commands in the empty template; export-to-Excel + a custom view command (opens the repo detail panel, single selection only) + clear-selection in the selected template. Only the exportToExcel command is overridden (registerCommand) for the app's file naming (theme-matched Excel styling is automatic — the grid's exportToExcel() defaults to themeStyle: 'auto') and returns the export's promise, so the toolbar handles its outcome (a cancelled export is not an error); the view command is handled via the vn-grid-toolbar-command event. The row-count line is the autonomous <vn-grid-toolbar-status> (self-updates from grid state, including the live selection count, once configureToolbarRowCountStatus() pushes the localized strings in); a host-driven <vn-grid-toolbar-status-message> carries only transient text (e.g. fetch errors), set via reposToolbar.setStatusMessage().
Multiple-row selection, row double-click → detail side panel, Excel export (theme-styled), 8 themes, EN/IT i18n, resizable grid container — all kept identical to northwind-orders-js.

Resizing the grid

The grid sits in a src/vanilla-resize-box/ (aria-label="Resizable repositories grid"). Drag the corner handle to resize it — resizing is pointer-driven, with no keyboard path.

The handle carries role="separator" and takes its accessible name from the host's aria-label — here "Resizable repositories grid — resize handle" — but is not focusable, so it adds no tab stop to the page. This app's markup needs nothing beyond the aria-label it already carries.

Endpoint

GET https://api.github.com/search/repositories
    ?q=language:javascript
    &sort=stars
    &order=desc
    &per_page=100

per_page is capped at 100. The GitHub Search API silently clamps any larger value to 100. The data manager enforces this cap itself so the actual page size always matches what the server returns.

Sorting

Server-side sorting is wired for the three columns the GitHub Search API supports:

Grid column	API `sort=` value
Stars	`stars`
Forks	`forks`
Updated	`updated`

Clicking any other column header (Repo ID, Repository, Owner, Description, Language, Open Issues, Created, License, Topics) has no effect because GitHub does not expose a sort field for those. They are marked sortable="false" in the HTML so the sort indicator is never shown.

open_issues_count is intentionally non-sortable: the closest GitHub option (help-wanted-issues) counts only issues labelled "help wanted", which is not the same as total open issues and would produce confusing results.

Rate limits

GitHub allows 60 unauthenticated requests/hour per IP. To raise that to 5000/h, set a personal access token in DevTools console:

localStorage.setItem('github-repos-js:githubToken', 'ghp_yourReadOnlyToken');
location.reload();

The token requires no scopes for public-repo search.

Run

Serve the workspace root with any static server, then open /samples/github-repos-js/index.html.

Files

index.html — same shell as northwind-orders-js; columns target GitHub fields.
modules/repos-tab.js — defines GitHubReposDataManager and wires the grid (initializeReposGrid) / detail panel / export. The *-tab.js filename mirrors the other samples; the symbols inside are repo-flavored.
modules/i18n.js — repo-specific translations.
modules/dom-refs.js, modules/theme.js, styles.css, themes/ — unchanged from northwind-orders-js.

Notes for adapting to other Link-header APIs

The same pattern works unchanged for any API that returns a Link header with rel="next" (Stripe, Atlassian, …). Only _buildInitialUrl() and _get() JSON shape need adapting.