Image

 

Here is the basic structure that defines a Table/Grid. Each option for the grid is defined on a separate line

row:5
col:4
width:0
align:left,right,center,left,right
col_data:3,4,5,6
col_data:13,14,15,62
col_data:23,24,52,36
col_data:31,14,53,64

band_color:#F7EEA6,#FFFFFF
header_color:#CDFF57
summary_row:Totals,10,20,30
summary_color:#C2F3FF

Here is the explanation for each option

row:5

col:4

You provide the number of rows and columns.

width:0

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

align:left,right,center,left,right

Similarly all the align options work for the columns you define respectively. If you want all columns to be left aligned then simply provide

align:left

If there are more columns than the number of align values then the last align value will be used for the remaining columns

col_data:3,4,5,6
col_data:13,14,15,62
col_data:23,24,52,36
col_data:31,14,53,64

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.

band_color:#F7EEA6,#FFFFFF

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

 

header_color:#CDFF57

This the color for the header, column titles

summary_row:Totals,10,20,30

This is the summary row for the table. You can use it to provide totals

summary_color:#C2F3FF

Color for the summary or total row

 

 

Related posts:

  1. Mockup Grid Component – Is this the most advanced table/grid in HTML5 ?
  2. How to build Tree Table mockup
  3. Multicolored and Icons to build Sticky notes

Posted in Video Demostration