import React from "react";  
import ReactDOM from "react-dom";  
import "./style.css";  
​
import { CollectionView } from "@grapecity/wijmo";  
import { FlexGrid } from "@grapecity/wijmo.react.grid";  
import { FlexGridFilter } from "@grapecity/wijmo.react.grid.filter";  
import "@grapecity/wijmo.styles/wijmo.css";

body {  
 font-family: Lato, Arial, Helvetica;  
}  
.wj-flexgrid {  
 /* limit the grid's width and height */  
 max-height: 300px;  
 max-width: 32em;  
}

class App extends React.Component {  
 constructor() {  
   super();  
   this.state = {  
     data: new CollectionView([], {  
       groupDescriptions: ["make"]  
    })  
  };  
   this.filterApplied = () => {  
     let view = this.state.data;  
     this.setState({  
       data: view  
    });  
  };  
}  
​
 componentDidMount() {  
   fetch("https://api.jsonbin.io/b/5f0765bc5d4af74b01295f26").then(result => result.json()).then(data => {  
     let view = this.state.data;  
     view.sourceCollection = data;  
     this.setState({  
       data: view  
    });  
  });  
}  
​
 render() { ... }  
}

class App extends React.Component {  
 constructor() { ... }  
​
 componentDidMount() { ... }  
​
   render() {  
   return (  
     <div>  
       <h1>2019 Sedans (React)</h1>  
       <p>  
         Sort by model and price by clicking the column headers. Filter by  
         value or condition by clicking the filter icons in the column headers.  
         Collapse and expand makes to see all the models. Select one or more  
         models with the mouse or keyboard and copy your selection to the  
         clipboard.  
       </p>  
       <p>  
         Showing <b>{this.state.data.items.length}</b> models from{" "}  
         <b>{this.state.data.groups.length}</b> makes.  
       </p>  
       <FlexGrid  
         allowResizing={"None"}  
         showAlternatingRows={false}  
         isReadOnly={true}  
         selectionMode={"ListBox"}  
         headersVisibility={"Column"}  
         autoGenerateColumns={false}  
         columns={[  
          { binding: "make", header: "Make", width: "*", visible: false },  
          { binding: "model", header: "Model", width: "*" },  
          {  
             binding: "price",  
             header: "Price",  
             width: ".5*",  
             format: "c0",  
             aggregate: "Avg"  
          }  
        ]}  
         itemsSource={this.state.data}  
       >  
         <FlexGridFilter filterApplied={this.filterApplied} />  
       </FlexGrid>  
     </div>  
  );  
}  
}