Insert table rows or ranges before or after defined row:
Delete table rows or ranges:
Insert table columns or ranges before or after defined column:
Delete table columns or ranges:
Convert table to ranges through the existing API with options to keepData and keepStyle.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
// import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets } from '@mescius/spread-sheets-react';
let spread = null;
export function AppFunc() {
const [tableOption, setTableOption] = React.useState({
insertRowValue: null,
insertRowCountValue: null,
isInsertAfterRow: false,
deleteRowValue: null,
deleteRowCountValue: null,
insertColValue: null,
insertColCountValue: null,
isInsertAfterCol: false,
deleteColValue: null,
deleteColCountValue: null
});
const initSpread = (currSpread) => {
spread = currSpread;
spread.fromJSON({ "version": "14.0.7", "tabStripRatio": 0.6, "customList": [], "sheets": { "Sheet1": { "name": "Sheet1", "isSelected": true, "rowCount": 100, "columnCount": 100, "activeRow": 2, "activeCol": 1, "theme": { "name": "Office", "themeColor": { "name": "Office", "background1": { "a": 255, "r": 255, "g": 255, "b": 255 }, "background2": { "a": 255, "r": 231, "g": 230, "b": 230 }, "text1": { "a": 255, "r": 0, "g": 0, "b": 0 }, "text2": { "a": 255, "r": 68, "g": 84, "b": 106 }, "accent1": { "a": 255, "r": 68, "g": 114, "b": 196 }, "accent2": { "a": 255, "r": 237, "g": 125, "b": 49 }, "accent3": { "a": 255, "r": 165, "g": 165, "b": 165 }, "accent4": { "a": 255, "r": 255, "g": 192, "b": 0 }, "accent5": { "a": 255, "r": 91, "g": 155, "b": 213 }, "accent6": { "a": 255, "r": 112, "g": 173, "b": 71 }, "hyperlink": { "a": 255, "r": 5, "g": 99, "b": 193 }, "followedHyperlink": { "a": 255, "r": 149, "g": 79, "b": 114 } }, "headingFont": "Calibri Light", "bodyFont": "Calibri" }, "data": { "dataTable": { "1": { "1": { "value": "Order", "style": "__builtInTableStyle0__builtInStyle2" }, "2": { "value": "Item", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": "Units", "style": "__builtInTableStyle0__builtInStyle2" }, "4": { "value": "Cost", "style": "__builtInTableStyle0__builtInStyle2" } }, "2": { "1": { "value": "/OADate(41280)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pencil", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 95, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "1,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "3": { "1": { "value": "/OADate(41337)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "binder", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 45, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "4,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "4": { "1": { "value": "/OADate(41342)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pent set", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 60, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "15,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "5": { "1": { "value": "/OADate(41337)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pencil", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 16, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "1,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "6": { "1": { "value": "/OADate(41342)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "binder", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 95, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "4,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "7": { "1": { "value": "/OADate(41890)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pent set", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 60, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "15,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "8": { "1": { "value": "/OADate(41672)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pencil", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 12, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "1,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "9": { "1": { "value": "/OADate(41280)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "binder", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 65, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "4,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "10": { "1": { "value": "/OADate(41337)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pent set", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 45, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "15,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "11": { "1": { "value": "/OADate(41342)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pencil", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 14, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "1,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "12": { "1": { "value": "/OADate(41890)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "binder", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 9, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "4,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "13": { "1": { "value": "/OADate(41672)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pent set", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 33, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "15,99 $", "style": "__builtInTableStyle0__builtInStyle2" } } }, "defaultDataNode": { "style": { "backColor": null, "foreColor": "Text 1 0", "vAlign": 2, "font": "normal normal 14.7px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "diagonalDown": null, "diagonalUp": null } } }, "rowHeaderData": { "defaultDataNode": { "style": { "themeFont": "Body" } } }, "colHeaderData": { "defaultDataNode": { "style": { "themeFont": "Body" } } }, "rows": [null, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }], "columns": [null, { "size": 105 }, { "size": 119 }, { "size": 113 }, { "size": 114 }], "leftCellIndex": 0, "topCellIndex": 0, "selections": { "0": { "row": 2, "rowCount": 1, "col": 1, "colCount": 1 }, "length": 1 }, "defaults": { "colHeaderRowHeight": 20, "colWidth": 64, "rowHeaderColWidth": 40, "rowHeight": 19.2, "_isExcelDefaultColumnWidth": true }, "rowOutlines": { "items": [] }, "columnOutlines": { "items": [] }, "cellStates": {}, "outlineColumnOptions": {}, "autoMergeRangeInfos": [], "tables": [{ "name": "Table1", "row": 1, "col": 1, "rowCount": 13, "colCount": 4, "style": { "buildInName": "Medium18" }, "rowFilter": { "range": { "row": 2, "rowCount": 12, "col": 1, "colCount": 4 }, "typeName": "HideRowFilter", "dialogVisibleInfo": {}, "filterButtonVisibleInfo": { "0": true, "1": true, "2": true, "3": true }, "showFilterButton": true }, "columns": [{ "id": 1, "name": "Order" }, { "id": 2, "name": "Item" }, { "id": 3, "name": "Units" }, { "id": 4, "name": "Cost" }] }], "index": 0 } }, "namedStyles": [{ "backColor": "Accent 1 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent1" }, { "backColor": "Accent 2 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent2" }, { "backColor": "Accent 3 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent3" }, { "backColor": "Accent 4 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent4" }, { "backColor": "Accent 5 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent5" }, { "backColor": "Accent 6 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent6" }, { "backColor": "Accent 1 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent1" }, { "backColor": "Accent 2 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent2" }, { "backColor": "Accent 3 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent3" }, { "backColor": "Accent 4 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent4" }, { "backColor": "Accent 5 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent5" }, { "backColor": "Accent 6 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent6" }, { "backColor": "Accent 1 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent1" }, { "backColor": "Accent 2 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent2" }, { "backColor": "Accent 3 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent3" }, { "backColor": "Accent 4 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent4" }, { "backColor": "Accent 5 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent5" }, { "backColor": "Accent 6 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent6" }, { "backColor": "Accent 1 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent1" }, { "backColor": "Accent 2 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent2" }, { "backColor": "Accent 3 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent3" }, { "backColor": "Accent 4 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent4" }, { "backColor": "Accent 5 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent5" }, { "backColor": "Accent 6 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent6" }, { "backColor": "#ffc7ce", "foreColor": "#9c0006", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Bad" }, { "backColor": "#f2f2f2", "foreColor": "#fa7d00", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": { "color": "#7f7f7f", "style": 1 }, "borderTop": { "color": "#7f7f7f", "style": 1 }, "borderRight": { "color": "#7f7f7f", "style": 1 }, "borderBottom": { "color": "#7f7f7f", "style": 1 }, "name": "Calculation", "diagonalDown": null, "diagonalUp": null }, { "backColor": "#a5a5a5", "foreColor": "Background 1 0", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": { "color": "#3f3f3f", "style": 6 }, "borderTop": { "color": "#3f3f3f", "style": 6 }, "borderRight": { "color": "#3f3f3f", "style": 6 }, "borderBottom": { "color": "#3f3f3f", "style": 6 }, "name": "Check Cell", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "formatter": "_(* #,##0.00_);_(* (#,##0.00);_(* \"-\"??_);_(@_)", "name": "Comma" }, { "backColor": null, "formatter": "_(* #,##0_);_(* (#,##0);_(* \"-\"_);_(@_)", "name": "Comma [0]" }, { "backColor": null, "formatter": "_(\"$\"* #,##0.00_);_(\"$\"* (#,##0.00);_(\"$\"* \"-\"??_);_(@_)", "name": "Currency" }, { "backColor": null, "formatter": "_(\"$\"* #,##0_);_(\"$\"* (#,##0);_(\"$\"* \"-\"_);_(@_)", "name": "Currency [0]" }, { "backColor": null, "foreColor": "#7f7f7f", "font": "italic normal 14.7px Calibri", "themeFont": "Body", "name": "Explanatory Text" }, { "backColor": "#c6efce", "foreColor": "#006100", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Good" }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 20px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": { "color": "Accent 1 0", "style": 5 }, "name": "Heading 1", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 17.3px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": { "color": "Accent 1 50", "style": 5 }, "name": "Heading 2", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": { "color": "Accent 1 40", "style": 2 }, "name": "Heading 3", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "name": "Heading 4" }, { "backColor": "#ffcc99", "foreColor": "#3f3f76", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "borderLeft": { "color": "#7f7f7f", "style": 1 }, "borderTop": { "color": "#7f7f7f", "style": 1 }, "borderRight": { "color": "#7f7f7f", "style": 1 }, "borderBottom": { "color": "#7f7f7f", "style": 1 }, "name": "Input", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "#fa7d00", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": { "color": "#ff8001", "style": 6 }, "name": "Linked Cell", "diagonalDown": null, "diagonalUp": null }, { "backColor": "#ffeb9c", "foreColor": "#9c6500", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Neutral" }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 3, "vAlign": 2, "font": "normal normal 14.7px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "Normal", "diagonalDown": null, "diagonalUp": null }, { "backColor": "#ffffcc", "borderLeft": { "color": "#b2b2b2", "style": 1 }, "borderTop": { "color": "#b2b2b2", "style": 1 }, "borderRight": { "color": "#b2b2b2", "style": 1 }, "borderBottom": { "color": "#b2b2b2", "style": 1 }, "name": "Note", "diagonalDown": null, "diagonalUp": null }, { "backColor": "#f2f2f2", "foreColor": "#3f3f3f", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": { "color": "#3f3f3f", "style": 1 }, "borderTop": { "color": "#3f3f3f", "style": 1 }, "borderRight": { "color": "#3f3f3f", "style": 1 }, "borderBottom": { "color": "#3f3f3f", "style": 1 }, "name": "Output", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "formatter": "0%", "name": "Percent" }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 24px Calibri Light", "themeFont": "Headings", "name": "Title" }, { "backColor": null, "foreColor": "Text 1 0", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": { "color": "Accent 1 0", "style": 1 }, "borderRight": null, "borderBottom": { "color": "Accent 1 0", "style": 6 }, "name": "Total", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "#ff0000", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Warning Text" }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 3, "vAlign": 2, "font": "normal normal 14.7px Calibri", "themeFont": "Body", "formatter": "General", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInStyle1", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 3, "vAlign": 2, "font": "normal normal 13.3px Calibri", "themeFont": "Body", "formatter": "General", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInStyle2", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 0, "vAlign": 2, "font": "normal normal 13.3px Calibri", "themeFont": "Body", "formatter": "yyyy\\-mm\\-dd;@", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInStyle3", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 0, "vAlign": 2, "font": "normal normal 13.3px Calibri", "themeFont": "Body", "formatter": "General", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInStyle4", "diagonalDown": null, "diagonalUp": null }, { "hAlign": 3, "vAlign": 2, "font": "normal normal 13.3px Calibri", "themeFont": "Body", "formatter": "General", "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInTableStyle0__builtInStyle2", "diagonalDown": null, "diagonalUp": null }, { "hAlign": 0, "vAlign": 2, "font": "normal normal 13.3px Calibri", "themeFont": "Body", "formatter": "yyyy\\-mm\\-dd;@", "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInTableStyle1__builtInStyle3", "diagonalDown": null, "diagonalUp": null }, { "hAlign": 0, "vAlign": 2, "font": "normal normal 13.3px Calibri", "themeFont": "Body", "formatter": "General", "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInTableStyle2__builtInStyle4", "diagonalDown": null, "diagonalUp": null }] }
);
}
const onInsertAfterRow = (e) => {
setTableOption({ ...tableOption, isInsertAfterRow: e.target.checked });
}
const onInsertRowsClickEvent = (e) => {
let sheet = spread.getActiveSheet();
let table = sheet.tables.findByName('Table1');
if (table) {
try {
var row = parseInt(tableOption.insertRowValue);
var count = parseInt(tableOption.insertRowCountValue);
var isAfter = tableOption.isInsertAfterRow;
if (!isNaN(row) && !isNaN(count) && row > -1 && count > -1) {
table.insertRows(row - table.dataRange().row, count, isAfter);
} else {
alert("Row, Count must be a positive number");
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
const onDeleteRowsClickEvent = (e) => {
let sheet = spread.getActiveSheet();
let table = sheet.tables.findByName('Table1');
if (table) {
try {
var row = parseInt(tableOption.deleteRowValue);
var count = parseInt(tableOption.deleteRowCountValue);
if (!isNaN(row) && !isNaN(count) && row > -1 && count > -1) {
table.deleteRows(row - table.dataRange().row, count);
} else {
alert("Row, Count must be a positive number");
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
const onInsertAfterCol = (e) => {
setTableOption({ ...tableOption, isInsertAfterCol: e.target.checked });
}
const onInsertColumnsClickEvent = (e) => {
let sheet = spread.getActiveSheet();
let table = sheet.tables.findByName('Table1');
if (table) {
try {
var col = parseInt(tableOption.insertColValue);
var count = parseInt(tableOption.insertColCountValue);
var isAfter = tableOption.isInsertAfterCol;
if (!isNaN(col) && !isNaN(count) && col > -1 && count > -1) {
table.insertColumns(col - table.dataRange().col, count, isAfter);
} else {
alert("Col, Count must be a positive number");
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
const onDeleteColumnsClickEvent = (e) => {
let sheet = spread.getActiveSheet();
let table = sheet.tables.findByName('Table1');
if (table) {
try {
var col = parseInt(tableOption.deleteColValue);
var count = parseInt(tableOption.deleteColCountValue);
if (!isNaN(col) && !isNaN(count) && col > -1 && count > -1) {
table.deleteColumns(col - table.dataRange().col, count);
} else {
alert("Col, Count must be a positive number");
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
const onTableToRangeClickEvent = (e) => {
let sheet = spread.getActiveSheet();
let table = sheet.tables.findByName('Table1');
try {
if (table) {
sheet.tables.remove(table, GC.Spread.Sheets.Tables.TableRemoveOptions.keepData | GC.Spread.Sheets.Tables.TableRemoveOptions.keepStyle);
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
const onInsertRowChange = (e) => {
setTableOption({ ...tableOption, insertRowValue: e.target.value });
}
const onInsertRowCountChange = (e) => {
setTableOption({ ...tableOption, insertRowCountValue: e.target.value });
}
const onDeleteRowChange = (e) => {
setTableOption({ ...tableOption, deleteRowValue: e.target.value });
}
const onDeleteRowCountChange = (e) => {
setTableOption({ ...tableOption, deleteRowCountValue: e.target.value });
}
const onInsertColChange = (e) => {
setTableOption({ ...tableOption, insertColValue: e.target.value });
}
const onInsertColCountChange = (e) => {
setTableOption({ ...tableOption, insertColCountValue: e.target.value });
}
const onDeleteColChange = (e) => {
setTableOption({ ...tableOption, deleteColValue: e.target.value });
}
const onDeleteColCountChange = (e) => {
setTableOption({ ...tableOption, deleteColCountValue: e.target.value });
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
</SpreadSheets>
</div>
<Panel
insertRowValue={tableOption.insertRowValue}
insertRowCountValue={tableOption.insertRowCountValue}
isInsertAfterRow={tableOption.isInsertAfterRow}
deleteRowValue={tableOption.deleteRowValue}
deleteRowCountValue={tableOption.deleteRowCountValue}
insertColValue={tableOption.insertColValue}
insertColCountValue={tableOption.insertColCountValue}
isInsertAfterCol={tableOption.isInsertAfterCol}
deleteColValue={tableOption.deleteColValue}
deleteColCountValue={tableOption.deleteColCountValue}
onInsertAfterRow={onInsertAfterRow}
onInsertRowsClickEvent={onInsertRowsClickEvent}
onDeleteRowsClickEvent={onDeleteRowsClickEvent}
onInsertAfterCol={onInsertAfterCol}
onInsertColumnsClickEvent={(e) => { onInsertColumnsClickEvent(e) }}
onDeleteColumnsClickEvent={(e) => { onDeleteColumnsClickEvent(e) }}
onTableToRangeClickEvent={(e) => { onTableToRangeClickEvent(e) }}
onInsertRowChange={(e) => { onInsertRowChange(e) }}
onInsertRowCountChange={(e) => { onInsertRowCountChange(e) }}
onDeleteRowChange={(e) => { onDeleteRowChange(e) }}
onDeleteRowCountChange={(e) => { onDeleteRowCountChange(e) }}
onInsertColChange={(e) => { onInsertColChange(e) }}
onInsertColCountChange={(e) => { onInsertColCountChange(e) }}
onDeleteColChange={(e) => { onDeleteColChange(e) }}
onDeleteColCountChange={(e) => { onDeleteColCountChange(e) }}
/>
</div>
);
}
function Panel(props) {
const {
insertRowValue,
insertRowCountValue,
isInsertAfterRow,
deleteRowValue,
deleteRowCountValue,
insertColValue,
insertColCountValue,
isInsertAfterCol,
deleteColValue,
deleteColCountValue,
onInsertAfterRow,
onInsertRowsClickEvent,
onDeleteRowsClickEvent,
onInsertAfterCol,
onInsertColumnsClickEvent,
onDeleteColumnsClickEvent,
onTableToRangeClickEvent,
onInsertRowChange,
onInsertRowCountChange,
onDeleteRowChange,
onDeleteRowCountChange,
onInsertColChange,
onInsertColCountChange,
onDeleteColChange,
onDeleteColCountChange
} = props;
return (
<div class="options-container">
<p>Try inserting and remove rows and columns with the following fields and buttons. Simply enter a specific row or column index, and then the number of rows or columns to add.</p>
<div class="option-group">
<label for="insertRowIndex">Row:</label>
<input type="text" id="insertRowIndex" value={insertRowValue} onChange={(e) => { onInsertRowChange(e) }} />
<label for="insertRowCount">Count:</label>
<input type="text" id="insertRowCount" value={insertRowCountValue} onChange={(e) => { onInsertRowCountChange(e) }} />
<input class="options-input" type="checkbox" id="insertAfterRow" checked={isInsertAfterRow} onChange={(e) => { onInsertAfterRow(e) }} />
<label for="insertAfterRow">Insert after Current RowIndex</label>
<input type="button" id="insertRows" value="Insert Rows" onClick={(e) => { onInsertRowsClickEvent(e) }} />
</div>
<div class="option-group">
<label for="deleteRowIndex">Row:</label>
<input type="text" id="deleteRowIndex" value={deleteRowValue} onChange={(e) => { onDeleteRowChange(e) }} />
<label for="deleteRowCount">Count:</label>
<input type="text" id="deleteRowCount" value={deleteRowCountValue} onChange={(e) => { onDeleteRowCountChange(e) }} />
<input type="button" id="deleteRows" value="Delete Rows" onClick={(e) => { onDeleteRowsClickEvent(e) }} />
</div>
<div class="option-group">
<label for="insertColIndex">Column:</label>
<input type="text" id="insertColIndex" value={insertColValue} onChange={(e) => { onInsertColChange(e) }} />
<label for="insertColCount">Count:</label>
<input type="text" id="insertColCount" value={insertColCountValue} onChange={(e) => { onInsertColCountChange(e) }} />
<input class="options-input" type="checkbox" id="insertAfterCol" checked={isInsertAfterCol} onChange={(e) => { onInsertAfterCol(e) }} />
<label for="insertAfterCol">Insert after Current ColIndex</label>
<input type="button" id="insertColumns" value="Insert Columns" onClick={(e) => { onInsertColumnsClickEvent(e) }} />
</div>
<div class="option-group">
<label for="deleteColIndex">Column:</label>
<input type="text" id="deleteColIndex" value={deleteColValue} onChange={(e) => { onDeleteColChange(e) }} />
<label for="deleteColCount">Count:</label>
<input type="text" id="deleteColCount" value={deleteColCountValue} onChange={(e) => { onDeleteColCountChange(e) }} />
<input type="button" id="deleteColumns" value="Delete Columns" onClick={(e) => { onDeleteColumnsClickEvent(e) }} />
</div>
<p>Click on this button to convert the table to a range of cells with the same styles applied.</p>
<div class="option-group">
<input type="button" id="tableToRange" value="Table to Range" onClick={(e) => { onTableToRangeClickEvent(e) }} />
</div>
</div>
)
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets } from '@mescius/spread-sheets-react';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.state = {
insertRowValue: null,
insertRowCountValue: null,
isInsertAfterRow: false,
deleteRowValue: null,
deleteRowCountValue: null,
insertColValue: null,
insertColCountValue: null,
isInsertAfterCol: false,
deleteColValue: null,
deleteColCountValue: null
};
}
render() {
const {
insertRowValue,
insertRowCountValue,
isInsertAfterRow,
deleteRowValue,
deleteRowCountValue,
insertColValue,
insertColCountValue,
isInsertAfterCol,
deleteColValue,
deleteColCountValue
} = this.state;
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
</SpreadSheets>
</div>
<Panel
insertRowValue={insertRowValue}
insertRowCountValue={insertRowCountValue}
isInsertAfterRow={isInsertAfterRow}
deleteRowValue={deleteRowValue}
deleteRowCountValue={deleteRowCountValue}
insertColValue={insertColValue}
insertColCountValue={insertColCountValue}
isInsertAfterCol={isInsertAfterCol}
deleteColValue={deleteColValue}
deleteColCountValue={deleteColCountValue}
onInsertAfterRow={this.onInsertAfterRow.bind(this)}
onInsertRowsClickEvent={this.onInsertRowsClickEvent.bind(this)}
onDeleteRowsClickEvent={this.onDeleteRowsClickEvent.bind(this)}
onInsertAfterCol={this.onInsertAfterCol.bind(this)}
onInsertColumnsClickEvent={(e) => { this.onInsertColumnsClickEvent(e) }}
onDeleteColumnsClickEvent={(e) => { this.onDeleteColumnsClickEvent(e) }}
onTableToRangeClickEvent={(e) => { this.onTableToRangeClickEvent(e) }}
onInsertRowChange={(e) => { this.onInsertRowChange(e) }}
onInsertRowCountChange={(e) => { this.onInsertRowCountChange(e) }}
onDeleteRowChange={(e) => { this.onDeleteRowChange(e) }}
onDeleteRowCountChange={(e) => { this.onDeleteRowCountChange(e) }}
onInsertColChange={(e) => { this.onInsertColChange(e) }}
onInsertColCountChange={(e) => { this.onInsertColCountChange(e) }}
onDeleteColChange={(e) => { this.onDeleteColChange(e) }}
onDeleteColCountChange={(e) => { this.onDeleteColCountChange(e) }}
/>
</div>
);
}
initSpread(spread) {
this.spread = spread;
spread.fromJSON({ "version": "14.0.7", "tabStripRatio": 0.6, "customList": [], "sheets": { "Sheet1": { "name": "Sheet1", "isSelected": true, "rowCount": 100, "columnCount": 100, "activeRow": 2, "activeCol": 1, "theme": { "name": "Office", "themeColor": { "name": "Office", "background1": { "a": 255, "r": 255, "g": 255, "b": 255 }, "background2": { "a": 255, "r": 231, "g": 230, "b": 230 }, "text1": { "a": 255, "r": 0, "g": 0, "b": 0 }, "text2": { "a": 255, "r": 68, "g": 84, "b": 106 }, "accent1": { "a": 255, "r": 68, "g": 114, "b": 196 }, "accent2": { "a": 255, "r": 237, "g": 125, "b": 49 }, "accent3": { "a": 255, "r": 165, "g": 165, "b": 165 }, "accent4": { "a": 255, "r": 255, "g": 192, "b": 0 }, "accent5": { "a": 255, "r": 91, "g": 155, "b": 213 }, "accent6": { "a": 255, "r": 112, "g": 173, "b": 71 }, "hyperlink": { "a": 255, "r": 5, "g": 99, "b": 193 }, "followedHyperlink": { "a": 255, "r": 149, "g": 79, "b": 114 } }, "headingFont": "Calibri Light", "bodyFont": "Calibri" }, "data": { "dataTable": { "1": { "1": { "value": "Order", "style": "__builtInTableStyle0__builtInStyle2" }, "2": { "value": "Item", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": "Units", "style": "__builtInTableStyle0__builtInStyle2" }, "4": { "value": "Cost", "style": "__builtInTableStyle0__builtInStyle2" } }, "2": { "1": { "value": "/OADate(41280)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pencil", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 95, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "1,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "3": { "1": { "value": "/OADate(41337)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "binder", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 45, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "4,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "4": { "1": { "value": "/OADate(41342)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pent set", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 60, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "15,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "5": { "1": { "value": "/OADate(41337)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pencil", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 16, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "1,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "6": { "1": { "value": "/OADate(41342)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "binder", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 95, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "4,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "7": { "1": { "value": "/OADate(41890)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pent set", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 60, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "15,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "8": { "1": { "value": "/OADate(41672)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pencil", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 12, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "1,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "9": { "1": { "value": "/OADate(41280)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "binder", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 65, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "4,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "10": { "1": { "value": "/OADate(41337)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pent set", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 45, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "15,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "11": { "1": { "value": "/OADate(41342)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pencil", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 14, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "1,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "12": { "1": { "value": "/OADate(41890)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "binder", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 9, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "4,99 $", "style": "__builtInTableStyle0__builtInStyle2" } }, "13": { "1": { "value": "/OADate(41672)/", "style": "__builtInTableStyle1__builtInStyle3" }, "2": { "value": "pent set", "style": "__builtInTableStyle0__builtInStyle2" }, "3": { "value": 33, "style": "__builtInTableStyle2__builtInStyle4" }, "4": { "value": "15,99 $", "style": "__builtInTableStyle0__builtInStyle2" } } }, "defaultDataNode": { "style": { "backColor": null, "foreColor": "Text 1 0", "vAlign": 2, "font": "normal normal 14.7px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "diagonalDown": null, "diagonalUp": null } } }, "rowHeaderData": { "defaultDataNode": { "style": { "themeFont": "Body" } } }, "colHeaderData": { "defaultDataNode": { "style": { "themeFont": "Body" } } }, "rows": [null, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }, { "size": 19 }], "columns": [null, { "size": 105 }, { "size": 119 }, { "size": 113 }, { "size": 114 }], "leftCellIndex": 0, "topCellIndex": 0, "selections": { "0": { "row": 2, "rowCount": 1, "col": 1, "colCount": 1 }, "length": 1 }, "defaults": { "colHeaderRowHeight": 20, "colWidth": 64, "rowHeaderColWidth": 40, "rowHeight": 19.2, "_isExcelDefaultColumnWidth": true }, "rowOutlines": { "items": [] }, "columnOutlines": { "items": [] }, "cellStates": {}, "outlineColumnOptions": {}, "autoMergeRangeInfos": [], "tables": [{ "name": "Table1", "row": 1, "col": 1, "rowCount": 13, "colCount": 4, "style": { "buildInName": "Medium18" }, "rowFilter": { "range": { "row": 2, "rowCount": 12, "col": 1, "colCount": 4 }, "typeName": "HideRowFilter", "dialogVisibleInfo": {}, "filterButtonVisibleInfo": { "0": true, "1": true, "2": true, "3": true }, "showFilterButton": true }, "columns": [{ "id": 1, "name": "Order" }, { "id": 2, "name": "Item" }, { "id": 3, "name": "Units" }, { "id": 4, "name": "Cost" }] }], "index": 0 } }, "namedStyles": [{ "backColor": "Accent 1 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent1" }, { "backColor": "Accent 2 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent2" }, { "backColor": "Accent 3 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent3" }, { "backColor": "Accent 4 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent4" }, { "backColor": "Accent 5 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent5" }, { "backColor": "Accent 6 80", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "20% - Accent6" }, { "backColor": "Accent 1 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent1" }, { "backColor": "Accent 2 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent2" }, { "backColor": "Accent 3 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent3" }, { "backColor": "Accent 4 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent4" }, { "backColor": "Accent 5 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent5" }, { "backColor": "Accent 6 60", "foreColor": "Text 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "40% - Accent6" }, { "backColor": "Accent 1 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent1" }, { "backColor": "Accent 2 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent2" }, { "backColor": "Accent 3 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent3" }, { "backColor": "Accent 4 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent4" }, { "backColor": "Accent 5 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent5" }, { "backColor": "Accent 6 40", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "60% - Accent6" }, { "backColor": "Accent 1 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent1" }, { "backColor": "Accent 2 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent2" }, { "backColor": "Accent 3 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent3" }, { "backColor": "Accent 4 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent4" }, { "backColor": "Accent 5 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent5" }, { "backColor": "Accent 6 0", "foreColor": "Background 1 0", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Accent6" }, { "backColor": "#ffc7ce", "foreColor": "#9c0006", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Bad" }, { "backColor": "#f2f2f2", "foreColor": "#fa7d00", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": { "color": "#7f7f7f", "style": 1 }, "borderTop": { "color": "#7f7f7f", "style": 1 }, "borderRight": { "color": "#7f7f7f", "style": 1 }, "borderBottom": { "color": "#7f7f7f", "style": 1 }, "name": "Calculation", "diagonalDown": null, "diagonalUp": null }, { "backColor": "#a5a5a5", "foreColor": "Background 1 0", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": { "color": "#3f3f3f", "style": 6 }, "borderTop": { "color": "#3f3f3f", "style": 6 }, "borderRight": { "color": "#3f3f3f", "style": 6 }, "borderBottom": { "color": "#3f3f3f", "style": 6 }, "name": "Check Cell", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "formatter": "_(* #,##0.00_);_(* (#,##0.00);_(* \"-\"??_);_(@_)", "name": "Comma" }, { "backColor": null, "formatter": "_(* #,##0_);_(* (#,##0);_(* \"-\"_);_(@_)", "name": "Comma [0]" }, { "backColor": null, "formatter": "_(\"$\"* #,##0.00_);_(\"$\"* (#,##0.00);_(\"$\"* \"-\"??_);_(@_)", "name": "Currency" }, { "backColor": null, "formatter": "_(\"$\"* #,##0_);_(\"$\"* (#,##0);_(\"$\"* \"-\"_);_(@_)", "name": "Currency [0]" }, { "backColor": null, "foreColor": "#7f7f7f", "font": "italic normal 14.7px Calibri", "themeFont": "Body", "name": "Explanatory Text" }, { "backColor": "#c6efce", "foreColor": "#006100", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Good" }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 20px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": { "color": "Accent 1 0", "style": 5 }, "name": "Heading 1", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 17.3px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": { "color": "Accent 1 50", "style": 5 }, "name": "Heading 2", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": { "color": "Accent 1 40", "style": 2 }, "name": "Heading 3", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "name": "Heading 4" }, { "backColor": "#ffcc99", "foreColor": "#3f3f76", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "borderLeft": { "color": "#7f7f7f", "style": 1 }, "borderTop": { "color": "#7f7f7f", "style": 1 }, "borderRight": { "color": "#7f7f7f", "style": 1 }, "borderBottom": { "color": "#7f7f7f", "style": 1 }, "name": "Input", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "#fa7d00", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": { "color": "#ff8001", "style": 6 }, "name": "Linked Cell", "diagonalDown": null, "diagonalUp": null }, { "backColor": "#ffeb9c", "foreColor": "#9c6500", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Neutral" }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 3, "vAlign": 2, "font": "normal normal 14.7px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "Normal", "diagonalDown": null, "diagonalUp": null }, { "backColor": "#ffffcc", "borderLeft": { "color": "#b2b2b2", "style": 1 }, "borderTop": { "color": "#b2b2b2", "style": 1 }, "borderRight": { "color": "#b2b2b2", "style": 1 }, "borderBottom": { "color": "#b2b2b2", "style": 1 }, "name": "Note", "diagonalDown": null, "diagonalUp": null }, { "backColor": "#f2f2f2", "foreColor": "#3f3f3f", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": { "color": "#3f3f3f", "style": 1 }, "borderTop": { "color": "#3f3f3f", "style": 1 }, "borderRight": { "color": "#3f3f3f", "style": 1 }, "borderBottom": { "color": "#3f3f3f", "style": 1 }, "name": "Output", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "formatter": "0%", "name": "Percent" }, { "backColor": null, "foreColor": "Text 2 0", "font": "normal bold 24px Calibri Light", "themeFont": "Headings", "name": "Title" }, { "backColor": null, "foreColor": "Text 1 0", "font": "normal bold 14.7px Calibri", "themeFont": "Body", "borderLeft": null, "borderTop": { "color": "Accent 1 0", "style": 1 }, "borderRight": null, "borderBottom": { "color": "Accent 1 0", "style": 6 }, "name": "Total", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "#ff0000", "font": "normal normal 14.7px Calibri", "themeFont": "Body", "name": "Warning Text" }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 3, "vAlign": 2, "font": "normal normal 14.7px Calibri", "themeFont": "Body", "formatter": "General", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInStyle1", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 3, "vAlign": 2, "font": "normal normal 13.3px Calibri", "themeFont": "Body", "formatter": "General", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInStyle2", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 0, "vAlign": 2, "font": "normal normal 13.3px Calibri", "themeFont": "Body", "formatter": "yyyy\\-mm\\-dd;@", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInStyle3", "diagonalDown": null, "diagonalUp": null }, { "backColor": null, "foreColor": "Text 1 0", "hAlign": 0, "vAlign": 2, "font": "normal normal 13.3px Calibri", "themeFont": "Body", "formatter": "General", "borderLeft": null, "borderTop": null, "borderRight": null, "borderBottom": null, "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInStyle4", "diagonalDown": null, "diagonalUp": null }, { "hAlign": 3, "vAlign": 2, "font": "normal normal 13.3px Calibri", "themeFont": "Body", "formatter": "General", "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInTableStyle0__builtInStyle2", "diagonalDown": null, "diagonalUp": null }, { "hAlign": 0, "vAlign": 2, "font": "normal normal 13.3px Calibri", "themeFont": "Body", "formatter": "yyyy\\-mm\\-dd;@", "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInTableStyle1__builtInStyle3", "diagonalDown": null, "diagonalUp": null }, { "hAlign": 0, "vAlign": 2, "font": "normal normal 13.3px Calibri", "themeFont": "Body", "formatter": "General", "locked": true, "textIndent": 0, "wordWrap": false, "name": "__builtInTableStyle2__builtInStyle4", "diagonalDown": null, "diagonalUp": null }] }
);
}
onInsertAfterRow(e) {
this.setState({ isInsertAfterRow: e.target.checked });
}
onInsertRowsClickEvent(e) {
let sheet = this.spread.getActiveSheet();
let table = sheet.tables.findByName('Table1');
if (table) {
try {
var row = parseInt(this.state.insertRowValue);
var count = parseInt(this.state.insertRowCountValue);
var isAfter = this.state.isInsertAfterRow;
if (!isNaN(row) && !isNaN(count) && row > -1 && count > -1) {
table.insertRows(row - table.dataRange().row, count, isAfter);
} else {
alert("Row, Count must be a positive number");
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
onDeleteRowsClickEvent(e) {
let sheet = this.spread.getActiveSheet();
let table = sheet.tables.findByName('Table1');
if (table) {
try {
var row = parseInt(this.state.deleteRowValue);
var count = parseInt(this.state.deleteRowCountValue);
if (!isNaN(row) && !isNaN(count) && row > -1 && count > -1) {
table.deleteRows(row - table.dataRange().row, count);
} else {
alert("Row, Count must be a positive number");
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
onInsertAfterCol(e) {
this.setState({ isInsertAfterCol: e.target.checked });
}
onInsertColumnsClickEvent(e) {
let sheet = this.spread.getActiveSheet();
let table = sheet.tables.findByName('Table1');
if (table) {
try {
var col = parseInt(this.state.insertColValue);
var count = parseInt(this.state.insertColCountValue);
var isAfter = this.state.isInsertAfterCol;
if (!isNaN(col) && !isNaN(count) && col > -1 && count > -1) {
table.insertColumns(col - table.dataRange().col, count, isAfter);
} else {
alert("Col, Count must be a positive number");
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
onDeleteColumnsClickEvent(e) {
let sheet = this.spread.getActiveSheet();
let table = sheet.tables.findByName('Table1');
if (table) {
try {
var col = parseInt(this.state.deleteColValue);
var count = parseInt(this.state.deleteColCountValue);
if (!isNaN(col) && !isNaN(count) && col > -1 && count > -1) {
table.deleteColumns(col - table.dataRange().col, count);
} else {
alert("Col, Count must be a positive number");
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
onTableToRangeClickEvent(e) {
let sheet = this.spread.getActiveSheet();
let table = sheet.tables.findByName('Table1');
try {
if (table) {
sheet.tables.remove(table, GC.Spread.Sheets.Tables.TableRemoveOptions.keepData | GC.Spread.Sheets.Tables.TableRemoveOptions.keepStyle);
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
onInsertRowChange(e) {
this.setState({ insertRowValue: e.target.value });
}
onInsertRowCountChange(e) {
this.setState({ insertRowCountValue: e.target.value });
}
onDeleteRowChange(e) {
this.setState({ deleteRowValue: e.target.value });
}
onDeleteRowCountChange(e) {
this.setState({ deleteRowCountValue: e.target.value });
}
onInsertColChange(e) {
this.setState({ insertColValue: e.target.value });
}
onInsertColCountChange(e) {
this.setState({ insertColCountValue: e.target.value });
}
onDeleteColChange(e) {
this.setState({ deleteColValue: e.target.value });
}
onDeleteColCountChange(e) {
this.setState({ deleteColCountValue: e.target.value });
}
}
class Panel extends Component {
constructor(props) {
super(props);
}
render() {
const {
insertRowValue,
insertRowCountValue,
isInsertAfterRow,
deleteRowValue,
deleteRowCountValue,
insertColValue,
insertColCountValue,
isInsertAfterCol,
deleteColValue,
deleteColCountValue,
onInsertAfterRow,
onInsertRowsClickEvent,
onDeleteRowsClickEvent,
onInsertAfterCol,
onInsertColumnsClickEvent,
onDeleteColumnsClickEvent,
onTableToRangeClickEvent,
onInsertRowChange,
onInsertRowCountChange,
onDeleteRowChange,
onDeleteRowCountChange,
onInsertColChange,
onInsertColCountChange,
onDeleteColChange,
onDeleteColCountChange
} = this.props;
return (
<div class="options-container">
<p>Try inserting and remove rows and columns with the following fields and buttons. Simply enter a specific row or column index, and then the number of rows or columns to add.</p>
<div class="option-group">
<label for="insertRowIndex">Row:</label>
<input type="text" id="insertRowIndex" value={insertRowValue} onChange={(e) => { onInsertRowChange(e) }} />
<label for="insertRowCount">Count:</label>
<input type="text" id="insertRowCount" value={insertRowCountValue} onChange={(e) => { onInsertRowCountChange(e) }} />
<input class="options-input" type="checkbox" id="insertAfterRow" checked={isInsertAfterRow} onChange={(e) => { onInsertAfterRow(e) }} />
<label for="insertAfterRow">Insert after Current RowIndex</label>
<input type="button" id="insertRows" value="Insert Rows" onClick={(e) => { onInsertRowsClickEvent(e) }} />
</div>
<div class="option-group">
<label for="deleteRowIndex">Row:</label>
<input type="text" id="deleteRowIndex" value={deleteRowValue} onChange={(e) => { onDeleteRowChange(e) }} />
<label for="deleteRowCount">Count:</label>
<input type="text" id="deleteRowCount" value={deleteRowCountValue} onChange={(e) => { onDeleteRowCountChange(e) }} />
<input type="button" id="deleteRows" value="Delete Rows" onClick={(e) => { onDeleteRowsClickEvent(e) }} />
</div>
<div class="option-group">
<label for="insertColIndex">Column:</label>
<input type="text" id="insertColIndex" value={insertColValue} onChange={(e) => { onInsertColChange(e) }} />
<label for="insertColCount">Count:</label>
<input type="text" id="insertColCount" value={insertColCountValue} onChange={(e) => { onInsertColCountChange(e) }} />
<input class="options-input" type="checkbox" id="insertAfterCol" checked={isInsertAfterCol} onChange={(e) => { onInsertAfterCol(e) }} />
<label for="insertAfterCol">Insert after Current ColIndex</label>
<input type="button" id="insertColumns" value="Insert Columns" onClick={(e) => { onInsertColumnsClickEvent(e) }} />
</div>
<div class="option-group">
<label for="deleteColIndex">Column:</label>
<input type="text" id="deleteColIndex" value={deleteColValue} onChange={(e) => { onDeleteColChange(e) }} />
<label for="deleteColCount">Count:</label>
<input type="text" id="deleteColCount" value={deleteColCountValue} onChange={(e) => { onDeleteColCountChange(e) }} />
<input type="button" id="deleteColumns" value="Delete Columns" onClick={(e) => { onDeleteColumnsClickEvent(e) }} />
</div>
<p>Click on this button to convert the table to a range of cells with the same styles applied.</p>
<div class="option-group">
<input type="button" id="tableToRange" value="Table to Range" onClick={(e) => { onTableToRangeClickEvent(e) }} />
</div>
</div>
)
}
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.option-group {
margin-bottom: 6px;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 2px 4px;
width: 100%;
box-sizing: border-box;
margin-bottom: 6px;
}
input[type=button] {
margin-bottom: 6px;
}
hr {
border-color: #fff;
opacity: .2;
margin: 5px 0;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.options-input {
width: 20px;
float: left;
}
#app {
height: 100%;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
