Custom Column order in Spreadsheet columns list

[Leninkumar Inapanuri]

ejs-spreadsheet component is automatically building columns based on the dataset passed to sheet.

while it is happening, all my columns are alphabetically sorted.

I wanted to display the order of columns based on my precedence.

If you look at the below image, Date of Arrival​ column is pushed to end as it is having character and all the before columns are sorted in alphabetically order.

Below is the object which as the data for one row.

Now, In the column order, I want the order of columns to be customizable.
If I want to see the Date of Arrival​ column as first column, I cannot do right now. its not about just first column. its about all columns, I want the columns order to be customizable

FYI

below is the sheets​ ​prop value that I passed

[Sangeetha Priya Murugan]

Hi Leninkumar,

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

And we don’t have field mapping support in our spreadsheet. So, the data source rendered based on the JavaScript object key ordering behavior, which is not an issue in our end.

However, we have achieved this requirement by iterating the JSON data and update it in the spreadsheet using updateCell method in created event as shown below.

Code Block:

 created: function () {

      let spreadsheet = this.$refs.spreadsheet.ej2Instances;

      let fieldMapping = [

        'Customer Name',

        '1',

        '2',

        '11',

        '15',

        '2023',

        '2024',

      ];

 

      this.updateCellValue(dataSource.defaultData, fieldMapping);

      spreadsheet.cellFormat(

        { fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },

        'A1:G1'

      );

    },

    updateCellValue: function (data, field) {

      let spreadsheet = this.$refs.spreadsheet.ej2Instances;

      let sheetIdx = spreadsheet.activeSheetIndex;

      // Set the column header using specified field.

      field.forEach(function (field, i) {

        // updateCell method is used to update a cell properties.

        spreadsheet.updateCell(

          { value: field },

          getSheetName(spreadsheet, sheetIdx) + '!' + getCellAddress(0, i)

        );

      });

      // Loop the data source and get and set the proper cell value based on specified field mapping.

      data.forEach(function (item, i) {

        for (let j = 0; j < field.length; j++) {

          // updateCell method is used to update a cell properties.

          spreadsheet.updateCell(

            { value: item[field[j]] },

            getSheetName(spreadsheet, sheetIdx) + '!' + getCellAddress(i + 1, j)

          );

        }

      });

    },

 

Sample Link: https://stackblitz.com/edit/blk5qt?file=src%2Fdefault-data.json,src%2FApp.vue

API Link: https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#updatecell

[Michael Cheung]

Hey Sangeetha, 

The following code only works for display. When I tried to retrieve the row data using getRowData, the value is assigned to the wrong key. I understood this is a javascript ordering issue, but the sort logic should be implemented inside the spreadsheet so the caller doesn't need to worry about this.

Thanks,

Michael

[Babu Periyasamy]

Hi Michael Cheung,

Thanks for your update.

In our previous update, we implemented a workaround solution where we manually updated values using the updateCell method without setting the datasource property. Consequently, functions relying on the datasource, such as getRowData, were unable to return the correct key-value pairs.

To address this issue, we needed to manage field mapping at the source level to ensure the datasource rendered based on the specified key order. After integrating field mapping support into our Spreadsheet, the datasource now loads based on the key orders provided within the datasource itself, and the getRowData method functions correctly.

We have confirmed this as an improvement and logged it as a feature request. It will be available in our Volume 2 release, expected to be rolled out in June 2024. You can communicate and track the status of the feature using the link provided in our feedback portal.

Feedback link for tracking purposes: https://www.syncfusion.com/feedback/52394/provide-field-mapping-support-to-render-the-columns-based-on-the-datasource-in

You will be informed once the feature has been released. We appreciate your patience, until then.

[Michael Cheung]

Where can I get this improvement right now? I dont think waiting till June 2024 is feasible for me.

[Gobalakrishnan S]

Hi Michael Cheung,

We will prioritize and share this feature implementation at the Mid of May 2024. You will be informed once the feature has been released. We appreciate your patience, until then.

[Janakiraman Sakthivel]

Hi Michael Cheung,

We are glad to announce that our Essential Studio 2024 Volume 2 Main Release v26.1.35 is rolled out and is available for download under the following link.

Essential Studio 2024 Volume 2 Main Release v26.1.35 is available for download | Announcements Forums | Syncfusion

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

We have provided field mapping support to render the columns based on the data source in Spreadsheet in our release version 26.1.35 v. So please upgrade your package to the latest to resolve the issue from your end.

Package Link: @syncfusion/ej2-vue-spreadsheet - npm (npmjs.com)

Feedback Link: https://www.syncfusion.com/feedback/52394/provide-field-mapping-support-to-render-the-columns-based-on-the-datasource-in

For your convenience, we have shared the sample with a code snippet to demonstrate field mapping support below.

Sample: M3mvqj (forked) - StackBlitz

CODE SNIPPET:

<ejs-spreadsheet ref="spreadsheet" :created="created">

        …..

            <e-ranges>

              <e-range :dataSource="data" :fieldsOrder="fieldMapping"></e-range>

            </e-ranges>

          …..

      </ejs-spreadsheet>


data: () => {

    return {

      data: dataSource.defaultData,

      fieldMapping: [

        'Customer Name',

        '1',

        '2',

        '11',

        '15',

        '2023',

        '2024',

      ]

    };

  },

Please let us know if you need further assistance on this.