Looking to create a CSS grid table with 5 columns and an undetermined number of rows. The goal is to display a pop-up element when an element in the first column is clicked, covering columns 2 through 5. This ensures that only the first column remains visible while maintaining scroll position across all columns.
The issue arises when dealing with larger datasets as the performance slows down due to multiple ng-repeats. Is there a way to consolidate these ng-repeats without sacrificing the separation of columns?
Attempting to use ng-repeat-start/end requires encapsulating data elements under a parent element, which results in auto-generated rows and cells. This restricts control over individual columns, such as setting scrollability or specific heights for the first column.
<h1>Call List</h1>
<select>
<option ng-repeat="list in vm.list">{{list.name}}</option>
</select>
<div class="call-list-grid" ng-init="vm.selected=false;">
<div ng-click="vm.selected = !vm.selected" id="consumers" ng-repeat-start="list in vm.listdata">
{{list.name}}</div>
<div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="status">{{list.status}}</div>
<div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="timezone">{{list.timezone}}</div>
<div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="time">{{list.time}}</div>
<div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="guide" ng-repeat-end>{{list.guide}}</div>
<div ng-if="vm.selected" id="selected-consumer"></div>
</div>
This snippet showcases the current code in an optimization phase.
<div class="container">
<h1>Title header</h1>
<select>
<option ng-repeat="data in vm.data">{{list.name}}</option>
</select>
<div class="list-grid" id="grid" ng-class="{'selected' : vm.selected}"
ng-init="vm.selected=false;">
<div id="user" ng-class="{'user-selected' : vm.selected}">
<div ng-click="vm.selectUser()" ng-repeat="list in vm.listdata">
{{list.name}}
</div>
</div>
<div id="status">
<div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
ng-repeat="list in vm.listdata">
{{list.status}}</div>
</div>
<div id="timezone">
<div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
ng-repeat="list in vm.listdata">
{{list.timezone}}</div>
</div>
<div id="time">
<div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
ng-repeat="list in vm.listdata">
{{list.time}}
</div>
</div>
<div id="person">
<div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
ng-repeat="list in vm.listdata">
{{list.person}}
</div>
</div>
<div ng-if="vm.selected" id="selected">
</div>
</div>
</div>
.list-grid {
display: grid;
grid-template-columns: auto auto auto auto auto;
row-gap: 2px;
height: 77vh;
overflow-x: hidden;
&.consumer-selected {
overflow: hidden;
}
}
#user {
grid-column-start: 1;
grid-column-end: 2;
// height: 100vh;
// overflow: hidden;
&.consumer-selected {
overflow-y: auto;
overflow-x: hidden;
height: 77vh;
}
}
#status {
grid-column-start: 2;
grid-column-end: 3;
&.consumer-selected {
display: none;
}
}
#timzone {
grid-column-start: 3;
grid-column-end: 4;
&.consumer-selected {
display: none;
}
}
#time {
grid-column-start: 4;
grid-column-end: 5;
&.consumer-selected {
display: none;
}
}
#person{
grid-column-start: 5;
grid-column-end: 6;
&.consumer-selected {
display: none;
}
}
#selected{
background-color: rgb(177, 218, 177);
grid-column-start: 2;
grid-column-end: 6;
grid-row: 1 / 50;
height: 77vh;
}