How to custom column order in spreadsheet

[Geoff Hopkins]

Hi there

I need to display the years columns e.g 2025,2026 and 2027 (which have a purely numeric column name) after (to the right of) the Resource Code column but I cannot get it to render that way. The columns with a numeric name are always rendered to as the first columns.
I have tried to reorder the returning select query and also by placing manually into CellDirective but again no luck.

Has anyone else had the same issue or have any ideas?

Thanks in advance.

[Sangeetha Priya Murugan]

Hi Geoff,

Your requirement can be achievable by using the query property as shown below.

Code Block:

 

const query = new Query()

    .select(['2023', '2022', 'Payment Mode', 'Color', 'Model', 'Customer Name'])

    .take(200);

 

For your convenience we have prepared the sample based on our suggestion. Please find the link below.

Sample Link: https://stackblitz.com/edit/react-n4scha?file=index.js,data.js

UG Link: https://ej2.syncfusion.com/react/documentation/spreadsheet/data-binding#remote-data

[Geoff Hopkins]

Hi Sangeetha Priya Murugan,

Thank you for replied

i have tried it before but not working as well

put query into component

below the result (this function only for select field that want to display)

above result same with sample link from you
https://stackblitz.com/edit/react-n4scha?file=index.js,data.js

  

[Sangeetha Priya Murugan]

Hi Geoff,

We have validated your reported requirement and it is related to our sub-component. And, we have forwarded this query to the concern team.  So, we will update you the further details on March 7^th, 2023.

Regards,

Sangeetha M

[Vasanth Ravi]

Hi Geoff,

We need some more time to validate your reported issue as it is related to our sub-component team. We will update you further details regarding on March -10, 2023 without any further delay. We appreciate your patience until then.

[Vasanth Ravi]

Hi Geoff,

We have confirmed the issue as "Issue in column ordering when providing number value as header" and logged a bug report, and it will be available in our First Patch after Essential Studio EJ2 Volume 01 release. You can track the status of the issue via the feedback link below.

Feedback link for tracking purpose: https://www.syncfusion.com/feedback/41981/issue-in-column-ordering-when-providing-number-value-as-header

You will be informed regarding this once the fix is published.

[Geoff Hopkins]

Hi there

Thanks for the reply, do you have rough idea when First Patch after Essential Studio EJ2 Volume 01 would be?

Thanks

Geoff

[Sangeetha Priya Murugan]

HI Geoff,

Our patch release will be expected to be rolled out in the first week of April 2023, we appreciate your patience until then.

[Sangeetha Priya Murugan]

Hi Geoff,

While trying to resolve this issue, we noticed that the order of keys in an object is not guaranteed. In JavaScript, when iterating an object, the script looks first for strings that look like integer keys and iterates those in numeric order, then iterates the remaining string keys in insertion order, and then iterates the symbols again in insertion order.

Please refer to the below reference for object keys ordering behavior.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys#examples
https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order

Due to the above object key ordering behavior, we are unable to resolve the issue at the source end. So, we have prepared a workaround solution to achieve your requirement.

Please find the sample below.

Stackblitz Sample: https://stackblitz.com/edit/react-2sratd-tsmsoe?file=index.js

We are glad to assist you with this if you need any further clarifications.