Material-table: Sorting doesn't work when fields shown are null

[TatiFKNavarro]

Describe the bug
I have a column that has lots of null values. When only null values are shown on page, and you try to sort, nothing happens. If you go to a page where a value is shown, and you click to sort, it goes back to page 1 and it still doesn't sort. No error appears on console.

Column definition:

{
  title: 'Últ. Venda',
  field: 'dataVenda',
  render: (rowData) => rowData.dataVenda ? moment(rowData.dataVenda).format('DD/MM/YYYY') : 'Sem dados',
}

Expected behavior
Sorting should work fine

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari] Firefox, Chrome
• Version [e.g. 22] 67.0b3, 74.0.3729.22

[mbrn]

Hi @TatiTheFreaK ,

I will take a look at this case asap.

[ColinKrist]

I also face this issue, I think its possible to get around it until the fix lands though. In the docs there is customSort under columns props that could be implemented by you to handle null values for each of your columns.

[mbwatson]

Good thinking. Something like this function works as a quick fix.

const sortNullFirst = (a, b, property) => a[property] < b[property] || a[property] === null ? -1 : 1

Implementation:

columns={
  [
    ...,
    {
      title: 'Some Column',
      field: 'correspondingProperty',
      customSort: (a, b) => sortNullFirst(a, b, 'correspondingProperty')
    },
    ...,
]
}

Perhaps the more sustainable solution is to convert nulls to empty strings, say, when the data is stored or when it's fetched?

[mbrn]

This is done with version 1.31.0