Skip to main content

DHTMLX Spreadsheet. Custom toolbar button example

This demo shows how to add a custom button to the DHTMLX Spreadsheet toolbar using the toolbar.data.add() API and handle clicks with toolbar.events.on().

Live example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet");

spreadsheet.parse(dataset);
// adding a new button into the toolbar
spreadsheet.toolbar.data.add({
    type: "button",
    icon: "mdi mdi-delete",
    tooltip: "Remove all",
    id: "remove-all"
});

spreadsheet.toolbar.events.on("click", function (id) {
    if (id === "remove-all") {
        spreadsheet.parse([]);
    }
});
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css?v=3.1.4">

<!-- component container -->
<div style="height: 100%; 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>

Spreadsheet applications frequently need domain-specific actions accessible directly from the toolbar, such as clearing all data, exporting to a custom format, or triggering a workflow. Adding a custom button lets developers extend the built-in toolbar with project-specific functionality that feels native to the interface.

This example calls spreadsheet.toolbar.data.add() with a button configuration containing type: "button", a unique id, an icon from the Material Design Icons pack ("mdi mdi-delete"), and a tooltip. The toolbar.events.on("click", handler) listener checks the clicked button's id and executes the corresponding action, such as calling spreadsheet.parse([]) to clear all data.

Solution overview​

  1. Initialize the Spreadsheet with new dhx.Spreadsheet("spreadsheet")
  2. Call spreadsheet.toolbar.data.add({ type: "button", id: "my-btn", icon: "mdi mdi-delete", tooltip: "Remove all" })
  3. Subscribe to clicks with spreadsheet.toolbar.events.on("click", (id) => { ... })
  4. Inside the handler, check id to determine which button was clicked and execute the action

Key points​

  • Control types: The toolbar supports button, menuItem, separator, and spacer control types
  • Button properties: This sample uses type, id, icon, and tooltip to define a custom toolbar button
  • Click handling: spreadsheet.toolbar.events.on("click", handler) lets you react when the custom button is pressed

API reference​

Additional resources​