tabulator.load.tsv.201703121602

create an Table by tabulator.js.

by ytyaru

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/2.11.0/tabulator.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/2.11.0/tabulator.min.js"></script>
<body>
  <div id="RepositoryList"></div>
  <table id="License">
    <tr><th>Library</th><th>License</th><th>Copyright</th></tr>
    <tr><th><a href="https://d3js.org/">d3.js</a></th><th><a href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause</a></th><th><a href="https://github.com/d3/d3/blob/master/LICENSE">Copyright 2010-2016 Mike Bostock</a></th></tr>
    <tr><th><a href="https://github.com/olifolkerd/tabulator">tabulator.js</a></th><th><a href="https://opensource.org/licenses/MIT">MIT</a></th><th><a href="https://github.com/olifolkerd/tabulator/blob/master/LICENSE">Copyright (c) 2015-2017 Oli Folkerd</a></th></tr>

  </table>
</body>

CSS

#License {
  margin-top: 30px;
}
#License td,
#License th {
  padding: 2px;
  font-size: 10px;
}

JavaScript

$(window).resize(function(){
  $("#RepositoryList").tabulator("redraw");
});

baseTime = new Date();
var tsvUrl = "https://raw.githubusercontent.com/ytyaru/structure.text.Upload.201703120923/master/res/tmp/2017/0312/Repositories.tsv"

d3.tsv(tsvUrl, function(error, data) {
  $("#RepositoryList").tabulator({
    //height:"320px",
    fitColumns:true,
    columns: getColumns(data)
});
  $("#RepositoryList").tabulator("setData", data);
});

function getColumns(data)
{
  columns = [];
  var keys = d3.entries(data[0]);
  for (var i = 0; i < keys.length; i++)
  {
    columns.push(getColumn(keys[i].key));
    console.log(keys[i]);
  }
  return columns;
}
  
function getColumn(key)
{
  var column = {};
  column["title"] = key;
  column["field"] = key;
  if ("Id" == key) {
    column["sorter"] = "integer";
    column["visible"] = false;
  } else if ("IdOnGitHub" == key) {
    column["sorter"] = "integer";
    column["visible"] = false;
  } else if ("Name" == key) {
    column["width"] = "30%";
    column["title"] = "リポジトリ名";
    column["formatter"] = repo_link_formatter;
  } else if ("Description" == key) {
    column["width"] = "50%";
    column["title"] = "説明";
    column["formatter"] = homepage_link_formatter;
  } else if ("Homepage" == key) {
    column["visible"] = false;
  } else if ("CreatedAt" == key) {
    column["title"] = "作成";
    column["formatter"] = CreatedAt_formatter;
  } else if ("PushedAt" == key) {
    column["title"] = "Push";
    column["formatter"] = PushedAt_formatter;
  } else if ("UpdatedAt" == key) {
    column["title"] = "更新";
    column["formatter"] = UpdatedAt_formatter;
  } else {}
  return column;
}

var repo_link_formatter = function(value, data, cell, row, options, formatterParams){
  return getATagString(data, text=data["Name"], href=getRepoUrl(data), title="");
}
var homepage_link_formatter = function(value, data, cell, row, options, formatterParams){
  return "<a href=\""+data["Homepage"]+"\">"+data["Description"]+"</a>";
}
var...