Skip to main content

DHTMLX Spreadsheet. Full toolbar example

This demo shows how to enable all available toolbar blocks in DHTMLX Spreadsheet by passing the complete list of block names to the toolbarBlocks configuration property.

Live example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    // full toolbar, you can specify your own structure of the toolbar
    toolbarBlocks: [
        "default",
        "undo",
        "colors",
        "decoration",
        "align",
        "cell",
        "format",
        "actions", 
        "lock",
        "clear",
        "columns",
        "rows",
        "file",
        "help"
    ]
});

spreadsheet.parse(dataset);
<!-- 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>

Power users working with complex spreadsheets expect the full range of toolbar options: undo/redo, text formatting, cell alignment, number formats, row and column operations, file import/export, and help. Enabling all toolbar blocks creates a feature-complete editing experience comparable to desktop spreadsheet applications.

This example sets toolbarBlocks to a full toolbar array that includes "default" together with the standard and additional block names shown in the sample: "undo", "colors", "decoration", "align", "cell", "format", "actions", "lock", "clear", "columns", "rows", "file", and "help". The sample uses that explicit array to render a fuller toolbar than the default configuration.

Solution overview​

  1. Define the full array: ["default", "undo", "colors", "decoration", "align", "cell", "format", "actions", "lock", "clear", "columns", "rows", "file", "help"]
  2. Pass it as toolbarBlocks in the Spreadsheet constructor config
  3. Load data with spreadsheet.parse(dataset)

Key points​

  • Default blocks: Without toolbarBlocks, only "undo", "colors", "decoration", "align", "cell", "format", and "actions" are shown
  • Custom order: The order of block names in the array determines their position in the toolbar from left to right
  • Further customization: Individual controls within blocks can be added, updated, or removed via toolbar.data.add(), toolbar.data.update(), and toolbar.data.remove()

API reference​

  • toolbarBlocks: Defines which toolbar blocks are visible and their order.

Additional resources​