By default, Awesome Table uses a Table visualization type when you create a new app. This app-type comes in handy when you need to present your data in tabular format. That could mean using plain and boring tables, but it doesn't have to be, as you'll see in the examples below.
Default Table app
Live example:
Keywords for the Table app
You can use these keywords with the Table app.
| Keyword | Description |
|---|---|
| Sidebar | Displays a list of choices in a side panel; if used with Hidden, the text is hidden until users click in the sidebar to make the text appear. We also recommend using it with templates. |
| Hidden | Hides a column in your data presentation. |
| HyperlinkType | Adds links to text or image elements. It can be an alternative to using templates. That is useful if you want to generate links in your table without showing the full links (only text or images are shown). It also hides the URL column. |
| ButtonType | Displays a button that redirects to a link. You can also specify your link's colour (using HTML Color Names like red, blue, green or hex color codes). |
| ImageType | Displays images from a column containing links to images. That is an alternative to using templates. When users hover over the image, a larger version pops up. |
| IconType | Displays icons without using a template. Choose any icons from https://material.io/icons/. |
| RatingType | Transforms numbers from 0 to 5 to star-rating icons. |
| ListType | Transforms CSV values into HTML ordered lists. |
| NumberedListType | Transforms CSV values into HTML numbered lists. |
Default Table app data source
Settings in the Table app
The Table app has one setting.
| Setting | Description |
|---|---|
| # of items displayed |
Specifies the number of records you want to show (per page). |
In the Awesome Table editor:
- In the sidebar, open the App configuration section.
- Select Table under Visualization type.
- Enter a numeric value in the # of items displayed field.
- Click Update app to apply your changes. Your data is presented as a chart.
Pagination improves your Table app functionality by:
- preventing browser-overload and decreasing the load-time
- not requiring your users to scroll down to see the entire table
- displaying tens of thousands of results smoothly - without issues
- allowing viewers to leverage filters and find an item at a glance, instead of getting lost in a mass of data
Table app with HTML Template
You learned earlier that the default Table app is the easiest app-type to set up. But this also limits you to having a plain-looking table. What if you need more flexibility and freedom in designing your table-content? Then customizing the Table app with HTML Template is the best option for you.
Another practical reason for using a template is to avoid horizontal scrolling. That happens when your columns are too many or too wide (based on their actual content). There will always be a limit on how narrow the Table app will be before the horizontal scrolling starts. By using templates, you'll be able to present all the relevant data and still display beautifully (even on smaller devices).
Live example: Single-column template
Live example: Sidebar + template