Section:

Spreadsheet Editor - Edit Mode

Spreadsheet Editor Edit mode allows users to modify and interact with spreadsheets using familiar grid-based, Excel-like interactions. Users can interact with cells, including:

  • Cell Formatting: Modify text size and color, fonts, border styles, cell colors, border colors, and text styling for bold, italic, underline, and strikethrough.
  • Formula and Function Support: Execute standard mathematical operations, statistical calculations, date/time functions, and other common formulas.
  • Dynamic Data Manipulation: Easily add, edit, and delete rows and columns. Seamlessly cut, copy, and paste data.
  • Cell Adjustments: Merge cells and preserve formatting.
  • File Support: Open and export files in .xlsx format.

Edit mode is ideal for tasks like data entry, adjusting cell styles, and organizing sheet content.

Users can click the dropdown on the Mode flyout in the upper right corner of the Spreadsheet Editor UI to switch between Viewing and Editing mode.

Spreadsheet Editor must be purchased as an add-on to your Web SDK subscription.

Screenshot of the Apryse SDK Spreadsheet Editor with labeled callouts highlighting UI features such as clipboard operations, a formula bar, cell fonts, cell styling, and sheet tabs.

Workbook

A workbook is the top-level container for all spreadsheet data. It includes multiple sheets and supports operations such as creating, removing, or switching sheets. Users can interact with the workbook through the UI or programmatically using the Workbook API. The workbook instance can be retrieved with the following sample:

JavaScript

1const { documentViewer, SpreadsheetEditor } = WebViewer.getInstance().Core;
2const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
3const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
4
5spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
6  spreadsheetEditorManager.setEditMode(SpreadsheetEditor.SpreadsheetEditorEditMode.EDITING);
7  const spreadsheetEditorDocument = documentViewer.getDocument().getSpreadsheetEditorDocument();
8  const workbook = spreadsheetEditorDocument.getWorkbook();
9});

Create sheets

The following code sample creates a new sheet using the Workbook.createSheet API after the editor is initialized:

JavaScript

1const { documentViewer, SpreadsheetEditor } = WebViewer.getInstance().Core;
2const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
3const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
4
5spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
6  spreadsheetEditorManager.setEditMode(SpreadsheetEditor.SpreadsheetEditorEditMode.EDITING);
7  const spreadsheetEditorDocument = documentViewer.getDocument().getSpreadsheetEditorDocument();
8  const workbook = spreadsheetEditorDocument.getWorkbook();
9  workbook.createSheet('New Sheet');
10});

Remove sheets

The following code sample removes a sheet using the Workbook.removeSheet API:

JavaScript

1const { documentViewer } = WebViewer.getInstance().Core;
2const spreadsheetEditorDocument = documentViewer.getDocument().getSpreadsheetEditorDocument();
3const workbook = spreadsheetEditorDocument.getWorkbook();
4workbook.removeSheet('New Sheet');

Set active sheet

The following code sample sets the last sheet of the workbook to be active using the Workbook.setActiveSheet API and Workbook.sheetCount property:

JavaScript

1const { documentViewer } = WebViewer.getInstance().Core;
2const spreadsheetEditorDocument = documentViewer.getDocument().getSpreadsheetEditorDocument();
3const workbook = spreadsheetEditorDocument.getWorkbook();
4workbook.setActiveSheet(workbook.sheetCount - 1);

Sheets

Sheets are tabbed pages within a workbook, each with its own grid of cells, or rows of cells. They help organize data into separate sections, like months, categories, or teams. Only the active sheet is visible and editable at a time. Sheets can also be managed programmatically for dynamic workflows. A sheet instance can be retrieved from a workbook instance using the Workbook.getSheet or Workbook.getSheetAt APIs:

JavaScript

1const { documentViewer } = WebViewer.getInstance().Core;
2const spreadsheetEditorDocument = documentViewer.getDocument().getSpreadsheetEditorDocument();
3const workbook = spreadsheetEditorDocument.getWorkbook();
4workbook.getSheet('Invoice');
5
6// Alternatively, using the zero-based index API, you
7// can retrieve the first sheet in a workbook.
8workbook.getSheetAt(0);

Access rows

See the Row documentation for available APIs. The following code sample gets the first row from a sheet in a workbook:

JavaScript

