DHTMLX Spreadsheet. Clearing data example
This demo shows how to clear data in DHTMLX Spreadsheet using the clear() and clearSheet() methods. Reset the entire workbook or target a specific sheet by its ID.
Live example
const spreadsheet = new dhx.Spreadsheet("spreadsheet");
spreadsheet.parse(dataset);
document.querySelectorAll(".dhx_sample-btn")[0].addEventListener("click", () => {
spreadsheet.clear()
})
document.querySelectorAll(".dhx_sample-btn")[1].addEventListener("click", () => {
spreadsheet.clearSheet("report_id");
})
document.querySelectorAll(".dhx_sample-btn")[2].addEventListener("click", () => {
spreadsheet.clearSheet("income_id");
})<!-- component container -->
<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css">
<section class="dhx_sample-controls">
<button class="dhx_sample-btn dhx_sample-btn--flat" >Clear All</button>
<button class="dhx_sample-btn dhx_sample-btn--flat" >Clear Report</button>
<button class="dhx_sample-btn dhx_sample-btn--flat" >Clear Income</button>
</section>
<div style="height: calc(100% - 60px); max-width:100%" id="spreadsheet"></div>
<!-- dataset -->
<script>
var dataset = {
styles: {
red_text: { color: "#E94633" },
center_bold: {
"font-weight": "bold",
"justify-content": "center",
"text-align": "center",
},
bold: {
"font-weight": "bold",
},
text_end: {
"justify-content": "flex-end",
"text-align": "right",
},
blue_background: {
background: "#B3E5FC"
}
},
sheets: [
{
name: "Report",
id: "report_id",
data: [
{
cell: "B1",
css: "text_end bold",
format: "General",
value: "Average",
},
{
cell: "C1",
css: "text_end bold",
format: "General",
value: "Product's Share",
},
{
cell: "D1",
css: "text_end bold",
format: "General",
value: "Min",
},
{
cell: "E1",
css: "text_end bold",
format: "General",
value: "Max",
},
{
cell: "F1",
css: "text_end bold",
format: "General",
value: "NET",
},
{
cell: "A2",
css: "bold",
format: "General",
value: "Drone",
},
{
cell: "B2",
css: "text_end",
format: "currency",
value: "=AVERAGE(Income!B2:M2)",
},
{
cell: "C2",
format: "percent",
css: "text_end",
value: "=Income!B2/Income!B12",
},
{
cell: "D2",
format: "currency",
css: "text_end",
value: "=MIN(Income!B2:M2)",
},
{
cell: "E2",
format: "currency",
css: "text_end",
value: "=MAX(Income!B2:M2)",
},
{
cell: "F2",
format: "currency",
css: "text_end",
value: "=Income!N2-Expenses!E2",
},
{
cell: "A3",
format: "General",
css: "bold",
value: "VR Glasses",
},
{
cell: "B3",
format: "currency",
css: "text_end",
value: "=AVERAGE(Income!B3:M3)",
},
{
cell: "C3",
format: "percent",
css: "text_end",
value: "=Income!B3/Income!B12",
},
{
cell: "D3",
format: "currency",
css: "text_end",
value: "=MIN(Income!B3:M3)",
},
{
cell: "E3",
format: "currency",
css: "text_end",
value: "=MAX(Income!B3:M3)",
},
{
cell: "F3",
format: "currency",
css: "text_end",
value: "=Income!N3-Expenses!E3",
},
{
cell: "A4",
format: "General",
css: "bold",
value: "Voice Remote Control",
},
{
cell: "B4",
format: "currency",
css: "text_end",
value: "=AVERAGE(Income!B4:M4)",
},
{
cell: "C4",
format: "percent",
css: "text_end",
value: "=Income!B4/Income!B12",
},
{
cell: "D4",
format: "currency",
css: "text_end",
value: "=MIN(Income!B4:M4)",
},
{
cell: "E4",
format: "currency",
css: "text_end",
value: "=MAX(Income!B4:M4)",
},
{
cell: "F4",
format: "currency",
css: "text_end",
value: "=Income!N4-Expenses!E4",
},
{
cell: "A5",
format: "General",
css: "bold",
value: "Touch Projector",
},
{
cell: "B5",
format: "currency",
css: "text_end",
value: "=AVERAGE(Income!B5:M5)",
},
{
cell: "C5",
format: "percent",
css: "text_end",
value: "=Income!B5/Income!B12",
},
{
cell: "D5",
format: "currency",
css: "text_end",
value: "=MIN(Income!B5:M5)",
},
{
cell: "E5",
format: "currency",
css: "text_end",
value: "=MAX(Income!B5:M5)",
},
{
cell: "F5",
format: "currency",
css: "red_text text_end",
value: "=Income!N5-Expenses!E5",
},
{
cell: "A6",
format: "General",
css: "bold",
value: "Smart Band",
},
{
cell: "B6",
format: "currency",
css: "text_end",
value: "=AVERAGE(Income!B6:M6)",
},
{
cell: "C6",
format: "percent",
css: "text_end",
value: "=Income!B6/Income!B12",
},
{
cell: "D6",
format: "currency",
css: "text_end",
value: "=MIN(Income!B6:M6)",
},
{
cell: "E6",
format: "currency",
css: "text_end",
value: "=MAX(Income!B6:M6)",
},
{
cell: "F6",
format: "currency",
css: "text_end",
value: "=Income!N6-Expenses!E6",
},
{
cell: "A7",
format: "General",
css: "bold",
value: "Video Doorbell",
},
{
cell: "B7",
format: "currency",
css: "text_end",
value: "=AVERAGE(Income!B7:M7)",
},
{
cell: "C7",
format: "percent",
css: "text_end",
value: "=Income!B7/Income!B12",
},
{
cell: "D7",
format: "currency",
css: "text_end",
value: "=MIN(Income!B7:M7)",
},
{
cell: "E7",
format: "currency",
css: "text_end",
value: "=MAX(Income!B7:M7)",
},
{
cell: "F7",
format: "currency",
css: "text_end",
value: "=Income!N7-Expenses!E7",
},
{
cell: "A8",
format: "General",
css: "bold",
value: "Smart TV",
},
{
cell: "B8",
css: "text_end",
format: "currency",
value: "=AVERAGE(Income!B8:M8)",
},
{
cell: "C8",
format: "percent",
css: "text_end",
value: "=Income!B8/Income!B12",
},
{
cell: "D8",
format: "currency",
css: "text_end",
value: "=MIN(Income!B8:M8)",
},
{
cell: "E8",
format: "currency",
css: "text_end",
value: "=MAX(Income!B8:M8)",
},
{
cell: "F8",
format: "currency",
css: "text_end",
value: "=Income!N8-Expenses!E8",
},
{
cell: "A9",
format: "General",
css: "bold",
value: "Robot Vacuum",
},
{
cell: "B9",
format: "currency",
css: "text_end",
value: "=AVERAGE(Income!B9:M9)",
},
{
cell: "C9",
format: "percent",
css: "text_end",
value: "=Income!B9/Income!B12",
},
{
cell: "D9",
format: "currency",
css: "text_end",
value: "=MIN(Income!B9:M9)",
},
{
cell: "E9",
format: "currency",
css: "text_end",
value: "=MAX(Income!B9:M9)",
},
{
cell: "F9",
format: "currency",
css: "text_end",
value: "=Income!N9-Expenses!E9",
},
{
cell: "A10",
format: "General",
css: "bold",
value: "Air Purifier",
},
{
cell: "B10",
format: "currency",
css: "text_end",
value: "=AVERAGE(Income!B10:M10)",
},
{
cell: "C10",
format: "percent",
css: "text_end",
value: "=Income!B10/Income!B12",
},
{
cell: "D10",
format: "currency",
css: "text_end",
value: "=MIN(Income!B10:M10)",
},
{
cell: "E10",
format: "currency",
css: "text_end",
value: "=MAX(Income!B10:M10)",
},
{
cell: "F10",
format: "currency",
css: "text_end",
value: "=Income!N10-Expenses!E10",
},
{
cell: "A11",
format: "General",
css: "bold",
value: "Baby Monitor",
},
{
cell: "B11",
format: "currency",
css: "text_end",
value: "=AVERAGE(Income!B11:M11)",
},
{
cell: "C11",
format: "percent",
css: "text_end",
value: "=Income!B11/Income!B12",
},
{
cell: "D11",
format: "currency",
css: "text_end",
value: "=MIN(Income!B11:M11)",
},
{
cell: "E11",
format: "currency",
css: "text_end",
value: "=MAX(Income!B11:M11)",
},
{
cell: "F11",
format: "currency",
css: "text_end",
value: "=Income!N11-Expenses!E11",
},
{
cell: "A12",
format: "General",
value: "Total",
css: "bold blue_background",
},
{
cell: "B12",
css: "blue blue_background",
},
{
cell: "C12",
css: "bold blue_background",
},
{
cell: "D12",
css: "bold blue_background",
},
{
cell: "E12",
css: "bold blue_background",
},
{
cell: "F12",
css: "green_text",
format: "currency",
css: "text_end bold blue_background",
value: "=Income!N12-Expenses!E12",
},
],
"cols": [
{
"width": 160
}
],
"rows": []
},
{
name: "Income",
id: "income_id",
data: [
{
cell: "B1",
css: "text_end bold",
format: "General",
value: "Jan",
},
{
cell: "C1",
css: "text_end bold",
format: "General",
value: "Feb",
},
{
cell: "D1",
css: "text_end bold",
format: "General",
value: "Mar",
},
{
cell: "E1",
css: "text_end bold",
format: "General",
value: "Apr",
},
{
cell: "F1",
css: "text_end bold",
format: "General",
value: "May",
},
{
cell: "G1",
css: "text_end bold",
format: "General",
value: "Jun",
},
{
cell: "H1",
css: "text_end bold",
format: "General",
value: "Jul",
},
{
cell: "I1",
css: "text_end bold",
format: "General",
value: "Aug",
},
{
cell: "J1",
css: "text_end bold",
format: "General",
value: "Sep",
},
{
cell: "K1",
css: "text_end bold",
format: "General",
value: "Oct",
},
{
cell: "L1",
css: "text_end bold",
format: "General",
value: "Nov",
},
{
cell: "M1",
css: "text_end bold",
format: "General",
value: "Dec",
},
{
cell: "N1",
css: "text_end bold",
format: "General",
value: "Total",
},
{
cell: "A2",
format: "General",
css: "bold",
value: "Drone",
},
{
cell: "B2",
css: "text_end",
format: "currency",
value: 500000,
},
{
cell: "C2",
css: "text_end",
format: "currency",
value: 200000,
},
{
cell: "D2",
css: "text_end",
format: "currency",
value: 700000,
},
{
cell: "E2",
css: "text_end",
format: "currency",
value: 750000,
},
{
cell: "F2",
css: "text_end",
format: "currency",
value: 600000,
},
{
cell: "G2",
css: "text_end",
format: "currency",
value: 800000,
},
{
cell: "H2",
css: "text_end",
format: "currency",
value: 500000,
},
{
cell: "I2",
css: "text_end",
format: "currency",
value: 100000,
},
{
cell: "J2",
css: "text_end",
format: "currency",
value: 750000,
},
{
cell: "K2",
css: "text_end",
format: "currency",
value: 900000,
},
{
cell: "L2",
css: "text_end",
format: "currency",
value: 200000,
},
{
cell: "M2",
css: "text_end",
format: "currency",
value: 950000,
},
{
cell: "N2",
css: "text_end",
format: "currency",
value: "=SUM(B2:M2)",
},
{
cell: "A3",
css: "bold",
format: "General",
value: "VR Glasses",
},
{
cell: "B3",
css: "text_end",
format: "currency",
value: 80000,
},
{
cell: "C3",
css: "text_end",
format: "currency",
value: 75000,
},
{
cell: "D3",
css: "text_end",
format: "currency",
value: 90000,
},
{
cell: "E3",
css: "text_end",
format: "currency",
value: 100000,
},
{
cell: "F3",
css: "text_end",
format: "currency",
value: 95000,
},
{
cell: "G3",
css: "text_end",
format: "currency",
value: 105000,
},
{
cell: "H3",
css: "text_end",
format: "currency",
value: 102500,
},
{
cell: "I3",
css: "text_end",
format: "currency",
value: 75000,
},
{
cell: "J3",
css: "text_end",
format: "currency",
value: 85000,
},
{
cell: "K3",
css: "text_end",
format: "currency",
value: 90000,
},
{
cell: "L3",
css: "text_end",
format: "currency",
value: 120000,
},
{
cell: "M3",
css: "text_end",
format: "currency",
value: 112500,
},
{
cell: "N3",
css: "text_end",
format: "currency",
value: "=SUM(B3:M3)",
},
{
cell: "A4",
css: "bold",
format: "General",
value: "Voice Remote Control",
},
{
cell: "B4",
css: "text_end",
format: "currency",
value: 20000,
},
{
cell: "C4",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "D4",
css: "text_end",
format: "currency",
value: 26500,
},
{
cell: "E4",
css: "text_end",
format: "currency",
value: 25750,
},
{
cell: "F4",
css: "text_end",
format: "currency",
value: 23500,
},
{
cell: "G4",
css: "text_end",
format: "currency",
value: 21000,
},
{
cell: "H4",
css: "text_end",
format: "currency",
value: 21500,
},
{
cell: "I4",
css: "text_end",
format: "currency",
value: 19800,
},
{
cell: "J4",
css: "text_end",
format: "currency",
value: 21500,
},
{
cell: "K4",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "L4",
css: "text_end",
format: "currency",
value: 27500,
},
{
cell: "M4",
css: "text_end",
format: "currency",
value: 26000,
},
{
cell: "N4",
css: "text_end",
format: "currency",
value: "=SUM(B4:M4)",
},
{
cell: "A5",
css: "bold",
format: "General",
value: "Touch Projector",
},
{
cell: "B5",
css: "text_end",
format: "currency",
value: "=7000",
},
{
cell: "C5",
css: "text_end",
format: "currency",
value: 9250,
},
{
cell: "D5",
css: "text_end",
format: "currency",
value: 8000,
},
{
cell: "E5",
css: "text_end",
format: "currency",
value: 9000,
},
{
cell: "F5",
css: "text_end",
format: "currency",
value: 10000,
},
{
cell: "G5",
css: "text_end",
format: "currency",
value: 8500,
},
{
cell: "H5",
css: "text_end",
format: "currency",
value: 9000,
},
{
cell: "I5",
css: "text_end",
format: "currency",
value: 7200,
},
{
cell: "J5",
css: "text_end",
format: "currency",
value: 9500,
},
{
cell: "K5",
css: "text_end",
format: "currency",
value: 10000,
},
{
cell: "L5",
css: "text_end",
format: "currency",
value: 11000,
},
{
cell: "M5",
css: "text_end",
format: "currency",
value: 9000,
},
{
cell: "N5",
css: "text_end",
format: "currency",
value: "=SUM(B5:M5)",
},
{
cell: "A6",
css: "bold",
format: "General",
value: "Smart Band",
},
{
cell: "B6",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "C6",
css: "text_end",
format: "currency",
value: 52000,
},
{
cell: "D6",
css: "text_end",
format: "currency",
value: 53000,
},
{
cell: "E6",
css: "text_end",
format: "currency",
value: 53500,
},
{
cell: "F6",
css: "text_end",
format: "currency",
value: 52500,
},
{
cell: "G6",
css: "text_end",
format: "currency",
value: 51000,
},
{
cell: "H6",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "I6",
css: "text_end",
format: "currency",
value: 49000,
},
{
cell: "J6",
css: "text_end",
format: "currency",
value: 51000,
},
{
cell: "K6",
css: "text_end",
format: "currency",
value: 52500,
},
{
cell: "L6",
css: "text_end",
format: "currency",
value: 56000,
},
{
cell: "M6",
css: "text_end",
format: "currency",
value: 53000,
},
{
cell: "N6",
css: "text_end",
format: "currency",
value: "=SUM(B6:M6)",
},
{
cell: "A7",
css: "bold",
format: "General",
value: "Video Doorbell",
},
{
cell: "B7",
css: "text_end",
format: "currency",
value: 18000,
},
{
cell: "C7",
css: "text_end",
format: "currency",
value: 19500,
},
{
cell: "D7",
css: "text_end",
format: "currency",
value: 20500,
},
{
cell: "E7",
css: "text_end",
format: "currency",
value: 20250,
},
{
cell: "F7",
css: "text_end",
format: "currency",
value: 20500,
},
{
cell: "G7",
css: "text_end",
format: "currency",
value: 19000,
},
{
cell: "H7",
css: "text_end",
format: "currency",
value: 18000,
},
{
cell: "I7",
css: "text_end",
format: "currency",
value: 16500,
},
{
cell: "J7",
css: "text_end",
format: "currency",
value: 17000,
},
{
cell: "K7",
css: "text_end",
format: "currency",
value: 18500,
},
{
cell: "L7",
css: "text_end",
format: "currency",
value: 19000,
},
{
cell: "M7",
css: "text_end",
format: "currency",
value: 18500,
},
{
cell: "N7",
css: "text_end",
format: "currency",
value: "=SUM(B7:M7)",
},
{
cell: "A8",
css: "bold",
format: "General",
value: "Smart TV",
},
{
cell: "B8",
css: "text_end",
format: "currency",
value: 310000,
},
{
cell: "C8",
css: "text_end",
format: "currency",
value: 295000,
},
{
cell: "D8",
css: "text_end",
format: "currency",
value: 315000,
},
{
cell: "E8",
css: "text_end",
format: "currency",
value: 320000,
},
{
cell: "F8",
css: "text_end",
format: "currency",
value: 295000,
},
{
cell: "G8",
css: "text_end",
format: "currency",
value: 280000,
},
{
cell: "H8",
css: "text_end",
format: "currency",
value: 290000,
},
{
cell: "I8",
css: "text_end",
format: "currency",
value: 285000,
},
{
cell: "J8",
css: "text_end",
format: "currency",
value: 300000,
},
{
cell: "K8",
css: "text_end",
format: "currency",
value: 315000,
},
{
cell: "L8",
css: "text_end",
format: "currency",
value: 340000,
},
{
cell: "M8",
css: "text_end",
format: "currency",
value: 335000,
},
{
cell: "N8",
css: "text_end",
format: "currency",
value: "=SUM(B8:M8)",
},
{
cell: "A9",
css: "bold",
format: "General",
value: "Robot Vacuum",
},
{
cell: "B9",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "C9",
css: "text_end",
format: "currency",
value: 55000,
},
{
cell: "D9",
css: "text_end",
format: "currency",
value: 57500,
},
{
cell: "E9",
css: "text_end",
format: "currency",
value: 60000,
},
{
cell: "F9",
css: "text_end",
format: "currency",
value: 62500,
},
{
cell: "G9",
css: "text_end",
format: "currency",
value: 57500,
},
{
cell: "H9",
css: "text_end",
format: "currency",
value: 55000,
},
{
cell: "I9",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "J9",
css: "text_end",
format: "currency",
value: 57500,
},
{
cell: "K9",
css: "text_end",
format: "currency",
value: 60000,
},
{
cell: "L9",
css: "text_end",
format: "currency",
value: 62500,
},
{
cell: "M9",
css: "text_end",
format: "currency",
value: 65000,
},
{
cell: "N9",
css: "text_end",
format: "currency",
value: "=SUM(B9:M9)",
},
{
cell: "A10",
css: "bold",
format: "General",
value: "Air Purifier",
},
{
cell: "B10",
css: "text_end",
format: "currency",
value: 15000,
},
{
cell: "C10",
css: "text_end",
format: "currency",
value: 20000,
},
{
cell: "D10",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "E10",
css: "text_end",
format: "currency",
value: 30000,
},
{
cell: "F10",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "G10",
css: "text_end",
format: "currency",
value: 27500,
},
{
cell: "H10",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "I10",
css: "text_end",
format: "currency",
value: 20000,
},
{
cell: "J10",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "K10",
css: "text_end",
format: "currency",
value: 30000,
},
{
cell: "L10",
css: "text_end",
format: "currency",
value: 27500,
},
{
cell: "M10",
css: "text_end",
format: "currency",
value: 30000,
},
{
cell: "N10",
css: "text_end",
format: "currency",
value: "=SUM(B10:M10)",
},
{
cell: "A11",
css: "bold",
format: "General",
value: "Baby Monitor",
},
{
cell: "B11",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "C11",
css: "text_end",
format: "currency",
value: 27000,
},
{
cell: "D11",
css: "text_end",
format: "currency",
value: 27500,
},
{
cell: "E11",
css: "text_end",
format: "currency",
value: 26500,
},
{
cell: "F11",
css: "text_end",
format: "currency",
value: 28000,
},
{
cell: "G11",
css: "text_end",
format: "currency",
value: 29000,
},
{
cell: "H11",
css: "text_end",
format: "currency",
value: 29500,
},
{
cell: "I11",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "J11",
css: "text_end",
format: "currency",
value: 26000,
},
{
cell: "K11",
css: "text_end",
format: "currency",
value: 27000,
},
{
cell: "L11",
css: "text_end",
format: "currency",
value: 27500,
},
{
cell: "M11",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "N11",
css: "text_end",
format: "currency",
value: "=SUM(B11:M11)",
},
{
cell: "A12",
format: "General",
value: "Total",
css: "bold",
},
{
cell: "B12",
css: "text_end bold",
format: "currency",
value: "=SUM(B2:B11)",
},
{
cell: "C12",
css: "text_end bold",
format: "currency",
value: "=SUM(C2:C11)",
},
{
cell: "D12",
css: "text_end bold",
format: "currency",
value: "=SUM(D2:D11)",
},
{
cell: "E12",
css: "text_end bold",
format: "currency",
value: "=SUM(E2:E11)",
},
{
cell: "F12",
css: "text_end bold",
format: "currency",
value: "=SUM(F2:F11)",
},
{
cell: "G12",
css: "text_end bold",
format: "currency",
value: "=SUM(G2:G11)",
},
{
cell: "H12",
css: "text_end bold",
format: "currency",
value: "=SUM(H2:H11)",
},
{
cell: "I12",
css: "text_end bold",
format: "currency",
value: "=SUM(I2:I11)",
},
{
cell: "J12",
css: "text_end bold",
format: "currency",
value: "=SUM(J2:J11)",
},
{
cell: "K12",
css: "text_end bold",
format: "currency",
value: "=SUM(K2:K11)",
},
{
cell: "L12",
css: "text_end bold",
format: "currency",
value: "=SUM(L2:L11)",
},
{
cell: "M12",
css: "text_end bold",
format: "currency",
value: "=SUM(M2:M11)",
},
{
cell: "N12",
css: "text_end bold",
format: "currency",
value: "=SUM(N2:N11)",
length: 167,
},
],
"cols": [
{
"width": 160
}
],
"rows": []
},
{
name: "Expenses",
data: [
{
cell: "B1",
css: "text_end bold",
format: "General",
value: "PPC Campaigns",
},
{
cell: "C1",
css: "text_end bold",
format: "General",
value: "Sponsored Articles",
},
{ cell: "D1", css: "text_end bold", format: "General", value: "SMM" },
{ cell: "E1", format: "General", value: "Total", css: "bold text_end" },
{
cell: "A2",
css: "bold",
format: "General",
value: "Drone",
},
{ cell: "B2", css: "text_end", format: "currency", value: 150000 },
{ cell: "C2", css: "text_end", format: "currency", value: 25000 },
{ cell: "D2", css: "text_end", format: "currency", value: 150000 },
{
cell: "E2",
css: "text_end",
format: "currency",
value: "=SUM(B2:D2)",
},
{
cell: "A3",
css: "bold",
format: "General",
value: "VR Glasses",
},
{
cell: "B3",
css: "text_end",
format: "currency",
value: 40000,
},
{
cell: "C3",
css: "text_end",
format: "currency",
value: 0,
},
{
cell: "D3",
css: "text_end",
format: "currency",
value: 15000,
},
{
cell: "E3",
css: "text_end",
format: "currency",
value: "=SUM(B3:D3)",
},
{
cell: "A4",
format: "General",
css: "bold",
value: "Voice Remote Control",
},
{
cell: "B4",
css: "text_end",
format: "currency",
value: 25000,
},
{
cell: "C4",
css: "text_end",
format: "currency",
value: 5000,
},
{
cell: "D4",
css: "text_end",
format: "currency",
value: 5000,
},
{
cell: "E4",
css: "text_end",
format: "currency",
value: "=SUM(B4:D4)",
},
{
cell: "A5",
format: "General",
css: "bold",
value: "Touch Projector",
},
{
cell: "B5",
css: "text_end",
format: "currency",
value: 105500,
},
{
cell: "C5",
css: "text_end",
format: "currency",
value: 3500,
},
{
cell: "D5",
css: "text_end",
format: "currency",
value: 3000,
},
{
cell: "E5",
css: "text_end",
format: "currency",
value: "=SUM(B5:D5)",
},
{
cell: "A6",
format: "General",
css: "bold",
value: "Smart Band",
},
{
cell: "B6",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "C6",
css: "text_end",
format: "currency",
value: 0,
},
{
cell: "D6",
css: "text_end",
format: "currency",
value: 5000,
},
{
cell: "E6",
css: "text_end",
format: "currency",
value: "=SUM(B6:D6)",
},
{
cell: "A7",
format: "General",
css: "bold",
value: "Video Doorbell",
},
{
cell: "B7",
css: "text_end",
format: "currency",
value: 5000,
},
{
cell: "C7",
css: "text_end",
format: "currency",
value: 5000,
},
{
cell: "D7",
css: "text_end",
format: "currency",
value: 500,
},
{
cell: "E7",
css: "text_end",
format: "currency",
value: "=SUM(B7:D7)",
},
{
cell: "A8",
format: "General",
css: "bold",
value: "Smart TV",
},
{
cell: "B8",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "C8",
css: "text_end",
format: "currency",
value: 30000,
},
{
cell: "D8",
css: "text_end",
format: "currency",
value: 10000,
},
{
cell: "E8",
css: "text_end",
format: "currency",
value: "=SUM(B8:D8)",
},
{
cell: "A9",
format: "General",
css: "bold",
value: "Robot Vacuum",
},
{
cell: "B9",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "C9",
css: "text_end",
format: "currency",
value: 0,
},
{
cell: "D9",
css: "text_end",
format: "currency",
value: 5000,
},
{
cell: "E9",
css: "text_end",
format: "currency",
value: "=SUM(B9:D9)",
},
{
cell: "A10",
format: "General",
css: "bold",
value: "Air Purifier",
},
{
cell: "B10",
css: "text_end",
format: "currency",
value: 30000,
},
{
cell: "C10",
css: "text_end",
format: "currency",
value: 10000,
},
{
cell: "D10",
css: "text_end",
format: "currency",
value: 50000,
},
{
cell: "E10",
css: "text_end",
format: "currency",
value: "=SUM(B10:D10)",
},
{
cell: "A11",
format: "General",
css: "bold",
value: "Baby Monitor",
},
{
cell: "B11",
css: "text_end",
format: "currency",
value: 80000,
},
{
cell: "C11",
css: "text_end",
format: "currency",
value: 5000,
},
{
cell: "D11",
css: "text_end",
format: "currency",
value: 2500,
},
{
cell: "E11",
css: "text_end",
format: "currency",
value: "=SUM(B11:D11)",
},
{
cell: "A12",
format: "General",
value: "Total",
css: "bold",
},
{
cell: "B12",
css: "text_end bold",
format: "currency",
value: "=SUM(B2:B11)",
},
{
cell: "C12",
css: "text_end bold",
format: "currency",
value: "=SUM(C2:C11)",
},
{
cell: "D12",
css: "text_end bold",
format: "currency",
value: "=SUM(D2:D11)",
},
{
cell: "E12",
css: "bold text_end",
format: "currency",
value: "=SUM(E2:E11)",
},
],
"cols": [
{
"width": 160
}
],
"rows": []
},
],
};
</script>Spreadsheet applications often need a way to reset data without reloading the page. Whether users want to start over with a blank workbook, clear a single sheet before importing fresh data, or provide a "new document" action in a toolbar, programmatic clearing is essential for any multi-sheet spreadsheet workflow.
In this example, the Spreadsheet is initialized with a multi-sheet dataset and the clear() method removes all data from every sheet at once. To target just one sheet, clearSheet(sheetId) accepts an optional sheet ID. Calling clearSheet() without arguments clears the currently active sheet, while passing a specific ID like "report_id" clears only that sheet and leaves the rest untouched.
Solution overview
- Initialize the Spreadsheet with
new dhx.Spreadsheet("spreadsheet")and load the multi-sheet dataset viaspreadsheet.parse(dataset). - Call
spreadsheet.clear()to remove all data from every sheet in the workbook. - Call
spreadsheet.clearSheet()without arguments to clear only the active sheet. - Call
spreadsheet.clearSheet("report_id")with a specific ID to clear a particular sheet.
Key points
clear()vsclearSheet():clear()resets the entire workbook across all sheets, whileclearSheet()operates on a single sheet (either the active one or a specific sheet by ID).- Active sheet shorthand: Calling
clearSheet()with no arguments clears the currently active sheet directly.
API reference
- clear(): Clears all data from the entire spreadsheet workbook.
- clearSheet(): Clears data from a specific sheet or the active sheet.