Display tabular structures in a table element - The maklesoft.Table kind

edited February 2012 in Enyo 1.0
As discussed in this thread I have implemented a VirtualTable kind that allows you to display and collect tabular data. However, one thing that troubled me about the implementation was the fact that it uses the VirtualRepeater kind for rendering the table rather than generating an actual table element. As promissed in the previously mentioned thread I have new implemented a Table kind that actually renders into a table element. This implementation allows to generate any kind of tabular layout using Repeater-like event-based cell rendering. For example the enyo code
{kind: "Table", colCount: 2, rowCount: 2, onSetupCell: "setupCell"},
setupCell: function(sender, rowIndex, colIndex) {
	return "cell " + rowIndex + "," + colIndex;
produces the following markup:

		cell 0,0cell 0,1
		cell 1,0cell 1,1
You can also fill the cells with any kind of enyo control. For example:
setupCell: function() {
	return {kind: "Input", value: "cell " + rowIndex + "," + colIndex};
Please note that although it is theoretically possible this kind should NOT be used to create UI layouts (although some old school web designers might be tempted to do so). It is rather meant to be used for representing tabular data structures like demonstrated in the DataTable kind (which is, by the way, a remake of the VirtualTable kind).

The code for the Table kind along with the DataTable kind and an example for the latter is hosted on Github: https://github.com/MaKleSoft/enyo-plugins/tree/master/Table

You can also check out a quick example for the DataTable kind here: http://maklesoft.com/Enyo-Plugins/Table/

Finally, if you want to contribute to my growing collection of open source enyo kinds, feel free to fork my enyo-plugins rep on Github: https://github.com/MaKleSoft/enyo-plugins


  • P.S.: I have implemented this for Enyo 1.0 because I am using it in one of my current Enyo 1.0 projects. I am going to 'port' it to Enyo 2.x later.
  • Thanks! I guess, this "Table" kind if for small amount of rows, right? For more, one would have to use the VirtualTable kind.
  • Yeah, thats essentially right. The Table kind, same as the Repeater kind, takes longer to load than its virtual counterpart as it renders all of its contents at once. In the case of a table containing many columns this is actually preferable to the VirtualTable implementation as the latter might result in low performance especially on mobile devices.
Sign In or Register to comment.