Rendering and sorting an array inside a row

pankee

Hi,

My table is made of a collection looking something like this:

[{
    "_id" : "24iqpxSHmGtzE94ob",
    "address" : {
        "street" : "604 E Ortega St",
        "city" : "Santa Barbara",
        "state" : "CA",
        "zip" : "93103"
    },
    "name" : "Ortega Park",
    "courts" : [ 
        {
            "isFullCourt" : true,
            "hoopHeight" : 120,
            "courtType" : indoor
        }, 
        {
            "isFullCourt" : false,
            "hoopHeight" : 120,
            "courtType" : outdoor
        }
    ],
},...]

My goal is to show this data and show exactly how many courts are indoor and outdoor for each row.
My code looks like so:

  columns: [
    { data: 'name', title: 'Name' },
    { data: 'address.city', title: 'City' },
    { data: 'address.state', title: 'State' },
    {
      data: 'courts',
      title: 'Sub-courts',
      render: function (courts, type, doc) {
        if (type === 'sort' || type === 'type') {
          return courts ? courts.length : 0;
        }
        if (courts && courts.length > 0) {
          const fullCourtCount = courts.filter(court => {
            return court && court.isFullCourt;
          }).length;
          const halfCourtCount = courts.length - fullCourtCount;

          return `${courts.length} sub-court${courts.length > 1 ? 's' : ''} (${halfCourtCount} half-court${halfCourtCount > 1 ? 's' : ''} / ${fullCourtCount} full court${fullCourtCount > 1 ? 's' : ''})`;
        } else {
          return 'No sub-courts';
        }
      }
    },
    { data: '_id', title: 'ID' }]

Rendering works fine, but sorting doesn't work entirely, as you can see below.

This is what happens when clicking on the column twice (which I assume would sort them by descending order).

Is there any easier way to achieve what I want to do, or am I simply missing something simple?

Thank you for your help!

colin

Hi @pankee ,

Yep, it looks like it should work, that code looks solid. The only question I have, is regarding type ==='type':

      if (type === 'sort' || type === 'type') {
        return courts ? courts.length : 0;
      }

I've never used that one before, so maybe try it with just the type sort.

If still no joy, could you link to a running test case showing the issue so we can take a look. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

pankee

I tried removing type ==='type' and the issue remains.

What's worse is that I've tried reproducing the issue through a test case (available here), but everything seems to work fine.

I'm guessing it's something to do on my end, and I will keep digging.
Thank you for your help.

colin

Hi @pankee ,

I just tried playing with your example, as the defined order was the same as the sort order - í added one entry that was out of sequence and it still behaved as expected. The only other thought would be to check your data, maybe there's some extra or special unexpectef characters that's breaking the code,

Shout if we can help,

Cheers,

Colin