Sort method and indexes

Question

I'm trying fixed data table in my project.

But I have a problem about sorting.

Here I'm using this example: https://github.com/facebook/fixed-data-table/blob/master/examples/old/SortExample.js

It sorts by desc or asc. But I have problem about it.

For example when I first sort it by name,it brings this sorted array.

id:2 name:Mary

id:4 name:Mary

id:5 name:Mary

id:1 name:Anna

id:3 name:Anna

That is ok.But when I sort it again by name desc.It brings.

id:4 name:Mary

id:2 name:Mary

id:5 name:Mary

id:3 name:Anna

id:1 name:Anna

Ok it sort by name but the problem is:It change the index of the same values.For example it brings (id:4 name:Mary) to the first line.

But when I first sorted,it bringed (id:2 name:Mary).

Why it changes the same values indexes?

Is there a problem about sort method?

EDIT:here is my full code:

var FixedDataTable = require('fixed-data-table');
var React = require('react');

var Column = FixedDataTable.Column;
var Table = FixedDataTable.Table;

var SortTypes = {
  ASC: 'ASC',
  DESC: 'DESC',
};

function renderDate(/*object*/ cellData) {
  return <span>{cellData.toLocaleString()}</span>;
}

var SortExample = React.createClass({
  getInitialState() {
    return {
      rows: [{"id":"1","name":"Mary"},{"id":"2","name":"Felix"},
                   {"id":"3","name":"Mary"},{"id":"4","name":"Felix"},
                   {"id":"5","name":"Mary"},{"id":"6","name":"Felix"},
                   {"id":"7","name":"Mary"},{"id":"8","name":"Felix"},
                   {"id":"9","name":"Mary"},{"id":"10","name":"Felix"},
                   {"id":"11","name":"Mary"},{"id":"12","name":"Felix"},
                   {"id":"13","name":"Mary"},{"id":"14","name":"Felix"},
                   {"id":"15","name":"Mary"},{"id":"16","name":"Felix"},
                   {"id":"17","name":"Mary"},{"id":"18","name":"Felix"} ,
                   {"id":"19","name":"Mary"},{"id":"20","name":"Felix"}],sortBy: 'id',
      sortDir: null,
    };
  },

  _rowGetter(rowIndex) {
    return this.state.rows[rowIndex];
  },

  _sortRowsBy(cellDataKey) {
    var sortDir = this.state.sortDir;
    var sortBy = cellDataKey;
    if (sortBy === this.state.sortBy) {
      sortDir = this.state.sortDir === SortTypes.ASC ? SortTypes.DESC : SortTypes.ASC;
    } else {
      sortDir = SortTypes.DESC;
    }

    var rows = this.state.rows.slice();
    rows.sort((a, b) => {
      var sortVal = 0;
      if (a[sortBy] > b[sortBy]) {
        sortVal = 1;
      }
      if (a[sortBy] < b[sortBy]) {
        sortVal = -1;
      }

      if (sortDir === SortTypes.DESC) {
        sortVal = sortVal * -1;
      }

      return sortVal;
    });

    this.setState({
      rows,
      sortBy,
      sortDir,
    });
  },

  _renderHeader(label, cellDataKey) {
    return (
      <a onClick={this._sortRowsBy.bind(null, cellDataKey)}>{label}</a>
    );
  },

  render() {
    var sortDirArrow = '';

    if (this.state.sortDir !== null){
      sortDirArrow = this.state.sortDir === SortTypes.DESC ? ' ↓' : ' ↑';
    }

    return (
      <Table
        rowHeight={50}
        rowGetter={this._rowGetter}
        rowsCount={this.state.rows.length}
        headerHeight={50}
        width={1000}
        height={500}
        {...this.props}>
        <Column
          headerRenderer={this._renderHeader}
          label={'id' + (this.state.sortBy === 'id' ? sortDirArrow : '')}
          width={100}
          dataKey='id'
        />
        <Column
          headerRenderer={this._renderHeader}
          label={'First Name' + (this.state.sortBy === 'name' ? sortDirArrow : '')}
          width={200}
          dataKey='name'
        />

      </Table>
    );
  },
});









