Skip to main content

DHTMLX Spreadsheet. Adding and deleting rows and columns example

This demo shows how to perform grid operations in DHTMLX Spreadsheet by adding rows with addRow(), adding columns with addColumn(), and deleting them with deleteRow() and deleteColumn().

Live example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    toolbarBlocks: ["undo", "colors", "decoration", "align", "help", "rows", "columns"]
});

spreadsheet.parse(dataset);
<!-- auxiliary controls for interacting with the sample -->
<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css">
<section class="dhx_sample-controls">
  <button onclick="spreadsheet.addColumn('B1')" class="dhx_sample-btn dhx_sample-btn--flat">Add column</button>
  <button onclick="spreadsheet.deleteColumn('B1')" class="dhx_sample-btn dhx_sample-btn--flat">Remove column</button>
  <button onclick="spreadsheet.addRow('A1')" class="dhx_sample-btn dhx_sample-btn--flat">Add row</button>
  <button onclick="spreadsheet.deleteRow('A1')" class="dhx_sample-btn dhx_sample-btn--flat">Remove row</button>
</section>

<!-- component container -->
<div style="height: 500px; max-width:100%" id="spreadsheet"></div>

<!-- dataset -->

<script>
const dataset = {
        styles: {
            bold: {
                "font-weight": "bold",
            },
            right: {
                "justify-content": "flex-end",
                "text-align": "right",
            },
        },
        data: [
            { cell: "a1", value: "Country", css:"bold" },
            { cell: "b1", value: "Product", css:"bold" },
            { cell: "c1", value: "Price", css:"right bold" },
            { cell: "d1", value: "Amount", css:"right bold" },
            { cell: "e1", value: "Total Price", css:"right bold" },

            { cell: "a2", value: "Ecuador" },
            { cell: "b2", value: "Banana" },
            { cell: "c2", value: 6.68, format: "currency" },
            { cell: "d2", value: 430 },
            { cell: "e2", value: 2872.4, format: "currency" },

            { cell: "a3", value: "Belarus" },
            { cell: "b3", value: "Apple" },
            { cell: "c3", value: 3.75, format: "currency" },
            { cell: "d3", value: 600 },
            { cell: "e3", value: 2250, format: "currency" },

            { cell: "a4", value: "Peru" },
            { cell: "b4", value: "Grapes" },
            { cell: "c4", value: 7.69, format: "currency" },
            { cell: "d4", value: 740 },
            { cell: "e4", value: 5690.6, format: "currency" },

            { cell: "a5", value: "Egypt" },
            { cell: "b5", value: "Orange" },
            { cell: "c5", value: 5.86, format: "currency" },
            { cell: "d5", value: 560 },
            { cell: "e5", value: 3281.6, format: "currency" },

            { cell: "a6", value: "South Africa" },
            { cell: "b6", value: "Grapefruit" },
            { cell: "c6", value: 8.58, format: "currency" },
            { cell: "d6", value: 800 },
            { cell: "e6", value: 6864, format: "currency" },

            { cell: "a7", value: "Spain" },
            { cell: "b7", value: "Lemon" },
            { cell: "c7", value: 9.12, format: "currency" },
            { cell: "d7", value: 650 },
            { cell: "e7", value: 5928, format: "currency" },

            { cell: "a8", value: "Iran" },
            { cell: "b8", value: "Pomegranate" },
            { cell: "c8", value: 9.67, format: "currency" },
            { cell: "d8", value: 300 },
            { cell: "e8", value: 2901, format: "currency" }
        ],
    };
</script>

Data-entry applications often need to let users expand the grid on demand: inserting a new row for an additional record, adding a column for a new metric, or removing obsolete entries. Programmatic grid operations let developers wire these actions to buttons, keyboard shortcuts, or external triggers.

This example demonstrates four API methods wired to external buttons: addRow("A1"), addColumn("B1"), deleteRow("A1"), and deleteColumn("B1"). The buttons act on the row or column identified by the passed cell reference.

Solution overview​

  1. Create the Spreadsheet with new dhx.Spreadsheet("spreadsheet", { toolbarBlocks: ["undo", "colors", "decoration", "align", "help", "rows", "columns"] }) and load data
  2. Call spreadsheet.addRow("A1") to add a row based on the first row position used in the sample
  3. Call spreadsheet.addColumn("B1") to add a column based on the first data column used in the sample
  4. Call spreadsheet.deleteRow("A1") or spreadsheet.deleteColumn("B1") to remove the corresponding row or column

Key points​

  • Cell-based targeting: All methods accept a cell ID (e.g., "A1", "B1") to determine which row or column to operate on
  • Range support: deleteRow() and deleteColumn() accept ranges (e.g., "A1:C3") to remove multiple rows or columns at once
  • Sample scope: This example focuses on button-driven row and column operations

API reference​

  • addRow(): Adds a new row below the specified cell's row.
  • addColumn(): Adds a new column to the left of the specified cell's column.
  • deleteRow(): Deletes the row containing the specified cell.
  • deleteColumn(): Deletes the column containing the specified cell.

Additional resources​