I've encountered an issue with rendering tables in the UI.
The problem arises from the fact that the tables are being rendered based on a large list using ng-repeat, resulting in slow rendering times.
Below is the CSS code used:
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
}
.wrapper .table-nested {
background: #fff;
border: 2px solid #444;
text-align: left;
}
.wrapper .table-nested th, .table-nested td {
padding: 0;
}
.wrapper .table-nested th + th, .table-nested th + td, .table-nested td + th, .table-nested td + td {
padding-left: 5px;
}
and so on...
Additionally, here is the HTML code snippet for rendering the tables.
<div class=" wrapper">
<p>Fields</p>
<table class="table-nested">
<thead>
<tr>
...
</tr>
</thead>
<tbody ng-class="{opened: item.opened}" ng-include="'table_tree.html'" ng-repeat="item in currentFile.xmlFileAttributes.addNewXmlFileFieldList.xsdElement"></tbody>
</table>
<script id="table_tree.html" type="text/ng-template">
...
</div>
I'm looking for advice on optimizing this setup. Should I modify the list structure or utilize JavaScript to enhance rendering speed?
Here is the relevant JS code:
$scope.toggleAllCheckboxes = function($event) {
...
};
$scope.initCheckbox = function(item, parentItem) {
...
};
$scope.toggleCheckbox = function(item, parentScope) {
...
};
and so on...
Any suggestions or recommendations would be greatly appreciated.