Hierarchical Grid

    Use the Hierarchical Grid Component to let the user browse and interact with a vast amount of complex data organized into separate tables hierarchically related one to another. Each grid in the hierarchy represents its own data in a tabular fashion and provides the same features as the Grid. The Hierarchical Grid is visually identical to the Ignite UI for Angular Hierarchical Grid Component

    Hierarchical Grid Demo

    Using the Hierarchical Grid in Figma

    Similarly to the Grid, the Hierarchical Grid is essentially a repeater of columns, rows, and nested grids forming a visual hierarchy. To use the Hierarchical Grid component simply search for it in the Resources panel and insert an instance. If needed, you can change the display density by using the "Display Density" property from the properties panel. In the layers panel you'll see the following structure:

    Layer Use
    🚫 componentVersion   A special locked layer starting with a prohibited icon. This layer containts information about the current version of the component and you should avoid deleting or modifying it.
    🚫 metadata A special locked layer starting with a prohibited icon. This layer is required by the code generation and you should avoid deleting or modifying it.
    Drill Indication A symbol that is used for indicating the active cell/cell in focus
    Grid 2 Contains all the columns and cells of the bottom grid header
    Background Defines the background color of the second grid
    Grid 1 Contains all the columns and cells of the top grid

    If you'd like to alter the number of columns or cells, you can simply hide the unnecessary ones from the layers panel. In case you want to add more, you'll need to select the Hierarchical Grid component, right click on it and select "Detach instance" from the contextual menu. You can then duplicate some of the existing columns until you achieve the desired look of the Grid. If you want to show more of the hierarchy, you can also duplicate one of the two Grid frames.

    Using the Hierarchical Grid in Sketch

    The easiest way to use the Hierarchical Grid in Sketch is by dragging one of the predefined grids to your artboard - there are three presets available for the three display densities supported. Once in your artboard, by right-clicking on top of it, and selecting the Detach from Symbol option near the bottom of the contextual menu you should see the following in your layers panel under the newly appeared group:

    Layer Use
    🚫 metadata A special locked layer starting with a prohibited icon. This layer is required by the code generation and you should avoid deleting or modifying it.
    🌈 Drill Indication A symbol that is used for indicating the active cell/cell in focus
    Header Contains all the cells in the header
    Body Contains all the cells in the body and a nested Grid with basic structure
    🌈 Background Defines the background color of the Hierarchical Grid

    After detaching, you may alter the number of headers you need to show all the dimensions of your data and as many records as you want to show in your design simply by duplicating the first row of data that you already have created within each of the grids that you have. In case you need to show more of the hierarchy, you may also nest additional grids within the body of the parent one that they belong to.

    Using the Hierarchical Grid in Adobe XD

    In Adobe XD, after you choose one of the three preset display density hierarchical grid components and drag it to your artboard, you will notice in the layers panel that we use Repeat Grid for both the Header and the Body to speed configuration up. Unlike in Sketch in Adobe XD destroying the symbol is not necessary. You should see the following in your layers panel:

    Layer Use
    🚫 metadata A special locked layer starting with a prohibited icon. This layer is required by the code generation and you should avoid deleting or modifying it.
    🌈 Drill Indication A symbol that is used for indicating the active cell and trace its belonging through the hierarchy of grids
    Header Contains all header cells: the CollapseAll cell and the rest grouped in a Repeat Grid Header
    Body Contains all body cells: the Expand cells grouped in a Repeat Grid and the rest grouped in another Repeat Grid, and a nested Grid with a basic structure
    🌈 Background Defines the background color of the nested Grid

    When you select a Repeat Grid layer, you may alter the number of the repeated cells you need, which can be done within each grid. Just drag the green handles at the right or bottom edge to show all the dimensions of your data and insert as many visible records as you want to show in your design. To change a particular cell type or column width, you have to select the Repeat Grid layer and click Ungroup Grid in the right panel. This will allow you to work on them separately to achieve the desired design. If you need to show more of the hierarchy, you may also duplicate full grids and nest them within the body of the parent one that you want them to belong to.

    Cell Types

    The Hierarchical Grid extends the three types of regular Grid cells Header, Body, and Summary with two additional ones that are used to organize the hierarchy. The CollapseAll cell is always used as the first Header Cell and comes with a predefined icon and action for collapsing/expanding all of the belonging records of the Grid in whose Header it appears. The Expand cell is always used as the first Body Cell in every row and comes with a predefined icon and action for collapsing/expanding the row.

    To understand how regular Header, Body and Summary cells can be used for different types of data and configured to enable the various Hierarchical Grid features, please refer to the general Grid topic.

    Cell Display Density

    The CollapseAll and Expand cells support three display density variants of the Hierarchical Grid: Comfortable, Cosy, and Compact. Each of them come with distinct symbols as can be seen for the CollapseAll Header cells below:

    Styling

    The Hierarchical Grid comes with styling flexibility achievable through styling the individual cell text, icons, and background colors in the various states available, as well as the hiding of horizontal and vertical borders. It is also possible to style the Drill Indication and Grid background.

    Usage

    Similarly to the Grid, the most important thing about the Hierarchical Grid is the alignment of the data inside its Header and Body Cells. Text should always be aligned left, leaving variable empty space to the right, and numbers should always be aligned right, leaving variable empty space to the left.

    Do Don't

    Additional Resources

    Related topics:

    Our community is active and always welcoming to new ideas.