CODEWITHSUNDEEP
htmlcssangulartypescriptng2-bootstrap
GroundIns
GroundIns

Reputation: 551

ng2-table how to add style to specific row

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.

Upvotes: 2

Views: 4809

Answers (2)

GroundIns
GroundIns

Reputation: 551

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');
});}

Upvotes: 1

Faouzi Oudouh
Faouzi Oudouh

Reputation: 820

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: enter image description here

Upvotes: 0

Related Questions