Modify Cell Content - Shade Alternate Rows or Columns

From Q
Jump to: navigation, search

This rule adds color to alternate rows or columns in the table. You can choose which colors to use and whether to color the rows or columns.



How to apply this rule

For the first time in a project

  • Select the table(s)/chart(s) that you wish to apply the rule to.
  • Start typing the name of the Rule into the Search features and data box in the top right of the Q window.
  • Click on the Rule when it appears in the QScripts and Rules section of the search results.


  • Select Automate > Browse Online Library.
  • Choose this rule from the list.

Additional applications of the rule

  • Select a table or chart that has the rule and any table(s)/chart(s) that you wish to apply the rule to.
  • Click on the Rules tab (bottom-left of the table/chart).
  • Select the rule that you wish to apply.
  • Click on the Apply drop-down and choose your desired option.
  • Check New items to have it automatically applied to new items that you create. Use Edit > Project Options > Save as Template to create a new project template that automatically uses this rule.

Removing the rule

  • Select the table(s)/chart(s) that you wish to remove the rule from.
  • Press the Rules tab (bottom-right corner).
  • Press Apply next to the rule you wish to remove and choose the appropriate option.

How to modify the rule

  • Click on the Rules tab (bottom-left of the table/chart).
  • Select the rule that you wish to modify.
  • Click Edit Rule and make the desired changes. Alternatively, you can use the JavaScript below to make your own rule (see Customizing Rules).


// Rule to shade alternate rows.

shadeRowsOrColumns('AliceBlue', 'White', true);
// If use_row is true then rows will be shaded, otherwise columns will be shaded.
function shadeRowsOrColumns(primary_color, secondary_color, use_row) {
    // Determine colors
    var user_choice = shadingUserForm(primary_color, secondary_color, use_row);
    primary_color = user_choice.primary;
    secondary_color = user_choice.secondary;
    use_row = user_choice.useRow;
    // In newer versions we can allow the user to change the colors dynamically with color pickers.
    function shadingUserForm(primary_color, secondary_color, use_row) {
        // One dimensional tables do not have real columns, just statistics,
        // so only shading rows makes sense.
        var is_one_dimensional = table.columnLabels == null;
        if (is_one_dimensional)
            use_row = true;
        if (fileFormatVersion() > 8.12) {
            // Two color pickers
            var primary_color_picker = form.newColorPicker('primaryColor');
            var secondary_color_picker = form.newColorPicker('secondaryColor');
            // Option for rows and columns
            var row_column_option;
            var row_column_selection;
            if (!is_one_dimensional) {
                row_column_option = form.newComboBox('rowcol', ['Rows', 'Columns']);
                row_column_selection = row_column_option.getValue();
            } else {
                row_column_option = form.newLabel('Rows');
                row_column_selection = 'Rows';
            // Labels
            var label_1 = form.newLabel("Shade");
            var label_2 = form.newLabel("by");
            var label_3 = form.newLabel("and");
            // Set appearance of form and rule
            form.setInputControls([label_1, row_column_option, label_2, primary_color_picker, label_3, secondary_color_picker]);
            form.setHeading('Adding Color - Shade ' + row_column_selection);
            form.setSummary('Shade ' + row_column_selection);
            form.setOutputColors([primary_color_picker.getValue(), secondary_color_picker.getValue()]);
            primary_color = primary_color_picker.getValue();
            secondary_color = secondary_color_picker.getValue();
            if (!is_one_dimensional)
                use_row = row_column_selection == 'Rows';
        return {primary: primary_color, secondary: secondary_color, useRow: use_row};

    // Apply colors
    var colors = table.cellColors;
    for (var row = 0; row < table.numberRows; row++) {
        for (var col = 0; col < table.numberColumns; col++) {
            if (use_row)
                colors[row][col] = row % 2 == 0 ? primary_color : secondary_color;
                colors[row][col] = col % 2 == 0 ? primary_color : secondary_color;
    table.cellColors = colors;

Prior to the 15th of December, 2015, this page was known as Adding Color - Shade Rows or Columns

See also