render () { return ( <div className="ag-theme-material"> <AgGridReact containerStyle={{height: '400px'}} columnDefs={this.columns} rowData={data} rowSelection="single" /> </div> ); }
function Grid({ data, onGridReady }) { return ( <AgGridReact columnDefs={columnDefs} defaultColDef={defaultColumnDefs} onGridReady={onGridReady} rowData={data} rowSelection="multiple" /> ); }
render() { const {rowData, colDefs} = this.props; return ( <AgGridReact onRowSelected={this._onRowSelected} rowData={rowData} columnDefs={colDefs} rowSelection="multiple" enableSorting="true" enableFilter="true" rowHeight="22" />); }
render() { return ( <div style={{ height: '500px', width: '600px'}} className="ag-theme-balham" > <button onClick={this.onButtonClick}> Get selected rows </button> <AgGridReact onGridReady={ params => this.gridApi = params.api } rowSelection="multiple" columnDefs={this.state.columnDefs} groupSelectsChildren={true} autoGroupColumnDef={this.state.autoGroupColumnDef} rowData={this.state.rowData}> </AgGridReact> </div> ); }
render() { return ( <div className="ag-theme-balham" style={{'height': 'calc(100vh - 150px)', width: '100%'}}> <AgGridReact defaultColDef={this.state.defaultColDef} columnDefs={this.state.columnDefs} rowData={this.state.rowData} animateRows={true} enableRangeSelection={true} style={{'height': '100%', overflow: 'hidden'}} onGridReady={this.onGridReady} > </AgGridReact> </div> ); }
render() { const columnDefs = [{ headerName: "ID", field: "id" }, { headerName: "Title", field: "title" }, { headerName: "Status", field: "completed", sortable: true }] const { tableData, isTableDataFetching, } = this.props; return ( <div className="ag-theme-balham" style={{ height: '500px', width: '610px' }} > <AgGridReact columnDefs={columnDefs} rowData={tableData}> </AgGridReact> </div> ); }
render () { return ( <div className="ag-theme-material"> <AgGridReact containerStyle={{height: '400px', width: '700px'}} columnDefs={this.columns} rowData={data} treeData={true} getDataPath={this.getDataPath} autoGroupColumnDef={this.autoGroupColumnDef} enableGroupEdit={true} /> </div> ); }
render () { return ( <div className="ag-theme-material"> <AgGridReact containerStyle={{height: '400px'}} columnDefs={this.columns} datasource={this.datasource} rowModelType="infinite" /> </div> ); }
render () { return ( <div className="ag-theme-material"> <AgGridReact containerStyle={{height: '400px'}} columnDefs={this.columns} rowData={data} /> </div> ); }
render () { return ( <div className="ag-theme-material"> <AgGridReact containerStyle={{height: '400px'}} columnDefs={this.columns} rowData={data} rowSelection="multiple" suppressRowClickSelection={true} /> </div> ); }
render () { return ( <div className="ag-theme-material"> <AgGridReact containerStyle={{height: '400px', width: '400px'}} columnDefs={this.columns} rowData={data} /> </div> ); }
render () { return ( <div className="ag-theme-material"> <AgGridReact containerStyle={{height: '400px'}} columnDefs={this.columns} rowData={data} /> </div> ); }
render () { return ( <div className="ag-theme-material"> <AgGridReact containerStyle={{height: '400px'}} columnDefs={this.columns} rowData={data} rowSelection="multiple" /> </div> ); }
render () { return ( <div className="ag-theme-material"> <AgGridReact containerStyle={{height: '400px'}} columnDefs={this.columns} rowData={data} /> </div> ); }
render () { return ( <div className="ag-theme-material"> <AgGridReact containerStyle={{height: '400px'}} columnDefs={this.columns} rowData={data} treeData={true} getDataPath={this.getDataPath} autoGroupColumnDef={this.autoGroupColumnDef} /> </div> ); }