Skip to main content

DHTMLX Spreadsheet. Custom toolbar icons example

This demo shows how to replace default toolbar icons in DHTMLX Spreadsheet with icons from an external font pack using toolbar.data.update() and toolbar.paint().

Live example​

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

spreadsheet.parse(dataset);

function setIcons(type) {
    switch (type) {
        case "fa":
            // changing icons of the toolbar buttons 
            spreadsheet.toolbar.data.update("undo", {
                icon: "fa fa-undo"
            });
            // changing icons of the toolbar buttons 
            spreadsheet.toolbar.data.update("redo", {
                icon: "fa fa-redo"
            });
            spreadsheet.toolbar.paint();
            break;
        case "dxi":
            // changing icons of the toolbar buttons 
            spreadsheet.toolbar.data.update("undo", {
                icon: "dxi dxi-undo"
            });
            // changing icons of the toolbar buttons 
            spreadsheet.toolbar.data.update("redo", {
                icon: "dxi dxi-redo"
            });
            spreadsheet.toolbar.paint();
            break;
    }
};
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css?v=3.1.4" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<!-- 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">
  <div class="dhx_sample-input__wrapper">
    <input checked name="mode" value="dxi" id="dxi" onchange="setIcons(this.value)" type="radio" class="dhx_sample-radio__input">
    <label for="dxi" class="dhx_sample-radio__label">Material Icons</label>
  </div>
  <div class="dhx_sample-input__wrapper">
    <input name="mode" value="fa" id="fa" onchange="setIcons(this.value)" type="radio" class="dhx_sample-radio__input">
    <label for="fa" class="dhx_sample-radio__label">Font Awesome</label>
  </div>
</section>

<!-- component container -->
<div id="spreadsheet" style="height: calc(100% - 60px); width: 100%"></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>

Design consistency matters when a spreadsheet component is embedded in an application that already uses a specific icon library. Swapping the default Material Design icons for Font Awesome or another pack ensures visual harmony across the entire UI without requiring changes to the Spreadsheet source code.

This example includes the Font Awesome stylesheet on the page, then updates the existing undo and redo toolbar controls with spreadsheet.toolbar.data.update(...). After updating the icon properties, spreadsheet.toolbar.paint() is called to repaint the toolbar and reflect the changes visually.

Solution overview​

  1. Include the desired icon font stylesheet in the HTML <head> (e.g., Font Awesome CDN link)
  2. Initialize the Spreadsheet with new dhx.Spreadsheet("spreadsheet", config)
  3. Call spreadsheet.toolbar.data.update(controlId, { icon: "fa fa-icon-name" }) for each control to update
  4. Call spreadsheet.toolbar.paint() to repaint the toolbar with the new icons

Key points​

  • Any icon font: The icon property accepts any CSS class name, so any icon font loaded on the page can be used
  • Selective replacement: You can update only specific controls. Unchanged controls keep their default Material Design icons
  • Runtime switching: This sample changes the undo and redo icons at runtime and repaints the toolbar after each switch

API reference​

Additional resources​