Modify Cell Content - Shade Alternate Rows or Columns

From Q
Jump to navigation Jump to 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.

includeWeb('Table JavaScript Utility Functions'); 


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
    let 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.
        let is_one_dimensional = table.columnLabels == null;
        if (is_one_dimensional)
            use_row = true;
        if (fileFormatVersion() > 8.12) {
            // Two color pickers
            let primary_color_picker = form.newColorPicker('primaryColor');
            let secondary_color_picker = form.newColorPicker('secondaryColor');
            // Option for rows and columns
            let row_column_option;
            let 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
            let label_1 = form.newLabel("Shade");
            let label_2 = form.newLabel("by");
            let label_3 = form.newLabel("and");
            // Set appearance of form and rule
            let description = form.newLabel('Apply an alternating color scheme to the rows or columns of the table');
            description.lineBreakAfter = true;
            form.setInputControls([description, label_1, row_column_option, label_2, primary_color_picker, label_3, secondary_color_picker]);
            form.setHeading('Shade Alternate Rows or Columns');
            form.setSummary('Shade ' + row_column_selection.toLowerCase());
            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
    let colors = table.cellColors;
    for (let row = 0; row < table.numberRows; row++) {
        for (let 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