
# Icon Renderer

The ICON cell renderer displays an image at the iconLocation location along with text.

## How to display the icon renderer

1. You can use callback to return the icon address and display it.
2. You can display an icon using the iconMap function. (In the icon map, only 'EUR' and 'USD' are specified, so only two images are displayed).

```js
const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    }
  },
  {
    name: "icon1",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "icon",
      iconCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'man' : 'woman';
        return "/images/common/" + sex + ".png";
      },
      iconHeight: 15,
      iconWidth: 15
    },
    header: {
      text: "Icon Callback",
      styleName: "orange-column"
    }
  },
  {
    name: "icon2",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "icon",
      iconMap: {
        "M": "/images/common/man.png",
        "F": "/images/common/woman.png"
      },
      iconHeight: 15,
      iconWidth: 10
    },
    header: {
      text: "Icon Map",
      styleName: "orange-column"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "40",
    header: {
      text: "Age"
    },
    styleName: "right-column"
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    styleName: "right-column",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    styleName: "right-column",
    header: {
      text: "Product ID"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    styleName: "right-column",
    header: {
      text: "Investment Country"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "50",
    header: {
      text: "Payment Count"
    },
    styleName: "right-column"
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "50",
    header: {
      text: "Remaining Count"
    },
    styleName: "right-column"
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "50",
    header: {
      text: "Interest Rate"
    },
    styleName: "right-column"
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "70",
    header: {
      text: "Payment Amount"
    },
    styleName: "right-column"
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "120",
    header: {
      text: "Maturity Amount"
    },
    styleName: "right-column"
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    header: {
      text: "Current Balance"
    },
    styleName: "right-column"
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 50,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
var columns = [
   ... skip ...
     {
         name: "icon1",
         fieldName: "Gender",
         width: "100",
         renderer: {
             type: "icon",
             iconCallback: function (grid, cell) {
                 var sex = cell.value == 'Male' ? 'man' : 'woman';
                 return "/images/common/" + sex + ".png";
             },
             iconHeight: 15,
             iconWidth: 15
         },
         header: {
           text: "Icon Callback"
         }
     },
     {
         name: "icon2",
         fieldName: "Gender",
         width: "100",
         renderer: {
             type: "icon",
             iconMap: {
                 "M": "/images/common/man.png",
                 "Woman": "/images/common/woman.png"
             },
             iconHeight: 15,
             iconWidth: 10
         },
         header: {
           text: "Icon Map"
         }
     },
   ... skip ...
];

gridView.setColumns(columns);
```

## Specify the position of the icon

You can specify the location where the icon will be displayed by specifying iconLocation.
The iconLocation that can be specified is "left", "right", "top", "bottom", "leftedge", "rightedge", "topedge", "bottomedge", and "center".

