ag-Gridでカスタムフィルターを定義する

ag-Gridのバージョンアップ作業でchangelogを眺めていたらいくつか気になったものがあったので試してみます

今までだとカスタムコンポーネントでフィルターをフルカスタムすることもできますがちょっと条件変えたいといった場合にまでコンポーネントを用意してカスタムフィルターを実装する感じでした

20.1で設定と関数だけ実装するだけでカスタムフィルターを実現することができるようになったようです

Column Filter: Core Feature of our Datagrid

www.ag-grid.com

早速試してみます

最終イメージは下記

f:id:swfz:20190520043851g:plain

難しいことは何もなく下記のようなcolDefを定義するだけでOKです

filterParams.filterOptionsがフィルターのリストなので複数定義できます

tsetの箇所がコールバックでフィルターのロジックを記述します

cellValueに渡ってくる値がオブジェクトを想定していたのですが強制的にstringになってしまうようでそのまま渡すと[object Object]となってしまいます

なのでfilterValueGetterでJSON文字列に変換してから渡すようにしています

testのコールバックでは受け取ったcellValueをparseしてオブジェクトに戻しています

サンプルなので例外処理など入れてませんがこれで一応オブジェクトに対してのフィルター処理が実現できるようになります

colDef

    {
        headerName: 'data',
        field: 'rawData',
        width: 300,
        filter: 'agTextColumnFilter',
        // オブジェクトはfilterにわたすときに強制的にstringにされてしまうためJSONでシリアライズ,デシリアライズする
        filterValueGetter: (params: ValueGetterParams) => {
          return JSON.stringify(params.data.rawData);
        },
        filterParams: {
          filterOptions: [
            'empty',
            {
              displayKey: 'filterExistKey',
              displayName: 'Filter By Key Exist?',
              test: (filterValue: any, cellValue: any): boolean => {
                const json = JSON.parse(cellValue);
                return json.hasOwnProperty(filterValue);
              }
            }
          ]
        },
        sortable: false,
        cellRenderer: (params: ICellRendererParams) =>
          JSON.stringify(params.value)
      }