DHTMLX Spreadsheet. Initialization with menu bar example
This demo shows how to enable the top menu bar in DHTMLX Spreadsheet by setting the menu configuration property to true.
Live example
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
menu: true // the menu is switched on, false - to switch it off
});
spreadsheet.parse(dataset);<!-- component container -->
<div style="height: 100%; max-width:100%" id="spreadsheet"></div>
<!-- dataset -->
<script>
const dataset = {
"sheets": [
{
"name": "Products",
"id": "products_id",
"data": [
{
"value": "Country",
"css": "header bold left border-left border-right-gray",
"format": "common",
"cell": "A1"
},
{
"value": "Product",
"css": "header bold border-right-gray",
"format": "common",
"cell": "B1"
},
{
"value": "Price",
"css": "header bold right border-right-gray",
"format": "common",
"cell": "C1"
},
{
"value": "Amount",
"css": "header bold right border-right-gray",
"format": "common",
"cell": "D1"
},
{
"value": "Total Price",
"css": "header bold right border-right-gray200",
"format": "common",
"cell": "E1"
},
{
"value": "Ecuador",
"format": "common",
"css": "bold left bg border-left border-right-gray border-bottom-gray",
"cell": "A2"
},
{
"value": "Banana",
"format": "common",
"css": "text border-right-gray border-bottom-gray",
"cell": "B2"
},
{
"value": 6.68,
"format": "currency",
"css": "right border-right-gray border-bottom-gray",
"cell": "C2"
},
{
"value": 430,
"format": "number",
"css": "right border-right-gray border-bottom-gray",
"cell": "D2"
},
{
"value": "=C2*D2",
"format": "currency",
"css": "bold right border-right-gray200 border-bottom-gray",
"edited": false,
"editorValue": "=",
"cell": "E2"
},
{
"value": "Belarus",
"format": "common",
"css": "bold left bg border-left border-right-gray border-bottom-gray",
"cell": "A3"
},
{
"value": "Apple",
"format": "common",
"css": "text border-right-gray border-bottom-gray",
"cell": "B3"
},
{
"value": 3.75,
"format": "currency",
"css": "right border-right-gray border-bottom-gray",
"cell": "C3"
},
{
"value": 600,
"format": "number",
"css": "right border-right-gray border-bottom-gray",
"cell": "D3"
},
{
"value": "=C3*D3",
"format": "currency",
"css": "bold right border-right-gray200 border-bottom-gray",
"edited": false,
"cell": "E3"
},
{
"value": "Peru",
"format": "common",
"css": "bold left bg border-left border-right-gray border-bottom-gray",
"cell": "A4"
},
{
"value": "Grapes",
"format": "common",
"css": "text border-right-gray border-bottom-gray",
"cell": "B4"
},
{
"value": 7.69,
"format": "currency",
"css": "right border-right-gray border-bottom-gray",
"cell": "C4"
},
{
"value": 740,
"format": "number",
"css": "right border-right-gray border-bottom-gray",
"cell": "D4"
},
{
"value": "=C4*D4",
"format": "currency",
"css": "bold right border-right-gray200 border-bottom-gray",
"edited": false,
"cell": "E4"
},
{
"value": "Egypt",
"format": "common",
"css": "bold left bg border-left border-right-gray border-bottom-gray",
"cell": "A5"
},
{
"value": "Orange",
"format": "common",
"css": "text border-right-gray border-bottom-gray",
"cell": "B5"
},
{
"value": 5.86,
"format": "currency",
"css": "right border-right-gray border-bottom-gray",
"cell": "C5"
},
{
"value": 560,
"format": "number",
"css": "right border-right-gray border-bottom-gray",
"cell": "D5"
},
{
"value": "=C5*D5",
"format": "currency",
"css": "bold right border-right-gray200 border-bottom-gray",
"edited": false,
"cell": "E5"
},
{
"value": "South Africa",
"format": "common",
"css": "bold left bg border-left border-right-gray border-bottom-gray",
"cell": "A6"
},
{
"value": "Grapefruit",
"format": "common",
"css": "text border-right-gray border-bottom-gray",
"cell": "B6"
},
{
"value": 8.58,
"format": "currency",
"css": "right border-right-gray border-bottom-gray",
"cell": "C6"
},
{
"value": 800,
"format": "number",
"css": "right border-right-gray border-bottom-gray",
"cell": "D6"
},
{
"value": "=C6*D6",
"format": "currency",
"css": "bold right border-right-gray200 border-bottom-gray",
"edited": false,
"cell": "E6"
},
{
"value": "Spain",
"format": "common",
"css": "bold left bg border-left border-right-gray border-bottom-gray",
"cell": "A7"
},
{
"value": "Lemon",
"format": "common",
"css": "text border-right-gray border-bottom-gray",
"cell": "B7"
},
{
"value": 9.12,
"format": "currency",
"css": "right border-right-gray border-bottom-gray",
"cell": "C7"
},
{
"value": 650,
"format": "number",
"css": "right border-right-gray border-bottom-gray",
"cell": "D7"
},
{
"value": "=C7*D7",
"format": "currency",
"css": "bold right border-right-gray200 border-bottom-gray",
"edited": false,
"cell": "E7"
},
{
"value": "Iran",
"format": "common",
"css": "bold left bg border-left border-right-gray border-bottom-gray",
"cell": "A8"
},
{
"value": "Pomegranate",
"format": "common",
"css": "text border-right-gray border-bottom-gray",
"edited": false,
"cell": "B8"
},
{
"value": 9.67,
"format": "currency",
"css": "right border-right-gray border-bottom-gray",
"cell": "C8"
},
{
"value": 300,
"format": "number",
"css": "right border-right-gray border-bottom-gray",
"cell": "D8"
},
{
"value": "=C8*D8",
"format": "currency",
"css": "bold right border-right-gray200 border-bottom-gray",
"edited": false,
"cell": "E8"
},
{
"value": "Total",
"edited": false,
"editorValue": "T",
"format": "common",
"css": "total bold left bg border-left border-right-gray border-bottom-gray200",
"cell": "A9"
},
{
"value": "=COUNTA(B2:B8)",
"edited": false,
"editorValue": "=COUNTA(B2:B8)",
"format": "common",
"css": "total bold left border-right-gray border-bottom-gray200",
"cell": "B9"
},
{
"value": "=AVERAGE(C2:C8)",
"edited": false,
"editorValue": "=C2AVERAGE(C2:C8)",
"format": "currency",
"css": "total bold right border-right-gray border-bottom-gray200",
"cell": "C9"
},
{
"value": "=AVERAGE(D2:D8)",
"format": "number",
"css": "total bold right border-right-gray border-bottom-gray200",
"edited": false,
"cell": "D9"
},
{
"value": "=AVERAGE(E2:E8)",
"format": "currency",
"css": "total bold right border-right-gray200 border-bottom-gray200",
"edited": false,
"cell": "E9"
}
],
"freeze": { "col": 1, "row": 1 },
"cols": [
{ "width": 180, "hidden": false },
{ "width": 120, "hidden": false },
{ "width": 120, "hidden": false },
{ "width": 120, "hidden": false },
{ "width": 120, "hidden": false }
],
"rows": [
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 32, "hidden": false },
{ "height": 44, "hidden": false }
],
"merged": []
}
],
"styles": {
"header": {
"border-top": "1px solid #B0B8CD",
"border-bottom": "1px solid #D4DAE4",
"background": "#F2F2F2"
},
"bold": {
"font-weight": "bold"
},
"left": {
"white-space": "nowrap",
"text-align": "left",
"justify-content": "flex-start"
},
"right": {
"white-space": "nowrap",
"text-align": "right",
"justify-content": "flex-end"
},
"border-left": {
"border-left": "1px solid #B0B8CD"
},
"border-right-gray": {
"border-right": "1px solid #D4DAE4"
},
"border-right-gray200": {
"border-right": "1px solid #B0B8CD"
},
"border-bottom-gray": {
"border-bottom": "1px solid #D4DAE4"
},
"border-bottom-gray200": {
"border-bottom": "1px solid #B0B8CD"
},
"bg": {
"background": "#F2F2F2"
},
"text": {
"white-space": "nowrap"
},
"total": {
"white-space": "nowrap"
},
"wrap": {
"white-space": "normal",
"word-break": "break-all"
},
},
"formats": [
{ "name": "Common", "id": "common", "mask": "#,##0.##", "example": "15" },
{
"name": "Number",
"id": "number",
"mask": "#,##0.00",
"example": "15.0031"
},
{
"name": "Percent",
"id": "percent",
"mask": "#,##0.00%",
"example": "15.0031"
},
{
"name": "Currency",
"id": "currency",
"mask": "[$$]#,##0.00",
"example": "15.0031"
},
{
"name": "Date",
"id": "date",
"mask": "dd/mm/yyyy",
"example": "44490.5625"
},
{
"name": "Time",
"id": "time",
"mask": "h:mm am/pm",
"example": "44490.5625",
"timeFormat": 12
},
{ "name": "Text", "id": "text", "mask": "@", "example": "some text" }
]
};
</script>Desktop spreadsheet applications feature a menu bar with grouped commands for file operations, editing, and formatting. Enabling the menu in DHTMLX Spreadsheet gives users a familiar navigation pattern and quick access to frequently used actions.
This example passes menu: true in the Spreadsheet constructor configuration. The menu bar is enabled as part of initialization while the spreadsheet data is loaded with parse(dataset).
Solution overview
- Create the Spreadsheet with
new dhx.Spreadsheet("spreadsheet", { menu: true }) - Load data with
spreadsheet.parse(dataset) - The menu bar is rendered as part of the initialized Spreadsheet UI
Key points
- Complements the toolbar: The menu provides an alternative navigation path within the Spreadsheet UI
- Combined config: The
menuproperty is one of the standard Spreadsheet initialization options
API reference
- menu: Enables or disables the top menu bar.