ag-grid avec la réaction ne fonctionne pas

Question

J'ai un problème pour obtenir ag-Grid de travailler avec mon application de réaction. Quoi que j'essaie, je ne reçois que du texte, je ne vois pas la grille. Je ne sais pas ce qui me manque. Voici mon code:

/* 
* ---------------------------- 
* index.js 
* ---------------------------- 
*/ 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 
import { BrowserRouter } from 'react-router-dom' 

ReactDOM.render(
    <BrowserRouter> 
     <App /> 
    </BrowserRouter> 
    , document.getElementById('root')); 
registerServiceWorker(); 

/* 
* ---------------------------- 
* App.js 
* ---------------------------- 
*/ 

import React, { Component } from 'react'; 
import Header from './Header'; 
import Main from './Main'; 
import './Styles/App.css'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <Header /> 
     <Main /> 
     </div> 
    ); 
    } 
} 

export default App; 

/* 
* ---------------------------- 
* Header.js 
* ---------------------------- 
*/ 

import React, { Component } from 'react'; 
import { Link } from 'react-router-dom' 
import './Styles/Header.css'; 

class Header extends Component { 
    render() { 
    return (
     <div className="App-header"> 
      <h2>MY APPLICATION</h2> 
      <Link to='/'>Home</Link> 
      <Link to='/cities'>Cities</Link> 
      <Link to='/countries'>Countries</Link> 
     </div> 
    ); 
    } 
} 

export default Header; 

/* 
* ---------------------------- 
* Main.js 
* ---------------------------- 
*/ 

import React, { Component } from 'react'; 
import { Switch, Route } from 'react-router-dom'; 
import Home from './Pages/Home'; 
import Stations from './Pages/Cities'; 
import Countries from './Pages/Countries'; 

class Main extends Component { 
    render() { 
    return (
     <div className="App-main"> 
      <Switch> 
      <Route exact path='/' component={Home}/> 
      <Route path='/cities' component={Cities}/> 
      <Route path='/countries' component={Countries}/> 
      </Switch> 
     </div> 
    ); 
    } 
} 

export default Main; 

/* 
* ---------------------------- 
* Countries.js 
* ---------------------------- 
*/ 

import React, { Component } from 'react'; 
import { AgGridReact } from 'ag-grid-react'; 

class Countries extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     columnDefs: this.createColumnDefs(), 
     rowData: this.createRowData() 
    }; 
    } 

    createColumnDefs() { 
    return [ 
     {headerName: "#", width: "30px", checkboxSelection: true, suppressSorting: true, suppressMenu: true, pinned: true }, 
     {headerName: "Name", field: "name"}, 
     {headerName: "Abbreviation", field: "abbr"}, 
     {headerName: "id", field: "id"} 
    ]; 
    } 

    createRowData() { 
    return [ 
     {name: "Sweden", id: 1, abbr: "SE"}, 
     {make: "Denmark", id: 2, abbr: "DK"}, 
     {make: "Norway", id: 3, abbr: "NO"} 
    ]; 
    } 

    render() { 
    let containerStyle = { 
     height: '800px', 
     width: '500px', 
     margin: 'auto' 
    }; 

    //console.log(this.state.columnDefs); 

    return (
     <div> 
     <div style={containerStyle} className="ag-fresh"> 
      <AgGridReact 
      // properties 
      columnDefs={this.state.columnDefs} 
      rowData={this.state.rowData} 
      groupHeaders="false" 
      rowSelection="multiple" 
      enableColResize="true" 
      enableSorting="true" 
      enableFilter="true" 
      rowHeight="22" 
      debug="true" 
      /> 
     </div> 
     </div> 
    ) 
    } 
}; 

export default Countries; 

je ne comprend pas certains fichiers CSS et Home.js et Cities.js car ils ne rendent le moment. Ceci est le résultat que je reçois:

Comme vous pouvez le voir, je ne vois pas la grille, juste un texte étrange. J'ai parcouru pendant longtemps en regardant la page d'accueil d'ag-grid et en essayant leur exemple de code, mais je reçois tout le temps.

Des idées?

Answer 1

Cette ligne est votre problème:

{headerName: "#", width: "30px", checkboxSelection: true, suppressSorting: true, suppressMenu: true, pinned: true }, 

Modifier à ceci:

{headerName: "#", width: 30, checkboxSelection: true, suppressSorting: true, suppressMenu: true, pinned: true }, 

Je l'ai trouvé dans les erreurs dans la console, même si elle est juste un avertissement, il salit encore en place la grille à être impossible