Old school D3 from simpler times

All examples By author By category About

melalj

Full window Github gist

MapTable: Only Table and filters - sorting, virtual columns

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://packet-clearing-house.github.io/maptable/maptable.css">
  <title>Only Table and filters - sorting, virtual columns</title>
</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8"></script>
<script src="https://packet-clearing-house.github.io/maptable/maptable.min.js"></script>

<div id="vizContainer" class='container'></div>

<script>
    var viz = d3.maptable('#vizContainer')
    .json('table.json')
    .columns({
      position: {
        filterMethod: 'dropdown',
      },
      office: {
        filterMethod: 'dropdown',
      },
      start_date: {
        filterMethod: 'compare',
        filterInputType: 'date',
        dataParse: function(val) {
          return new Date(val).getTime();
        }
      },
      salary: {
        filterMethod: 'compare',
        filterInputType: 'number',
        dataParse: function(val) {
          return parseInt(val.replace(/[^0-9]+/g, ''), 10);
        }
      },
      links: {
        virtual: function(d) {
          return '<a href="#' + d.extn+ '">Link</a>';
        }
      }
    })
    .filters({
      show: ['name', 'position', 'office', 'salary', 'start_date']
    })
    .table({
      show: ['name', 'position', 'office', 'salary', 'start_date', 'links']
    })
    .render();
</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js

https://packet-clearing-house.github.io/maptable/maptable.min.js