LoginSignup
6
4

More than 5 years have passed since last update.

[R] DT::datatable()でクリック可能なリンクを作成する方法

Last updated at Posted at 2019-02-09

DT::datatable()でリンクを飛ばしたい

RMarkDownやShinyを使用してテーブルを表示したい場合、デフォルトでソート機能もあり、ある程度きれいな見栄えで、インタラクティブなテーブルを作成できる非常に便利なDT::datatableですが、特定のセルから別ページにリンク(ExcelのHyperlink的な)を飛ばしたいと思ったとき、どうやったら実現できるのか結構悩んだので記録として残すことにしました。

DTパッケージの機能については詳しい説明が下記リンク先に紹介されています。

元データの準備

今回は下記のようなサンプルデータで試してみます。
以下のデータを手元に持っていたとします。

sample.r
 No <- c(1, 2, 3)
 Page <- c("Google", "Yahoo", "Wiki")
 URL <- c("https://www.google.co.jp/",
          "https://www.yahoo.co.jp/",
          "https://ja.wikipedia.org/wiki/")
 sample <- data.frame(No=No, Page=Page, URL=URL)
No Page URL
1 1 Google https://www.google.co.jp
2 2 Yahoo https://www.yahoo.co.jp/
3 3 Wiki https://ja.wikipedia.org/wiki/

こんなテーブルをRMarkDownでhtml出力しても、URLはそのままだと文字データとして処理されますので、クリックしてもリンク先には飛びません。

「URL列は非表示にして、Page列のセルにリンクをつけたい!!」といった場合、以下に続きます。

クリック可能なリンクを作成する方法

セルの値をhtmlのaタグ書式で書いてあげるとクリック可能なセルに変わります。

Page列の値をURL列のデータをもとにaタグ書式に変換してみます。
先ほど作成したsampleで試すと以下のような感じです。

sample_click.Rmd
---
title: "LINK_TEST"
output: html_document
---
chunk内
library(DT)
# sampleの作成
No <- c(1, 2, 3)
Page <- c("Google", "Yahoo", "Wiki")
URL <- c("https://www.google.co.jp/",
          "https://www.yahoo.co.jp/",
          "https://ja.wikipedia.org/wiki/")
sample <- data.frame(No=No, Page=Page, URL=URL)

# Page列をURL列を元にaタグ書式に書き換え
# "target = '_blank'"はクリック時に別ページで開くために記載※
sample$Page <- paste0("<a href=", "'", sample$URL, "'", "target = '_blank'", ">", sample$Page, "</a>")

# URL列の削除
sample <- sample[,-3]

# テーブルの作成(optionはお好みで)
sample_table <- datatable(sample, rownames=FALSE, escape=FALSE)

# テーブルの出力
sample_table 

上記をRmdファイルとして実行するとこんな表になります。
Imgur
Page列が青文字になり、無事リンクが飛ぶようになりました。
Shinyでは試してませんが、おそらく同じ方法で動作するのでは。

※ご注意!

記事中のaタグの表記方法はあまり推奨されないそうです。
下記リンク先の記事をご参考。

蛇足

元データのExcelにハイパーリンクしかなく、URLを引きずり出したい場合

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4