Data & Views

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:

​

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.

​

Collection View

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

• Code
• View

@Collection
class OrdersTable {
  @Show
  private data: Order[] = [];
}

​

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();
}

​

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.