I'm using a dynamic table example I found here (bootply). Its basically a table with a parent, child relationship, so you can click on a row and it will drop down another row. I added one more level to this example, so you can think of this example as a parent, child, grandchild relationship. My issue is that if you go two levels deep, and then click the parent row it only hides the child row, but not the grandchild rows. I need to fix this 'bug' somehow.. I've tried wrapping the parent row in a div and using href="#collapse1" and than putting that id on the grandchild row but that doesn't work. Any other suggestions are greatly appreciated. Here's the html..
<table class="table table-responsive table-hover">
<thead>
<tr><th>Column</th><th>Column</th><th>Column</th><th>Column</th></tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" id="row1" data-target=".row1">
<td><i class="glyphicon glyphicon-plus"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="collapse row1">
<td>- child row</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="clickable collapse row1" data-toggle="collapse" id="row3" data-target=".row3">
<td>- child row</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="collapse row3">
<td>- grandchild row</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="clickable" data-toggle="collapse" id="row2" data-target=".row2">
<td><i class="glyphicon glyphicon-plus"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="collapse row2">
<td>- child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
<tr class="collapse row2">
<td>- child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
</tbody>
</table>
Doesn't work with a fiddle.js for some reason.. but if you go to the link and copy&paste this code you can replicate the issue.
Related
So I'm trying to do a collapse info from each row of a table. The rows are generated from the Odoo framework, so, in order to associate the data-target to the corresponding ID, I iterated the table and changed the values of each.
Dispite the ids on the console and ,after inspecting the element being the same, the collapse does not work.
Can you guys help me to find the reason and a possible solution? Thanks in advance.
Javascript
var table = document.getElementById("social_programs_table");
var incr = 0;
//i = 1, because the first row should be ignored
for (var i = 1, row; row = table.rows[i]; i++) {
//iterate through rows
if (i % 2 != 0) {
incr++;
row.cells[5].firstChild.nextElementSibling.dataset.target = "target" + incr;
console.log("Row Target ID: " + row.cells[5].firstChild.nextElementSibling.dataset.target);
}
else {
row.id = "target" + incr;
console.log("Row ID: " + row.id);
}
}
Respective Table
<table class="table table-striped" id="social_programs_table">
<thead>
<tr>
<th scope="col">Nome da Entidade</th>
<th scope="col">Designação do Projeto</th>
<th scope="col">Duração (meses)</th>
<th scope="col">População-alvo</th>
<th scope="col">Fonte de Financiamento</th>
<th scope="col">Saber Mais</th>
</tr>
</thead>
<tbody>
<!-- ? Loop -->
<t t-foreach="programs" t-as="obj">
<tr>
<th scope="row"><t t-esc="obj.beneficiary_entity" /></th>
<td><t t-esc="obj.name" /></td>
<td><t t-esc="obj.duration" /></td>
<td><t t-esc="obj.target_audience" /></td>
<td><t t-esc="obj.financial_source" /></td>
<td id="collapse_td">
<button class="btn btn-primary" data-toggle="collapse" data-target="#target" id="collapse_btn">+</button>
</td>
</tr>
<tr class="collapse out" id="target">
<td>This txt should be collapsed</td>
</tr>
</t>
<!-- ? End loop -->
</tbody>
</table>
The reason it's not working could be duplicate ids.
Try using any other unique value as id, like t-att-id="obj.name" & similarly assign the data-target as t-att-data-target="obj.name" and use name only if it's unique and here's code for your reference.
HTML CODE:
<table class="table table-bordered table-sm ">
<thead class="thead-dark">
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
<td><i class="fa fa-folder"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tbody id="group-of-rows-1" class="collapse">
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 1</td>
<td>data 1</td>
<td>data 1</td>
</tr>
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 1</td>
<td>data 1</td>
<td>data 1</td>
</tr>
</tbody>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td><i class="fa fa-folder"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tbody id="group-of-rows-2" class="collapse">
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
</tbody>
</table>
There is an expandable table in HTML:
<table width="900" id="mytable">
<tr>
<th>Cost Category</th>
<th>Costs</th>
</tr>
<tr data-depth="0" class="collapse level0" bgcolor="#A2D9CE">
<td><span class="toggle collapse"></span> First row</td>
<td>500</td>
</tr>
<tr data-depth="1" class="collapse level1" bgcolor="#D5F5E3">
<td><span class="toggle"></span> Second row</td>
<td>300</td>
</tr>
<tr data-depth="2" class="collapse level2" bgcolor="#D6EAF8">
<td><span class="toggle"></span> Third row</td>
<td>250</td>
</tr>
</table>
How can I export it to CSV while keeping the structure--expandable table?
Update: the table looks like this:
To represent this table data in a CSV, you will need a "Depth" column in addition to the "Cost Category" and "Cost" columns in the CSV.
See the code below.
const csv = [];
$("#mytable").find("tr").each((index, row) => {
const category = $(row).find("th,td").eq(0).text().trim();
const cost = $(row).find("th,td").eq(1).text().trim();
const depth = $(row).data("depth") || (index === 0 ? "Depth" : 0);
csv.push([category, cost, depth].join(", "));
});
console.log(csv.join("\n"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width="900" id="mytable">
<tr>
<th>Cost Category</th>
<th>Costs</th>
</tr>
<tr data-depth="0" class="collapse level0" bgcolor="#A2D9CE">
<td><span class="toggle collapse"></span> First row</td>
<td>500</td>
</tr>
<tr data-depth="1" class="collapse level1" bgcolor="#D5F5E3">
<td><span class="toggle"></span> Second row</td>
<td>300</td>
</tr>
<tr data-depth="2" class="collapse level2" bgcolor="#D6EAF8">
<td><span class="toggle"></span> Third row</td>
<td>250</td>
</tr>
</table>
I do have a table with horizontal and vertical scroll with a fixed header with elements taking as much as space it needs. I am working with React. It would be awesome if there is a react based solution too if CSS alone cannot solve it.
Note:
I did try other solutions here but it is not what I'm looking for
It would be better if td can have min-width set on them too
The header shows menu when it is clicked for sorting and filtering
There's a simple CSS solution to fix rows(headers) and columns in a table.
th {
position: sticky:
top: 0;
}
The above snippet will fix the header to the top. Then it's just a matter of adding a simple overflow to the parent container of the table. You can find a simple example below -
.table-container {
overflow: auto;
max-height: 160px;
border: 1px solid red;
}
th {
position: sticky;
top: 0;
background: white;
}
<div class="table-container">
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
I am using bootstrap 4. In my project I need toggle responsive table inside another table. When I click to expand show inner table and again click collapse inner table like below Image.
You can use this code for toggle responsive table inside another table
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
<td><i class="fa fa-plus" aria-hidden="true"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tbody id="group-of-rows-1" class="collapse">
<tr>
<td>- child row</td>
<td>data 1</td>
<td>data 1</td>
<td>data 1</td>
</tr>
<tr>
<td>- child row</td>
<td>data 1</td>
<td>data 1</td>
<td>data 1</td>
</tr>
</tbody>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td><i class="fa fa-plus" aria-hidden="true"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tbody id="group-of-rows-2" class="collapse">
<tr>
<td>- child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
<tr>
<td>- child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
</tbody>
</table>
</body>
</html>
I need to hide unused toggle buttons with jQuery.
e.g. show toggle buttons only if after header <tr class="header"> next is data <tr class="data">
I have dynamic populated table that is as the code below:
<table>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
</table>
This will hide toggle buttons in which their parent rows with class header don't precede a row with class data:
$('.header').each(function() {
if(!$(this).next().hasClass('data')) {
$(this).find('.toggle').hide();
}
});
Fiddle