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
  • 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



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" },