We support 7 kinds of states in the row or column direction, and you can try them in different sheets in this demo.
States
Hover state
Hover row: hovering over a row
Hover column: hovering of a column
Invalid state
Invalid row: if one cell is invalid, then its row is invalid state
Invalid column: if one cell is invalid, then its column is invalid state
Edit state
Edit row: when editing a cell, then its row is edit state
Edit column: when editing a cell, then its column is edit state
Active state
Active row: the active row
Active column: the active column
Selected state
Selected row: when one cell is selected, then its row is selected state
Selected column: when one cell is selected, then its column is selected state
Dirty state
Dirty row: if one cell is dirty, then its row is dirty state
Dirty column: if one cell is dirty, then its column is dirty state
Inserted state
Inserted row: the inserted row
Invalid Formula
Invalid Formula row: if one cell is invalid formula, then its row is invalid formula state
Invalid Formula column: if one cell is invalid formula, then its column is invalid formula state
You could find them in GC.Spread.Sheets.RowColumnStates.
Add State Rule
The row state and column state is based on conditional formatting, so you could use addRowStateRule or addColumnStateRule:
Or you can also create a new StateRule, then use addRule. Here is same sample code:
Multiple Styles for Multiple Ranges
You could set multiple styles for multiple ranges.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbook-initialized="initSpread">
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
</div>
</template>
<script setup>
import { ref } from 'vue';
import '@mescius/spread-sheets-vue';
import GC from '@mescius/spread-sheets';
const suppliersData = [
["Id", "ContactName", "CompanyName", "Country", "phone"],
[4, "Yoshi Nagase", "Tokyo Traders", "Japan", "(03) 3555-5011"],
[5, "Antonio del Valle Saavedra", "Cooperativa de Quesos 'Las Cabras'", "Spain", "(98) 598 76 54"],
[6, "Mayumi Ohno", "Mayumi's", "Japan", "(06) 431-7877"],
[7, "Ian Devling", "Pavlova Ltd.", "Australia", "(03) 444-2343"],
[8, "Peter Wilson", "Specialty Biscuits Ltd.", "UK", "(161) 555-4448"],
[9, "Lars Peterson", "PB Knäckebröd AB", "Sweden", "031-987 65 43"],
[10, "Carlos Diaz", "Refrescos Americanas LTDA", "Brazil", "(11) 555 4640"],
[11, "Petra Winkler", "Heli Süßwaren GmbH & Co. KG", "Germany", "(010) 9984510"],
[2, "Shelley Burke", "New Orleans Cajun Delights", "USA", "(100) 555-4822"]
];
const ordersData = [
["Id", "CustomerId", "ShipVia", "shipName", "Freight"],
[10271, "SPLIR", 2, "Split Rail Beer & Ale", 4.54],
[10266, "WARTH", 3, "Wartian Herkku", 25.73],
[10279, "LEHMS", 2, "Lehmanns Marktstand", 25.83],
[10292, "TRADH", 2, "Tradiçao Hipermercados", 1.35],
[10295, "VINET", 2, "Vins et alcools Chevalier", 1.15],
[10313, "QUICK", 2, "QUICK-Stop", 1.96],
[10317, "LONEP", 1, "Lonesome Pine Restaurant", 12.69],
[10322, "PERIC", 3, "Pericles Comidas clásicas", 0.4],
[10320, "WARTH", 3, "Wartian Herkku", 34.57]
];
const productsData = [
["Id", "UnitPrice", "ProductName", "UnitsInStock", "QuantityPerUnit", "Discontinued"],
[4, 22, "Chef Anton's Cajun Seasoning", 53, "48 - 6 oz jars", true],
[5, 21.35, "Chef Anton's Gumbo Mix", 0, "36 boxes", true],
[6, 25, "Grandma's Boysenberry Spread", 120, "12 - 8 oz jars", false],
[7, 30, "Uncle Bob's Organic Dried Pears", 15, "12 - 1 lb pkgs.", false],
[8, 40, "Northwoods Cranberry Sauce", 6, "12 - 12 oz jars", false],
[9, 97, "Mishi Kobe Niku", 29, "18 - 500 g pkgs.", true],
[10, 31, "Ikura", 31, "12 - 200 ml jars", false],
[2, 19, "Chang", 17, "24 - 12 oz bottles", false],
[3, 10, "Aniseed Syrup", 13, "12 - 550 ml bottles", false],
[11, 21, "Queso Cabrales 2", 22, "1 kg pkg.", false],
[12, 38, "Queso Manchego La Pastora", 86, "10 - 500 g pkgs.", false],
[13, 6, "Konbu", 24, "2 kg box", false],
[14, 23.25, "Tofu", 35, "40 - 100 g pkgs.", false],
[15, 15.5, "Genen Shouyu", 39, "24 - 250 ml bottles", false],
[1, 18, "Chai", 39, "10 boxes x 20 bags", false],
[16, 17.45, "Pavlova", 29, "32 - 500 g boxes", false],
[17, 39, "Alice Mutton", 0, "20 - 1 kg tins", true],
[18, 62.5, "Carnarvon Tigers", 42, "16 kg pkg.", false],
[19, 9.2, "Teatime Chocolate Biscuits", 25, "10 boxes x 12 pieces", false],
[20, 81, "Sir Rodney's Marmalade", 40, "30 gift boxes", false],
[24, 4.5, "Guaraná Fantástica", 20, "12 - 355 ml cans", true]
];
const spread = ref(null);
const initSpread = (spreadInstance) => {
spread.value = spreadInstance;
spreadInstance.setSheetCount(8);
initHoverStateSheet(spreadInstance);
initEditStateSheet(spreadInstance);
initActiveStateSheet(spreadInstance);
initSelectedStateSheet(spreadInstance);
initDirtyStateSheet(spreadInstance);
initInsertedStateSheet(spreadInstance);
initInvalidStateSheet(spreadInstance);
initInvalidFormulaStateSheet(spreadInstance);
};
const initHoverStateSheet = (spread) => {
const sheet = spread.getSheet(0);
sheet.name("hover");
const description = "Use you mouse to hover the table cells.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const style1 = new GC.Spread.Sheets.Style("rgb(240, 67, 54)", "rgb(255, 255, 255)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction").font("bold 14.6667px Calibri");
sheet.tables.add("rowTable0", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.hover, [style, style1, style], [new GC.Spread.Sheets.Range(4, 1, 9, 2), new GC.Spread.Sheets.Range(4, 3, 9, 1), new GC.Spread.Sheets.Range(4, 4, 9, 2)]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction").font("bold 14.6667px Calibri");
sheet.tables.add("columnTable1", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.hover, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction").font("bold 14.6667px Calibri");
sheet.tables.add("bothTable2", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.hover, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.hover, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.resumePaint();
};
const initEditStateSheet = (spread) => {
const sheet = spread.getSheet(1);
sheet.name("edit");
const description = "Double click the table cells or input something directly to edit it.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction").font("bold 14.6667px Calibri");
sheet.tables.add("rowTable3", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.edit, style, [rowRange]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction").font("bold 14.6667px Calibri");
sheet.tables.add("columnTable4", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.edit, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction").font("bold 14.6667px Calibri");
sheet.tables.add("bothTable5", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.edit, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.edit, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.resumePaint();
};
const initActiveStateSheet = (spread) => {
const sheet = spread.getSheet(2);
sheet.name("active");
const description = "Focus table cells to active it.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction").font("bold 14.6667px Calibri");
sheet.tables.add("rowTable6", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.active, style, [rowRange]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction").font("bold 14.6667px Calibri");
sheet.tables.add("columnTable7", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.active, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction").font("bold 14.6667px Calibri");
sheet.tables.add("bothTable8", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.active, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.active, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.resumePaint();
};
const initSelectedStateSheet = (spread) => {
const sheet = spread.getSheet(3);
sheet.name("selected");
const description = "Select table cells, you could also use ctrl to multiple select or deselect.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction").font("bold 14.6667px Calibri");
sheet.tables.add("rowTable9", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.selected, style, [rowRange]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction").font("bold 14.6667px Calibri");
sheet.tables.add("columnTable10", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.selected, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction").font("bold 14.6667px Calibri");
sheet.tables.add("bothTable11", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.selected, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.selected, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.resumePaint();
};
const initDirtyStateSheet = (spread) => {
const sheet = spread.getSheet(4);
sheet.name("dirty");
const description = "Edit table cells value or insert rows to make them dirty.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction").font("bold 14.6667px Calibri")
sheet.tables.add("rowTable12", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.dirty, style, [rowRange]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction").font("bold 14.6667px Calibri")
sheet.tables.add("columnTable13", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.dirty, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction").font("bold 14.6667px Calibri")
sheet.tables.add("bothTable14", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.dirty, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.dirty, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.clearPendingChanges();
sheet.resumePaint();
};
const initInsertedStateSheet = (spread) => {
const sheet = spread.getSheet(5);
sheet.name("inserted");
const description = "Insert rows, not support the inserted column.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction").font("bold 14.6667px Calibri")
sheet.tables.add("rowTable15", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.inserted, style, [rowRange]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction").font("bold 14.6667px Calibri")
sheet.tables.add("columnTable16", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.inserted, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction").font("bold 14.6667px Calibri")
sheet.tables.add("bothTable17", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.inserted, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.inserted, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.clearPendingChanges();
sheet.resumePaint();
};
const initInvalidStateSheet = (spread) => {
spread.options.highlightInvalidData = true;
const sheet = spread.getSheet(6);
sheet.name("invalid");
const description = "Edit table cells value to make them invalid.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
const dv1 = new GC.Spread.Sheets.DataValidation.createListValidator('Japan, Spain, Australia, UK, Sweden, Brazil, Germany, USA');
dv1.inputTitle('Please choose a country:');
sheet.setDataValidator(rowRange.row, 4, rowRange.rowCount, 1, dv1);
const dv2 = new GC.Spread.Sheets.DataValidation.createNumberValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, 1, 3);
sheet.setDataValidator(columnRange.row, 3, columnRange.rowCount, 1, dv2);
const dv3 = new GC.Spread.Sheets.DataValidation.createNumberValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, 0, 120);
sheet.setDataValidator(bothRange.row, 10, bothRange.rowCount, 1, dv3);
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction(The validator is at the 'Country' column.)").font("bold 14.6667px Calibri")
sheet.tables.add("rowTable18", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.invalid, style, [rowRange]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction(The validator is at the 'ShipVia' column. The valid number is between 1 ~ 3)").font("bold 14.6667px Calibri")
sheet.tables.add("columnTable19", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.invalid, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction(The validator is at the 'UnitsInStock' column. The valid number is between 0 ~ 120)").font("bold 14.6667px Calibri")
sheet.tables.add("bothTable20", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.invalid, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.invalid, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.resumePaint();
};
const initInvalidFormulaStateSheet = (spread) => {
spread.options.allowInvalidFormula = true;
const sheet = spread.getSheet(7);
sheet.name("invalid formula");
const description = "Edit table cells value to invalid formula, such as '=SUM()'.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction").font("bold 14.6667px Calibri")
sheet.tables.add("rowTable21", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.invalidFormula, style, [rowRange]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction").font("bold 14.6667px Calibri")
sheet.tables.add("columnTable22", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.invalidFormula, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction").font("bold 14.6667px Calibri")
sheet.tables.add("bothTable23", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.invalidFormula, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.invalidFormula, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.resumePaint();
};
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.options-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
display: inline-block;
margin-bottom: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
