Portal Table and Table Row Classes

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

Table classes can be used to adjust the display and functionality of a table.

sortable

If the headers in a table should allow the portal user to sort the data displayed, a class of "sortable" can be used.

Sortable Table Headers

Source Code for Sortable TAble Class

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

searchable

The table class of "searchable" adds a search bar to the table, allowing portal users to search any text appearing within the table. 

Searchable Table Class


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...">
nohighlight

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.

Nohighlight Table Class

<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

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. 

Table with Different Table Row Classes

Creating the Table Row Classes

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>
Adding the Query Export to be Used as a Table Row Class Merge Field

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.

Query Export Used in Table Row Class

Was this article helpful?
2 out of 2 found this helpful