How to make getFacetedUniqueValues() return correct number of unique values in column which each cell contains multiple value?

[cometyang]

I customize the column and make it can display multiple values in each cell. However, I find the getFacedUniqueValues() does not work for cell contain array of strings. How can I make it calcuate the correct number of unique string?

For example:

| Column A |.
|. [a, b]|
| [a]. |
|. [b]. |
|. [a, b] |

I expected the getFacedUniqueValues() return a Map with (a,3), (b,3). Instead it didn't behave this way. How should I solve this problem?

[cesardelacruz]

Unfortunately getFacetedUniqueValues() currently does not work for columns containing an array of strings.

You can work around this issue as follows to get the correct value:

const facets = column?.getFacetedUniqueValues();
// Custom facets if keys is array then sum the equal value and remove duplicate
const customFacets = new Map()
for (const [key, value] of facets as any) {
   if (Array.isArray(key)) {
      for (const k of key) {
         const prevValue = customFacets.get(k) || 0;
         customFacets.set(k, prevValue + value);
      }
   } else {
      const prevValue = customFacets.get(key) || 0;
      customFacets.set(key, prevValue + value);
   }
}
console.log(customFacets);

I hope I was helpful :)

[zacBkh]

Thank you so much, it works out of the box!

[mrdotb]

The previous code is working but it result in the data processed multiples time and it's also not using the memo It's probably better to pass a custom getFacetedUniqueValues to the table that support array values.
Based on https://github.com/TanStack/table/blob/db745afdb867511ddd04a79150f89d3894a03532/packages/table-core/src/utils/getFacetedUniqueValues.ts

Here is a modified version that support array values.

import { getMemoOptions, memo, RowData, Table } from '@tanstack/react-table'

export function getFacetedUniqueValues<TData extends RowData>(): (
  table: Table<TData>,
  columnId: string,
) => () => Map<any, number> {
  return (table, columnId) =>
    memo(
      () => [table.getColumn(columnId)?.getFacetedRowModel()],
      (facetedRowModel) => {
        if (!facetedRowModel) return new Map()

        let facetedUniqueValues = new Map<any, number>()

        for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
          const values = facetedRowModel.flatRows[i]!.getUniqueValues<number>(columnId)

          for (let j = 0; j < values.length; j++) {
            const flattenedValues = (Array.isArray(values[j]) ? values[j] : [values[j]]) as number[]

            for (let k = 0; k < flattenedValues.length; k++) {
              const value = flattenedValues[k]
              facetedUniqueValues.set(value, (facetedUniqueValues.get(value) ?? 0) + 1)
            }
          }
        }

        return facetedUniqueValues
      },
      getMemoOptions(table.options, 'debugTable', `getFacetedUniqueValues_${columnId}`),
    )
}

Then when you create the table pass the custom function to getFacetedUniqueValues: getFacetedUniqueValues() and your done.