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>  
  );  
}  
}