Exhibit/Tabular View

From SIMILE Widgets
Jump to: navigation, search

To add a tabular view to your exhibit, add something like this

 <div ex:role="view" ex:viewClass="Tabular"
  ex:columns=".label, .job-position, .salary"

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

<source lang="html" lines=0>

<img ex:src-content=".imageURL" />


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:

setting name type of value default choices meaning
ex:columns list of expressions comma separated list of one or more expressions, e.g., ".label, .job-position"
ex:columnLabels list of strings comma separated list of labels used for the column headers, e.g., "Name, Position"
ex:columnFormats list of format expressions comma separated list of format expressions, e.g., "list, image, date { mode: short }"
ex:label string table text to put in tab at head of page
ex:sortColumn int 0 zero-based index of column to sort
ex:sortAscending boolean true whether to sort ascending or descending
ex:rowStyler name of function function that takes 3 arguments (item, database, tr) and is called to style each row
ex:tableStyler name of function function that takes 2 arguments (table, database) and is called to style the table
ex:border text 1 whatever you would normally use to set the border of a <table> element
ex:cellSpacing int 3 whatever you would normally use to set the cell spacing of a <table> element
ex:cellPadding int 5 whatever you would normally use to set the cell padding of a <table> element
ex:showToolbox boolean true whether to show the toolbox

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:

Personal tools