6. タブ区切りのファイルをtabulator で表示する

#ヘッダーでの絞込の機能追加
##headerFilterFunc:を利用する
[5. タブ区切りのファイルをtabulator で表示する](https://qiita.com/percipere/items/5aa1e2edab442a874a75)の絞込項目を追加しよう

LRG(Locus Reference Genomic)のIDが割り振られているものだけを表示できるよう機能追加する
Symbolのヘッダーのフィルター機能のように、LRGのヘッダー部分にフィルター機能を付加する
![Screen Shot 2017-12-27 at 16.58.51.png](https://qiita-image-store.s3.amazonaws.com/0/213053/8592664f-6a0a-527c-450b-16cbc63c58c7.png)

##ヘッダーフィルター機能について
tabulator内部ではeditorの設定を利用している
編集可能な内容とフィルター可能な内容は基本的に同じものという思想なのだろう
ただし、editorを設定する事でその項目が編集可能になってしまう
内容を編集したいわけでは無いので、editorを定義した上でヘッダーのフィルターの項目部分にのみ適用する事とする

作成する関数は下記の通り

- editorにヘッダーフィルターに利用する項目を定義する
    - function lrgEditor(cell, onRendered, success, cancel, editorParams)　editor を返す関数
        - ヘッダーフィルターに利用されるDOMオブジェクトを渡す ( $()で文字列をDOMオブジェクトに変換)
        - ヘッダーフィルターの変更（ドロップダウンリストが変更）された際にテーブル表示をリフレッシュするためにイベントを追加
- データの先頭にheaderFilterの値が含まれている場合にtrueそれ以外の場合にfalseを返す
    - headerFilterStartsWith(headerValue, rowValue, rowData, filterParams)
        - ここではheaderValueとして"LRG"又は""が渡ってくる
        - データの先頭に指定の文字が有ればtrue

詳細については、Tabulatorの[Filtering Data](http://tabulator.info/docs/3.3#filtering), [Editing & Manipulating Data](http://tabulator.info/docs/3.3#manipulating-data)を参照

```html:
<script>
    // Define Edit function for header filter as for now.
    function lrgEditor(cell, onRendered, success, cancel, editorParams) {
        //cell - the cell component for the editable cell
        //onRendered - function to call when the editor has been rendered
        //success - function to call to pass the successfully updated value to Tabulator
        //cancel - function to call to abort the edit and return to a normal cell
        //editorParams - editorParams object set in column definition
        //create editor
        _lrgEditorString = "<select><option value=''></option><option value='LRG'>LRG</option></select>"
        //convert it to DOM and define editor.
        var editor = $(_lrgEditorString);
        //when the value has been set, trigger the cell to update
        editor.on("change blur", function (e) {
            success(editor.val());
        });
        return editor;
    }

    function headerFilterStartsWith(headerValue, rowValue, rowData, filterParams) {
        // Return true if rowValue starts with headerValue
        //headerValue - the value of the header filter element
        //rowValue - the value of the column in this row
        //rowData - the data for the row being filtered
        //filterParams - params object passed to the headerFilterFuncParams property
        //console.log(rowValue, rowValue.indexOf(headerValue), headerValue);
        return rowValue.startsWith(headerValue);
    }
</script>
```

"LRG"コラムを上記の関数を利用して定義

- headerFilter: として lrgEditor を設定（ヘッダー部分のドロップダウンリストの設定)
- headerFilterFunc: として headerFilterStartsWith を設定(指定の文字列から始まるもののみtrue)

```javascript
        // コラムの定義
        var gene_columns = [
            {title: "id", field: "id", visible: false},
            {title: "GeneID", field: "GeneID", visible: false},
            {
                title: "Symbol", field: "Symbol", formatter: ncbiLinkByGeneSymbolFormatter,
                headerFilter: true, headerFilterFunc: "like"
            },
            {title: "RSG", field: "RSG"},
            {title: "LRG", field: "LRG", headerFilter: lrgEditor, headerFilterFunc: headerFilterStartsWith},
            {title: "RNA", field: "RNA"},
            {title: "t", field: "t", headerSort: false},
            {title: "Protein", field: "Protein"},
            {title: "p", field: "p", headerSort: false},
            {title: "Category", field: "Category"}
        ];
```

ヘッダー部分のLRGのドロップダウンリストを選択することで、LRGで始まるデータの含まれる行のみ表示することができる
![Screen Shot 2017-12-27 at 16.44.36.png](https://qiita-image-store.s3.amazonaws.com/0/213053/26c90eb3-67b1-8d97-eea2-0cb6f9ea2432.png)

コラムの定義を下記の様に headerFilter: に渡す editorと edit: に渡すeditorを個別に変更して、ヘッダー部分ではドロップダウンリストで選択、編集時には文字列を入力とすることもできる

```javascript
            {title: "LRG", field: "LRG", headerFilter: lrgEditor, headerFilterFunc: headerFilterStartsWith, editor: "input"},
```

今回はここまで。:smiley: