Replies: 1 comment 2 replies
-
|
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());
}
});
} |
Beta Was this translation helpful? Give feedback.
-
|
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());
}
});
} |
Beta Was this translation helpful? Give feedback.
-
|
That's great! ill try it out. Thanks for the reply. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi
In the examples, I see the usage of
getFacetedUniqueValuesto 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 dogetColumn(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.
Beta Was this translation helpful? Give feedback.
All reactions