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

#テーブルの表示項目・表示方法を変更する
[1.タブ区切りのファイルをtabulator で表示する](https://qiita.com/percipere/items/7d0498546afa9ad3187a)に変更を加える
##コラムの定義部を変更して表示項目を変更する

- idを追加する

gene_columnsの定義部分のみを示す

```javascript: 
        // コラムの定義
        var gene_columns = [
            {title: "id", field: "id"},
            {title: "GeneID", field: "GeneID"},
            {title: "Symbol", field: "Symbol"},
            {title: "RSG", field: "RSG"},
            {title: "LRG", field: "LRG"},
            {title: "RNA", field: "RNA"},
            {title: "t", field: "t"},
            {title: "Protein", field: "Protein"},
            {title: "p", field: "p"},
            {title: "Category", field: "Category"}
        ];
```

idフィールドが追加される
![Screen Shot 2017-12-21 at 08.00.55.png](https://qiita-image-store.s3.amazonaws.com/0/213053/0635a66b-c19e-9c5b-5d16-c20cbdccde1b.png)


## visible: boolean を利用した表示非表示の指定


項目を非表示にする

- visible: false で非表示に

```javascript: 
        // コラムの定義
        var gene_columns = [
            {title: "id", field: "id", visible: false},
            {title: "GeneID", field: "GeneID", visible: false},
            {title: "Symbol", field: "Symbol"},
            {title: "RSG", field: "RSG"},
            {title: "LRG", field: "LRG"},
            {title: "RNA", field: "RNA"},
            {title: "t", field: "t"},
            {title: "Protein", field: "Protein"},
            {title: "p", field: "p"},
            {title: "Category", field: "Category"}
        ];
```
idとGeneIDのカラムが非表示となる
![Screen Shot 2017-12-19 at 17.17.41.png](https://qiita-image-store.s3.amazonaws.com/0/213053/1d175cc6-9214-e18d-552c-d3cdfaee0c3e.png)


##formatter:　を利用してセルの表示をカスタマイズ
SymbolのコラムからNCBIのGeneにリンクを貼ってみる
例　A1CFと表示されている部分に
https://www.ncbi.nlm.nih.gov/gene/29974 のリンクを適用する
最後の数字はGeneIDを指定

- セルの文字列を変更するためformatter: にカスタマイズした関数を渡す
    - cell, formatterParams を受けて表示文字列を返す関数を作成
    - ncbiLinkByGeneSymbolFormatter(cell, formatterParams)
        - cellには該当するセルのデータが入っている(ここではSymbol)
        - 同じ行の他のセル(GeneIDが欲しい)のデータを参照するために、cell.getData()を利用
    - getNcbiLinkByGeneId(geneId, geneSymbol)
        - リンク用の文字列を組み立て

```javascript
    function ncbiLinkByGeneSymbolFormatter(cell, formatterParams) {
        var geneSymbol = cell.getValue();
        var geneId = cell.getData().GeneID;
        return getNcbiLinkByGeneId(geneId, geneSymbol);
    }
    function getNcbiLinkByGeneId(geneId, geneSymbol) {
        // Create ncbi link
        return '<a target="_blank" href="https://www.ncbi.nlm.nih.gov/gene/' + geneId + '">' + geneSymbol + "</a>";
    }
```

gene_columnsの定義部分を変更して、フォーマッターを設定する

```javascript

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

リンクをクリックすると別タブでNCBIの該当するgeneのページが表示される
![Screen Shot 2017-12-21 at 08.03.15.png](https://qiita-image-store.s3.amazonaws.com/0/213053/654c29b3-0b1d-c6af-6c4c-72100d4e9b88.png)



今回はここまで:smiley: