#### Apply grid, provider options

The gridView option is specified in gridProps, and the provider option can be applied to dataProps as follows.
For gridView option settings, refer to [gridView options](https://docs.realgrid.com/refs/Class/GridBase#properties),
For provider option settings, refer to [provider options](https://docs.realgrid.com/refs/Class/DataProviderBase#properties).

```tsx
import {RGDataField, RGDataColumn, RealGridReact } from "realgrid-react"

const App = () => {
    const gridRef = useRef<RealGridReact>(null);
    const fields = [{name: "field1"}, {name: "field2"}];
    const columns = [
        {name: "field1", fieldName: "field1", width:200},
        {name: "field2", fieldName: "field2"}
    ];

    return (
        <div style={{width:"100%", height: "550px"}}>
            <RealGridReact 
              ref={gridRef}
              rows={[
                {field1:"col1_data",field2:"col2_data"},
                {field1:"col1_data",field2:"col2_data"}
              ]}
              gridProps={{
                edit:{commitByCell: true},
                groupPanel:{visible: true}
              }}
              dataProps={{softDeleting:true}}
            >
                { fields.map((field)=><RGDataField key={field.name} {...field}/> ) }
                { columns.map((col)=><RGDataColumn key={col.name} {...col}/>) }
            </RealGridReact>
        </div>    
    )
}

export default App
```