ReactDOM.render(
 <SortExample/>,
  document.getElementById('app')
)

Please post your code showing how the sorting module is initiated and used. — Yogi, Feb 21 '16 at 16:16
@EthanBierlein - Thanks for the correction. I've removed my comment. — Yogi, Feb 21 '16 at 19:23

Yogi · Answer 1 · 2016-02-21T19:12:22.910

Unable to duplicate the problem.

The sorting function appears to work correctly and as expected.

Update: The snippet was modified to alternate sort direction on each call. However, the results were the same, i.e., the function works correctly and as expected. In addition, the FixedDataTable demo sorts hundreds of records any direction correctly.

The sorting function is found on lines 53-65:

var rows = this.state.rows.slice();
rows.sort((a, b) => {
     var sortVal = 0;
     if (a[sortBy] > b[sortBy]) {
          sortVal = 1;
     }
     if (a[sortBy] < b[sortBy]) {
        sortVal = -1;
     }
     if (sortDir === SortTypes.DESC) {
         sortVal = sortVal * -1;
     }
     return sortVal;
});

A test array sorted repeatedly always returns the same data in the same order:

2, Mary

4, Mary

5, Mary

1, Anna

3, Anna

There could be a problem with OP's code (not shown) or how the sorted data is copied back to the original array, i.e., setState().

Show the code snippet and click run to try.

var i, sortBy, SortTypes, state,count=0;


SortTypes = {
  ASC: 'ASC',
  DESC: 'DESC'
};

sortBy = 'name';


function test( sortDir ) {

  var rows = state.rows.slice();
  rows.sort((a, b) => {
    var sortVal = 0;
    if (a[sortBy] > b[sortBy]) {
      sortVal = 1;
    }
    if (a[sortBy] < b[sortBy]) {
      sortVal = -1;
    }
    if (sortDir === SortTypes.DESC) {
      sortVal = sortVal * -1;
    }
    return sortVal;
  });

  count++;
  document.getElementById('stdout').innerHTML += 
    'SORT: ' + count + ' ' + sortDir + '\n' +JSON.stringify(rows, null, '  ') + '\n\n';
}



// example data
state = {
  rows: [{
    id: '1',
    name: 'Anna'
  }, {
    id: '2',
    name: 'Mary'
  }, {
    id: '30',
    name: 'Anna'
  }, {
    id: '40',
    name: 'Mary'
  }, {
    id: '100',
    name: 'Mary'
  }]
};


for(i=0; i<4; i++) {
  test( 'ASC' );
  test( 'DESC' );
}

Results of sorting the test array multiple times:<br>

<xmp id="stdout"></xmp>

Actually the problem occurs when I first sort by asc,after desc and after asc..... and after desc.So when I sort repeatedly.And when there are too much data with same value.For example 10 name with "Mary" and 10 name with "Anna". — javauser35, Feb 21 '16 at 16:36
@javauser35 - Modified the test code to alternate sort direction, but the results were the same. Unable to duplicate the problem. — Yogi, Feb 21 '16 at 16:56
Hey Roberto.I added my full code for you.Can you look at it ? — javauser35, Feb 21 '16 at 18:03

score 0 · Answer 2 · answered Feb 21 '16 at 16:33

i thinks this will fix your problem, i used Lodash library

`var data = [
   {
    id:1,
    name: "Anna"
  },
  {
    id:3,
    name: "Anna"
  },
  {
    id:2,
    name: "Mary"
  },
  {
    id:4,
    name: "Mary"
  },
  {
    id:5,
    name: "Mary"
  }
];
var sortArray = _.sortBy(data, function(o) { return o.name; });
var reverseSortArray = _.cloneDeep(sortArray).reverse();
console.log("sort Array: ", sortArray);
console.log("reverse Sort Array", reverseSortArray);`

Did you catch my problem ? Why it is happening when I sort repeatedly? — javauser35, Feb 21 '16 at 16:44

Sort method and indexes

2 Answers2