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

テーブルの表示項目・表示方法を変更する

1.タブ区切りのファイルをtabulator で表示するに変更を加える

コラムの定義部を変更して表示項目を変更する

• idを追加する

gene_columnsの定義部分のみを示す

        // コラムの定義
        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フィールドが追加される

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

項目を非表示にする

• visible: false で非表示に

        // コラムの定義
        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のカラムが非表示となる

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)
    • リンク用の文字列を組み立て

    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の定義部分を変更して、フォーマッターを設定する

        // コラムの定義
        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のページが表示される

今回はここまで