ソートとフィルタリングをReactデータグリッドに組み合わせる

Question

フィルタリングと並べ替えについて理解してください。 あなたは次のアクションを実行した場合、私はone exampleからフィルタリングを使用してanother example

から並べ替え：

1. ソートに任意の列
2. をソート
3. は、任意の列
4. ためのフィルタを追加、削除フィルタを削除する

今すぐ任意の列をソートしようとすると、ソートが機能しません。 これはライブラリのバグですか？

const ReactDataGrid = require('react-data-grid'); 
const React = require('react'); 
const ReactDOM = require('react-dom'); 
const { Filters: { NumericFilter, AutoCompleteFilter, MultiSelectFilter, SingleSelectFilter }, 
     Data: { Selectors }} = require('react-data-grid-addons'); 

var weRows = [{"well":"1000","date":"10.02.2010","event":"Ремонт","comment":"Здесь должен быть комментарий","state":"ОСТАНОВЛЕНА"},{"well":"1000","date":"14.03.2010","event":"Очистка","comment":"","state":"В РАБОТЕ"},{"well":"1001","date":"20.04.2010","event":"Нормализация","comment":"","state":"В ОЖИДАНИИ ОСВОЕНИЯ"},{"well":"1002","date":"10.01.2011","event":"ОПЗ","comment":"Здесь должен быть комментарий","state":"В ПРОЕКТЕ"},{"well":"1003","date":"01.07.2010","event":"Перестрел","comment":"","state":"В РАБОТЕ"},{"well":"1004","date":"20.04.2010","event":"Дострел","comment":"","state":"В РАБОТЕ"},{"well":"1004","date":"10.02.2010","event":"Ремонт","comment":"Здесь должен быть комментарий","state":"ОСТАНОВЛЕНА"},{"well":"1004","date":"14.03.2010","event":"Очистка","comment":"","state":"В РАБОТЕ"},{"well":"1005","date":"20.04.2010","event":"Нормализация","comment":"","state":"В РАБОТЕ"},{"well":"1005","date":"10.02.2010","event":"ОПЗ","comment":"","state":"В РАБОТЕ"},{"well":"1006","date":"14.03.2010","event":"Перестрел","comment":"","state":"В РАБОТЕ"},{"well":"1007","date":"20.04.2010","event":"Дострел","comment":"","state":"В ОЖИДАНИИ ОСВОЕНИЯ"},{"well":"1007","date":"10.02.2010","event":"Ремонт","comment":"Здесь должен быть комментарий","state":"В РАБОТЕ"},{"well":"1008","date":"14.03.2010","event":"Очистка","comment":"","state":"В ОЖИДАНИИ ОСВОЕНИЯ"},{"well":"1008","date":"20.04.2010","event":"Нормализация","comment":"","state":"ОСТАНОВЛЕНА"},{"well":"1009","date":"10.02.2010","event":"Перестрел","comment":"","state":"В ОЖИДАНИИ ОСВОЕНИЯ"},{"well":"1009","date":"14.03.2010","event":"Дострел","comment":"Здесь должен быть комментарий","state":""},{"well":"1010","date":"20.04.2010","event":"Ремонт","comment":"Здесь должен быть комментарий","state":"В РАБОТЕ"},{"well":"1011","date":"10.02.2010","event":"Очистка","comment":"","state":"В РАБОТЕ"},{"well":"1012","date":"14.03.2010","event":"Нормализация","comment":"","state":"ОСТАНОВЛЕНА"},{"well":"1012","date":"20.04.2010","event":"ОПЗ","comment":"Здесь должен быть комментарий","state":"В РАБОТЕ"},{"well":"1013","date":"10.02.2010","event":"Перестрел","comment":"","state":"В РАБОТЕ"},{"well":"1014","date":"14.03.2010","event":"Дострел","comment":"Здесь должен быть комментарий","state":"В РАБОТЕ"},{"well":"1015","date":"20.04.2010","event":"Ремонт","comment":"","state":"ОСТАНОВЛЕНА"},{"well":"1016","date":"10.02.2010","event":"Очистка","comment":"","state":"В ОЖИДАНИИ ОСВОЕНИЯ"},{"well":"1017","date":"14.03.2010","event":"Нормализация","comment":"","state":"В РАБОТЕ"},{"well":"1017","date":"20.04.2010","event":"ОПЗ","comment":"Здесь должен быть комментарий","state":"В РАБОТЕ"},{"well":"1018","date":"10.02.2010","event":"Перестрел","comment":"","state":"В РАБОТЕ"},{"well":"1019","date":"14.03.2010","event":"Дострел","comment":"","state":"В ОЖИДАНИИ ОСВОЕНИЯ"},{"well":"1020","date":"20.04.2010","event":"Ремонт","comment":"Здесь должен быть комментарий","state":"В РАБОТЕ"}]; 

