Here is the basic structure that defines a Table/Grid. Each option for the grid is defined on a separate line
Here is the explanation for each option
You provide the number of rows and columns.
The width:0 will set all columns to automatic width and evenly distribute the total table width among the columns
If you give just width:50 then all the columns will have width of 50 pixels
if you give width:50,100 then the first column will have 50 pixels, second will have 100 pixels and all the remaining columns will have 100 pixels
If you give width:50,100,75 then the first,second and third columns will have the respective widths and the remaining colums if any will use the last column width as default
Similarly all the align options work for the columns you define respectively. If you want all columns to be left aligned then simply provide
If there are more columns than the number of align values then the last align value will be used for the remaining columns
The data is defined in columns. So the first line col_data: contains data for the first column. The second line will contain data for the second column and so on.
If there are more columns defined and less number of lines containing col_data then those cells will be blank.
This is the alternating colors for the grid. You can provide more than two colors. An interesting side effect is you can define custom colors for each row by matching the number of colors in the band color
For e.g if you have 5 rows and you mentioned
band_color:red,blue,green,yellow,cyan (total 5 colors) then all your rows will be of different colors
This the color for the header, column titles
This is the summary row for the table. You can use it to provide totals
Color for the summary or total row
- Mockup Grid Component – Is this the most advanced table/grid in HTML5 ?
- How to build Tree Table mockup
- Multicolored and Icons to build Sticky notes