How to get all unique values of a given columnId?

[xinli-wu]

Hi all,

I'm building my own filters to be something like the following where the dropdown is supposed to show all unique values:

In the example here: https://tanstack.com/table/v8/docs/examples/react/filters

If I select Abby as the first name, the table is filtered but the options are populated using getFacetedUniqueValues(), hence the users cannot see all options. I understand that those hidden options are removed because there're no matching results, but anyways, how can I get all unique values?

[pi-kei]

Use row.getUniqueValues(columnId) to get all unique values of certain column

[xinli-wu]

This doesn't work, it gives me all unique values of certain row, not column.

[pi-kei]

Oh. So, it looks like there is no built-in way. Possible workaround: you can get all unique values when all filters are emtpy then memoize them somehow.

[xinli-wu]

Thanks, that's what I've been thinking. But I feel like this feature should be added to the library :)

[calebfaruki]

How to get unique values:

const uniqueValues = useMemo(() => {
	const values = table.getCoreRowModel().flatRows.map(row => row.getValue(columnId)) as string[]
	return Array.from(new Set(values));
}, [table, columnId]);

The button passed down from the <Table /> component I have.

const handleRadioChange = (id: string, value: string | null | undefined, checked: boolean) => {
  props.setColumnFilters((old) => {
    // Remove the current filter for the ID, keeping all others as is
    const filtersWithoutCurrent = old.filter(filter => filter.id !== id);
    // If "checked" is true, add the new filter for the ID
    if (checked) {
      // If value is not null, add the new filter, else don't add (for "All" option)
      return value !== null ? [...filtersWithoutCurrent, { id, value }] : filtersWithoutCurrent;
    }
    // If not checked, just return the filters without the current, effectively removing it
    return filtersWithoutCurrent;
  });
}

The <Filter /> component.

import React, { useMemo } from "react";
import { ColumnDef, ColumnFiltersState, Table } from "@tanstack/react-table";

type FilterFormProps = {
  table: Table<any>;
  column: ColumnDef<any>;
  columnFilters: ColumnFiltersState;
  handleRadioChange: (id: string, value: string | null | undefined, checked: boolean) => void;
};

export default function Filter({ table, column, columnFilters, handleRadioChange }: FilterFormProps) {
  const columnId = column.id as string;

  const uniqueValues = useMemo(() => {
    const values = table.getCoreRowModel().flatRows.map(row => row.getValue(columnId)) as string[]
    return Array.from(new Set(values));
  }, [table, columnId]);

  const isFilterActive = (propertyId: string, specValue: string | null | undefined) => {
    return columnFilters.some(filter => filter.id === propertyId && filter.value === specValue);
  };

  const handleRadioChange = (id: string, value: string | null | undefined, checked: boolean) => {
    props.setColumnFilters((old) => {
      // Remove the current filter for the ID, keeping all others as is
      const filtersWithoutCurrent = old.filter(filter => filter.id !== id);
      // If "checked" is true, add the new filter for the ID
      if (checked) {
        // If value is not null, add the new filter, else don't add (for "All" option)
        return value !== null ? [...filtersWithoutCurrent, { id, value }] : filtersWithoutCurrent;
      }
      // If not checked, just return the filters without the current, effectively removing it
      return filtersWithoutCurrent;
    });
  }

  return (
    <>
      {uniqueValues.map((value, i) => (
        <input
          key={i}
          type="radio"
          id={`${columnId}-${value}`}
          name={columnId}
          value={value}
          checked={isFilterActive(columnId, value)}
          onChange={(e) => handleRadioChange(columnId, value, e.target.checked)}
        />
      ))}
    </>
  );
}