### How to configure grid with existing JS method

#### Create fields and columns
You can create fields and columns through the grid object passed as an argument in onInitialized, an event that occurs after the grid is created.

When creating fields, you need to access dataProvider, so you can access the dataProvider object using grid.getDataSource() and create fields using the setFields() method.

You can check the basic guide on how to create fields and columns [here](/tutorial/realgrid-ready-to-fetching).

```tsx
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 onInitialized = (grid: RealGrid.GridView) => {
        const fields = [
            {
                fieldName: "Name",
                dataType: RealGrid.ValueType.TEXT,
            },
            {
                fieldName: "FullName",
                dataType: RealGrid.ValueType.TEXT,
            },
            {
                fieldName: "Email",
                dataType: RealGrid.ValueType.TEXT,
            },
        ];

        const columns = [
            {
                name: "Name",
                fieldName: "Name",
            },
            {
                name: "FullName",
                fieldName: "FullName",
            },
            {
                name: "Email",
                fieldName: "Email",
            },
        ];
        grid.getDataSource().setFields(fields);
        grid.setColumns(columns);
    };

    return (
        <>
            <h2>RealGridReact Sample</h2>
            <div style={{ width: '100%', height: '550px' }}>
                <RealGridReact
                    ref={gridRef}
                    rows={data}
                    onInitialized={onInitialized}></RealGridReact>
            </div>
        </>
    );
}

export default App;
```


#### Apply grid options and events

You can apply grid options and events through RealGridReact component props, and you can apply them in the onInitialized event as well.

```tsx
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 onInitialized = (grid: RealGrid.GridView) => {
        ...생략

        // Apply grid options
         grid.displayOptions.emptyMessage = "표시할 데이타가 없습니다.";
         grid.header.height = 40;
         grid.displayOptions.rowHeight = 36;
         grid.footer.height = 40;
         grid.stateBar.width = 16;
         grid.editOptions.insertable = true;
         grid.editOptions.appendable = true;

        // Apply grid events
        grid.onCellClicked = (grid: RealGrid.GridView, clickData: RealGrid.ClickData) => {
            alert(clickData.column)
        }
    };

    return (
        <>
            <h2>RealGridReact Sample</h2>
            <div style={{ width: '100%', height: '550px' }}>
                <RealGridReact
                    ref={gridRef}
                    rows={data}
                    onInitialized={onInitialized}>
                </RealGridReact>
            </div>
        </>
    );
}

export default App;
```