AngularJS Simple Example

HTML

<div ng-app ng-controller="LoginController">
    <div class="table-wrapper" >
        <div class="name-table" >
            <div class="name-header">
                <label class="name-label">project Names</label>
            </div>
            <div class="name-div">
                <label class="name-label" ng-repeat="stratname in strat" track by $index>{{stratname}}</label>
            </div>
        </div>
        <div class="metric-table">
            <div class="metric-header">
                <label class="metric-name" ng-repeat="header in headers">{{header}}
                </label>
            </div>
            <div class="metric-value-div">
                <div ng-repeat="detail in sortableTable" track by $index>
                    <label class="metric-value" ng-repeat="header in headers" track by $index>
                        {{detail[header]}}
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.name-label{
    display: block;
    height: 40px;
    /* float: left; */
    position: relative;
}
.table-wrapper{
    display:block;
}
.name-table{
    display:inline-block;
    background-color:white;
    width:40%;
}
.metric-table{
     display: inline-block;
    background-color: white;
    width: 50%;
    height: calc(100% - 72px);
    position: absolute;
    overflow-x: scroll;
    overflow-y: hidden;
}
.metric-name{
    min-width:200px;
    width: 20%;
    height:40px;
    display:inline-block;
}
.metric-value{
    min-width:200px;
    width: 20%;
    height:40px;
}

JavaScript

function LoginController($scope) {
     $scope.headers = ['Name','Age','Marks','roi','sales','Markss'];
    $scope.strat = ['one','two','three','four','five','six','seven','eight','nine','ten','ele','twe'];
    $scope.sortableTable = [
					{
						Name: "A", Age: 23, Marks: 45,roi: "A", sales: 23, Markss: 45,Names: "A", Ages: 23, Marksss: 45
					},
					{
						Name: "A", Age: 23, Marks: 45,roi: "A", sales: 23, Markss: 45,Names: "A", Ages: 23, Marksss: 45
					},
					{
						Name: "A", Age: 23, Marks: 45,roi: "A", sales: 23, Markss: 45,Names: "A", Ages: 23, Marksss: 45
					},
					{
						Name: "A", Age: 23, Marks: 45,roi: "A", sales: 23, Markss: 45,Names: "A", Ages: 23, Marksss: 45
					},
					{
						Name: "A", Age: 23, Marks: 45,roi: "A", sales: 23, Markss: 45,Names: "A", Ages: 23, Marksss: 45
					},
					{
						Name: "A", Age: 23, Marks: 45,roi: "A", sales: 23, Markss: 45,Names: "A", Ages: 23, Marksss: 45
					},
                    {
						Name: "A", Age: 23, Marks: 45,roi: "A", sales: 23, Markss: 45,Names: "A", Ages: 23, Marksss: 45
					},
					{
						Name: "A", Age: 23, Marks: 45,roi: "A", sales: 23, Markss: 45,Names: "A", Ages: 23, Marksss: 45
					},
					{
						Name: "A", Age: 23, Marks: 45,roi: "A", sales: 23, Markss: 45,Names: "A", Ages: 23, Marksss: 45
					},
					{
						Name: "A", Age: 23, Marks: 45,roi: "A", sales: 23, Markss: 45,Names: "A", Ages: 23, Marksss: 45
					},
					{
						Name: "A", Age: 23, Marks: 45,roi: "A", sales: 23, Markss: 45,Names: "A", Ages: 23, Marksss: 45
					},
					{
						Name: "A", Age: 23, Marks: 45
					},
            
				];
}