Allow searching in arrays

Discussion started in https://gitter.im/reactabular/reactabular?at=57ee9a024380866f04cb1cbf

To summarize, currently reactabular-search only expects to deal with strings, but in an effort to accommodate as many use cases as possible, it will try to cast a column’s value to string. This works well most of the time: a number such as 1337 would become the searchable string "1337" following that logic. However, when dealing with an array, such as ["Black", "White", "Blue"], it gets casted to "Black,White,Blue". Again, that is “fine” if you just wanted to give search a hand, but it starts to introduce issues. Notably, the query , now returns every row that has at least an item in that array as a result. It also becomes much more difficult to handle the search highlights since they are computed against once string, but the original data is still an array that could be mapped to an unordered list, for example.

So currently search.multipleColumns populates _highlights as such for the Bl query:

{
  _highlights: {
    colors: [
      {
        startIndex: 0,
        length: 2,
      },
      {
        startIndex: 12,
        length: 2,
      },
    ],
  },
  name: "colors",
},

The idea would be for it to traverse arrays and run the search against sub-items:

{
  _highlights: {
    colors: [
      [{
        startIndex: 0,
        length: 2,
      }],
      ,
      [{
        startIndex: 0,
        length: 2,
      }],
    ],
  },
  name: "colors",
},

As you can realize, it keeps the indexes aligned in the results by using sparse arrays. Then, the formatting code could look something like that for the colors column:

cell: {
  format: (colorList, {rowData: {_highlights: {colors}}}) => (
    <ul>
      {colorList.map((colorName, index) => (
        <li key={index}>
          {highlight.cell(colorName, colors[index])}
        </li>
      ))}
    </ul>
  ),
},

I’m presuming highlight.cell(colorName, undefined) just maps to colorName but I didn’t double check. It isn’t the case here, but the approach would be the same for any level of nesting with arrays. There is also the case of objects I didn’t explore, but it could potentially be considered as well.

[bebraw]

Yeah, looks good to me.

[mathieumg]

So this modification would become:

const _columnMatches = ({
  // ...
  castingStrategy = v => Array.isArray(v) ? v : String(v),
}) => {
  // ...
  const resolvedValue = castingStrategy(row[`_${property}`] || row[property]);

Plus of course the appropriate logic to handle this array in the search strategies.