Add to ag-grid react using text box

Viewed 12

I have a text box on the page, the user would enter text into the text box and click a button. I want the text to be added to ag-grid as a new row. Below is the code I have, I don't understand how it should be added to state sellerIds

class testPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            sellerIds: []
        }

    }

    addSellerGridIdInput(e) {
        e.preventDefault();
        const rowData = [
            {
                sellerId: '54545454545'
            }
        ]
        this.setState({sellerIds: [...this.state.sellerIds, rowData]})
        console.log(this.state.sellerIds);
    }

    onGridReady(params) {
        this.gridApi = params.api;
        this.gridColumnApi = params.columnApi;
    }


    render() {

        const columnDefs = [
            {
                header: 'Seller ID',
                field: 'sellerId',
            }
        ];

        return (
            <div className="container-fluid cf">
                <div className="card">
                    <div className="card-header">
                        SRP Import
                    </div>
                    <div className="card-body">

                        <div className="form-group row">
                            <div className="col-3">

                                <input name="sellerId" className="form-control" type="text" maxlength="8"
                                       id="sellerId"/>
                                <button className="btn btn-primary btn-secondary" type="submit"
                                        onClick={(e) => this.addSellerGridIdInput(e)} style={{marginTop: 5}}>Add Seller ID
                                </button>

                                <div style={{height: '250px'}} className='ag-theme-alpine'>
                                    <AgGridReact
                                        id="programexcGrid"
                                        columnDefs={columnDefs}
                                        rowData={this.state.sellerIds}
                                        onGridReady={this.onGridReady.bind(this)}
                                    />
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        );
    }
};
0 Answers
Related