var fields = [
    {
        fieldName: "KorName",
        dataType: "text",
    },
    {
        fieldName: "Gender",
        dataType: "text",
    },
    {
        fieldName: "Country",
        dataType: "text",
    },
];

var columns = [
    {
        name: "KorName",
        fieldName: "KorName",
        width: "100",
        header: {
            text: "이름",
        },
    },
    {
        name: "Country",
        fieldName: "Country",
        width: "150",
        header: {
            text: "국적",
        },
        values: ["France", "Korea", "Brazil", "Germany"],
        labels: ["프랑스", "한국", "브라질", "독일"],
        lookupDisplay: true,
        editor: {
            type: "checklist",
        },
        editButtonVisibility: "always"
    },
];

const data = [
    {
        KorName: "박영호",
        Gender: "남",
        Country: "France",
    },
    {
        KorName: "조일형",
        Gender: "남",
        Country: "Korea",
    },
    {
        KorName: "김덕중",
        Gender: "여",
        Country: "Brazil",
    },
    {
        KorName: "국영석",
        Gender: "남",
        Country: "Germany",
    },
];

document.addEventListener("DOMContentLoaded", function () {
    RealGrid.setLicenseKey(
        "upVcPE+wPOmtLjqyBIh9RkM/nBOseBrflwxYpzGZyYm9cY8amGDkiMnVeQKUHJDjW2y71jtk+wteqHQ1mRMIXzEcGIrzZpzzNTakk0yR9UcKS69Wn2kI83Uszabo3mU0LUipz0P8BheMHilNXwOhKViPkoEUbYPLyVfdcZjXXt8="
    );

    const provider = new RealGrid.LocalDataProvider();
    const gridView = new RealGrid.GridView("realgridContainer");
    gridView.setDataSource(provider);

    provider.setFields(fields);
    gridView.setColumns(columns);

    provider.setRows(data);
});