Skip to main content
If you have a data member in your class, you can decorate it with @Show and it will be visible in the playground! For example, check out the code for Average Stock Price, and you will see that we have decorated averagePrice with @Show. That’s why it shows up here:
You can decorate as many data members you want, event private ones!

​
Customizing how the data is presented

Say if you have a class which you are using to model a database. It has a member called data, which you’d want to decorate with @Show. 
type Order = {
	id: string;
	thing: string;
	status: string;
	createdAt: number;
};

class OrdersTable {
	@Show
	private data: Order[] = [];
}
This simply displays that array in playground. Wouldn’t it be nice if data could actually be rendered as a table?

​
Table View

Well, yes! That’s why we have @Table, which you can decorate your class with. Simply provide the “columns” you want to show and you get a nice looking view! For example:
  • Code
  • View

@Table(['id', 'thing', 'status', 'createdAt'])
class OrdersTable {
  @Show
  private data: Order[] = [];
}
This view takes the liberty of setting the icon as Postgres. You can change that to anything.
With table view, only one member should be decorated with @Show and it should be an array of records.

​
Collection View

Similarly, we have @Collection to show objects. For example:
  • Code
  • View

@Collection
class OrdersTable {
  @Show
  private data: Order[] = [];
}
With collection view, only one member should be decorated with @Show and it should be an array of records.

​
KeyValue View

And lastly, you can use @KeyValue to render a Map. For example:
  • Code
  • View

@KeyValue
class Redis<T> {
  @Show
  data: Map<string, T> = new Map();
}
With keyvalue view, only one member should be decorated with @Show and it should be a Map.

​
Where did all the methods go?

When you assign a view to a class, the runtime collapses its corresponding node. All the methods are hidden, and all the edges going to those methods now go to the parent class node. Giving the view a clean look. Mind you, simply decorating a member with @Show won’t cause this. You have to assign a view to the class.