Merge pull request #12774 from grafana/12766-table-colored-cell-link

table link color fix

public/app/plugins/panel/table/renderer.ts

@@ -216,13 +216,13 @@ export class TableRenderer {
     var cellClass = '';
     var cellClass = '';
 
 
     if (this.colorState.cell) {
     if (this.colorState.cell) {
-      style = ' style="background-color:' + this.colorState.cell + ';color: white"';
+      style = ' style="background-color:' + this.colorState.cell + '"';
+      cellClasses.push('table-panel-color-cell');
       this.colorState.cell = null;
       this.colorState.cell = null;
     } else if (this.colorState.value) {
     } else if (this.colorState.value) {
       style = ' style="color:' + this.colorState.value + '"';
       style = ' style="color:' + this.colorState.value + '"';
       this.colorState.value = null;
       this.colorState.value = null;
     }
     }
-
     // because of the fixed table headers css only solution
     // because of the fixed table headers css only solution
     // there is an issue if header cell is wider the cell
     // there is an issue if header cell is wider the cell
     // this hack adds header content to cell (not visible)
     // this hack adds header content to cell (not visible)
@@ -252,8 +252,9 @@ export class TableRenderer {
       var cellTarget = column.style.linkTargetBlank ? '_blank' : '';
       var cellTarget = column.style.linkTargetBlank ? '_blank' : '';
 
 
       cellClasses.push('table-panel-cell-link');
       cellClasses.push('table-panel-cell-link');
+
       columnHtml += `
       columnHtml += `
-        <a href="${cellLink}" target="${cellTarget}" data-link-tooltip data-original-title="${cellLinkTooltip}" data-placement="right">
+        <a href="${cellLink}" target="${cellTarget}" data-link-tooltip data-original-title="${cellLinkTooltip}" data-placement="right"${style}>
           ${value}
           ${value}
         </a>
         </a>
       `;
       `;
@@ -287,6 +288,8 @@ export class TableRenderer {
     let startPos = page * pageSize;
     let startPos = page * pageSize;
     let endPos = Math.min(startPos + pageSize, this.table.rows.length);
     let endPos = Math.min(startPos + pageSize, this.table.rows.length);
     var html = '';
     var html = '';
+    let rowClasses = [];
+    let rowClass = '';
 
 
     for (var y = startPos; y < endPos; y++) {
     for (var y = startPos; y < endPos; y++) {
       let row = this.table.rows[y];
       let row = this.table.rows[y];
@@ -297,11 +300,16 @@ export class TableRenderer {
       }
       }
 
 
       if (this.colorState.row) {
       if (this.colorState.row) {
-        rowStyle = ' style="background-color:' + this.colorState.row + ';color: white"';
+        rowStyle = ' style="background-color:' + this.colorState.row + '"';
+        rowClasses.push('table-panel-color-row');
         this.colorState.row = null;
         this.colorState.row = null;
       }
       }
 
 
-      html += '<tr ' + rowStyle + '>' + cellHtml + '</tr>';
+      if (rowClasses.length) {
+        rowClass = ' class="' + rowClasses.join(' ') + '"';
+      }
+
+      html += '<tr ' + rowClass + rowStyle + '>' + cellHtml + '</tr>';
     }
     }
 
 
     return html;
     return html;

public/sass/components/_panel_table.scss

@@ -133,3 +133,17 @@
   height: 0px;
   height: 0px;
   line-height: 0px;
   line-height: 0px;
 }
 }
+
+.table-panel-color-cell {
+  color: white;
+  a {
+    color: white;
+  }
+}
+
+.table-panel-color-row {
+  color: white;
+  a {
+    color: white;
+  }
+}