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. This 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
You can use these keywords with the Table app.
|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.||Table, Gantt, Org Chart, Geochart|
|Hidden||Hides a column in your data presentation.||Charts, Maps, Table, Cards, Gantt, Org Chart, Geochart|
|HyperlinkType||Adds links to text or image elements. It can be an alternative to using templates. This 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.||Maps, Table, Cards, Gantt, Org Chart, Geochart|
|ButtonType||Displays a button that redirects to a link. You can also specify the color of your link (using HTML Color Names like red, blue, green or hex color codes).||Maps, Table, Cards, Gantt, Org Chart, Geochart|
|ImageType||Displays images from a column containing links to images. This is an alternative to using templates. When users hover over the image, a larger version pops up.||Maps, Table, Cards, Gantt, Org Chart, Geochart|
|IconType||Displays icons without using a template. Choose any icons from https://material.io/icons/||Maps, Table, Cards, Gantt, Org Chart, Geochart|
|RatingType||Transforms numbers from 0 to 5 to star-rating icons.||Maps, Table, Cards, Gantt, Org Chart, Geochart|
|ListType||Transforms CSV values into HTML ordered lists.||Maps, Table, Cards, Gantt, Org Chart, Geochart|
|NumberedListType||Transforms CSV values into HTML numbered lists.||Maps, Table, Cards, Gantt, Org Chart, Geochart|
Settings in the Table app
The Table app has one setting.
|# 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 your 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. This 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 it starts horizontal scrolling. 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