How to use the table component
The purpose of the table component, it to create simple tables in a quick way. This feature could be handy if you have a component that needs to render a small info table. The reason we go into depth with the Table component, is that it is a bit more advanced than most of the other components.
The simple way to use the Table component is to define it and fill the “Rows” list, like the code does below:
This is just a simple table, to learn more about the additional table features, follow the rest of guide.
Adding a table header
The Table component has a “Header” property. The data type of the header is just a normal “TableRow”. To add a table header to the above example, we could simply set the property as the code does below. It should be placed just before the @Render(simpleTable) .
Adding special table cells
Instead of filling the row by defining a list of strings, like in the simple table example above, you can add TableCells. The advantage is that the cell has optional properties that can be set. Try to add rows using TableCells, see the code posted below:
Adding a table footer
This is just as easy as adding the table header and it works the same way. The table footer is of type TableRow as well:
Complex table example
A more complex example of how to use the Table component, could look like this: