React CustomRenderer로 리액트컴포넌트 버튼 적용하기

//app.js
import './App.css'
import { GridView, LocalDataProvider } from 'realgrid'
import { columns, fields, rows } from './realgrid-data'
import { useEffect, useRef } from 'react'
import { createRoot } from 'react-dom/client';
import 'realgrid/dist/realgrid-style.css'
 
export const SwitchToggle = ({text, dataRow, dataField, id, onChange, disabled, value}) => {
  return (
      <>
          <label className="switch">
              <input type="checkbox" data-row={dataRow} data-field={dataField} id={id} onChange={onChange} checked={value} />
              <span className="slider round"></span>
          </label>
      </>
  )
}
 
function App() {
  const realgridElement = useRef(null);
  const gridView = useRef(null);
 
  useEffect(() => {
    const container = realgridElement.current;
    const dp = new LocalDataProvider(true);
    const gv = gridView.current = new GridView(container);
 
    gv.setDataSource(dp);
    dp.setFields(fields);
    gv.setColumns(columns);
    dp.setRows(rows);
    gv.displayOptions.rowHeight = 40;
 
    gv.registerCustomRenderer("switch", {
        initContent(dom) {
            //@ts-ignore
            this._root = createRoot(dom);
        },
        clearContent(dom) {
            //@ts-ignore
            const root = this._root;
            root.unmount();
        },
        render(grid, model, w, h, info) {
            const root = this._root;
            const id = `id_check_${model.item.dataRow}`;
            root.render(<SwitchToggle id={id} dataRow={model.index.dataRow} 
                          dataField={model.index.column.fieldName} 
                          onChange={checkOnChange} 
                          disabled={false} text={""} 
                          value={model.value}></SwitchToggle>)
        },
        canClick(event) {
            return true;
        },
        click() {
            return {};
        }
    });   
 
    const checkOnChange = (e) => {
      const target = e.target;
      const dataRow = parseInt(target.getAttribute("data-row"));
      const dataField = target.getAttribute("data-field");
      const dp = gridView.current.getDataSource();
      dp.setValue(dataRow, dataField, target.checked);
    };
 
 
    return () => {
      dp.clearRows();
      gv.destroy();
      dp.destroy();
    }
  }, [])
 
  return (
    <div className='App'>
      <h2>RealGrid2 React Sample</h2>
      <div
        style={{ height: '500px', width: '100%' }}
        ref={realgridElement}></div>
    </div>
  )
}
 
export default App

/* style */
.rg-icon-renderer > span {
  display: inline-block;
}
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
 
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
 
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
 
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
 
input:checked + .slider {
  background-color: #2196F3;
}
 
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
 
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
 
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
 
.slider.round:before {
  border-radius: 50%;
}