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.
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
Save the code by doing the following:
- Click the Code View button.
- Click the Close button.
- Click the Submit button.
Click the Add Stylesheet button.
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.