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