How to adjust whole column border in react-table - javascript

I'm trying to adjust style as the screenshot below
What I expect to be:
But what I got now is:
As you can see the border bottom of last column not apply to as expect.
I already try props which react-table provided but still can't figure out how to achieve it.
Props list which apllied:
styles
getProps
getTheadGroupTrProps
getTrProps
getTbodyProps
getTdProps
All props that I applied, I used the condition to check if it the last record it will apply border-bottom style.
If anyone has any suggestion or any solutions.Help me please.
Thank you so much for your kindness.

Assuming lastRowIndex contains the index of your last row, you can define this function
const styleRow = (state, rowInfo) => {
if (!rowInfo) return
return {
style: {
borderBottom: rowInfo.index === lastRowIndex? ˋ1px solid;ˋ : ˋˋ
}
}
}
and set it as geTrProps in your react-table.

<table class="table" id="table_Container">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
#table_Container tr th:last-child{ border-right: 1px solid red; border-left:1px solid red}
#table_Container tr td:last-child{ border-right: 1px solid red; border-left:1px solid red}
#table_Container tr:last-child td:last-child{border-bottom:1px solid red}
#table_Container tr td{border-top: 2px solid #dee2e6;}

Related

Limit scope of jQuery

var tr0HTML = $('<tr id="exp_line1"></tr>').appendTo(tbody);
What could the best possible way to use .css or any other jQuery to style this element based on the condition?
All I could see is that the change has been implemented to whole page not for the particular scenario!
Update: I want to style borders to the table which has 3 different types of rows. Rows are being displayed if the data is provided.
If I have understood your question... Something as simple as this should work:
tr.type-1 td{
border: 2px solid hotpink;
}
tr.type-2 td{
border: 2px solid purple;
}
tr.type-3 td{
border: 2px solid black;
}
<table>
<tbody>
<tr class="type-1">
<td>Type 1</td>
</tr>
<tr class="type-2">
<td>Type 2</td>
</tr>
<tr class="type-3">
<td>Type 3</td>
</tr>
</tbody>
</table>
Your jQuery code would look like this: $('<tr id="exp_line1" class='type-1'></tr>').appendTo(tbody)

Javascript match/search table for results - total beginner

I am admittedly very inexperienced, but I'm trying to enhance the workflow at my company. I'm using the code from here to create internal site to search for current part numbers. My employees are searching by description, but the javascript included in the example searches by exact input instead of individual words.
For example, using the example code on the site, I would like a search for "Trading Island" to return the same result as "Island Trading". I know this is possible, but can't figure out how to make it work.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
When searching for word matches, it's best to place the search string
into an array and the cell contents to be searched into an array.
Then you can easily use the Array.prototype.every() or the Array.prototype.some() methods to see if all or some of the search words are present in the cell.
See my comments inline below for additional details.
// Get a reference to the input
var searchElement = document.getElementById("myInput");
// Hook element up to event handler:
searchElement.addEventListener("keyup", search);
// Event handler:
function search(){
// Now, break the search input into an array of words by splitting the string where
// there are spaces (regular expression used here to locate the strings).
// Also, note that strings are case-sensitive, so we are taking the input and
// forcing it to lower case and we'll match by lower case later.
var searchWords = searchElement.value.toLowerCase().split(/\s+/);
// Test to see the individual words
//console.clear();
//console.log(searchWords);
// Now you have to have some content to search against.
// So, we'll get all the cells, which will be our data source:
var theCells = document.querySelectorAll("td");
// Loop over each cell
theCells.forEach(function(cell){
// Reset any previous cell matches
cell.style.backgroundColor = "inherit";
// Get the words in the cell as an array (note: we are forcing lower
// case again here to match lower case against lower case
var cellWords = cell.textContent.toLowerCase().split(/\s+/);
// See if the cell contains all of the search words (You can substitute
// "some" for "every" to just see if the cell contains some of the search words
var result = cellWords.every(elem => searchWords.indexOf(elem) > -1);
// every and some return a boolean letting you know if your condition was met:
if(result){
console.clear();
console.log("Match found in: " + cell.textContent);
cell.style.backgroundColor = "#ff0";
}
});
}
<input type="text" id="myInput" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>

Change table row color on hover (jQuery or CSS)

