├── .editorconfig ├── .eslintrc.json ├── .github └── workflows │ └── ci.yml ├── .gitignore ├── .versionrc ├── CHANGELOG.md ├── README.md ├── angular.json ├── commitlint.config.js ├── package-lock.json ├── package.json ├── projects └── ngx-pagination-data-source │ ├── .eslintrc.json │ ├── karma.conf.js │ ├── ng-package.json │ ├── package.json │ ├── src │ ├── lib │ │ ├── indicate.ts │ │ ├── page.ts │ │ ├── pagination-data-source.spec.ts │ │ ├── pagination-data-source.ts │ │ └── simple-data-source.ts │ ├── public-api.ts │ └── test.ts │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ └── tsconfig.spec.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "ignorePatterns": [ 4 | "projects/**/*" 5 | ], 6 | "overrides": [ 7 | { 8 | "files": [ 9 | "*.ts" 10 | ], 11 | "parserOptions": { 12 | "project": [ 13 | "tsconfig.json", 14 | "e2e/tsconfig.json" 15 | ], 16 | "createDefaultProgram": true 17 | }, 18 | "extends": [ 19 | "plugin:@angular-eslint/recommended", 20 | "plugin:@angular-eslint/template/process-inline-templates" 21 | ], 22 | "rules": {} 23 | }, 24 | { 25 | "files": [ 26 | "*.html" 27 | ], 28 | "extends": [ 29 | "plugin:@angular-eslint/template/recommended" 30 | ] 31 | } 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ngx-pagination-data-source 2 | on: [push, pull_request] 3 | jobs: 4 | build: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Check out repository code 8 | uses: actions/checkout@v2 9 | - name: Use Node.js 10 | uses: actions/setup-node@v2 11 | with: 12 | node-version: '18.x' 13 | - run: npm ci 14 | - run: npm run lint 15 | - run: npm run build 16 | - run: npm run test:ci 17 | - uses: codecov/codecov-action@v4 18 | with: 19 | files: ./projects/ngx-pagination-data-source/coverage/lcov.info 20 | fail_ci_if_error: true 21 | token: ${{ secrets.CODECOV_TOKEN }} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | projects/ngx-pagination-data-source/README.md 10 | 11 | # dependencies 12 | node_modules 13 | /.angular 14 | 15 | # profiling files 16 | chrome-profiler-events*.json 17 | speed-measure-plugin*.json 18 | 19 | # IDEs and editors 20 | *.iml 21 | /.idea 22 | .project 23 | .classpath 24 | .c9/ 25 | *.launch 26 | .settings/ 27 | *.sublime-workspace 28 | 29 | # IDE - VSCode 30 | .vscode/* 31 | !.vscode/settings.json 32 | !.vscode/tasks.json 33 | !.vscode/launch.json 34 | !.vscode/extensions.json 35 | .history/* 36 | 37 | # misc 38 | /.angular/cache 39 | /.sass-cache 40 | /connect.lock 41 | /coverage 42 | projects/*/coverage 43 | /libpeerconnection.log 44 | npm-debug.log 45 | yarn-error.log 46 | testem.log 47 | /typings 48 | 49 | # System Files 50 | .DS_Store 51 | Thumbs.db 52 | -------------------------------------------------------------------------------- /.versionrc: -------------------------------------------------------------------------------- 1 | { 2 | "packageFiles": [ 3 | { 4 | "filename": "projects/ngx-pagination-data-source/package.json", 5 | "type": "json" 6 | } 7 | ], 8 | "bumpFiles": [ 9 | { 10 | "filename": "projects/ngx-pagination-data-source/package.json", 11 | "type": "json" 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ## [11.0.0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v10.0.0...v11.0.0) (2025-04-21) 6 | 7 | 8 | ### ⚠ BREAKING CHANGES 9 | 10 | * update to angular 19 11 | 12 | ### build 13 | 14 | * update to angular 19 ([e052a50](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/e052a503b8357a3ac35f74fd25001a6eec293a2b)) 15 | 16 | ## [10.0.0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v9.0.0...v10.0.0) (2025-04-21) 17 | 18 | 19 | ### ⚠ BREAKING CHANGES 20 | 21 | * update to angular 18 22 | 23 | ### build 24 | 25 | * update to angular 18 ([c904b9e](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/c904b9ef6c822bd65b1996ef523d189ffc4481b3)) 26 | 27 | ## [9.0.0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v8.0.0...v9.0.0) (2025-04-21) 28 | 29 | 30 | ### ⚠ BREAKING CHANGES 31 | 32 | * update to angular 17 33 | 34 | ### build 35 | 36 | * update to angular 17 ([e3d58bc](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/e3d58bc6966adabd3269360578c43b2ffec33214)) 37 | 38 | ## [8.0.0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v7.0.0...v8.0.0) (2025-04-21) 39 | 40 | 41 | ### ⚠ BREAKING CHANGES 42 | 43 | * update to angular 16 44 | 45 | ### build 46 | 47 | * update to angular 16 ([9f38122](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/9f3812277a7b2b57b8ea8d18c8fadcdd689bec87)) 48 | 49 | ## [7.0.0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v6.1.0...v7.0.0) (2025-04-21) 50 | 51 | 52 | ### ⚠ BREAKING CHANGES 53 | 54 | * update to angular 15 55 | 56 | ### build 57 | 58 | * update to angular 15 ([c831f30](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/c831f30572c2cddf470e0054ce60f456f4a0c502)) 59 | 60 | ## [6.1.0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v6.0.0...v6.1.0) (2025-04-20) 61 | 62 | 63 | ### Features 64 | 65 | * accept query and sort update fn ([ae74d46](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/ae74d46209d98291ce6b6153b565bf5b3c890e1b)), closes [#33](https://github.com/nilsmehlhorn/ngx-pagination-data-source/issues/33) 66 | 67 | ## [6.0.0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v5.0.0...v6.0.0) (2022-08-07) 68 | 69 | 70 | ### ⚠ BREAKING CHANGES 71 | 72 | * **deps:** Angular 14 73 | 74 | ### build 75 | 76 | * **deps:** update to angular 14 ([#39](https://github.com/nilsmehlhorn/ngx-pagination-data-source/issues/39)) ([6918193](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/69181939c63432e16b90aac25b31a86910057236)) 77 | 78 | ## [5.0.0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v4.2.0...v5.0.0) (2022-01-22) 79 | 80 | 81 | ### ⚠ BREAKING CHANGES 82 | 83 | * **deps:** Angular 13 84 | 85 | ### build 86 | 87 | * **deps:** update to angular 13 ([#25](https://github.com/nilsmehlhorn/ngx-pagination-data-source/issues/25)) ([5461ff5](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/5461ff5aec6d234cf3324f691224523c07acbbff)) 88 | 89 | ## [4.2.0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v4.1.0...v4.2.0) (2021-10-14) 90 | 91 | 92 | ### Features 93 | 94 | * add initial page optional parameter ([#24](https://github.com/nilsmehlhorn/ngx-pagination-data-source/issues/24)) ([516ea85](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/516ea852cc4e41423e7229ded960f73d380d0503)) 95 | 96 | ## [4.1.0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v4.0.0...v4.1.0) (2021-08-21) 97 | 98 | 99 | ### Features 100 | 101 | * make page size easier to configure ([#20](https://github.com/nilsmehlhorn/ngx-pagination-data-source/issues/20)) ([bf02553](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/bf0255363af79370acc7c005f87a071b51a62d67)) 102 | 103 | ## [4.0.0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v3.0.0...v4.0.0) (2021-08-21) 104 | 105 | 106 | ### ⚠ BREAKING CHANGES 107 | 108 | * Angular 12 109 | 110 | ### build 111 | 112 | * update to angular 12 ([53c3ef5](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/53c3ef54dd548da211db700e020234e7e64bf34d)) 113 | 114 | ## [3.0.0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v2.0.0...v3.0.0) (2021-02-03) 115 | 116 | 117 | ### ⚠ BREAKING CHANGES 118 | 119 | * Angular 11 120 | 121 | * update to angular 11 ([#11](https://github.com/nilsmehlhorn/ngx-pagination-data-source/issues/11)) ([37c8c8e](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/37c8c8e451bd486eec620976c8cb0d6162142579)) 122 | 123 | ## [2.0.0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v1.1.1...v2.0.0) (2020-07-12) 124 | 125 | 126 | ### ⚠ BREAKING CHANGES 127 | 128 | * Update to Angular 10 129 | 130 | * update angular to 10 ([#2](https://github.com/nilsmehlhorn/ngx-pagination-data-source/issues/2)) ([8148d09](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/8148d09985a73acfd97922620f0d26cd859b9bc6)) 131 | 132 | ### [1.1.2](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v1.1.1...v1.1.2) (2020-04-20) 133 | 134 | ### [1.1.1](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v1.1.0...v1.1.1) (2020-04-17) 135 | 136 | ## [1.1.0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/compare/v1.0.0...v1.1.0) (2020-04-17) 137 | 138 | 139 | ### Features 140 | 141 | * enable partial sort update ([c8154d0](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/c8154d0c530d40ed926ba392b3fc22e9bde8950d)) 142 | 143 | ## 1.0.0 (2020-04-17) 144 | 145 | 146 | ### Features 147 | 148 | * Pagination Data Source ([b1f7431](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/b1f7431554aa026f4bd0f9211a95a2610226b652)) 149 | 150 | 151 | ### Bug Fixes 152 | 153 | * export models ([f660c98](https://github.com/nilsmehlhorn/ngx-pagination-data-source/commit/f660c98f042a43b97b873e9484c5284acd1d448a)) 154 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm-badge](https://img.shields.io/npm/v/ngx-pagination-data-source.svg?style=flat-square)](https://www.npmjs.com/package/ngx-pagination-data-source) 2 |   3 | [![codecov-badge](https://codecov.io/gh/nilsmehlhorn/ngx-pagination-data-source/branch/master/graph/badge.svg)](https://codecov.io/gh/nilsmehlhorn/ngx-pagination-data-source) 4 | 5 | ngx-pagination-data-source provides an easy to use paginated `DataSource` for [Angular Material & CDK](https://material.angular.io/) that works with HTTP or any other way you're fetching pages. Configure a model for querying the data and hook up any inputs for searching, filtering and sorting - plus loading indication! 6 | 7 | :zap: [Example StackBlitz](https://stackblitz.com/github/nilsmehlhorn/ngx-pagination-data-source-example) 8 | 9 | :mag: [In-Depth Explanation](https://nils-mehlhorn.de/posts/angular-material-pagination-datasource) 10 | 11 | ## Installation 12 | 13 | ```bash 14 | npm i ngx-pagination-data-source 15 | ``` 16 | 17 | ## Usage 18 | 19 | Have a type you want to display in a [table](https://material.angular.io/components/table/overview) (or any other component accepting a [DataSource](https://material.angular.io/components/table/overview#datasource)). 20 | 21 | ```ts 22 | export interface User { 23 | id: number 24 | username: string 25 | email: string 26 | phone: string 27 | registrationDate: Date 28 | } 29 | ``` 30 | 31 | Define a query model and a service that can fetch pages based on this model. 32 | 33 | ```ts 34 | import { PageRequest, Page } from 'ngx-pagination-data-source' 35 | 36 | export interface UserQuery { 37 | search: string 38 | registration: Date 39 | } 40 | 41 | @Injectable({providedIn: 'root'}) 42 | export class UserService { 43 | page(request: PageRequest, query: UserQuery): Observable> { 44 | // transform request & query into something your server can understand 45 | // (you might want to refactor this into a utility function) 46 | const params = { 47 | pageNumber: request.page, 48 | pageSize: request.size, 49 | sortOrder: request.sort.order, 50 | sortProperty: request.sort.property, 51 | ...query 52 | } 53 | // fetch page over HTTP 54 | return this.http.get>('/users', {params}) 55 | // transform the response to the Page type with RxJS map() if necessary 56 | } 57 | } 58 | ``` 59 | 60 | Create the data source typed with the type you want to fetch and the corresponding query model. Pass a function pointing to your service and default values for the query and sort. 61 | 62 | ```ts 63 | import { PaginationDataSource } from 'ngx-pagination-data-source' 64 | 65 | @Component({...}) 66 | export class UsersComponent { 67 | displayedColumns = ['id', 'name', 'email', 'registration'] 68 | 69 | dataSource = new PaginationDataSource( 70 | (request, query) => this.users.page(request, query), 71 | {property: 'username', order: 'desc'}, 72 | {search: '', registration: undefined} 73 | ) 74 | 75 | constructor(private users: UserService) { } 76 | } 77 | ``` 78 | 79 | Hook the data source to a table and paginator in your view. Hook any query inputs to `dataSource.queryBy()` to provide a [partial](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialt) new query that will be merged with the existing one. You can also hook up inputs to `dataSource.sortBy()` in the same way. 80 | 81 | You can optionally add loading indication by e.g. hooking up a spinner to `dataSource.loading$`. 82 | 83 | ```html 84 | 85 | search 86 | 87 | 88 | 89 | 91 | 92 | 93 | 94 | 95 | Order by 96 | 97 | ID 98 | Username 99 | 100 | 101 | 102 | arrow_upward 103 | arrow_downward 104 | 105 | 106 | 107 | 108 | 109 |
110 | 113 | 114 | 115 | ``` 116 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "ngx-pagination-data-source": { 7 | "projectType": "library", 8 | "root": "projects/ngx-pagination-data-source", 9 | "sourceRoot": "projects/ngx-pagination-data-source/src", 10 | "prefix": "ngx", 11 | "architect": { 12 | "build": { 13 | "builder": "@angular-devkit/build-angular:ng-packagr", 14 | "options": { 15 | "tsConfig": "projects/ngx-pagination-data-source/tsconfig.lib.json", 16 | "project": "projects/ngx-pagination-data-source/ng-package.json" 17 | }, 18 | "configurations": { 19 | "production": { 20 | "tsConfig": "projects/ngx-pagination-data-source/tsconfig.lib.prod.json" 21 | } 22 | } 23 | }, 24 | "test": { 25 | "builder": "@angular-devkit/build-angular:karma", 26 | "options": { 27 | "main": "projects/ngx-pagination-data-source/src/test.ts", 28 | "tsConfig": "projects/ngx-pagination-data-source/tsconfig.spec.json", 29 | "karmaConfig": "projects/ngx-pagination-data-source/karma.conf.js" 30 | } 31 | }, 32 | "lint": { 33 | "builder": "@angular-eslint/builder:lint", 34 | "options": { 35 | "lintFilePatterns": [ 36 | "projects/ngx-pagination-data-source/**/*.ts", 37 | "projects/ngx-pagination-data-source/**/*.html" 38 | ] 39 | } 40 | } 41 | } 42 | } 43 | }, 44 | "cli": { 45 | "analytics": "cf201a80-cf3e-42cb-9922-1af1c17319ff", 46 | "schematicCollections": [ 47 | "@angular-eslint/schematics" 48 | ] 49 | }, 50 | "schematics": { 51 | "@angular-eslint/schematics:application": { 52 | "setParserOptionsProject": true 53 | }, 54 | "@angular-eslint/schematics:library": { 55 | "setParserOptionsProject": true 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = {extends: ['@commitlint/config-conventional']} 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-pagination-data-source", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "prebuild": "cpx README.md projects/ngx-pagination-data-source", 7 | "start": "ng serve", 8 | "build": "ng build --configuration production", 9 | "test": "ng test --watch false", 10 | "test:watch": "ng test", 11 | "test:ci": "ng test --watch false --code-coverage", 12 | "lint": "ng lint", 13 | "e2e": "ng e2e", 14 | "bump": "standard-version", 15 | "prerelease": "npm ci && npm run lint && npm run test && npm run build", 16 | "release": "npm publish --folder ./dist/ngx-pagination-data-source" 17 | }, 18 | "private": true, 19 | "dependencies": { 20 | "@angular/animations": "^19.2.7", 21 | "@angular/cdk": "^19.2.10", 22 | "@angular/common": "^19.2.7", 23 | "@angular/compiler": "^19.2.7", 24 | "@angular/core": "^19.2.7", 25 | "@angular/forms": "^19.2.7", 26 | "@angular/platform-browser": "^19.2.7", 27 | "@angular/platform-browser-dynamic": "^19.2.7", 28 | "@angular/router": "^19.2.7", 29 | "karma-coverage": "^2.2.0", 30 | "rxjs": "^6.6.7", 31 | "tslib": "^2.3.1", 32 | "zone.js": "~0.15.0" 33 | }, 34 | "devDependencies": { 35 | "@angular-devkit/build-angular": "^19.2.8", 36 | "@angular-devkit/core": "^19.2.8", 37 | "@angular-eslint/builder": "19.3.0", 38 | "@angular-eslint/eslint-plugin": "19.3.0", 39 | "@angular-eslint/eslint-plugin-template": "19.3.0", 40 | "@angular-eslint/schematics": "19.3.0", 41 | "@angular-eslint/template-parser": "19.3.0", 42 | "@angular/cli": "^19.2.8", 43 | "@angular/compiler-cli": "^19.2.7", 44 | "@angular/language-service": "^19.2.7", 45 | "@commitlint/cli": "^13.1.0", 46 | "@commitlint/config-conventional": "^13.1.0", 47 | "@commitlint/travis-cli": "^13.1.0", 48 | "@types/jasmine": "^3.6.11", 49 | "@types/jasminewd2": "^2.0.10", 50 | "@types/node": "^18", 51 | "@typescript-eslint/eslint-plugin": "^7.2.0", 52 | "@typescript-eslint/parser": "^7.2.0", 53 | "cpx": "^1.5.0", 54 | "eslint": "^8.57.0", 55 | "eslint-plugin-import": "2.25.2", 56 | "eslint-plugin-jsdoc": "^37.4.2", 57 | "eslint-plugin-prefer-arrow": "^1.2.3", 58 | "husky": "^4.3.8", 59 | "jasmine-core": "~3.10.1", 60 | "jasmine-spec-reporter": "~6.0.0", 61 | "karma": "~6.3.14", 62 | "karma-chrome-launcher": "~3.1.0", 63 | "karma-coverage-istanbul-reporter": "~3.0.2", 64 | "karma-jasmine": "~4.0.0", 65 | "ng-packagr": "^19.2.2", 66 | "standard-version": "^9.3.1", 67 | "ts-node": "~10.2.1", 68 | "typescript": "~5.5" 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /projects/ngx-pagination-data-source/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../.eslintrc.json", 3 | "ignorePatterns": [ 4 | "!**/*" 5 | ], 6 | "overrides": [ 7 | { 8 | "files": [ 9 | "*.ts" 10 | ], 11 | "parserOptions": { 12 | "project": [ 13 | "projects/ngx-pagination-data-source/tsconfig.lib.json", 14 | "projects/ngx-pagination-data-source/tsconfig.spec.json" 15 | ], 16 | "createDefaultProgram": true 17 | }, 18 | "plugins": [ 19 | "prefer-arrow" 20 | ], 21 | "rules": { 22 | "@angular-eslint/component-selector": [ 23 | "error", 24 | { 25 | "type": "element", 26 | "prefix": "ngx", 27 | "style": "kebab-case" 28 | } 29 | ], 30 | "@angular-eslint/directive-selector": [ 31 | "error", 32 | { 33 | "type": "attribute", 34 | "prefix": "ngx", 35 | "style": "camelCase" 36 | } 37 | ], 38 | "prefer-arrow/prefer-arrow-functions": "off", 39 | "semi": "off", 40 | "@typescript-eslint/semi": "off", 41 | "@typescript-eslint/member-delimiter-style": "off", 42 | "@typescript-eslint/member-ordering": "off", 43 | "id-blacklist": "off" 44 | } 45 | }, 46 | { 47 | "files": [ 48 | "*.html" 49 | ], 50 | "rules": {} 51 | } 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /projects/ngx-pagination-data-source/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-coverage'), 12 | require('@angular-devkit/build-angular/plugins/karma') 13 | ], 14 | client: { 15 | clearContext: false // leave Jasmine Spec Runner output visible in browser 16 | }, 17 | customLaunchers: { 18 | ChromeHeadlessNoSandbox: { 19 | base: 'ChromeHeadless', 20 | flags: ['--no-sandbox'] 21 | } 22 | }, 23 | coverageReporter: { 24 | type: 'lcov', 25 | subdir: '.' 26 | }, 27 | reporters: ['progress', 'coverage'], 28 | port: 9876, 29 | colors: true, 30 | logLevel: config.LOG_INFO, 31 | autoWatch: true, 32 | browsers: ['ChromeHeadlessNoSandbox'], 33 | singleRun: false, 34 | restartOnFileChange: true 35 | }); 36 | }; 37 | -------------------------------------------------------------------------------- /projects/ngx-pagination-data-source/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-pagination-data-source", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/ngx-pagination-data-source/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-pagination-data-source", 3 | "version": "11.0.0", 4 | "license": "MIT", 5 | "author": "Nils Mehlhorn (https://nils-mehlhorn.de)", 6 | "description": "Angular Material Pagination Data Source", 7 | "homepage": "https://github.com/nilsmehlhorn/ngx-pagination-data-source", 8 | "keywords": [ 9 | "rxjs", 10 | "angular", 11 | "typescript", 12 | "javascript", 13 | "material", 14 | "cdk", 15 | "pagination", 16 | "table" 17 | ], 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/nilsmehlhorn/ngx-pagination-data-source.git" 21 | }, 22 | "bugs": { 23 | "url": "https://github.com/nilsmehlhorn/ngx-pagination-data-source/issues" 24 | }, 25 | "peerDependencies": { 26 | "@angular/common": "^19.0.0", 27 | "@angular/core": "^19.0.0", 28 | "@angular/cdk": "^19.0.0" 29 | }, 30 | "dependencies": { 31 | "tslib": "^2.0.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /projects/ngx-pagination-data-source/src/lib/indicate.ts: -------------------------------------------------------------------------------- 1 | import {defer, Observable, Subject} from 'rxjs' 2 | import {finalize} from 'rxjs/operators' 3 | 4 | export function indicate(indicator: Subject): (source: Observable) => Observable { 5 | return (source: Observable) => source.pipe( 6 | s => defer(() => { 7 | indicator.next(true) 8 | return s 9 | }), 10 | finalize(() => indicator.next(false)) 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /projects/ngx-pagination-data-source/src/lib/page.ts: -------------------------------------------------------------------------------- 1 | import {Observable} from 'rxjs' 2 | 3 | export interface Sort { 4 | property: keyof T 5 | order: 'asc' | 'desc' 6 | } 7 | 8 | export interface PageRequest { 9 | page: number 10 | size: number 11 | sort?: Sort 12 | } 13 | 14 | export interface Page { 15 | content: T[] 16 | totalElements: number 17 | size: number 18 | number: number 19 | } 20 | 21 | export type PaginationEndpoint = (pageable: PageRequest, query: Q) => Observable> 22 | -------------------------------------------------------------------------------- /projects/ngx-pagination-data-source/src/lib/pagination-data-source.spec.ts: -------------------------------------------------------------------------------- 1 | import { PaginationDataSource } from './pagination-data-source'; 2 | import { forkJoin, of, Subject } from 'rxjs'; 3 | import { Page, Sort } from './page'; 4 | import { first, take, toArray } from 'rxjs/operators'; 5 | import createSpy = jasmine.createSpy; 6 | 7 | interface User { 8 | id: number; 9 | name: string; 10 | } 11 | 12 | interface UserQuery { 13 | search: string; 14 | } 15 | 16 | describe('PaginationDatasource', () => { 17 | it('should query endpoint with initial', (done) => { 18 | const sort: Sort = { order: 'asc', property: 'name' }; 19 | const query: UserQuery = { search: '' }; 20 | const page: Page = { 21 | content: [{ id: 1, name: 'Lorem' }], 22 | totalElements: 0, 23 | size: 0, 24 | number: 0, 25 | }; 26 | const spy = createSpy('endpoint').and.callFake(() => of(page)); 27 | const source = new PaginationDataSource(spy, sort, query); 28 | expect(spy).not.toHaveBeenCalled(); 29 | source.connect().subscribe((users) => { 30 | expect(users).toEqual(page.content); 31 | expect(spy).toHaveBeenCalledWith({ page: 0, size: 20, sort }, query); 32 | done(); 33 | }); 34 | }); 35 | 36 | it('should query endpoint with inputs', (done) => { 37 | const initialSort: Sort = { order: 'asc', property: 'name' }; 38 | const initialQuery: UserQuery = { search: '' }; 39 | const allPages = [ 40 | { 41 | content: [{ id: 1, name: `User[1]` }], 42 | totalElements: 100, 43 | size: 1, 44 | number: 1, 45 | }, 46 | { 47 | content: [{ id: 2, name: `User[2]` }], 48 | totalElements: 100, 49 | size: 1, 50 | number: 1, 51 | }, 52 | { 53 | content: [{ id: 3, name: `User[3]` }], 54 | totalElements: 100, 55 | size: 1, 56 | number: 1, 57 | }, 58 | { 59 | content: [{ id: 4, name: `User[4]` }], 60 | totalElements: 100, 61 | size: 1, 62 | number: 3, 63 | }, 64 | ]; 65 | let page = 0; 66 | const spy = createSpy('endpoint').and.callFake(() => of(allPages[page++])); 67 | const source = new PaginationDataSource( 68 | spy, 69 | initialSort, 70 | initialQuery, 71 | 1 72 | ); 73 | const page$ = source.page$.pipe(take(4), toArray()); 74 | const content$ = source.connect().pipe(take(4), toArray()); 75 | forkJoin([content$, page$]).subscribe(([contents, pages]) => { 76 | expect(contents).toEqual(allPages.map((p) => p.content)); 77 | expect(pages).toEqual(allPages); 78 | const [firstArgs, secondArgs, thirdArgs, fourthArgs] = 79 | spy.calls.allArgs(); 80 | expect(firstArgs).toEqual([ 81 | { page: 0, size: 1, sort: initialSort }, 82 | initialQuery, 83 | ]); 84 | expect(secondArgs).toEqual([ 85 | { page: 0, size: 1, sort: initialSort }, 86 | { search: 'lorem' }, 87 | ]); 88 | expect(thirdArgs).toEqual([ 89 | { page: 0, size: 1, sort: { order: 'desc', property: 'id' } }, 90 | { search: 'lorem' }, 91 | ]); 92 | expect(fourthArgs).toEqual([ 93 | { page: 3, size: 1, sort: { order: 'desc', property: 'id' } }, 94 | { search: 'lorem' }, 95 | ]); 96 | done(); 97 | }); 98 | source.queryBy({ search: 'lorem' }); 99 | source.sortBy({ order: 'desc', property: 'id' }); 100 | source.fetch(3); 101 | }); 102 | 103 | it('should query endpoint starting with initialPage', (done) => { 104 | const initialSort: Sort = { order: 'asc', property: 'name' }; 105 | const initialQuery: UserQuery = { search: '' }; 106 | const initialPage = 2; 107 | const allPages = [ 108 | { 109 | content: [{ id: 1, name: `User[1]` }], 110 | totalElements: 100, 111 | size: 1, 112 | number: 1, 113 | }, 114 | { 115 | content: [{ id: 2, name: `User[2]` }], 116 | totalElements: 100, 117 | size: 1, 118 | number: 1, 119 | }, 120 | { 121 | content: [{ id: 3, name: `User[3]` }], 122 | totalElements: 100, 123 | size: 1, 124 | number: 1, 125 | }, 126 | { 127 | content: [{ id: 4, name: `User[4]` }], 128 | totalElements: 100, 129 | size: 1, 130 | number: 3, 131 | }, 132 | ]; 133 | const spy = createSpy('endpoint').and.callFake((value) => of(allPages[value.page])); 134 | const source = new PaginationDataSource( 135 | spy, 136 | initialSort, 137 | initialQuery, 138 | 1, 139 | initialPage 140 | ); 141 | const page$ = source.page$.pipe(take(2), toArray()); 142 | const content$ = source.connect().pipe(take(2), toArray()); 143 | forkJoin([content$, page$]).subscribe(([contents, pages]) => { 144 | expect(contents).toEqual([allPages[2], allPages[0]].map((p) => p.content)); 145 | expect(pages).toEqual([allPages[2], allPages[0]]); 146 | const [firstArgs, secondArgs] = 147 | spy.calls.allArgs(); 148 | expect(firstArgs).toEqual([ 149 | { page: 2, size: 1, sort: initialSort }, 150 | initialQuery, 151 | ]); 152 | expect(secondArgs).toEqual([ 153 | { page: 0, size: 1, sort: initialSort }, 154 | { search: 'lorem' }, 155 | ]); 156 | done(); 157 | }); 158 | source.queryBy({ search: 'lorem' }); 159 | }); 160 | 161 | it('should indicate loading', async () => { 162 | const sink = new Subject>(); 163 | const spy = createSpy('endpoint').and.callFake(() => sink); 164 | const source = new PaginationDataSource( 165 | spy, 166 | { order: 'asc', property: 'name' }, 167 | { search: '' } 168 | ); 169 | const firstLoading$ = source.loading$.pipe(take(1)).toPromise(); 170 | source.connect().pipe(first()).subscribe(); 171 | expect(await firstLoading$).toEqual(true); 172 | const secondLoading$ = source.loading$.pipe(take(1)).toPromise(); 173 | sink.next({ 174 | content: [{ id: 1, name: `Lorem` }], 175 | totalElements: 100, 176 | size: 1, 177 | number: 1, 178 | }); 179 | sink.complete(); 180 | expect(await secondLoading$).toEqual(false); 181 | }); 182 | 183 | it('should update pagesize', () => { 184 | const sink = new Subject>(); 185 | const spy = createSpy('endpoint').and.callFake(() => sink); 186 | const sort: Sort = { order: 'asc', property: 'name' }; 187 | const query: UserQuery = { search: '' }; 188 | const source = new PaginationDataSource(spy, sort, query); 189 | const subscription = source.connect().subscribe(); 190 | expect(spy).toHaveBeenCalledWith({ page: 0, size: 20, sort }, query); 191 | source.fetch(1, 30); 192 | expect(spy).toHaveBeenCalledWith({ page: 1, size: 30, sort }, query); 193 | source.fetch(2); 194 | expect(spy).toHaveBeenCalledWith({ page: 2, size: 30, sort }, query); 195 | subscription.unsubscribe(); 196 | }); 197 | }); 198 | -------------------------------------------------------------------------------- /projects/ngx-pagination-data-source/src/lib/pagination-data-source.ts: -------------------------------------------------------------------------------- 1 | import { SimpleDataSource } from './simple-data-source'; 2 | import { Page, PaginationEndpoint, Sort } from './page'; 3 | import { indicate } from './indicate'; 4 | import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs'; 5 | import { map, shareReplay, startWith, switchMap, tap } from 'rxjs/operators'; 6 | 7 | export type UpdateFn = (last: T) => T; 8 | 9 | export class PaginationDataSource> 10 | implements SimpleDataSource 11 | { 12 | public loading$: Observable; 13 | public page$: Observable>; 14 | 15 | private readonly pageNumber = new Subject(); 16 | private readonly sort: BehaviorSubject>; 17 | private readonly query: BehaviorSubject; 18 | private readonly loading = new Subject(); 19 | 20 | constructor( 21 | private endpoint: PaginationEndpoint, 22 | initialSort: Sort, 23 | initialQuery: Q, 24 | public pageSize = 20, 25 | public initialPage = 0 26 | ) { 27 | let firstCall = true; 28 | this.query = new BehaviorSubject(initialQuery); 29 | this.sort = new BehaviorSubject>(initialSort); 30 | const param$ = combineLatest([this.query, this.sort]); 31 | this.loading$ = this.loading.asObservable(); 32 | this.page$ = param$.pipe( 33 | switchMap(([query, sort]) => 34 | this.pageNumber.pipe( 35 | startWith(initialPage && firstCall ? initialPage : 0), 36 | tap(() => (firstCall = false)), 37 | switchMap((page) => 38 | this.endpoint({ page, sort, size: this.pageSize }, query).pipe( 39 | indicate(this.loading) 40 | ) 41 | ) 42 | ) 43 | ), 44 | shareReplay(1) 45 | ); 46 | } 47 | 48 | sortBy(sortUpdate: Partial> | UpdateFn>): void { 49 | const lastSort = this.sort.getValue(); 50 | const nextSort = 51 | typeof sortUpdate === 'function' 52 | ? sortUpdate(lastSort) 53 | : { ...lastSort, ...sortUpdate }; 54 | this.sort.next(nextSort); 55 | } 56 | 57 | queryBy(queryUpdate: Partial | UpdateFn): void { 58 | const lastQuery = this.query.getValue(); 59 | const nextQuery = 60 | typeof queryUpdate === 'function' 61 | ? queryUpdate(lastQuery) 62 | : { ...lastQuery, ...queryUpdate }; 63 | this.query.next(nextQuery); 64 | } 65 | 66 | fetch(page: number, pageSize?: number): void { 67 | if (pageSize) { 68 | this.pageSize = pageSize; 69 | } 70 | this.pageNumber.next(page); 71 | } 72 | 73 | connect(): Observable { 74 | return this.page$.pipe(map((page) => page.content)); 75 | } 76 | 77 | disconnect(): void {} 78 | } 79 | -------------------------------------------------------------------------------- /projects/ngx-pagination-data-source/src/lib/simple-data-source.ts: -------------------------------------------------------------------------------- 1 | import {DataSource} from '@angular/cdk/collections' 2 | import {Observable} from 'rxjs' 3 | 4 | 5 | export interface SimpleDataSource extends DataSource { 6 | connect(): Observable 7 | 8 | disconnect(): void 9 | } 10 | -------------------------------------------------------------------------------- /projects/ngx-pagination-data-source/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of ngx-pagination-data-source 3 | */ 4 | 5 | export * from './lib/pagination-data-source' 6 | export * from './lib/simple-data-source' 7 | export * from './lib/page' 8 | -------------------------------------------------------------------------------- /projects/ngx-pagination-data-source/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js' 4 | import 'zone.js/testing' 5 | import {getTestBed} from '@angular/core/testing' 6 | import { 7 | BrowserDynamicTestingModule, 8 | platformBrowserDynamicTesting 9 | } from '@angular/platform-browser-dynamic/testing' 10 | 11 | // First, initialize the Angular testing environment. 12 | getTestBed().initTestEnvironment( 13 | BrowserDynamicTestingModule, 14 | platformBrowserDynamicTesting() 15 | ) 16 | -------------------------------------------------------------------------------- /projects/ngx-pagination-data-source/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "declarationMap": true, 6 | "declaration": true, 7 | "inlineSources": true, 8 | "types": [], 9 | "lib": [ 10 | "dom", 11 | "es2018" 12 | ] 13 | }, 14 | "angularCompilerOptions": { 15 | "skipTemplateCodegen": true, 16 | "strictMetadataEmit": true, 17 | "enableResourceInlining": true 18 | }, 19 | "exclude": [ 20 | "src/test.ts", 21 | "**/*.spec.ts" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /projects/ngx-pagination-data-source/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "compilerOptions": { 4 | "declarationMap": false 5 | }, 6 | "angularCompilerOptions": { 7 | "compilationMode": "partial" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/ngx-pagination-data-source/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "noImplicitAny": true, 7 | "esModuleInterop": true, 8 | "noImplicitReturns": true, 9 | "noImplicitThis": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "strictNullChecks": true, 12 | "sourceMap": true, 13 | "declaration": false, 14 | "experimentalDecorators": true, 15 | "module": "es2020", 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "lib": [ 20 | "es2018", 21 | "dom" 22 | ], 23 | "paths": { 24 | "ngx-pagination-data-source": [ 25 | "dist/ngx-pagination-data-source/ngx-pagination-data-source", 26 | "dist/ngx-pagination-data-source" 27 | ] 28 | }, 29 | "removeComments": false, 30 | "useDefineForClassFields": false 31 | }, 32 | "angularCompilerOptions": { 33 | "fullTemplateTypeCheck": true, 34 | "strictInjectionParameters": true, 35 | "annotateForClosureCompiler": false 36 | } 37 | } 38 | --------------------------------------------------------------------------------