Skip to main content

DHTMLX Spreadsheet. Custom row and column count example

This demo shows how to set a custom number of rows and columns in DHTMLX Spreadsheet using the rowsCount and colsCount configuration properties.

Live example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    rowsCount: 10, // number of rows
    colsCount: 10  // number of columns
});

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>

Not every spreadsheet application needs hundreds of columns and thousands of rows. A compact data entry form, such as a short survey, a budget template, or a settings panel, benefits from a smaller grid that keeps users focused and reduces visual clutter.

This example initializes the Spreadsheet with rowsCount: 10 and colsCount: 10, creating a compact 10x10 grid. The configuration object is passed to the constructor, and data is loaded via parse() with cell-level items specifying coordinates like "A1", "B2", and so on.

Solution overview​

  1. Create the Spreadsheet with new dhx.Spreadsheet("spreadsheet", { rowsCount: 10, colsCount: 10 })
  2. Call spreadsheet.parse(dataset) to populate the grid with cell data

Key points​

  • Default values: Without these properties, the Spreadsheet initializes with 1000 columns and 25 rows
  • Combined config: rowsCount and colsCount can be set alongside any other Spreadsheet configuration option in the same constructor call

API reference​

  • colsCount: Sets the number of columns on initialization.
  • rowsCount: Sets the number of rows on initialization.

Additional resources​