How to highlight column in table angular 6

Question

Im trying to highlight entire column in table on hover.

Can someone help me how I can achieve this in angular2+

I need exactly like the below image

reference image

Answer 1

You can use :before and :after

td:hover::before {
    background-color: #ffa;
    content: '';
    height: 100%;
    left: -5000px;
    position: absolute;
    top: 0;
    width: 10000px;
    z-index: -2;
}


td:hover::after {
    background-color: #ffa;
    content: '';
    height: 10000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1;
}

Full working example in Fiddle: https://jsfiddle.net/0vm7pkj4/1/

Answer 2

I assume you're trying to have it so that you can click a row and have that row highlighted, similar for a column.

If so, you could try the following:

Create an array for columns that's equal in length to the number of columns, same for rows. tableRowHighlights: Array<boolean> = []; tableColumnHighlights: Array<boolean> = [];
Fill them with false values, then, when generating your table, assign each cell a css class that will highlight it based on the row or column index:
[class.colSelected]="tableColumnHighlights[4]"

Now, when tableColumnHighlights[4] is true, every cell that has 4 specified will gain the colSelected class which will have your highlight.

Then you can set, on each cell, a click listener that alternates the status:
(click)="tableColumnHighlights[4] = !tablecolumnHighlights[4]"

Do the same thing for rows. You could also put the listener only on the thead elements for columns if you wished.

Hopefully this is what you were after.

Answer 3

Try to use hover effect through your table Class, hope this would help

.MyTable td:hover {
   background-color: #ccc;
}

Answer 4

Try This Code I THink It's Useful For You.

var test = angular.module('test', []);

test.controller('testController', function($scope) {
  var testCtrl = this;
  testCtrl.data = [
    {col1: '0342', col2: '234', col3: '642356', col4: 'Black', col5: 'Item 1', col6: true},
    {col1: '0533', col2: '775', col3: '223542', col4: 'Green', col5: 'Item 2', col6: true},
    {col1: '0973', col2: '284', col3: '997546', col4: 'Purple', col5: 'Item 3', col6: false},
    {col1: '0125', col2: '997', col3: '285734', col4: 'Orange', col5: 'Item 4', col6: false},
    {col1: '0432', col2: '132', col3: '996445', col4: 'White', col5: 'Item 5', col6: true}
  ];
  
  testCtrl.structure = [
    {field: 'col1', display: 'Col 1', class: 'col1'},
    {field: 'col2', display: 'Col 2', class: 'col2'},
    {field: 'col3', display: 'Col 3', class: 'col3'},
    {field: 'col4', display: 'Col 4', class: 'col4'},
    {field: 'col5', display: 'Col 5', class: 'col5'},
    {field: 'col6', display: 'Col 6', class: 'col6'}
  ];
  
  drag = event => {
    var index = angular.element(event.target).scope().$index;
    event.dataTransfer.setData("dragIndex", index);
  };
   
  drop = event => {
    event.preventDefault();
    var dropElement = angular.element(event.target);
    var dragIndex = event.dataTransfer.getData("dragIndex"); 
    var dropIndex = dropElement.scope().$index;
    
    var column = testCtrl.structure[dragIndex];
    testCtrl.structure.splice(dragIndex, 1);
    
    var insertIndex = dragIndex > dropIndex ? dropIndex : dropIndex - 1;
    if (event.offsetX > dropElement[0].scrollWidth / 2)
      insertIndex++;
    
    testCtrl.structure.splice(insertIndex, 0, column);
    $scope.$digest();
  };
});

.container {
  text-align: center;
}

table {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(100%);
}

table, th, td {
  border: 1px solid #000;
}

th, td {
  padding: 10px;
}

td {
  text-align: left;
}

.col1,
.col2,
.col3,
.col4,
.col5,
.col6 {
  background-color: #fff;
}

.col6 {
  text-align: center;
}

.col1:hover,
.col2:hover,
.col3:hover,
.col4:hover,
.col5:hover,
.col6:hover {
  background-color: #DAA520;
}

<div class="container" ng-app="test" ng-controller="testController as testCtrl">
  <table>
    <thead>
      <tr>
        <th ng-repeat="header in testCtrl.structure" 
            class="{{header.class}}" 
            draggable="true"
            ondragover="event.preventDefault();"
            ondragstart="drag(event);"
            ondrop="drop(event);">
                {{header.display}}
        </th>      
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in testCtrl.data">
        <td ng-repeat="body in testCtrl.structure" ng-switch="body.field" class="{{body.class}}">
          <div ng-switch-when="col6">
            <i class="fa" ng-class="{'fa-file': row[body.field], 'fa-file-o': !row[body.field]}"></i>
          </div>
          <div ng-switch-default>{{row[body.field]}}</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>