Angular Material Pagination Data Source
npm install ngx-pagination-data-source
ngx-pagination-data-source provides an easy to use paginated DataSource for Angular Material & CDK 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!
:zap: Example StackBlitz
:mag: In-Depth Explanation
``bash`
npm i ngx-pagination-data-source
Have a type you want to display in a table (or any other component accepting a DataSource).
`ts`
export interface User {
id: number
username: string
email: string
phone: string
registrationDate: Date
}
Define a query model and a service that can fetch pages based on this model.
`ts
import { PageRequest, Page } from 'ngx-pagination-data-source'
export interface UserQuery {
search: string
registration: Date
}
@Injectable({providedIn: 'root'})
export class UserService {
page(request: PageRequest
// transform request & query into something your server can understand
// (you might want to refactor this into a utility function)
const params = {
pageNumber: request.page,
pageSize: request.size,
sortOrder: request.sort.order,
sortProperty: request.sort.property,
...query
}
// fetch page over HTTP
return this.http.get
// transform the response to the Page type with RxJS map() if necessary
}
}
`
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.
`ts
import { PaginationDataSource } from 'ngx-pagination-data-source'
@Component({...})
export class UsersComponent {
displayedColumns = ['id', 'name', 'email', 'registration']
dataSource = new PaginationDataSource
(request, query) => this.users.page(request, query),
{property: 'username', order: 'desc'},
{search: '', registration: undefined}
)
constructor(private users: UserService) { }
}
`
Hook the data source to a table and paginator in your view. Hook any query inputs to dataSource.queryBy() to provide a partial new query that will be merged with the existing one. You can also hook up inputs to dataSource.sortBy() in the same way.
You can optionally add loading indication by e.g. hooking up a spinner to dataSource.loading$.
`html``
[matDatepicker]="picker" placeholder="Registration"/>
[pageIndex]="page.number" (page)="dataSource.fetch($event.pageIndex)">