Skip to content

Commit

Permalink
docs(material/table): additional details on table data sources (#21921)
Browse files Browse the repository at this point in the history
Provides additional documentation and clarification on extending the base DataSource class with custom data sources either by extending or implementing.

Fixes #21887

* docs(material/table) removing backticks around "extending"

(cherry picked from commit 5c57c86)
  • Loading branch information
s4m0r4m4 authored and mmalerba committed Feb 16, 2021
1 parent 0bfbc9c commit 47ecf53
Showing 1 changed file with 14 additions and 5 deletions.
19 changes: 14 additions & 5 deletions src/material/table/table.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,13 +107,22 @@ automatically trigger an update to the rows each time a new data array is emitte
#### 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,
manage data. The DataSource is meant to serve as 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
right time to clean up any subscriptions that may have been registered during the connect process.
A DataSource is simply a class that has at a minimum the following methods: `connect` and
`disconnect`. The `connect` method will be called by the table to provide an Observable 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 in the
`connect` method.

Although Angular Material provides a ready-made table DataSource class, `MatTableDataSource`, you may
want to create your own custom DataSource class for more complex use cases. This can be done by
extending the abstract DataSource class with a custom DataSource class that then implements the
`connect` and `disconnect` methods. For use cases where the custom DataSource must also inherit
functionality by extending a different base class, the DataSource base class can be
implemented instead (`MyCustomDataSource extends SomeOtherBaseClass implements DataSource`) to
respect Typescript's restriction to only implement one base class.

### Features

Expand Down

0 comments on commit 47ecf53

Please sign in to comment.