React Grid - DevExtreme data server plugin

by Oli Sturm

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.1/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<script src="https://unpkg.com/@devexpress/dx-core/dist/dx-core.umd.js"></script>
<script src="https://unpkg.com/@devexpress/dx-grid-core/dist/dx-grid-core.umd.js"></script>
<script src="https://unpkg.com/@devexpress/dx-react-core/dist/dx-react-core.umd.js"></script>
<script src="https://unpkg.com/@devexpress/dx-react-grid/dist/dx-react-grid.umd.js"></script>
<script src="https://unpkg.com/@devexpress/dx-react-grid-bootstrap3/dist/dx-react-grid-bootstrap3.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.5.0/qs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js"></script>
<script src="https://unpkg.com/dx-react-devextreme-data-server/dist/dx-react-devextreme-data-server-browser.js"></script>
<div id="app"></div>

Babel + JSX

const {
  PagingState,
  SortingState,
  FilteringState,
  GroupingState
} = DevExpress.DXReactGrid;

const {
  Grid,
  Table,
  TableHeaderRow,
  TableFilterRow,
  PagingPanel,
  GroupingPanel,
  TableGroupRow,
  DragDropProvider,
  TableColumnReordering,
  Toolbar
} = DevExpress.DXReactGridBootstrap3;

const {
	DevExtremeDataServer
} = DXReactDevExtremeDataServer;

class App extends React.PureComponent {
  render() {
    const { rows, columns } = this.state;

    return (
      <Grid rows={rows} columns={columns} getRowId={this.getRowId}>
        <SortingState
          defaultSorting={[{ columnName: "name", direction: "asc" }]}
        />
        <PagingState defaultPageSize={5} />
        <FilteringState />
        <GroupingState />
        <DragDropProvider />
        
        <DevExtremeDataServer
         url="https://outlier.oliversturm.com:8081/countries" />
       
        <Table />
        <TableColumnReordering defaultOrder={["name", "areaKM2", "population"]} />
        <TableHeaderRow showSortingControls showGroupingControls />
        <TableFilterRow />
        <PagingPanel pageSizes={[0, 5, 10, 20]} />
        <TableGroupRow />
        <Toolbar />
        <GroupingPanel showSortingControls showGroupingControls />
      </Grid>
    );
  }

  getRowId(row) {
    return row._id;
  }


  constructor(props) {
    super(props);

    this.state = {
      columns: [
        { name: "name", title: "Name" },
        { name: "areaKM2", title: "Area in KM^2" },
        { name: "population", title: "Population" }
      ], 
      rows: []
    };
  }
}

ReactDOM.render(<App />, document.getElementById("app"));