SpreadJS 15
Features / TableSheet / TableSheet Appearance
In This Topic
    TableSheet Appearance
    In This Topic

    This topic covers tablesheet appearance and different ways to enhance the look and feel of a tablesheet.

    Alternate row styles

    TableSheet supports an alternating row style that allows you to visually distinguish between rows of similar form in the table to identify the content of the same row.

    You can specify the alternatingRowOptions of the TableSheet options with a step array to indicate one fill row and one blank row. Apply style using GC.Spread.Sheets.Style class.

    The following code sample shows how to add a hex color code as an alternate row style in tablesheet.

    Copy Code
    // create an alternating row style 
    sheet.options.alternatingRowOptions = { 
        step: [1, 2],
        style: new GC.Spread.Sheets.Style("#E6EF9D")


    TableSheet displays special icons for specific rows and columns. When the sheet zooms in, the icons become larger too.


    The table below describes all the available icons.

    Icon Description
    Indicates the row or column is pinned.
    Indicates the row is updated.
    Indicates the row is inserted.
    Indicates a new row can be added.
    Indicates the column is the primary key.
    Indicates the column is required.
    Indicates the column is locked.


    TableSheet provides many built-in themes which you can apply themes using the method applyTableTheme. The method accepts a GC.Spread.Sheets.Tables.TableTheme instance which consists of many properties such as firstRowStripStyle, headerRowStyle, and so on.

    The following code sample shows how to apply the built-in "professional5" theme in a tablesheet.

    Copy Code
    // apply theme to tablesheet variable