bordercloud.visualization.DataTable

Definition

This table uses DataTables.net. You can adapt each column with the option colstyle. You can customize the style of column or print directly images and videos.

Chart options

Each option is separated by a '|' or '!' (for Mediawiki).

Name Default Description
width 100% width of table
height Chart height
class table table-striped table-bordered css class
cellspacing 0 cellspacing of table
colstyle This parameter can replace the pattern of columns. You can define the tag img and span and its style.

Examples for colstyle

Example data-sgvizler-chart-options column Result in html
Example 1 (example without options)
Example 2 cellspacing=3 ! colstyle=col1_img_display:block; col1_img_max-width:250px; col1_img_border-radius:50%; col1_img_margin:auto ;col1_img_opacity:0.5 1 Column 1 : <img url="data" style="display:block;max-width:300px;border-radius:50%;margin:auto; opacity:0.5"/>
Example 3 colstyle=col0_span_color:#F00; col0_span_font-weight: bold; col1_img_max-width:75px; col1_img_border-radius:50%; col1_img_display:block; col1_img_margin:auto; col2_img_max-width:100px; col2_img_max-height:300px; col1_img_opacity:0.8" 0, 1 and 2 Column 0 : <span style="color:#F00;font-weight: bold"/>data</span>
Column 1 : <img style="display:block;border-radius:50%; max-width:75px;margin:auto;"/>
Column 2 : <img style="width:100px; max-height:300px;opacity:0.8"/>
Example 4 colstyle=col1_video_max-width:250px; 1 Column 1 : <video or iframe style="max-width:250px"/>
Example 5 colstyle=col2_video_max-width:250px;" 2 Column 2 : <video or iframe style="max-width:250px"/>

Video types supported

Service Video type HTML tag used
Youtube Format of Youtube Use the Youtube's iframe
Facebook Format of Facebook Use the Facebook's iframe (not tested)
Commons.Wikimedia.org Ogg, Webm, ogv Video (Html 5)
Default iframe

Examples

Example 1 : table by default

Example 2 : table with images

Example 3 : table with columns customized

Example 4 : table with videos of Commons.Wikimedia.org