Set Options - RealGrid

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 (opens in a new tab), For provider option settings, refer to provider options (opens in a new tab).

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

Fill grid data Set data type and editor