Custom SearchPane for Combined Columns

measuredworkshop

Link to test case: https://jsfiddle.net/measuredworkshop/jtsc79f2/
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: I've been able to get my use case 95% of the way to where it needs to be, but I'm having some snags still. I am calling data for the table from a JSON, but would like to aggregate a few of the columns into a single column for Search Pane simplicity. From the test case, "Brand" and "Franchise" are both derived from the JSON entries. I created a new column to combine both into a single column, called "Brand/Franchise" and would like this to be up in the searchPanes. I created the new column via:

    'columns': [{
    ...
    {
        'data': 'brand'
    },
    {
        'data': 'franchise'
    },
    {
        'data': function(row) { return [row.franchise, row.brand] },
        'visible': true,
    },
    ...

It appears to be showing up accurately in the searchPane, but when clicking an option, there are no results returned.

For ease of demonstration, I've included both the "Brand" and "Franchise" searchPanes and they work as they should, but the "Brand/Franchise" combined pane is what's getting confusing to me. Any help would be appreciated!

measuredworkshop

I was able to finagle it. Good old orthogonal data. Basically I set the data to be the values from the target rows, comma separated, then rendered with logic to split it up and return what was needed for orthogonal use:

...
{
  'data': function(row) { return row.brand + ', ' + row.franchise},

  'render': function (data, type, row) {
      if (type === 'sp') {
          if (data != null && data.includes(", ")) {
              return data.split(", ");
          }
          else {
              return data;
          }
      }
  return data;
  },
  'searchPanes': {
            orthogonal: 'sp'
        },
  'visible': false, //hide the crimes in the actual display
},
...