TanStack React TableでsetFilterValueに数値の範囲を指定する方法

TanStack React Tableでは、setFilterValueを使って列のフィルター値を設定できます。数値の範囲でフィルタリングしたい場合は、以下のように実装できます。

1. カスタムフィルター関数の作成

まず、数値の範囲でフィルタリングするカスタム関数を作成します:

const numberRangeFilter: FilterFn<any> = (row, columnId, filterValue) => {
  const rowValue = row.getValue(columnId) as number;
  const [min, max] = filterValue as [number, number];
  
  if (min !== undefined && max !== undefined) {
    return rowValue >= min && rowValue <= max;
  } else if (min !== undefined) {
    return rowValue >= min;
  } else if (max !== undefined) {
    return rowValue <= max;
  }
  
  return true;
};

2. フィルター関数の登録

作成したフィルター関数をuseReactTableのオプションに登録します:

const table = useReactTable({
  data,
  columns,
  filterFns: {
    numberRange: numberRangeFilter,
  },
  // その他のオプション...
});

3. 列の定義でフィルター関数を指定

フィルタリングしたい列の定義で、作成したフィルター関数を指定します:

const columns = [
  {
    accessorKey: 'age',
    header: '年齢',
    filterFn: 'numberRange',
  },
  // その他の列...
];

4. フィルター値の設定

最後に、setFilterValueを使ってフィルター値を設定します:

const handleFilterChange = (min: number, max: number) => {
  table.getColumn('age')?.setFilterValue([min, max]);
};

このようにして、TanStack React Tableで数値の範囲を指定したフィルタリングが実現できます。

まとめ

TanStack React Tableを使用して数値の範囲でフィルタリングする方法を紹介しました。
カスタムフィルター関数を作成し、適切に設定することで、柔軟なフィルタリング機能を実装できます。

この方法を応用することで、日付範囲や他の複雑なフィルタリングにも対応できるでしょう。