1const { documentViewer } = WebViewer.getInstance().Core;
2const spreadsheetEditorDocument = documentViewer.getDocument().getSpreadsheetEditorDocument();
3const workbook = spreadsheetEditorDocument.getWorkbook();
4const sheet = workbook.getSheetAt(0);
5let row = sheet.getRowAt(0);
6
7// Alternatively, you can chain the methods together.
8row = spreadsheetEditorDocument
9  .getWorkbook()
10  .getSheetAt(0)
11  .getRowAt(0);
12
13console.log(row);

Add rows and columns

The following code sample shows how to add rows and columns to a sheet:

JavaScript

1const { documentViewer } = WebViewer.getInstance().Core;
2const spreadsheetEditorDocument = documentViewer.getDocument().getSpreadsheetEditorDocument();
3const workbook = spreadsheetEditorDocument.getWorkbook();
4const sheet = workbook.getSheetAt(0);
5
6const count = 5;
7const startIndex = 0;
8
9// Inserts 5 rows and columns at the first row and column of a sheet.
10sheet.createRows(startIndex, count);
11sheet.createColumns(startIndex, count);

Remove rows and columns

The following code sample shows how to remove rows and columns from a sheet:

JavaScript

1const { documentViewer } = WebViewer.getInstance().Core;
2const spreadsheetEditorDocument = documentViewer.getDocument().getSpreadsheetEditorDocument();
3const workbook = spreadsheetEditorDocument.getWorkbook();
4const sheet = workbook.getSheetAt(0);
5
6const count = 5;
7const startIndex = 0;
8
9// Removes 5 rows and columns starting from the top-left of a sheet.
10sheet.removeRows(startIndex, count);
11sheet.removeColumns(startIndex, count);

Cells

Cells are the basic building blocks of a spreadsheet, used to enter data, text, or formulas. Each is identified by its row and column (e.g., B2) and can be styled, merged, or formatted. Users can edit cells directly through the formula bar, or, programmatically via API.

Access a single cell

The following code sample shows how to access a cell programmatically using the Sheet APIs and alternative Row APIs:

JavaScript

1const { documentViewer } = WebViewer.getInstance().Core;
2const spreadsheetEditorDocument = documentViewer.getDocument().getSpreadsheetEditorDocument();
3const workbook = spreadsheetEditorDocument.getWorkbook();
4const sheet = workbook.getSheetAt(0);
5let cell = sheet.getRowAt(0).getCellAt(0);
6
7// Alternatively, you can call the Sheet.getCellAt API directly.
8cell = sheet.getCellAt(0, 0);

Access currently selected cells

The following code sample demonstrates how to programmatically access the currently selected cells using the following SpreadsheetEditorManager APIs:

  • getSelectedCells to retrieve a Cell[]
  • getSelectedCellRange to retrieve a CellRange

JavaScript

1const { documentViewer } = WebViewer.getInstance().Core;
2const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
3
4const cells = spreadsheetEditorManager.getSelectedCells();
5const cellRange = spreadsheetEditorManager.getSelectedCellRange();

Set a cell value

The following code sample shows how to set the value of cell using different types of values, including strings, booleans, numbers, and dates. See the Cell class documentation for a detailed look at the available APIs.

JavaScript

1const { documentViewer } = WebViewer.getInstance().Core;
2const spreadsheetEditorDocument = documentViewer.getDocument().getSpreadsheetEditorDocument();
3const cell = spreadsheetEditorDocument
4  .getWorkbook()
5  .getSheetAt(0)
6  .getRowAt(0)
7  .getCellAt(0);
8
9cell.setNumericValue(100);
10cell.setBooleanValue(false);
11cell.setFormula('=SUM(5, 5)');
12cell.setStringValue('Hello World');
13cell.setDateValue('2025-01-01 09:00:00');

Apply styles to a cell

The following code sample shows how to apply various styles to an individual cell using the Cell.setStyle and Workbook.createFont APIs:

JavaScript

1const { documentViewer, SpreadsheetEditor } = WebViewer.getInstance().Core;
2const spreadsheetEditorDocument = documentViewer.getDocument().getSpreadsheetEditorDocument();
3const workbook = spreadsheetEditorDocument.getWorkbook();
4const cell = workbook
5  .getSheetAt(0)
6  .getRowAt(0)
7  .getCellAt(0);
8  
9const font = workbook.createFont({
10  fontFace: 'Times New Roman',
11  pointSize: 12,
12  color: 'red',
13  bold: true,
14  italic: true,
15  underline: true
16});
17
18const cellStyle = cell.getStyle();
19cellStyle.font = font;
20cellStyle.horizontalAlignment = SpreadsheetEditor.Types.HorizontalAlignment.CENTER;
21cellStyle.verticalAlignment = SpreadsheetEditor.Types.VerticalAlignment.CENTER;
22cellStyle.backgroundColor = 'lightgreen';
23cellStyle.wrapText = SpreadsheetEditor.Types.TextWrap.OVERFLOW;
24
25cell.setStyle(cellStyle);

