Expose a getUniqueValues on column

[dd-jonas]

Hi

In the examples, I see the usage of getFacetedUniqueValues to populate an html datalist. In my case, I'm using select inputs instead of a text input with datalist, so it would make more sense to show all possible values, even if it will result in no matches when combined with the other applied filters. As I think this use case isn't too uncommon, it would be nice to be able to do getColumn(columnId).getUniqueValues() for example, without the faceting.

I'm aware that a function already exists by that name internally, but that seems to serve a different purpose.

[jhyland87]

Did you ever find something that worked? I had AI in cursor create something real quick that works pretty good.

file: src/types/tantable.d.ts:

import "@tanstack/react-table";

declare module "@tanstack/react-table" {
  interface Column<TData extends RowData, TValue> {
    getUniqueValues: () => (string | number)[];
  }
}

file: src/utils/tantable.ts

import { Column, Table } from "@tanstack/react-table";

export function extendColumnWithUniqueValues<TData>(table: Table<TData>) {
  // Add getUniqueValues method to each column
  table.getAllColumns().forEach((column: Column<TData, unknown>) => {
    if (!column.getUniqueValues) {
      column.getUniqueValues = () => {
        const values = new Set<string | number>();

        table.getRowModel().rows.forEach((row) => {
          const value = row.getValue(column.id);
          if (value !== undefined && value !== null) {
            values.add(value as string | number);
          }
        });

        return Array.from(values).sort((a, b) => {
          if (typeof a === "number" && typeof b === "number") {
            return a - b;
          }
          return String(a).localeCompare(String(b));
        });
      };
    }
  });
}

file: src/components/SearchPanel/MyTable.tsx

import { ReactElement } from "react";
import {
  useReactTable,
} from "@tanstack/react-table";
import { extendColumnWithUniqueValues } from "../../utils/tantable";

export default function MyTable({
  params
}): ReactElement {

  const table = useReactTable({
    // TabStack table params
  });

  // Extend columns with getUniqueValues method
  extendColumnWithUniqueValues(table);

  
  // Example usage of getUniqueValues
  table.getAllColumns().forEach((column) => {
    if (column.getCanFilter()) {
      console.log(`Unique values for ${column.id}:`, column.getUniqueValues());
    }
  });
}

[dd-jonas]

I had changed my code so that I didn't need to get the unique values of a column. Instead, I handled this outside of Tanstack Table by creating an array of unique values manually based on the data.

However, there is now the option in Tanstack Table to add custom features. Your approach is fine, but here's a more native way to do it. (See the custom features docs: https://tanstack.com/table/latest/docs/guide/custom-features#createcolumn).

file: useTable.ts

import { useReactTable, getCoreRowModel, type TableOptions } from '@tanstack/react-table';

// A wrapper around useReactTable with some defaults, including the custom features.
// (This is not necessary if you call useReactTable in a single place only.)`

export const useTable = (options: TableOptions<unknown>) => useReactTable({
  // Your default options
  getCoreRowModel: getCoreRowModel(),
  // etc...

  // Options from the parameter (e.g. data, columns, initialState, ...)
  ...options,

  // Custom features
  _features: [
    {
      // In this case use createColumn. You could also add features to table, rows, cells, ...
      createColumn: (column, table) => {
        // Add any custom property or method to `column` here
        column.getUniqueValues = () => {
            // Using `getCoreRowModel` to get all row values *before* other column filters are applied.
            // You could also use any other desired row model.
            // (If you use column.getFacetedRowModel here, you would get a similar result to column.getFacetedUniqueValues.)
            const values = table.getCoreRowModel().rows.map((row) => row.getValue(column.id));
            // Just an example, write any filtering/sorting logic you want here
            return Array.from(new Set(values)).filter(Boolean);
          };
      },
    },
  ],
});

File: src/types/tantable.d.ts:

// I haven't tested the way you typed it, but this is how I do it.

interface ColumnUniqueValues {
  getUniqueValues: () => unknown[]; // You could be more specific than `unknown`, as long as you implement it correctly.
}

declare module "@tanstack/react-table" {
  interface Column extends ColumnUniqueValues {}
}

Usage:

export default function MyTable({
  params
}): ReactElement {
  const table = useTable({
    // TabStack table params
  });
  
  // Example usage of getUniqueValues
  table.getAllColumns().forEach((column) => {
    if (column.getCanFilter()) {
      // column.getUniqueValues() exists because it's a custom feature
      console.log(`Unique values for ${column.id}:`, column.getUniqueValues());
    }
  });
}

[jhyland87]

That's great! ill try it out. Thanks for the reply.

[jhyland87]

@dd-jonas I implemented the change you suggested, and it works great. Thanks for the input!