React에서 Data Grid 동적생성 하는 방법이 궁금하다.

[Bok]

안녕!

나는 당신의 Syncfusion을 사용중입니다.

아주 훌륭한 솔루션입니다.

React에서 동적으로 Data Grid를 생성하고 싶습니다

간단한 예제 소스를 제공해주세요

Thanks!

[Thiyagu Subramani]

Hi Bok, 

Thanks for contacting Syncfusion forum. 

We have achieved your requirement “Dynamically create a Data Grid in React” using button click. In button click we have created our EJ2 Grid in React way using below code.  

Please refer the below code example. 

btnClick(args){ 

    var data = [{ OrderID: 1, CustomerName: 'text' }, 

    { OrderID: 2, CustomerName: 'text2' }, 

    { OrderID: 2, CustomerName: 'text3' }] 

    ReactDOM.render(<div> 

    <GridComponent dataSource={data}> 

      <ColumnsDirective> 

        <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right"/> 

        <ColumnDirective field='CustomerName' headerText='Customer ID' width='100'/> 

      </ColumnsDirective> 

    </GridComponent> 

    </div>, args.target.nextElementSibling) 

  } 

    render() { 

        return (<div className='control-pane'> 

        <div className='control-section'> 

            <ButtonComponent cssClass='e-flat e-primary' ref={(scope) => { this.btnobj = scope; }}  onClick={this.btnClick.bind(this)}>Create Grid</ButtonComponent> 

             <div id="Grid"></div> 

        </div> 

      </div>); 

    } 

For more reference please refer to the below sample. 

 

Sample link: https://stackblitz.com/edit/react-epgivz-xxpkxv?file=index.js 

 

Likewise you can render our Grid as per your needs. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S