Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 13, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/material-experimental/mdc-table/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
7 changes: 4 additions & 3 deletions src/material-experimental/mdc-table/table-data-source.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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> {}

28 changes: 22 additions & 6 deletions src/material/table/table-data-source.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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[]>;

Expand Down Expand Up @@ -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.
Expand Down
16 changes: 15 additions & 1 deletion tools/public_api_guard/material/table.d.ts
Original file line number Diff line number Diff line change
@@ -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[]);
Expand Down Expand Up @@ -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>;
Expand Down