import { RealGridReact, RGDataColumn } from "realgrid-react";
import * as RealGrid from "realgrid";
import { useRef } from "react";
import "realgrid/dist/realgrid-style.css";
import data from "./realgrid-data.ts";
import "./App.css";
 
function App() {
    const gridRef = useRef<RealGridReact>(null);
 
    const handleClick = (grid: RealGrid.GridView, clickData: RealGrid.ClickData): void => {
        if(clickData.cellType === 'data'){
            console.log(`value: ${grid.getValue(clickData.itemIndex, clickData.fieldName)}`)
        }
    }
    return (
        <>
            <h2>RealGridReact Sample</h2>
            <div style={{ width: '100%', height: '550px' }}>
                <RealGridReact
                    ref={gridRef}
                    rows={data}                 
                    autoGenerateField={true}
                    onCellClicked={handleClick}  
                    >
                    <RGDataColumn fieldName="Name"></RGDataColumn>
                    <RGDataColumn fieldName="FullName"></RGDataColumn>
                    <RGDataColumn fieldName="Email"></RGDataColumn>
                    <RGDataColumn fieldName="Company"></RGDataColumn>
                    <RGDataColumn
                        field={{
                            fieldName: "Age",
                            dataType: RealGrid.ValueType.NUMBER,
                        }}></RGDataColumn>
                </RealGridReact>
            </div>
        </>
    );
}
 
export default App;