docs: backend service integration

package/README.md

@@ -21,7 +21,7 @@ npm install @sparser/au2-data-grid
 ## Getting Started
 
 In order to use the data-grid, we need to first create a `ContentModel`.
-For start it is enough to know that a [`ContentModel`](#content-model) holds the data that needs to be displayed in the grid.
+For start it is enough to know that a [`ContentModel`](#content-model-api) holds the data that needs to be displayed in the grid.
 
 ```typescript
 import { ILogger, resolve } from '@aurelia/kernel';
@@ -54,7 +54,7 @@ export class MyApp {
 
 Note that in this example, we have used a static list of `Person` objects for the content model.
 
-> For other options, like sorting, paging, etc. please refer to the [`ContentModel`](#content-model) documentation.
+> For other options, like sorting, paging, etc. please refer to the [`ContentModel`](#content-model-api) documentation.
 
 Next, define the grid in markup.
 
@@ -104,7 +104,7 @@ Complete everything, by registering the `DataGridConfiguration` to the Aurelia2
 import { Aurelia, StandardConfiguration } from '@aurelia/runtime-html';
 import { DataGridConfiguration } from '@sparser/au2-data-grid';
 import { MyApp as component } from './my-app';
-import './app.css';
+import './app.css'; // <-- import the CSS
 
 (async function () {
   const host = document.querySelector<HTMLElement>('app');
@@ -117,4 +117,68 @@ import './app.css';
 
 See this example in action in this [StackBlitz demo](https://stackblitz.com/edit/au2-data-grid-getting-started?file=src%2Fmy-app.ts).
 
-## Content model
+## Integrate with backend service
+
+The previous example dealt with a static list of objects.
+However, it is often the case, that the data, shown in the grid, is fetched from a backend service.
+The integration with a backend service is supported by configuring the content model for paging.
+
+To this end, we can modify the previous example, as follows:
+
+```typescript
+this.people = new ContentModel<Person>(
+  /** allItems */ null,
+  /** pagingOptions    */ {
+    pageSize: 5,
+    async fetchPage(
+      currentPage: number,
+      pageSize: number,
+      model: ContentModel<Person>
+    ) {
+      const res = await fetch(
+        `/people?skip=${(currentPage - 1) * pageSize}&top=${pageSize}`
+      );
+      return await res.json();
+    },
+    async fetchCount() {
+      const response = await fetch(`/people/count`);
+      return response.json();
+    },
+  },
+  /** selectionOptions */ null,
+  /** onSorting        */ null,
+  /** logger           */ logger
+);
+```
+
+Note that this example does no-longer uses a static list of `Person` objects.
+Instead, it uses the `fetchPage` callback to fetch the data from the backend service.
+The `pageSize` and the `currentPage` are passed to the `fetchPage` callback, which can be used to fetch a chunk/page of data from the backend service (depending on your backend service implementation you need to change how the `pageSize` and `currentPage` information needs to be used).
+
+Additionally note that there is also a `fetchCount` callback.
+This can be used to fetch the total number of items from the backend service.
+This information is used to calculate the total number of pages.
+
+These callbacks are useful when dealing with paged data-grids.
+
+See this example in action in this [StackBlitz demo](https://stackblitz.com/edit/au2-data-grid-with-backend-service?file=src%2Fmy-app.ts).
+
+> If you are wondering about the backend service in the example, the data is fetched from a JSON file, via webpack-dev-server middleware.
+
+## Content model API
+
+### Navigate between pages
+
+To navigate to the next page, use `goToNextPage()` method.
+
+```typescript
+model.goToNextPage();
+```
+
+To navigate to the previous page, use `goToPreviousPage()` method.
+
+```typescript
+model.goToPreviousPage();
+```
+
+To see example of navigating to the next and/or previous page, see this [StackBlitz demo](https://stackblitz.com/edit/au2-data-grid-with-backend-service?file=src%2Fmy-app.ts).

package/src/content-model.ts

@@ -161,7 +161,6 @@ export class ContentModel<T> {
   }
 
   public setCurrentPageNumber(pageNumber: number, force: boolean = false): void {
-    // console.log('setCurrentPageNumber');
     if (!this.initialized) return;
     const oldNumber = this._currentPageNumber;
     if (oldNumber === pageNumber