[data-grid] Support for filtering of array values

[tommcquarrie]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

We have a use case for displaying rows where an individual column might contain an array of values, like tags, categories etc. We want to be able to filter the grid by these values, so if a record has tags of ["tag1", "tag2"] then I should be able to use the is, not, isAnyOf operators to filter for these.

The provided column types don't support this out of the box. The closest is the singleSelect column type, but that only works with single values, not arrays.

I know that when we start looking at array values, matching logic does get more nuanced, and the value is just as likely to be something like [{id: 1, tag: "tag1"}, {id: 2, tag: "tag2"}] as it is to be a flat string, which wouldn't work with a generic matcher, but still the flat string case could be common enough to warrant internal support.

If this is something the community feels is a common enough case to add value I'd happily raise a PR to add a "multiSelect" column type. The operators would look like the below:

const getGridMultiSelectOperators = () => [
  {
    value: 'is',
    getApplyFilterFn: (filterItem: GridFilterItem) => {
      if (filterItem.value == null || filterItem.value === '') {
        return null;
      }

      return ({value}: GridCellParams) => {
        const valueArray = Array.isArray(value) ? value : [value];
        return valueArray.includes(parseObjectValue(filterItem.value));
      };
    },
    InputComponent: GridFilterInputSingleSelect,
  },
  {
    value: 'not',
    getApplyFilterFn: (filterItem: GridFilterItem) => {
      if (filterItem.value == null || filterItem.value === '') {
        return null;
      }

      return ({value}: GridCellParams) => {
        const valueArray = Array.isArray(value) ? value : [value];
        return !valueArray.includes(parseObjectValue(filterItem.value));
      };
    },
    InputComponent: GridFilterInputSingleSelect,
  },
  {
    value: 'isAnyOf',
    getApplyFilterFn: (filterItem: GridFilterItem) => {
      if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
        return null;
      }

      const filterItemValues = filterItem.value.map(parseObjectValue);
      return ({value}: GridCellParams) => {
        const valueArray = Array.isArray(value) ? value : [value];

        return valueArray.reduce<boolean>(
          (anyFound, val) => anyFound || filterItemValues.includes(val),
          false,
        );
      };
    },
    InputComponent: GridFilterInputMultipleSingleSelect,
  },
];

Examples 🌈

Expected behaviour:

Motivation 🔦

No response

Order ID 💳 (optional)

45574

[alexfauquette]

This look like a duplicate of this issue #4410

Can we close yours to avoid duplicate, or is there some aspect of your question that is not answered by the other issue?

[cherniavskii]

Hey @tommcquarrie
Thanks for your request!
I've added a link to it in #4410 as it adds more context on filtering by multiple values at a time.
I'll close this one as a duplicate, feel free to upvote #4410

If you're willing to contribute and need some guidance - let me know, I'll do my best to help :)
One option to iterate on this is to implement it in userland and add it to Recipes in our docs to gather some feedback.

[tommcquarrie]

Thanks @alexfauquette @cherniavskii, happy to close given @cherniavskii has captured the additional context here.