title: bootstrap table: I'm unable to achieve give background to first of the rows with same priority?
body: <p>I have a bootstrap table. Which looks like <a href="https://i.stack.imgur.com/l6KyC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l6KyC.png" alt="enter image description here"></a></p>
  
  <p>as you can see i have one red background high priority. I want the first medium to be yellow and first low to be some other color. 
  I'm trying to do this with data-cell-style. Is there other better ways which I can do here?</p>
  
  <p>What I've tried so far.</p>
  
  <pre><code>var i = 0;
    function colorPriority(value, row, index){
      var classes = ['danger', 'warning', 'secondary'];
      if(value == "high"){  
        if(i == 0){
          i++;  
          return {
            classes: classes[0]
          }
        }    
      }
      if(value == "medium"){ 
      i--; 
        if(i == 0){
          i++;
          return {
            classes: classes[1]
          }
        }    
      }
  
    }
  </code></pre>