Skip to main content

DHTMLX Spreadsheet. Hide formula bar example

This demo shows how to hide the editing line (formula bar) in DHTMLX Spreadsheet by setting the editLine configuration property to false.

Live example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    editLine: false // the editing bar is hidden, true - to show the editing bar
});

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>

Embedded spreadsheets that serve as read-only data displays or compact widgets often do not need the formula bar taking up vertical space. Hiding the editing line gives more room to the grid itself and presents a cleaner, more focused interface for end users who only need to view data.

This example sets editLine: false in the Spreadsheet constructor configuration so the editing line above the grid is not rendered.

Solution overview​

  1. Create the Spreadsheet with new dhx.Spreadsheet("spreadsheet", { editLine: false })
  2. Load data with spreadsheet.parse(data)
  3. The editing line is hidden when the Spreadsheet is rendered

Key points​

  • Default is visible: The editLine property defaults to true, so the formula bar appears unless explicitly disabled
  • UI visibility only: This sample focuses on hiding the editing line through configuration
  • Combine with readonly: Set both editLine: false and readonly: true for a fully non-editable display without the formula bar

API reference​

  • editLine: Shows or hides the editing bar.
  • readonly: Enables read-only mode for the entire Spreadsheet.

Additional resources​