Large collections of tabular data (data that belongs in a table) is often hard to visually sift through on a small screen. It’s not always clear where one row ends and another one begins.
There are many different opinions on how to view tabular data (taking no credit for quality of these works):
- https://medium.com/nextux/design-better-data-tables-4ecc99d23356
- https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a
- https://pencilandpaper.io/articles/ux-pattern-analysis-enterprise-data-tables/
There are many things wrong with the table I’m going to be showing today, but the thing I want to talk is about Zebra Striping in Airkit with collection list views.
This is built on CXR 17.15 so it might be a little different for CXR 18.
When you add a collection list view to a web page, the inspector has an Advanced section under the General Tab:
This section contains information related to the collection being iterated through. The values shown are the default values, and it is common practice to leave them unchanged. What this means is that for each item in the Data, the elements below the Container List will have access to the properties item, index, and items. This information can be used to do useful things, such as implementing Zebra Striping.
To enable this, click on the container within the Container List and go to the background property in the Style Overrides section of the inspector. It is possible to use the expression editor to set the background color of rows based on index being odd or even:
IF(
index % 2 = 0,
"#fff",
"#bbb"
)This code is using the modulus operator to see if the index is evenly divisible by two. If it is, the color is set to white, if not then it is set to a darker color.
Here is what it looks like in the expression editor:
And the resulting output (again on a not fully polished app), looks something like this:
So that is how you build Zebra Striping in the Airkit experience.
