We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to custom column order in spreadsheet

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.

8 Replies

SP Sangeetha Priya Murugan Syncfusion Team March 2, 2023 08:39 AM UTC

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'])



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

GH Geoff Hopkins replied to Sangeetha Priya Murugan March 2, 2023 10:43 AM UTC

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


SP Sangeetha Priya Murugan Syncfusion Team March 3, 2023 01:41 PM UTC

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 7th, 2023.


Sangeetha M

VR Vasanth Ravi Syncfusion Team March 8, 2023 05:39 PM UTC

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.

VR Vasanth Ravi Syncfusion Team March 10, 2023 04:44 PM UTC

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.

GH Geoff Hopkins March 14, 2023 04:13 AM UTC

Hi there

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



SP Sangeetha Priya Murugan Syncfusion Team March 14, 2023 12:42 PM UTC

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.

SP Sangeetha Priya Murugan Syncfusion Team March 29, 2023 02:38 PM UTC

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.

Live Chat Icon For mobile
Up arrow icon