AccordionTable columns broken if Data has numeric keys

[Saladinek]

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Versions

Precise-UI 1.0.0

Description

If data is passed to AccordionTable component and contains a key which can be interpreted as numeric value, the UI and logic breaks.

Steps to Reproduce

1. Go to KitchenSink
2. Use Following code:

const { AccordionTable } = require('precise-ui');
const style = { width: '200px', margin: '0 auto', textAlign: 'center' };
​
function getContent({index, data}) {
  return (
    <div style={style}>
      Details for row #
      <b>{index}</b>
    </div>
  );
}
​
function cellRenderer({key, value}) {
    console.log('Key', key);
    console.log('Value', value)
  return key === 'tag' ? <Tag>{value}</Tag> : value;
}
​
<AccordionTable
  indexed
  data={[
    {tag: 'A', value: 'Alpha', team: 'Alpha team', 1451: 'Random Value'},
    {tag: 'B', value: 'Bravo', team: 'Bravo team', 1451: 'Random Value'},
    {tag: 'C', value: 'Charlie', team: 'Charlie team', 1451: 'Random Value'},
    {tag: 'E', value: 'Echo', team: 'Echo team', 1451: 'Random Value'},
  ]}
  cellRenderer={cellRenderer}
  detailsRenderer={getContent} />

3. Open Console
4. Render AccordionTable

Expected behavior: Table has a column 1451 with value 'Random Value' on every row + cellRenderer returns proper key and value pair

Actual behavior: Column is added at the beginning of table + cellRenderer returns incorrect key and value pair

Environment details: Chrome, Win10

[herrkris]

Hey @Saladinek, thank you for reporting this issue! Unfortunately this is impossible to fix with the current way Precise-UI handles the data property. The reason for that is, that the order for enumerating an object never really was defined, until ES 6. Every JavaScript method that enumerates an object obeys to the following rules in which order the keys are enumerated:

1. Integer indicies in asc order
2. String values in the order they were added
3. Symbols in the order they were added

This means for your case that 1451 always comes first, except if you turn it into a string and prefix it with a 0 so it looks like this: '01451'. Then the order will stay the same.

[herrkris]

More on ES6 traversal order of JavaScript objects: https://2ality.com/2015/10/property-traversal-order-es6.html