# Row Header Columns (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

> You can specify multiple row header columns that will display additional details about a row. Read more about [row header columns](https://doc.daypilot.org/scheduler/row-header-columns/) [doc.daypilot.org].

## Links

- Canonical HTML: /demo/scheduler/rowheadercolumns.html
- Source HTML folder: /demo/scheduler/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Scheduler("dp", {
            startDate: new DayPilot.Date("2026-03-01"),
            days: new DayPilot.Date("2026-03-01").daysInMonth(),
            scale: "Day",
            timeHeaders: [
                {groupBy: "Month"},
                {groupBy: "Day", format: "d"}
            ],
            rowHeaderColumns: [
                {text: 'Name', display: "name", nonresizable: true},
                {text: 'Floor', display: "location", bubbleHtml: "Indicates the floor where the room is located."},
                {text: 'Size', display: "size"}
            ],
            rowHeaderColumnsMode: "Tabular",
            resources: [
                {
                    id: "A", expanded: true, name: "Building A", children: [
                        {id: "101", name: "Room 101", location: "Floor 1", size: "2 beds"},
                        {id: "102", name: "Room 102", location: "Floor 1", size: "3 beds"},
                        {id: "103", name: "Room 103", location: "Floor 1", size: "1 bed"},
                        {id: "201", name: "Room 201", location: "Floor 2", size: "2 beds"},
                    ]
                },
                {
                    id: "B", expanded: true, name: "Building B", children: [
                        {id: "301", name: "Room 301", location: "Floor 1", size: "2 beds"},
                        {id: "302", name: "Room 302", location: "Floor 1", size: "3 beds"},
                        {id: "303", name: "Room 303", location: "Floor 1", size: "1 bed"},
                        {id: "401", name: "Room 401", location: "Floor 2", size: "2 beds"},
                    ]
                },
            ],
            treeEnabled: true,
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                const name = modal.result;
                if (!name) return;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: name
                });
                dp.message("Created");
            },
            rowHeaderColumnsResizable: true,
            rowHeaderColumnBubble: new DayPilot.Bubble({
                onLoad: args => {
                    console.log("bubble", args);
                }
            }),
            height: 300
        });
        dp.init();


        const app = {
            toggle: function() {
                dp.rowHeaderColumns[1].hidden = !dp.rowHeaderColumns[1].hidden;
                dp.update();
            },
            init: function() {
                this.addEventHandlers();
                this.loadEventData();
            },
            addEventHandlers() {
                document.querySelector("#toggle").addEventListener("click", function(ev) {
                    ev.preventDefault();
                    app.toggle();
                });
            },
            loadEventData() {
                const events = [];
                let start = new DayPilot.Date("2026-03-02T00:00:00");

                // generate and load events
                for (let i = 1; i < 6; i++) {
                    const duration = Math.floor(Math.random() * 6) + 1; // 1 to 6
                    const end = start.addDays(duration);
                    events.push({
                        start: start,
                        end: end,
                        id: DayPilot.guid(),
                        resource: "101",
                        text: "Reservation #" + i
                    });
                    start = end.addDays(1);
                }
                dp.update({events: events});
            }
        };
        app.init();
```