Full Example
Below is an example of all available options when defining a table. Only options marked as required must be defined — all others use sensible defaults.
var ppf_widgets = {
example_table: {
ele: ['table1', 'table2'],
data: 'speeddata',
type: 2,
datadepend: ['voip', 'act'],
styling: {
bordercolor: "rgba(66,66,66,1)",
cellspacing: "2px",
cellpadding: "5px",
fontsize: "13px",
width: "100%",
headWs: 'normal',
rowWs: 'nowrap'
},
metricnames: ['Download', 'Upload'],
metrics: ['speed.dspeed', 'speed.uspeed'],
thresholds: 'default',
url: ['', ''],
depend: [
['endofmonth', 'tuesday'],
['endofweek', 'wednesday']
]
}
}
Required Keys
| Key | Description |
|---|
ele |
Required. HTML element IDs where the table should render. For example, if the HTML contains <div id='speedtable'></div>, use: ele: ['speedtable'] |
data |
Required. The data set name to use. Example: data: 'speeddata' |
type |
Required. Must be 2 for a table widget. |
metrics |
Required. Metrics to display as table columns, in testtype.metric format. Metrics must be available for the chosen data set. See available metrics. Example: metrics: ['speed.dspeed', 'speed.uspeed'] |
metricnames |
Required. Friendly names for the table heading row, one per metric. Example: metricnames: ['Download', 'Upload'] |
datadepend |
If the widget depends on a certain data type, define it as an array. Common types: voip, act (Quality), route, capacity. |
Styling Options
All styling options are optional and use sensible defaults if not specified.
| Key | Description | Example |
|---|
bordercolor | Color of the table border, including cell and row borders. | '#333333' |
cellspacing | Spacing between cells. Also affects border width. | '2px' |
cellpadding | Padding within cells. | '5px' |
fontsize | Font size for table text. | '13px' |
width | Width of the table (pixels or percentage). | '100%' |
headWs | White-space for heading cells. Use 'nowrap' to prevent wrapping. | 'normal' |
rowWs | White-space for result cells. Use 'normal' to allow wrapping. | 'nowrap' |
Other Options
| Key | Description |
|---|
thresholds | Threshold file to use for color-coding results (bad, okay, good). MCS supports multiple threshold files, which must be specified when setting up data sets. Example: thresholds: 'default' |
url | Makes column headings clickable. The array position determines which heading is activated. Example: url: ['https://www.visualware.com', ''] makes the first heading clickable but not the second. |
depend | Widget dependencies. See dependency information. |
