1 - Make your view filterable
When you have a lot of data, it can be useful to allow users to filter relevant elements.
First, we need to add one filter for the “Movie” column and another one for the “Director” column.
We use StringFilter for both cases because these columns contain text, and StringFilter allows us to filter with an exact match.
The “Category” column has different information separated by comma, so we want to be able to display only values that are selected in the filter.
You just need to use csvFilter in your second row for this case.
2 - Use keywords to make your view functional and pretty
In this part, we will see how to make our view pleasant to look and organize our data in the best possible way.
In the first column, we have a link that redirects users to an image if they click on it. You can use ImageType to display automatically an image from an image link.
In addition, you will be able to see the entire image by hovering over the image.
To make the view more readable and avoid users from scrolling horizontally the view, we need to bring the “Movie” and “Wikipedia Link” columns together to use a hyperlink with the HyperlinkType keyword.
The HyperlinkType keyword works only if you have an anchor column and a link column.
- In our example we have already these two columns: The “Movie” column is an anchor column
- The “Wikipedia Link” column is a link column.
You’ll just need to indicate the link column between brackets and your link column will be automatically hidden.
It is also possible to use icons with Awesome Table. In our case, we will add icons for every hyperlink in the “Name” column. But there are many ways to use icons.
You just need to indicate between the round brackets the name of the icons you want to display:
When one of your column is not relevant to be displayed, you can hide it with the Hidden keyword.
This will not prevent the filter from working properly.
In our last column which is “IMDb Link” column, we want to display a button that redirects users to a desired link.
To create a button, you need 2 columns: One for the name of the button, and another for the links.
In our example, you need to add a 2nd column with the name of the button, and indicate between the brackets the column of the links with the ButtonType keyword.You can also choose the color of your button between brackets with an hex code or with a classic color after the comma. We chose the “#0080ff” color.
As our view is a directory of movie, we want to add a rating system with stars to show what the best movies are.
In our example, you have to create a new column with RatingType keyword and indicate a number between 1 and 5. It’s important to put your column in the number format.
You should get a similar result :