
# HTML Renderer

The HTML cell renderer can express data displayed in cells in HTML format.
You can return the data you want to display in the form of inline HTML.

`Limitation: You cannot control editing of html renderer cells when returning false in the onEditCommit event.`

### Note
* Using the HTML renderer means that the developer controls it directly without using the grid's functions. Therefore, it is not basically a technical support area.  
* However, if there is a problem with the code you wrote, you must send us the executable source code to receive `technical support`.  
* The HTML renderer was developed for view purposes and is not suitable for input purposes.  
* Since it was not developed with the idea of being able to draw the entire thing using external components, there may be problems if you draw an area larger than the row height.  

#### Example of implementing a currency column with multi-check

```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: "200",
    values: ["EUR", "USD", "HKD", "KRW"],
    labels: ["EUR", "USD", "HKD", "KRW"],
    editable: false,
    renderer: {
      type: "html",
      callback: function(grid, cell, w, h) {
        var str = "";
        var data = (cell.value && cell.value.split(",")) || [];
        var labels = cell.dataColumn.labels;
        var values = cell.dataColumn.values;
        for (var i = 0; i < labels.length; i++) {
          var checked = data.indexOf(values[i]) >= 0 ? "checked": "";
          str = str + "<input type='checkbox' value = '"+values[i]+"'" + checked  + " onclick='javascript:valuecheck("+cell.index.dataRow+", event)' >"+labels[i];
        }
        return str;
      }
    },
    header: { text: "Currency", 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: 36, emptyMessage: 'No data to display.' },
  edit: { insertable: true, appendable: true },
  footer: { height: 40 },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        dataProvider.setValue(3, "Monetary", "USD,KRW");
        dataProvider.setValue(4, "Monetary", "EUR,USD,KRW");
        dataProvider.setValue(6, "Monetary", "EUR,USD,HKD,KRW");
        grid.refresh();
      });
  }
}, { fields });

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

window.valuecheck = function(dataRow, event) {
  var target = event.target;
  var value = target.value;
  if(dataProvider.getValue(dataRow, "Monetary")){
    var dataValue = dataProvider.getValue(dataRow, "Monetary").split(",");
    var idx = dataValue.indexOf(value);
    if (target.checked) {
      if (idx < 0) {
        dataValue.push(value);
      }
    } else {
      if (idx >= 0)
        dataValue.splice(idx, 1);
    }
    dataProvider.setValue(dataRow, "Monetary", dataValue.join(","));
  } else {
    dataProvider.setValue(dataRow, "Monetary", value);
  }
};
```

```js
//Column settings
var columns = [
... skip ...
   {
     name: "Monetary",
     fieldName: "Monetary",
     width: "200",
     values: ["EUR", "USD", "HKD", "KRW"],
     labels: ["EUR", "USD", "HKD", "KRW"],
     renderer:{
       type:"html",
       callback: function(grid, cell, w, h) {
             var str = "";
             var data = (cell.value && cell.value.split(",")) || [];
             var labels = cell.dataColumn.labels;
             var values = cell.dataColumn.values;
             for (var i = 0; i < labels.length; i++) {
                 var checked = data.indexOf(values[i]) >= 0 ? "checked": "";
                 str = str + "<input type='checkbox' value = '"+values[i]+"'" + checked + " onclick='javascript:valuecheck("+cell.index.dataRow+", event)' >" +labels[i];
             }

           return str;
           }
       }
   },
... skip ...
];

gridView.setColumns(columns);

//Check event settings
function valuecheck(dataRow, event) {
   var target = event.target;
   var value = target.value;
     if(dataProvider.getValue(dataRow, "Monetary")){
       var dataValue = dataProvider.getValue(dataRow, "Monetary").split(",");

       var idx = dataValue.indexOf(value);
       if (target.checked) {
           if (idx < 0) {
               dataValue.push(value);
           }
       } else {
           if (idx >= 0)
           dataValue.splice(idx, 1);
       }

       dataProvider.setValue(dataRow, "Monetary", dataValue.join(","));
     }else{
       dataProvider.setValue(dataRow, "Monetary", value);
     }
};
```


