When creating tables using HTML in portals, various table classes and table row classes can be leveraged to allow for a variety of functionality and design aesthetics.
Classes can be either predefined within Slate, like the following table classes, or they can be custom, such as creating custom classes specific to your institution. When an HTML element is given a Slate predefined class, a class defined in your branding, or a custom class defined in your portal, that attribute will inherit the style of the specified class.
Table classes can be used to adjust the display and functionality of a table.
If the headers in a table should allow the portal user to sort the data displayed, a class of "sortable" can be used.
<table class="table sortable">Tip
If the table is leveraging the Table View Widget, the headers will only sort the data appearing on that page of table. It will not sort all paginated results.
The table class of "searchable" adds a search bar to the table, allowing portal users to search any text appearing within the table.
data-search-text can also be added to display instructions or additional information in the search box.
<table class="table searchable" data-search-text="Search Records...">Typically, if a column in a table row is a link, the entire row becomes a link, allowing the portal user to click anywhere on the row to open the link. However, there may be cases where the desired behavior is to have just a single column be linkable. The table class of "nohighlight" allows for just the columns with links to be linkable.
<table class="table nohighlight">In this example, only the second column is a link, rather than the entire table row.
Tip
The above table classes, which are predefined in Slate, can be combined together to have a table that is both sortable and searchable, sortable and nohighlight, or all three together.
<table class="table sortable searchable nohighlight">Table row classes can be used to adjust the display of specific table rows. Using Liquid markup, certain rows can be displayed differently based on certain criteria.
For example, in a table of applicants, the portal user may wish to see admits highlighted in green and denied applicants highlighted in red.
In order to conditionally change the display of a table row, different table row classes will need to be set.
To create different background colors (or other stylings), <style> tags can be added. In the code below, a table row (tr) with a class of "Admit" will have a green background and those rows with a class of "Deny" will have a red background.
Further down, a merge field is leveraged to determine the class.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
tr.Admit {background-color: green; }
tr.Deny {background-color: red; }/*]]>*/
</style>
</head>
<body>
<table class="table searchable sortable nohighlight">
<colgroup>
<col />
<col />
<col />
</colgroup>
<thead>
<tr class="column">
<th>Person Name</th>
<th>Person Major</th>
<th>Person Decision</th>
</tr>
</thead>
<tbody>{% for item in applications %}
<tr class="{{item.decision}}">
<td>{{item.name}}</td>
<td><a href="LINK HERE" target="_blank">{{item.major}}</a></td>
<td>{{item.decision}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>As referenced earlier, a merge field is used to set the class. This merge field must be an export in the associated query. In the example, the merge field is {{item.decision}}, where item is the Liquid looping prefix, as determined by {% for item in applications %}, and decision is the export label in the query.