My problems is that I already got some 'highlighted' (meaning that they've got their own background color to highlight them) cells in my table that won't change their background color when I use code to change color of entire row when mouse is hoovering over them.
Hoovering over a row only changes background color of cells that aren't highlighted.
How do I fix this so entire row changes background color?
I've got this HTML table:
$(window).load(function() {
$('#infotable tr').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
#infotable td {
padding:0.7em;
border:#969696 1px solid;
}
.highlight {
background:#DAFFD6;
}
.hover {
background:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
<thead>
<tr>
<th></th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody id="infotable">
<tr>
<td>Row #1</td>
<td>889 kg</td>
<td class="highlight">151 kg</td>
<td>192 kg</td>
</tr>
<tr>
<td>Row #2</td>
<td>784 kg</td>
<td>15 kg</td>
<td class="highlight">64 kg</td>
</tr>
</tbody>
</table>
You can achieve this in CSS alone. You just need to make the :hover rule more specific than the td.highlight. Try this:
#infotable tr:hover td,
#infotable tr:hover td.highlight
{
background:yellow;
}
Example fiddle
Add class hover to all td insted of tr by changing javascript only.
$('#infotable tr').hover(function()
{
$(this).find('td').addClass('hover');
}, function()
{
$(this).find('td').removeClass('hover');
});
FIDDLE
Just inherit the style from hover check this Fiddle
.hover, .hover .highlight
{
background:yellow;
}
try this in css
#infotable tr td:hover
{
background:yellow;
}

HTML Clickable Table Rows

I'm using Twitter's Bootstrap, which includes a neat hover effect for table rows, and I would like to add the clickability that users will expect when a row lights up. Is there any foolproof way to do this?
Yes I've done my research, but every solution is extremely awkward and flawed at best. Any help would be most appreciated.
The HTML
<table id="example">
<tr>
<th> </th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Edit</td>
<td>Apples</td>
<td>Blah blah blah blah</td>
<td>10.23</td>
</tr>
<tr>
<td>Edit</td>
<td>Bananas</td>
<td>Blah blah blah blah</td>
<td>11.45</td>
</tr>
<tr>
<td>Edit</td>
<td>Oranges</td>
<td>Blah blah blah blah</td>
<td>12.56</td>
</tr>
</table>
The CSS
table#example {
border-collapse: collapse;
}
#example tr {
background-color: #eee;
border-top: 1px solid #fff;
}
#example tr:hover {
background-color: #ccc;
}
#example th {
background-color: #fff;
}
#example th, #example td {
padding: 3px 5px;
}
#example td:hover {
cursor: pointer;
}
The jQuery
$(document).ready(function() {
$('#example tr').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
I got the code HERE
Although my Google-skills are pretty awesome this is something most people should find...
http://www.electrictoolbox.com/jquey-make-entire-table-row-clickable/
But, to make it a lot easier... What about simply giving the row an id and assigning a link to that id with jQuery?
<table>
<tr id='link1'>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr id='link2'>
<td>two-one</td>
<td>two-two</td>
<td>two-three</td>
<td>two-four</td>
</tr>
</table>​
​and
$("#link1").click(function(){
window.location = "http://stackoverflow.com/questions/12115550/html-clickable-table-rows";
});
$("#link2").click(function(){
window.location = "http:///stackoverflow.com";
});
also see this: http://jsfiddle.net/avrZG/
​
Without jQuery:
<table>
<tr id='link1' onclick="document.location='http://stackoverflow.com/about';">
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr id='link2' onclick="document.location='http://stackoverflow.com/help';">
<td>two-one</td>
<td>two-two</td>
<td>two-three</td>
<td>two-four</td>
</tr>
</table>
It is not very clear what you are trying to do but you probably want the following. Adding a tabindex to the tr elements will work in most browsers and make it possible to set focus on a row via mouse click or keyboard tab.
<table>
<tr id='link1' tabindex="100">
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr id='link2' tabindex="101">
<td>two-one</td>
<td>two-two</td>
<td>two-three</td>
<td>two-four</td>
</tr>
</table>

Apply CSS rule to only the first <td> in <tr>'s WITHOUT assigning a class/id?

I have already viewed this, it's not what I need here..
I need something like
table.mytable tr first-td's { border: 1px solid black; }
for
<table class="mytable">
<tr>
<td>This has the border</td>
<td>no border</td>
<td>no border</td>
</tr>
<tr>
<td>This has the border</td>
<td>no border</td>
<td>no border</td>
</tr>
<tr>
<td>This has the border</td>
<td>no border</td>
<td>no border</td>
</tr>
</table>
If this is impossible just let me know and I'll be sad.
Javascript/jQuery is acceptable if it's needed to get the job done.
table.mytable tr td:first-child { border: 1px solid black; }
https://developer.mozilla.org/en-US/docs/CSS/:first-child
Works in jQuery too ( http://api.jquery.com/first-child-selector/ ):
$('table.mytable tr td:first-child')
Yes. It´s possible:
Use in your CSS
.mytable tr td:first-child { border: 1px solid black; }​
Try Here
Not 100% cross-browser, but support is good enough. See http://caniuse.com/#search=:first-child
table.mytable tr td:first-child
You can use :first-of-type, but it's not available on older browsers: http://jsfiddle.net/R9qE3/.
You could also pick the right elements through jQuery (for cross-browser support), but you would need to update the state when you add tds or move them around.
table.mytable tr:first-child {
border: 1px solid black;
}
You could use jQuery "nth child" http://api.jquery.com/nth-child-selector/
It would be something like:
$("table.mytable tr::nth-child(1)") //do w/e you need to do here.

Categories