I can't figure out how to do it with just a regular table. I tried with HTML styles, wrapping the text with <p style=text-align:right"> and </p>. That right aligns text, but only within the text itself. The text appears on the left, but if it has multiple lines (with <br>s), they are aligned right. So that won't work.
I can make this work with an API table. I'll paste an example of an API table below (it's pretty big).
With an API table, you can specify what parameter or value is shown in each and every cell (with the getParamOid, or getValueAt functions). AND you can also specify the style of each and every cell with the getCellStyle function. So you could do something like the following to specify the alignment of column 2:
getCellStyle: function(row, col) {
if (col==2 && params.getValue("language",0) == "English") {
return "text-align:west";
}
if (col==2 && params.getValue("language",0) == "Hebrew") {
return "text-align:east";
}
return "";
},
Here is the example API table panel:
<abs contexttype="opengear" gridsize="20" id="_top" keepalive="false">
<abs height="220" left="40" style="bg#buttonbg;" top="640" width="560">
<abs left="260" top="40"/>
<table height="20" left="20" oid="checkbox1" top="20" width="160">
<tr>
<label anchor="east" fill="none" insets="0,0,0,5" name="checkbox1" weightx="0.0"/>
<param anchor="west" expand="true" fill="both" oid="checkbox1" showlabel="false" weightx="1.0" weighty="1.0"/>
</tr>
</table>
<table height="20" left="20" oid="toggle1" top="60" width="160">
<tr>
<label anchor="east" fill="none" insets="0,0,0,5" name="toggle1" weightx="0.0"/>
<param anchor="west" expand="true" fill="both" oid="toggle1" showlabel="false" weightx="1.0" weighty="1.0"/>
</tr>
</table>
<simplegrid cols="1" height="160" left="240" top="40" width="140">
<param expand="true" oid="array1" showlabel="false"/>
</simplegrid>
<label height="20" left="240" name="array1" style="txt-align:west" top="20" width="120"/>
</abs>
<meta>
<params>
<param access="1" constrainttype="INT_NULL" name="Table" oid="params.table" precision="0" type="INT16" value="4" widget="script-table"/>
<param access="1" constrainttype="INT_CHOICE" name="checkbox1" oid="checkbox1" precision="0" type="INT16" value="1" widget="checkbox">
<constraint key="0">Off</constraint>
<constraint key="1">On</constraint>
</param>
<param access="1" constrainttype="INT_CHOICE" name="toggle1" oid="toggle1" precision="0" type="INT16" value="2" widget="combo">
<constraint key="0">North</constraint>
<constraint key="1">South</constraint>
<constraint key="2">East</constraint>
<constraint key="3">West</constraint>
</param>
<param access="1" maxlength="0" name="array1" oid="array1" precision="0" type="STRING_ARRAY" widget="default">
<value>horse</value>
<value>dog</value>
<value>platypus</value>
<value>cat</value>
<value>wombat</value>
<value>sheep</value>
</param>
</params>
</meta>
<param expand="true" height="320" left="40" oid="params.table" showlabel="false" top="160" width="560">
<config key="w.model">var model = {
getRowCount: function()
{
return 5;
},
getColumnCount: function()
{
return 4;
},
getRowHeight: function(row)
{
// Make the rows get bigger and bigger.
return 20 + row *10;
},
getColumnName: function(col)
{
if (col==0) {
return "FIRST"
}
if (col==1) {
return "SECOND"
}
return "COL " + col;
},
getHeaderWidth: function(col)
{
switch (col) {
case 0: {return 60}
case 1: {return 120}
case 2: {return 60}
case 3: {return 200}
case 4: {return 75}
}
},
getValueAt: function(row,col) {
if (col == 0) {
switch (row) {
case 0: {return "Apple"}
case 1: {return "Banana"}
case 2: {return "Coconut"}
case 3: {return "Date"}
case 4: {return "Eldberry"}
}
}
if (row == 1 && col == 1) {
return null;
}
if (row == 2 && col == 2) {
return null;
}
if (col == 3) {
return null;
}
return "Row: " + row + " Col: " + col;
},
getParamOid: function(row, col)
{
if (row == 1 && col == 1) {
return "checkbox1"
}
if (row == 2 && col == 2) {
return "toggle1"
}
if (col == 3) {
return "array1";
}
return null;
},
getCellStyle: function(row, col) {
if (col==2 && row==4) {
return "bg#2222aa;fg#888888;size:Bigger;";
}
if (col==1) {
return "bg#aa2222;fg#dddddd";
}
if (row % 2 == 0) {
return "bg#888888; fg#ffffff";
}
},
getParamIndex: function(row, col)
{
if (col == 3) {
return row;
}
return 0;
},
selectionChanged: function(rows, cols)
{
ogscript.rename("message", "user selected from " + rows[0] + " , " + cols[0] + " to " + rows[rows.length-1] + " , " + cols[cols.length-1]);
},
headerClicked: function(col)
{
ogscript.rename("message", 'Header Clicked: ' + col);
},
isCellEditable: function(row, col)
{
if (col == 3) {
return false;
}
return true;
},
isSortable: function()
{
return true;
},
}
model</config>
</param>
<label height="53" left="40" name="API Table" style="txt-align:west;size:Bigger;" top="18" width="605"/>
<label height="40" left="40" name="API Tables allow you to create tables that have custom data or parameters in each and every cell. You can also style each cell individually" style="txt-align:west;" top="60" width="1040"/>
<table height="600" left="660" top="200" width="620">
<tr>
<label colspan="1" fill="both" name="getRowCount" rowspan="1" style="txt-align:west" weightx="1.0" weighty="1.0"/>
<label colspan="1" fill="both" name="Returns the number of rows in the table." rowspan="1" style="txt-align:west" weightx="1.0" weighty="1.0"/>
</tr>
<tr>
<label colspan="1" fill="both" name="getColumnCount" rowspan="1" style="txt-align:west" weightx="1.0" weighty="1.0"/>
<label colspan="1" fill="both" name="Returns the number of columns in the table" rowspan="1" style="txt-align:west" weightx="1.0" weighty="1.0"/>
</tr>
<tr>
<label colspan="1" fill="both" name="getRowHeight" rowspan="1" style="txt-align:west" weightx="1.0" weighty="1.0"/>
<label colspan="1" fill="both" name="<html>Input: row<br/>Returns the height of the input row.</html>" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
</tr>
<tr>
<label colspan="1" fill="both" name="getHeaderWidth" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
<label colspan="1" fill="both" id="" name="<html>Input: col<br/>Returns the width of the specified col.</html>" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
</tr>
<tr>
<label colspan="1" fill="both" name="getColumnName" rowspan="1" style="txt-align:west" weightx="1.0" weighty="1.0"/>
<label colspan="1" fill="both" name="<html>Input: col<br/>Returns the name of the input column.</html>" rowspan="1" style="txt-align:west" weightx="1.0" weighty="1.0"/>
</tr>
<tr>
<label colspan="1" fill="both" name="getValueAt" rowspan="1" style="txt-align:west" weightx="1.0" weighty="1.0"/>
<label colspan="1" fill="both" name="<html>Input: row, col<br/>Returns the value to display in the cell at row,col<br>Return null if you want to use a param instead.</html>" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
</tr>
<tr>
<label colspan="1" fill="both" name="getParamOid" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
<label colspan="1" fill="both" name="<html>Input: row, col<br/>Returns which parameter to show in cell row,col. <br/>Return null if you don't want to show a parameter, but use a value instead.</html>" rowspan="1" style="txt-align:west" weightx="1.0" weighty="1.0"/>
</tr>
<tr>
<label colspan="1" fill="both" name="getCellStyle" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
<label colspan="1" fill="both" name="<html>Input: row, col<br/>Returns the style string to use at cell row,col.</html>" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
</tr>
<tr>
<label colspan="1" fill="both" name="selectionChanged" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
<label colspan="1" fill="both" name="<html>Input: rows, cols<br/>When the user selects a part of the table, this function is called. <br/>It contains an array for the selected rows, and one for the selected columns.</html>" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
</tr>
<tr>
<label colspan="1" fill="both" name="headerClicked" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
<label colspan="1" fill="both" name="<html>Input: col<br/>This function is called when a table header is clicked. <br>The col input specifies which header was clicked.</html>" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
</tr>
<tr>
<label colspan="1" fill="both" name="getParamIndex" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
<label colspan="1" fill="both" name="<html>Input: row, col<br/>If the parameter returned by "getParamOid" is an array, <br/>you can specify which index of the array to use with this function.</html>" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
</tr>
<tr>
<label colspan="1" fill="both" name="isCellEditable" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
<label colspan="1" fill="both" name="<html>input: row, col<br/>returns true if the cell at row,col is editable, false otherwise.</html>" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
</tr>
<tr>
<label colspan="1" fill="both" name="isSortable" rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
<label colspan="1" fill="both" name="returns true if the user can click on the headers to sort the columns, false otherwise." rowspan="1" style="txt-align:west;" weightx="1.0" weighty="1.0"/>
</tr>
</table>
<label height="40" id="message" left="40" name="Click on the table or headers to change this message" style="txt-align:west;" top="480" width="380"/>
<label height="20" left="40" name="To create one, create an INT16 parameter, and set its widget hint to "script-table". Then add w.model config option." style="txt-align:west;" top="100" width="920"/>
<label height="20" left="660" name="The w.model is an object that contains functions that control the content and look of the table." style="txt-align:west" top="140" width="560"/>
<label height="20" left="660" name="It can have the following functions:" style="txt-align:west;" top="160" width="560"/>
<label height="40" left="40" name="The following parameters are embedded in the table:" style="txt-align:west;size:Big;" top="580" width="560"/>
</abs>
#DashBoard