
# Shape Renderer

The Shape cell renderer displays one of several shape icons included in the grid as text.  

## How to display the shape renderer

1. It can be displayed by returning the shape name using callback.  
2. You can display icons using the shapeMap 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: "80",
    renderer: {
      type: "shape",
      shape: "star"
    },
    header: {
      text: "Shape Types",
      styleName: "orange-column"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "shape",
      shapeMap: {
        "M": "plus",
        "F": "minus"
      },
      shapeHeight: 15,
      shapeWidth: 15
    },
    header: {
      text: "Shape Map",
      styleName: "orange-column"
    }
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "70",
    renderer: {
      type: "shape",
      shapeCallback: function (grid, cell) {
        var value = cell.value;
        var retValue;

        if (value < 10) {
          retValue = 'downarrow';
        } else if (value < 20) {
          retValue = 'itriangle';
        } else if (value < 30) {
          retValue = 'triangle';
        } else {
          retValue = 'uparrow';
        }

        return retValue;
      },
      shapeHeight: 15,
      shapeWidth: 15
    },
    header: {
      text: "Shape Callback",
      styleName: "orange-column"
    },
    styleName: "right-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: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    }
  },
  {
    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: "70",
    header: {
      text: "Payment 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) => {
    grid.columnByName("Gender").styleCallback = function (column, cell) {
      if (cell.value == 'M') return "rgsample-shape-blue";
    };

    grid.columnByName("Month").styleCallback = function (column, cell) {
      if (cell.value < 20) return "right-column rgsample-shape-blue";
    };

    fetch('/data/en/simple_data200.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

```js
//css settings
.rgsample-shape-blue .rg-shape-renderer-shape {
     fill: blue;
}

//Renderer settings
var columns = [
     {
       name: "KorName",
       fieldName: "KorName",
       width: "80",
       renderer: {
         type: "shape",
         shape: "star"
       },
       header: {
         text: "Types of shapes"
       }
     },
     {
       name: "Gender",
       fieldName: "Gender",
       width: "100",
       renderer: {
           type: "shape",
           shapeMap: {
               “M”: “plus”,
               “Yeo”: “minus”
           },
           shapeHeight: 15;
           shapeWidth: 15
       },
       header: {
         text: "Shape Map"
       }
     },
     {
       name: "Month",
       fieldName: "Month",
       width: "70",
       renderer: {
         type: "shape",
         shapeCallback: function (grid, cell) {
             var value = cell. value;
             var retValue;

             if (value < 10) {
               retValue = 'downarrow';
             } else if (value < 20) {
               retValue = 'itriangle';
             } else if (value < 30) {
               retValue = 'triangle';
             } else {
               retValue = 'uparrow';
             }

             return retValue;
         },
         shapeHeight: 15;
         shapeWidth: 15
       },
       header: {
         text: "Shape Callback"
       },
       styleName: "right-column"
     },
   ... skip ...
];

gridView.setColumns(columns);

//Apply dynamic style
gridView.columnByName("Gender").styleCallback = function (column, cell) {
   if (cell.value == 'M') return "rgsample-shape-blue";
};

gridView.columnByName("Month").styleCallback = function (column, cell) {
     if (cell.value < 20) return "right-column rgsample-shape-blue";
};
```

## Specify the position of the shape

You can specify where the icon will be displayed by specifying shapeLocation.  
ShapeLocations that can be specified are "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: "shape1",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "shape",
      shapeCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'plus' : 'minus';
        return sex;
      },
      shapeLocation: "left",
      shapeHeight: 15,
      shapeWidth: 15
    },
    header: {
      text: "LEFT"
    }
  },
  {
    name: "shape2",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "shape",
      shapeCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'plus' : 'minus';
        return sex;
      },
      shapeLocation: "right",
      shapeHeight: 15,
      shapeWidth: 15
    },
    header: {
      text: "RIGHT"
    }
  },
  {
    name: "shape3",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "shape",
      shapeCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'plus' : 'minus';
        return sex;
      },
      shapeLocation: "top",
      shapeHeight: 15,
      shapeWidth: 15
    },
    header: {
      text: "TOP"
    }
  },
  {
    name: "shape4",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "shape",
      shapeCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'plus' : 'minus';
        return sex;
      },
      shapeLocation: "bottom",
      shapeHeight: 15,
      shapeWidth: 15
    },
    header: {
      text: "BOTTOM"
    }
  },
  {
    name: "shape5",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "shape",
      shapeCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'plus' : 'minus';
        return sex;
      },
      shapeLocation: "leftEdge",
      shapeHeight: 15,
      shapeWidth: 15
    },
    header: {
      text: "LEFT_EDGE"
    }
  },
  {
    name: "shape6",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "shape",
      shapeCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'plus' : 'minus';
        return sex;
      },
      shapeLocation: "rightEdge",
      shapeHeight: 15,
      shapeWidth: 15
    },
    header: {
      text: "RIGHT_EDGE"
    }
  },
  {
    name: "shape7",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "shape",
      shapeCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'plus' : 'minus';
        return sex;
      },
      shapeLocation: "topEdge",
      shapeHeight: 15,
      shapeWidth: 15
    },
    header: {
      text: "TOP_EDGE"
    }
  },
  {
    name: "shape8",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "shape",
      shapeCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'plus' : 'minus';
        return sex;
      },
      shapeLocation: "bottomEdge",
      shapeHeight: 15,
      shapeWidth: 15
    },
    header: {
      text: "BOTTOM_EDGE"
    }
  },
  {
    name: "shape9",
    fieldName: "Gender",
    width: "100",
    renderer: {
      type: "shape",
      shapeCallback: function (grid, cell) {
        var sex = cell.value == 'M' ? 'plus' : 'minus';
        return sex;
      },
      shapeLocation: "center",
      shapeHeight: 15,
      shapeWidth: 15
    },
    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",
    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: "shape1",
     fieldName: "Gender",
     width: "100",
     renderer: {
         type: "shape",
         shapeCallback: function (grid, cell) {
             var sex = cell.value == 'Male' ? 'plus' : 'minus';
             return sex;
         },
         shapeLocation: "left", //<---
         shapeHeight: 15;
         shapeWidth: 15
     },
     header: {
       text: "LEFT"
     }
   },
   ... skip ...
];

gridView.setColumns(columns);
```