将排序和筛选合并到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