Apply styles to selected cells

The following code sample shows how to apply various styles to the actively selected cells using the SpreadsheetEditorManager.setSelectedCellsStyle API:

JavaScript

1const { documentViewer, SpreadsheetEditor } = WebViewer.getInstance().Core;
2const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
3
4const styleObject = {
5  verticalAlignment: SpreadsheetEditor.Types.VerticalAlignment.CENTER,
6  horizontalAlignment: SpreadsheetEditor.Types.HorizontalAlignment.CENTER,
7  font: {
8    fontFace: 'Times New Roman',
9    pointSize: 12,
10    color: '#000000',
11    bold: true,
12    italic: true,
13    underline: true,
14    strikeout: false
15  },
16}
17
18spreadsheetEditorManager.setSelectedCellsStyle(styleObject);

Formula Bar

The formula bar is where users can view and edit the contents of active cells. It serves as a single-line input field that supports both plain values and formulas (e.g., =A1+B1). When a cell is selected, its content automatically appears in the formula bar for quick inspection or modification.

Set a cell formula

The following code sample shows how to programmatically set a formula on a specific cell using the Cell.setFormula API:

JavaScript

1const { documentViewer } = WebViewer.getInstance().Core;
2const spreadsheetEditorDocument = documentViewer.getDocument().getSpreadsheetEditorDocument();
3const cell = spreadsheetEditorDocument
4  .getWorkbook()
5  .getSheetAt(0)
6  .getRowAt(0)
7  .getCellAt(0);
8
9cell.setFormula('=SUM(5, 95)');

Listen to formula bar events

The following events can be used for various formula bar functionality, including selection changes, text changes, retrieving formula lists, and fetching formula information.

formulaSearchEvent

The formulaSearchEvent event fires when a user types in the formula bar before confirming a formula. The editor returns a list of formulas that closely match the search query. The following code sample shows how to listen to the search event and logs out an array of results:

JavaScript

1const { documentViewer, SpreadsheetEditor } = WebViewer.getInstance().Core;
2const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
3
4const formulaSearchEventHandler = (event) => {
5  console.log(event.getFormulaInfoItems());
6};
7
8spreadsheetEditorManager.addEventListener(
9  SpreadsheetEditor.SpreadsheetEditorManager.Events.FORMULA_SEARCH,
10  formulaSearchEventHandler
11);

formulaHelpEvent

The formulaHelpEvent event fires when the selection of a formula is confirmed and returns formula name, description, and parameter information. The following code sample shows how to listen to the help event and logs out the available formula information using the getFormulaInfo event function:

JavaScript

1const { documentViewer, SpreadsheetEditor } = WebViewer.getInstance().Core;
2const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
3
4const formulaSearchEventHandler = (event) => {
5  const formulaInfo = event.getFormulaInfo();
6  if (formulaInfo) {
7    console.log(formulaInfo.name);
8    console.log(formulaInfo.description);
9    console.log(formulaInfo.details);
10    console.log(formulaInfo.parameters);
11  }
12};
13
14spreadsheetEditorManager.addEventListener(
15  SpreadsheetEditor.SpreadsheetEditorManager.Events.FORMULA_HELP,
16  formulaSearchEventHandler
17);

formulaBarTextChangedEvent

The formulaBarTextChangedEvent event fires when the formula bar text input changes. The following code shows how to listen to the text changed event and logs out each segment of the formula bar using the getInfo event function:

JavaScript

1const { documentViewer, SpreadsheetEditor } = WebViewer.getInstance().Core;
2const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
3
4const formulaBarTextChangedHandler = (event) => {
5  const segments = event.getInfo();
6  for (let i=0; i<segments.length; i++) {
7    console.log(`${segments[i].text} - ${segments[i].color}`);
8  }
9};
10
11spreadsheetEditorManager.addEventListener(
12  SpreadsheetEditor.SpreadsheetEditorManager.Events.FORMULA_BAR_TEXT_CHANGED,
13  formulaBarTextChangedHandler
14);

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales