Full Code for Toolbar Elements

Below you will find the full configuration of Toolbar elements:

// all labels are taken from the current locale
function getText(text){
    var locale = webix.i18n.spreadsheet;
    return locale.menus[text] || locale.labels[text] || locale.tooltips[text] || text;
};
 
var toolbar = [
    {
        "padding": 3,
        "margin": 0,
        "rows": [
            {
                "margin": 2,
                "cols": [
                    {
                        "name": "sheet",
                        "view": "ssheet-button-icon-top",
                        "label": getText("Sheets"),
                        "arrow": true,
                        "options": [
                            {
                                "id": "new-sheet"
                            },
                            {
                                "id": "copy-sheet"
                            },
                            {
                                "id": "remove-sheet"
                            }
                        ]
                    },
                    {
                        "rows": [
                            {
                                "$button": "excel-import",
                                "name": "excel-import",
                                "view": "button",
                                "type": "htmlbutton",
                                "width": 40,
                                "id": "excel-import",
                                "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-excel-import'></span>",
                                "css": "",
                                "tooltip": getText("Import from Excel")
                            },
                            {
                                "$button": "excel-export",
                                "name": "excel-export",
                                "view": "button",
                                "type": "htmlbutton",
                                "width": 40,
                                "id": "excel-export",
                                "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-excel-export'></span>",
                                "css": "",
                                "tooltip": getText("Export to Excel")
                            }
                        ]
                    },
                    {
                        "rows": [
                            {
                                "$button": "print",
                                "name": "print",
                                "view": "button",
                                "type": "htmlbutton",
                                "width": 40,
                                "id": "print",
                                "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-print'></span>",
                                "css": "",
                                "tooltip": getText("Print")
                            }
                        ]
                    }
                ]
            },
            {},
            {
                "template": getText("File"),
                "view": "ssheet-bar-title",
                "height": 20,
                "width": 85
            }
        ]
    },
    {
        "view": "ssheet-separator"
    },
    {
        "padding": 3,
        "rows": [
            {
                "$button": "undo",
                "view": "ssheet-button",
                "label": getText("Undo"),
                "width": 80,
                "name": "undo",
                "type": "htmlbutton",
                "id": "undo",
                "css": "",
                "tooltip": getText("Undo")
            },
            {
                "$button": "redo",
                "view": "ssheet-button",
                "label": getText("Redo"),
                "width": 80,
                "name": "redo",
                "type": "htmlbutton",
                "id": "redo",
                "css": "",
                "tooltip": getText("Redo")
            },
            {
                "template": getText("Undo/Redo"),
                "view": "ssheet-bar-title",
                "height": 20
            }
        ]
    },
    {
        "view": "ssheet-separator"
    },
    {
        "padding": 3,
        "rows": [
        {
            "margin": 2,
            "cols": [
                {
                    "margin": 2,
                    "cols": [
                        {
                            "$button": "font-family",
                            "width": 124,
                            "name": "font-family",
                            "options": [
                                {
                                    "id": "Arial",
                                    "value": "Arial"
                                },
                                {
                                    "id": "'Roboto', sans-serif",
                                    "value": "Roboto"
                                },
                                {
                                    "id": "'PT Sans', Tahoma",
                                    "value": "PT Sans"
                                },
                                {
                                    "id": "Tahoma",
                                    "value": "Tahoma"
                                },
                                {
                                    "id": "Verdana",
                                    "value": "Verdana"
                                },
                                {
                                    "id": "Calibri, Tahoma",
                                    "value": "Calibri"
                                }
                            ],
                            "view": "richselect",
                            "id": "font-family",
                            "value": "'Roboto', sans-serif",
                            "suggest": {
                                "css": "webix_ssheet_suggest",
                                "padding": 0,
                                "data": [
                                    {
                                    "id": "Arial",
                                    "value": "Arial"
                                    },
                                    {
                                    "id": "'Roboto', sans-serif",
                                    "value": "Roboto"
                                    },
                                    {
                                    "id": "'PT Sans', Tahoma",
                                    "value": "PT Sans"
                                    },
                                    {
                                    "id": "Tahoma",
                                    "value": "Tahoma"
                                    },
                                    {
                                    "id": "Verdana",
                                    "value": "Verdana"
                                    },
                                    {
                                    "id": "Calibri, Tahoma",
                                    "value": "Calibri"
                                    }
                                ]
                            },
                            "tooltip": getText("Font family")
                        },
                        {
                            "$button": "font-size",
                            "name": "font-size",
                            "options": [
                                {
                                    "id": "8px",
                                    "value": "8"
                                },
                                {
                                    "id": "9px",
                                    "value": "9"
                                },
                                {
                                    "id": "10px",
                                    "value": "10"
                                },
                                {
                                    "id": "11px",
                                    "value": "11"
                                },
                                {
                                    "id": "12px",
                                    "value": "12"
                                },
                                {
                                    "id": "14px",
                                    "value": "14"
                                },
                                {
                                    "id": "15px",
                                    "value": "15"
                                },
                                {
                                    "id": "16px",
                                    "value": "16"
                                },
                                {
                                    "id": "18px",
                                    "value": "18"
                                },
                                {
                                    "id": "20px",
                                    "value": "20"
                                },
                                {
                                    "id": "22px",
                                    "value": "22"
                                },
                                {
                                    "id": "24px",
                                    "value": "24"
                                },
                                {
                                    "id": "28px",
                                    "value": "28"
                                },
                                {
                                    "id": "36px",
                                    "value": "36"
                                }
                            ],
                            "width": 64,
                            "view": "richselect",
                            "id": "font-size",
                            "value": "15px",
                            "suggest": {
                                "css": "webix_ssheet_suggest",
                                "padding": 0,
                                "data": [
                                    {
                                        "id": "8px",
                                        "value": "8"
                                    },
                                    {
                                        "id": "9px",
                                        "value": "9"
                                    },
                                    {
                                        "id": "10px",
                                        "value": "10"
                                    },
                                    {
                                        "id": "11px",
                                        "value": "11"
                                    },
                                    {
                                        "id": "12px",
                                        "value": "12"
                                    },
                                    {
                                        "id": "14px",
                                        "value": "14"
                                    },
                                    {
                                        "id": "15px",
                                        "value": "15"
                                    },
                                    {
                                        "id": "16px",
                                        "value": "16"
                                    },
                                    {
                                        "id": "18px",
                                        "value": "18"
                                    },
                                    {
                                        "id": "20px",
                                        "value": "20"
                                    },
                                    {
                                        "id": "22px",
                                        "value": "22"
                                    },
                                    {
                                        "id": "24px",
                                        "value": "24"
                                    },
                                    {
                                        "id": "28px",
                                        "value": "28"
                                    },
                                    {
                                        "id": "36px",
                                        "value": "36"
                                    }
                                ]
                            },
                            "tooltip": getText("Font size")
                        }
                    ]
                },
                {
                    "$button": "borders",
                    "view": "ssheet-borders",
                    "width": 64,
                    "data": [
                        {
                            "id": "no",
                            "value": "no"
                        },
                        {
                            "id": "left",
                            "value": "left"
                        },
                        {
                            "id": "top",
                            "value": "top"
                        },
                        {
                            "id": "right",
                            "value": "right"
                        },
                        {
                            "id": "bottom",
                            "value": "bottom"
                        },
                        {
                            "id": "all",
                            "value": "all"
                        },
                        {
                            "id": "outer",
                            "value": "outer"
                        },
                        {
                            "id": "top-bottom",
                            "value": "top-bottom"
                        }
                        ],
                        "id": "borders",
                        "name": "borders",
                        "tooltip": getText("Borders")
                    }
                ]
            },
            {
                "margin": 2,
                "cols": [
                    {
                        "margin": 2,
                        "cols": [
                        {
                            "$button": "font-weight",
                            "view": "ssheet-toggle",
                            "width": 40,
                            "id": "font-weight",
                            "name": "font-weight",
                            "label": "B",
                            "css": "webix_ssheet_bold",
                            "onValue": "bold",
                            "offValue": "normal",
                            "tooltip": getText("Bold")
                        },
                        {
                            "$button": "font-style",
                            "view": "ssheet-toggle",
                            "width": 40,
                            "id": "font-style",
                            "name": "font-style",
                            "label": "I",
                            "css": "webix_ssheet_italic",
                            "onValue": "italic",
                            "offValue": "normal",
                            "tooltip": getText("Italic")
                        },
                        {
                            "$button": "text-decoration",
                            "view": "ssheet-toggle",
                            "width": 40,
                            "id": "text-decoration",
                            "name": "text-decoration",
                            "label": "U",
                            "css": "webix_ssheet_underline",
                            "onValue": "underline",
                            "offValue": "normal",
                            "tooltip": getText("Underline")
                        }
                        ]
                    },
                    {
                        "$button": "background",
                        "view": "ssheet-color",
                        "css": "webix_ssheet_background",
                        "name": "background",
                        "width": 64,
                        "title": "<span class='webix_ssheet_button_icon webix_ssheet_color_button_icon webix_ssheet_icon ssi-background' ></span>",
                        "tooltip": getText("Background color")
                    },
                    {
                        "$button": "color",
                        "view": "ssheet-color",
                        "css": "webix_ssheet_color",
                        "name": "color",
                        "width": 64,
                        "title": "<span class='webix_ssheet_button_icon webix_ssheet_color_button_icon webix_ssheet_icon ssi-color' ></span>",
                        "tooltip": getText("Font color")
                    }
                    ]
                },
                {
                    "template": getText("Font"),
                    "view": "ssheet-bar-title",
                    "height": 20
                }
            ]
        },
        {
            "view": "ssheet-separator"
        },
        {
            "padding": 3,
            "rows": [
            {
                "margin": 2,
                "cols": [
                    {
                        "$button": "text-align",
                        "view": "ssheet-align",
                        "value": "left",
                        "width": 64,
                        "data": [
                        {
                            "id": "left",
                            "css": "webix_ssheet_icon ssi-left",
                            "tooltip": getText("Left align")
                        },
                        {
                            "id": "center",
                            "css": "webix_ssheet_icon ssi-center",
                            "tooltip": getText("Center align")
                        },
                        {
                            "id": "right",
                            "css": "webix_ssheet_icon ssi-right",
                            "tooltip": getText("Right align")
                        }
                        ],
                        "name": "text-align",
                        "tooltip": getText("Horizontal align")
                    },
                    {
                        "$button": "span",
                        "name": "span",
                        "view": "button",
                        "type": "htmlbutton",
                        "width": 40,
                        "id": "span",
                        "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-span'></span>",
                        "css": "",
                        "tooltip": getText("Merge")
                    }
                ]
            },
            {
                "margin": 2,
                "cols": [
                    {
                        "$button": "vertical-align",
                        "view": "ssheet-align",
                        "value": "top",
                        "width": 64,
                        "data": [
                            {
                                "id": "top",
                                "css": "webix_ssheet_icon ssi-top",
                                "tooltip": getText("Top align")
                            },
                            {
                                "id": "middle",
                                "css": "webix_ssheet_icon ssi-middle",
                                "tooltip": getText("Middle align")
                            },
                            {
                                "id": "bottom",
                                "css": "webix_ssheet_icon ssi-bottom",
                                "tooltip": getText("Bottom align")
                            }
                        ],
                        "name": "vertical-align",
                        "tooltip": getText("Vertical align")
                    },
                    {
                        "$button": "wrap",
                        "name": "wrap",
                        "onValue": "wrap",
                        "offValue": "nowrap",
                        "view": "ssheet-toggle",
                        "type": "htmlbutton",
                        "width": 40,
                        "id": "wrap",
                        "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-wrap'></span>",
                        "css": "",
                        "tooltip": getText("Text wrap")
                    }
                ]
            },
            {
                "template": getText("Align"),
                "view": "ssheet-bar-title",
                "height": 20
            }
        ]
    },
    {
        "view": "ssheet-separator"
    },
    {
        "padding": 3,
        "rows": [
            {
                "$button": "format",
                "name": "format",
                "width": 106,
                "options": [
                    {
                        "id": "common",
                        "value": getText("Common")
                    },
                    {
                        "id": "price",
                        "value": getText("Currency"),
                        "example": "98.20"
                    },
                    {
                        "id": "int",
                        "value": getText("Number"),
                        "example": "2120.02"
                    },
                    {
                        "id": "percent",
                        "value": getText("Percent"),
                        "example": "0.5"
                    },
                    {
                        "id": "custom",
                        "value": getText("Custom")
                    }
                ],
                "popupWidth": 180,
                "popupEvents": {},
                "view": "richselect",
                "id": "format",
                "value": "common",
                "suggest": {
                "css": "webix_ssheet_suggest",
                "padding": 0,
                "data": [
                    {
                        "id": "common",
                        "value": getText("Common")
                    },
                    {
                        "id": "price",
                        "value": getText("Currency"),
                        "example": "98.20"
                    },
                    {
                        "id": "int",
                        "value": getText("Number"),
                        "example": "2120.02"
                    },
                    {
                        "id": "percent",
                        "value": getText("Percent"),
                        "example": "0.5"
                    },
                    {
                        "id": "custom",
                        "value": getText("Custom")
                    }
                ],
                "fitMaster": false,
                "width": 180,
                "body": {
                    "on": {}
                }
            },
            "tooltip": getText("Number format")
        },
        {
            "margin": 2,
            "cols": [
                {
                    "$button": "increase-decimals",
                    "name": "increase-decimals",
                    "view": "button",
                    "type": "htmlbutton",
                    "width": 40,
                    "id": "increase-decimals",
                    "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-increase-decimals'></span>",
                    "css": "",
                    "tooltip": getText("Increase decimal places")
                },
                {
                    "$button": "decrease-decimals",
                    "name": "decrease-decimals",
                    "view": "button",
                    "type": "htmlbutton",
                    "width": 40,
                    "id": "decrease-decimals",
                    "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-decrease-decimals'></span>",
                    "css": "",
                    "tooltip": getText("Decrease decimal places")
                }
                ]
            },
            {
                "template": getText("Number"),
                "view": "ssheet-bar-title",
                "height": 20
            }
        ]
    },
    {
        "view": "ssheet-separator"
    },
    {
        "padding": 3,
        "rows": [
        {
            "cols": [
                {
                    "$button": "sort-asc",
                    "name": "sort-asc",
                    "view": "button",
                    "type": "htmlbutton",
                    "width": 40,
                    "id": "sort-asc",
                    "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-sort-asc'></span>",
                    "css": "",
                    "tooltip": getText("Sort A to Z")
                },
                {
                    "$button": "create-filter",
                    "name": "create-filter",
                    "view": "button",
                    "type": "htmlbutton",
                    "width": 40,
                    "id": "create-filter",
                    "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-create-filter'></span>",
                    "css": "",
                    "tooltip": getText("Create filter")
                },
                {
                    "$button": "conditional-format",
                    "name": "conditional-format",
                    "view": "button",
                    "type": "htmlbutton",
                    "width": 40,
                    "id": "conditional-format",
                    "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-conditional-format'></span>",
                    "css": "",
                    "tooltip": getText("Conditional format")
                },
                {
                    "$button": "add-link",
                    "name": "add-link",
                    "view": "button",
                    "type": "htmlbutton",
                    "width": 40,
                    "id": "add-link",
                    "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-add-link'></span>",
                    "css": "",
                    "tooltip": getText("Add link")
                },
                {
                    "$button": "clear",
                    "name": "clear",
                    "view": "ssheet-button",
                    "icon": "clear-styles",
                    "arrow": true,
                    "area": true,
                    "width": 58,
                    "options": [
                        {
                            "id": "clear-value",
                            "value": getText("Clear values")
                        },
                        {
                            "id": "clear-style",
                            "value": getText("Clear styles")
                        },
                        {
                            "id": "clear-conditional-formats",
                            "value": getText("Clear conditional formats")
                        },
                        {
                            "id": "clear-dropdown-editors",
                            "value": getText("Clear dropdowns and filters")
                        },
                        {
                            "id": "clear-comments",
                            "value": getText("Clear comments")
                        },
                        {
                            "id": "clear-all",
                            "value": getText("Clear all")
                        }
                    ]
                }
            ]
        },
        {
            "cols": [
                {
                    "$button": "sort-desc",
                    "name": "sort-desc",
                    "view": "button",
                    "type": "htmlbutton",
                    "width": 40,
                    "id": "sort-desc",
                    "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-sort-desc'></span>",
                    "css": "",
                    "tooltip": getText("Sort Z to A")
                },
                {
                    "$button": "add-range",
                    "name": "add-range",
                    "view": "button",
                    "type": "htmlbutton",
                    "width": 40,
                    "id": "add-range",
                    "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-add-range'></span>",
                    "css": "",
                    "tooltip": getText("Set name for the selected range")
                },
                {
                    "$button": "lock-cell",
                    "name": "lock-cell",
                    "view": "button",
                    "type": "htmlbutton",
                    "width": 40,
                    "id": "lock-cell",
                    "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-lock-cell'></span>",
                    "css": "",
                    "tooltip": getText("Lock/unlock cell")
                },
                {
                    "$button": "add-dropdown",
                    "name": "add-dropdown",
                    "view": "button",
                    "type": "htmlbutton",
                    "width": 40,
                    "id": "add-dropdown",
                    "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-add-dropdown'></span>",
                    "css": "",
                    "tooltip": getText("Add dropdown")
                }
                ]
            },
            {
                "template": getText("Edit"),
                "view": "ssheet-bar-title",
                "height": 20
            }
        ]
    },
    {
        "view": "ssheet-separator"
    },
    {
        "padding": 3,
        "rows": [
            {
                "cols": [
                {
                    "$button": "add-image",
                    "view": "ssheet-button",
                    "label": getText("Image"),
                    "width": 108,
                    "name": "add-image",
                    "type": "htmlbutton",
                    "id": "add-image",
                    "css": "",
                    "tooltip": getText("Image")
                },
                {
                    "$button": "add-comment",
                    "view": "ssheet-button",
                    "label": getText("Comment"),
                    "width": 108,
                    "name": "add-comment",
                    "type": "htmlbutton",
                    "id": "add-comment",
                    "css": "",
                    "tooltip": getText("Comment")
                }
                ]
            },
            {
                "$button": "add-sparkline",
                "view": "ssheet-button",
                "label": getText("Graph"),
                "width": 108,
                "name": "add-sparkline",
                "type": "htmlbutton",
                "id": "add-sparkline",
                "css": "",
                "tooltip": getText("Graph")
            },
            {
                "template": getText("Insert"),
                "view": "ssheet-bar-title",
                "height": 20
            }
        ]
    },
    {
        "view": "ssheet-separator"
    },
    {
        "padding": 3,
        "rows": [
            {
                "cols": [
                {
                    "rows": [
                    {
                        "$button": "row",
                        "name": "row",
                        "view": "ssheet-button",
                        "icon": "row",
                        "arrow": true,
                        "area": true,
                        "width": 58,
                        "options": [
                        {
                            "id": "add",
                            "group": "row",
                            "value": getText("Insert row")
                        },
                        {
                            "id": "del",
                            "group": "row",
                            "value": getText("Delete row")
                        },
                        {
                            "id": "show",
                            "group": "row",
                            "value": getText("Show row")
                        },
                        {
                            "id": "hide",
                            "group": "row",
                            "value": getText("Hide row")
                        }
                        ]
                    },
                    {
                        "$button": "column",
                        "name": "column",
                        "view": "ssheet-button",
                        "icon": "column",
                        "arrow": true,
                        "area": true,
                        "width": 58,
                        "options": [
                        {
                            "id": "add",
                            "group": "column",
                            "value": getText("Insert column")
                        },
                        {
                            "id": "del",
                            "group": "column",
                            "value": ("Delete column")
                        },
                        {
                            "id": "show",
                            "group": "column",
                            "value": getText("Show column")
                        },
                        {
                            "id": "hide",
                            "group": "column",
                            "value": getText("Hide column")
                        }
                        ]
                    }
                    ]
                },
                {
                    "rows": [
                    {
                        "$button": "hide-gridlines",
                        "name": "hide-gridlines",
                        "view": "button",
                        "type": "htmlbutton",
                        "width": 40,
                        "id": "hide-gridlines",
                        "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-hide-gridlines'></span>",
                        "css": "",
                        "tooltip": getText("Hide/show gridlines")
                    },
                    {
                        "$button": "hide-headers",
                        "name": "hide-headers",
                        "view": "button",
                        "type": "htmlbutton",
                        "width": 40,
                        "id": "hide-headers",
                        "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-hide-headers'></span>",
                        "css": "",
                        "tooltip": getText("Hide/show headers")
                    }
                    ]
                },
                {
                    "rows": [
                    {
                        "$button": "freeze-rows",
                        "name": "freeze-rows",
                        "view": "button",
                        "type": "htmlbutton",
                        "width": 40,
                        "id": "freeze-rows",
                        "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-freeze-rows'></span>",
                        "css": "",
                        "tooltip": getText("Freeze/unfreeze rows")
                    },
                    {
                        "$button": "freeze-columns",
                        "name": "freeze-columns",
                        "view": "button",
                        "type": "htmlbutton",
                        "width": 40,
                        "id": "freeze-columns",
                        "label": "<span class='webix_ssheet_button_icon webix_ssheet_icon ssi-freeze-columns'></span>",
                        "css": "",
                        "tooltip": getText("Freeze/unfreeze columns")
                    }
                    ]
                }
                ]
            },
            {
                "template": getText("View"),
                "view": "ssheet-bar-title",
                "height": 20
            }
            ]
    },
    {
        "view": "ssheet-separator"
    },
    {}
]
Back to top
If you have not checked yet, be sure to visit site of our main product Webix javascript ui framework and page of javascript spreadshee product.