Data tables with pagination

We have created the scaffolding to lay out our master/detail view. In the master outlet, we will have a paginated data table of users, so let’s implement UserTableComponent, which will contain a MatTableDataSource property named dataSource. We will need to be able to fetch user data in bulk using standard pagination controls such as pageSize and pagesToSkip and narrow down the selection further with user-provided search text.

Let’s start by adding the necessary functionality to UserService:

1. Implement a new IUsers interface to describe the data structure of the paginated data:

   src/app/user/user/user.service.ts
   ...
   export interface IUsers {
     data: IUser[]
     total: number
   }
   

2. Update the interface for UserService with a getUsers function:

   src/app/user/user/user.service.ts
   ...
   export interface IUserService {
     getUser(id: string): Observable<IUser>
     updateUser(id: string, user: IUser): Observable...