GridReuse

Table Re-Use

Reusing of a table refers to changing the model that the table represents.

Looking at the following column factory the model is quite clear:

columnFactory()
  .table(
    { prop: 'id' },
    { prop: 'name' },
    { prop: 'email' },
  )
  .build();

For this column definition set, the table expects a similar collection of objects returned from the data source.

The datasource is dynamic, returning values per demand.

createDS<Person>()
  .onTrigger( (event) => [ { id: 1, name: 'John', email: 'N/A' }] )
  .create();

Now, if we want to apply a different model on the table? We will have to change the column definition set as well at the datasource.

In the following example the table can toggle between showing a Person model or a Seller model.

When we toggle, notice that we swap the entire datasource. We could have implemented the logic inside the onTrigger handler and keep a single datasource but it will not work.

When we swap a datasource the table will cleanup the context and all column related data and rebuilt it preventing ghost context living in the cache.

When a table gets destroyed ( ngOnDestroy ) the datasource attached to it (if attached) is disconnected and automatically disposed. This has 1 exception, the keepAlive configuration was enabled on the datasource.
When you swap the datasource it will also cause the previous datasource to disconnect, if keepAlive is false it will also dispose itself.

Shlomi Assaf © 2020. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0.

Version 5.0.0 using angular 14.2.4 and cdk 14.2.3 (hash: 25f523f)