How To set fonts and sizes in YUI2 datatable
The YAHOO User Interface (YUI) is a very nice JS toolkit. One of the most powerful YUI 2 widgets is the datatable. In almost all applications at some point in time the quuestion arises on how to set font and sizes for the infrmation displayed in the YUI datatable. This HowTo entry describes two handy methods based on CSS.
In the old days the kernel configuration setting CONFIG_HZ was the most important setting for the kernel timer frequency. It was defined at compilation time of the kernel and settings varied between distributions and kernel versions.
Simple case: all table elements with same fond and size
The customization of fond and size is achieved by re-defining the the CSS class ".yui-skin-sam .yui-dt-liner", for examples as "{ font:10px Arial,Helvetica,Tahoma,sans-serif;}".
This causes the datatable to display all table elements with the 10px font Arial, Helvetica, Tahoma or another san-serif font if note of the previous is available.
A simple way to include this information in your application is to define this in the HTML file to be loaded:
<style type="text/css">
.yui-skin-sam .yui-dt-liner { font:10px Arial,Helvetica,Tahoma,sans-serif;}
</style>
Complete example
The complete example comprises a HTML document loaded by the browser first and referencing YUI and application elements. In this case the main application element references is the "WeatherTable" JS class. This class defines the datatable containing weather data as example. The actual content is retrieved from an XML file.
The first part of the example is the HTML file including necessary YUI components as JS and referencing CSS files. The class ".yui-skin-sam .yui-dt-line" get overloaded in this file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="expires" content="3600"/>
<title>Topic: How To set fonts and sizes in YUI2 datatable - simple example - ADVENAGE</title>
<link rel="stylesheet" type="text/css" href="/YUI-2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="/YUI-2.9.0/build/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="/YUI-2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="/YUI-2.9.0/build/layout/assets/skins/sam/layout.css" />
<link rel="stylesheet" type="text/css" href="/YUI-2.9.0/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="/YUI-2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="/YUI-2.9.0/build/paginator/assets/skins/sam/paginator.css" />
<link rel="stylesheet" type="text/css" href="/YUI-2.9.0/build/datatable/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css" href="/YUI-2.9.0/build/container/assets/skins/sam/container.css"/>
<script type="text/javascript" src="/YUI-2.9.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="/YUI-2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/YUI-2.9.0/build/utilities/utilities.js"></script>
<script type="text/javascript" src="/YUI-2.9.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="/YUI-2.9.0/build/container/container-min.js"></script>
<script type="text/javascript" src="/YUI-2.9.0/build/menu/menu-min.js"></script>
<script type="text/javascript" src="/YUI-2.9.0/build/get/get-min.js" ></script>
<script type="text/javascript" src="/YUI-2.9.0/build/connection/connection_core-min.js" ></script>
<script type="text/javascript" src="/YUI-2.9.0/build/connection/connection-min.js" ></script>
<script type="text/javascript" src="/YUI-2.9.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="/YUI-2.9.0/build/layout/layout-min.js"></script>
<script type="text/javascript" src="/YUI-2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="/YUI-2.9.0/build/button/button-min.js"></script>
<script type="text/javascript" src="/YUI-2.9.0/build/paginator/paginator-min.js"></script>
<script type="text/javascript" src="/YUI-2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="/YUI-2.9.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="/YUI-2.9.0/build/datatable/datatable-min.js"></script>
<script type="text/javascript" src="/YUI-2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="WeatherTable.js"></script>
<style type="text/css">
.yui-skin-sam .yui-dt-liner { font:10px Arial,Helvetica,Tahoma,sans-serif;}
</style>
</head>
<body class="yui-skin-sam">
<div id="mainContent"></div>
<script type="text/javascript">
var dt = new WeatherTable("mainContent");
dt.render();
</script>
</body>
</html>
The main content of this file is the empty DIV tag with the ID "mainContent". The JS section creates an instance of "WeatherTable" class and calls the render method of this class. This causes the object to be rendered into the empty DIV tag "mainContent".
The detals of the "WeatherTable" class are hidden in the JS file "WeatherTable.js". It contains:
// a global variable for WeatherTable for some reasons
var theWeatherTable;
// the object definition
WeatherTable = function (anchorTable) {
this.anchorTable = anchorTable;
this.selectionMode = "single";
this.width = "400px";
this.fields = ["time","windDirection","windVelocity","pressure","temperature"];
theWeatherTable = this;
};
WeatherTable.prototype.render = function() {
// build the data table
var columnDefs = [
{key:"time", label:"Time", sortable:true, resizeable:true, width:120, maxAutoWidth:200},
{key:"windDirection", label: "Direction", sortable:true, resizeable:true, width:80, maxAutoWidth:120},
{key:"windVelocity", label: "Velocity [knots]", sortable:true, resizeable:true, width:80, maxAutoWidth:120},
{key:"pressure", label: "Pressure [hPa]", sortable:true, resizeable:true, width:80, maxAutoWidth:120},
{key:"temperature", label: "Temperature [C]", sortable:true, resizeable:true, width:80, maxAutoWidth:120}
];
this.dataSource = new YAHOO.util.DataSource ('weather.xml');
this.dataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
this.dataSource.responseSchema = {
resultNode: "item",
fields: this.fields,
};
this.dataTable = new YAHOO.widget.DataTable(this.anchorTable,
columnDefs, this.dataSource,
{scrollable: false, renderLoopSize: 32,
initialLoad: true});
return {
oDS: this.dataSource,
oDT: this.dataTable
}
};
The weather data records are not part of the JS file. Instead they are loaded from a XML file:
<?xml version="1.0" encoding="UTF-8"?>
<weather>
<item>
<time>02:00</time>
<windDirection>SW</windDirection>
<windVelocity>14</windVelocity>
<pressure>998</pressure>
<temperature>12</temperature>
</item>
<item>
<time>05:00</time>
<windDirection>SW</windDirection>
<windVelocity>13</windVelocity>
<pressure>1000</pressure>
<temperature>11</temperature>
</item>
<item>
<time>08:00</time>
<windDirection>WSW</windDirection>
<windVelocity>15</windVelocity>
<pressure>1001</pressure>
<temperature>13</temperature>
</item>
<item>
<time>11:00</time>
<windDirection>W</windDirection>
<windVelocity>18</windVelocity>
<pressure>1003</pressure>
<temperature>16</temperature>
</item>
<item>
<time>14:00</time>
<windDirection>W</windDirection>
<windVelocity>17</windVelocity>
<pressure>1004</pressure>
<temperature>16</temperature>
</item>
<item>
<time>17:00</time>
<windDirection>W</windDirection>
<windVelocity>17</windVelocity>
<pressure>1005</pressure>
<temperature>17</temperature>
</item>
<item>
<time>20:00</time>
<windDirection>W</windDirection>
<windVelocity>14</windVelocity>
<pressure>1006</pressure>
<temperature>14</temperature>
</item>
<item>
<time>23:00</time>
<windDirection>W</windDirection>
<windVelocity>12</windVelocity>
<pressure>1009</pressure>
<temperature>12</temperature>
</item>
</weather>
With all components together (YUI, HTML file, JS WeatherTable class file and XML data), the result is a YUI data table widget displaying weather information with the aimed font and fond size. The complete example may be viewed in a separate window.
Individual size and font per table columns
In some cases you may to use different font sizes and types for individual table colums. YUI supports this by design. The only thing necessary is to adapt the CSS. Dor illustration purposes we are re-using the previous example with the change to use the "Mistral" font for "time" and "windVelocity" with the font-weight bold. The only thing we need to change is the HTML file defining CSS classes.
YUI allows to re-define the CSS class per tabel by ".yui-skin-sam .yui-dt-col-COLUMN_NAME". In our example the column names are "time","windDirection","windVelocity","pressure", and "temperature".
Given that, the HTML file may redefine font and size for the columns time and wind velocity like this:
<style type="text/css">
.yui-skin-sam .yui-dt { font:10px Arial,Helvetica,Tahoma,sans-serif;}
.yui-skin-sam .yui-dt-col-time { font:15px Mistral,Arial,Helvetica,Tahoma,sans-serif; font-weight: bold}
.yui-skin-sam .yui-dt-col-windVelocity { font:15px Mistral,Arial,Helvetica,Tahoma,sans-serif; font-weight: bold}
</style>
Please note that in this example we do not re-define the the CSS class ".yui-skin-sam .yui-dt-liner". Instead we re-define ".yui-skin-sam .yui-dt" to apply the application specific default font and define exceptions for more special columns "time" and "windVelocity". The reason is, that using "yui-dt-liner" would overrule "yui-dt-col-time" and "yui-dt-col-windVelocity" settings.
The complete extended example may be viewed in a separate window.