Hello everyone I have this mark up:
table: {
columns: [
{
header: "Col 1",
rows: [
1,2
]
},
{
header: "Col 2",
rows: [
5,6
]
},
{
header: "Col 3",
rows: [
3,4
]
}
]
}
I would like to use angularjs to build a table like this:
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th data-ng-repeat="col in table.columns">{{col.header}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="col in table.columns">
<td data-ng-repeat="row in col.rows">{{row}}</td>
</tr>
</tbody>
</table>
I would like to get the result like this:
Col 1 Col 2 Col 3
1 5 3
2 6 4
However, the code above doesn't produce that result. I don't mind changing the structure of the data if there is a better way to do this. The only requirement is that if I remove one column, all the rows belonging to that column need to go as well. Thanks
Maintain the data as you have it, and use the two functions below to obtain the rows and modify the template to use the getRows() function, please note that the code considers that you always have at least one column:
function getRows(){
let rows = new Array<Array<number>>();
for (let i = 0; i<this.table.columns[0].rows.length; i++) {
rows.push(getRow(i));
}
return row;
}
function getRow(index){
let row = new Array<number>();
for (let column of this.table.columns) {
row.push(column.rows[index];
}
return row;
}
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th data-ng-repeat="col in table.columns">{{col.header}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="row in getRows()">
<td data-ng-repeat="value in row">{{row}}</td>
</tr>
</tbody>
</table>
Hope this helps
Related
I'm trying to make a table's first column's each row (in this case order IDs) clickable so that I can display more info from this specific order ID in another container on my website. I looped through some JSON data to create the table like this:
function printData(jsonData) {
let myTable = document.getElementById("jsonTable")
for(let i=0; i < jsonData.length; i++) {
let row = `<tr>
<td>${jsonData[i].orderid}</td>
<td>${jsonData[i].customerid}</td>
<td>${jsonData[i].customer}</td>
<td>${jsonData[i].invaddr}</td>
<td>${jsonData[i].delivaddr}</td>
<td>${jsonData[i].deliverydate}</td>
<td>${jsonData[i].respsalesperson}</td></tr>`
jsonTable.innerHTML += row
}
}
And this is how my HTML file looks like:
<div class="datatable">
<div class="datatablecontent">
<table class="jsontable">
<tr id="jsontr">
<th>Order ID</th>
<th>Customer ID</th>
<th>Customer</th>
<th>InvAddr</th>
<th>Delivery Address</th>
<th>Delivery Date</th>
<th>Resp. For Sale </th>
<tbody id="jsonTable">
</tbody>
</tr>
</table>
</div>
</div>
While iterating over jsonData, you can declare a callback in an event listener.
Because you're using template literals, I'm keeping it concise and passing the row index. You can also pass the data itself by adding an event listener in JS, to do that you'll need to access the element.
function logRowData(index) {
console.log(jsonData[index])
}
let jsonData = [
{orderid: 0, customerid:14, customer: 'abc'},
{orderid: 1, customerid:25, customer: 'xyz'}
]
printData(jsonData)
function printData(jsonData) {
let myTable = document.getElementById("jsonTable")
for(let i=0; i < jsonData.length; i++) {
let row = `<tr>
<td onclick={logRowData(${i})}>${jsonData[i].orderid}</td>
<td>${jsonData[i].customerid}</td>
<td>${jsonData[i].customer}</td></tr>`
jsonTable.innerHTML += row
}
}
<div class="datatable">
<div class="datatablecontent">
<table class="jsontable">
<tr id="jsontr">
<th>Order ID</th>
<th>Customer ID</th>
<th>Customer</th>
<tbody id="jsonTable">
</tbody>
</tr>
</table>
</div>
</div>
I am trying to achieve the row group,
I found this js http://cdn.rawgit.com/ashl1/datatables-rowsgroup/v1.0.0/dataTables.rowsGroup.js plugin to achieve like below,
But when I am using this plugin, number of entries is showing wrong.
Here is my sample code
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>First Group</th>
<th>Second Group</th>
<th>Third</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JS Code:
var data = [{"first":"subgroup1","second":"group1","third":"third data"},
{"first":"subgroup1","second":"group1","third":"third data"},
{"first":"subgroup2","second":"group2",
"third":"lorem ipsum data"},
{"first":"subgroup2","second":"group2",
"third":"lorem ipsum data"},
]
$('#example').DataTable({
columns:[
{
name:"first",
data:"first"
},
{
name:"second",
data:"second"
},
{
name:"thirddata",
data:"third"
},
],
data:data,
rowsGroup: [
'first:name',
'thirddata:name'
]
});
Updated in JS Fiddle : https://jsfiddle.net/r2f87hg6/2/
Please suggest with this datatable to display number of entries by grouped.
Thanks
Need to display a text area for displaying the details, once the details button is clicked.
It gives an output similar to this table structure
<table>
<th>ID</th>
<th>Title</th>
<tr *ngFor = "let row of indexes">
<td *ngFor = "let id of row>{{id}}</td>
<td><button (click)="showDetails()">DETAILS</td>
</tr>
</table>
<tr *ngIf="isClicked"><td>{{id.details}}</td></tr> ---> This needs to be displayed very next to the row where the button is clicked.
In angular 1.x we can achieve this using ng-repeat-start/ng-repeat-end. In angular 2 I have an clue of including </template ngFor let-row [ngForOf]="indexes">But not sure where to include this. Please suggest.
If i understand your problem correctly, you want to insert two table-rows for each of your indexes.
So if you have something like this in your component class:
rows: any[] = [
{ detailsVisible: false },
{ detailsVisible: false },
{ detailsVisible: false },
{ detailsVisible: false },
{ detailsVisible: false }
];
toggleDetails(row: any) {
row.detailsVisible = !row.detailsVisible;
}
You can do it by using ng-container:
<table>
<ng-container *ngFor="let row of rows">
<tr>
<td (click)="toggleDetails(row)">show details</td>
</tr>
<tr *ngIf="row.detailsVisible">
<td>only visible after click on details cell</td>
</tr>
</ng-container>
</table>
Hope this helps.
I'm using DataTables: https://www.datatables.net/
Heres my HTML:
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover center" id="dataTables-example">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>title 1</td>
<td><span class="on"></span></td>
</tr>
<tr>
<td>2</td>
<td>title 2</td>
<td><span class="off"></span></td>
</tr>
<tr>
<td>3</td>
<td>title 3</td>
<td><span class="on"></span></td>
</tr>
</tbody>
I want to sort that table with last column but there's no value to sort... just class "on" and "off". Is there any atrribute that I can add to link tag like rel or something to put there 0/1 values? Or should I do that with JavaScript?
Here's JS code:
$('#dataTables-example').DataTable({
responsive: true,
"order": []
});
Take a look at dataTables columns / columnDefs render() function. You can return various content or values depending on the purpose : filter, display, type or sort. If you want to sort the column by 0 / 1 based on the <span> has the classes .on or .off, you can do this :
var table = $('#dataTables-example').DataTable({
columnDefs : [
{
targets: [2],
render: function ( data, type, full, meta ) {
if (type == 'sort') {
return $(data).find('span').hasClass('on') ? 1 : 0;
} else {
return data;
}
}
}
]
});
demo -> http://jsfiddle.net/9zvyhgb5/
I want to take this json place it into a HTML table.
"columns" : [
{
"id" : 0,
"column_name" : "Column 1",
"cards" : [
{
"id" : 0,
"task" : "Task 1"
},
{
"id" : 1,
"task" : "Task 2"
}
]
},
{
"id" : 1,
"column_name" : "Column 2",
"cards" : [
{
"id" : 0,
"task" : "Task 3"
}
]
}]
I have done quite a bit of searching on SO and cannot find why it is not doing what I expect.
https://jsfiddle.net/6nh100ca/9/
This is what I am expecting.
**Column 1 | Column 2**
Task 1 | Task 3
Task 2 |
https://stackoverflow.com/a/20063394/3279550
http://www.bennadel.com/blog/2456-grouping-nested-ngrepeat-lists-in-angularjs.htm
https://stackoverflow.com/a/26607425/3279550
This is what I have
<table >
<thead >
<tr>
<th ng-repeat="column in entity.columns">{{column.column_name}}</th>
</tr>
</thead>
<tbody ng-repeat="column in entity.columns" >
<tr ng-repeat="card in column.cards">
<td >{{card.task}}</td>
</tr>
</tbody>
</table>
If you want to stick with creating your own <table> manually, you need to pre-process your data object in order to fit the row logic. Try something like this fiddle:
Add this in your controller:
$scope.rowColumns = [];
$scope.columns.forEach(function(column, columnIndex){
column.cards.forEach(function (card, rowIndex){
if (!$scope.rowColumns[rowIndex])
$scope.rowColumns[rowIndex] = [];
$scope.rowColumns[rowIndex][columnIndex] = card;
});
});
console.log($scope.rowColumns);
Then add this in your html:
<tr ng-repeat="row in rowColumns">
<td ng-repeat="cell in row">
{{cell.task}}
</td>
</tr>
column.columnName should be column.column_name as per your example data, there after you could have two ng-repeat over a data where you will be actually have 1st ng-repeat over tbody & then the another will appear on tr. I'd prefer this approach when I have small data set. For larger data set the answer given by #Tiago is fine.
<table >
<thead >
<tr>
<th ng-repeat="column in entity.columns">{{column.columnName}}</th>
</tr>
</thead>
<tbody ng-repeat="column in entity.columns" >
<tr ng-repeat="card in column.cards">
<td >{{card.task}}</td>
</tr>
</tbody>
</table>