Interactive Grid Column Groups, Frozen Columns, and Hidden Columns

Organizing Wide Grids

Interactive Grids with many columns become difficult to navigate. Users scroll horizontally and lose track of the identifier columns on the left. Column groups, frozen columns, and strategically hidden columns solve these usability problems without reducing the data available.

Frozen Columns

Frozen columns stay fixed on the left while the rest of the grid scrolls horizontally. Set the “Frozen” property on the first few identifier columns (like Order ID, Customer Name) so they are always visible regardless of horizontal scroll position. In the IG Attributes, set “Number of Frozen Columns” or set individual columns’ “Frozen” property to Yes.

// Or set programmatically in the IG initialization code
function(config) {
    config.defaultGridViewOptions = config.defaultGridViewOptions || {};
    config.defaultGridViewOptions.frozenColumns = 3;
    return config;
}

Column Groups

Column groups add a visual header that spans multiple related columns. For example, group “Ship To Address” over Street, City, State, and ZIP columns. Create column groups in the IG attributes and assign columns to them:

In the Page Designer, select the IG region and navigate to Column Groups. Create a group with a heading like “Shipping Address.” Then for each column that belongs to the group, set its “Column Group” property to the group you created. The group header appears as a spanning row above the individual column headers.

Hidden Columns

Include columns in the SQL query that you need for logic (like primary keys, foreign keys, or computation inputs) but that users do not need to see. Set these columns’ Type to “Hidden Column” in the IG column attributes. Hidden columns are still available in the IG model for JavaScript access and are submitted with the DML process, but they take no visual space.

Important: Do not confuse “Hidden Column” (column type) with “Server-Side Condition: Never” (which excludes the column entirely from the page). Hidden columns are in the DOM and accessible to JavaScript; columns with a Never condition are not rendered at all.

Default Column Visibility and Order

Users can show, hide, and reorder columns through the IG Actions menu. To set the initial defaults, configure columns in the Page Designer. To persist user preferences across sessions, ensure “Save User Report” is enabled in the IG attributes. For grids where you want to prevent users from changing the layout, disable the “Allow Users to Reorder Columns” and “Allow Users to Hide Columns” attributes.

Responsive Behavior

On narrow screens (mobile and small tablets), grids with many columns are problematic. Consider creating a separate single-record view or a Cards-based display for mobile users using APEX’s responsive template directives, and show the full IG only on desktop-width screens.