Doesn't look like dates are being sorted correctly across years (ISO Dates)

[bengold14]

[jbetancur]

Providing some code and sample data would be helpful.

[bengold14]

My apologies - wasn't thinking straight. I ended up finding a different reason for the error. Looks like you can't give a selector function and a formatting function together, which was causing the weird behavior

[jbetancur]

No worries. That’s correct. format will actually take precedence and was meant more for cases where you don’t want to affect the original data value. Ie format for display. Whereas the selector can take string path or a function. I probably document this better or put a warning in there

[bengold14]

The issue we were running into is when our selector is a nested property, which requires a function to correctly identify (or other reasons such as a backup property if first one is empty). Then, also when the property is a date/currency/etc. and needs to be formatted (after sorting).

Something like this:

{ name: 'Method of Transportation', selector: row => row['delMethod']['name'], sortable: true, grow: 2, center: true, // format: row => formatMoney(row['delMethod']['name']), },

Is there a reason you can't have both together?

[jbetancur]

I just remembered (still in a holiday coma) that a selector function overrides format. Originally, format was intended to be used with a selector string path and for really simple cases when you just wanted to sort and filter a cell.

Since this is a more advanced use case you should really be leveraging columns[].cell together with a selector function. cell lets you pass a custom component that you can format any way you want and handle any logic as needed.

  {
    name: 'Money',
    selector: row => row['delMethod']['name'], // to calculate the selector for sorting purposes
    sortable: true,
    cell: row => <CashMoney row={row} delMethod={delMethod} name={name} />,
  },

Then your CashMoney component:

const CashMoney = ({ row, delMethod, name }) => {
 const value = row['delMethod']['name'];

 return formatMoney(value);
}

Or a more lightweight version if you don't need to do anything super complicated

  {
    name: 'Money',
    selector: row => row['delMethod']['name'], // to calculate the selector for sorting purposes
    sortable: true,
    cell: row => formatMoney(row['delMethod']['name']);
  },

[jbetancur]

Question are you saying you don't know the selector up front?

Otherwise, a string selector would work fine: eg selector: 'delMethod.name'

  {
    name: 'Money',
    selector: 'row.delMethod.name',
    sortable: true,
    cell: row => formatMoney(row.delMethod.name);
  },

[jbetancur]

It looks like I can make this work by flipping lines 17 and 22 in util.js to allow the format when using the selector function. This allows both use cases and keeps things simple even if you prefer using selector functions

I'll put this in a 6.0.4 that I will release today

[gaiousantonio0909]

You can do it by converting the date to getTime then cell render back to date String again use the date int parse to selector to sort them by getTime and show in the front end date as string