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: 

C#
var simpleTable = new Table { Id = "MySimpleTable", CssClass = "test-table-class", Design = GetEnumSetting(TableDesign.Striped), Rows = new List<TableRow> { new TableRow ("Color", "Blue"), new TableRow ("Size", "M") } }; @Render(simpleTable)

This is just a simple table, to learn more about the additional table features, follow the rest of guide.      

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) .

simpleTable.Header = new TableRow { "Meat" , "Proteins (g)" ,"Fats (g)", "Carbs (g)" };

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:

C#
simpleTable.Rows = new List<TableRow> { new TableRow ( new TableCell { Content = "CustomCell2", Rowspan = 2, Colspan = 2, CssClass = "u-brand-color-one--bg-lighten-20 u-color-light" } ) };

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: 

C#
simpleTable.Footer = new TableRow { "1", “2”, “3”, “4” };

A more complex example of how to use the Table component, could look like this: 

C#
var table = new Table { Id = "MyTable", Design = GetEnumSetting(TableDesign.Clean), CssClass = "test-table-class", Header = new TableRow { Cells = new List<TableCell> { new TableCell { Content = "Meat" }, new TableCell { Content = "Proteins (g)" }, new TableCell { Content = "Fats (g)" }, new TableCell { Content = "Carbs (g)" } } }, Rows = new List<TableRow> { new TableRow ("Chicken", "20,8", "8,8", "0,6"), new TableRow ("Pork", "19,4", "7,1", "0"), new TableRow ("Beef", "18,9", "12,4", "0"), new TableRow ( new TableCell { IsHeader = true, Content = "CustomCell", Colspan = 2 }, new TableCell { Content = "CustomCell2", Rowspan = 2, Colspan = 2, CssClass = "u-brand-color-one--bg-lighten-20 u-color-light" } ), new TableRow { IsHeaderRow = true, Cells = new List<TableCell> { new TableCell { Content = "string1" }, new TableCell { Content = "string2" } } } }, Footer = new TableRow { CssClass = "u-color-light-gray--bg", Cells = new List<TableCell> { new TableCell { Content = "1" }, new TableCell { Content = "2" }, new TableCell { Content = "3" }, new TableCell { Content = "4" } } } };