CODEWITHSUNDEEP
javascriptcssreactjsag-gridag-grid-react
Rishabh Arora
Rishabh Arora

Reputation: 11

How to provide background color to x% width of Ag Grid Cell?

I want to apply background color to Ag Grid Cell based upon dynamic width. Column is basically showing progress of task e.g 1/20(5% green) , 2/4(50% green) so i need to show background color like progress bar.

Upvotes: 1

Views: 1300

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81390

You can easily do that using by using rgba() function to set the background-color. Here is my implementation

function ProgressCellRenderer(props) {
  const progress = props.data.completedTasks / props.data.totalTasks;
  return (
    <div>
      <div
        style={{
          position: "absolute",
          width: progress * 100 + "%",
          height: "100%",
          backgroundColor: `rgba(130,210,73,${progress})`
        }}
      />
      <div style={{ position: "absolute" }}>{(progress * 100).toFixed(2)}%</div>
    </div>
  );
}

Usage

<AgGridReact
  columnDefs={[
  {
    headerName: "Completed Tasks",
    field: "completedTasks",
  },
  {
    headerName: "Total Tasks",
    field: "totalTasks",
  },
  {
    headerName: "Progress",
    cellRenderer: "ProgressCellRenderer"
  },
  ,...]}
  frameworkComponents={{
    ProgressCellRenderer
  }}
/>

Live Demo

Edit cold-voice-lnyge

Upvotes: 2

huan feng
huan feng

Reputation: 8623

You can also use cellRender to return the element:

cellRenderer: params => return 
    `<div class="flex progress-bar__container" ng-if="isProgress()">
        <div class="flex--1" ng-class="{'progress-bar': ii <= getStage() }" ngFor="ii in [0, 1, 2, 3, 4, 5]"></div>
    </div>`

Above code is sudo code of Angular, you can change it to react.

Upvotes: 0

Related Questions