Marketplace Data grid - Sort by money?

[Tim_Jones]

I have a data grid showing USD dollar amounts. The dollar amounts are currently strings because I need to show 73 as 73.00 or 2.7 as 2.70. When sorting the column, the sort is by the string value, not the numeric value, so the sort appears wrong to the user.

I can create a string representation of the value “73.00” and the numeric value 73, but I need the user to be able to interact with the string column on the data grid, but do the actual sort by the numeric value.

Or is there an entirely different way to deal with this?

Thanks,
TIm

[Volodymyr_Ialovyi]

Hello @Tim_Jones

The Data Grid component uses AG Grid, as mentioned in the documentation.
AG Grid provides a feature called valueFormatter, which allows you to control how values are displayed in the grid.

The ideal solution in your case would be to store the values as numbers and use valueFormatter to display them in the format you want (for example, showing 73.00 or 2.70).

I’ll check with my colleagues to confirm whether this AG Grid formatting option can be used directly in the Backendless Data Grid component.

Regards,
Volodymyr

[Tim_Jones]

That does sound like a great solution! Please let me know what you find out.

Tim

[Viktor_Mudrevsky]

Hi @Tim_Jones ,

We’ve checked this, and unfortunately, it won’t work at the moment — some updates to the Data Grid component are required to support this feature.
I’ve created an internal ticket to add the valueFormatter functionality.

Regards,
Viktor

[Tim_Jones]

Thank you for investigating this. Do you have any ideas on a workaround for the meantime?

Thanks,
Tim

[Alexander_Pavelko]

Hello Tim Jones!

As a workaround you can use a valueFormatter together with a local cellRenderer, and pass both through the Column Definition Logic (in the Custom Code block).

Here’s a minimal example I used with test data:

// Test data
const rowsData = [
  { name: 'Jack', price: 26, city: 'Paris' },
  { name: 'Kate', price: 22, city: 'New York' },
  { name: 'Nick', price: 28, city: 'Kyiv' }
];

// Column definitions
return [
  { field: 'name', checkboxSelection: true, width: 400 },
  {
    field: 'price',
    headerName: 'Price ($)',
    sortable: true,
    width: 120,
    valueFormatter: p =>
      new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        maximumFractionDigits: 2
      }).format(p.value),
    cellRenderer: p => p.valueFormatted ?? p.value,
    sort: 'asc',
    comparator: (a, b) => a - b,
    filter: 'agNumberColumnFilter'
  },
  { field: 'city', width: 400 }
]

This keeps sorting/filtering numeric on the raw price value while displaying it as currency in the cell.

Regards,
Alexander

[Tim_Jones]

This is awesome. Thank you!