Sorting error with more than 10 rows if the target column has same value

[allencch]

I found an issue if sorting more than 10 rows, and when the target column has the same value, the sorting is keep changing inconsistently if the header is clicked.

let data = [
    { value: 0, type: 1 },
    { value: 1, type: 1 },
    { value: 2, type: 1 },
    { value: 3, type: 1 },
    { value: 4, type: 1 },
    { value: 5, type: 1 },
    { value: 6, type: 1 },
    { value: 7, type: 1 },
    { value: 8, type: 1 },
    { value: 9, type: 1 },
    { value: 10, type: 1 }
];
let rows = data.map((item, index) => {
    return (
        <Tr key={index}>
            <Td column="type" value={item.type} >
                {item.type}
            </Td>
            <Td column="value" value={item.value} >
                {item.value}
            </Td>
        </Tr>
    );
});

let table = (
    <Table sortable={[ {column: 'type'}, {column: 'value'} ]}>
        <Thead>
            <Th column="type">
                Type
            </Th>
            <Th column="value">
                Value
            </Th>
        </Thead>
        {rows}
    </Table>
);

Any way to solve this? The actual data will get from the backend. The main problem is the sorting of the same values is inconsistent. And the issue will not appear if the table has 10 rows or below.

[JonathanTR]

Running into the same issue with a very similar implementation.

[allencch]

I checked. This issue is not from reactable, but from the JS itself. Related issue can be found here. It can be easily reproduced in Chrome, Opera, and even Node.

data = data.sort((a, b) => { 
  if (a.type < b.type) return -1; 
  else if (a.type > b.type) return 1; 
  else return 0; 
});

So, this issue can be closed.