Horizontal Scroll bar with dynamic no of columns and rows having header fixed for vertical Scroll bar in perfect scrollbar

I have a list for which number of rows and columns are dynamic. My header should remain fix when I am scrolling vertically, but it should move along with the list while moving horizontally. Vertical scrollbar is getting displayed but horizontal scrollbar is not getting displayed.

<div class="list-container">
    <ul>
            {{#each keyList}}
                <span class="item-header">{{this}}</span>
            {{/each}}
    </ul>
    <ul>
    {{#each item in list}}
        <li>
        {{#each keyList}}
            <span>{{helper item this}}</span>
        {{/each}}
        </li>
    {{/each}}
    </ul>
</div>

My js File: I am using perfect-scrollbar plugin to display scroll bar.

    list:function(){
    return [{name:"Abc", place:"Abc Place", department:"Abc Dept"},{name:"Xyz", place:"Xyz Place", department:"Xyz Dept"},{name:"Abc", place:"Abc Place", department:"Abc Dept"},{name:"Xyz", place:"Xyz Place", department:"Xyz Dept"},{name:"Abc", place:"Abc Place", department:"Abc Dept"},{name:"Xyz", place:"Xyz Place", department:"Xyz Dept"}];
}.property(),

    didInsertElement:function(){
        var a = this.$('div.list-container ul:nth-of-type(2)');
            Ps.initialize(a[0]);
        },

    getList:function(){
        var value=this.get('list');
        for (var i = 0; i < value.length; i++) {
            this.set('keyList', Object.keys(value[i]));
        }
    }.on('init'),

Helper:

Handlebars.registerBoundHelper('helper', function(item, column) {
  return item[column];
});

Styling File:

.list-container ul{
height: 70px;
overflow:hidden;
width:150px;
white-space: nowrap;
}

li {
overflow: hidden;
white-space: nowrap;
}