#### Example of implementing a currency column using inline HTML

```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: "200",
    editable: false,
    renderer: {
      type: "html",
      callback: function(grid, cell, w, h) {
        var str = 'Currency type is <span style="color:royalblue" >' + cell.value + '</span>.';
        return str;
      }
    },
    header: { text: "Currency", styleName: "orange-column" },
    styleName: "left-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: 36, emptyMessage: 'No data to display.' },
  edit: { insertable: true, appendable: true },
  footer: { height: 40 },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data200.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        dataProvider.setValue(3, "Monetary", "USD,KRW");
        dataProvider.setValue(4, "Monetary", "EUR,USD,KRW");
        dataProvider.setValue(6, "Monetary", "EUR,USD,HKD,KRW");
        grid.refresh();
      });
  }
}, { fields });

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


```js
var columns = [
... skip ...
   {
     name: "Monetary",
     fieldName: "Monetary",
     width: "200",
     editable: false,
     renderer:{
       type:"html",
       callback: function(grid, cell, w, h) {
           var str = '<p>The currency type is <span style="color:royalblue" >cell.value</span>.</p>';
           return str;
       }
     },
     header: {
       text: "Call"
     }
   },
... skip ...
];

gridView.setColumns(columns);
```

#### Data editing example using inputbox

`Restrictions: When using as an editor, the html area cannot be directly controlled by the grid, so the developer must directly handle setValue(), getValue(), etc. in the data provider.`
`When exporting to Excel, only text excluding tags can be output to Excel.`

```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",
    header: { text: "Name", styleName: "orange-column" },
    width: "200",
    editable: false,
    renderer: {
      type: "html",
      inputFocusable: true,
      callback: function(grid, cell, w, h) {
        var cellValue = cell.value;
        if(cell.value === undefined) {
          cellValue = "";
        }
        var str = "";
        str = "<input type='text' value='" + cellValue + "' onblur='valuecheck(" + cell.index.dataRow + ", event)' />";
        return str;
      }
    }
  },
  { name: "Monetary", fieldName: "Monetary", width: "200", header: { text: "Currency" }, styleName: "left-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: 36, emptyMessage: 'No data to display.' },
  edit: { insertable: true, appendable: true },
  footer: { height: 40 },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data200.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        dataProvider.setValue(3, "Monetary", "USD,KRW");
        dataProvider.setValue(4, "Monetary", "EUR,USD,KRW");
        dataProvider.setValue(6, "Monetary", "EUR,USD,HKD,KRW");
        grid.refresh();
      });
  }
}, { fields });

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

window.valuecheck = function(dataRow, event) {
  var target = event.target;
  var value = target.value;
  dataProvider.setValue(dataRow, "KorName", value);
};
```

```js
var columns = [
     {
         name: "KorName",
         fieldName: "KorName",
         header: {
             text: "Name",
             styleName: "orange-column",
         },
         width: "200",
         editable: false,
         renderer: {
             type: "html",
             inputFocusable: true,
             callback: function (grid, cell, w, h) {
                 var cellValue = cell.value;
                 if (cell.value === undefined) {
                     cellValue = "";
                 }
                 var str = "";
                 str =
                     "<input type='text' value='" +
                     cellValue +
                     "' onblur='valuecheck(" +
                     cell.index.dataRow +
                     ", event)' />";
                 return str;
             },
         },
     },
];

gridView.setColumns(columns);

function valuecheck(dataRow, event) {
     var target = event.target;
     var value = target.value;
     dataProvider.setValue(dataRow, "KorName", value);
}
```

- The focus cannot be moved using the Enter or direction keys.
- You must use the mouse by clicking on another cell directly.

#### Example of putting multiple buttons in one cell

```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",
    header: { text: "Name", styleName: "orange-column" },
    width: "200",
    editable: false,
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "200",
    renderer: {
      type: "html",
      callback: function (grid, cell, w, h) {
        var str = `<button onclick="firstBtnClicked(${cell.index.itemIndex})">Button1</button> &nbsp; <button onclick="secondBtnClicked(${cell.index.itemIndex})">Button2</button>`;
        return str;
      },
    },
    header: { text: "Button" },
  },
  { 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: 36, emptyMessage: 'No data to display.' },
  edit: { insertable: true, appendable: true },
  footer: { height: 40 },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data200.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        dataProvider.setValue(3, "Monetary", "USD,KRW");
        dataProvider.setValue(4, "Monetary", "EUR,USD,KRW");
        dataProvider.setValue(6, "Monetary", "EUR,USD,HKD,KRW");
        grid.refresh();
      });
  }
}, { fields });

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

