[React antd]TableのフィルターでValueと違う値をキーにする。

今回、react + ts + antdで作っているプログラムにて、Tableのフィルタリングを実装しました。その時、「列の値自体はboolだがフィルタリングの選択項目キーは文字列」というのを実装したのでメモ。

完了フラグが立っていたらチェックを表示という列にて、「全て、未完了、完了」を選択できるようにしてます。

const columns = [
  ...
  {
    title: "Bool列",
    dataIndex: "isFinished",
    key: "isFinished",
    render: (value: boolean) => (value ? '✔︎' : ''),
    filters: [
      {
        text: '全て',
        value: '1',
      },
      {
        text: '未完了',
        value: '2',
      },
      {
        text: '完了',
        value: '3',
      },
    ],
    onFilter: (value: boolean | Key,  record: ListItem) => {
      if(value === '1')
        return true;
      else if(value === '2')
        return !record.isFinished;
      else if(value === '3') 
        return record.isFinished;
      else
        return true;
    },
    filterSearch: true,
  },
];

忘れそう！