JSFiddle - React, Tailwind, and code Playground

HTML

<!-- ibsheet css -->
<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/css/default/main.css"/>
<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/css/compatible/light/main.css"/>

<!--  ibsheet 필수 js -->
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibleaders.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibsheet.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/locale/ko.js"></script>

<!--  ibsheet 선택/추가 js -->
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-common.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-dialog.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-excel.js"></script>

<div style='height:calc(100% - 108px)'
>
<div id='sheetDiv' style='width:100%;height:100%'></div>
</div>

JavaScript

var ib = ib || {};
ib = {
  //시트 초기화 구문
  'init': {
    "Def": {
      "Col": {
        "Spanned": 1
      },
      "Row": {
        "Spanned": 1
      }
    },
    //공통기능 설정 부분
    "Cfg": {
      "SearchMode": 0,
      "Export": {
        "Url": "https://api.ibleaders.com/ibsheet/v8/"
      }

    },
    //틀고정 좌측 컬럼 설정
    "LeftCols": [{
      Header: "NO",
      Type: "Int",
      Name: "SEQ"
    }],
    //중앙(메인) 컬럼 설정
    "Cols": [
      {
        Header: "html 태그로 설정", //Enum에 html태그 넣어서 설정
        Type: "Enum",
        Name: "sEnum",
        Width: 120,
        Enum: "|<image src='https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/ca.jpg'></image><b style='color: red'>red</b>|<image src='https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/am.jpg'></image><b style='color: yellow'>yellow</b>|<image src='https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/ko.jpg'></image><b style='color: blue'>blue</b>|<image src='https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/imgs/ch.jpg'></image><b style='color: green'>green</b>",
        EnumKeys: "|A0|B0|C0|D0"
      },
      
      {
        Header: "펼쳤을때만 아이콘 설정", //onShowEnumMenu 이벤트로 설정
        Type: "Enum",
        Name: "sEnum2", 
        Width: 150,
        Enum: "|red|yellow|blue|green", 
        EnumKeys: "|A0|B0|C0|D0"
      },

    ]
  },
  //시트 이벤트
  'event': {
   	onRenderFirstFinish: function(evtParam) {
    	evtParam.sheet.loadSearchData(loadData);
    },
    onShowEnumMenu(paramObject) {
       let col = paramObject.col;
        if(col === 'sEnum2') { // 드롭다운 내부에 아이콘 설정
          let texts = document.querySelectorAll('.IBEnumMenuItemText');                            
          let menu = {
            Items: [
             	{Name: "red", Value: "A0", LeftHtml: "<div style='width: 18px; height: 12px; background-color: red; border: 1px solid black; display: inline-block; vertical-align: middle; margin-right:...