Row and Column States

SpreadJS allows you to configure styles according to the current state of the rows and columns. You can set all the states by using the GC.Spread.Sheets.RowColumnStates enumeration.

You can use rowStateRule or columnStateRule from ConditionalFormatting.RuleType enumeration options and then add the rule to specify the state.

The row and column states are based on conditional formatting so you can also use the ConditionalFormats class methods, addRowStateRule, and addColumnStateRule to add a row and column states.

Note: The row and column states do not support moving or copying the conditional format range.

Types of States

The following table lists all the available row and column state enumeration options in GC.Spread.Sheets.RowColumnStates.

Priority of States

If you set multiple states in the same direction and same range, the applied state style will have priority if the corresponding rows or columns meet different states at the same time.

The state priority is followed in the below order:

Edit > Hover > Active > Selected > Updated > Inserted > Dirty > Invalid.

The following code sample shows how to add row and column states using both ConditionalFormats class methods and by adding a new state rule.

$(document).ready(function () {
    // Set the number of sheets to 3.
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3 });
    var sheet = spread.getSheet(0);

    // Using a new state rule
    var cfs = sheet.conditionalFormats;            
    var ruleType = GC.Spread.Sheets.ConditionalFormatting.RuleType.rowStateRule;
    var hoverstate = GC.Spread.Sheets.RowColumnStates.hover;
    var style = new GC.Spread.Sheets.Style("yellow");
    var ranges = [new GC.Spread.Sheets.Range(-1, -1, -1, -1)];
    var rule = new GC.Spread.Sheets.ConditionalFormatting.StateRule(ruleType, hoverstate, style, ranges);
    cfs.addRule(rule);

    // Or
    
    // Using ConditionalFormats class methods
    var cfs1 = sheet.conditionalFormats;
    var style1 = new GC.Spread.Sheets.Style("lightblue");
    var columnRange = [new GC.Spread.Sheets.Range(-1, -1, -1, -1)];
    cfs1.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.selected, style1, columnRange); // adding column state

    var cfs2 = sheet.conditionalFormats;
    var style2 = new GC.Spread.Sheets.Style("pink");
    var rowRange2 = [new GC.Spread.Sheets.Range(-1, -1, -1, -1)];
    cfs2.addRowStateRule(GC.Spread.Sheets.RowColumnStates.dirty, style2, rowRange2); // adding row state
});

Multiple Styles in Non-Contiguous Ranges

SpreadJS allows you to apply multiple styling formats to non-contiguous ranges when setting the column or row states in worksheets.

You can use the addRowStateRule or addColumnStateRule method of ConditionalFormats class, which accepts the row-column state, applied style, and the cell range as its parameters. These state rule methods accept a single style for a range. However, for multiple ranges, an array of styles can be applied. 

The following code sample shows how to apply multiple styles in non-contiguous ranges on cell hover. 

// sample code
var state = GC.Spread.Sheets.RowColumnStates.hover;
var style1 = new GC.Spread.Sheets.Style("green"), style2 = new GC.Spread.Sheets.Style("red");
var range1 = new GC.Spread.Sheets.Range(1, 1, 10, 5), range2 = new GC.Spread.Sheets.Range(1, 7, 10, 5);
sheet.conditionalFormats.addRowStateRule(
    state,
    [style1, style2],
    [range1, range2]
);

While using the addRowStateRule or addColumnStateRule method, the style and range parameters must be paired, as the unpaired styles or ranges are ignored during rendering.

Note: The multiple styling format feature does not support the Insert state and TableSheets feature.