# JavaScript Kanban | DayPilot Pro for JavaScript Demo

> You can specify row header columns using the rowHeaderColumns property.

## Links

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

## Source

### Inline demo script 1

```javascript
const kanban = new DayPilot.Kanban("kanban", {
            onCardMove: async args => {
                args.async = true;
                const modal = await DayPilot.Modal.confirm("Move the card to: " + args.column.data.name);
                if (modal.canceled) {
                    args.preventDefault();
                }
                args.loaded();
            },
            rowHeaderColumns: [
                {name: "Name", display: "name"},
                {name: "Location", display: "location"}
            ],
            columnWidthSpec: "Fixed",
            columnWidth: 100,
        });
        kanban.init();

        const app = {
            loadData() {
                const columns = [];
                for (let i = 1; i <= 100; i++) {
                    columns.push({name: "Column " + i, id: i});
                }

                const swimlanes = [
                    {name: "Swimlane 1", id: 1, location: "Location 1"},
                    {name: "Swimlane 2", id: 2, location: "Location 1"},
                    {name: "Swimlane 3", id: 3, location: "Location 2"}
                ];

                const cards = [
                    {id: 1, "name": "Task 1", column: 1, text: "This is a description of task #1.", swimlane: 1, barColor: "#f9ba25"},
                    {id: 2, "name": "Task 2", column: 1, text: "This is a description of task #2.", swimlane: 2, barColor: "#1155CC"},
                    {id: 3, "name": "Task 3", column: 1, text: "This is a description of task #3.", swimlane: 3, barColor: "#999"},
                    {id: 4, "name": "Task 4", column: 3, text: "This is a description of task #4.", swimlane: 2, barColor: "#6AA84F"},
                    {id: 5, "name": "Task 5", column: 2, text: "This is a description of task #5.", swimlane: 2, barColor: "#F6B26B"},
                ];
                kanban.update({columns, cards, swimlanes});
            },
            init() {
                this.loadData();
            }
        };
        app.init();
```