I am facing an issue with the table structure below:
<table class="table main-table" ng-if="linesArray && linesArray.length > 0">
<!-- HEADER-->
<thead class="table-head">
<tr>
<th ng-repeat="column in ::columns" width="{{::column.width}}">{{::column.label}}</th>
</tr>
</thead>
<!-- BODY -->
<tbody>
<tr ng-repeat="line in linesArray">
<td ng-repeat="column in ::columns" width="{{::column.width}}" ng-class="{
'center-text' : (!line[column.key] || line[column.key].length === 0)
}">{{line[column.key] !== undefined ? line[column.key] : '--'}}
</td>
</tr>
</tbody>
</table>
Here is how it appears when rendered:
https://i.sstatic.net/MJoXT.png
The Goal I'm Striving For:
I aim to combine the data from two distinct fields into a single column, resulting in something like this:
https://i.sstatic.net/OJMBy.png
In the example above, the column displays date and time information with specific formatting.
The directive responsible for managing the table logic:
function historicalSummaryTable($filter) {
return {
restrict: 'EA',
link: link,
templateUrl: 'jfrontalesru/app/components/historicalSummary/historicalSummaryTable.html',
scope: {
linesArray: "=",
columns: "=",
groupField: "@",
groupFieldFilter: "@",
groupFieldFilterFormat: "@"
},
};
function link(scope, element, attrs) {
var _groupField = 'groupField';
var _subgroupField = 'subgroupField';
scope.$watch('linesArray', function(value) {
scope.linesArray.forEach(function(line) {
// Apply filter for each column if set
scope.columns.forEach(function(column, index) {
// Apply the filter
if (column.filter && column.filter.length > 0) {
line[column.key] = $filter(column.filter)(line[column.key], column.format);
}
});
});
});
}
}
This directive formats the input date data and then passes it through the controller as shown below:
vm.historicalColumns = [
{label: $translate('columnDateTime'), key: "timestamp",width:"18%", filter:"date",format:"mediumTime", group:false},
{label: $translate('columnDetails'), key: "detail",width:"50%", group:false},
{label: $translate('columnOrigin'), key: "origin",width:"17%", group:false},
{label: $translate('columnUser'), key: "user",width:"15%", group:false}
];
I am unsure of how to achieve the desired result, any guidance would be appreciated.