Exhibit/Tabular View

Exhibit Reference Home &raquo; To add a tabular view to your exhibit, add something like this

&lt;div ex:role="view" ex:viewClass="Tabular" ex:columns=".label, .job-position, .salary" &gt;&lt;/div&gt;

You can create a customized template for your Tabular view, by including a "lens" &#60;div&#62; within the Tabular "view" &#60;div&#62;. This allows you to specify the content of each cell. For example:

In the example the second column contains both a label and an imageURL - but sorting on that column would be the label only.

Settings include:

Note that you can also override the CSS class exhibit-tabularView-body to style the table

table.exhibit-tabularView-body { ... }

However, without ex:tableStyler defined, ex:border, ex:cellSpacing, and ex:cellPadding will override your CSS style rules. So, you might need to set ex:border, ex:cellSpacing, and ex:cellPadding instead.

A quick example of how to get 'zebra' striped rows using rowStyler

var zebraStyler = function(item, database, tr) { if (tr.rowIndex % 2) { tr.style.background = '#eee'; } else { tr.style.background = '#ccc'; }  } Then in your view div, add the property: ex:rowStyler="zebraStyler"