var weColumns = [{"key":"well","name":"Скважина"}, 
       {"key":"date","name":"Дата"}, 
       {"key":"event","name":"Событие"}, 
       {"key":"comment","name":"Комментарий"}, 
       {"key":"state","name":"Состояние"}]; 


const Example = React.createClass({ 
     getInitialState() { 
     this.createColumns(); 

     let originalRows = weRows; 
     let rows = originalRows.slice(0); 

     return {originalRows, 
       rows, 
       filters: {}, 
       groupBy: [], 
       expandedRows: {}}; 
     }, 

     createColumns() { 
     let c = []; 
     for (let i = 0; i < weColumns.length; i++) { 

      c.push({ 
      key: weColumns[i].key, 
      name: weColumns[i].name, 
      resizable: true, 
      sortable: true, 
      filterable: true, 
      filterRenderer: MultiSelectFilter 
      }); 
     } 

     this._columns = c; 
     }, 

     handleGridSort(sortColumn, sortDirection) {  
     const comparer = (a, b) => { 
      var aValue = a[sortColumn]; 
      var bValue = b[sortColumn]; 

      if (sortColumn === "date") 
      { 
      var aSplit = a[sortColumn].split('.'); 
      var aDate = new Date(aSplit[2], aSplit[1] - 1, aSplit[0]); 
      var aValue = aDate.valueOf(); 

      var bSplit = b[sortColumn].split('.'); 
      var bDate = new Date(bSplit[2], bSplit[1] - 1, bSplit[0]); 
      var bValue = bDate.valueOf(); 
      }; 

      if (sortDirection === 'ASC') { 
       return (aValue > bValue) ? 1 : -1; 
      } else if (sortDirection === 'DESC') { 
       return (aValue < bValue) ? 1 : -1; 
      } 
     }; 

     const rows = sortDirection === 'NONE' ? this.state.originalRows.slice(0) : this.state.rows.sort(comparer); 

     this.setState({rows}); 
     }, 

     getRows() { 
     return Selectors.getRows(this.state); 
     }, 

     rowGetter(i) {   
     const rows = this.getRows(); 
     return rows[i]; 
     }, 

     rowsCount() { 
     return this.getRows().length; 
     }, 

     handleFilterChange(filter) { 
     let newFilters = Object.assign({}, this.state.filters); 
     if (filter.filterTerm) { 
      newFilters[filter.column.key] = filter; 
     } else {  
      delete newFilters[filter.column.key]; 
     } 

     this.setState({ filters: newFilters}); 
     }, 

     getValidFilterValues(columnId) { 
     let values = this.state.rows.map(r => r[columnId]); 
     return values.filter((item, i, a) => { return i === a.indexOf(item); }); 
     }, 

     handleOnClearFilters() { 
     this.setState({ filters: {} }); 
     }, 


     render() { 
     return ( 

      <ReactDataGrid 

       enableCellSelect={true} 
       columns = {this._columns} 
       rowGetter = {this.rowGetter} 
       rowsCount = {this.rowsCount()} 
       canFilter={true} 

       minHeight = {this.state.rows.length * 35 + 80} 

       onAddFilter={this.handleFilterChange} 
       getValidFilterValues={this.getValidFilterValues} 
       onClearFilters={this.handleOnClearFilters} 

       onGridSort = {this.handleGridSort}    

      /> 
     ); 
     } 
     }); 

    ReactDOM.render(< Example /> , document.getElementById('cntTable') 
    ); 

Answer 1

なぜソートとフィルタリングを組み合わせた公式の例を使用しないのですか？

ライブデモ： http://adazzle.github.io/react-data-grid/examples.html#/filterable-sortable-grid

ここでは、ソースコードは次のとおりです。 http://adazzle.github.io/react-data-grid/scripts/example16-filterable-sortable-grid.js