Skip to content
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

refactor(table): rename MatTableDataSource to ClientArrayTableDataSource #15432

Closed
Closed
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
11 changes: 11 additions & 0 deletions src/lib/schematics/ng-update/data/class-names.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,5 +27,16 @@ export const classNames: VersionChanges<ClassNameUpgradeData> = {
}
]
},
],
[TargetVersion.V8]: [
{
pr: 'https://github.com/angular/material2/pull/15432',
changes: [
{
replace: 'MatTableDataSource',
replaceWith: 'ClientArrayTableDataSource'
}
]
}
]
};
9 changes: 9 additions & 0 deletions src/lib/table/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,17 @@
* found in the LICENSE file at https://angular.io/license
*/

import {ClientArrayTableDataSource} from './table-data-source';

export * from './table-module';
export * from './cell';
export * from './table';
export * from './row';
export * from './table-data-source';

/**
* @deprecated Use `ClientArrayTableDataSource` instead.
* @breaking-change 9.0.0
*/
// tslint:disable-next-line:variable-name
export const MatTableDataSource = ClientArrayTableDataSource;
2 changes: 1 addition & 1 deletion src/lib/table/table-data-source.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const MAX_SAFE_INTEGER = 9007199254740991;
* properties are accessed. Also allows for filter customization by overriding filterTermAccessor,
* which defines how row data is converted to a string for filter matching.
*/
export class MatTableDataSource<T> extends DataSource<T> {
export class ClientArrayTableDataSource<T> extends DataSource<T> {
/** Stream that emits when a new data array is set on the data source. */
private readonly _data: BehaviorSubject<T[]>;

Expand Down
148 changes: 75 additions & 73 deletions src/lib/table/table.md

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions src/lib/table/table.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {MatPaginator, MatPaginatorModule} from '../paginator/index';
import {MatSort, MatSortHeader, MatSortModule} from '../sort/index';
import {MatTableModule} from './index';
import {MatTable} from './table';
import {MatTableDataSource} from './table-data-source';
import {ClientArrayTableDataSource} from './table-data-source';


describe('MatTable', () => {
Expand Down Expand Up @@ -99,7 +99,7 @@ describe('MatTable', () => {
]);
});

it('should render with MatTableDataSource and sort', () => {
it('should render with ClientArrayTableDataSource and sort', () => {
let fixture = TestBed.createComponent(MatTableWithSortApp);
fixture.detectChanges();

Expand All @@ -113,7 +113,7 @@ describe('MatTable', () => {
]);
});

it('should render with MatTableDataSource and pagination', () => {
it('should render with ClientArrayTableDataSource and pagination', () => {
let fixture = TestBed.createComponent(MatTableWithPaginatorApp);
fixture.detectChanges();

Expand Down Expand Up @@ -145,10 +145,10 @@ describe('MatTable', () => {
}).not.toThrow();
}));

describe('with MatTableDataSource and sort/pagination/filter', () => {
describe('with ClientArrayTableDataSource and sort/pagination/filter', () => {
let tableElement: HTMLElement;
let fixture: ComponentFixture<ArrayDataSourceMatTableApp>;
let dataSource: MatTableDataSource<TestData>;
let dataSource: ClientArrayTableDataSource<TestData>;
let component: ArrayDataSourceMatTableApp;

beforeEach(fakeAsync(() => {
Expand Down Expand Up @@ -679,7 +679,7 @@ class MatTableWithWhenRowApp {
})
class ArrayDataSourceMatTableApp implements AfterViewInit {
underlyingDataSource = new FakeDataSource();
dataSource = new MatTableDataSource<TestData>();
dataSource = new ClientArrayTableDataSource<TestData>();
columnsToRender = ['column_a', 'column_b', 'column_c'];

@ViewChild(MatTable, {static: true}) table: MatTable<TestData>;
Expand Down Expand Up @@ -732,7 +732,7 @@ class ArrayDataSourceMatTableApp implements AfterViewInit {
})
class MatTableWithSortApp implements OnInit {
underlyingDataSource = new FakeDataSource();
dataSource = new MatTableDataSource<TestData>();
dataSource = new ClientArrayTableDataSource<TestData>();
columnsToRender = ['column_a', 'column_b', 'column_c'];

@ViewChild(MatTable, {static: true}) table: MatTable<TestData>;
Expand Down Expand Up @@ -783,7 +783,7 @@ class MatTableWithSortApp implements OnInit {
})
class MatTableWithPaginatorApp implements OnInit {
underlyingDataSource = new FakeDataSource();
dataSource = new MatTableDataSource<TestData>();
dataSource = new ClientArrayTableDataSource<TestData>();
columnsToRender = ['column_a', 'column_b', 'column_c'];

@ViewChild(MatTable, {static: true}) table: MatTable<TestData>;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component} from '@angular/core';
import {MatTableDataSource} from '@angular/material';
import {ClientArrayTableDataSource} from '@angular/material';

export interface PeriodicElement {
name: string;
Expand Down Expand Up @@ -31,7 +31,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
})
export class TableFilteringExample {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
dataSource = new ClientArrayTableDataSource(ELEMENT_DATA);

applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import {MatPaginator, MatSort, ClientArrayTableDataSource} from '@angular/material';

export interface UserData {
id: string;
Expand Down Expand Up @@ -28,7 +28,7 @@ const NAMES: string[] = [
})
export class TableOverviewExample implements OnInit {
displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
dataSource: MatTableDataSource<UserData>;
dataSource: ClientArrayTableDataSource<UserData>;

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;
Expand All @@ -38,7 +38,7 @@ export class TableOverviewExample implements OnInit {
const users = Array.from({length: 100}, (_, k) => createNewUser(k + 1));

// Assign the data to the data source for the table to render
this.dataSource = new MatTableDataSource(users);
this.dataSource = new ClientArrayTableDataSource(users);
}

ngOnInit() {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';
import {MatPaginator, ClientArrayTableDataSource} from '@angular/material';

/**
* @title Table with pagination
Expand All @@ -11,7 +11,7 @@ import {MatPaginator, MatTableDataSource} from '@angular/material';
})
export class TablePaginationExample implements OnInit {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
dataSource = new ClientArrayTableDataSource<PeriodicElement>(ELEMENT_DATA);

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {SelectionModel} from '@angular/cdk/collections';
import {Component} from '@angular/core';
import {MatTableDataSource} from '@angular/material';
import {ClientArrayTableDataSource} from '@angular/material';

export interface PeriodicElement {
name: string;
Expand Down Expand Up @@ -32,7 +32,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
})
export class TableSelectionExample {
displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
dataSource = new ClientArrayTableDataSource<PeriodicElement>(ELEMENT_DATA);
selection = new SelectionModel<PeriodicElement>(true, []);

/** Whether the number of selected elements matches the total number of rows. */
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
MatSort,
MatSortHeader,
MatTable,
MatTableDataSource
ClientArrayTableDataSource
} from '@angular/material';

export interface PeriodicElement {
Expand Down Expand Up @@ -38,7 +38,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
})
export class TableSimpleColumnExample implements OnInit {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
dataSource = new ClientArrayTableDataSource<PeriodicElement>(ELEMENT_DATA);
getWeight = (data: PeriodicElement) => '~' + data.weight;

@ViewChild('sort', {static: true}) sort: MatSort;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Component, OnInit, ViewChild} from '@angular/core';
import {MatSort, MatTableDataSource} from '@angular/material';
import {MatSort, ClientArrayTableDataSource} from '@angular/material';

export interface PeriodicElement {
name: string;
Expand Down Expand Up @@ -31,7 +31,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
})
export class TableSortingExample implements OnInit {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
dataSource = new ClientArrayTableDataSource(ELEMENT_DATA);

@ViewChild(MatSort, {static: true}) sort: MatSort;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
MatRowDef,
MatSort,
MatTable,
MatTableDataSource
ClientArrayTableDataSource
} from '@angular/material';

export interface PeriodicElement {
Expand Down Expand Up @@ -47,7 +47,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
})
export class TableWrappedExample implements OnInit {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
dataSource = new ClientArrayTableDataSource<PeriodicElement>(ELEMENT_DATA);

@ViewChild('sort', {static: true}) sort: MatSort;

Expand Down
40 changes: 21 additions & 19 deletions tools/public_api_guard/lib/table.d.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,23 @@
export declare class ClientArrayTableDataSource<T> extends DataSource<T> {
_renderChangesSubscription: Subscription;
data: T[];
filter: string;
filterPredicate: ((data: T, filter: string) => boolean);
filteredData: T[];
paginator: MatPaginator | null;
sort: MatSort | null;
sortData: ((data: T[], sort: MatSort) => T[]);
sortingDataAccessor: ((data: T, sortHeaderId: string) => string | number);
constructor(initialData?: T[]);
_filterData(data: T[]): T[];
_orderData(data: T[]): T[];
_pageData(data: T[]): T[];
_updateChangeSubscription(): void;
_updatePaginator(filteredDataLength: number): void;
connect(): BehaviorSubject<T[]>;
disconnect(): void;
}

export declare class MatCell extends CdkCell {
constructor(columnDef: CdkColumnDef, elementRef: ElementRef<HTMLElement>);
}
Expand Down Expand Up @@ -47,25 +67,7 @@ export declare class MatTable<T> extends CdkTable<T> {
protected stickyCssClass: string;
}

export declare class MatTableDataSource<T> extends DataSource<T> {
_renderChangesSubscription: Subscription;
data: T[];
filter: string;
filterPredicate: ((data: T, filter: string) => boolean);
filteredData: T[];
paginator: MatPaginator | null;
sort: MatSort | null;
sortData: ((data: T[], sort: MatSort) => T[]);
sortingDataAccessor: ((data: T, sortHeaderId: string) => string | number);
constructor(initialData?: T[]);
_filterData(data: T[]): T[];
_orderData(data: T[]): T[];
_pageData(data: T[]): T[];
_updateChangeSubscription(): void;
_updatePaginator(filteredDataLength: number): void;
connect(): BehaviorSubject<T[]>;
disconnect(): void;
}
export declare const MatTableDataSource: typeof ClientArrayTableDataSource;

export declare class MatTableModule {
}