[{"id":"dc3147d7-d3fb-4bc1-b1b3-142c0633e6d3","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ca5ca1be-6d75-4ad1-880e-1589e3d52695","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ea870089-5ea1-499a-bb0c-29cf378ead8d","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"d304d34f-f329-4f3b-b45e-2acb478427f8","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"3a79d24d-b853-4a51-a1e4-361feab06c57","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"5d31b3db-69bb-4388-9a57-450a63e44456","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"95e6d892-7bcd-4f6a-a152-504dec37c741","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ec137f4b-3069-487f-bb0c-69f40fe6805d","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"9a2b2f20-5f3d-43a4-90d0-6f517fd3eebc","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"8d43dc09-ddd1-4c42-8b02-90765c4c705b","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"a0c3d1e1-4a95-4eaf-808e-93242f2f9aee","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"bd44c5b0-cd6b-443c-95dc-b8d8054fe1d7","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"fd5ccaa1-50b7-4c33-9ec5-c1eb48317119","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]},{"id":"ea61139a-0ecf-45ba-83c3-c2f8b20a4126","tags":[{"name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d"}]},{"id":"ca986d5e-dfda-46e9-84f3-f44e4248ab94","tags":[{"name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99","links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce"}]}]
        
(Showing Draft Content)

Work with Rows and Columns

SpreadJS allows you to perform various operations on rows and columns as explained below:

Add Rows and Columns

You can add rows and columns using the addRows and addColumns methods. They accept parameters such as the row or column index and the number of rows and columns to add.


Add rows and columns in SpreadJS


The following code example shows how to add rows and columns.

function AddNewRow() {
    // Add one row to Row 2.  
    sheet.addRows(1, 1);
    sheet.setValue(1, 0, "Added row");
};

function AddNewCol() {
    // Add one column to Column 2.  
    sheet.addColumns(1, 1);
    sheet.setValue(0, 1, "Added column");
};

Delete Rows and Columns

You can delete rows and columns using the deleteRows and deleteColumns methods. They accept parameters such as the row or column index and the number of rows/columns to remove.


Delete rows and columns in SpreadJS


The following code example shows how to delete rows and columns.

function DeleteRow() {
    // Delete Row 2.
    sheet.deleteRows(1, 1);
}

function DeleteCol() {
    // Delete Column 2.
    sheet.deleteColumns(1, 1);                
}

Set Number of Rows and Columns

You can set the number of rows and columns to be displayed in a sheet using the setRowCount and setColumnCount methods. They accept parameters such as the row or column count and the sheet area.


Set row and column count in SpreadJS


The following code example shows how to set the number of rows and columns to 3 in a worksheet as shown in the above image.

// Configure Workbook and Worksheet
spread = new GC.Spread.Sheets.Workbook("ss");
sheet = spread.getActiveSheet();
         
// Set the number of rows and columns to 3.
sheet.setRowCount(3, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnCount(3, GC.Spread.Sheets.SheetArea.viewport);

Set Row Height and Column Width

You can adjust the row height and column width in a worksheet using the setRowHeight and setColumnWidth methods. They accept parameters such as the row/column index, value in pixels, and the sheet area.


Set row height and column width in SpreadJS


The following code example shows how to set the row height and column width in a worksheet to 90px and 120px respectively.

// Change the height of the second row.
sheet.setRowHeight(1, 90.0,GC.Spread.Sheets.SheetArea.viewport);
   
//Change the width of the second column.
sheet.setColumnWidth(1, 120.0,GC.Spread.Sheets.SheetArea.viewport);

Select and Deselect Rows and Columns

You can add a cell or a range of cells to a selection using the addSelection method. They accept parameters such as the row and column index of the first cell and the number of rows and columns to add or remove.


Similarly, you can clear the selection from a worksheet using the clearSelection method.


Select and deselect SpreadJS rows and columns


The following code example shows how to add or clear cell selections in a worksheet.

function AddSelection() {
    // Select entire row 4.
    sheet.addSelection(3, -1, 1, -1);
}

function ClearSelection() {
    // Remove the selections in the sheet.
    sheet.clearSelection();
}

Set Top Row and Column

You can choose to display or move the view to a specific row or column in the worksheet using the showRow and showColumn methods. They accept parameters such as the row or column index and the vertical or horizontal position according to the VerticalPosition and HorizontalPosition enumeration options.


Display specific row or column in SpreadJS


The following code example shows how to move the view to a specific row or column in the worksheet.

function ShowRow() {
    // Show Row 10.
    sheet.showRow(9, GC.Spread.Sheets.VerticalPosition.top);
};

function ShowCol() {
    // Show Column J.
    sheet.showColumn(9, GC.Spread.Sheets.HorizontalPosition.left);
};

Get Index of Displayed Cell

You can access information such as the index of the active cell using the following getViewport methods.

Method

Description

getViewportTopRow

Gets the index of the top row in the viewport.

getViewportBottomRow

Gets the index of the bottom row in the viewport.

getViewportLeftColumn

Gets the index of the left column in the viewport.

getViewportRightColumn

Gets the index of the right column in the viewport.

Get index of displayed cell in SpreadJS


The following code example shows how to get cell index according to the position of the row or column in the worksheet.

function GetCellIndex() {
    // Acquire top row (column) index
    var topRow = sheet.getViewportTopRow(1);
    var leftCol = sheet.getViewportLeftColumn(1);
    alert("Index of top row being displayed: " + topRow + "\n" + "Index of first column being displayed: " + leftCol);
}