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)

• nonresizable (boolean): if set to true, the column will not be user-resizable (available since 2024.3.6172); see also rowHeaderColumnsResizable

• 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

Scheduler config:

{
  rowHeaderColumns: [
    { text: "Name", display: "name" },
    { text: "Floor", display: "location", width: 50 },
    { text: "Type", display: "type" }
  ]
}

Row data:

const 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" },
];