DayPilot.Scheduler.rowHeaderColumns

The rowHeaderColumns property (array) specifies the row header columns displayed by the JavaScript Scheduler component. 

Properties of the array items:

  • display (string) - name of the resources[] item property that stores html to be displayed in the cells (tabular mode only)

  • hidden (boolean) - sets visibility of the column (optional; available since 2020.2.4373)

  • html (string) - optional HTML content of the row header (it will be used instead of text when rendering the Scheduler in the browser; during image export, html value is ignored)

  • maxAutoWidth (number): maximum column width (in pixels) for row header width auto-fit; optional (available since 2022.4.5479)

  • sort (string) - name of the resources[] item property that will be used for row sorting (optional; tabular mode only)

  • text | title (string) - column title

  • toolTip (string) - tooltip text (available since 2023.3.5731)

  • bubbleHtml (string) - static bubble HTML (available since 2023.3.5731); requires rowHeaderColumnBubble to be set

  • width (number) - column width in pixels (optional; if not specified, rowHeaderColumnDefaultWidth value will be used)

For more information about the "Tabular" vs "Legacy" mode please see rowHeaderColumnsMode.

Default Value

null

Example

dp.rowHeaderColumns = [
  { title: "Name", display: "name" },
  { title: "Floor", display: "floor" },
  { title: "Type", display: "type" }
];

dp.resources = [
  { id: "101", name: "Room 101", location: "Floor 1", type: "single" },
  { id: "102", name: "Room 102", location: "Floor 1", type: "double" },
  { id: "201", name: "Room 201", location: "Floor 2", type: "suite" },
  { id: "202", name: "Room 202", location: "Floor 2", type: "suite" },
];