Tabular View

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"
  ></div>

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: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

  <script>
  var zebraStyler = function(item, database, tr) {
      if (tr.rowIndex % 2) {
          tr.style.background = '#eee';
      } else {
          tr.style.background = '#ccc';
      }
  }
  </script>

Then in your view div, add the property:

  ex:rowStyler="zebraStyler"