window.firstBtnClicked = function(itemIndex) {
  alert(itemIndex + 1 + "th row Button1 was clicked!");
};

window.secondBtnClicked = function(itemIndex) {
  alert(itemIndex + 1 + "th row Button2 was clicked!");
};
```

```js

var columns = [
   ...
   {
     name: "Monetary",
     fieldName: "Monetary",
     width: "200",
     renderer: {
       type: "html",
       callback: function (grid, cell, w, h) {
         var str = `<button onclick="firstBtnClicked(${cell.index.itemIndex})">Button 1</button> <button onclick="secondBtnClicked(${cell.index.itemIndex})">Button 2</ button>`;
         return str;
       },
     },
     header: {
       text: "Button",
     },
   },
   ...
];

gridView.setColumns(columns);

function firstBtnClicked(itemIndex) {
   alert(itemIndex + 1 + "Button 1 in the first row has been clicked!");
   // If you want to retrieve row information, you can retrieve it by writing as follows.
   // alert(gridView.getValues(itemIndex))
}

function secondBtnClicked(itemIndex) {
   alert(itemIndex + 1 + "Button 2 in the first row was clicked!");
   // alert(gridView.getValues(itemIndex))
}


```

#### Example of dynamically creating a button

This is an example of creating a button when the gender is male.

```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" },
  { fieldName: "BtnField" }
];

const columns = [
  { name: "KorName", fieldName: "KorName", header: { text: "Name" }, width: "200", editable: false },
  { name: "Gender", fieldName: "Gender", width: "40", header: { text: "Gender" } },
  {
    name: "BtnField",
    fieldName: "BtnField",
    width: "200",
    editable: false,
    renderer: {
      type: "html",
      callback: function (grid, cell, w, h) {
        var gender = grid.getValue(cell.index.itemIndex, "Gender");
        var str = gender == 'M' ? `<button onclick="BtnClicked(${cell.index.itemIndex})">Male Button</button>`: ``;
        return str;
      }
    },
    header: { text: "Button", styleName: "orange-column" }
  },
  { 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: 36, emptyMessage: 'No data to display.' },
  edit: { insertable: true, appendable: true },
  footer: { height: 40 },
  stateBar: { visible: false },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data200.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        grid.getDataSource().setValue(3, "Monetary", "USD,KRW");
        grid.getDataSource().setValue(4, "Monetary", "EUR,USD,KRW");
        grid.getDataSource().setValue(6, "Monetary", "EUR,USD,HKD,KRW");
        grid.refresh();
      });
  }
}, { fields });

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

window.BtnClicked = function(itemIndex) {
  alert(itemIndex + 1 + "th row male button was clicked!");
};
```

```js

var columns = [
   ...
   {
     name: "BtnField",
     fieldName: "BtnField",
     width: "200",
     editable: false,
     renderer: {
       type: "html",
       callback: function (grid, cell, w, h) {
         var gender = grid.getValue(cell.index.itemIndex, "Gender");
         var str = gender == 'male' ? `<button onclick="BtnClicked(${cell.index.itemIndex})">Man Button</button>`: ``;

         return str;
       },
     },
     header: {
       text: "Button",
       styleName: "orange-column"
     },
   },
   ...
];

gridView.setColumns(columns);

function BtnClicked(itemIndex) {
   alert(itemIndex + 1 + "The man button in the first row has been clicked!");
   // If you want to retrieve row information, you can retrieve it by writing as follows.
   // alert(gridView.getValues(itemIndex))
}



```