Skip to main content

DHTMLX Spreadsheet. Pre-styled cells example

This demo shows how to apply custom cell styles in DHTMLX Spreadsheet using the styles object in the dataset.

Live example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet");

const styledDataset = {
    data: dataset,
    // setting styles for cells
    styles: {
        someclass: {
            background: "#F2F2F2",
            color: "#F57C00"
        }
    }
};

spreadsheet.parse(styledDataset);
<!-- component container -->
<div style="height: 100%; max-width:100%" id="spreadsheet"></div>

<!-- dataset -->

<script>
const dataset = [
      { cell: "a1", value: "Ecuador" },
      { cell: "b1", value: "Banana" },
      // ... 33 more items (see Live Editor for full data)
    ];
</script>

Visual formatting transforms raw numbers into readable reports. Headers need bold text, financial figures benefit from right alignment, and color coding highlights key metrics. Cell-level styling in the dataset ensures the spreadsheet renders with the intended visual hierarchy from the first frame.

This example defines a styles object with a named style, someclass, that applies background: "#F2F2F2" and color: "#F57C00". Cell objects can reference a named style via the css property, and Spreadsheet applies those styles when spreadsheet.parse(styledDataset) loads the data.

Solution overview​

  1. Define a styles map inside the dataset object: { someclass: { background: "#F2F2F2", color: "#F57C00" } }
  2. Reference the style on cells with the css property inside data
  3. Call spreadsheet.parse(styledDataset) to render the styled cells

Key points​

  • Dataset styling: Named styles are declared in the styles object and applied to cells through the css property
  • Supported properties: Style objects can include properties such as background and color, which are the two properties used in this sample
  • Parse-time application: The styles take effect when spreadsheet.parse(styledDataset) loads the dataset

API reference​

  • parse(): Loads data together with named style definitions.

Additional resources​