IN THIS ARTICLE

    IN THIS ARTICLE

      Hierarchy Table

      This comprehensive guide will cover everything about Hierarchy Tables in Mokkup.

      When to Use?

      A hierarchy table is a data structure that shows the relationships between different levels of a hierarchy. It is often used to represent organizational structures, product lines, or government agencies.

      A hierarchy Table is beneficial when:

      • To represent a tree-like structure: A hierarchy table is a logical approach to display hierarchical data like an organization chart, product catalog, or family tree.
      • To filter data: Use a hierarchy table to locate all employees who report to management.
      • To calculate aggregated data: Calculate aggregated statistics like the number of employees under each manager.
      • To navigate data: It can find the path from a child object to its parent.

      How to Create?

      There are two ways to use the Hierachy Table in Mokkup.

      Creating a New Project:

      • Click on ‘Create new’ from the home page
      • Setup the project by filling in the name and choosing the frame size
      • Drag & Drop the hierarchy table on to the canvas or click on it to add from the left menu
      • Resize it on the canvas and place in the desired location
      • Edit it from the customize element menu which opens on element selection

      Using a Mokkup Template

      • Choose a template from the template library and click ‘Use Template’
      • Select the hierarchy table that needs modification
      • Resize it on the canvas and place in the desired location
      • Edit it from the customize element menu which opens on element selection

      Tip: Mokkup elements have multiple variations that can be accessed by double-clicking on the element or clicking Variation in the customize element menu.

      How to Customize?

      Data

      The data in a table can be edited directly on the canvas. Simply click on the cell and edit the data.

      Edit Table

      This is the default tab that opens when an element is selected. All element customizations can be done in this tab. Each sub-section will be explained below.

      1. Matrix 

      No. of rows
      •  Edit the number of rows by clicking on the arrows. Values cannot be manually input here.
      No. of columns:

      • Edit the number of columns by clicking on the arrows. Values cannot be manually input here.

      2. Details

      Edit the basic table details here

      Title
      • Change the title of the table here. Toggle off if not needed.
      Alignment
      • Adjust the title alignment to either left, center, or right of the element.
      Row Banding
      • Toggle on/off to add a background color to every alternative row. 

      3. Stylize Columns

      This section allows user to customize the style of each column in the table.

      • Click on any column to open the ‘Style’ popup or click on the ‘Settings icon that appears on hover
      • Choose the style which suits the business requirements
      • Use the ‘6 dots’ on the left side of the column name to reorder columns
      • Click the ‘trash’ icon that appears on hover to delete any column

      4. Add Ons

      Contains additional elements that can be added to the table.

      Buttons
      • Switch on or off to add or remove buttons from the table. 
      • Add multiple buttons by clicking ‘Add Button’. 
      • Adjust their alignment to either the left, center, or right of the element using ‘Alignment’. 
      • Edit the button's content by clicking on the Title 1’ text in this menu. 
      • Delete any button by clicking the ‘trash’ icon near the name of the button. 
      Dropdowns
      • Toggle on/off to add/remove dropdowns in the table.
      • Adjust their alignment to either the left, center, or right of the element using ‘Alignment’. 
      • Add dropdowns by clicking the ‘+’ icon.
      • Reorder them by clicking the ‘Settings’ icon.
      • Delete them by clicking the ‘Trash’ icon.
      • The title can be edited in the ‘Edit Text’ field and values can be added by entering values in the ‘Add Values’ field. 
      Text
      • Toggle on or off to add or remove text boxes in the table. Enter any information that needs to be included for the table by editing the ‘Text’ field. 
      • Adjust the alignment to either the left, center, or right of the element using ‘Alignment’. 
      • Change the font weight to normal, medium, or bold from ‘Font weight’.

      Tip: Some add-ons cannot be used together in an element. For example: Turning on the Buttons toggle will automatically toggle off Dropdowns, and vice versa.

      5. Design Customizations

      • This will access the 'Design Customizations' menu when clicked. 
      • Use this to change your active theme and utilize customization options to adjust the canvas accordingly.
      • For more information, please refer to this article.

      This was a complete guide to using and editing a hierarchy table on Mokkup. For further help, please ask our Chatbot or contact Support.

      Similar articles