Portal Table and Table Row Classes
- 16 Nov 2023
- 2 minute read
- Print
- DarkLight
- PDF
Portal Table and Table Row Classes
- Updated 16 Nov 2023
- 2 minute read
- Print
- DarkLight
- PDF
Article Summary
Share feedback
Thanks for sharing your feedback!
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.
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.
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.
<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.
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.
Was this article helpful?
