셀 템플릿 (React)

import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React, { useState } from 'react';
import useEvent from 'react-use-event-hook';
import * as wjGrid from '@mescius/wijmo.react.grid';
import * as wjInput from '@mescius/wijmo.react.input';
import * as wjcCore from '@mescius/wijmo';
import * as wjcGrid from '@mescius/wijmo.grid';
import './app.css';
import { itemsSource, countries } from './data';
function App() {
    const [customTopLeft, setCustomTopLeft] = useState(true);
    const [customBottomLeft, setCustomBottomLeft] = useState(true);
    const [customRowHeader, setCustomRowHeader] = useState(true);
    const [customRowHeaderEdit, setCustomRowHeaderEdit] = useState(true);
    const [customCell, setCustomCell] = useState(true);
    const [customCellEdit, setCustomCellEdit] = useState(true);
    const [customGroupHeader, setCustomGroupHeader] = useState(true);
    const [customColumnHeader, setCustomColumnHeader] = useState(true);
    const [customGroup, setCustomGroup] = useState(true);
    const [customColumnFooter, setCustomColumnFooter] = useState(true);
    const [highlightDownloads, setHighlightDownloads] = useState(true);
    // Wijmo event handlers
    const initialized = useEvent((grid) => {
        grid.columnFooters.rows.push(new wjcGrid.GroupRow());
    });
    // The template used in more than one cell type is defined as a method.
    // The rest of the template functions are inlined in FlexGridCellTemplate
    // definitions.
    const totalTemplate = (context) => {
        return <React.Fragment>
      Sum: {wjcCore.Globalize.formatNumber(context.value, 'N0')}
    </React.Fragment>;
    };
    // Another template function.
    const rowHeaderTemplate = (context) => context.row.index + 1;
    //
    return (<div className="container-fluid">
      <p>
        Use a <b>FlexGridCellTemplate</b> component to define a cell template.
        The <b>cellType</b> property specifies the type of cell represented by
        the template, and the <b>template</b> <i>render prop</i> accepts a
        function that renders the cells content.
        The function parameter receives an object with the cell-specific data,
        including the data item (<b>item</b>), row (<b>row</b>), and column
        (<b>col</b>) that the cell represents.
      </p>
      <p>
        Note that column-specific templates should be defined as children of
        the corresponding <b>FlexGridColumn</b> component, while the others
        are defined as children of the <b>FlexGrid</b> component.
      </p>
      <wjGrid.FlexGrid itemsSource={itemsSource} allowSorting={false} autoSizeMode="Both" allowResizing="Both" deferResizing={true} initialized={initialized}>
        {
        // To conditionally disable a template, we can just assign
        // the 'template' property with a null value.
        }
        <wjGrid.FlexGridCellTemplate cellType="TopLeft" template={customTopLeft
            ? (context) => '№'
            : null}/>
        {
        // An alternative way to conditionally disable a template is
        // to exclude the FlexGridCellTemplate element from the rendering
        // element tree.
        }
        {customBottomLeft
            ? <wjGrid.FlexGridCellTemplate cellType="BottomLeft" template={(context) => <span>&#931;</span>}/>
            : null}
        {
        // The template function definition can be inlined like in the templates
        // above, or defined as a component method like shown in this template.
        }
        <wjGrid.FlexGridCellTemplate cellType="RowHeader" template={customRowHeader ? rowHeaderTemplate : null}/>
        <wjGrid.FlexGridCellTemplate cellType="RowHeaderEdit" template={customRowHeaderEdit
            ? (context) => '...'
            : null}/>

        <wjGrid.FlexGridColumn header="Country" binding="country" width="*">
          <wjGrid.FlexGridCellTemplate cellType="Cell" template={customCell
            ? (context) => {
                return <React.Fragment>
                  <img src={`resources/${context.item.country}.png`}/> {context.item.country}
                </React.Fragment>;
            }
            : null}/>
          <wjGrid.FlexGridCellTemplate cellType="CellEdit" template={customCellEdit
            ? (context) => {
                return <wjInput.ComboBox className="cell-editor" itemsSource={countries} isEditable={false} selectedValue={context.value} selectedIndexChanged={(cb) => context.value = cb.selectedValue}>
                </wjInput.ComboBox>;
            }
            : null}/>
          <wjGrid.FlexGridCellTemplate cellType="GroupHeader" template={customGroupHeader
            ? (context) => {
                return <React.Fragment>
                  <input type="checkbox" checked={context.row.isCollapsed} onChange={e => context.row.isCollapsed = e.target.checked}/>
                  {context.item.name} ({context.item.items.length} items)
                </React.Fragment>;
            }
            : null}/>
        </wjGrid.FlexGridColumn>

        <wjGrid.FlexGridColumn header="Downloads" binding="downloads" width={170} aggregate="Sum">
          <wjGrid.FlexGridCellTemplate cellType="ColumnHeader" template={customColumnHeader
            ? (context) => {
                return <React.Fragment>
                  <input type="checkbox" checked={highlightDownloads} onChange={(e) => {
                        setHighlightDownloads(e.target.checked);
                    }}/>
                  Downloads
                </React.Fragment>;
            }
            : null}/>
          <wjGrid.FlexGridCellTemplate cellType="Cell" template={customCell
            ? (context) => {
                let style = {
                    fontWeight: 700,
                    color: ''
                }, downloads = context.item.downloads;
                if (highlightDownloads) {
                    style.color = downloads > 10000 ? 'green' : 'red';
                }
                return <span style={style}>
                  {downloads}
                </span>;
            }
            : null}/>
          <wjGrid.FlexGridCellTemplate cellType="CellEdit" template={customCellEdit
            ? (context) => {
                return <wjInput.InputNumber className="cell-editor" step={1} value={context.value} valueChanged={(inpNum) => context.value = inpNum.value}>
                </wjInput.InputNumber>;
            }
            : null}/>
          {
        // The same totalTemplate render function is used in the two
        // templates below. Because of this, it's better to define it
        // as the component method, and assign the 'template' property
        // with the reference to it.
        }
          <wjGrid.FlexGridCellTemplate cellType="Group" template={customGroup ? totalTemplate : null}/>
          <wjGrid.FlexGridCellTemplate cellType="ColumnFooter" template={customColumnFooter ? totalTemplate : null}/>
        </wjGrid.FlexGridColumn>

      </wjGrid.FlexGrid>
      <div className="checkbox-list">
        <div className="checkbox-list-title">Column level templates:</div>
        <div className="checkbox-cell">
          <label className="checkbox">
            <input type="checkbox" checked={customCell} onChange={e => setCustomCell(e.target.checked)}/>
            Cell
          </label>
          <label className="checkbox">
            <input type="checkbox" checked={customCellEdit} onChange={e => setCustomCellEdit(e.target.checked)}/>
            CellEdit
          </label>
        </div>
        <div className="checkbox-cell">
          <label className="checkbox">
            <input type="checkbox" checked={customColumnHeader} onChange={e => setCustomColumnHeader(e.target.checked)}/>
            ColumnHeader
          </label>
          <label className="checkbox">
            <input type="checkbox" checked={customColumnFooter} onChange={e => setCustomColumnFooter(e.target.checked)}/>
            ColumnFooter
          </label>
        </div>
        <div className="checkbox-cell">
          <label className="checkbox">
            <input type="checkbox" checked={customGroupHeader} onChange={e => setCustomGroupHeader(e.target.checked)}/>
            GroupHeader
          </label>
          <label className="checkbox">
            <input type="checkbox" checked={customGroup} onChange={e => setCustomGroup(e.target.checked)}/>
            Group
          </label>
        </div>

        <div className="checkbox-list-title">Grid level templates:</div>
        <div className="checkbox-cell">
          <label className="checkbox">
            <input type="checkbox" checked={customTopLeft} onChange={e => setCustomTopLeft(e.target.checked)}/>
            TopLeft
          </label>
          <label className="checkbox">
            <input type="checkbox" checked={customBottomLeft} onChange={e => setCustomBottomLeft(e.target.checked)}/>
            BottomLeft
          </label>
        </div>
        <div className="checkbox-cell">
          <label className="checkbox">
            <input type="checkbox" checked={customRowHeader} onChange={e => setCustomRowHeader(e.target.checked)}/>
            RowHeader
          </label>
          <label className="checkbox">
            <input type="checkbox" checked={customRowHeaderEdit} onChange={e => setCustomRowHeaderEdit(e.target.checked)}/>
            RowHeaderEdit
          </label>
        </div>
      </div>
    </div>);
}
const container = document.getElementById('app');
if (container) {
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
}