Question: I want to add databars behind values in the selected column in my grid like the [Data Bars Conditional Formatting](https://www.contextures.com/excel-conditional-formatting-data-bars.html) option in Excel.

This [answer](https://stackoverflow.com/questions/11159753/how-do-i-draw-excel-style-data-bars-in-a-jquery-datatable) show me the thing using jquery data table, Can anyone give me the idea for this in angular 6. 

Note: I am not using any 3rd party grid, I have created this grid from my own. 

It should look something like this.
[![enter image description here](https://i.stack.imgur.com/CmJt0.png)](https://i.stack.imgur.com/CmJt0.png)

Answer: 
Not sure in what scenario you want to add this, but have a look at this:
<https://css-tricks.com/css3-progress-bars/>

This is classic HTML and CSS "trick" to create a bar which you can define length of.

The basics of it is that you have a "wrapper" element that defines the maximum length, and a "bar" element inside that you set `width: [0-100]%` and a background color of that.

This would be an example on how to create a 50% wide blue bar.

```
.wrapper {
    width: 100%;
}

.bar {
    background: blue;
    height: 5px;
}

<div class="wrapper">
    <div class="bar" style="width: 50%"></div>
</div>

```

Use that to create an angular component that you can send you width to, something like this:

```
import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-bar',
    template: `
      <div class="wrapper">
          <div class="bar" [style.width]="width"></div>
      </div>
    `,
    styles: [`
    .wrapper {
        width: 100%;
    }
    .bar {
        background: blue;
        height: 5px;
    }
    `]
})

export class BarComponent {
    @Input() width: number;
}

```
You can use primeNg data table, and their cell formatting feature, we can format each cell based on certain condition like changing the color or painting it, this may help you.
[PrimeNg Cell Style](https://www.primefaces.org/primeng/#/table/style)