fix(material/table): Make table data source interface generic (#22673)

* fix(material/table): Make table data source interface generic

* fix(material/table): golden api

* fix(material/table): re-export interface

Author: andrewseguin

src/material-experimental/mdc-table/public-api.ts

@@ -12,3 +12,5 @@ export * from './cell';
 export * from './row';
 export * from './table-data-source';
 export * from './text-column';
+
+export {MatTableDataSourcePageEvent, MatTableDataSourcePaginator} from '@angular/material/table';

src/material-experimental/mdc-table/table-data-source.ts

@@ -6,8 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {MatPaginator} from '@angular/material-experimental/mdc-paginator';
-import {_MatTableDataSource} from '@angular/material/table';
+import {_MatTableDataSource, MatTableDataSourcePaginator} from '@angular/material/table';
 
 /**
  * Data source that accepts a client-side data array and includes native support of filtering,
@@ -22,4 +21,6 @@ import {_MatTableDataSource} from '@angular/material/table';
  * interactions. If your app needs to support more advanced use cases, consider implementing your
  * own `DataSource`.
  */
-export class MatTableDataSource<T> extends _MatTableDataSource<T, MatPaginator> {}
+export class MatTableDataSource<T, P extends MatTableDataSourcePaginator =
+    MatTableDataSourcePaginator> extends _MatTableDataSource<T, P> {}
+

src/material/table/table-data-source.ts

@@ -8,7 +8,7 @@
 
 import {_isNumberValue} from '@angular/cdk/coercion';
 import {DataSource} from '@angular/cdk/table';
-import {MatPaginator, PageEvent} from '@angular/material/paginator';
+import {MatPaginator} from '@angular/material/paginator';
 import {MatSort, Sort} from '@angular/material/sort';
 import {
   BehaviorSubject,
@@ -27,16 +27,32 @@ import {map} from 'rxjs/operators';
  */
 const MAX_SAFE_INTEGER = 9007199254740991;
 
-interface Paginator {
-  page: Subject<PageEvent>;
+/**
+ * Interface that matches the required API parts for the MatPaginator's PageEvent.
+ * Decoupled so that users can depend on either the legacy or MDC-based paginator.
+ */
+export interface MatTableDataSourcePageEvent {
+  pageIndex: number;
+  pageSize: number;
+  length: number;
+}
+
+/**
+ * Interface that matches the required API parts of the MatPaginator.
+ * Decoupled so that users can depend on either the legacy or MDC-based paginator.
+ */
+export interface MatTableDataSourcePaginator {
+  page: Subject<MatTableDataSourcePageEvent>;
   pageIndex: number;
   initialized: Observable<void>;
   pageSize: number;
   length: number;
 }
 
 /** Shared base class with MDC-based implementation. */
-export class _MatTableDataSource<T, P extends Paginator> extends DataSource<T> {
+export class _MatTableDataSource<T,
+    P extends MatTableDataSourcePaginator = MatTableDataSourcePaginator>
+    extends DataSource<T> {
   /** Stream that emits when a new data array is set on the data source. */
   private readonly _data: BehaviorSubject<T[]>;
 
@@ -240,12 +256,12 @@ export class _MatTableDataSource<T, P extends Paginator> extends DataSource<T> {
     const sortChange: Observable<Sort|null|void> = this._sort ?
         merge(this._sort.sortChange, this._sort.initialized) as Observable<Sort|void> :
         observableOf(null);
-    const pageChange: Observable<PageEvent|null|void> = this._paginator ?
+    const pageChange: Observable<MatTableDataSourcePageEvent|null|void> = this._paginator ?
         merge(
           this._paginator.page,
           this._internalPageChanges,
           this._paginator.initialized
-        ) as Observable<PageEvent|void> :
+        ) as Observable<MatTableDataSourcePageEvent|void> :
         observableOf(null);
     const dataStream = this._data;
     // Watch for base data or filter changes to provide a filtered set of data.

tools/public_api_guard/material/table.d.ts

@@ -1,4 +1,4 @@
-export declare class _MatTableDataSource<T, P extends Paginator> extends DataSource<T> {
+export declare class _MatTableDataSource<T, P extends MatTableDataSourcePaginator = MatTableDataSourcePaginator> extends DataSource<T> {
     _renderChangesSubscription: Subscription | null;
     get data(): T[];
     set data(data: T[]);
@@ -113,6 +113,20 @@ export declare class MatTable<T> extends CdkTable<T> {
 export declare class MatTableDataSource<T> extends _MatTableDataSource<T, MatPaginator> {
 }
 
+export interface MatTableDataSourcePageEvent {
+    length: number;
+    pageIndex: number;
+    pageSize: number;
+}
+
+export interface MatTableDataSourcePaginator {
+    initialized: Observable<void>;
+    length: number;
+    page: Subject<MatTableDataSourcePageEvent>;
+    pageIndex: number;
+    pageSize: number;
+}
+
 export declare class MatTableModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTableModule, never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatTableModule>;