feat(table): allow data input to be array, stream #9489

andrewseguin · 2018-01-20T00:44:16Z

Removes requirement of implementing/using a DataSource to use the table. Instead, users can directly provide a data array or stream of data arrays directly as the data source.

@willshowell Can you take a look, especially the revamped docs?

Closes #8227

willshowell

I'm excited for this! I think it'll reduce a lot of first-try friction.

willshowell · 2018-01-20T16:45:54Z

src/cdk/table/table.spec.ts

+      expectedRender.push(['a_4', 'b_4', 'c_4']);
+      stream.next(data);
+      dataInputFixture.detectChanges();
+      expectTableToMatchContent(dataInputTableElement, expectedRender);


Is there value in also testing the expected behavior around table.renderRows() with the stream input?

Particularly, I'm curious what the expected behavior is after

data.push({a: 'a_4', b: 'b_4', c: 'c_4'}); // Note: not advancing BehaviorSubject dataInputComponent.table.renderRows(); dataInputFixture.detectChanges();

Good suggestion, I do think there's value in making sure that the renderRows will work like this. I expect they'll be a subset of users who use a stream to provide some array but would like to still manipulate the array and not think about emitting again

willshowell · 2018-01-20T16:47:45Z

src/cdk/table/table.ts

- * a header row and data rows. Updates the rows when new data is provided by the data source.
+ * A data table that renders a header row and data rows. Uses the dataSource input to determine
+ * the data to be rendered. The data can be provided either as a data array, a stream that emits
+ * the data array to render, or a DataSource that provides a stream that emits the data array to


Consider replacing 'stream' with 'Observable' or 'Observable stream' here and throughout, for clarity. Though, 'stream' may be self explanatory given the dataSource property will show Observable<T[]> in the docs.

willshowell · 2018-01-20T16:48:54Z

src/cdk/table/table.ts

+   * Sets the table's source of data, which can be provided in three ways (in order of complexity):
+   *   - Simple data array (each object represents one table row)
+   *   - Stream that emits a data array each time the array changes
+   *   - `DataSource` object that implements the connect/disconnect interface.


Super nit: inconsistent periods

willshowell · 2018-01-20T17:04:44Z

src/lib/table/table.md

+input. The table will take the array and render a row for each object in the data array.
+
+```html
+<mat-table [data]=”myDataArray”>


dataSource here and above? Or was an alias added?

Yeah, it should be dataSource

willshowell · 2018-01-20T17:06:20Z

src/lib/table/table.md

+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()` function. 
+
+See the section "Alternative ways to provide data" for more approaches to providing data to the 


Is it possible to add a link so the toc will pick it up?

I think they'll be a link we can use but not sure if we've done that yet in our docs. We should make sure that's supported or easy to do

The TOC will link to section headers, but any links in the content have to be manually added.

I would also rephrase this paragraph to something like

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 is recommended. See xxx below for more information.

willshowell · 2018-01-20T17:08:03Z

src/lib/table/table.md

+
+Also, another approach to providing data is by implementing a `DataSource`. This is simply
+an interface that has two functions: `connect` and `disconnect`. After passing a DataSource to the
+table, the table will call `connect()` to receive a stream that emits the data array that should be


Nit: consistent use of parenthesis for methods

willshowell · 2018-01-20T20:39:03Z

src/lib/table/table.md

+include/exclude columns dynamically.  
+
+### Alternative ways to provide data
+


Consider adding a little blurb to refresh the reader of what the original option is

Alternative ways to provide data

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. (or something like that)

Observable stream of data arrays

...

DataSource

...

willshowell · 2018-01-20T20:46:43Z

src/lib/table/table.md

+to clean up any subscriptions that may have been registered during the `connect` process.
+
+The benefit to creating a `DataSource` class is that it can decouple rendering logic from your
+component and keep it encapsulated in a separate class (e.g. sorting, filtering, pagination, e.g.).


It might be helpful to eventually have an example for each of these that is just like table-basic, but using the alternative approach.

+1 I think this would be useful to demonstrate the differences, I'll make an issue following this PR getting merged

andrewseguin · 2018-01-20T22:17:40Z

