I’m getting exceptions every time I call some column methods like getFacetedUniqueValues or getNextSortingOrder while some (like getCanSort) work fine. Would somebody more experienced take a look at my code and tell me if I’m doing something wrong?

Here is Error log.

Row format:

type DataRow = {
    id: number;
    name: string;
    series?: { id: number, name: string, no: string };
    subformat_id: number;
    extra_universe_ids: number[];
};

Table definition:

const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: setSorting,
    filterFns: {
        nameSearch,
        seriesSearch,
        listSearch,
        listMultiSearch
    },
    state: {
        sorting
    },
    debugAll: true
});

Columns:

const columns = useMemo(() => [
    {
        accessorKey: "subformat_id",
        id: "subformat_id",
        cell: ({ getValue }) => <BadgeFormat id={getValue() as number} />,
        header: ({ column }) => (
            <SortButtonWrapper column={column}>
                <PickerFormat onChange={formats => { column.setFilterValue(formats); }} />
            </SortButtonWrapper>
        ),
        filterFn: "listSearch" as unknown as FilterFn<DataRow>
    },
    {
        accessorKey: "name",
        id: "name",
        cell: ({ getValue, row: { original: { id } } }) => (
            <NavLink
                label={getValue() as string}
                onClick={() => { navigate({ to: "/title/$id", params: { id } }); }}
                className={classes.navlink}
            />),
        header: ({ column }) => (
            <SortButtonWrapper column={column}>
                <TextInputSearch value={(column.getFilterValue() ?? "") as string} setValue={column.setFilterValue} label="Name" />
            </SortButtonWrapper>
        ),
        filterFn: "nameSearch" as unknown as FilterFn<DataRow>
    },
    {
        accessorKey: "series",
        id: "series",
        cell: ({ getValue }) => {
            const { id, name, no } = getValue() as { id?: number; name?: string; no?: string; } ?? { id: 0, name: "", no: "" };
            if (!id)
                return null;
            return (
                <BadgeSeries id={id} name={name ?? ""} no={no ?? ""} />
            );
        },
        header: ({ column }) => (
            <SortButtonWrapper column={column}>
                <TextInputSearch value={(column.getFilterValue() ?? "") as string} setValue={column.setFilterValue} label="Series" />
            </SortButtonWrapper>
        ),
        filterFn: "seriesSearch" as unknown as FilterFn<DataRow>
    },
    {
        accessorKey: "extra_universe_ids",
        id: "extra_universe_ids",
        cell: ({ getValue }) => (getValue() as number[]).map(id => <BadgeUniverse key={id} id={id} clickable label size="md" />),
        header: ({ column }) => (
            <SortButtonWrapper column={column}>
                <Text size="sm" fw="bold">Crossovers</Text>
                <PickerUniverse
                    limitOptions={[ ...(data ?? [])
                        .map(({ extra_universe_ids }: { extra_universe_ids: number[] }) => extra_universe_ids)
                        .flat()
                        .filter((e: number, i: number, a: number[]) => a.indexOf(e) === i), 0 ]
                    }
                    onChange={formats => { column.setFilterValue(formats); }}
                />
            </SortButtonWrapper>
        ),
        filterFn: "listMultiSearch" as unknown as FilterFn<DataRow>
    }
] as ColumnDef<DataRow>[], [ data ]);

Search handlers:

const nameSearch: FilterFn<DataRow> = (row: Row<DataRow>, columnId: string, filterValue: string) => handleSearch(filterValue, row.getValue(columnId));
const seriesSearch: FilterFn<DataRow> = (row: Row<DataRow>, columnId: string, filterValue: string) => {
    const { name, no } = row.getValue(columnId) as { name?: string; no?: string; } ?? { name: "", no: "" };
    return handleSearch(filterValue, `${name ?? ""} ${no ?? ""}`);
};
const listSearch: FilterFn<DataRow> = (row: Row<DataRow>, columnId: string, filterValue: number[]) => filterValue.includes(row.getValue(columnId));
const listMultiSearch: FilterFn<DataRow> = (row: Row<DataRow>, columnId: string, filterValue: number[]) => (
    (row.getValue(columnId) as number[]).length === 0
    ? [ 0 ]
    : (row.getValue(columnId) as number[])
)
    .some(universe_id => filterValue.includes(universe_id ?? 0));

const TextInputSearch = ({ value, setValue, label }: { value: string; setValue: (text: string) => void; label: string }) => (
    <TextInput
        classNames={{ root: classes.smallinlineinput, input: classes.thininputbox, label: classes.bold }}
        label={label}
        value={value}
        onChange={({ currentTarget }) => { setValue(currentTarget.value); }}
    />
);

const SortButtonWrapper = ({ column, children }: { column: Column<DataRow, any>; children: ReactNode; }) => {
    const Icon = column.getCanSort() ? column.getNextSortingOrder() === "asc" ? IconSelector : column.getNextSortingOrder() === "desc" ? IconChevronDown : IconChevronUp : null;
    return (
        <Group justify="space-between" wrap="nowrap" align="center">
            {children}
            <UnstyledButton onClick={column.getToggleSortingHandler()}>
                <Center className={classes.icon}>
                {Icon && <Icon size={16} stroke={1.5} />}
                </Center>
            </UnstyledButton>
        </Group>
    );
};

The table:

<Table layout="auto" miw="75%" highlightOnHover striped stickyHeader stickyHeaderOffset={headerHeight} className={classes.table}>
    <Table.Thead>
        {table.getHeaderGroups().map(headerGroup => (
            <Table.Tr key={headerGroup.id}>
                {headerGroup.headers.map(header => (
                    <Table.Th key={header.id}>
                        {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                    </Table.Th>
                ))}
            </Table.Tr>
        ))}
    </Table.Thead>
    <Table.Tbody>
        {isSuccess && table?.getRowModel()?.rows?.map(row => (
            <Table.Tr key={row.id}>
                {row.getVisibleCells().map(cell => (
                    <Table.Td
                        key={cell.id}
                        className={classNames({
                            [classes.fitcontent]: cell.column.id === "subformat_id",
                            [classes.flexgap]: cell.column.id === "extra_universe_ids" }
                        )}
                    >
                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                    </Table.Td>
                ))}
            </Table.Tr>
        ))}
    </Table.Tbody>
</Table>