EasyTable_Editor_Alias_And_Types_FPIn the Editor each component has a use otherwise it wouldn't be there. After all we've all got things to do. When a table is first created each column is given an Alias. The Alias is used in lot of ways as CSS labels and MySQL table column names.


He Goes by the Alias

The alias is derived from the column name or "Label", which in turn comes either from the headings each column may have in the original CSV file or, if no heading exist, a series of temporary labels are generated that look like this: Column1, Column2. At this point even though we can change the label to any value at any time, the Alias is fixed in stone (or rather the backend database). [If the first character of your column label doesn't start with a letter (a-z,A-Z) EasyTable will prepend a lower case 'a' to ensure that the alias is a valid CSS label.]

The Alias is also used in the CSS class that is attached to each column in the table. So for the US Presidents table show in {rokbox title=|EasyTable [ Alias' and Types ]| album=|EasyTable-text| text=|the screenshot|}images/stories/EasyTable/EasyTable_Editor_Alias_And_Types.png{/rokbox} these setting will generate a CSS entry for the President column heading like this:

<td class="sectiontableheader president">President</td> 

- List View

<td class="sectiontableheader president">President</td> 

- Detail View

Or like this for the actual cell containing the data:

<td class="colfld president">George Washington</td>

- List View

<td class="sectiontablerow president">George Washington</td> 

- Detail View

Using just these CSS values you can format the table and the column in anyway that you want by adding the relevant CSS class to your Joomla template.


Following the Joomla convention rows in the table are assigned alternating classes of 'row0' and 'row1'. This allows your to specify in your templates CSS (if it's not already there) different colours for alternating rows of the table. Row HTML looks like these examples:

<tr class="row0">...</tr> 

- First and odd rows of List View

<tr class="row1">...</tr> 

- Second and even rows of List View

He's the Type

As mentioned previously - each column can have a specified Type. Currently the types are Text, Image and URL in EasyTable for J! In EasyTable Pro additional types of Number and Date are also supported.


A text field is just that, the data from that column is simply inserted into the cell without any other attributes. The cell itself has some specific class labels attached to it based on the column Alias (as discussed above) and whether it's a list view cell or a detail view cell.

In the discussion of Alias above a list view example is shown where the class labels for the table cell are colfld and president (based on the alias).  The same cell in a record detail view will have class labels of sectiontablerow and president. This allows you to specify different CSS for the same data based on the view currently in use.


A image field, uses the contents of the field as the name of the image to display. In it's simpliest EasyTable concatenates the text in the Image Directory (eg. /images/stories/USPresidents) field together with the text in the column you've set to a type Image (eg. thmb_GeorgeWashington.jpg). The resulting HTML looks something like this:

<td class="colfld thumbnail">
<img src="/images/stories/USPresidents/thmb_GeorgeWashington.jpg" />

- Detail View

Those of you paying attention will have noticed that my example Image Directory value doesn't actually have a trailing slash. Thats because EasyTable component combines the two values by concatenating Image Directory + DS + Image Column Text. In this case the DS stands for Joomla's built-in Directory Separator constant which the Joomla framework sets to the correct value for your hosting system.


A URL field, uses the contents of the field as the main component of a standard link

If EasyTable detects a fully qualified URL (ie. one starting with HTTP:// ) if will set a target for the URL of "_blank" which will cause a new web browser window to open.  If the field contains http://www.google.com the resulting HTML looks something like this:

<a href="http://www.google.com" target="_blank">http://www.google.com</a>

If EasyTable detects a partial URL (ie. one without HTTP:// ) if will not set a target for the URL which will cause a the link to open .  If the field contains /manuals/ProductManual.pdf the resulting HTML looks something like this:

<a href="/manuals/ProductManual.pdf">/manuals/ProductManual.pdf</a>


The description field is used to explain the contents of a column in an EasyTable by adding a "title" attribute to the heading cell of the list or detail view of a table. The result is that moving the mouse cursor over a heading will in modern browsers display a "tooltip" of the column description and for users of screen readers and other accessibility tools they can get a comprehensive description of the contents of the column.

The HTML from the Presidents example table is shown below:

<td class="sectiontableheader party" title="The political group or Party that the President was associated with at the time of election.">Party</td>


Current EasyTable articles:

You need to login to access the forums.

Member Login

You need to Login to access your Subscription details or the Forums.