I'm excited as well, I think this will help make things a lot easier and reduce the learning curve of the table. Next for me is to add some kind of mat-simple-column (like in the demos) so the learning curve of the templates are reduced too

jelbourn · 2018-01-25T20:23:28Z

src/cdk/table/table.ts

@@ -153,17 +157,32 @@ export class CdkTable<T> implements CollectionViewer, OnInit, AfterContentChecke
  private _trackByFn: TrackByFunction<T>;

  /**
-   * Provides a stream containing the latest data array to render. Influenced by the table's
-   * stream of view window (what rows are currently on screen).
+   * Sets the table's source of data, which can be provided in three ways (in order of complexity):


Omit "Sets", since this is a property, not a method

jelbourn · 2018-01-25T20:24:19Z

src/cdk/table/table.ts

+   *
+   * If a data array is provided, the table must be notified when the array's objects are
+   * added, removed, or moved. This can be done by calling the `renderRows()` function which will
+   * render the diff since the last table render.


What about when the array reference changes?

jelbourn · 2018-01-25T20:25:16Z

src/cdk/table/table.ts

+   * render the diff since the last table render.
+   *
+   * When providing an Observable stream, the table will trigger an update automatically when the
+   * stream emits a new array of data.


Omit "a new array of data"?

jelbourn · 2018-01-25T20:26:50Z

src/cdk/table/table.ts

+   * directly, you will need to call this function whenever data in the provided array is
+   * added/removed/moved in-place.
+   */
+  renderRows() {


What's your thinking on renderRows vs. refresh or render?

No strong opinion really, I'm open to any of those. Maybe refresh sounds more approachable for users to call?

jelbourn · 2018-01-25T20:27:12Z

src/cdk/table/table.ts

+   * Checks for differences in the data since the last diff to perform only the necessary
+   * changes (add/remove/move rows).
+   *
+   * If the table's data source is a DataSource or Observable, this will be invoked each time the


"invoked automatically"

jelbourn · 2018-01-25T20:38:35Z

src/lib/table/table.md

+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()` function. 
+
+See the section "Alternative ways to provide data" for more approaches to providing data to the 


The TOC will link to section headers, but any links in the content have to be manually added.

I would also rephrase this paragraph to something like

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 is recommended. See xxx below for more information.

jelbourn · 2018-01-25T20:44:40Z

src/lib/table/table.md


-Start by writing your table's column definitions. Each column definition should be given a unique 
-name and contain the content for its header and row cells.
+#### 2. Define the table's columns


Would it make sense to say "column templates" (and "row templates" below)? Having "Define the table's rows" feels weird since the data drives the rows, you're just specifying the bindings.

jelbourn · 2018-01-25T20:45:41Z

src/lib/table/table.md

+This means that by changing your column list provided to the rows, you can easily re-order and
+include/exclude columns dynamically.  
+
+### Alternative ways to provide data


I would say "Advanced data sources"

jelbourn · 2018-01-25T20:51:33Z

src/lib/table/table.md

+
+#### DataSource
+
+Also, another approach to providing data is by implementing a `DataSource`. This is simply


I would change this first sentence to something like

For most real-world applications, providing the table a `DataSource` instance will be the best way to manage data.

It's also a base class, not an interface. I would put the "Why use a data source" bits before the "what is it" bits; we should say something like "The DataSource is meant to serve a place to encapsulate any sorting, filtering, pagination, and data retrieval logic specific to the application."

jelbourn · 2018-01-25T20:53:34Z

src/lib/table/table.md

+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


I still want to rename this to ClientArrayDataSource (or ClientDataSource or ArrayDataSource or even SimpleDataSource)

My problem with the current name is that it implies that it is the way to provide data for a <mat-table>, wich may lead people to think that the table doesn't support server side sorting/pagination/filtering, or even just other kinds of filtering than search.

Sure, I'm open to renaming. We should brainstorm offline to figure out the best name

andrewseguin · 2018-01-30T18:30:27Z

Ready for another round of review

jelbourn

Some comments still seem unresolved

andrewseguin · 2018-01-30T20:43:56Z

Alright, mostly sure now that it's good. Had an odd time merging conflicts

jelbourn

LGTM

* feat(table): allow data input to be array, stream * comments * fix connect function * fix connect function v2 * fix demo imports

angular-automatic-lock-bot · 2019-09-08T18:02:58Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

andrewseguin added P2 The issue is important to a large percentage of users, with a workaround pr: needs review labels Jan 20, 2018

andrewseguin requested a review from jelbourn January 20, 2018 00:44

andrewseguin requested a review from amcdnl as a code owner January 20, 2018 00:44

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jan 20, 2018

andrewseguin force-pushed the table-data-array-input branch from b1727c3 to 7c12036 Compare January 20, 2018 05:16

willshowell reviewed Jan 20, 2018

View reviewed changes

This was referenced Jan 23, 2018

docs(table): updated docs for the table #8770

Merged

Add detailed documentation for using DataSource with MatTable #8227

Closed

jelbourn reviewed Jan 25, 2018

View reviewed changes

andrewseguin force-pushed the table-data-array-input branch 10 times, most recently from 179b9e3 to 018735f Compare January 30, 2018 18:28

jelbourn reviewed Jan 30, 2018

View reviewed changes

jelbourn added the target: minor This PR is targeted for the next minor release label Jan 30, 2018

jelbourn approved these changes Jan 30, 2018

View reviewed changes

jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Jan 30, 2018

feat(table): allow data input to be array, stream

3007236

andrewseguin added 3 commits January 31, 2018 10:25

comments

407dff6

fix connect function

9b03212

fix connect function v2

36f6aff

andrewseguin force-pushed the table-data-array-input branch from 701d6b7 to 36f6aff Compare January 31, 2018 19:20

fix demo imports

87da75b

tinayuangao merged commit 085d805 into angular:master Feb 1, 2018

willshowell mentioned this pull request Feb 6, 2018

Docs bug: How to add rows to table #9274

Closed

andrewseguin deleted the table-data-array-input branch April 17, 2018 17:23

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(table): allow data input to be array, stream #9489

feat(table): allow data input to be array, stream #9489

andrewseguin commented Jan 20, 2018 •

edited

Loading

willshowell left a comment

willshowell Jan 20, 2018

andrewseguin Jan 20, 2018

willshowell Jan 20, 2018

willshowell Jan 20, 2018

willshowell Jan 20, 2018

jelbourn Jan 26, 2018

willshowell Jan 20, 2018

andrewseguin Jan 20, 2018

jelbourn Jan 25, 2018

willshowell Jan 20, 2018

willshowell Jan 20, 2018

willshowell Jan 20, 2018

andrewseguin Jan 20, 2018

andrewseguin commented Jan 20, 2018

jelbourn Jan 25, 2018

jelbourn Jan 25, 2018

jelbourn Jan 25, 2018

jelbourn Jan 25, 2018

andrewseguin Jan 26, 2018

jelbourn Jan 25, 2018

jelbourn Jan 25, 2018

jelbourn Jan 25, 2018

jelbourn Jan 25, 2018

jelbourn Jan 25, 2018

jelbourn Jan 25, 2018

andrewseguin Jan 26, 2018

andrewseguin commented Jan 30, 2018

jelbourn left a comment

andrewseguin commented Jan 30, 2018

jelbourn left a comment

angular-automatic-lock-bot bot commented Sep 8, 2019

		include/exclude columns dynamically.

		### Alternative ways to provide data


		#### DataSource

		Also, another approach to providing data is by implementing a `DataSource`. This is simply

feat(table): allow data input to be array, stream #9489

feat(table): allow data input to be array, stream #9489

Conversation

andrewseguin commented Jan 20, 2018 • edited Loading

willshowell left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Alternative ways to provide data

Observable stream of data arrays

DataSource

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewseguin commented Jan 20, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewseguin commented Jan 30, 2018

jelbourn left a comment

Choose a reason for hiding this comment

andrewseguin commented Jan 30, 2018

jelbourn left a comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Sep 8, 2019

andrewseguin commented Jan 20, 2018 •

edited

Loading