How to ignore NULL values Sorting in Angular Material Table

Question

I am adding a row into table, in order to add a new record and i want to keep that row at top regardless the sort header (asc, desc or none).

When no order or asc is defined the row is at top but when desc order is clicked the row goes to bottom.

Any ideas on how to keep null values (new row object in data source has null values for column sort) always at top?

Order None is OK: https://i.sstatic.net/J3Ou1.png

Order Asc is OK too: https://i.sstatic.net/xFolC.png

But Order Desc IS NOT ok: https://i.sstatic.net/bsksj.png

Dharman · Accepted Answer · 2020-11-23 15:10:02Z

2

I had a similar problem, which was "ignoring the null values when one clicks on the sort button, so that they are always printed at the end of the table". I solved the problem this way:

overhiding the sortingDataAccessor method of the MatTableDataSource
checking the item protery value
if the value is null, then checking the sort order
according to sort order: returning a (possible) highest / lowest value so that the lines with null values are always at the end of the table (in your case, you would invert the returned values).

Here is a sample of code:

this.rankingData = new MatTableDataSource();
this.rankingData.sortingDataAccessor = (item, property) => {
    if(null == item[property]) {
      if("desc" == this.sort.direction) return '\u0000'+'\u0000'+'\u0000';
    return '\uFFFF'+'\uFFFF'+'\uFFFF';
  }
  return item[property];
};

edited Nov 23, 2020 at 15:10

Dharman♦

34k27 gold badges106 silver badges158 bronze badges

answered Nov 18, 2020 at 14:28

Cédric VIDREQUIN

3032 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

plmarcelo Over a year ago

Second if condition should be like this if("asc" === this.sort.direction) ...

Jeffrey Roosendaal · Accepted Answer · 2020-02-19 10:05:02Z

1

When the value is null, you can 'replace' it by a character that sorts after Z, for example omega (Ω), by overwriting the sorting mechanism.

this.dataSource.sortingDataAccessor = (item, key) => item[key] || 'Ω';

The sorting mechanism will return the key/value pair, but when no value is found, it will return the omega character, but for sorting only, so it won't show up in your table.

edited Feb 19, 2020 at 10:05

answered Feb 18, 2020 at 16:17

Jeffrey Roosendaal

7,1978 gold badges45 silver badges58 bronze badges

Comments

Alyf Mendonça · Accepted Answer · 2019-08-16 15:39:37Z

0

The angular MatSortModule has a property called 'deregister'. You can try adding this property to the line you want to remove from MatSortables

Source: https://material.angular.io/components/sort/api

answered Aug 16, 2019 at 15:39

Alyf Mendonça

1716 bronze badges

Collectives™ on Stack Overflow

How to ignore NULL values Sorting in Angular Material Table

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related