sidemenu not rendering when defined in cols or rows

Webix JS
#1

I have an issue with the sidemenu component.

My body html is as follows:-

<body>
    <script>
        webix_skin = 'compact';
    </script>
    <script src="webix/webix_debug.js"></script>
    <script src="js/site.js"></script>
</body>

and site.js looks like this:-

webix.ui({
debug: true,
responsive: true,
rows: [
    {
        view: 'template',
        type: 'header',
        template: 'Utilities'},
    {
        view: "sidemenu",
        id: "menu",
        width: 200,
        position: 'left',
        body:{
            view:"list",
            borderless: true,
            scroll: false,
            template: "<span class='webix_icon fa-#icon#'></span> #value#",
            data:[
                {id: 1, value: "Customers", icon: "user"},
                {id: 2, value: "Products", icon: "cube"},
                {id: 3, value: "Reports", icon: "line-chart"},
                {id: 4, value: "Archives", icon: "database"},
                {id: 5, value: "Settings", icon: "cog"}
            ],
            select: true,
        }
    }
],
}).show();

This does not render anything. However, this does:-

webix.ui({
debug: true,
responsive: true,

view: "sidemenu",
id: "menu",
width: 200,
position: 'left',
body:{
    view:"list",
    borderless: true,
    scroll: false,
    template: "<span class='webix_icon fa-#icon#'></span> #value#",
    data:[
        {id: 1, value: "Customers", icon: "user"},
        {id: 2, value: "Products", icon: "cube"},
        {id: 3, value: "Reports", icon: "line-chart"},
        {id: 4, value: "Archives", icon: "database"},
        {id: 5, value: "Settings", icon: "cog"}
    ],
    select: true,
}
}).show();

So does the sidemenu component work as part of a row/col layout? If so, what am I doing wrong?