@jimka/typescript-ui

Appearance

PaginationBar ​

PaginationBar is a horizontal navigation bar that drives a paginated Store — first / previous / next / last buttons plus a Page X of Y label.

The bar listens to the store's 'pagechanged' and 'load' events and keeps button-enabled state in sync automatically.

Usage ​

Pair the bar with any store that has had setPageSize(n) called on it. AjaxProxy is the typical proxy choice; it appends ?page=N&pageSize=M and parses a { data, total } envelope.

typescript
import { AjaxProxy, Field, Model, Store } from '@jimka/typescript-ui/data';
import { PaginationBar } from '@jimka/typescript-ui/component/display';
import { TablePanel } from '@jimka/typescript-ui/component/table';
const model = new Model({ fields: [
    new Field({ name: 'id',   type: 'number' }),
    new Field({ name: 'name', type: 'string' }),
] });

const store = new Store({
    model,
    proxy: new AjaxProxy({ url: '/api/users' }),
});
store.setPageSize(25);

const panel = TablePanel(store);
panel.setPaginationBar(PaginationBar(store));

void store.load();

The bar is a standalone Component; it does not require a TablePanel. You can drop it into any container that has its own layout.

Behaviour ​

ActionResult
<<store.goToPage(1)
<store.prevPage()
>store.nextPage()
>>store.goToPage(totalPages)

Buttons disable themselves at the boundaries: << and < when on page 1, >> and > when on the last known page. If the store has not yet reported a total (e.g. before the first paginated load), > stays enabled so the user can advance into unknown territory; >> stays disabled until the total is known.

Pending-change guard ​

When the store has unsynced edits (store.hasPendingChanges() is true), all four nav buttons are disabled — leaving the page would silently discard the in-flight changes. The buttons re-enable automatically once store.sync() or store.reject() clears the dirty state.

If you call nextPage() / prevPage() / goToPage() directly while dirty, the call is a no-op and the store emits 'pagechangeblocked'.

Disposal ​

Call bar.dispose() when permanently removing the bar to detach its store listeners:

typescript
const bar = PaginationBar(store);
panel.setPaginationBar(bar);
// ...later
bar.dispose();

TablePanel.setPaginationBar(newBar) automatically disposes any previously attached bar before installing the replacement.

See also ​