react-tableにおけるTypeError: x.toLowerCase is not a function

2024/02/06

Table of contents

Open Table of contents

はじめに
解決方法
原因
最近話題の本
参考

はじめに

tanstack/react-table v8 を実装中に、TypeError: filterValue.toLowerCase is not a function というエラーが発生した。その解決方法を記載する。

解決方法

column の定義部分に、filterFn を追加する。

export const columns: ColumnDef<TLearningMaterial>[] = [
  {
    id: "tags",
    header: () => centerText({ text: "Tags" }),
    accessorFn: (row) => {
      return row.tags?.map((tag) => tag.name).join(" ");
    },
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id));
    },
  }

重要な以下の部分を追加することで、エラーが解消される。

filterFn: (row, id, value) => {
  return value.includes(row.getValue(id));
},

原因

原因は、filterFn はデフォルトでは文字列を期待しているため、数値や配列などのデータ型を扱う際にエラーが発生する。

最近話題の本

ソフトウェアアーキテクチャの基礎 ―エンジニアリングに基づく体系的アプローチ

参考