Develop Reference

Table with horizontal and vertical scroll with fixed header

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>

Collapse HTML table rows by default

I'm using slight modification from this answer to make header rows collapsible in an HTML table.
I want to modify the JS snippet so that rows are collapsed rather than expanded by default (on page load/document ready). How can I do this?
Basically what I'm trying to achieve is for:
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){
to be run once at page load/refresh, in addition to when header rows are clicked and toggled.
I know that I'll need to change the two tags two <span>+</span> in HTML, but am stuck on how to trigger this behavior on page load.
Javascript:
$(document).ready(function(){
$('tr.header').click(function(){
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){
});
});
});
HTML:
<table border="0">
<tr class="header">
<th colspan="2">Header <span>-</span></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<th colspan="2">Header <span>-</span></th>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
CSS:
table, tr, td, th
{
border: 1px solid black;
border-collapse:collapse;
}
tr.header
{
cursor:pointer;
}
JSFiddle: https://jsfiddle.net/mkb39x0u/

Seems like you'd just do this in document.ready:
$('tr:not(.header)').hide();
Demo
Also, I'd probably toggle visibility of your plus and minus characters with a class on the row and CSS rather than cluttering up your script with that.

I just update your code with few JS changes, I hope it'll help you out. Thanks
Add below JS code before your click method
$('tr.header').nextUntil('tr.header').slideToggle(100);
$(document).ready(function(){
$('tr.header').nextUntil('tr.header').slideToggle(100);
$('tr.header').click(function(){
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){
});
});
});
table, tr, td, th {
border: 1px solid black;
border-collapse:collapse;
}
tr.header {
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr class="header">
<th colspan="2">Header <span>-</span></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<th colspan="2">Header <span>-</span></th>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
Another way you can achieve this functionality by using CSS
$(document).ready(function(){
$('tr.header').click(function(){
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){
});
});
});
table {
border-collapse: collapse;
}
tr {
border: 1px solid #000;
display: none;
}
td + td {
border-left: 1px solid #000;
}
tr + tr {
border-top: 0;
}
tr.header {
cursor: pointer;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr class="header">
<th colspan="2">Header <span>-</span></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<th colspan="2">Header <span>-</span></th>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>

How To Slide Up others When another is SlideDown

I have a table with number of rows that some of rows are hidden and only visible when "show" button clicked. My question is how can slide up other Rows when a row is slide down?
Here is my snippet :-
$(function() {
$(".show").on("click", function(e) {
e.preventDefault();
$(this).closest("tr").next().find(".content").slideToggle();
});
});
.subRow {
padding:0;
background-color: #CFCFCF;
}
.content {
background-color: #CFCFCF;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:50%" border="1">
<caption>Test Table</caption>
<thead>
<tr align="center" class="parentRow">
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr class="parentRow">
<td>SHOW
</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
</tr>
<tr class="subRow">
<td colspan="5">
<div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
</td>
</tr>
<tr class="parentRow">
<td>SHOW
</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
</tr>
<tr class="subRow">
<td colspan="5">
<div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
</td>
</tr>
</tbody>
</table>
Thanks

Capture your selected content in a variable, call slideToggle() on it, and then call slideUp() on every other .content element.
For more information, you can take a look at the jQuery docs category for sliding.
$(function() {
$(".show").on("click", function(e) {
e.preventDefault();
var selected = $(this).closest("tr").next().find(".content")
selected.slideToggle();
$('.content').not(selected).slideUp()
});
});
.subRow {
padding:0;
background-color: #CFCFCF;
}
.content {
background-color: #CFCFCF;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:50%" border="1">
<caption>Test Table</caption>
<thead>
<tr align="center" class="parentRow">
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr class="parentRow">
<td>SHOW
</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
</tr>
<tr class="subRow">
<td colspan="5">
<div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
</td>
</tr>
<tr class="parentRow">
<td>SHOW
</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
</tr>
<tr class="subRow">
<td colspan="5">
<div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
</td>
</tr>
</tbody>
</table>

You need to get all $(".content") element then exclude the current content element using .not(), to use slideUp() on them.
$(".show").on("click", function(e) {
e.preventDefault();
//Get the content element
var content = $(this).closest("tr").next().find(".content");
//slide up others
$(".content").not(content).slideUp();
//toggle current
content.slideToggle();
});
$(function() {
$(".show").on("click", function(e) {
e.preventDefault();
var content = $(this).closest("tr").next().find(".content");
$(".content").not(content).slideUp();
content.slideToggle();
});
});
.subRow {
padding:0;
background-color: #CFCFCF;
}
.content {
background-color: #CFCFCF;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:50%" border="1">
<caption>Test Table</caption>
<thead>
<tr align="center" class="parentRow">
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr class="parentRow">
<td>SHOW
</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
</tr>
<tr class="subRow">
<td colspan="5">
<div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
</td>
</tr>
<tr class="parentRow">
<td>SHOW
</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
</tr>
<tr class="subRow">
<td colspan="5">
<div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
</td>
</tr>
</tbody>
</table>

Delete column contents in html table with loop

I have an html table with rows filled from loop and I want to delete the last two columns from all those rows inside click event on print button :
JS :
$("#print").on('click', function(){
//I want to remove columns HERE
})
How can I do this?

I'm not sure if that what you really looking for (delete columns or columns content) but you can try the followings suggestions.
Delete the last two columnns :
You can just call the following code that remove last child several times as much as the number of columns you want to remove :
$("table").find("th:last-child, td:last-child").remove();
$("#print").on('click', function(){
var remove_cols_number =2;
for(var i=0;i<remove_cols_number;i++){
$("table").find("th:last-child, td:last-child").remove();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" border='1'>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Bill</td>
<td>2</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>Gates</td>
<td>1</td>
</tr>
</table>
<br>
<button id='print' type="button">Print</button>
Delete the last two columns content :
You can get the columns length and remove one since the eq() use a zero based index, then use empty() to remove content of last one and the column before it last one -1 :
var columns_length = $("table th").length-1;
$("table tr").find("td:eq("+columns_length+"), td:eq("+(columns_length-1)+")").empty();
$("#print").on('click', function(){
var columns_length = $("table th").length-1;
$("table tr").find("td:eq("+columns_length+"), td:eq("+(columns_length-1)+")").empty();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" border='1'>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Bill</td>
<td>2</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>Gates</td>
<td>1</td>
</tr>
</table>
<br>
<button id='print' type="button">Print</button>

Moving (highlighting) the last row in an HTML table using jQuery

I need your help.
How can the existing jQuery code below be modified such that, at the click of a button, I would be able to move to the last row in the html table and select (highlight) it? My way of thought was that it would be possible to get the row count, then using the row count, move the selection to the last row. I guess I was wrong because its not working :(
Im jQuery friendly please.
Here is the markup:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
.highlight {
background-color: rgb(255,0,0);
}
</style>
<script type="text/javascript">
window.onload = function() {
var rowCount = $('#data >tbody >tr').length;
var $tbody = $("#data tbody").on('click', 'tr', function() {
highlight($(this));
});
$('#goto_prev').click(function() {
var $prev = $tbody.find('.highlight').prev();
highlight($prev);
});
$('#goto_next').click(function() {
var $next = $tbody.find('.highlight').next();
highlight($next);
});
$('#goto_last').click(function() {
highlight(rowCount);
});
function highlight($row) {
if ($row.length) {
$tbody.children().removeClass("highlight");
$row.addClass('highlight');
$("#rownum").val($row[0].rowIndex);
}
}
}
</script>
</head>
<body>
<table id="data" border="1" cellspacing="1" cellpadding="1">
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<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>
<td>data</td>
</tr>
<tr>
<td>data</td>
<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>
<td>data</td>
</tr>
<tr>
<td>data</td>
<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>
<td>data</td>
</tr>
</tbody>
</table>
Row Number:
<br>
<input type="text" id="rownum" readonly>
<input type="button" id="goto_prev" value="prev">
<input type="button" id="goto_next" value="next">
<input type="button" id="goto_last" value="last">
</body>
</html>

Your highlight function takes a Jquery object as parameter, it won't work by sending index of row. You can solve it using this:
$('#goto_last').click(function() {
highlight($("#data tr").eq(rowCount));
});