From 1deb759c5950b8d952a2d0f31cdc45299fdad185 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 10 Mar 2019 20:03:30 +0100 Subject: [PATCH] refactor(table): rename MatTableDataSource to ClientArrayTableDataSource Renames the `MatTableDataSource` to `ClientArrayTableDataSource` to make it a bit clearer what it's supposed to be used for. Fixes #14378. --- .../schematics/ng-update/data/class-names.ts | 11 ++ src/lib/table/public-api.ts | 9 ++ src/lib/table/table-data-source.ts | 2 +- src/lib/table/table.md | 148 +++++++++--------- src/lib/table/table.spec.ts | 16 +- .../table-filtering-example.ts | 4 +- .../table-overview/table-overview-example.ts | 6 +- .../table-pagination-example.ts | 4 +- .../table-selection-example.ts | 4 +- .../table-simple-column-example.ts | 4 +- .../table-sorting/table-sorting-example.ts | 4 +- .../table-wrapped/table-wrapped-example.ts | 4 +- tools/public_api_guard/lib/table.d.ts | 40 ++--- 13 files changed, 140 insertions(+), 116 deletions(-) diff --git a/src/lib/schematics/ng-update/data/class-names.ts b/src/lib/schematics/ng-update/data/class-names.ts index 0292067fa8ac..6d0e891fab0f 100644 --- a/src/lib/schematics/ng-update/data/class-names.ts +++ b/src/lib/schematics/ng-update/data/class-names.ts @@ -27,5 +27,16 @@ export const classNames: VersionChanges = { } ] }, + ], + [TargetVersion.V8]: [ + { + pr: 'https://github.com/angular/material2/pull/15432', + changes: [ + { + replace: 'MatTableDataSource', + replaceWith: 'ClientArrayTableDataSource' + } + ] + } ] }; diff --git a/src/lib/table/public-api.ts b/src/lib/table/public-api.ts index 4f19885ff1db..1bf8fcd932ed 100644 --- a/src/lib/table/public-api.ts +++ b/src/lib/table/public-api.ts @@ -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; diff --git a/src/lib/table/table-data-source.ts b/src/lib/table/table-data-source.ts index a0059c109bcc..757fff705297 100644 --- a/src/lib/table/table-data-source.ts +++ b/src/lib/table/table-data-source.ts @@ -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 extends DataSource { +export class ClientArrayTableDataSource extends DataSource { /** Stream that emits when a new data array is set on the data source. */ private readonly _data: BehaviorSubject; diff --git a/src/lib/table/table.md b/src/lib/table/table.md index 6dfba8c2d23c..0f2f5c60eda2 100644 --- a/src/lib/table/table.md +++ b/src/lib/table/table.md @@ -1,10 +1,10 @@ -The `mat-table` provides a Material Design styled data-table that can be used to display rows of -data. +The `mat-table` provides a Material Design styled data-table that can be used to display rows of +data. -This table builds on the foundation of the CDK data-table and uses a similar interface for its -data input and template, except that its element and attribute selectors will be prefixed +This table builds on the foundation of the CDK data-table and uses a similar interface for its +data input and template, except that its element and attribute selectors will be prefixed with `mat-` instead of `cdk-`. For more information on the interface and a detailed look at how -the table is implemented, see the +the table is implemented, see the [guide covering the CDK data-table](https://material.angular.io/guide/cdk-table). ### Getting Started @@ -14,8 +14,8 @@ the table is implemented, see the #### 1. Write your mat-table and provide data Begin by adding the `` component to your template and passing in data. - -The simplest way to provide data to the table is by passing a data array to the table's `dataSource` + +The simplest way to provide data to the table is by passing a data array to the table's `dataSource` input. The table will take the array and render a row for each object in the data array. ```html @@ -25,8 +25,8 @@ input. The table will take the array and render a row for each object in the dat ``` Since the table optimizes for performance, it will not automatically check for changes to the data -array. Instead, when objects are added, removed, or moved on the data array, you can trigger an -update to the table's rendered rows by calling its `renderRows()` method. +array. Instead, when objects are added, removed, or moved on the data array, you can trigger an +update to the table's rendered rows by calling its `renderRows()` method. While an array is the _simplest_ way to bind data into the data source, it is also the most limited. For more complex applications, using a `DataSource` instance @@ -34,12 +34,12 @@ is recommended. See the section "Advanced data sources" below for more informati #### 2. Define the column templates -Next, write your table's column templates. +Next, write your table's column templates. -Each column definition should be given a unique name and contain the content for its header and row +Each column definition should be given a unique name and contain the content for its header and row cells. -Here's a simple column definition with the name `'userName'`. The header cell contains the text +Here's a simple column definition with the name `'userName'`. The header cell contains the text "Name" and each row cell will render the `name` property of each row's data. ```html @@ -52,10 +52,10 @@ Here's a simple column definition with the name `'userName'`. The header cell co #### 3. Define the row templates Finally, once you have defined your columns, you need to tell the table which columns will be -rendered in the header and data rows. +rendered in the header and data rows. To start, create a variable in your component that contains the list of the columns you want to -render. +render. ```ts columnsToDisplay = ['userName', 'age']; @@ -78,30 +78,30 @@ include/exclude columns dynamically. ### Advanced data sources -The simplest way to provide data to your table is by passing a data array. More complex use-cases -may benefit from a more flexible approach involving an Observable stream or by encapsulating your +The simplest way to provide data to your table is by passing a data array. More complex use-cases +may benefit from a more flexible approach involving an Observable stream or by encapsulating your data source logic into a `DataSource` class. #### Observable stream of data arrays An alternative approach to providing data to the table is by passing an Observable stream that emits -the data array to be rendered each time it is changed. The table will listen to this stream and +the data array to be rendered each time it is changed. The table will listen to this stream and automatically trigger an update to the rows each time a new data array is emitted. #### DataSource -For most real-world applications, providing the table a DataSource instance will be the best way to -manage data. The DataSource is meant to serve a place to encapsulate any sorting, filtering, +For most real-world applications, providing the table a DataSource instance will be the best way to +manage data. The DataSource is meant to serve a place to encapsulate any sorting, filtering, pagination, and data retrieval logic specific to the application. -A DataSource is simply a base class that has two functions: `connect` and `disconnect`. The -`connect` function will be called by the table to receive a stream that emits the data array that -should be rendered. The table will call `disconnect` when the table is destroyed, which may be the +A DataSource is simply a base class that has two functions: `connect` and `disconnect`. The +`connect` function will be called by the table to receive a stream that emits the data array that +should be rendered. The table will call `disconnect` when the table is destroyed, which may be the right time to clean up any subscriptions that may have been registered during the connect process. ### Features -The `MatTable` is focused on a single responsibility: efficiently render rows of data in a +The `MatTable` is focused on a single responsibility: efficiently render rows of data in a performant and accessible way. You'll notice that the table itself doesn't come out of the box with a lot of features, but expects @@ -111,34 +111,36 @@ For example, you can add sorting and pagination to the table by using MatSort an mutating the data provided to the table according to their outputs. To simplify the use case of having a table that can sort, paginate, and filter an array of data, -the Angular Material library comes with a `MatTableDataSource` that has already implemented +the Angular Material library comes with a `ClientArrayTableDataSource` that has already implemented the logic of determining what rows should be rendered according to the current table state. To add these feature to the table, check out their respective sections below. #### Pagination -To paginate the table's data, add a `` after the table. +To paginate the table's data, add a `` after the table. -If you are using the `MatTableDataSource` for your table's data source, simply provide the -`MatPaginator` to your data source. It will automatically listen for page changes made by the user +If you are using the `ClientArrayTableDataSource` for your table's data source, simply provide the +`MatPaginator` to your data source. It will automatically listen for page changes made by the user and send the right paged data to the table. Otherwise if you are implementing the logic to paginate your data, you will want to listen to the paginator's `(page)` output and pass the right slice of data to your table. -For more information on using and configuring the ``, check out the +For more information on using and configuring the ``, check out the [mat-paginator docs](https://material.angular.io/components/paginator/overview). -The `MatPaginator` is one provided solution to paginating your table's data, but it is not the only -option. In fact, the table can work with any custom pagination UI or strategy since the `MatTable` +The `MatPaginator` is one provided solution to paginating your table's data, but it is not the only +option. In fact, the table can work with any custom pagination UI or strategy since the `MatTable` and its interface is not tied to any one specific implementation. #### Sorting -To add sorting behavior to the table, add the `matSort` directive to the table and add -`mat-sort-header` to each column header cell that should trigger sorting. Note that you have to import `MatSortModule` in order to initialize the `matSort` directive (see [API docs](https://material.angular.io/components/sort/api)). +To add sorting behavior to the table, add the `matSort` directive to the table and add +`mat-sort-header` to each column header cell that should trigger sorting. Note that you have to +import `MatSortModule` in order to initialize the `matSort` directive +(see [API docs](https://material.angular.io/components/sort/api)). ```html @@ -148,63 +150,63 @@ To add sorting behavior to the table, add the `matSort` directive to the table a ``` -If you are using the `MatTableDataSource` for your table's data source, provide the `MatSort` -directive to the data source and it will automatically listen for sorting changes and change the +If you are using the `ClientArrayTableDataSource` for your table's data source, provide the `MatSort` +directive to the data source and it will automatically listen for sorting changes and change the order of data rendered by the table. -By default, the `MatTableDataSource` sorts with the assumption that the sorted column's name -matches the data property name that the column displays. For example, the following column +By default, the `ClientArrayTableDataSource` sorts with the assumption that the sorted column's name +matches the data property name that the column displays. For example, the following column definition is named `position`, which matches the name of the property displayed in the row cell. -Note that if the data properties do not match the column names, or if a more complex data property -accessor is required, then a custom `sortingDataAccessor` function can be set to override the -default data accessor on the `MatTableDataSource`. +Note that if the data properties do not match the column names, or if a more complex data property +accessor is required, then a custom `sortingDataAccessor` function can be set to override the +default data accessor on the `ClientArrayTableDataSource`. -If you are not using the `MatTableDataSource`, but instead implementing custom logic to sort your -data, listen to the sort's `(matSortChange)` event and re-order your data according to the sort state. -If you are providing a data array directly to the table, don't forget to call `renderRows()` on the +If you are not using the `ClientArrayTableDataSource`, but instead implementing custom logic to sort your +data, listen to the sort's `(matSortChange)` event and re-order your data according to the sort state. +If you are providing a data array directly to the table, don't forget to call `renderRows()` on the table, since it will not automatically check the array for changes. -For more information on using and configuring the sorting behavior, check out the +For more information on using and configuring the sorting behavior, check out the [matSort docs](https://material.angular.io/components/sort/overview). -The `MatSort` is one provided solution to sorting your table's data, but it is not the only option. -In fact, the table can work with any custom pagination UI or strategy since the `MatTable` and +The `MatSort` is one provided solution to sorting your table's data, but it is not the only option. +In fact, the table can work with any custom pagination UI or strategy since the `MatTable` and its interface is not tied to any one specific implementation. #### Filtering -Angular Material does not provide a specific component to be used for filtering the `MatTable` +Angular Material does not provide a specific component to be used for filtering the `MatTable` since there is no single common approach to adding a filter UI to table data. -A general strategy is to add an input where users can type in a filter string and listen to this -input to change what data is offered from the data source to the table. +A general strategy is to add an input where users can type in a filter string and listen to this +input to change what data is offered from the data source to the table. -If you are using the `MatTableDataSource`, simply provide the filter string to the -`MatTableDataSource`. The data source will reduce each row data to a serialized form and will filter -out the row if it does not contain the filter string. By default, the row data reducing function +If you are using the `ClientArrayTableDataSource`, simply provide the filter string to the +`ClientArrayTableDataSource`. The data source will reduce each row data to a serialized form and will filter +out the row if it does not contain the filter string. By default, the row data reducing function will concatenate all the object values and convert them to lowercase. -For example, the data object `{id: 123, name: 'Mr. Smith', favoriteColor: 'blue'}` will be reduced -to `123mr. smithblue`. If your filter string was `blue` then it would be considered a match because +For example, the data object `{id: 123, name: 'Mr. Smith', favoriteColor: 'blue'}` will be reduced +to `123mr. smithblue`. If your filter string was `blue` then it would be considered a match because it is contained in the reduced string, and the row would be displayed in the table. -To override the default filtering behavior, a custom `filterPredicate` function can be set which +To override the default filtering behavior, a custom `filterPredicate` function can be set which takes a data object and filter string and returns true if the data object is considered a match. #### Selection -Right now there is no formal support for adding a selection UI to the table, but Angular Material -does offer the right components and pieces to set this up. The following steps are one solution but +Right now there is no formal support for adding a selection UI to the table, but Angular Material +does offer the right components and pieces to set this up. The following steps are one solution but it is not the only way to incorporate row selection in your table. ##### 1. Add a selection model -Get started by setting up a `SelectionModel` from `@angular/cdk/collections` that will maintain the +Get started by setting up a `SelectionModel` from `@angular/cdk/collections` that will maintain the selection state. ```js @@ -215,7 +217,7 @@ this.selection = new SelectionModel(allowMultiSelect, initialSelecti ##### 2. Define a selection column -Add a column definition for displaying the row checkboxes, including a master toggle checkbox for +Add a column definition for displaying the row checkboxes, including a master toggle checkbox for the header. The column name should be added to the list of displayed columns provided to the header and data row. @@ -238,7 +240,7 @@ header and data row. ##### 3. Add event handling logic -Implement the behavior in your component's logic to handle the header's master toggle and checking +Implement the behavior in your component's logic to handle the header's master toggle and checking if all rows are selected. ```js @@ -257,9 +259,9 @@ masterToggle() { } ``` -##### 4. Include overflow styling +##### 4. Include overflow styling -Finally, adjust the styling for the select column so that its overflow is not hidden. This allows +Finally, adjust the styling for the select column so that its overflow is not hidden. This allows the ripple effect to extend beyond the cell. ```css @@ -294,17 +296,17 @@ data rows. #### Sticky Rows and Columns -By using `position: sticky` styling, the table's rows and columns can be fixed so that they do not -leave the viewport even when scrolled. The table provides inputs that will automatically apply the +By using `position: sticky` styling, the table's rows and columns can be fixed so that they do not +leave the viewport even when scrolled. The table provides inputs that will automatically apply the correct CSS styling so that the rows and columns become sticky. -In order to fix the header row to the top of the scrolling viewport containing the table, you can -add a `sticky` input to the `matHeaderRowDef`. +In order to fix the header row to the top of the scrolling viewport containing the table, you can +add a `sticky` input to the `matHeaderRowDef`. Similarly, this can also be applied to the table's footer row. Note that if you are using the native -`
` and using Safari, then the footer will only stick if `sticky` is applied to all the +`
` and using Safari, then the footer will only stick if `sticky` is applied to all the rendered footer rows. @@ -318,22 +320,22 @@ This feature is supported by Chrome, Firefox, Safari, and Edge. It is not suppor it does fail gracefully so that the rows simply do not stick. Note that on Safari mobile when using the flex-based table, a cell stuck in more than one direction -will struggle to stay in the correct position as you scroll. For example, if a header row is stuck -to the top and the first column is stuck, then the top-left-most cell will appear jittery as you +will struggle to stay in the correct position as you scroll. For example, if a header row is stuck +to the top and the first column is stuck, then the top-left-most cell will appear jittery as you scroll. Also, sticky positioning in Edge will appear shaky for special cases. For example, if the scrolling -container has a complex box shadow and has sibling elements, the stuck cells will appear jittery. -There is currently an [open issue with Edge](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17514118/) +container has a complex box shadow and has sibling elements, the stuck cells will appear jittery. +There is currently an [open issue with Edge](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17514118/) to resolve this. ### Accessibility -Tables without text or labels should be given a meaningful label via `aria-label` or +Tables without text or labels should be given a meaningful label via `aria-label` or `aria-labelledby`. The `aria-readonly` defaults to `true` if it's not set. Table's default role is `grid`, and it can be changed to `treegrid` through `role` attribute. -`mat-table` does not manage any focus/keyboard interaction on its own. Users can add desired +`mat-table` does not manage any focus/keyboard interaction on its own. Users can add desired focus/keyboard interactions in their application. ### Tables with `display: flex` @@ -342,7 +344,7 @@ The `MatTable` does not require that you use a native HTML table. Instead, you c alternative approach that uses `display: flex` for the table's styles. This alternative approach replaces the native table element tags with the `MatTable` directive -selectors. For example, `
` becomes ``; ` becomes +selectors. For example, `
` becomes ``; ` becomes ``. The following shows a previous example using this alternative template: ```html diff --git a/src/lib/table/table.spec.ts b/src/lib/table/table.spec.ts index bac5eee59ae3..3a4a8e580c59 100644 --- a/src/lib/table/table.spec.ts +++ b/src/lib/table/table.spec.ts @@ -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', () => { @@ -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(); @@ -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(); @@ -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; - let dataSource: MatTableDataSource; + let dataSource: ClientArrayTableDataSource; let component: ArrayDataSourceMatTableApp; beforeEach(fakeAsync(() => { @@ -679,7 +679,7 @@ class MatTableWithWhenRowApp { }) class ArrayDataSourceMatTableApp implements AfterViewInit { underlyingDataSource = new FakeDataSource(); - dataSource = new MatTableDataSource(); + dataSource = new ClientArrayTableDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; @ViewChild(MatTable, {static: true}) table: MatTable; @@ -732,7 +732,7 @@ class ArrayDataSourceMatTableApp implements AfterViewInit { }) class MatTableWithSortApp implements OnInit { underlyingDataSource = new FakeDataSource(); - dataSource = new MatTableDataSource(); + dataSource = new ClientArrayTableDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; @ViewChild(MatTable, {static: true}) table: MatTable; @@ -783,7 +783,7 @@ class MatTableWithSortApp implements OnInit { }) class MatTableWithPaginatorApp implements OnInit { underlyingDataSource = new FakeDataSource(); - dataSource = new MatTableDataSource(); + dataSource = new ClientArrayTableDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; @ViewChild(MatTable, {static: true}) table: MatTable; diff --git a/src/material-examples/table-filtering/table-filtering-example.ts b/src/material-examples/table-filtering/table-filtering-example.ts index e1b572b59d99..c6fc32ccf921 100644 --- a/src/material-examples/table-filtering/table-filtering-example.ts +++ b/src/material-examples/table-filtering/table-filtering-example.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MatTableDataSource} from '@angular/material'; +import {ClientArrayTableDataSource} from '@angular/material'; export interface PeriodicElement { name: string; @@ -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(); diff --git a/src/material-examples/table-overview/table-overview-example.ts b/src/material-examples/table-overview/table-overview-example.ts index 6429eb1498aa..46fe3a2513ec 100644 --- a/src/material-examples/table-overview/table-overview-example.ts +++ b/src/material-examples/table-overview/table-overview-example.ts @@ -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; @@ -28,7 +28,7 @@ const NAMES: string[] = [ }) export class TableOverviewExample implements OnInit { displayedColumns: string[] = ['id', 'name', 'progress', 'color']; - dataSource: MatTableDataSource; + dataSource: ClientArrayTableDataSource; @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; @ViewChild(MatSort, {static: true}) sort: MatSort; @@ -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() { diff --git a/src/material-examples/table-pagination/table-pagination-example.ts b/src/material-examples/table-pagination/table-pagination-example.ts index 7827fb258a79..754c813bc28a 100644 --- a/src/material-examples/table-pagination/table-pagination-example.ts +++ b/src/material-examples/table-pagination/table-pagination-example.ts @@ -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 @@ -11,7 +11,7 @@ import {MatPaginator, MatTableDataSource} from '@angular/material'; }) export class TablePaginationExample implements OnInit { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); + dataSource = new ClientArrayTableDataSource(ELEMENT_DATA); @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; diff --git a/src/material-examples/table-selection/table-selection-example.ts b/src/material-examples/table-selection/table-selection-example.ts index 2b760109fa28..825b72584c70 100644 --- a/src/material-examples/table-selection/table-selection-example.ts +++ b/src/material-examples/table-selection/table-selection-example.ts @@ -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; @@ -32,7 +32,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ }) export class TableSelectionExample { displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); + dataSource = new ClientArrayTableDataSource(ELEMENT_DATA); selection = new SelectionModel(true, []); /** Whether the number of selected elements matches the total number of rows. */ diff --git a/src/material-examples/table-simple-column/table-simple-column-example.ts b/src/material-examples/table-simple-column/table-simple-column-example.ts index ddbdea733434..8590106b92c9 100644 --- a/src/material-examples/table-simple-column/table-simple-column-example.ts +++ b/src/material-examples/table-simple-column/table-simple-column-example.ts @@ -5,7 +5,7 @@ import { MatSort, MatSortHeader, MatTable, - MatTableDataSource + ClientArrayTableDataSource } from '@angular/material'; export interface PeriodicElement { @@ -38,7 +38,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ }) export class TableSimpleColumnExample implements OnInit { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); + dataSource = new ClientArrayTableDataSource(ELEMENT_DATA); getWeight = (data: PeriodicElement) => '~' + data.weight; @ViewChild('sort', {static: true}) sort: MatSort; diff --git a/src/material-examples/table-sorting/table-sorting-example.ts b/src/material-examples/table-sorting/table-sorting-example.ts index 304fee4dcdbb..f9f8758b1a80 100644 --- a/src/material-examples/table-sorting/table-sorting-example.ts +++ b/src/material-examples/table-sorting/table-sorting-example.ts @@ -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; @@ -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; diff --git a/src/material-examples/table-wrapped/table-wrapped-example.ts b/src/material-examples/table-wrapped/table-wrapped-example.ts index 53b86758d291..d8e61c6a8a10 100644 --- a/src/material-examples/table-wrapped/table-wrapped-example.ts +++ b/src/material-examples/table-wrapped/table-wrapped-example.ts @@ -14,7 +14,7 @@ import { MatRowDef, MatSort, MatTable, - MatTableDataSource + ClientArrayTableDataSource } from '@angular/material'; export interface PeriodicElement { @@ -47,7 +47,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ }) export class TableWrappedExample implements OnInit { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); + dataSource = new ClientArrayTableDataSource(ELEMENT_DATA); @ViewChild('sort', {static: true}) sort: MatSort; diff --git a/tools/public_api_guard/lib/table.d.ts b/tools/public_api_guard/lib/table.d.ts index c71ce3bf448a..63219eac27b1 100644 --- a/tools/public_api_guard/lib/table.d.ts +++ b/tools/public_api_guard/lib/table.d.ts @@ -1,3 +1,23 @@ +export declare class ClientArrayTableDataSource extends DataSource { + _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; + disconnect(): void; +} + export declare class MatCell extends CdkCell { constructor(columnDef: CdkColumnDef, elementRef: ElementRef); } @@ -47,25 +67,7 @@ export declare class MatTable extends CdkTable { protected stickyCssClass: string; } -export declare class MatTableDataSource extends DataSource { - _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; - disconnect(): void; -} +export declare const MatTableDataSource: typeof ClientArrayTableDataSource; export declare class MatTableModule { }