0

I am trying to figure out how I can highlight a column using ng-table directive for Angular. Though my understanding on this directive is that in the current setup it is not capable of achieving what I am looking to do, so I will have to modify it myself.

I'd like to know if anyone has had any success with getting table column highlighting working with angular sorting and ng-repeat, it doesn't necessarily have to be done with ng-table, but any example would be greatly appreciated.

Anks
  • 485
  • 9
  • 27
  • Checkout the second answer if all you're looking for is a hover style. http://stackoverflow.com/questions/1553571/html-hover-table-column – Christopher Marshall Jun 09 '14 at 21:06
  • 1
    If you're in an `ng-repeat` of sorts, you could use `ng-class="{ highlighted: $index == 1 }"` to add a `highlighted` class to the element. An example in CSS would be `.highlighted{background:red}`. – Morgan Delaney Jun 10 '14 at 00:00

2 Answers2

0
  1. In your table definition, add table-hover class, for example:

< table ng-table="myTable" class="table table-hover table-striped table-condensed table-bordered" >

  1. Customize color in app.css

    .table-hover > tbody > tr:hover { background-color: #dadada; }

Vladan Macanovic
  • 1
  • 3
-1

Give your table a custom class:

 <table ng-table="usersTable" class="table my-custom-table-class">
     <tr ng-repeat="user in $data">
         <td data-title="'Name'" sortable="'name'">{{user.name}}</td>
     </tr>
 </table>

Then, in the CSS add the following:

.my-custom-table-class tbody tr:hover {
  background-color: #dddddd; 
}

the #dddddd is the color of the highlight.

Danpe
  • 18,668
  • 21
  • 96
  • 131
  • 1
    I think he asked how to highlight the whole column, but not the row. It has to be a Javascript way due to the selector cannot select a column. Am I right? – Chong Tang Jul 23 '15 at 13:38