Skip to main content

DHTMLX Spreadsheet. Cell editor types example

This demo shows how to configure different cell editor types in DHTMLX Spreadsheet: datepicker for dates, timepicker for time values, and select dropdowns for predefined options.

Live example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    menu: true
});

spreadsheet.parse(dataset);

<!-- component container -->
<div id="spreadsheet" style="height: 100%; width: 100%"></div>

<!-- dataset -->

<script>
const dataset = {
    sheets: [
      {
        name: "Types of editors",
        data: [
          {
            cell: "A1",
            css: "header",
            format: "common",
            value: "Datepicker",
          },
          { cell: "A2", format: "date", value: new Date(2033, 02, 09) },
          { cell: "C2", format: "number" },
          {
            cell: "A3",
            css: "header",
            format: "common",
            value: "Timepicker",
          },
          { cell: "C3", format: "number" },
          { cell: "A4", format: "time", value: 15.63541666666788 },
          {
            cell: "A5",
            css: "header",
            format: "common",
            value: "Select. List of items",
          },
          {
            cell: "A6",
            value: "In progress",
            editor: {
              type: "select",
              options: ["Open", "In progress", "Done"],
            },
          },
          {
            cell: "A7",
            css: "header",
            format: "common",
            value: "Select. List from a range",
          },
          {
            cell: "A8",
            value: "",
            editor: { type: "select", options: "A9:A12" },
          },
          { cell: "A9", format: "common", value: "Pineapple" },
          { cell: "A10", format: "common", value: "Orange" },
          { cell: "A11", format: "common", value: "Banana" },
          { cell: "A12", format: "common", value: "Apple" },
        ],
        cols: [
          { width: 225 },
          { width: 120 },
          { width: 120 },
          { width: 120 },
          { width: 120 },
        ],
        rows: [
          { height: 32 },
          { height: 32 },
          { height: 32 },
          { height: 32 },
          { height: 32 },
          { height: 32 },
          { height: 32 },
          { height: 32 },
        ],
      },
    ],
    styles: { header: { "font-weight": "bold" } },
  };
</script>

Data-entry forms embedded in spreadsheets need input validation and user-friendly controls. Free-text cells lead to inconsistent date formats, invalid times, and typos in status fields. Typed editors (date pickers, time pickers, and dropdown selects) ensure clean, structured input directly in the cell.

This example configures cells with different editor types in the dataset. Setting format: "date" on a cell enables the datepicker editor when the cell is clicked. Setting format: "time" enables the timepicker. For dropdown selects, the cell object includes editor: { type: "select", options: ["Open", "In progress", "Done"] } with an inline array, or editor: { type: "select", options: "A9:A12" } to pull options from a cell range.

Solution overview​

  1. Set format: "date" on a cell to enable the datepicker editor
  2. Set format: "time" on a cell to enable the timepicker editor
  3. Set editor: { type: "select", options: [...] } for a dropdown with inline options
  4. Set editor: { type: "select", options: "A9:A12" } to populate the dropdown from a cell range

Key points​

  • Date values: The sample initializes the date cell with a Date object: new Date(2033, 02, 09)
  • Time value: The sample initializes the time cell with a numeric value: 15.635
  • Range-based options: The select editor can pull options from a cell range such as A9:A12

API reference​

Additional resources​