The Awesome Table Gantt app lets you dynamically represent your project schedule to help you plan, coordinate, and track specific tasks.
What is the Gantt app?
The Gantt app lets you create a Gantt chart showing the project's breakdown into its component tasks. It includes the start date, end date, duration, and the current progress of tasks. Gantt charts display tooltips when the user hovers over the individual taskbars.
Live example (simple): Software Project Roadmap
Gantt app features
| # | Feature | Description |
|---|---|---|
| 1 | Track | Zebra-stripes on alternate rows. |
| 2 | Group | Labels assigned to grouped tasks. |
| 3 | Labels (Taskbars) | Labels assigned to individual tasks. |
| 4 | Tooltip | Hover over a bar to display a tooltip with more detailed information about that task. |
Gantt app
If your Gantt app's width is less than 600px, the date format is shown with the month and year. If your Gantt app's width is greater than 600px, the date format is shown with the day, month and year.
| Width less than 600px | Width greater than 600px |
|---|---|
Create a Gantt app
In the Awesome Table editor:
1. In the sidebar, open the App configuration section.
2. Select Gantt under Visualization type.
3. Click Update app to apply your changes.
There are two ways to create the Gantt app data source:
Method 1: Use keywords
This method is easier to implement and troubleshoot as there are no rules to remember. It’s even possible to re-order the columns. Just use the appropriate keyword for the columns, and the Gantt app will display correctly.
| Column | Keyword | Description |
|---|---|---|
| A | ganttStartDate |
Defines the start date of a task. Data type: Date |
| B | ganttEndDate |
Defines the end date of a task. Data type: Date |
| C | ganttLabel |
Assigns labels to individual tasks. Data type: Text |
| D | ganttGroup |
Designates the grouping for your tasks. Data type: Text |
Example of a Gantt app data source using the keyword method
Method 2: Use the default column assignment (no keywords)
If you choose not to specify any keywords, Awesome Table assigns columns by default in your data source. For a Gantt app, this includes the first four visible columns in this fixed order:
| Column | Feature | Description |
|---|---|---|
| 1 | Group |
Designates the grouping for your tasks. Data type: Text |
| 2 | Label |
Assigns labels assigned to individual tasks. Data type: Text |
| 3 | Start date |
Defines the start date of a task. Data type: Date |
| 4 | End date |
Defines the end date of a task. Data type: Date |
Example of a Gantt app data source using the default column assignment method
When there are four columns in a Gantt app data source, the first is interpreted as the Group label, the second as the Task label, and the third and fourth as start and end dates.
Errors are displayed, and no Gantt app is shown when the prescribed column assignment is ignored
- the prescribed default column assignment is followed
- the first four columns are visible (the keyword hidden is not used)
Gantt app-specific keywords
Below is a list of keywords specific to the Gantt app.
| Keyword | Description |
|---|---|
|
Designates the grouping for your tasks. |
|
| ganttLabel |
Assigns labels to individual tasks. |
| ganttStartDate |
Defines the start date of a task. |
| ganttEndDate | Defines the end date of a task. |
Other keywords
You can also use these keywords with the Gantt 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.
info This keyword greatly enhances the Gantt app’s functionality by displaying relevant information for each task.
Learn more: Advanced live example. |
| Hidden | Hides a column in your data presentation. |
| HyperlinkType | Adds links to text or image elements and as 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. |
| 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. This 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. |
Settings in the Gantt app
| Setting | Description |
|---|---|
| Group rows by label (optional) |
Creates one row for every group entry. The default (off) is to separate bars with the same group. When this setting is enabled, the chart's rows (that belongs to the same group) are combined into one row for a cleaner presentation. Entries are grouped by color. Default: Off |
Live examples
• Live example (simple): Software Project Roadmap
• Live example (advanced): Software Project Roadmap
We used the same data source in both examples, but in the advanced version, we applied the Sidebar keyword with customized templates to enhance the app's functionality to display relevant information (click a task to open a sidebar with more information). If you need more flexibility and freedom with your Gantt app, you can use cusomized HTML templates.