Hi I'm new with angular 2. I'm using ng2-table. I added to my website table like this.
I need to add a color to specific row inside the table. How is that possible ?
I tried to add it like the tutorial did with his columns but without success.
Found an answer, taken from here:
https://github.com/valor-software/ng2-table/issues/342
We can change te color of the row by adding some style to it like this:
A quick and dirty solution:
Step 1: Integrate jQuery
Step 2: Give your result table an ID like:
<ng-table id="resultDataTable" ...
Step 3: Modify your onCellClick method:
onCellClick(data: any): any {
/* get index of row */
let index = this.tableData.indexOf(data.row);
/* add an class 'active' on click */
$('#resultDataTable').on('click', 'tr', function (event: any) {
//noinspection TypeScriptUnresolvedFunction
$(this).addClass('active').siblings().removeClass('active');
});}
Check their style file provided to know what css-class Names are using and try to override them:
E.g. of classes used: table dataTable table-striped table-bordered
CSS:
table.dataTable tbody th, table.dataTable tbody td {
padding: 8px 10px;
background-color: red;
}
Reulsts:
Related
<table border-bottom = 2>
<th, td >
{
padding: 15px;
text-align: left;
}
<tr:hover {background-color:#f5f5f5;}></tr>
</table>
Writing in the above fashion throws errors. What's the syntax for Angular?
Please show an example of combining th, td kind of properties with ngClass/ngStyle or anything else that is applicable.
Using ngClass directive to set an elements classes, ngStyle directive to set an elements style.
For this nothing is required in template, you can simple have in css file of component.
tr:hover {
background-color:#f5f5f5;
}
But lets say you only wanted this to apply when your tr have a specific class which is based on a flag in your component.ts. Lets say that className was .custom. You can achieve it like :-
CSS :-
tr.custom:hover {
background-color:#f5f5f5;
}
HTML :-
<table>
<tr [ngClass]="{'custom': myValue}"></tr>
</table>
In TS :-
#Input() data: number;
public myValue = false;
ngOnInit() {
if(data>5) {
myValue = true;
} else {
myValue = false;
}
}
What the above will do, that whenever myValue flag will be true it will attach custom class to tr. and only then on hover background color will appear. So from ts you are deciding whether to show the color on hover or not.
For th, td. There is no need of ngClass for Static properties. Ng class is generally used for dynamic binding of a css class and ngStyle is used for dynamic binding of css style(inline style). But still if you want to use it.
NgStyle
TS :-
public padding= 15px;
public align: left;
HTML :-
<td [ngStyle]="{'padding': padding, 'text-align': align}"></tr>
<th [ngStyle]="{'padding': padding, 'text-align': align}"></th>
NgClass
CSS:-
th.custom, td.custom {
padding: 15px;
text-align: left;
}
HTML :-
<td [ngClass]="{'custom': true}"></tr>
<th [ngStyle]="{'custom': true}"></th>
But you will be requiring ngStyle/ngClass with each tr and th unless its inside ngFor.
I have a button that shows a table when clicked on. That's done with bootstrap vue. I made some :hover in the css that highlights it, but i want to keep it highlighted while the table is shown.
the button and table look like this:
<b-btn v-b-toggle.collapse1 class="toggle-table-btn">Cardboard size</b-btn>
<b-collapse id="collapse1" class="mt-2">
<b-table striped hover :items="(( table ))"></b-table>
</b-collapse>
and the css
.container .table-box .toggle-table-btn:hover {
background-color: rgb(63, 63, 63);
color: white;
}
You can apply a class on a html object dynamically. Then, you can create a new class that does the same that hover does, and apply this new class to your button.
You will need a support variable, to handle the table status collapsed or not, I called this support variable as highlightButton
In your css, you can "reuse" you hover class declaration for your highlight
.container .table-box .toggle-table-btn:hover, .toggle-table-btn.highlight {
background-color: rgb(63, 63, 63);
color: white;
}
When you click the button, #click changes the highlightButton's value, then your class is applied or not.
<b-btn v-b-toggle.collapse1 #click.prevent="highlightButton = !highlightButton" :class="['toggle-table-btn', highlightButton ? 'highlight' : '']">Cardboard size</b-btn>
<b-collapse id="collapse1" class="mt-2">
<b-table striped hover :items="(( table ))"></b-table>
</b-collapse>
the component data
data: function {
return {
highlightButton: false
}
}
Make use of the v-model support for the collapse component. This way you can explicitly track whether the table is currently visible or not using a data attribute (showTable in my example). You can then use showTable to add an extra class to your button dynamically. Use this class to highlight the button while the table is visible.
See this working example:
https://jsfiddle.net/ebbishop/304jws9m
I'm using
<th class="none"></th>
to hide the last column in datatable table. Datatable creates a button in the first column to show/hide this column in a child row. The colors of this button are set in responsive.bootstrap.min.css:
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before{ background-color:#5d9cec }
I added a custom class the first column as to disable the button depending on data in row:
.not-active { pointer-events: none; cursor: default; }
I set the class via C# depending on the content of certain rows.
<tr><td class='<%# DisableLink(Eval("InvoiceDate").ToString()) %>'><%# Eval("InvoiceNumber")%></td>
All this is working as expected.
What I want to do now is set the background color of the button to grey when the td's class is set to .not-active, over writing background-color.
I have tried
.not-active > table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before{ background-color:#5d9cec }
and dozen of different combinations but can't seem to get the format correctly.
Any suggestions? Thanks!
Adding FSFiddle as requested: https://jsfiddle.net/yk06fbxa/3/
The CSS rule that sets the background-color is
table.dataTable.dtr-inline.collapsed tbody td:first-child:before,
table.dataTable.dtr-inline.collapsed tbody th:first-child:before {
...
background-color: #31b131;
}
To override this when the <td> has the class not-active you can modify it like that:
table.dataTable.dtr-inline.collapsed tbody td.not-active:first-child:before,
table.dataTable.dtr-inline.collapsed tbody th.not-active:first-child:before
{
background-color:#dddddd;
}
See a demo here. I have set the td of the first row not to have the not-active class to make sure that it only works with the .not-active class.
I have HTML table with 5x5 cells. When hovering on any <td> I need to change the background of a 2x2 block of 4 cells. Here is the code to change the background in the current row.
td.1:hover, td.1:hover + td.1 {
background:#eee;
}
I don't know how to change the background in the row like this:
With CSS only, you could only affect the TD's children or next sibling. I.e., you could extend the background to the TD next to the one you hover but not on another row.
To do what you want to do, you would have to use JavaScript, as you would need to walk up and down the DOM, something CSS does not allow you to do.
To do this with jQuery, for example, try something like this:
$('td').hover(function () {
var t = $(this),
index = t.index(); // the position of the TD in the row, so you can find the one below it
t.addClass('hovered'); // apply hovered class to this TD...
t.next().addClass('hovered'); // ...and to the TD next to it...
t.closest('tr').next().find('td:eq(' + index + ')').addClass('hovered').next().addClass('hovered'); // ...and to the 2 below
}, function () {
// remove the hovered class when no longer hovering
$(this).closest('table').find('td').removeClass('hovered');
});
And in your CSS give whatever styling to the 'hovered' class you want.
DEMO 1
If, however, you want to change the background of the exact same 4 TDs every time you hover over any TD in the table, this can be done purely with CSS. Just give a class name to the 4 cells you want highlighted. Let's call this class 'block2x2' for example. Then your CSS is:
table:hover .block2x2 {
background: #eee; // whatever background style you want
}
DEMO 2
In HTML, I am adding rows dynamically in a table
I need to give different colors for alternative rows using CSS
How can I acheive this?
To achieve this effect (known as zebra striping) in all browsers using just CSS you'll need to add a class to each row (e.g. odd and even) and give them different colours.
If you want to achieve this with just CSS and are not concerned with supporting older browsers (IE6-8) you should use the CSS3 nth-child pseudo element. This can achieve the required effect without the extra class mark-up, e.g.
tr:nth-child(odd) {
background-color: #FF0;
}
tr:nth-child(even) {
background-color: #F0F;
}
However if you want full browser support and don't mind using javascript there are a number of scripts available, both jQuery plugins and plain old javascript. Maybe try this for starters?
http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy
Just create 2 css classes, and assign them to the tags alternately.
Try this using JQuery:
$('tr:even').css('background-color', 'grey');
See it in action here
What are you using to create the table, if it is rails you can use?:
= cycle('odd', 'even')
or you can do it in PHP like this:
$i = 0;
=($i++%2==1) ? 'odd' : 'even'
You can also try without CSS, its simple.
Code:
**var rowCount = document.getElementById("tableID").rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.style.backgroundColor = "yellow";
cell1.innerHTML = "hey";
var cell2 = row.insertCell(1);
cell2.style.backgroundColor = "green";
cell2.innerHTML = "hello";**
Here its creating dynamically row for the table and filling different color to coloumns.
hope this help..!!
Thanks
just create the css classes for rows(odd and even) but dont forget that the font color for text should be readeable regarding the background color
.row_odd{
background: #ffffff;
color: #000;
}
.row_even{
background: #faf8f5;
color: #000;
}
Then in the xhtml you have to set the class for each row. For example, using php while you are iterating on rows you can set the value of the variable $class.
<tr class="<?=$class?>" onmouseover="">
<td class="center col_check">...</td>
<td class="links">...</td>
<td class="center">...</td>
</tr>
In addition, you can make other css classes for each column depends of what you want!!