```js
const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    }
  },
  {
    name: "icon1",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "icon",
      iconCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'man' : 'woman';
        return "/images/common/" + sex + ".png";
      },
      iconLocation: "left",
      iconHeight: 15,
      iconWidth: 10
    },
    header: {
      text: "LEFT"
    }
  },
  {
    name: "icon2",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "icon",
      iconCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'man' : 'woman';
        return "/images/common/" + sex + ".png";
      },
      iconLocation: "right",
      iconHeight: 15,
      iconWidth: 10
    },
    header: {
      text: "RIGHT"
    }
  },
  {
    name: "icon3",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "icon",
      iconCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'man' : 'woman';
        return "/images/common/" + sex + ".png";
      },
      iconLocation: "top",
      iconHeight: 15,
      iconWidth: 10
    },
    header: {
      text: "TOP"
    }
  },
  {
    name: "icon4",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "icon",
      iconCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'man' : 'woman';
        return "/images/common/" + sex + ".png";
      },
      iconLocation: "bottom",
      iconHeight: 15,
      iconWidth: 10
    },
    header: {
      text: "BOTTOM"
    }
  },
  {
    name: "icon5",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "icon",
      iconCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'man' : 'woman';
        return "/images/common/" + sex + ".png";
      },
      iconLocation: "leftEdge",
      iconHeight: 15,
      iconWidth: 10
    },
    header: {
      text: "LEFT_EDGE"
    }
  },
  {
    name: "icon6",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "icon",
      iconCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'man' : 'woman';
        return "/images/common/" + sex + ".png";
      },
      iconLocation: "rightEdge",
      iconHeight: 15,
      iconWidth: 10
    },
    header: {
      text: "RIGHT_EDGE"
    }
  },
  {
    name: "icon7",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "icon",
      iconCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'man' : 'woman';
        return "/images/common/" + sex + ".png";
      },
      iconLocation: "topEdge",
      iconHeight: 15,
      iconWidth: 10
    },
    header: {
      text: "TOP_EDGE"
    }
  },
  {
    name: "icon8",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "icon",
      iconCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'man' : 'woman';
        return "/images/common/" + sex + ".png";
      },
      iconLocation: "bottomEdge",
      iconHeight: 15,
      iconWidth: 10
    },
    header: {
      text: "BOTTOM_EDGE"
    }
  },
  {
    name: "icon9",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "icon",
      iconCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'man' : 'woman';
        return "/images/common/" + sex + ".png";
      },
      iconLocation: "center",
      iconHeight: 15,
      iconWidth: 10
    },
    header: {
      text: "CENTER"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "40",
    header: {
      text: "Age"
    },
    styleName: "right-column"
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    styleName: "right-column",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    styleName: "right-column",
    header: {
      text: "Product ID"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    styleName: "right-column",
    header: {
      text: "Investment Country"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "50",
    header: {
      text: "Payment Count"
    },
    styleName: "right-column"
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "50",
    header: {
      text: "Remaining Count"
    },
    styleName: "right-column"
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "50",
    header: {
      text: "Interest Rate"
    },
    styleName: "right-column"
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "70",
    header: {
      text: "Payment Amount"
    },
    styleName: "right-column"
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "120",
    header: {
      text: "Maturity Amount"
    },
    styleName: "right-column"
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    header: {
      text: "Current Balance"
    },
    styleName: "right-column"
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 60,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
var columns = [
   ... skip ...
   {
       name: "icon1",
       fieldName: "Gender",
       width: "100",
       renderer: {
           type: "icon",
           iconCallback: function (grid, cell) {
               var sex = cell.value == 'Male' ? 'man' : 'woman';
               return "/images/common/" + sex + ".png";
           },
           iconLocation: "left", //<----
           iconHeight: 15,
           iconWidth: 10
       },
       header: {
         text: "LEFT"
       }
   },
   ... skip ...
];

gridView.setColumns(columns);
```

## Display icons based on conditions

You can use styleCallback to display icons in cells based on conditions.
Below is an example of displaying an icon when the age is 60 years or older.

```js
const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    }
  },
  {
    name: "icon1",
    fieldName: "Gender",
    width: "100",
    styleCallback: function(grid, dataCell){
      let ret = {};
      var age = grid.getValue(dataCell.index.itemIndex, 'Age')
      if(age >= 60){
        ret.renderer ={
          type: "icon",
          iconCallback: function (grid, cell) {
              var sex = cell.value == 'M' ? 'man' : 'woman';
              return "/images/common/" + sex + ".png"
          },
          iconHeight: 15,
          iconWidth: 15
        }
      } 
      return ret;
    },
    header: {
      text: "Icon Callback",
      styleName: "orange-column"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "40",
    header: {
      text: "Age"
    },
    styleName: "right-column"
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    styleName: "right-column",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    styleName: "right-column",
    header: {
      text: "Product ID"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    styleName: "right-column",
    header: {
      text: "Investment Country"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "50",
    header: {
      text: "Payment Count"
    },
    styleName: "right-column"
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "50",
    header: {
      text: "Remaining Count"
    },
    styleName: "right-column"
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "50",
    header: {
      text: "Interest Rate"
    },
    styleName: "right-column"
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "70",
    header: {
      text: "Payment Amount"
    },
    styleName: "right-column"
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "120",
    header: {
      text: "Maturity Amount"
    },
    styleName: "right-column"
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    header: {
      text: "Current Balance"
    },
    styleName: "right-column"
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 50,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
var columns = [
   ... skip ...
   {
     name: "icon1",
     fieldName: "Gender",
     width: "100",
     styleCallback: function(grid, dataCell){
       let ret = {};
       var age = grid.getValue(dataCell.index.itemIndex, 'Age')
       if(age > 60){
         ret.renderer ={
           type: "icon",
           iconCallback: function (grid, cell) {
               var sex = cell.value == 'Male' ? 'man' : 'woman';
               return "/images/common/" + sex + ".png"
           },
           iconHeight: 15,
           iconWidth: 15
         }
       }
       return ret;
     },
     header: {
       text: "Icon Callback",
       styleName: "orange-column"
     }
   },
   ... skip ...
];

gridView.setColumns(columns);
```