This tutorial shows how to create multi-level columns in designer applications, effectively 'categorizing' columns into multiple levels. A typical example is a monthly data table grouped into quarterly sections.

We're going to be using a monthly table and separate it by quarters. The Excel view looks like below.

Steps:

Excel

Begin by giving your table a name that contains only a single header row. We named our table grid.

Designer

Grid

Create a Designer application using your file.  Go to the User Interface module and insert an Input Grid. Select the named range grid for the Table Named Range. Copy the ID of the grid into the right pane. We will use this ID later in CSS.

Uncheck the Responsive property to prevent column grouping.

Select a Column Sizing Type and enter a Column Sizing Value for each column. You can find these properties under each column's options that can be accessed from the grid options menu. These values will be used to align the header table with the input (or output) grid. You can also select Pixel or Percentage options for Column Sizing Type. While Pixel values remain the same across different browsers and displays, Percentage values are recalculated for the user's browser window. We have 13 columns in our grid. One of them is for the line count, and the others are for months from January to December. In this example we're using Percentage sizing with 4% for the first, and 8% for the remaining columns, for a total of 100%.

Content & Table

Place a Content box for the headers above the grid, and create a table for the headers. Copy the grid ID from the right pane. We will use this ID later in CSS too.

When the Content object is active, click Edit Content to open the text editor.

Clear the text editor, and add a table that has enough columns for header sections. Our example has 5 columns: 1 for the empty column and 4 for quarter labels.

Click the Code View icon to open the code editor which you can use to customize the contents of the text editor.

Remove the empty paragraphs by deleting the paragraph (<p>) tags. Then, wrap the table inside a division (<div>) with a class, to which we will be adding styles in the next steps.

Save the code by doing the following:

1. Click the Code View button.
2. Click the Close button.
3. Click the Submit button.

Stylesheets

Add a stylesheet with simple margin settings to align the table, the grid, and the header columns with the grids. Open the Stylesheets module from the dial menu and clicking Stylesheets.

Click the Add Stylesheet button.

Give a name to your stylesheet and paste our code into the editor. Replace the IDs of the Content and the Grid sections with those from your application.

Click the Update button to save the style. The table with multilevel headers is now ready. You can further improve the look-and-feel by applying your own style code, or by selecting from the built in themes in the Stylesheets module. The image below is from the same app with bluewhite.bootstrap.css style code applied.